fix: apply position absolute on move

package.json

@@ -14,22 +14,22 @@
     "test:coverage": "pnpm -r --parallel run test:coverage"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
-    "eslint": "^8.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-sort-exports": "^0.8.0",
-    "eslint-plugin-vue": "^9.15.0",
-    "postcss": "^8.4.24",
-    "postcss-html": "^1.5.0",
+    "eslint-plugin-vue": "^9.21.1",
+    "postcss": "^8.4.35",
+    "postcss-html": "^1.6.0",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "stylelint": "^15.9.0",
-    "stylelint-config-css-modules": "^4.2.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recess-order": "^4.2.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-recess-order": "^4.6.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^9.0.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.3"
   }
 }

packages/demo/package.json

@@ -10,20 +10,20 @@
     "lint:style": "stylelint src/**/*.{scss,vue} --color --fix"
   },
   "dependencies": {
+    "@noction/vue-bezier": "workspace:*",
     "prismjs": "^1.29.0",
-    "vue": "^3.3.13",
-    "vue-prism-editor": "2.0.0-alpha.2",
-    "@noction/vue-bezier": "workspace:*"
+    "vue": "^3.4.18",
+    "vue-prism-editor": "2.0.0-alpha.2"
   },
   "devDependencies": {
-    "@types/node": "^20.10.5",
-    "@types/prismjs": "^1.26.0",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "sass": "^1.69.5",
-    "tailwindcss": "^3.4.0",
-    "vite": "^5.0.10",
+    "@types/node": "^20.11.17",
+    "@types/prismjs": "^1.26.3",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "sass": "^1.70.0",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.1",
     "vue-tsc": "^1.8.27"
   }
 }

packages/demo/src/components/DemoGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center overflow-y-auto">
+  <div class="size-full overflow-y-auto">
     <component
       :is="transitionType"
       :duration="{ enter: options.enter, leave: options.leave }"
@@ -9,17 +9,19 @@
     >
       <template v-for="item in items" :key="item">
         <div
-          class="relative rounded-lg border border-blue-700/10 bg-blue-400/20 text-blue-600 dark:border-sky-500 dark:bg-sky-600/50 dark:text-sky-100"
+          class="relative group  select-none rounded-lg border border-blue-700/10 bg-blue-400/20 text-blue-600 dark:border-sky-500 dark:bg-sky-600/50 dark:text-sky-100"
           :class="colors[item % colors.length]"
         >
-          <div class="grid place-content-center h-20 w-20 cursor-default text-xl font-semibold" v-text="item" />
+          <div class="grid place-content-center size-20 cursor-default text-xl font-semibold" v-text="item" />
           <div
-            class="group absolute top-0 right-0 cursor-pointer p-2"
+            class="absolute inset-0 size-full flex items-center justify-center cursor-pointer p-2"
             @click="remove(item)"
           >
             <div
-              class="h-2 w-2 rounded-full bg-current shadow transition group-hover:shadow-current dark:bg-sky-100"
-            />
+              class="size-10 flex justify-center scale-0 rounded-full bg-current shadow transition group-hover:shadow-current group-hover:scale-100 dark:bg-sky-100"
+            >
+              <span class="text-white text-4xl leading-none font-light">-</span>
+            </div>
           </div>
         </div>
       </template>
@@ -50,19 +52,15 @@
   </transition-duration>
 </template>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
 import TransitionDuration from './TransitionDuration.vue'
 import { TransitionInfoKey } from '../../types/symbols'
 import { injectStrict } from '../../utils'
 import { options } from '../composables/options'
 import { ref } from 'vue'
 
+defineOptions({ inheritAttrs: false })
+
 const { transitionType } = injectStrict(TransitionInfoKey)
 
 const colors = [

packages/demo/src/components/DemoSingle.vue

@@ -29,12 +29,6 @@
   </transition-duration>
 </template>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
 import TransitionDuration from './TransitionDuration.vue'
 import { TransitionInfoKey } from '../../types/symbols'
@@ -43,4 +37,5 @@ import { options, state } from '../composables/options'
 
 const { transitionType } = injectStrict(TransitionInfoKey)
 
+defineOptions({ inheritAttrs: false })
 </script>

packages/vue-bezier/package.json

@@ -52,20 +52,20 @@
     "type:check": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.3.1",
-    "@types/node": "^20.10.5",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vitest/coverage-v8": "^1.1.0",
-    "@vue/test-utils": "^2.4.3",
+    "@faker-js/faker": "^8.4.1",
+    "@types/node": "^20.11.17",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vue/test-utils": "^2.4.4",
     "cross-env": "^7.0.3",
-    "jsdom": "^23.0.1",
+    "jsdom": "^24.0.0",
     "minimist": "^1.2.8",
-    "sass": "^1.69.5",
-    "vite": "^5.0.10",
-    "vitest": "^1.1.0",
-    "vue": "^3.3.13",
-    "vue-tsc": "^1.8.27",
-    "vue-docgen-web-types": "^0.1.8"
+    "sass": "^1.70.0",
+    "vite": "^5.1.1",
+    "vitest": "^1.2.2",
+    "vue": "^3.4.18",
+    "vue-docgen-web-types": "^0.1.8",
+    "vue-tsc": "^1.8.27"
   },
   "web-types": "./dist/web-types.json"
 }

packages/vue-bezier/src/components/Collapse/CollapseTransition.vue

@@ -2,15 +2,15 @@
   <component
     :is="componentType"
     :tag="props.tag"
+    name="noc-collapse"
     v-bind="{ ...$attrs, ...hooks }"
-    move-class="collapse-move"
   >
     <slot />
   </component>
 </template>
 
 <script setup lang="ts">
