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
+      <transition appear v-bind="transitionClass">
-        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"
-      >
         <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
+  <transition appear v-bind="transitionClass">
-    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"
-  >
     <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
+      <transition appear v-bind="transitionClass">
-        appear
+        <PopoverPanel :class="baseClass" static>
-        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>
           <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
+      <transition appear v-bind="transitionClass">
-        appear
+        <div :class="baseClass">
-        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">
           <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
   }
 })
 

src/runtime/presets/default.ts

@@ -214,6 +214,11 @@ export default (variantColors: string[]) => {
           inactive: 'text-primary-600',
           size: 'h-5 w-5'
         }
+      },
+      transition: {
+        leaveActiveClass: 'transition ease-in duration-100',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0'
       }
     }
   }
@@ -322,6 +327,14 @@ export default (variantColors: string[]) => {
       icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
       avatar: '-m-0.5 group-hover:u-bg-gray-200 flex-shrink-0',
       shortcuts: 'flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
+    },
+    transition: {
+      enterActiveClass: 'transition duration-100 ease-out',
+      enterFromClass: 'transform scale-95 opacity-0',
+      enterToClass: 'transform scale-100 opacity-100',
+      leaveActiveClass: 'transition duration-75 ease-out',
+      leaveFromClass: 'transform scale-100 opacity-100',
+      leaveToClass: 'transform scale-95 opacity-0'
     }
   }
 
@@ -415,6 +428,42 @@ export default (variantColors: string[]) => {
         success: 'text-green-400',
         error: 'text-red-400'
       }
+    },
+    transition: {
+      enterActiveClass: 'transform ease-out duration-300 transition',
+      enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
+      enterToClass: 'translate-y-0 opacity-100 sm:translate-x-0',
+      leaveActiveClass: 'transition ease-in duration-100',
+      leaveFromClass: 'opacity-100',
+      leaveToClass: 'opacity-0'
+    }
+  }
+
+  const tooltip = {
+    wrapper: 'relative inline-flex',
+    container: 'z-10 py-2',
+    base: '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',
+    transition: {
+      enterActiveClass: 'transition ease-out duration-200',
+      enterFromClass: 'opacity-0 translate-y-1',
+      enterToClass: 'opacity-100 translate-y-0',
+      leaveActiveClass: 'transition ease-in duration-150',
+      leaveFromClass: 'opacity-100 translate-y-0',
+      leaveToClass: 'opacity-0 translate-y-1'
+    }
+  }
+
+  const popover = {
+    wrapper: 'relative',
+    container: 'z-10 py-2',
+    base: '',
+    transition: {
+      enterActiveClass: 'transition ease-out duration-200',
+      enterFromClass: 'opacity-0 translate-y-1',
+      enterToClass: 'opacity-100 translate-y-0',
+      leaveActiveClass: 'transition ease-in duration-150',
+      leaveFromClass: 'opacity-100 translate-y-0',
+      leaveToClass: 'opacity-0 translate-y-1'
     }
   }
 
@@ -440,6 +489,8 @@ export default (variantColors: string[]) => {
     avatar,
     avatarGroup,
     slideover,
-    notification
+    notification,
+    tooltip,
+    popover
   }
 }