@noction/vue-bezier 1.12.0 → 2.0.1

package/README.md

@@ -9,95 +9,172 @@
 ## Install :coffee:
 
 ```bash
-npm i -S @noction/vue-bezier
+pnpm add @noction/vue-bezier
 ```
 
 ## Local usage :rocket:
 
 ```vue
-<template>
-   <fade-transition>
-      <div class="box" v-show="show">
-        <p>Fade transition</p>
-      </div>
-    </fade-transition>
-</template>
-
-<script>
+<script setup>
+import { DissolveTransition } from '@noction/vue-bezier'
+import { ref } from 'vue'
 import '@noction/vue-bezier/styles'
-import { FadeTransition } from '@noction/vue-bezier'
 
-export default {
-  components: {
-    FadeTransition
-  }
-}
+const show = ref(true)
 </script>
+
+<template>
+  <DissolveTransition :duration="400">
+    <div v-if="show" class="box">
+      <p>Dissolve transition</p>
+    </div>
+  </DissolveTransition>
+</template>
 ```
 
 ## Global usage
+
 ```js
-import '@noction/vue-bezier/styles'
 import Transitions from '@noction/vue-bezier'
 import { createApp } from 'vue'
+import '@noction/vue-bezier/styles'
 
 const app = createApp(App)
 app.use(Transitions)
 ```
 
 ## List of available transitions
-- FadeTransition
-- ZoomCenterTransition
-- ZoomXTransition
-- ZoomYTransition
-- SlideXLeftTransition
-- SlideXRightTransition
-- SlideYUpTransition
-- SlideYDownTransition
-- ScaleTransition
-- CollapseTransition
+
+### Single Element Transitions
+
+- `BlurTransition` - Blur effect with opacity
+- `ClipPathTransition` - Clip path reveal animation
+- `DissolveTransition` - Fade in/out effect
+- `FadeSlideTransition` - Combined fade and slide animation
+- `PushTransition` - Push content in a direction
+- `RotateTransition` - 3D rotation effect
+- `ScaleTransition` - Scale up/down animation
+- `WipeTransition` - Wipe reveal effect
+- `ZoomTransition` - Zoom in/out animation
+
+### List Transitions (TransitionGroup)
+
+- `DissolveListTransition` - Fade effect for lists
+- `ScaleListTransition` - Scale effect for lists
 
 ## Props
 
