@noction/vue-bezier 1.0.5

package/dist/vue-bezier.mjs

@@ -0,0 +1,456 @@
+import { TransitionGroup as z, Transition as B, defineComponent as c, openBlock as d, createBlock as u, resolveDynamicComponent as _, unref as i, mergeProps as m, withCtx as p, renderSlot as f } from "vue";
+const y = (o) => o.group ? z : B, g = () => [
+  "after-enter",
+  "after-leave",
+  "before-enter",
+  "before-leave",
+  "leave"
+], D = (o, n) => {
+  var l, r;
+  const e = ((l = o.duration) == null ? void 0 : l.enter) ?? o.duration ?? 0, a = ((r = o.delay) == null ? void 0 : r.enter) ?? o.delay ?? 0;
+  n.style.animationDuration = `${e}ms`, n.style.animationDelay = `${a}ms`, S(o, n);
+}, w = (o, n) => {
+  var l, r;
+  const e = ((l = o.duration) == null ? void 0 : l.leave) ?? o.duration ?? 0, a = ((r = o.delay) == null ? void 0 : r.leave) ?? o.delay ?? 0;
+  n.style.animationDuration = `${e}ms`, n.style.animationDelay = `${a}ms`, S(o, n);
+}, F = (o, n) => {
+  Object.keys(o.styles).forEach((e) => {
+    o.styles[e] && (n.style[e] = "");
+  }), n.style.animationDuration = "", n.style.animationDelay = "";
+}, P = (o, n, e) => {
+  var r, s;
+  O(o, n);
+  const a = ((r = o.duration) == null ? void 0 : r.leave) ?? o.duration ?? 0, l = ((s = o.delay) == null ? void 0 : s.leave) ?? o.delay ?? 0;
+  setTimeout(e, a + l);
+}, S = (o, n) => {
+  Z(o, n), Object.keys(o.styles).forEach((e) => {
+    const a = o.styles[e];
+    a && (n.style[e] = a);
+  });
+}, O = (o, n) => {
+  o.group && (n.style.position = "absolute");
+}, Z = (o, n) => {
+  o.origin && (n.style.transformOrigin = o.origin);
+}, h = (o, n) => ({
+  onAfterEnter: (e) => {
+    F(o, e), n("after-enter", e);
+  },
+  onAfterLeave: (e) => {
+    F(o, e), n("after-leave", e);
+  },
+  onBeforeEnter: (e) => {
+    D(o, e), n("before-enter", e);
+  },
+  onBeforeLeave: (e) => {
+    w(o, e), n("before-leave", e);
+  },
+  onLeave: (e, a) => {
+    P(o, e, a), n("leave", e, a);
+  }
+}), A = {
+  /**
+   * 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
+  }
+}, v = (o) => ({
+  ...A,
+  ...o || {}
+}), T = (o) => o.tag, j = /* @__PURE__ */ c({
+  __name: "CollapseTransition",
+  props: v(),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = {
+      onAfterEnter(t) {
+        t.style.transition = "", t.style.height = "", t.style.overflow = t.dataset.oldOverflow, n("after-enter", t);
+      },
+      onAfterLeave(t) {
+        t.style.transition = "", t.style.height = "", t.style.overflow = t.dataset.oldOverflow, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom, n("after-leave", t);
+      },
+      onBeforeEnter(t) {
+        var b;
+        const $ = ((b = e.duration) == null ? void 0 : b.enter) ?? e.duration ?? 0;
+        t.style.transition = s($), t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.style.height = "0", t.style.paddingTop = 0, t.style.paddingBottom = 0, S(e, t), n("before-enter", t);
+      },
+      onBeforeLeave(t) {
+        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingBottom = t.style.paddingBottom, t.dataset.oldOverflow = t.style.overflow, t.style.height = `${t.scrollHeight}px`, t.style.overflow = "hidden", S(e, t), n("before-leave", t);
+      },
+      onEnter(t) {
+        t.dataset.oldOverflow = t.style.overflow, t.scrollHeight !== 0 ? (t.style.height = `${t.scrollHeight}px`, t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom) : (t.style.height = "", t.style.paddingTop = t.dataset.oldPaddingTop, t.style.paddingBottom = t.dataset.oldPaddingBottom), t.style.overflow = "hidden";
+      },
+      onLeave(t, $) {
+        const b = e.duration.leave ?? e.duration ?? 0;
+        t.scrollHeight !== 0 && (t.style.transition = s(b), t.style.height = 0, t.style.paddingTop = 0, t.style.paddingBottom = 0), O(e, t), P(e, t, $), n("leave", t, $);
+      }
+    }, s = (t) => {
+      const $ = t / 1e3;
+      return `${$}s height ease-in-out, ${$}s padding-top ease-in-out, ${$}s padding-bottom ease-in-out`;
+    };
+    return (t, $) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...t.$attrs, ...r }, { "move-class": "collapse-move" }), {
+      default: p(() => [
+        f(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const k = {
+  inheritAttrs: !1
+}, C = /* @__PURE__ */ c({
+  ...k,
+  __name: "FadeTransition",
+  props: v(),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({
+      tag: i(l),
+      "enter-active-class": "fade-in",
+      "move-class": "fade-move",
+      "leave-active-class": "fade-out"
+    }, { ...s.$attrs, ...i(r) }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const X = {
+  origin: {
+    default: "top left",
+    type: String
+  },
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.25,.8,.50,1)"
+    }),
+    type: Object
+  }
+}, Y = {
+  inheritAttrs: !1
+}, x = /* @__PURE__ */ c({
+  ...Y,
+  __name: "ScaleTransition",
+  props: v(X),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "scale-in",
+      "move-class": "scale-move",
+      "leave-active-class": "scale-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const L = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.25,.8,.50,1)"
+    }),
+    type: Object
+  }
+}, E = {
+  inheritAttrs: !1
+}, M = /* @__PURE__ */ c({
+  ...E,
+  __name: "SlideXLeftTransition",
+  props: v(L),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "slide-x-left-in",
+      "move-class": "slide-move",
+      "leave-active-class": "slide-x-left-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const U = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.25,.8,.50,1)"
+    }),
+    type: Object
+  }
+}, H = {
+  inheritAttrs: !1
+}, R = /* @__PURE__ */ c({
+  ...H,
+  __name: "SlideXRightTransition",
+  props: v(U),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "slide-x-right-in",
+      "move-class": "slide-move",
+      "leave-active-class": "slide-x-right-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const I = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.25,.8,.50,1)"
+    }),
+    type: Object
+  }
+}, V = {
+  inheritAttrs: !1
+}, N = /* @__PURE__ */ c({
+  ...V,
+  __name: "SlideYDownTransition",
+  props: v(I),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "slide-y-down-in",
+      "leave-active-class": "slide-y-down-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const G = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.25,.8,.50,1)"
+    }),
+    type: Object
+  }
+}, q = {
+  inheritAttrs: !1
+}, J = /* @__PURE__ */ c({
+  ...q,
+  __name: "SlideYUpTransition",
+  props: v(G),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({
+      tag: i(l),
+      type: "animation"
+    }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "slide-y-in",
+      "move-class": "slide-move",
+      "leave-active-class": "slide-y-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const K = {
+  inheritAttrs: !1
+}, Q = /* @__PURE__ */ c({
+  ...K,
+  __name: "ZoomCenterTransition",
+  props: v(),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "zoom-in",
+      "move-class": "zoom-move",
+      "leave-active-class": "zoom-out"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const W = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "ease-out"
+    }),
+    type: Object
+  }
+}, tt = {
+  inheritAttrs: !1
+}, et = /* @__PURE__ */ c({
+  ...tt,
+  __name: "ZoomUpTransition",
+  props: v(W),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({ tag: i(l) }, { ...s.$attrs, ...i(r) }, {
+      "enter-active-class": "zoom-in-up",
+      "move-class": "zoom-move",
+      "leave-active-class": "zoom-out-up"
+    }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const ot = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.55,0,.1,1)"
+    }),
+    type: Object
+  }
+}, nt = {
+  inheritAttrs: !1
+}, st = /* @__PURE__ */ c({
+  ...nt,
+  __name: "ZoomXTransition",
+  props: v(ot),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({
+      tag: i(l),
+      "enter-active-class": "zoom-in-x",
+      "move-class": "zoom-move",
+      "leave-active-class": "zoom-out-x"
+    }, { ...s.$attrs, ...i(r) }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const at = {
+  styles: {
+    default: () => ({
+      animationFillMode: "both",
+      animationTimingFunction: "cubic-bezier(.55,0,.1,1)"
+    }),
+    type: Object
+  }
+}, it = {
+  inheritAttrs: !1
+}, rt = /* @__PURE__ */ c({
+  ...it,
+  __name: "ZoomYTransition",
+  props: v(at),
+  emits: g(),
+  setup(o, { emit: n }) {
+    const e = o, a = y(e), l = T(e), r = h(e, n);
+    return (s, t) => (d(), u(_(i(a)), m({
+      tag: i(l),
+      "enter-active-class": "zoom-in-y",
+      "move-class": "zoom-move",
+      "leave-active-class": "zoom-out-y"
+    }, { ...s.$attrs, ...i(r) }), {
+      default: p(() => [
+        f(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["tag"]));
+  }
+});
+const lt = {
+  CollapseTransition: j,
+  FadeTransition: C,
+  ScaleTransition: x,
+  SlideXLeftTransition: M,
+  SlideXRightTransition: R,
+  SlideYDownTransition: N,
+  SlideYUpTransition: J,
+  ZoomCenterTransition: Q,
+  ZoomUpTransition: et,
+  ZoomXTransition: st,
+  ZoomYTransition: rt
+};
+function ct(o) {
+  o.$_v3SFCTransitionsInstalled || (o.$_v3SFCTransitionsInstalled = !0, Object.entries(lt).forEach(
+    ([n, e]) => o.component(n, e)
+  ));
+}
+const ut = {
+  install: ct
+};
+export {
+  j as CollapseTransition,
+  C as FadeTransition,
+  x as ScaleTransition,
+  M as SlideXLeftTransition,
+  R as SlideXRightTransition,
+  N as SlideYDownTransition,
+  J as SlideYUpTransition,
+  Q as ZoomCenterTransition,
+  et as ZoomUpTransition,
+  st as ZoomXTransition,
+  rt as ZoomYTransition,
+  ut as default,
+  ct as install
+};

package/dist/vue-bezier.umd.js

@@ -0,0 +1 @@
+(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c.VueBezier={},c.Vue))})(this,function(c,t){"use strict";const d=o=>o.group?t.TransitionGroup:t.Transition,m=()=>["after-enter","after-leave","before-enter","before-leave","leave"],v=(o,s)=>{var l,r;const n=((l=o.duration)==null?void 0:l.enter)??o.duration??0,i=((r=o.delay)==null?void 0:r.enter)??o.delay??0;s.style.animationDuration=`${n}ms`,s.style.animationDelay=`${i}ms`,u(o,s)},Z=(o,s)=>{var l,r;const n=((l=o.duration)==null?void 0:l.leave)??o.duration??0,i=((r=o.delay)==null?void 0:r.leave)??o.delay??0;s.style.animationDuration=`${n}ms`,s.style.animationDelay=`${i}ms`,u(o,s)},T=(o,s)=>{Object.keys(o.styles).forEach(n=>{o.styles[n]&&(s.style[n]="")}),s.style.animationDuration="",s.style.animationDelay=""},h=(o,s,n)=>{var r,a;$(o,s);const i=((r=o.duration)==null?void 0:r.leave)??o.duration??0,l=((a=o.delay)==null?void 0:a.leave)??o.delay??0;setTimeout(n,i+l)},u=(o,s)=>{A(o,s),Object.keys(o.styles).forEach(n=>{const i=o.styles[n];i&&(s.style[n]=i)})},$=(o,s)=>{o.group&&(s.style.position="absolute")},A=(o,s)=>{o.origin&&(s.style.transformOrigin=o.origin)},p=(o,s)=>({onAfterEnter:n=>{T(o,n),s("after-enter",n)},onAfterLeave:n=>{T(o,n),s("after-leave",n)},onBeforeEnter:n=>{v(o,n),s("before-enter",n)},onBeforeLeave:n=>{Z(o,n),s("before-leave",n)},onLeave:(n,i)=>{h(o,n,i),s("leave",n,i)}}),X={delay:{default:0,type:[Number,Object]},duration:{default:300,type:[Number,Object]},group:Boolean,origin:{default:"",type:String},styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"ease-out"}),type:Object},tag:{default:"span",type:String}},f=o=>({...X,...o||{}}),_=o=>o.tag,b=t.defineComponent({__name:"CollapseTransition",props:f(),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r={onAfterEnter(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,s("after-enter",e)},onAfterLeave(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom,s("after-leave",e)},onBeforeEnter(e){var g;const y=((g=n.duration)==null?void 0:g.enter)??n.duration??0;e.style.transition=a(y),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0,u(n,e),s("before-enter",e)},onBeforeLeave(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=`${e.scrollHeight}px`,e.style.overflow="hidden",u(n,e),s("before-leave",e)},onEnter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?(e.style.height=`${e.scrollHeight}px`,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},onLeave(e,y){const g=n.duration.leave??n.duration??0;e.scrollHeight!==0&&(e.style.transition=a(g),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0),$(n,e),h(n,e,y),s("leave",e,y)}},a=e=>{const y=e/1e3;return`${y}s height ease-in-out, ${y}s padding-top ease-in-out, ${y}s padding-bottom ease-in-out`};return(e,y)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...e.$attrs,...r},{"move-class":"collapse-move"}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["tag"]))}}),ot="",Y={inheritAttrs:!1},C=t.defineComponent({...Y,__name:"FadeTransition",props:f(),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l),"enter-active-class":"fade-in","move-class":"fade-move","leave-active-class":"fade-out"},{...a.$attrs,...t.unref(r)}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),st="",L={origin:{default:"top left",type:String},styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.25,.8,.50,1)"}),type:Object}},M={inheritAttrs:!1},S=t.defineComponent({...M,__name:"ScaleTransition",props:f(L),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"scale-in","move-class":"scale-move","leave-active-class":"scale-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),at="",x={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.25,.8,.50,1)"}),type:Object}},E={inheritAttrs:!1},B=t.defineComponent({...E,__name:"SlideXLeftTransition",props:f(x),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"slide-x-left-in","move-class":"slide-move","leave-active-class":"slide-x-left-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),it="",U={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.25,.8,.50,1)"}),type:Object}},H={inheritAttrs:!1},k=t.defineComponent({...H,__name:"SlideXRightTransition",props:f(U),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"slide-x-right-in","move-class":"slide-move","leave-active-class":"slide-x-right-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),rt="",V={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.25,.8,.50,1)"}),type:Object}},R={inheritAttrs:!1},P=t.defineComponent({...R,__name:"SlideYDownTransition",props:f(V),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"slide-y-down-in","leave-active-class":"slide-y-down-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),lt="",I={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.25,.8,.50,1)"}),type:Object}},N={inheritAttrs:!1},D=t.defineComponent({...N,__name:"SlideYUpTransition",props:f(I),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l),type:"animation"},{...a.$attrs,...t.unref(r)},{"enter-active-class":"slide-y-in","move-class":"slide-move","leave-active-class":"slide-y-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),ct="",q={inheritAttrs:!1},w=t.defineComponent({...q,__name:"ZoomCenterTransition",props:f(),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"zoom-in","move-class":"zoom-move","leave-active-class":"zoom-out"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),dt="",G={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"ease-out"}),type:Object}},J={inheritAttrs:!1},F=t.defineComponent({...J,__name:"ZoomUpTransition",props:f(G),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l)},{...a.$attrs,...t.unref(r)},{"enter-active-class":"zoom-in-up","move-class":"zoom-move","leave-active-class":"zoom-out-up"}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),mt="",K={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.55,0,.1,1)"}),type:Object}},Q={inheritAttrs:!1},O=t.defineComponent({...Q,__name:"ZoomXTransition",props:f(K),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l),"enter-active-class":"zoom-in-x","move-class":"zoom-move","leave-active-class":"zoom-out-x"},{...a.$attrs,...t.unref(r)}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),ft="",W={styles:{default:()=>({animationFillMode:"both",animationTimingFunction:"cubic-bezier(.55,0,.1,1)"}),type:Object}},tt={inheritAttrs:!1},z=t.defineComponent({...tt,__name:"ZoomYTransition",props:f(W),emits:m(),setup(o,{emit:s}){const n=o,i=d(n),l=_(n),r=p(n,s);return(a,e)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(t.unref(i)),t.mergeProps({tag:t.unref(l),"enter-active-class":"zoom-in-y","move-class":"zoom-move","leave-active-class":"zoom-out-y"},{...a.$attrs,...t.unref(r)}),{default:t.withCtx(()=>[t.renderSlot(a.$slots,"default")]),_:3},16,["tag"]))}}),_t="",et={CollapseTransition:b,FadeTransition:C,ScaleTransition:S,SlideXLeftTransition:B,SlideXRightTransition:k,SlideYDownTransition:P,SlideYUpTransition:D,ZoomCenterTransition:w,ZoomUpTransition:F,ZoomXTransition:O,ZoomYTransition:z};function j(o){o.$_v3SFCTransitionsInstalled||(o.$_v3SFCTransitionsInstalled=!0,Object.entries(et).forEach(([s,n])=>o.component(s,n)))}const nt={install:j};c.CollapseTransition=b,c.FadeTransition=C,c.ScaleTransition=S,c.SlideXLeftTransition=B,c.SlideXRightTransition=k,c.SlideYDownTransition=P,c.SlideYUpTransition=D,c.ZoomCenterTransition=w,c.ZoomUpTransition=F,c.ZoomXTransition=O,c.ZoomYTransition=z,c.default=nt,c.install=j,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/web-types.json

