motion-plus-vue 1.1.5 → 1.2.0-alpha.0

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

@@ -1,11 +1,11 @@
-import { defineComponent as M, ref as u, watch as y, nextTick as W, createBlock as s, openBlock as o, unref as a, normalizeStyle as v, withCtx as j, createElementVNode as A, createElementBlock as m, createCommentVNode as R, Fragment as V, renderList as b, resolveDynamicComponent as g, createVNode as F } from "vue";
+import { defineComponent as _, ref as s, watch as v, nextTick as B, createBlock as c, openBlock as o, unref as l, normalizeStyle as g, withCtx as j, createElementVNode as A, createElementBlock as d, createCommentVNode as R, Fragment as V, renderList as b, resolveDynamicComponent as h, 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 x, maskHeight as H } from "./config.mjs";
+import { digitFillStyle as D, 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({
+const Z = /* @__PURE__ */ _({
   __name: "NumberDigit",
   props: {
     value: {},
@@ -17,79 +17,84 @@ const Z = /* @__PURE__ */ M({
     },
     partKey: {},
     onRemove: {},
-    style: {}
+    style: {},
+    layoutDependency: {}
   },
-  setup(w) {
-    const r = w, c = r.initialValue ?? r.value, h = z(), I = K(), l = u(), k = u(Array(10).fill(null)), C = u(), {
+  setup(x) {
+    const a = x, m = a.initialValue ?? a.value, k = z(), I = K(), r = s(), p = s(Array(10).fill(null)), C = s(), {
       getRoot: N,
       handleComplete: P,
-      root: p
-    } = L(r);
-    let d = c;
-    const t = u(c);
-    y([() => r.value, () => r.isPresent], ([e, n]) => {
-      if (!n)
-        return t.value = 0;
-      if (h.current)
-        return W(() => {
-          t.value = e;
+      root: u
+    } = L(a);
+    let f = m;
+    const n = s(m);
+    v([() => a.value, () => a.isPresent], ([e, t]) => {
+      if (!t)
+        return n.value = 0;
+      if (k.current)
+        return B(() => {
+          n.value = e;
         });
-      t.value = e;
+      n.value = e;
     }, {
       immediate: !0
     });
-    function D(e) {
-      var B;
-      if (!l.value || e === d) return;
-      const n = l.value.getBoundingClientRect(), i = (B = p.value) == null ? void 0 : B.getBoundingClientRect(), _ = n.height * (e - d) + (n.top - (i ? i.top || 0 : n.top));
-      T(l.value, {
-        y: [_, 0]
+    function E(e) {
+      var w;
+      if (!r.value || e === f) return;
+      const t = r.value.getBoundingClientRect(), i = (w = u.value) == null ? void 0 : w.getBoundingClientRect(), W = t.height * (e - f) + (t.top - (i ? i.top || 0 : t.top));
+      T(r.value, {
+        y: [W, 0]
       }, I.value.transition);
     }
-    function E(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;
+    function M(e) {
+      if (k.current && m === e || !p.value[e]) return;
+      const t = Y(p.value[e]);
+      u.value && ($.set(u.value, t), u.value.style.width = t), C.value = t;
     }
-    y(t, (e) => {
-      E(e);
+    v(n, (e) => {
+      M(e);
     }, {
       immediate: !0,
-      flush: "post"
-    }), y(t, (e, n, i) => {
-      D(e), i(() => {
-        d = e;
+      flush: "sync"
+    }), v(n, async (e, t, i) => {
+      await B(), E(e), i(() => {
+        f = e;
       });
     }, {
       immediate: !0,
-      flush: "pre"
+      flush: "sync"
     });
-    function f(e) {
+    function y(e) {
       return () => F("span", {
         key: e,
         style: {
           display: "inline-block",
           padding: `calc(${H}/2) 0`
+        },
+        ref: (t) => {
+          p.value[e] = t;
         }
       }, [e]);
     }
-    return (e, n) => (o(), s(a(S).span, {
-      ref: a(N),
+    return (e, t) => (o(), c(l(S).span, {
+      ref: l(N),
       layout: "position",
+      "layout-dependency": e.layoutDependency,
       "data-state": e.isPresent ? void 0 : "exiting",
       "data-key": e.partKey,
-      style: v({
+      style: g({
         display: "inline-flex",
         justifyContent: "center",
         width: C.value,
         pointerEvents: e.isPresent ? void 0 : "none"
       }),
       "aria-hidden": !e.isPresent,
-      onMotioncomplete: a(P)
+      onMotioncomplete: l(P)
     }, {
       default: j(() => [A("span", {
         ref_key: "scope",
-        ref: l,
+        ref: r,
         style: {
           display: "inline-flex",
           justifyContent: "center",
@@ -97,27 +102,27 @@ const Z = /* @__PURE__ */ M({
           alignItems: "center",
           position: "relative"
         }
-      }, [t.value !== 0 ? (o(), m("span", {
+      }, [n.value !== 0 ? (o(), d("span", {
         key: 0,
-        style: v({
-          ...a(x),
+        style: g({
+          ...l(D),
           bottom: "100%",
           left: 0
         })
-      }, [(o(!0), m(V, null, b(t.value, (i) => (o(), s(g(f(i - 1)), {
+      }, [(o(!0), d(V, null, b(n.value, (i) => (o(), c(h(y(i - 1)), {
         key: i - 1
-      }))), 128))], 4)) : R("", !0), (o(), s(g(f(t.value)))), t.value !== 9 ? (o(), m("span", {
+      }))), 128))], 4)) : R("", !0), (o(), c(h(y(n.value)))), n.value !== 9 ? (o(), d("span", {
         key: 1,
-        style: v({
-          ...a(x),
+        style: g({
+          ...l(D),
           top: "100%",
           left: 0
         })
-      }, [(o(!0), m(V, null, b(9 - t.value, (i) => (o(), s(g(f(t.value + i)), {
-        key: t.value + i
+      }, [(o(!0), d(V, null, b(9 - n.value, (i) => (o(), c(h(y(n.value + i)), {
+        key: n.value + i
       }))), 128))], 4)) : R("", !0)], 512)]),
       _: 1
-    }, 8, ["data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
+    }, 8, ["layout-dependency", "data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
   }
 });
 export {

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

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

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

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

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

@@ -2,21 +2,21 @@ 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) {
+  function a(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) {
+  function o(t) {
     var i;
-    t.detail.isExit && !e.isPresent && ((i = e.onRemove) == null || i.call(e, e.partKey));
+    t.detail.isExit && !e.isPresent && ((i = e.onRemove) == null || i.call(e, e.partKey, t.target));
   }
   return {
     root: n,
-    getRoot: o,
-    handleComplete: a
+    getRoot: a,
+    handleComplete: o
   };
 }
 export {