@noction/vue-bezier 1.0.9 → 1.10.0

package/src/components/Slide/SlideYDownTransition.vue

@@ -1,59 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-y-down-in"
-    leave-active-class="slide-y-down-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-y-down-in {
-    from {
-      opacity: 0;
-      transform: translateY(15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-y-down-out {
-    from { 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; }
-</style>

package/src/components/Slide/SlideYUpTransition.vue

@@ -1,61 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    type="animation"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="slide-y-in"
-    move-class="slide-move"
-    leave-active-class="slide-y-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-y-in {
-    from {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
-
-    to { opacity: 1; }
-  }
-
-  @keyframes slide-y-out {
-    from { opacity: 1; }
-
-    to {
-      opacity: 0;
-      transform: translateY(-15px);
-    }
-  }
-
-  .slide-y-in { animation-name: slide-y-in; }
-  .slide-y-out { animation-name: slide-y-out; }
-</style>

package/src/components/Slide/move.scss

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

package/src/components/Zoom/ZoomCenterTransition.vue

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

package/src/components/Zoom/ZoomUpTransition.vue

@@ -1,63 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.tag"
-    v-bind="{ ...$attrs, ...hooks }"
-    enter-active-class="zoom-in-up"
-    move-class="zoom-move"
-    leave-active-class="zoom-out-up"
-  >
-    <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 lang="scss">
-  @import 'move';
-
-  @keyframes zoom-in-up {
-    0% {
-      opacity: 0;
-      transform: scaleY(0);
-      transform-origin: top center;
-    }
-
-    50% { opacity: 1; }
-
-    100% { transform: scaleY(1); }
-  }
-
-  @keyframes zoom-out-up {
-    0% { opacity: 1; }
-
-    50% { transform: scaleY(0); }
-
-    100% { opacity: 0; }
-  }
-
-  .zoom-in-up { animation-name: zoom-in-up; }
-  .zoom-out-up { animation-name: zoom-out-up; }
-</style>

package/src/components/Zoom/ZoomXTransition.vue

@@ -1,64 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.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 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(.55,0,.1,1)'
-  }),
-  tag: 'span'
-})
-
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(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

@@ -1,65 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    :tag="props.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 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(.55,0,.1,1)'
-  }),
-  tag: 'span'
-})
-const emit = defineEmits<ComponentEvents>()
-
-const componentType = buildComponentType(props)
-const hooks = useHooks(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

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

package/src/composables/buildComponentType.ts

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

package/src/composables/index.ts

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

package/src/composables/useHooks.ts

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

@@ -1,20 +0,0 @@
-import * as components from './components'
-export * from './components'
-import type { App } from 'vue'
-
-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(([componentName, component]) =>
-      app.component(componentName, component)
-    )
-}
-
-export default {
-  install
-}

package/src/vue-shim.d.ts

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