(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('number-flow'), require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'number-flow', 'vue'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.numberFlow, global.Vue));
})(this, (function (exports, numberFlow, vue) { 'use strict';

  function omit(obj, ...keys) {
    const _obj = { ...obj };
    for (const key of keys) {
      delete _obj[key];
    }
    return _obj;
  }

  const _hoisted_1 = ["data-will-change"];
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
    __name: "vue-number-flow",
    props: {
      value: {},
      format: {},
      locales: {},
      isolate: { type: Boolean, default: false },
      animated: { type: Boolean, default: true },
      respectMotionPreference: { type: Boolean, default: true },
      willChange: { type: Boolean, default: false },
      trend: { type: [Boolean, String], default: true },
      onAnimationsStart: {},
      onAnimationsFinish: {},
      opacityTiming: {},
      transformTiming: {},
      spinTiming: {}
    },
    setup(__props) {
      const props = __props;
      const parts = vue.ref(
        numberFlow.partitionParts(props.value, Intl.NumberFormat(props.locales, props.format))
      );
      const instance = vue.getCurrentInstance();
      const rootEl = vue.computed(() => instance?.proxy?.$el);
      vue.watch(
        () => props.value,
        async () => {
          parts.value = numberFlow.partitionParts(
            props.value,
            Intl.NumberFormat(props.locales, props.format)
          );
          if (rootEl.value) {
            rootEl.value.setAttribute("parts", JSON.stringify(parts.value));
            rootEl.value.willUpdate();
            await vue.nextTick();
            rootEl.value.didUpdate();
          }
        },
        { immediate: true }
      );
      vue.watch(
        () => omit(props, "value"),
        async (newProps, prevProps) => {
          await vue.nextTick();
          if (!rootEl.value) return;
          rootEl.value.animated = newProps.animated;
          rootEl.value.respectMotionPreference = newProps.respectMotionPreference;
          rootEl.value.trend = newProps.trend;
          rootEl.value.isolate = newProps.isolate;
          if (newProps.opacityTiming)
            rootEl.value.opacityTiming = newProps.opacityTiming;
          if (newProps.transformTiming)
            rootEl.value.transformTiming = newProps.transformTiming;
          if (newProps.spinTiming) rootEl.value.spinTiming = newProps.spinTiming;
          if (prevProps?.onAnimationsStart) {
            rootEl.value.removeEventListener(
              "animationsstart",
              prevProps.onAnimationsStart
            );
          }
          if (newProps.onAnimationsStart) {
            rootEl.value.addEventListener(
              "animationsstart",
              newProps.onAnimationsStart
            );
          }
          if (prevProps?.onAnimationsFinish) {
            rootEl.value.removeEventListener(
              "animationsfinish",
              prevProps.onAnimationsFinish
            );
          }
          if (newProps.onAnimationsFinish) {
            rootEl.value.addEventListener(
              "animationsfinish",
              newProps.onAnimationsFinish
            );
          }
        },
        {
          immediate: true,
          deep: true
        }
      );
      return (_ctx, _cache) => {
        return vue.openBlock(), vue.createElementBlock("number-flow", {
          "data-will-change": _ctx.willChange ? "" : void 0
        }, [
          vue.createElementVNode("span", {
            style: vue.normalizeStyle(vue.unref(numberFlow.slottedStyles)({ willChange: true }))
          }, vue.toDisplayString(parts.value.formatted), 5)
        ], 8, _hoisted_1);
      };
    }
  });

  const defineNumberFlow = () => {
    const OBSERVED_ATTRIBUTES = ["parts"];
    class NumberFlowElement extends numberFlow.NumberFlowLite {
      static get observedAttributes() {
        return OBSERVED_ATTRIBUTES;
      }
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      attributeChangedCallback(attr, _oldValue, newValue) {
        this[attr] = JSON.parse(newValue);
      }
    }
    NumberFlowElement.define();
  };

  exports.VueNumberFlow = _sfc_main;
  exports.defineNumberFlow = defineNumberFlow;
  Object.keys(numberFlow).forEach(k => {
    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
      enumerable: true,
      get: () => numberFlow[k]
    });
  });

  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

}));
//# sourceMappingURL=index.umd.cjs.map