motion-plus-vue/dist/es/components/AnimateNumber/NumberSection.vue.mjs

Motion Plus Vue

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";
const Q = /* @__PURE__ */ I({
  __name: "NumberSection",
  props: {
    parts: {},
    justify: { default: "left" },
    mode: {},
    name: {},
    style: {},
    layoutDependency: {}
  },
  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 (v.current) {
        p.value && (p.value.style.width = j(a.value));
        return;
      }
      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);
          };
        }
      }), s = j(a.value);
      d.value = s;
      for (let t = e.length - 1; t >= 0; t--) {
        const r = e[t];
        r && r();
      }
    }, { flush: "post" });
    const f = E(o, "justify");
    z({
      justify: f
    });
    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 (n, i) => (u(), m(y(T).span, {
      ref: y(p),
      class: $(`number-section-${n.name}`),
      style: _({
        ...n.style,
        display: "inline-flex",
        justifyContent: f.value,
        width: d.value
      }),
      layout: "position",
      "layout-dependency": n.layoutDependency
    }, {
      default: R(() => [
        B("span", {
          ref_key: "measuredRef",
          ref: a,
          style: {
            display: "inline-flex",
            justifyContent: "inherit",
            position: "relative"
          }
        }, [
          i[0] || (i[0] = N(" ​ ")),
          S(y(V), {
            mode: n.mode,
            "anchor-x": f.value,
            initial: !1
          }, {
            default: R(() => [
              (u(!0), w(P, null, b(l.value, (e) => (u(), w(P, {
                key: e.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: 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: 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
          }, 8, ["mode", "anchor-x"])
        ], 512)
      ]),
      _: 1
    }, 8, ["class", "style", "layout-dependency"]));
  }
});
export {
  Q as default
};