chore(preset): handle transitions

This commit is contained in:
Benjamin Canac
2022-10-04 23:56:54 +02:00
parent e5bf052c1f
commit b20c8c82ab
6 changed files with 89 additions and 48 deletions

View File

@@ -7,15 +7,7 @@
</MenuButton>
<div v-if="open" ref="container" :class="containerClass" @mouseover="onMouseOver">
<transition
appear
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-out"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<transition appear v-bind="transitionClass">
<MenuItems :class="baseClass" static>
<div v-for="(subItems, index) of items" :key="index" class="py-1">
<MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }" :disabled="item.disabled" as="div">
@@ -105,6 +97,10 @@ const props = defineProps({
type: String,
default: () => $ui.dropdown.base
},
transitionClass: {
type: Object,
default: () => $ui.dropdown.transition
},
itemBaseClass: {
type: String,
default: () => $ui.dropdown.item.base