@noction/vue-bezier 1.0.5 → 1.0.7

package/src/components/Collapse/CollapseTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     move-class="collapse-move"
   >
@@ -11,19 +11,24 @@
 
 <script setup lang="ts">
 import { BaseTransitionProps } from 'vue'
-import {
-  buildComponentType,
-  buildEmits,
-  buildProps,
-  buildTag
-} from '../../composable'
-import { leave, setAbsolutePosition, setStyles } from '../../composable/buildHooks'
-
-const props = defineProps(buildProps())
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
 
 const hooks: BaseTransitionProps = {
   onAfterEnter (el) {
@@ -44,7 +49,7 @@ const hooks: BaseTransitionProps = {
     emit('after-leave', el)
   },
   onBeforeEnter (el) {
-    const enterDuration = props.duration?.enter ?? props.duration ?? 0
+    const enterDuration = getTimingValue(props.duration, 'enter')
 
     el.style.transition = transitionStyle(enterDuration)
 
@@ -91,7 +96,7 @@ const hooks: BaseTransitionProps = {
     el.style.overflow = 'hidden'
   },
   onLeave (el, done: () => void) {
-    const leaveDuration = props.duration.leave ?? props.duration ?? 0
+    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

package/src/components/Fade/FadeTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     enter-active-class="fade-in"
     move-class="fade-move"
     leave-active-class="fade-out"
@@ -11,27 +11,27 @@
   </component>
 </template>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps())
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Scale/ScaleTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="scale-in"
     move-class="scale-move"
@@ -11,43 +11,28 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  origin: {
-    default: 'top left',
-    type: String
-  },
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-      }
-    },
-    type: Object
-  }
-}
+<script setup lang="ts">
+import type { ComponentEvents, ComponentProps } from '@/types'
+import { buildComponentType, useHooks } from '@/composables'
 
-export default {
-  inheritAttrs: false
-}
-</script>
+defineOptions({ inheritAttrs: false })
 
-<script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
+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 props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
-const tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Slide/SlideXLeftTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="slide-x-left-in"
     move-class="slide-move"
@@ -11,39 +11,28 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-      }
-    },
-    type: Object
-  }
-}
+<script setup lang="ts">
+import type { ComponentEvents, ComponentProps } from '@/types'
+import { buildComponentType, useHooks } from '@/composables'
 
-export default {
-  inheritAttrs: false
-}
-</script>
+defineOptions({ inheritAttrs: false })
 
-<script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
+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 props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
-const tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Slide/SlideXRightTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="slide-x-right-in"
     move-class="slide-move"
@@ -11,39 +11,26 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-      }
-    },
-    type: Object
-  }
-}
-
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Slide/SlideYDownTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="slide-y-down-in"
     leave-active-class="slide-y-down-out"
@@ -10,39 +10,26 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-      }
-    },
-    type: Object
-  }
-}
-
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Slide/SlideYUpTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     type="animation"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="slide-y-in"
@@ -12,39 +12,26 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.25,.8,.50,1)'
-      }
-    },
-    type: Object
-  }
-}
-
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Zoom/ZoomCenterTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="zoom-in"
     move-class="zoom-move"
@@ -11,27 +11,26 @@
   </component>
 </template>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps())
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Zoom/ZoomUpTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     v-bind="{ ...$attrs, ...hooks }"
     enter-active-class="zoom-in-up"
     move-class="zoom-move"
@@ -11,39 +11,27 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'ease-out'
-      }
-    },
-    type: Object
-  }
-}
-
-export default {
-  inheritAttrs: false
-}
-</script>
-
 <script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
-
-const props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+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 tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>
 

package/src/components/Zoom/ZoomXTransition.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentType"
-    :tag="tag"
+    :tag="props.tag"
     enter-active-class="zoom-in-x"
     move-class="zoom-move"
     leave-active-class="zoom-out-x"
@@ -11,39 +11,28 @@
   </component>
 </template>
 
-<script lang="ts">
-export const customProps = {
-  styles: {
-    default: () => {
-      return {
-        animationFillMode: 'both',
-        animationTimingFunction: 'cubic-bezier(.55,0,.1,1)'
-      }
-    },
-    type: Object
-  }
-}
+<script setup lang="ts">
+import type { ComponentEvents, ComponentProps } from '@/types'
+import { buildComponentType, useHooks } from '@/composables'
 
-export default {
-  inheritAttrs: false
-}
-</script>
+defineOptions({ inheritAttrs: false })
 
-<script setup lang="ts">
-import {
-  buildComponentType,
-  buildEmits,
-  buildHooks,
-  buildProps,
-  buildTag
-} from '../../composable'
+const props = withDefaults(defineProps<ComponentProps>(), {
+  delay: 0,
+  duration: 300,
+  group: false,
+  origin: '',
+  styles: () => ({
+    animationFillMode: 'both',
+    animationTimingFunction: 'cubic-bezier(.55,0,.1,1)'
+  }),
+  tag: 'span'
+})
 
-const props = defineProps(buildProps(customProps))
-const emit = defineEmits(buildEmits())
+const emit = defineEmits<ComponentEvents>()
 
 const componentType = buildComponentType(props)
-const tag = buildTag(props)
-const hooks = buildHooks(props, emit)
+const hooks = useHooks(props, emit)
 
 </script>