chore(preset): handle transitions

src/runtime/components/elements/Dropdown.vue

@@ -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

src/runtime/components/forms/SelectCustom.vue

@@ -28,7 +28,7 @@
     </ComboboxButton>
 
     <div v-if="open" ref="container" :class="listContainerClass">
-      <transition appear leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+      <transition appear v-bind="listTransitionClass">
         <ComboboxOptions static :class="listBaseClass">
           <ComboboxInput
             v-if="searchable"
@@ -192,6 +192,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.selectCustom.list.input
   },
+  listTransitionClass: {
+    type: Object,
+    default: () => $ui.selectCustom.list.transition
+  },
   listOptionBaseClass: {
     type: String,
     default: () => $ui.selectCustom.list.option.base

src/runtime/components/overlays/Notification.vue

@@ -1,13 +1,5 @@
 <template>
-  <transition
-    appear
-    enter-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-    enter-active-class="transition duration-300 ease-out transform"
-    enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-    leave-class="opacity-100"
-    leave-active-class="transition duration-100 ease-in"
-    leave-to-class="opacity-0"
-  >
+  <transition appear v-bind="transitionClass">
     <div
       :class="['z-50 w-full pointer-events-auto', backgroundClass, roundedClass, shadowClass]"
       @mouseover="onMouseover"
@@ -102,6 +94,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.notification.rounded
   },
+  transitionClass: {
+    type: Object,
+    default: () => $ui.notification.transition
+  },
   customClass: {
     type: String,
     default: null

src/runtime/components/overlays/Popover.vue

@@ -7,16 +7,8 @@
     </PopoverButton>
 
     <div v-if="open" ref="container" :class="containerClass" @mouseover="onMouseOver">
-      <transition
-        appear
-        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"
-      >
-        <PopoverPanel :class="panelClass" static>
+      <transition appear v-bind="transitionClass">
+        <PopoverPanel :class="baseClass" static>
           <slot name="panel" :open="open" :close="close" />
         </PopoverPanel>
       </transition>
@@ -29,6 +21,7 @@ import type { Ref } from 'vue'
 import { ref, onMounted } from 'vue'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../utils'
+import $ui from '#build/ui'
 
 const props = defineProps({
   placement: {
@@ -48,15 +41,19 @@ const props = defineProps({
   },
   wrapperClass: {
     type: String,
-    default: 'relative'
+    default: () => $ui.popover.wrapper
   },
   containerClass: {
     type: String,
-    default: 'z-10 py-2'
+    default: () => $ui.popover.container
   },
-  panelClass: {
+  baseClass: {
     type: String,
-    default: ''
+    default: () => $ui.popover.base
+  },
+  transitionClass: {
+    type: Object,
+    default: () => $ui.popover.transition
   }
 })
 

src/runtime/components/overlays/Tooltip.vue

@@ -5,16 +5,8 @@
     </slot>
 
     <div v-if="open" ref="container" :class="containerClass">
-      <transition
-        appear
-        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 :class="tooltipClass">
+      <transition appear v-bind="transitionClass">
+        <div :class="baseClass">
           <slot name="text">
             {{ text }}
           </slot>
@@ -27,6 +19,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { usePopper } from '../../utils'
+import $ui from '#build/ui'
 
 const props = defineProps({
   text: {
@@ -49,15 +42,19 @@ const props = defineProps({
   },
   wrapperClass: {
     type: String,
-    default: 'relative inline-flex'
+    default: () => $ui.tooltip.wrapper
   },
   containerClass: {
     type: String,
-    default: 'z-10 py-2'
+    default: () => $ui.tooltip.container
   },
-  tooltipClass: {
+  baseClass: {
     type: String,
-    default: 'flex items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible u-bg-gray-800 truncate u-text-gray-50 text-xs'
+    default: () => $ui.tooltip.base
+  },
+  transitionClass: {
+    type: Object,
+    default: () => $ui.tooltip.transition
   }
 })