@noction/vue-bezier 1.0.5 → 1.0.6

package/src/components/Zoom/ZoomYTransition.vue

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

package/src/{composable → composables}/buildComponentType.ts

@@ -1,4 +1,5 @@
+import { ComponentProps } from '@/types'
 import { Component, Transition, TransitionGroup } from 'vue'
 
-export default (props): Component =>
+export default (props: ComponentProps): Component =>
   props.group ? TransitionGroup : Transition

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+import buildComponentType from './buildComponentType'
+import useHooks from './useHooks'
+
+export { buildComponentType, useHooks }

package/src/composables/useHooks.ts

@@ -0,0 +1,110 @@
+import type { BaseTransitionProps, RendererElement } from 'vue'
+import type { ComponentProps, NumberOrTimings } from '@/types'
+
+function getTimingValue (timing: NumberOrTimings | undefined, key: 'enter' | 'leave'): number {
+  if (typeof timing === 'number') {
+    return timing
+  }
+
+  if (typeof timing === 'object' && timing !== null) {
+    return timing[key] ?? 0
+  }
+
+  return 0
+}
+
+function beforeEnter (props: ComponentProps, el: RendererElement) {
+  const enterDuration = getTimingValue(props.duration, 'enter')
+  const enterDelay = getTimingValue(props.delay, 'enter')
+
+  el.style.animationDuration = `${enterDuration}ms`
+  el.style.animationDelay = `${enterDelay}ms`
+
+  setStyles(props, el)
+}
+
+function beforeLeave (props: ComponentProps, el: RendererElement) {
+  const leaveDuration = getTimingValue(props.duration, 'leave')
+  const leaveDelay = getTimingValue(props.delay, 'leave')
+
+  el.style.animationDuration = `${leaveDuration}ms`
+  el.style.animationDelay = `${leaveDelay}ms`
+
+  setStyles(props, el)
+}
+
+function leave (props: ComponentProps, el: RendererElement, done: () => void) {
+  setAbsolutePosition(props, el)
+
+  const leaveDuration = getTimingValue(props.duration, 'leave')
+  const leaveDelay = getTimingValue(props.delay, 'leave')
+
+  setTimeout(done, leaveDuration + leaveDelay)
+}
+
+function cleanUpStyles (props: ComponentProps, el: RendererElement) {
+  if (props.styles) {
+    Object
+      .entries(props.styles)
+      .forEach(([key]) => {
+        if (key in el.style) {
+          el.style[key] = ''
+        }
+      })
+  }
+
+  el.style.animationDuration = ''
+  el.style.animationDelay = ''
+}
+
+function setStyles (props: ComponentProps, el: RendererElement)  {
+  setTransformOrigin(props, el)
+
+  if (props.styles) {
+    Object
+      .entries(props.styles)
+      .forEach(([key, value]) => {
+        if (key in el.style) {
+          el.style[key] = value
+        }
+      })
+  }
+}
+
+function setAbsolutePosition  (props: ComponentProps, el: RendererElement)  {
+  if (props.group) el.style.position = 'absolute'
+}
+
+function setTransformOrigin (props: ComponentProps, el: RendererElement)  {
+  if (props.origin) el.style.transformOrigin = props.origin
+}
+
+export default (props: ComponentProps, emit: any) => ({
+  onAfterEnter: (el: RendererElement) => {
+    cleanUpStyles(props, el)
+    emit('after-enter', el)
+  },
+  onAfterLeave: (el: RendererElement) => {
+    cleanUpStyles(props, el)
+    emit('after-leave', el)
+  },
+  onBeforeEnter: (el: RendererElement) => {
+    beforeEnter(props, el)
+    emit('before-enter', el)
+  },
+  onBeforeLeave: (el: RendererElement) => {
+    beforeLeave(props, el)
+    emit('before-leave', el)
+  },
+  onLeave: (el: RendererElement, done: () => void) => {
+    leave(props, el, done)
+    emit('leave', el, done)
+  }
+})
+
+export {
+  getTimingValue,
+  leave,
+  setAbsolutePosition,
+  setStyles
+}

package/src/main.ts

