@noction/vue-bezier 1.0.9 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noction/vue-bezier",
-  "version": "1.0.9",
+  "version": "1.11.2",
   "description": "Vue3 reusable transition components",
   "keywords": [
     "transitions",
@@ -25,8 +25,7 @@
     "email": "soryngitlan@gmail.com"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": "./dist/vue-bezier.js",
@@ -40,20 +39,20 @@
   "types": "dist/types/main.d.ts",
   "type": "module",
   "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",
   "scripts": {

package/src/components/Collapse/CollapseTransition.vue

@@ -1,127 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    move-class="collapse-move"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { BaseTransitionProps } from 'vue'
-import { buildComponentType } from '../../composables'
-import type { ComponentEvents, ComponentProps } from '@/types'
-import { getTimingValue, leave, setAbsolutePosition, setStyles } from '@/composables/useHooks'
-
-const props = withDefaults(defineProps<ComponentProps>(), {
-  delay: 0,
-  duration: 300,
-  group: false,
-  origin: '',
-  styles: () => ({
-    animationFillMode: 'both',
-    animationTimingFunction: 'ease-out'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-
-const hooks: BaseTransitionProps = {
-  onAfterEnter (el) {
-    // for safari: remove class then reset height is necessary
-    el.style.transition = ''
-    el.style.height = ''
-    el.style.overflow = el.dataset.oldOverflow
-
-    emit('after-enter', el)
-  },
-  onAfterLeave (el) {
-    el.style.transition = ''
-    el.style.height = ''
-    el.style.overflow = el.dataset.oldOverflow
-    el.style.paddingTop = el.dataset.oldPaddingTop
-    el.style.paddingBottom = el.dataset.oldPaddingBottom
-
-    emit('after-leave', el)
-  },
-  onBeforeEnter (el) {
-    const enterDuration = getTimingValue(props.duration, 'enter')
-
-    el.style.transition = transitionStyle(enterDuration)
-
-    if (!el.dataset) el.dataset = {}
-
-    el.dataset.oldPaddingTop = el.style.paddingTop
-    el.dataset.oldPaddingBottom = el.style.paddingBottom
-
-    el.style.height = '0'
-    el.style.paddingTop = 0
-    el.style.paddingBottom = 0
-
-    setStyles(props, el)
-
-    emit('before-enter', el)
-  },
-  onBeforeLeave (el) {
-    if (!el.dataset) el.dataset = {}
-
-    el.dataset.oldPaddingTop = el.style.paddingTop
-    el.dataset.oldPaddingBottom = el.style.paddingBottom
-    el.dataset.oldOverflow = el.style.overflow
-
-    el.style.height = `${el.scrollHeight}px`
-    el.style.overflow = 'hidden'
-
-    setStyles(props, el)
-
-    emit('before-leave', el)
-  },
-  onEnter (el) {
-    el.dataset.oldOverflow = el.style.overflow
-
-    if (el.scrollHeight !== 0) {
-      el.style.height = `${el.scrollHeight}px`
-      el.style.paddingTop = el.dataset.oldPaddingTop
-      el.style.paddingBottom = el.dataset.oldPaddingBottom
-    } else {
-      el.style.height = ''
-      el.style.paddingTop = el.dataset.oldPaddingTop
-      el.style.paddingBottom = el.dataset.oldPaddingBottom
-    }
-
-    el.style.overflow = 'hidden'
-  },
-  onLeave (el, done: () => void) {
-    const leaveDuration = getTimingValue(props.duration, 'leave')
-
-    if (el.scrollHeight !== 0) {
-      // for safari: add class after set height, or it will jump to zero height suddenly, weired
-      el.style.transition = transitionStyle(leaveDuration)
-      el.style.height = 0
-      el.style.paddingTop = 0
-      el.style.paddingBottom = 0
-    }
-
-    // necessary for transition-group
-    setAbsolutePosition(props, el)
-
-    leave(props, el, done)
-    emit('leave', el, done)
-  }
-}
-
-const transitionStyle = (duration: number) => {
-  const durationInSeconds = duration / 1000
-
-  return `${durationInSeconds}s height ease-in-out, ${durationInSeconds}s padding-top ease-in-out, ${durationInSeconds}s padding-bottom ease-in-out`
-}
-
-</script>
-
-<style>
-  .collapse-move { transition: transform .3s ease-in-out; }
-</style>

package/src/components/Fade/FadeTransition.vue

@@ -1,52 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    enter-active-class="fade-in"
-    move-class="fade-move"
-    leave-active-class="fade-out"
-    v-bind="{ ...$attrs, ...hooks }"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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: 'ease-out'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style>
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  .fade-in { animation-name: fade-in; }
-  .fade-out { animation-name: fade-out; }
-  .fade-move { transition: transform .3s ease-out; }
-</style>

package/src/components/Scale/ScaleTransition.vue

@@ -1,61 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="scale-in"
-    move-class="scale-move"
-    leave-active-class="scale-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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: 'top left',
-  styles: () => ({
-    animationFillMode: 'both',
-    animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-  }),
-  tag: 'span'
-})
-
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style>
-  @keyframes scale-in {
-    from {
-      opacity: 0;
-      transform: scale(0);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes scale-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: scale(0);
-    }
-  }
-
-  .scale-in { animation-name: scale-in; }
-  .scale-out { animation-name: scale-out; }
-  .scale-move { transition: transform .3s cubic-bezier(.25, .8, .5, 1); }
-</style>

package/src/components/Slide/SlideXLeftTransition.vue

@@ -1,62 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-x-left-in"
-    move-class="slide-move"
-    leave-active-class="slide-x-left-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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)'
-  }),
-  tag: 'span'
-})
-
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes slide-x-left-in {
-    from {
-      opacity: 0;
-      transform: translateX(-15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-x-left-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: translateX(-15px);
-    }
-  }
-
-  .slide-x-left-in { animation-name: slide-x-left-in; }
-  .slide-x-left-out { animation-name: slide-x-left-out; }
-</style>

package/src/components/Slide/SlideXRightTransition.vue

@@ -1,60 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-x-right-in"
-    move-class="slide-move"
-    leave-active-class="slide-x-right-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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)'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes slide-x-right-in {
-    from {
-      opacity: 0;
-      transform: translateX(15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-x-right-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: translateX(15px);
-    }
-  }
-
-  .slide-x-right-in { animation-name: slide-x-right-in; }
-  .slide-x-right-out { animation-name: slide-x-right-out; }
-</style>

package/src/components/Slide/SlideYDownTransition.vue

@@ -1,59 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-y-down-in"
-    leave-active-class="slide-y-down-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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)'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes slide-y-down-in {
-    from {
-      opacity: 0;
-      transform: translateY(15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-y-down-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: translateY(15px);
-    }
-  }
-
-  .slide-y-down-in { animation-name: slide-y-down-in; }
-  .slide-y-down-out { animation-name: slide-y-down-out; }
-</style>

package/src/components/Slide/SlideYUpTransition.vue

@@ -1,61 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    type="animation"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-y-in"
-    move-class="slide-move"
-    leave-active-class="slide-y-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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)'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes slide-y-in {
-    from {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-y-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
-  }
-
-  .slide-y-in { animation-name: slide-y-in; }
-  .slide-y-out { animation-name: slide-y-out; }
-</style>

package/src/components/Slide/move.scss

@@ -1 +0,0 @@
-.slide-move { transition: transform .3s; }

package/src/components/Zoom/ZoomCenterTransition.vue

@@ -1,62 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="zoom-in"
-    move-class="zoom-move"
-    leave-active-class="zoom-out"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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: 'ease-out'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes zoom-in {
-    0% {
-      opacity: 0;
-      transform: scale3d(.3, .3, .3);
-    }
-
-    50% { opacity: 1; }
-  }
-
-  @keyframes zoom-out {
-    0% { opacity: 1; }
-
-    50% {
-      opacity: 0;
-      transform: scale3d(.3, .3, .3);
-    }
-
-    100% { opacity: 0; }
-  }
-
-  .zoom-in { animation-name: zoom-in; }
-  .zoom-out { animation-name: zoom-out; }
-</style>

package/src/components/Zoom/ZoomUpTransition.vue

@@ -1,63 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="zoom-in-up"
-    move-class="zoom-move"
-    leave-active-class="zoom-out-up"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-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: 'ease-out'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(props, emit)
-
-</script>
-
-<style lang="scss">
-  @import 'move';
-
-  @keyframes zoom-in-up {
-    0% {
-      opacity: 0;
-      transform: scaleY(0);
-      transform-origin: top center;
-    }
-
-    50% { opacity: 1; }
-
-    100% { transform: scaleY(1); }
-  }
-
-  @keyframes zoom-out-up {
-    0% { opacity: 1; }
-
-    50% { transform: scaleY(0); }
-
-    100% { opacity: 0; }
-  }
-
-  .zoom-in-up { animation-name: zoom-in-up; }
-  .zoom-out-up { animation-name: zoom-out-up; }
-</style>