motion-plus-vue 0.0.1

package/dist/es/components/AnimateNumber/NumberDigit.vue.mjs

@@ -0,0 +1,124 @@
+import { defineComponent as M, ref as u, watch as y, nextTick as W, createBlock as s, openBlock as o, unref as r, normalizeStyle as v, withCtx as j, createElementVNode as A, createElementBlock as m, createCommentVNode as B, Fragment as R, renderList as V, resolveDynamicComponent as g, createVNode as F } from "vue";
+import { useMotionConfig as K, motion as S, animate as T } from "motion-v";
+import { useIsInitialRender as z } from "./hooks/use-is-initial-render.mjs";
+import { digitFillStyle as b, maskHeight as H } from "./config.mjs";
+import { useAnimate as L } from "./use-animate.mjs";
+import { getWidthInEm as Y } from "./utils/get-width-in-ems.mjs";
+import { targetWidths as $ } from "./utils/target-widths.mjs";
+const Z = /* @__PURE__ */ M({
+  __name: "NumberDigit",
+  props: {
+    value: {},
+    initialValue: {
+      default: void 0
+    },
+    isPresent: {
+      type: Boolean
+    },
+    partKey: {},
+    onRemove: {},
+    style: {}
+  },
+  setup(w) {
+    const a = w, c = a.initialValue ?? a.value, h = z(), I = K(), l = u(), k = u(Array(10).fill(null)), C = u(), {
+      getRoot: N,
+      handleComplete: _,
+      root: p
+    } = L(a);
+    let d = c;
+    const t = u(c);
+    y([() => a.value, () => a.isPresent], ([e, n]) => {
+      if (!n)
+        return t.value = 0;
+      if (h.current)
+        return W(() => {
+          t.value = e;
+        });
+      t.value = e;
+    }, {
+      immediate: !0
+    });
+    function D(e) {
+      var x;
+      if (!l.value || e === d) return;
+      const n = l.value.getBoundingClientRect(), i = (x = p.value) == null ? void 0 : x.getBoundingClientRect(), E = n.height * (e - d) + (n.top - (i ? i.top || 0 : n.top));
+      T(l.value, {
+        y: [E, 0]
+      }, I.value.transition);
+    }
+    function P(e) {
+      if (h.current && c === e || !k.value[e]) return;
+      const n = Y(k.value[e]);
+      p.value && $.set(p.value, n), C.value = n;
+    }
+    y(t, (e) => {
+      P(e);
+    }, {
+      immediate: !0,
+      flush: "post"
+    }), y(t, (e, n, i) => {
+      D(e), i(() => {
+        d = e;
+      });
+    }, {
+      immediate: !0,
+      flush: "pre"
+    });
+    function f(e) {
+      return () => F("span", {
+        key: e,
+        style: {
+          display: "inline-block",
+          padding: `calc(${H}/2) 0`
+        }
+      }, [e]);
+    }
+    return (e, n) => (o(), s(r(S).span, {
+      ref: r(N),
+      layout: "position",
+      "data-state": e.isPresent ? void 0 : "exiting",
+      "data-key": e.partKey,
+      style: v({
+        display: "inline-flex",
+        justifyContent: "center",
+        width: C.value
+      }),
+      "aria-hidden": !e.isPresent,
+      onMotioncomplete: r(_)
+    }, {
+      default: j(() => [A("span", {
+        ref_key: "scope",
+        ref: l,
+        style: {
+          display: "inline-flex",
+          justifyContent: "center",
+          flexDirection: "column",
+          alignItems: "center",
+          position: "relative"
+        }
+      }, [t.value !== 0 ? (o(), m("span", {
+        key: 0,
+        style: v({
+          ...r(b),
+          bottom: "100%",
+          left: 0
+        })
+      }, [(o(!0), m(R, null, V(t.value, (i) => (o(), s(g(f(i - 1)), {
+        key: i - 1
+      }))), 128))], 4)) : B("", !0), (o(), s(g(f(t.value)))), t.value !== 9 ? (o(), m("span", {
+        key: 1,
+        style: v({
+          ...r(b),
+          top: "100%",
+          left: 0
+        })
+      }, [(o(!0), m(R, null, V(9 - t.value, (i) => (o(), s(g(f(t.value + i)), {
+        key: t.value + i
+      }))), 128))], 4)) : B("", !0)], 512)]),
+      _: 1
+    }, 8, ["data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
+  }
+});
+export {
+  Z as default
+};

package/dist/es/components/AnimateNumber/NumberDigit.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./NumberDigit.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/AnimateNumber/NumberSection.vue.mjs

@@ -0,0 +1,133 @@
+import { defineComponent as _, ref as y, watch as k, toRef as j, createBlock as p, openBlock as l, unref as f, normalizeStyle as C, normalizeClass as $, withCtx as x, createElementVNode as B, createTextVNode as E, createVNode as N, createElementBlock as g, Fragment as P, renderList as S } from "vue";
+import { motion as W, AnimatePresence as M } from "motion-v";
+import { injectSectionContext as V } from "./context.mjs";
+import { useIsInitialRender as z } from "./hooks/use-is-initial-render.mjs";
+import { getWidthInEm as h } from "./utils/get-width-in-ems.mjs";
+import A from "./NumberSymbol.vue.mjs";
+import L from "./NumberDigit.vue.mjs";
+import { targetWidths as T } from "./utils/target-widths.mjs";
+const O = /* @__PURE__ */ _({
+  __name: "NumberSection",
+  props: {
+    parts: {},
+    justify: { default: "left" },
+    mode: {},
+    name: {},
+    style: {}
+  },
+  setup(w) {
+    const u = w, c = y(), m = y();
+    function R(n) {
+      m.value = n == null ? void 0 : n.$el;
+    }
+    const r = y(), d = z();
+    k(() => u.parts.map((n) => n.value).join(""), () => {
+      if (!r.value)
+        return;
+      if (d.current) {
+        m.value && (m.value.style.width = h(r.value));
+        return;
+      }
+      const n = Array.from(r.value.children).map((e) => {
+        if (!(e instanceof HTMLElement))
+          return;
+        if (e.dataset.state === "exiting") {
+          const I = e.nextSibling;
+          return e.remove(), () => {
+            r.value && r.value.insertBefore(e, I);
+          };
+        }
+        const t = T.get(e);
+        if (!t)
+          return;
+        const s = e.style.width;
+        return e.style.width = t, () => {
+          e.style.width = s;
+        };
+      }), i = h(r.value);
+      c.value = i;
+      for (let e = n.length - 1; e >= 0; e--) {
+        const t = n[e];
+        t && t();
+      }
+    }, { immediate: !0, flush: "post" });
+    const o = j(u, "justify");
+    V({
+      justify: o
+    });
+    let a = u.parts;
+    k(() => u.parts, (n) => {
+      const i = new Map(n.map((t) => [t.key, { ...t, isPresent: !0 }]));
+      a = [...a.filter((t) => !i.get(t.key)).map(
+        (t) => ({ ...t, isPresent: !1 })
+      ), ...n].sort((t, s) => o.value === "right" ? t.isPresent === s.isPresent ? t.originalIndex - s.originalIndex : t.isPresent ? -1 : 1 : o.value === "left" ? t.isPresent === s.isPresent ? t.originalIndex - s.originalIndex : t.isPresent ? 1 : -1 : t.originalIndex - s.originalIndex);
+    });
+    function v(n) {
+      a = a.filter((i) => i.key !== n);
+    }
+    return (n, i) => (l(), p(f(W).span, {
+      ref: R,
+      class: $(`number-section-${n.name}`),
+      style: C({
+        ...n.style,
+        display: "inline-flex",
+        justifyContent: o.value,
+        width: c.value
+      }),
+      layout: "position"
+    }, {
+      default: x(() => [
+        B("span", {
+          ref_key: "measuredRef",
+          ref: r,
+          style: {
+            display: "inline-flex",
+            justifyContent: "inherit",
+            position: "relative"
+          }
+        }, [
+          i[0] || (i[0] = E(" ​ ")),
+          N(f(M), {
+            multiple: "",
+            mode: n.mode,
+            "anchor-x": o.value,
+            initial: !1
+          }, {
+            default: x(() => [
+              (l(!0), g(P, null, S(f(a), (e) => (l(), g(P, {
+                key: e.key
+              }, [
+                e.type === "integer" || e.type === "fraction" ? (l(), p(L, {
+                  key: e.key,
+                  "part-key": e.key,
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  value: e.value,
+                  "is-present": e.isPresent ?? !0,
+                  "initial-value": f(d).current ? void 0 : 0,
+                  onRemove: v
+                }, null, 8, ["part-key", "value", "is-present", "initial-value"])) : (l(), p(A, {
+                  key: e.type === "literal" ? `${e.key}:${e.value}` : e.key,
+                  type: e.type,
+                  "part-key": e.key,
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  value: e.value,
+                  "is-present": e.isPresent ?? !0,
+                  onRemove: v
+                }, null, 8, ["type", "part-key", "value", "is-present"]))
+              ], 64))), 128))
+            ]),
+            _: 1
+          }, 8, ["mode", "anchor-x"])
+        ], 512)
+      ]),
+      _: 1
+    }, 8, ["class", "style"]));
+  }
+});
+export {
+  O as default
+};

package/dist/es/components/AnimateNumber/NumberSection.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./NumberSection.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/AnimateNumber/NumberSymbol.vue.mjs

@@ -0,0 +1,73 @@
+import { defineComponent as u, createBlock as n, openBlock as a, unref as e, normalizeStyle as c, withCtx as i, createVNode as y, createTextVNode as d, toDisplayString as f } from "vue";
+import { motion as l, AnimatePresence as h } from "motion-v";
+import { maskHeight as g } from "./config.mjs";
+import { useSectionContext as v } from "./context.mjs";
+import { useAnimate as x } from "./use-animate.mjs";
+const B = /* @__PURE__ */ u({
+  __name: "NumberSymbol",
+  props: {
+    partKey: {},
+    type: {},
+    value: {},
+    isPresent: { type: Boolean },
+    onRemove: { type: Function },
+    style: {}
+  },
+  setup(r) {
+    const s = r, { justify: o } = v(), { getRoot: p, handleComplete: m } = x(s);
+    return (t, k) => (a(), n(e(l).span, {
+      ref: e(p),
+      layout: "position",
+      "data-state": t.isPresent ? void 0 : "exiting",
+      style: c({
+        display: "inline-flex",
+        justifyContent: e(o),
+        padding: `calc(${e(g)}/2) 0`,
+        position: "relative"
+      }),
+      "aria-hidden": !t.isPresent,
+      onMotioncomplete: e(m)
+    }, {
+      default: i(() => [
+        y(e(h), {
+          multiple: "",
+          mode: "popLayout",
+          "anchor-x": e(o),
+          initial: !1
+        }, {
+          default: i(() => [
+            (a(), n(e(l).span, {
+              key: t.value,
+              layout: e(o) === "right" ? "position" : !1,
+              initial: { opacity: 0 },
+              animate: { opacity: [null, 1] },
+              exit: {
+                opacity: [null, 0],
+                transition: {
+                  duration: 0.3
+                }
+              },
+              style: {
+                display: "inline-block",
+                whiteSpace: "pre"
+              },
+              transition: {
+                duration: 0.2
+              }
+            }, {
+              default: i(() => [
+                d(f(t.value), 1)
+              ]),
+              _: 1
+            }, 8, ["layout"]))
+          ]),
+          _: 1
+        }, 8, ["anchor-x"])
+      ]),
+      _: 1
+    }, 8, ["data-state", "style", "aria-hidden", "onMotioncomplete"]));
+  }
+});
+export {
+  B as default
+};

package/dist/es/components/AnimateNumber/NumberSymbol.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./NumberSymbol.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/AnimateNumber/config.mjs

@@ -0,0 +1,21 @@
+import { addScaleCorrector as n } from "motion-v";
+const t = "var(--mask-height, 0.15em)", o = "var(--mask-width, 0.5em)", a = `calc(${o} / var(--invert-x, 1))`, r = "#000 0, transparent 71%", s = `linear-gradient(to right, transparent 0, #000 ${a}, #000 calc(100% - ${a}), transparent),linear-gradient(to bottom, transparent 0, #000 ${t}, #000 calc(100% - ${t}), transparent 100%),radial-gradient(at bottom right, ${r}),radial-gradient(at bottom left, ${r}), radial-gradient(at top left, ${r}), radial-gradient(at top right, ${r})`, d = `100% calc(100% - ${t} * 2),calc(100% - ${a} * 2) 100%,${a} ${t},${a} ${t},${a} ${t},${a} ${t}`;
+n({
+  "--invert-x": {
+    correct: (c, { treeScale: e, projectionDelta: i }) => i.x.scale * e.x
+  }
+});
+const $ = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  position: "absolute",
+  width: "100%"
+};
+export {
+  $ as digitFillStyle,
+  s as mask,
+  t as maskHeight,
+  d as maskSize,
+  o as maskWidth
+};

package/dist/es/components/AnimateNumber/context.mjs

@@ -0,0 +1,6 @@
+import { createContext as t } from "motion-v";
+const [o, n] = t("SectionContext");
+export {
+  n as injectSectionContext,
+  o as useSectionContext
+};

package/dist/es/components/AnimateNumber/hooks/use-is-initial-render.mjs

@@ -0,0 +1,12 @@
+import { onMounted as n } from "vue";
+function t() {
+  const e = {
+    current: !0
+  };
+  return n(() => {
+    e.current = !1;
+  }), e;
+}
+export {
+  t as useIsInitialRender
+};

package/dist/es/components/AnimateNumber/index.mjs

@@ -0,0 +1,5 @@
+import m from "./AnimateNumber.vue.mjs";
+const r = m;
+export {
+  r as AnimateNumber
+};

package/dist/es/components/AnimateNumber/use-animate.mjs

@@ -0,0 +1,24 @@
+import { mountedStates as u } from "motion-v";
+import { ref as f, watch as m } from "vue";
+function v(e) {
+  const n = f();
+  function o(t) {
+    n.value = t == null ? void 0 : t.$el;
+  }
+  m(() => e.isPresent, (t) => {
+    var i;
+    n.value && ((i = u.get(n.value)) == null || i.setActive("exit", !t));
+  });
+  function a(t) {
+    var i;
+    t.detail.isExit && !e.isPresent && ((i = e.onRemove) == null || i.call(e, e.partKey));
+  }
+  return {
+    root: n,
+    getRoot: o,
+    handleComplete: a
+  };
+}
+export {
+  v as useAnimate
+};

package/dist/es/components/AnimateNumber/utils/format-parts.mjs

@@ -0,0 +1,61 @@
+function b(y, {
+  locales: I,
+  format: d
+}, u, i) {
+  const r = new Intl.NumberFormat(I, d).formatToParts(Number(y));
+  u && r.unshift({ type: "prefix", value: u }), i && r.push({ type: "suffix", value: i });
+  const p = [], a = [], s = [], c = [], f = {}, n = (e) => `${e}:${f[e] = (f[e] ?? -1) + 1}`;
+  let g = "", m = !1, v = !1, o = 0;
+  for (const e of r) {
+    g += e.value;
+    const t = e.type === "minusSign" || e.type === "plusSign" ? "sign" : e.type;
+    switch (t) {
+      case "integer":
+        m = !0, a.push(
+          ...e.value.split("").map((l) => ({ type: t, value: parseInt(l) }))
+        );
+        break;
+      case "group":
+        a.push({ type: t, value: e.value });
+        break;
+      case "decimal":
+        v = !0, s.push({
+          type: t,
+          value: e.value,
+          key: n(t),
+          originalIndex: o++
+        });
+        break;
+      case "fraction":
+        s.push(
+          ...e.value.split("").map((l) => ({
+            type: t,
+            value: parseInt(l),
+            key: n(t),
+            originalIndex: o++
+          }))
+        );
+        break;
+      default:
+        (m || v ? c : p).push({
+          type: t,
+          value: e.value,
+          key: n(t),
+          originalIndex: o++
+        });
+    }
+  }
+  const h = [];
+  for (let e = a.length - 1; e >= 0; e--) {
+    const t = n(a[e].type);
+    h.unshift({
+      ...a[e],
+      key: t,
+      originalIndex: e
+    });
+  }
+  return { pre: p, integer: h, fraction: s, post: c, formatted: g };
+}
+export {
+  b as formatToParts
+};

package/dist/es/components/AnimateNumber/utils/get-width-in-ems.mjs

@@ -0,0 +1,7 @@
+function n(t) {
+  const { width: e, fontSize: o } = getComputedStyle(t);
+  return `${parseFloat(e) / parseFloat(o)}em`;
+}
+export {
+  n as getWidthInEm
+};

package/dist/es/components/AnimateNumber/utils/target-widths.mjs

@@ -0,0 +1,4 @@
+const t = /* @__PURE__ */ new WeakMap();
+export {
+  t as targetWidths
+};

package/dist/es/components/Cursor/Cursor.vue.mjs

@@ -0,0 +1,135 @@
+import { defineComponent as j, toRef as w, useSlots as k, computed as M, createBlock as v, openBlock as S, Teleport as X, createCommentVNode as Y, unref as o, withCtx as l, createVNode as c, mergeProps as H, renderSlot as L } from "vue";
+import { useSpring as T, LayoutGroup as N, MotionConfig as O, motion as R, AnimatePresence as A } from "motion-v";
+import { useCursorStyles as E } from "./use-cursor-styles.mjs";
+import { usePointerPosition as F } from "./hooks/use-pointer-position.mjs";
+import { useOffset as G } from "./hooks/use-offset.mjs";
+import { useCursorState as _ } from "./hooks/use-cursor-state/index.mjs";
+import { useCursorIsInView as q } from "./hooks/use-cursor-in-view.mjs";
+import { useSnapToTarget as D } from "./hooks/use-snap-to-target.mjs";
+import { defaultFollowSpring as J, topLeftPoint as x, centerPoint as K, autoSize as Q, defaultTransition as U } from "./config.mjs";
+import { getCursorSize as W } from "./get-cursor-size.mjs";
+import { useHasPointerMoved as Z } from "./hooks/use-has-pointer-moved.mjs";
+const mt = /* @__PURE__ */ j({
+  __name: "Cursor",
+  props: {
+    follow: { type: Boolean, default: !1 },
+    center: { default: ({ follow: i }) => i ? x : K },
+    offset: { default: () => x },
+    spring: { type: [Boolean, Object], default: ({ follow: i }) => i ? J : !1 },
+    snapToTarget: { type: Boolean, default: !1 },
+    matchTextSize: { type: Boolean, default: !0 },
+    transition: {},
+    variants: {},
+    style: {}
+  },
+  setup(i) {
+    const e = i, z = w(e, "offset");
+    E(() => e.follow);
+    const f = F(), s = G(f, z), d = T(s.x, e.spring || void 0), y = T(s.y, e.spring || void 0);
+    function g() {
+      const t = s.x.on("change", (r) => {
+        d.jump(r), t();
+      }), n = s.y.on("change", (r) => {
+        y.jump(r), n();
+      });
+    }
+    const a = _(), C = q(g), { x: P, y: $ } = D(
+      e.spring ? { x: d, y } : f,
+      w(e, "snapToTarget"),
+      a
+    ), p = k(), u = M(() => {
+      var r, m;
+      const t = (m = (r = p.default) == null ? void 0 : r.call(p)) == null ? void 0 : m.filter(
+        (h) => h.type !== Symbol.for("v-cmt")
+      );
+      if (t != null && t.length)
+        return Q;
+      const n = W(a.value.type, a.value, {
+        matchPointerSize: e.snapToTarget,
+        matchTextSize: e.matchTextSize
+      });
+      return {
+        width: `${n.width}px`,
+        height: `${n.height}px`
+      };
+    }), B = Z(f, g);
+    function b(t) {
+      return (n, r) => `translate(-${t.x * 100}%, -${t.y * 100}%) ${r}`;
+    }
+    function I() {
+      const { follow: t, center: n, offset: r, spring: m, snapToTarget: h, matchTextSize: tt, ...V } = e;
+      return {
+        ...V
+      };
+    }
+    return (t, n) => (S(), v(X, { to: "body" }, [
+      o(B) ? (S(), v(o(N), { key: 0 }, {
+        default: l(() => [
+          c(o(O), {
+            transition: e.transition || o(U)
+          }, {
+            default: l(() => [
+              c(o(R).div, H({
+                layout: "",
+                "data-motion-cursor": t.follow ? "follow" : "pointer",
+                "data-framer-portal-id": "motion-cursor",
+                initial: "exit",
+                exit: "exit"
+              }, {
+                ...t.$attrs,
+                ...I()
+              }, {
+                variants: {
+                  default: { opacity: 1, scale: 1 },
+                  exit: { opacity: 0, scale: 0 },
+                  pressed: t.follow ? { opacity: 1, scale: 1 } : { opacity: 1, scale: 0.9 },
+                  ...t.variants
+                },
+                animate: [
+                  "default",
+                  o(a).type,
+                  o(C) ? o(a).isPressed ? "pressed" : "" : "exit"
+                ],
+                "transform-template": b(t.center),
+                "data-w": u.value.width,
+                style: {
+                  width: u.value.width,
+                  height: u.value.height,
+                  borderRadius: t.follow ? 0 : 20,
+                  zIndex: t.follow ? 99998 : 99999,
+                  willChange: "transform",
+                  contain: "layout",
+                  overflow: "hidden",
+                  originX: t.center.x,
+                  originY: t.center.y,
+                  ...e.style,
+                  x: o(P),
+                  y: o($),
+                  top: 0,
+                  left: 0,
+                  position: "fixed",
+                  pointerEvents: "none"
+                }
+              }), {
+                default: l(() => [
+                  c(o(A), { multiple: "" }, {
+                    default: l(() => [
+                      L(t.$slots, "default")
+                    ]),
+                    _: 3
+                  })
+                ]),
+                _: 3
+              }, 16, ["data-motion-cursor", "variants", "animate", "transform-template", "data-w", "style"])
+            ]),
+            _: 3
+          }, 8, ["transition"])
+        ]),
+        _: 3
+      })) : Y("", !0)
+    ]));
+  }
+});
+export {
+  mt as default
+};

package/dist/es/components/Cursor/Cursor.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./Cursor.vue.mjs";
+export {
+  f as default
+};

package/dist/es/components/Cursor/config.mjs

@@ -0,0 +1,8 @@
+const t = { width: "auto", height: "auto" }, o = { x: 0, y: 0 }, n = { x: 0.5, y: 0.5 }, e = { stiffness: 1e3, damping: 100 }, i = { duration: 0.15, ease: [0.38, 0.12, 0.29, 1] };
+export {
+  t as autoSize,
+  n as centerPoint,
+  e as defaultFollowSpring,
+  i as defaultTransition,
+  o as topLeftPoint
+};

package/dist/es/components/Cursor/get-cursor-size.mjs

@@ -0,0 +1,16 @@
+function i(T, t, {
+  matchPointerSize: E,
+  matchTextSize: e
+}) {
+  switch (T) {
+    case "pointer":
+      return E && t.targetBoundingBox ? t.targetBoundingBox : { width: 30, height: 30 };
+    case "text":
+      return e && t.fontSize ? { width: 4, height: t.fontSize } : { width: 4, height: 20 };
+    default:
+      return { width: 16, height: 16 };
+  }
+}
+export {
+  i as getCursorSize
+};