57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
selected && multiple
|
|
? [
|
|
'wrapper rounded-full px-1 py-1 shadow-md ring-1 ring-black ring-opacity-5',
|
|
]
|
|
: '',
|
|
'flex flex-row items-center',
|
|
]"
|
|
>
|
|
<button
|
|
:class="[
|
|
selected && !multiple ? ' bg-purple-400 hover:bg-purple-300' : '',
|
|
selected && multiple ? ' bg-purple-500 hover:bg-purple-400' : '',
|
|
!selected ? 'hover:bg-gray-100' : '',
|
|
'flex h-12 w-12 items-center justify-center rounded-full shadow-md ring-1 ring-black ring-opacity-5',
|
|
]"
|
|
>
|
|
<component :is="icon" class="h-8 w-8" />
|
|
</button>
|
|
<Transition
|
|
enter-active-class="transition ease-out duration-200"
|
|
enter-from-class="opacity-0 translate-y-1"
|
|
enter-to-class="opacity-100 translate-y-0"
|
|
leave-active-class="transition ease-in duration-150"
|
|
leave-from-class="opacity-100 translate-y-0"
|
|
leave-to-class="opacity-0 translate-y-1"
|
|
>
|
|
<div v-if="selected && multiple" class="flex flex-row space-x-1">
|
|
<div class="ml-1 mr-1 h-12 w-1 border-r-2 border-gray-100"></div>
|
|
|
|
<slot />
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Component } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
icon: Component;
|
|
multiple?: boolean;
|
|
selected?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrapper {
|
|
margin-top: -8px;
|
|
margin-bottom: -8px;
|
|
}
|
|
</style>
|