@noction/vue-bezier 1.0.9 → 1.10.0

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

@@ -0,0 +1,66 @@
+import type { ComponentProps } from '@/types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ComponentProps>, {
+    delay: number;
+    duration: number;
+    group: boolean;
+    origin: string;
+    styles: () => {
+        animationFillMode: string;
+        animationTimingFunction: string;
+    };
+    tag: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    leave: (el: import("vue").RendererElement, done: () => void) => void;
+    "after-enter": (el: import("vue").RendererElement) => void;
+    "after-leave": (el: import("vue").RendererElement) => void;
+    "before-enter": (el: import("vue").RendererElement) => void;
+    "before-leave": (el: import("vue").RendererElement) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ComponentProps>, {
+    delay: number;
+    duration: number;
+    group: boolean;
+    origin: string;
+    styles: () => {
+        animationFillMode: string;
+        animationTimingFunction: string;
+    };
+    tag: string;
+}>>> & {
+    onLeave?: ((el: import("vue").RendererElement, done: () => void) => any) | undefined;
+    "onAfter-enter"?: ((el: import("vue").RendererElement) => any) | undefined;
+    "onAfter-leave"?: ((el: import("vue").RendererElement) => any) | undefined;
+    "onBefore-enter"?: ((el: import("vue").RendererElement) => any) | undefined;
+    "onBefore-leave"?: ((el: import("vue").RendererElement) => any) | undefined;
+}, {
+    delay: import("@/types").NumberOrTimings;
+    duration: import("@/types").NumberOrTimings;
+    group: boolean;
+    origin: string;
+    styles: Partial<CSSStyleDeclaration>;
+    tag: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/{src/components/index.ts → dist/types/components/index.d.ts}

@@ -1,19 +1,10 @@
-// Exporting components from Collapse directory
 export { default as CollapseTransition } from './Collapse/CollapseTransition.vue';
-
-// Exporting components from Fade directory
 export { default as FadeTransition } from './Fade/FadeTransition.vue';
-
-// Exporting components from Scale directory
 export { default as ScaleTransition } from './Scale/ScaleTransition.vue';
-
-// Exporting components from Slide directory
 export { default as SlideXLeftTransition } from './Slide/SlideXLeftTransition.vue';
 export { default as SlideXRightTransition } from './Slide/SlideXRightTransition.vue';
 export { default as SlideYDownTransition } from './Slide/SlideYDownTransition.vue';
 export { default as SlideYUpTransition } from './Slide/SlideYUpTransition.vue';
-
-// Exporting components from Zoom directory
 export { default as ZoomCenterTransition } from './Zoom/ZoomCenterTransition.vue';
 export { default as ZoomUpTransition } from './Zoom/ZoomUpTransition.vue';
 export { default as ZoomXTransition } from './Zoom/ZoomXTransition.vue';

package/dist/types/composables/buildComponentType.d.ts

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

package/dist/types/composables/index.d.ts

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

package/dist/types/composables/useHooks.d.ts

@@ -0,0 +1,15 @@
+import type { RendererElement } from 'vue';
+import type { ComponentProps, NumberOrTimings } from '@/types';
+declare function getTimingValue(timing: NumberOrTimings | undefined, key: 'enter' | 'leave'): number;
+declare function leave(props: ComponentProps, el: RendererElement, done: () => void): void;
+declare function setStyles(props: ComponentProps, el: RendererElement): void;
+declare function setAbsolutePosition(props: ComponentProps, el: RendererElement): void;
+declare const _default: (props: ComponentProps, emit: any) => {
+    onAfterEnter: (el: RendererElement) => void;
+    onAfterLeave: (el: RendererElement) => void;
+    onBeforeEnter: (el: RendererElement) => void;
+    onBeforeLeave: (el: RendererElement) => void;
+    onLeave: (el: RendererElement, done: () => void) => void;
+};
+export default _default;
+export { getTimingValue, leave, setAbsolutePosition, setStyles };

package/dist/types/main.d.ts

@@ -0,0 +1,7 @@
+export * from './components';
+import type { App } from 'vue';
+export declare function install(app: App): void;
+declare const _default: {
+    install: typeof install;
+};
+export default _default;

package/{src/types/index.ts → dist/types/types/index.d.ts}

@@ -1,53 +1,44 @@
-import { RendererElement } from 'vue'
-
+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]
-}
-
+    '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;
+export {};

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@noction/vue-bezier",
-  "version": "1.0.9",
+  "version": "1.10.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noction/vue-bezier",
-  "version": "1.0.9",
+  "version": "1.10.0",
   "description": "Vue3 reusable transition components",
   "keywords": [
     "transitions",
@@ -25,8 +25,7 @@
     "email": "soryngitlan@gmail.com"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": "./dist/vue-bezier.js",
@@ -39,6 +38,19 @@
   "module": "dist/vue-bezier.js",
   "types": "dist/types/main.d.ts",
   "type": "module",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development vite build --watch",
+    "build:light": "cross-env NODE_ENV=development vite build",
+    "prebuild": "vue-tsc -p tsconfig.build.json",
+    "build": "vite build",
+    "postbuild": "vue-docgen-web-types",
+    "prepublishOnly": "npm run build",
+    "lint:es": "eslint \"src/**/*.{js,ts,vue}\" --fix --color",
+    "lint:style": "stylelint src/**/*.{css,scss,vue} --color --fix",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type:check": "vue-tsc --noEmit"
+  },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",
     "@types/node": "^20.10.5",
@@ -55,17 +67,5 @@
     "vue-tsc": "^1.8.27",
     "vue-docgen-web-types": "^0.1.8"
   },
-  "web-types": "./dist/web-types.json",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development vite build --watch",
-    "build:light": "cross-env NODE_ENV=development vite build",
-    "prebuild": "vue-tsc -p tsconfig.build.json",
-    "build": "vite build",
-    "postbuild": "vue-docgen-web-types",
-    "lint:es": "eslint \"src/**/*.{js,ts,vue}\" --fix --color",
-    "lint:style": "stylelint src/**/*.{css,scss,vue} --color --fix",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "type:check": "vue-tsc --noEmit"
-  }
-}
+  "web-types": "./dist/web-types.json"
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019-PRESENT Noction<sales@noction.com>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

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>