fix: component transitions

packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue

@@ -80,17 +80,18 @@ onClickOutside(container, () => {
 const attrsOmitted = omit(attrs, ['class'])
 
 const contextMenuTransitions = {
-  enter: variant.value.enterActiveClass,
-  enterFrom: variant.value.enterFromClass,
-  enterTo: variant.value.enterToClass,
-  leave: variant.value.leaveActiveClass,
-  leaveFrom: variant.value.leaveFromClass,
-  leaveTo: variant.value.leaveToClass,
+  enterActiveClass: variant.value.enterActiveClass,
+  enterFromClass: variant.value.enterFromClass,
+  enterToClass: variant.value.enterToClass,
+  leaveActiveClass: variant.value.leaveActiveClass,
+  leaveFromClass: variant.value.leaveFromClass,
+  leaveToClass: variant.value.leaveToClass,
 }
 </script>
 
 <template>
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrsOmitted">
+    <!-- @vue-ignore -->
     <Transition appear v-bind="contextMenuTransitions">
       <div :class="[variant.contextMenuBase, variant.ring, variant.rounded, variant.shadow, variant.background]">
         <slot />

packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue

@@ -107,7 +107,7 @@ const transitionClass = computed(() => {
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <HDialog :class="wrapperClass" v-bind="attrsOmitted" @close="(e) => !preventClose && close(e)">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" :bind="overlayTransitions">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="overlayTransitions">
         <div :class="[variant.overlayBase, variant.overlayBackground]" />
       </TransitionChild>
 

packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue

@@ -127,12 +127,12 @@ function onMouseLeave() {
 const attrsOmitted = omit(attrs, ['class'])
 
 const popoverTransitions = {
-  enter: variant.value.transitionEnterActiveClass,
-  enterFrom: variant.value.transitionEnterFromClass,
-  enterTo: variant.value.transitionEnterToClass,
-  leave: variant.value.transitionLeaveActiveClass,
-  leaveFrom: variant.value.transitionLeaveFromClass,
-  leaveTo: variant.value.transitionLeaveToClass,
+  enterActiveClass: variant.value.transitionEnterActiveClass,
+  enterFromClass: variant.value.transitionEnterFromClass,
+  enterToClass: variant.value.transitionEnterToClass,
+  leaveClass: variant.value.transitionLeaveActiveClass,
+  leaveFromClass: variant.value.transitionLeaveFromClass,
+  leaveToClass: variant.value.transitionLeaveToClass,
 }
 </script>
 

packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue

@@ -107,12 +107,12 @@ function onMouseLeave() {
 const attrsOmitted = omit(attrs, ['class'])
 
 const toolTipTransitions = {
-  enter: variant.value.transitionEnterActiveClass,
-  enterFrom: variant.value.transitionEnterFromClass,
-  enterTo: variant.value.transitionEnterToClass,
-  leave: variant.value.transitionLeaveActiveClass,
-  leaveFrom: variant.value.transitionLeaveFromClass,
-  leaveTo: variant.value.transitionLeaveToClass,
+  enterActiveClass: variant.value.transitionEnterActiveClass,
+  enterFromClass: variant.value.transitionEnterFromClass,
+  enterToClass: variant.value.transitionEnterToClass,
+  leaveActiveClass: variant.value.transitionLeaveActiveClass,
+  leaveFromClass: variant.value.transitionLeaveFromClass,
+  leaveToClass: variant.value.transitionLeaveToClass,
 }
 </script>
 
@@ -123,6 +123,7 @@ const toolTipTransitions = {
     </slot>
 
     <div v-if="open && !prevent" ref="container" :class="[variant.container, variant.width]">
+      <!-- @vue-ignore -->
       <Transition appear v-bind="toolTipTransitions">
         <div :class="[variant.toolTipBase, variant.background, variant.color, variant.rounded, variant.shadow, variant.ring]">
           <slot name="text">