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

Motion Plus Vue

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 I = /* @__PURE__ */ d({
  __name: "NumberSymbol",
  props: {
    partKey: {},
    type: {},
    value: {},
    isPresent: { type: Boolean },
    onRemove: { type: Function },
    style: {},
    layoutDependency: {},
    preInitial: { type: Boolean }
  },
  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: u({
        display: "inline-flex",
        justifyContent: e(o),
        padding: `calc(${e(v)}/2) 0`,
        position: "relative",
        pointerEvents: t.isPresent ? void 0 : "none"
      }),
      "aria-hidden": !t.isPresent,
      onMotioncomplete: e(y)
    }, {
      default: n(() => [
        c(e(h), {
          mode: "popLayout",
          "anchor-x": e(o),
          initial: t.preInitial
        }, {
          default: n(() => [
            (a(), i(e(l).span, {
              key: t.value,
              layout: e(o) === "right" ? "position" : !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: {
                  opacity: { duration: 0.4 }
                }
              },
              style: {
                display: "inline-block",
                whiteSpace: "pre",
                position: "relative"
              }
            }, {
              default: n(() => [
                m(f(t.value), 1)
              ]),
              _: 1
            }, 8, ["layout", "layout-dependency", "initial"]))
          ]),
          _: 1
        }, 8, ["anchor-x", "initial"])
      ]),
      _: 1
    }, 8, ["layout-dependency", "data-state", "style", "aria-hidden", "onMotioncomplete"]));
  }
});
export {
  I as default
};