@noction/vue-bezier 1.0.5 → 1.0.6

package/README.md

@@ -2,8 +2,7 @@
 
 [![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)
+[![codecov](https://codecov.io/gh/Noction/vue-bezier/branch/master/graph/badge.svg?token=IJ9ZDYJ65Z)](https://codecov.io/gh/Noction/vue-bezier)
 
 ## [Demo](https://noction.github.io/vue-bezier)
 

package/dist/vue-bezier.js

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