-|     Prop     | Type               |                               Default                                | Description                                                                                                                                                                               |
-|:------------:|--------------------|:--------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **duration** | _Number_, _Object_ |                                `300`                                 | Transition duration. Number for specifying the same duration for enter/leave transitions. <br> Object style `{enter: 300, leave: 300}` for specifying explicit durations for enter/leave. |
-|  **group**   | _Boolean_          |                               `false`                                | Whether the component should be a `transition-group` component.                                                                                                                           |
-|   **tag**    | _String_           |                               `'span'`                               | Transition tag, in case the component is a `transition-group.`                                                                                                                            |
-|  **origin**  | _String_           |                                 `''`                                 | [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.                          |
-|  **styles**  | _Object_           | `{ animationFillMode: 'both', animationTimingFunction: 'ease-out' }` | Element styles that are applied during transition. These styles are applied on `@beforeEnter` and `@beforeLeave` hooks.                                                                   |
-
-## Group transitions
-Each transition can be used as a `transition-group` by adding the `group` prop to one of the desired transitions.
-```html
-<fade-transition group>
-   <!--keyed children here-->
-</fade-transition>
+|     Prop     | Type               | Default  | Description                                                                                                                                                                                               |
+| :----------: | ------------------ | :------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **duration** | _Number_, _Object_ |  `300`   | Transition duration in milliseconds. Number for specifying the same duration for enter/leave transitions. <br> Object style `{enter: 300, leave: 300}` for specifying explicit durations for enter/leave. |
+|  **delay**   | _Number_, _Object_ |   `0`    | Transition delay in milliseconds. Number for specifying the same delay for enter/leave transitions. <br> Object style `{enter: 0, leave: 100}` for specifying explicit delays for enter/leave.            |
+|   **tag**    | _String_           | `'span'` | Transition tag for List transitions (TransitionGroup components).                                                                                                                                         |
+|  **origin**  | _String_           |   `''`   | [Transform origin property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin), can be specified with styles as well but it's shorter with this prop.                                     |
+|  **styles**  | _Object_           |   `{}`   | Custom CSS styles that are applied during transition. These styles are applied via CSS variables.                                                                                                         |
+
+## Component-Specific Props
+
+Some transitions have additional props for customization:
+
+### ClipPathTransition
+
+|     Prop     |           Type           |  Default   | Description                 |
+| :----------: | :----------------------: | :--------: | --------------------------- |
+| **clipType** | `'circle'` \| `'square'` | `'circle'` | Type of clip path animation |
+
+```vue
+<ClipPathTransition clip-type="square" :duration="1000">
+  <div v-if="show">Content</div>
+</ClipPathTransition>
+```
+
+### PushTransition
+
+|     Prop      |                    Type                     |  Default  | Description                  |
+| :-----------: | :-----------------------------------------: | :-------: | ---------------------------- |
+| **direction** | `'left'` \| `'right'` \| `'up'` \| `'down'` | `'right'` | Direction of the push effect |
+
+```vue
+<PushTransition direction="down" :duration="400">
+  <div v-if="show">Content</div>
+</PushTransition>
 ```
-Gotchas/things to watch:
-1. Elements inside `group` transitions should have `display: inline-block` or must be placed in a flex context:
-   [Vue.js docs reference](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions)
-2. Each transition has a `move` class [move class docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).
-   Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a `move` class associated
-   with `.3s` transition duration:
-
-- Zoom
-  ```css
-    .zoom-move { transition: transform .3s ease-out; }
-  ```
-- Slide
-  ```css
-    .slide-move { transition: transform .3s ease-out; }
-  ```
-- Scale
-  ```css
-    .scale-move { transition: transform .3s cubic-bezier(.25, .8, .50, 1); }
-  ``` 
-- Fade
-  ```css
-    .fade-move { transition: transform .3s ease-out; }
-   ``` 
-If you want to configure the duration, just redefine the class for the transition you use with the desired duration.
+
+### ScaleTransition
+
+|    Prop    |   Type   |   Default    | Description                              |
+| :--------: | :------: | :----------: | ---------------------------------------- |
+| **origin** | _String_ | `'top left'` | Transform origin for the scale animation |
+
+```vue
+<ScaleTransition origin="center" :duration="300">
+  <div v-if="show">Content</div>
+</ScaleTransition>
+```
+
+## List Transitions
+
+For animating lists of elements, use the dedicated List transition components:
+
+```vue
+<script setup>
+import { DissolveListTransition } from '@noction/vue-bezier'
+import { ref } from 'vue'
+import '@noction/vue-bezier/styles'
+
+const items = ref([1, 2, 3, 4, 5])
+</script>
+
+<template>
+  <DissolveListTransition :duration="400" tag="div">
+    <div v-for="item in items" :key="item" class="item">
+      {{ item }}
+    </div>
+  </DissolveListTransition>
+</template>
+```
+
+**Important notes:**
+
+1. Elements inside list transitions should have `display: inline-block` or must be placed in a flex context: [Vue.js docs reference](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)
+2. Each list transition has a `move` class for animating position changes. The move duration defaults to `.3s` or `.35s` and cannot be configured via props. To customize, override the CSS class:
+
+```css
+/* Example: Custom move duration for DissolveListTransition */
+.noc-dissolve-move {
+  transition: transform 0.5s ease-out;
+}
+```
+
+## Customizing Transitions
+
+All CSS classes and custom properties are prefixed with `noc-` to prevent naming conflicts with other libraries. You can override any transition styles by targeting the specific classes:
+
+```css
+/* Override dissolve transition timing */
+.noc-dissolve-enter-active {
+  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Override blur transition effect */
+.noc-blur-enter-from {
+  opacity: 0;
+  filter: blur(20px); /* Increase blur intensity */
+}
+
+/* Override scale list move animation */
+.noc-scale-list-move {
+  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+```
+
+Available CSS custom properties:
+
+- `--noc-transition-enter-duration`
+- `--noc-transition-leave-duration`
+- `--noc-transition-enter-delay`
+- `--noc-transition-leave-delay`
+- `--noc-transform-origin` (ScaleTransition)
 
 ## License
 
@@ -105,4 +182,4 @@ MIT &copy; [50rayn](https://github.com/50rayn)
 
 ## Special thanks to
 
-@cristijora (The UI for list transitions in the demo is inspired by [vue2-transitions](https://github.com/BinarCode/vue2-transitions) )  
+@cristijora (The UI for list transitions in the demo is inspired by [vue2-transitions](https://github.com/BinarCode/vue2-transitions) )

package/dist/types/components/Blur/BlurTransition.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    duration?: number | {
+        enter: number;
+        leave: number;
+    };
+    delay?: number | {
+        enter: number;
+        leave: number;
+    };
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/ClipPath/ClipPathTransition.vue.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from '../../types';
+type __VLS_Props = ComponentProps & {
+    clipType?: 'circle' | 'square';
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Dissolve/DissolveListTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Dissolve/DissolveTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/FadeSlide/FadeSlideTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Push/PushTransition.vue.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from '../../types';
+type __VLS_Props = ComponentProps & {
+    direction?: 'left' | 'right' | 'up' | 'down';
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Rotate/RotateTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Scale/ScaleListTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,68 +1,14 @@
-import type { ComponentProps } from '@/types';
-declare function __VLS_template(): {
-    default?(_: {}): any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<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").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<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;
-}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<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;
-    };
-};

package/dist/types/components/Wipe/WipeTransition.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../../types';
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComponentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,11 +1,11 @@
-export { default as CollapseTransition } from './Collapse/CollapseTransition.vue';
-export { default as FadeTransition } from './Fade/FadeTransition.vue';
+export { default as BlurTransition } from './Blur/BlurTransition.vue';
+export { default as ClipPathTransition } from './ClipPath/ClipPathTransition.vue';
+export { default as DissolveListTransition } from './Dissolve/DissolveListTransition.vue';
+export { default as DissolveTransition } from './Dissolve/DissolveTransition.vue';
+export { default as FadeSlideTransition } from './FadeSlide/FadeSlideTransition.vue';
+export { default as PushTransition } from './Push/PushTransition.vue';
+export { default as RotateTransition } from './Rotate/RotateTransition.vue';
+export { default as ScaleListTransition } from './Scale/ScaleListTransition.vue';
 export { default as ScaleTransition } from './Scale/ScaleTransition.vue';
-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';
-export { default as ZoomCenterTransition } from './Zoom/ZoomCenterTransition.vue';
-export { default as ZoomUpTransition } from './Zoom/ZoomUpTransition.vue';
-export { default as ZoomXTransition } from './Zoom/ZoomXTransition.vue';
-export { default as ZoomYTransition } from './Zoom/ZoomYTransition.vue';
+export { default as WipeTransition } from './Wipe/WipeTransition.vue';
+export { default as ZoomTransition } from './Zoom/ZoomTransition.vue';

package/dist/types/main.d.ts

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

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

@@ -1,10 +1,10 @@
-import { RendererElement } from 'vue';
+import type { 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];
+    afterEnter: [el: RendererElement];
+    afterLeave: [el: RendererElement];
+    beforeEnter: [el: RendererElement];
+    beforeLeave: [el: RendererElement];
+    leave: [el: RendererElement, done: () => void];
 };
 export type ComponentProps = {
     /**

package/dist/vue-bezier.css

@@ -0,0 +1,2 @@
+@property --noc-transition-enter-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --noc-transition-leave-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --noc-transition-enter-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --noc-transition-leave-delay{syntax:"<time>";inherits:false;initial-value:0s}.noc-blur-enter-active[data-v-fec99d84],.noc-blur-leave-active[data-v-fec99d84]{transition:all var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:opacity,filter;position:absolute;inset-block-start:0;inset-inline-start:0}.noc-blur-leave-active[data-v-fec99d84]{transition:all var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay)}.noc-blur-enter-from[data-v-fec99d84]{opacity:0;filter:blur(8px)}.noc-blur-enter-to[data-v-fec99d84],.noc-blur-leave-from[data-v-fec99d84]{opacity:1;filter:blur()}.noc-blur-leave-to[data-v-fec99d84]{opacity:0;filter:blur(8px)}.noc-clip-enter-active[data-v-65f5f5ac]{transition:all var(--noc-transition-enter-duration)ease-in var(--noc-transition-enter-delay);position:relative}.noc-clip-leave-active[data-v-65f5f5ac]{transition:all calc(var(--noc-transition-leave-duration) - 10ms)linear calc(var(--noc-transition-leave-delay));position:absolute}.noc-clip-circle.noc-clip-enter-from[data-v-65f5f5ac]{clip-path:circle(0%)}.noc-clip-circle.noc-clip-enter-to[data-v-65f5f5ac]{clip-path:circle(100%)}.noc-clip-square.noc-clip-enter-from[data-v-65f5f5ac]{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}.noc-clip-square.noc-clip-enter-to[data-v-65f5f5ac]{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.noc-dissolve-list>*{--noc-transition-enter-duration:inherit;--noc-transition-leave-duration:inherit;--noc-transition-enter-delay:inherit;--noc-transition-leave-delay:inherit}.noc-dissolve-enter-active{transition:opacity var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:opacity}.noc-dissolve-leave-active{backface-visibility:hidden;transition:opacity var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay);will-change:opacity;position:absolute}.noc-dissolve-enter-from,.noc-dissolve-leave-to{opacity:0}.noc-dissolve-enter-to,.noc-dissolve-leave-from{opacity:1}.noc-dissolve-move{transition:transform var(--noc-transition-enter-duration)ease-out var(--noc-transition-enter-delay)}.noc-dissolve-enter-active[data-v-a98e0a99]{backface-visibility:hidden;transition:opacity var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:opacity;position:absolute;inset-block-start:0;inset-inline-start:0}.noc-dissolve-leave-active[data-v-a98e0a99]{backface-visibility:hidden;transition:opacity var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay);will-change:opacity;position:absolute;inset-block-start:0;inset-inline-start:0}.noc-dissolve-enter-from[data-v-a98e0a99],.noc-dissolve-leave-to[data-v-a98e0a99]{opacity:0}.noc-dissolve-enter-to[data-v-a98e0a99],.noc-dissolve-leave-from[data-v-a98e0a99]{opacity:1}.noc-fade-slide-enter-active[data-v-475efc48],.noc-fade-slide-leave-active[data-v-475efc48]{backface-visibility:hidden;transition:all var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);position:absolute;inset-block-start:0;inset-inline-start:0}.noc-fade-slide-leave-active[data-v-475efc48]{backface-visibility:hidden;transition:all var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay)}.noc-fade-slide-enter-from[data-v-475efc48]{opacity:0;transform:translateY(.5rem)}.noc-fade-slide-enter-to[data-v-475efc48],.noc-fade-slide-leave-from[data-v-475efc48]{opacity:1;transform:translateY(0)}.noc-fade-slide-leave-to[data-v-475efc48]{opacity:0;transform:translateY(.5rem)}.noc-push-enter-active[data-v-2822b81a],.noc-push-leave-active[data-v-2822b81a]{backface-visibility:hidden;transition:opacity var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay),transform var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:opacity,transform;position:absolute;inset-block-start:0;inset-inline-start:0}.noc-push-leave-active[data-v-2822b81a]{backface-visibility:hidden;transition:opacity var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay),transform var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay)}.noc-push-enter-to[data-v-2822b81a],.noc-push-leave-from[data-v-2822b81a]{opacity:1;transform:translate(0)}.noc-push-left.noc-push-enter-from[data-v-2822b81a]{opacity:0;transform:translate(100%)}.noc-push-left.noc-push-leave-to[data-v-2822b81a],.noc-push-right.noc-push-enter-from[data-v-2822b81a]{opacity:0;transform:translate(-100%)}.noc-push-right.noc-push-leave-to[data-v-2822b81a]{opacity:0;transform:translate(100%)}.noc-push-up.noc-push-enter-from[data-v-2822b81a]{opacity:0;transform:translateY(100%)}.noc-push-up.noc-push-leave-to[data-v-2822b81a],.noc-push-down.noc-push-enter-from[data-v-2822b81a]{opacity:0;transform:translateY(-100%)}.noc-push-down.noc-push-leave-to[data-v-2822b81a]{opacity:0;transform:translateY(100%)}.noc-rotate-enter-active[data-v-c4785237],.noc-rotate-leave-active[data-v-c4785237]{transition:all var(--noc-transition-enter-duration)linear var(--noc-transition-enter-delay)}.noc-rotate-leave-active[data-v-c4785237]{transition:all var(--noc-transition-leave-duration)linear var(--noc-transition-leave-delay)}.noc-rotate-enter-from[data-v-c4785237]{opacity:1;filter:blur(4px);transform:rotate(12deg)}.noc-rotate-enter-to[data-v-c4785237],.noc-rotate-leave-from[data-v-c4785237]{opacity:1;filter:blur();transform:rotate(0)}.noc-rotate-leave-to[data-v-c4785237]{opacity:1;filter:blur(4px);transform:rotate(12deg)}.noc-scale-list>*{--noc-transition-enter-duration:inherit;--noc-transition-leave-duration:inherit;--noc-transition-enter-delay:inherit;--noc-transition-leave-delay:inherit}.noc-scale-list-enter-active{transition:opacity var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay),transform var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:opacity,transform}.noc-scale-list-leave-active{backface-visibility:hidden;transition:opacity var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay),transform var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay);will-change:opacity,transform;position:absolute}.noc-scale-list-enter-from,.noc-scale-list-leave-to{opacity:0;transform:scale(0)}.noc-scale-list-enter-to,.noc-scale-list-leave-from{opacity:1;transform:scale(1)}.noc-scale-list-move{transition:transform var(--noc-transition-enter-duration)ease-out var(--noc-transition-enter-delay)}.noc-scale-enter-active[data-v-f5da5408],.noc-scale-leave-active[data-v-f5da5408]{transform-origin:var(--noc-transform-origin,top left);transition:all var(--noc-transition-enter-duration)ease-out var(--noc-transition-enter-delay);will-change:opacity,transform}.noc-scale-leave-active[data-v-f5da5408]{transition:all var(--noc-transition-leave-duration)ease-out var(--noc-transition-leave-delay)}.noc-scale-enter-from[data-v-f5da5408]{opacity:0;transform:scale(0)}.noc-scale-enter-to[data-v-f5da5408],.noc-scale-leave-from[data-v-f5da5408]{opacity:1;transform:scale(1)}.noc-scale-leave-to[data-v-f5da5408]{opacity:0;transform:scale(0)}.noc-scale-move[data-v-f5da5408]{transition:transform .3s cubic-bezier(.25,.8,.5,1)}.noc-wipe-enter-active[data-v-41990a90]{z-index:10;transition:transform var(--noc-transition-enter-duration)ease-out var(--noc-transition-enter-delay)}.noc-wipe-leave-active[data-v-41990a90]{transition:transform calc(var(--noc-transition-leave-duration) - 10ms)ease var(--noc-transition-leave-delay);position:absolute}.noc-wipe-enter-from[data-v-41990a90]{transform:translate(-100%)}.noc-wipe-enter-to[data-v-41990a90]{transform:translate(0)}.noc-zoom-enter-active[data-v-6112c8a6],.noc-zoom-leave-active[data-v-6112c8a6]{transition:transform var(--noc-transition-enter-duration)ease var(--noc-transition-enter-delay);will-change:transform;position:absolute;inset-block-start:0;inset-inline-start:0}.noc-zoom-leave-active[data-v-6112c8a6]{transition:transform var(--noc-transition-leave-duration)ease var(--noc-transition-leave-delay)}.noc-zoom-enter-from[data-v-6112c8a6],.noc-zoom-leave-to[data-v-6112c8a6]{transform:scale(1.05)}.noc-zoom-enter-to[data-v-6112c8a6],.noc-zoom-leave-from[data-v-6112c8a6]{transform:scale(1)}
+/*$vite$:1*/