@noction/vue-bezier 1.0.5

package/README.md

@@ -0,0 +1,109 @@
+# @noction/vue-bezier
+
+[![NPM version](https://img.shields.io/npm/v/@noction/vue-bezier.svg?style=flat)](https://npmjs.com/package/@noction/vue-bezier)
+[![NPM downloads](https://img.shields.io/npm/dm/@noction/vue-bezier.svg?style=flat)](https://npmjs.com/package/@noction/vue-bezier)
+[![codecov](https://codecov.io/gh/50rayn/@noction/vue-bezier/branch/master/graph/badge.svg?token=IJ9ZDYJ65Z)](https://codecov.io/gh/50rayn/@noction/vue-bezier)
+[![Featured on Openbase](https://badges.openbase.com/js/featured/@noction/vue-bezier.svg?token=hU9KYWV7h9YbmSVPtFbArzNxlWR8XfEc1pJhzSaLTp8=)](https://openbase.com/js/@noction/vue-bezier?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
+
+## [Demo](https://noction.github.io/vue-bezier)
+
+## Install :coffee:
+
+```bash
+npm i -S @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>
+import '@noction/vue-bezier/dist/style.css'
+import { FadeTransition } from '@noction/vue-bezier'
+
+export default {
+  components: {
+    FadeTransition
+  }
+}
+</script>
+```
+
+## Global usage
+```js
+import '@noction/vue-bezier/dist/style.css'
+import Transitions from '@noction/vue-bezier'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+app.use(Transitions)
+```
+
+## List of available transitions
+- FadeTransition
+- ZoomCenterTransition
+- ZoomXTransition
+- ZoomYTransition
+- SlideXLeftTransition
+- SlideXRightTransition
+- SlideYUpTransition
+- SlideYDownTransition
+- ScaleTransition
+- CollapseTransition
+
+## 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>
+```
+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.
+
+## License
+
+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) )  

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

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

package/dist/composable/buildEmits.d.ts

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

package/dist/composable/buildHooks.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,48 @@
+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

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

package/dist/composable/index.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,17 @@
+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;

package/dist/style.css

@@ -0,0 +1 @@
+.collapse-move{transition:transform .3s ease-in-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.fade-in{animation-name:fade-in}.fade-out{animation-name:fade-out}.fade-move{transition:transform .3s ease-out}@keyframes scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1}}@keyframes scale-out{0%{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)}@keyframes slide-x-left-in{0%{opacity:0;transform:translate(-15px)}to{opacity:1}}@keyframes slide-x-left-out{0%{opacity:1}to{opacity:0;transform:translate(-15px)}}.slide-x-left-in{animation-name:slide-x-left-in}.slide-x-left-out{animation-name:slide-x-left-out}@keyframes slide-x-right-in{0%{opacity:0;transform:translate(15px)}to{opacity:1}}@keyframes slide-x-right-out{0%{opacity:1}to{opacity:0;transform:translate(15px)}}.slide-x-right-in{animation-name:slide-x-right-in}.slide-x-right-out{animation-name:slide-x-right-out}@keyframes slide-y-down-in{0%{opacity:0;transform:translateY(15px)}to{opacity:1}}@keyframes slide-y-down-out{0%{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}.slide-move{transition:transform .3s}@keyframes slide-y-in{0%{opacity:0;transform:translateY(-15px)}to{opacity:1}}@keyframes slide-y-out{0%{opacity:1}to{opacity:0;transform:translateY(-15px)}}.slide-y-in{animation-name:slide-y-in}.slide-y-out{animation-name:slide-y-out}@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)}to{opacity:0}}.zoom-in{animation-name:zoom-in}.zoom-out{animation-name:zoom-out}@keyframes zoom-in-up{0%{opacity:0;transform:scaleY(0);transform-origin:top center}50%{opacity:1}to{transform:scaleY(1)}}@keyframes zoom-out-up{0%{opacity:1}50%{transform:scaleY(0)}to{opacity:0}}.zoom-in-up{animation-name:zoom-in-up}.zoom-out-up{animation-name:zoom-out-up}@keyframes zoom-in-x{0%{opacity:0;transform:scaleX(0)}50%{opacity:1}}@keyframes zoom-out-x{0%{opacity:1}50%{opacity:0;transform:scaleX(0)}to{opacity:0}}.zoom-in-x{animation-name:zoom-in-x}.zoom-out-x{animation-name:zoom-out-x}.zoom-move{transition:transform .3s ease-out}@keyframes zoom-in-y{0%{opacity:0;transform:scaleY(0)}50%{opacity:1;transform:scaleY(1)}}@keyframes zoom-out-y{0%{opacity:1}50%{opacity:0;transform:scaleY(0)}to{opacity:0}}.zoom-in-y{animation-name:zoom-in-y}.zoom-out-y{animation-name:zoom-out-y}