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

Motion Plus 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 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__ */ _({
  __name: "NumberDigit",
  props: {
    value: {},
    initialValue: {
      default: void 0
    },
    isPresent: {
      type: Boolean
    },
    partKey: {},
    onRemove: {},
    style: {},
    layoutDependency: {}
  },
  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: 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;
        });
      n.value = e;
    }, {
      immediate: !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 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;
    }
    v(n, (e) => {
      M(e);
    }, {
      immediate: !0,
      flush: "sync"
    }), v(n, async (e, t, i) => {
      await B(), E(e), i(() => {
        f = e;
      });
    }, {
      immediate: !0,
      flush: "sync"
    });
    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, 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: g({
        display: "inline-flex",
        justifyContent: "center",
        width: C.value,
        pointerEvents: e.isPresent ? void 0 : "none"
      }),
      "aria-hidden": !e.isPresent,
      onMotioncomplete: l(P)
    }, {
      default: j(() => [A("span", {
        ref_key: "scope",
        ref: r,
        style: {
          display: "inline-flex",
          justifyContent: "center",
          flexDirection: "column",
          alignItems: "center",
          position: "relative"
        }
      }, [n.value !== 0 ? (o(), d("span", {
        key: 0,
        style: g({
          ...l(D),
          bottom: "100%",
          left: 0
        })
      }, [(o(!0), d(V, null, b(n.value, (i) => (o(), c(h(y(i - 1)), {
        key: i - 1
      }))), 128))], 4)) : R("", !0), (o(), c(h(y(n.value)))), n.value !== 9 ? (o(), d("span", {
        key: 1,
        style: g({
          ...l(D),
          top: "100%",
          left: 0
        })
      }, [(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, ["layout-dependency", "data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
  }
});
export {
  Z as default
};