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

Motion Plus Vue

import { defineComponent as a, createBlock as n, openBlock as i, unref as e, normalizeStyle as r, withCtx as l, renderSlot as p } from "vue";
import { motion as s } from "motion-v";
import { maskSize as m, mask as d, maskHeight as c, maskWidth as o } from "./config.mjs";
const _ = /* @__PURE__ */ a({
  __name: "Mask",
  props: {
    layoutDependency: {}
  },
  setup(k) {
    return (t, f) => (i(), n(e(s).span, {
      layout: "",
      "layout-dependency": t.layoutDependency,
      "aria-hidden": !0,
      style: r({
        display: "inline-flex",
        "--invert-x": 1,
        margin: `0 calc(-1*${e(o)})`,
        padding: `calc(${e(c)}/2) ${e(o)}`,
        position: "relative",
        zIndex: -1,
        overflow: "clip",
        webkitMaskImage: e(d),
        webkitMaskSize: e(m),
        webkitMaskPosition: "center, center, top left, top right, bottom right, bottom left",
        webkitMaskRepeat: "no-repeat"
      })
    }, {
      default: l(() => [
        p(t.$slots, "default")
      ]),
      _: 3
    }, 8, ["layout-dependency", "style"]));
  }
});
export {
  _ as default
};