@@ -0,0 +1,156 @@
+{
+  "framework": "vue",
+  "name": "@noction/vue-bezier",
+  "version": "1.0.5",
+  "contributions": {
+    "html": {
+      "description-markup": "markdown",
+      "types-syntax": "typescript",
+      "tags": [
+        {
+          "name": "CollapseTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Collapse/CollapseTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "FadeTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Fade/FadeTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ScaleTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Scale/ScaleTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SlideXLeftTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Slide/SlideXLeftTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SlideXRightTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Slide/SlideXRightTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SlideYDownTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Slide/SlideYDownTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "SlideYUpTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Slide/SlideYUpTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ZoomCenterTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Zoom/ZoomCenterTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ZoomUpTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Zoom/ZoomUpTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ZoomXTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Zoom/ZoomXTransition.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "ZoomYTransition",
+          "description": "",
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/Zoom/ZoomYTransition.vue",
+            "symbol": "default"
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@noction/vue-bezier",
+  "version": "1.0.5",
+  "description": "Vue3 reusable transition components",
+  "keywords": [
+    "transitions",
+    "animations",
+    "fade",
+    "sfc",
+    "composition-api",
+    "vue",
+    "vue3"
+  ],
+  "author": {
+    "name": "50rayn",
+    "email": "soryngitlan@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Noction/vue-bezier.git"
+  },
+  "homepage": "https://github.com/Noction/vue-bezier/",
+  "bugs": {
+    "url": "https://github.com/Noction/vue-bezier/issues",
+    "email": "soryngitlan@gmail.com"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "main": "dist/vue-bezier.umd.js",
+  "module": "dist/vue-bezier.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development vite build --watch",
+    "build:light": "cross-env NODE_ENV=development vite build",
+    "build": "cross-env NODE_ENV=production vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o dist && 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 run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.0.2",
+    "@types/node": "^20.3.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-v8": "^0.32.2",
+    "@vue/test-utils": "^2.4.0",
+    "cross-env": "^7.0.3",
+    "jsdom": "^22.1.0",
+    "minimist": "^1.2.8",
+    "sass": "^1.63.6",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.1",
+    "vue-typegen": "^0.2.0",
+    "vue-docgen-web-types": "^0.1.8"
+  },
+  "web-types": "./dist/web-types.json"
+}