@@ -0,0 +1,48 @@
+import { App } from 'vue'
+
+import CollapseTransition from './components/Collapse/CollapseTransition.vue'
+
+import FadeTransition from './components/Fade/FadeTransition.vue'
+
+import ScaleTransition from './components/Scale/ScaleTransition.vue'
+
+import SlideXLeftTransition from './components/Slide/SlideXLeftTransition.vue'
+import SlideXRightTransition from './components/Slide/SlideXRightTransition.vue'
+import SlideYDownTransition from './components/Slide/SlideYDownTransition.vue'
+import SlideYUpTransition from './components/Slide/SlideYUpTransition.vue'
+
+import ZoomCenterTransition from './components/Zoom/ZoomCenterTransition.vue'
+import ZoomUpTransition from './components/Zoom/ZoomUpTransition.vue'
+import ZoomXTransition from './components/Zoom/ZoomXTransition.vue'
+import ZoomYTransition from './components/Zoom/ZoomYTransition.vue'
+
+export const components = {
+  CollapseTransition,
+  FadeTransition,
+  ScaleTransition,
+  SlideXLeftTransition,
+  SlideXRightTransition,
+  SlideYDownTransition,
+  SlideYUpTransition,
+  ZoomCenterTransition,
+  ZoomUpTransition,
+  ZoomXTransition,
+  ZoomYTransition
+}
+
+export function install (app: App) {
+  // @ts-expect-error it's a custom flag
+  if (app.$_vueBezierInstalled) return
+  // @ts-expect-error it's a custom flag
+  app.$_vueBezierInstalled = true
+
+  Object
+    .entries(components)
+    .forEach(([key, component]) =>
+      app.component(key, component)
+    )
+}
+
+export default {
+  install
+}

package/src/types/index.ts

@@ -0,0 +1,53 @@
+import { RendererElement } from 'vue'
+
+export type ComponentEvents = {
+    'after-enter': [el: RendererElement],
+    'after-leave': [el: RendererElement],
+    'before-enter': [el: RendererElement],
+    'before-leave': [el: RendererElement],
+    'leave': [el: RendererElement, done: () => void]
+}
+
+export type ComponentProps = {
+    /**
+     * Transition delay. Number for specifying the same delay for enter/leave transitions
+     * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
+     */
+    delay?: NumberOrTimings;
+
+    /**
+     * Transition duration. Number for specifying the same duration for enter/leave transitions
+     * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
+     */
+    duration?: NumberOrTimings;
+
+    /**
+     * Whether the component should be a `transition-group` component.
+     */
+    group?: boolean;
+
+    /**
+     * Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
+     * Can be specified with styles as well, but it's shorter with this prop
+     */
+    origin?: string;
+
+    /**
+     * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
+     */
+    styles?: Styles;
+
+    /**
+     * Transition tag, in case the component is a `transition-group`
+     */
+    tag?: string;
+}
+
+type TransitionTimings = {
+    enter: number;
+    leave: number;
+}
+
+type Styles = Partial<CSSStyleDeclaration>;
+
+export type NumberOrTimings = number | TransitionTimings;

package/dist/Collapse/CollapseTransition.vue.d.ts

@@ -1,14 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    props: {
-        [x: string]: any;
-    };
-    emit: any;
-    componentType: any;
-    tag: any;
-    hooks: import("vue").BaseTransitionProps<import("vue").RendererElement>;
-    enterDuration: any;
-    leaveDuration: any;
-    transitionStyle: (duration: number) => string;
-    durationInSeconds: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/dist/Fade/FadeTransition.vue.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Scale/ScaleTransition.vue.d.ts

