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

Motion Plus Vue

import { defineComponent as h, computed as u, createBlock as x, openBlock as b, unref as n, withCtx as i, createVNode as t, mergeProps as D, normalizeStyle as p } from "vue";
import { formatToParts as L } from "./utils/format-parts.mjs";
import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as s } from "motion-v";
import r from "./NumberSection.vue.mjs";
import { maskHeight as d } from "./config.mjs";
import T from "./Mask.vue.mjs";
const P = /* @__PURE__ */ h({
  name: "AnimateNumber",
  inheritAttrs: !1,
  __name: "AnimateNumber",
  props: {
    locales: {},
    format: {},
    transition: {},
    suffix: {},
    prefix: {},
    value: {},
    style: {},
    layoutDependency: {}
  },
  setup(y) {
    const c = {
      opacity: { duration: 1, ease: C },
      layout: { type: "spring", duration: 1, bounce: 0 },
      y: { type: "spring", duration: 1, bounce: 0 }
    }, e = y, o = u(() => {
      const l = e.value;
      return L(l, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
    }), f = A(), m = u(() => e.transition ?? f.value.transition ?? c);
    function v() {
      const { format: l, prefix: g, suffix: k, locales: w, value: I, layoutDependency: S, ..._ } = e;
      return _;
    }
    const a = u(() => {
      if (e.layoutDependency !== void 0)
        return { layoutDependency: e.layoutDependency, value: e.value };
    });
    return (l, g) => (b(), x(n(N), null, {
      default: i(() => [
        t(n($), { transition: m.value }, {
          default: i(() => [
            t(n(s).div, D({
              ...l.$attrs,
              ...v()
            }, {
              layout: "",
              "layout-dependency": a.value,
              style: {
                lineHeight: "1",
                ...l.style,
                display: "inline-flex",
                isolation: "isolate",
                whiteSpace: "nowrap"
              }
            }), {
              default: i(() => [
                t(n(s).div, {
                  layout: "",
                  "layout-dependency": a.value,
                  "aria-label": o.value.formatted,
                  style: {
                    display: "inline-flex",
                    direction: "ltr",
                    isolation: "isolate",
                    position: "relative",
                    zIndex: -1
                  }
                }, {
                  default: i(() => [
                    t(r, {
                      "layout-dependency": a.value,
                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                      "aria-hidden": !0,
                      justify: "right",
                      mode: "popLayout",
                      parts: o.value.pre,
                      name: "pre"
                    }, null, 8, ["layout-dependency", "style", "parts"]),
                    t(T, { "layout-dependency": a.value }, {
                      default: i(() => [
                        t(r, {
                          "layout-dependency": a.value,
                          justify: "right",
                          parts: o.value.integer,
                          name: "integer",
                          mode: "popLayout"
                        }, null, 8, ["layout-dependency", "parts"]),
                        t(r, {
                          "layout-dependency": a.value,
                          layout: "position",
                          parts: o.value.fraction,
                          name: "fraction",
                          mode: "popLayout"
                        }, null, 8, ["layout-dependency", "parts"])
                      ]),
                      _: 1
                    }, 8, ["layout-dependency"]),
                    t(r, {
                      "layout-dependency": a.value,
                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                      "aria-hidden": !0,
                      layout: "position",
                      mode: "popLayout",
                      parts: o.value.post,
                      name: "post"
                    }, null, 8, ["layout-dependency", "style", "parts"])
                  ]),
                  _: 1
                }, 8, ["layout-dependency", "aria-label"])
              ]),
              _: 1
            }, 16, ["layout-dependency", "style"])
          ]),
          _: 1
        }, 8, ["transition"])
      ]),
      _: 1
    }));
  }
});
export {
  P as default
};