-import { BaseTransitionProps } from 'vue'
+import type { BaseTransitionProps } from 'vue'
 import { buildComponentType } from '../../composables'
 import type { ComponentEvents, ComponentProps } from '@/types'
 import { getTimingValue, leave, setAbsolutePosition, setStyles } from '@/composables/useHooks'
@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<ComponentProps>(), {
   }),
   tag: 'span'
 })
+
 const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
@@ -123,5 +124,5 @@ const transitionStyle = (duration: number) => {
 </script>
 
 <style>
-  .collapse-move { transition: transform .3s ease-in-out; }
+  .noc-collapse-move { transition: transform .3s ease-in-out; }
 </style>

packages/vue-bezier/src/components/Fade/FadeTransition.vue

@@ -2,9 +2,7 @@
   <component
     :is="componentType"
     :tag="props.tag"
-    enter-active-class="fade-in"
-    move-class="fade-move"
-    leave-active-class="fade-out"
+    name="noc-fade"
     v-bind="{ ...$attrs, ...hooks }"
   >
     <slot />
@@ -28,9 +26,11 @@ const props = withDefaults(defineProps<ComponentProps>(), {
   }),
   tag: 'span'
 })
+
 const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
+
 const hooks = useHooks(props, emit)
 
 </script>
@@ -46,7 +46,7 @@ const hooks = useHooks(props, emit)
     to { opacity: 0; }
   }
 
-  .fade-in { animation-name: fade-in; }
-  .fade-out { animation-name: fade-out; }
-  .fade-move { transition: transform .3s ease-out; }
+  .noc-fade-enter-active { animation-name: fade-in; }
+  .noc-fade-leave-active { animation-name: fade-out; }
+  .noc-fade-move { transition: transform .35s ease-out; }
 </style>

packages/vue-bezier/src/components/Scale/ScaleTransition.vue

@@ -2,10 +2,8 @@
   <component
     :is="componentType"
     :tag="props.tag"
+    name="noc-scale"
     v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="scale-in"
-    move-class="scale-move"
-    leave-active-class="scale-out"
   >
     <slot />
   </component>
@@ -24,14 +22,15 @@ const props = withDefaults(defineProps<ComponentProps>(), {
   origin: 'top left',
   styles: () => ({
     animationFillMode: 'both',
-    animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+    animationTimingFunction: 'ease-out'
   }),
   tag: 'span'
 })
 
 const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
+
 const hooks = useHooks(props, emit)
 
 </script>
@@ -55,7 +54,7 @@ const hooks = useHooks(props, emit)
     }
   }
 
-  .scale-in { animation-name: scale-in; }
-  .scale-out { animation-name: scale-out; }
-  .scale-move { transition: transform .3s cubic-bezier(.25, .8, .5, 1); }
+  .noc-scale-enter-active { animation-name: scale-in; }
+  .noc-scale-leave-active { animation-name: scale-out; }
+  .noc-scale-move { transition: transform .3s cubic-bezier(.25, .8, .5, 1); }
 </style>

packages/vue-bezier/src/components/Slide/SlideXLeftTransition.vue

@@ -2,10 +2,8 @@
   <component
     :is="componentType"
     :tag="props.tag"
+    name="noc-slide-left"
     v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-x-left-in"
-    move-class="slide-move"
-    leave-active-class="slide-x-left-out"
   >
     <slot />
   </component>
@@ -24,21 +22,20 @@ const props = withDefaults(defineProps<ComponentProps>(), {
   origin: '',
   styles: () => ({
     animationFillMode: 'both',
-    animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+    animationTimingFunction: 'ease-out'
   }),
   tag: 'span'
 })
 
 const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
+
 const hooks = useHooks(props, emit)
 
 </script>
 
-<style lang="scss">
-  @import 'move';
-
+<style>
   @keyframes slide-x-left-in {
     from {
       opacity: 0;
@@ -57,6 +54,7 @@ const hooks = useHooks(props, emit)
     }
   }
 
-  .slide-x-left-in { animation-name: slide-x-left-in; }
-  .slide-x-left-out { animation-name: slide-x-left-out; }
+  .noc-slide-left-enter-active { animation-name: slide-x-left-in; }
+  .noc-slide-left-leave-active { animation-name: slide-x-left-out; }
+  .noc-slide-left-move { transition: transform .3s ease-out; }
 </style>

packages/vue-bezier/src/components/Slide/SlideXRightTransition.vue

@@ -2,10 +2,8 @@
   <component
     :is="componentType"
     :tag="props.tag"
+    name="noc-slide-right"
     v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-x-right-in"
-    move-class="slide-move"
-    leave-active-class="slide-x-right-out"
   >
     <slot />
   </component>
@@ -16,27 +14,28 @@ import type { ComponentEvents, ComponentProps } from '@/types'
 import { buildComponentType, useHooks } from '@/composables'
 
 defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<ComponentProps>(), {
   delay: 0,
   duration: 300,
   group: false,
   origin: '',
   styles: () => ({
     animationFillMode: 'both',
-    animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
+    animationTimingFunction: 'ease-out'
   }),
   tag: 'span'
 })
+
 const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
+
 const hooks = useHooks(props, emit)
 
 </script>
 
-<style lang="scss">
-  @import 'move';
-
+<style>
   @keyframes slide-x-right-in {
     from {
       opacity: 0;
@@ -55,6 +54,7 @@ const hooks = useHooks(props, emit)
     }
   }
 
-  .slide-x-right-in { animation-name: slide-x-right-in; }
-  .slide-x-right-out { animation-name: slide-x-right-out; }
+  .noc-slide-right-enter-active { animation-name: slide-x-right-in; }
+  .noc-slide-right-leave-active { animation-name: slide-x-right-out; }
+  .noc-slide-right-move { transition: transform .3s ease-out; }
 </style>