Merge pull request #152 from cuiyajie/main

fix: component transitions
selemondev · Sep 25, 2023 · 6b6547e · 6b6547e
2 parents 564fc0c + 2fd29b6
commit 6b6547e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/packages/nuxt-ui-vue/src/components/overlays/ContextMenu/UContextMenu.vue b/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 />

diff --git a/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue b/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>
 

diff --git a/packages/nuxt-ui-vue/src/components/overlays/Popover/UPopover.vue b/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>
 

diff --git a/packages/nuxt-ui-vue/src/components/overlays/Tooltip/UTooltip.vue b/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">