@noction/vue-bezier 1.0.5

package/src/components/Zoom/ZoomXTransition.vue

@@ -0,0 +1,75 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    enter-active-class="zoom-in-x"
+    move-class="zoom-move"
+    leave-active-class="zoom-out-x"
+    v-bind="{ ...$attrs, ...hooks }"
+  >
+    <slot />
+  </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'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @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);
+    }
+
+    100% { opacity: 0; }
+  }
+
+  .zoom-in-x { animation-name: zoom-in-x; }
+  .zoom-out-x { animation-name: zoom-out-x; }
+</style>

package/src/components/Zoom/ZoomYTransition.vue

@@ -0,0 +1,78 @@
+<template>
+  <component
+    :is="componentType"
+    :tag="tag"
+    enter-active-class="zoom-in-y"
+    move-class="zoom-move"
+    leave-active-class="zoom-out-y"
+    v-bind="{ ...$attrs, ...hooks }"
+  >
+    <slot />
+  </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'
+
+const props = defineProps(buildProps(customProps))
+const emit = defineEmits(buildEmits())
+
+const componentType = buildComponentType(props)
+const tag = buildTag(props)
+const hooks = buildHooks(props, emit)
+
+</script>
+
+<style lang="scss">
+  @import 'move';
+
+  @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);
+    }
+
+    100% { opacity: 0; }
+  }
+
+  .zoom-in-y { animation-name: zoom-in-y; }
+  .zoom-out-y { animation-name: zoom-out-y; }
+</style>

package/src/components/Zoom/move.scss

@@ -0,0 +1 @@
+.zoom-move { transition: transform .3s ease-out; }

package/src/composable/buildComponentType.ts

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

package/src/composable/buildEmits.ts

@@ -0,0 +1,7 @@
+export default () => [
+  'after-enter',
+  'after-leave',
+  'before-enter',
+  'before-leave',
+  'leave'
+]

package/src/composable/buildHooks.ts

@@ -0,0 +1,92 @@
+import { BaseTransitionProps, RendererElement } from 'vue'
+
+const beforeEnter = (props, el: RendererElement) => {
+  const enterDuration = props.duration?.enter ?? props.duration ?? 0
+  const enterDelay = props.delay?.enter ?? props.delay ?? 0
+
+  el.style.animationDuration = `${enterDuration}ms`
+  el.style.animationDelay = `${enterDelay}ms`
+
+  setStyles(props, el)
+}
+
+const beforeLeave = (props, el: RendererElement) => {
+  const leaveDuration = props.duration?.leave ?? props.duration ?? 0
+  const leaveDelay = props.delay?.leave ?? props.delay ?? 0
+
+  el.style.animationDuration = `${leaveDuration}ms`
+  el.style.animationDelay = `${leaveDelay}ms`
+
+  setStyles(props, el)
+}
+
+const cleanUpStyles = (props, el: RendererElement) => {
+  Object
+    .keys(props.styles)
+    .forEach(key => {
+      const styleValue = props.styles[key]
+
+      if (styleValue) el.style[key] = ''
+    })
+
+  el.style.animationDuration = ''
+  el.style.animationDelay = ''
+}
+
+const leave = (props, el: RendererElement, done: () => void) => {
+  setAbsolutePosition(props, el)
+
+  const leaveDuration = props.duration?.leave ?? props.duration ?? 0
+  const leaveDelay = props.delay?.leave ?? props.delay ?? 0
+
+  setTimeout(done, leaveDuration + leaveDelay)
+}
+
+const setStyles = (props, el: RendererElement) => {
+  setTransformOrigin(props, el)
+
+  Object
+    .keys(props.styles)
+    .forEach(key => {
+      const styleValue = props.styles[key]
+
+      if (styleValue) el.style[key] = styleValue
+    })
+}
+
+const setAbsolutePosition = (props, el: RendererElement) => {
+  if (props.group) el.style.position = 'absolute'
+}
+
+const setTransformOrigin = (props, el: RendererElement) => {
+  if (props.origin) el.style.transformOrigin = props.origin
+}
+
+export default (props, emit): BaseTransitionProps => ({
+  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 {
+  leave,
+  setAbsolutePosition,
+  setStyles
+}

package/src/composable/buildProps.ts

@@ -0,0 +1,52 @@
+const defaultProps = {
+  /**
+   * 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: 0,
+    type: [Number, Object]
+  },
+  /**
+   * 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: 300,
+    type: [Number, Object]
+  },
+  /**
+   * 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: {
+    default: '',
+    type: String
+  },
+  /**
+   * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
+   */
+  styles: {
+    default: () => ({
+      animationFillMode: 'both',
+      animationTimingFunction: 'ease-out'
+    }),
+    type: Object
+  },
+  /**
+   * Transition tag, in case the component is a `transition-group`
+   */
+  tag: {
+    default: 'span',
+    type: String
+  }
+}
+
+export default (customProps?: Record<string, unknown>) => ({
+  ...defaultProps,
+  ...(customProps || {})
+})

package/src/composable/buildTag.ts

@@ -0,0 +1 @@
+export default props => props.tag

package/src/composable/index.ts

@@ -0,0 +1,7 @@
+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/src/global-shim.d.ts

@@ -0,0 +1 @@
+declare const VERSION: string

package/src/index.ts

@@ -0,0 +1,62 @@
+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'
+
+const components = {
+  CollapseTransition: PrivateCollapseTransition,
+  FadeTransition: PrivateFadeTransition,
+  ScaleTransition: PrivateScaleTransition,
+  SlideXLeftTransition: PrivateSlideXLeftTransition,
+  SlideXRightTransition: PrivateSlideXRightTransition,
+  SlideYDownTransition: PrivateSlideYDownTransition,
+  SlideYUpTransition: PrivateSlideYUpTransition,
+  ZoomCenterTransition: PrivateZoomCenterTransition,
+  ZoomUpTransition: PrivateZoomUpTransition,
+  ZoomXTransition: PrivateZoomXTransition,
+  ZoomYTransition: PrivateZoomYTransition
+}
+
+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 function install (app) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (app.$_v3SFCTransitionsInstalled) return
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  app.$_v3SFCTransitionsInstalled = true
+
+  Object
+    .entries(components)
+    .forEach(([key, component]) =>
+      app.component(key, component)
+    )
+}
+
+export default {
+  install
+}

package/src/vue-shim.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+declare module '*.vue' {
+  const component: any
+  export default component
+}