@@ -1,26 +0,0 @@
-export declare const customProps: {
-    origin: {
-        default: string;
-        type: StringConstructor;
-    };
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Slide/SlideXLeftTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Slide/SlideXRightTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Slide/SlideYDownTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Slide/SlideYUpTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Zoom/ZoomCenterTransition.vue.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Zoom/ZoomUpTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Zoom/ZoomXTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/Zoom/ZoomYTransition.vue.d.ts

@@ -1,22 +0,0 @@
-export declare const customProps: {
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-};
-declare const _default: {
-    setup(): {
-        props: {
-            [x: string]: any;
-        };
-        emit: any;
-        componentType: any;
-        tag: any;
-        hooks: any;
-    };
-    inheritAttrs: boolean;
-};
-export default _default;

package/dist/composable/buildComponentType.d.ts

@@ -1,3 +0,0 @@
-import { Component } from 'vue';
-declare const _default: (props: any) => Component;
-export default _default;

package/dist/composable/buildEmits.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => string[];
-export default _default;

package/dist/composable/buildHooks.d.ts

@@ -1,7 +0,0 @@
-import { BaseTransitionProps, RendererElement } from 'vue';
-declare const leave: (props: any, el: RendererElement, done: () => void) => void;
-declare const setStyles: (props: any, el: RendererElement) => void;
-declare const setAbsolutePosition: (props: any, el: RendererElement) => void;
-declare const _default: (props: any, emit: any) => BaseTransitionProps;
-export default _default;
-export { leave, setAbsolutePosition, setStyles };

package/dist/composable/buildProps.d.ts

@@ -1,48 +0,0 @@
-declare const _default: (customProps?: Record<string, unknown>) => {
-    /**
-     * Transition delay. Number for specifying the same delay for enter/leave transitions
-     * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
-     */
-    delay: {
-        default: number;
-        type: (ObjectConstructor | NumberConstructor)[];
-    };
-    /**
-     * Transition duration. Number for specifying the same duration for enter/leave transitions
-     * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
-     */
-    duration: {
-        default: number;
-        type: (ObjectConstructor | NumberConstructor)[];
-    };
-    /**
-     * Whether the component should be a `transition-group` component.
-     */
-    group: BooleanConstructor;
-    /**
-     *  Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
-     *  Can be specified with styles as well but it's shorter with this prop
-     */
-    origin: {
-        default: string;
-        type: StringConstructor;
-    };
-    /**
-     * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
-     */
-    styles: {
-        default: () => {
-            animationFillMode: string;
-            animationTimingFunction: string;
-        };
-        type: ObjectConstructor;
-    };
-    /**
-     * Transition tag, in case the component is a `transition-group`
-     */
-    tag: {
-        default: string;
-        type: StringConstructor;
-    };
-};
-export default _default;

package/dist/composable/buildTag.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (props: any) => any;
-export default _default;

package/dist/composable/index.d.ts

@@ -1,6 +0,0 @@
-import buildComponentType from './buildComponentType';
-import buildEmits from './buildEmits';
-import buildHooks from './buildHooks';
-import buildProps from './buildProps';
-import buildTag from './buildTag';
-export { buildComponentType, buildEmits, buildHooks, buildProps, buildTag };

package/dist/index.d.ts

@@ -1,17 +0,0 @@
-import PrivateCollapseTransition from './components/Collapse/CollapseTransition.vue';
-import PrivateFadeTransition from './components/Fade/FadeTransition.vue';
-import PrivateScaleTransition from './components/Scale/ScaleTransition.vue';
-import PrivateSlideXLeftTransition from './components/Slide/SlideXLeftTransition.vue';
-import PrivateSlideXRightTransition from './components/Slide/SlideXRightTransition.vue';
-import PrivateSlideYDownTransition from './components/Slide/SlideYDownTransition.vue';
-import PrivateSlideYUpTransition from './components/Slide/SlideYUpTransition.vue';
-import PrivateZoomCenterTransition from './components/Zoom/ZoomCenterTransition.vue';
-import PrivateZoomUpTransition from './components/Zoom/ZoomUpTransition.vue';
-import PrivateZoomXTransition from './components/Zoom/ZoomXTransition.vue';
-import PrivateZoomYTransition from './components/Zoom/ZoomYTransition.vue';
-export { PrivateCollapseTransition as CollapseTransition, PrivateFadeTransition as FadeTransition, PrivateScaleTransition as ScaleTransition, PrivateSlideXLeftTransition as SlideXLeftTransition, PrivateSlideXRightTransition as SlideXRightTransition, PrivateSlideYDownTransition as SlideYDownTransition, PrivateSlideYUpTransition as SlideYUpTransition, PrivateZoomCenterTransition as ZoomCenterTransition, PrivateZoomUpTransition as ZoomUpTransition, PrivateZoomXTransition as ZoomXTransition, PrivateZoomYTransition as ZoomYTransition };
-export declare function install(app: any): void;
-declare const _default: {
-    install: typeof install;
-};
-export default _default;