@wfrog/vc/dist/es/components/thousand-input/thousand-input.mjs

vue3 组件库 vc

import './index.css'
import { defineComponent, useTemplateRef, computed, ref, watch, nextTick, withDirectives, createCommentVNode, unref, createBlock, openBlock, mergeProps, isRef, createSlots, withCtx, renderSlot } from 'vue';
import { i as index } from '../../chunk/BdDihk0t.mjs';
import { C as Component$1 } from '../input/input.mjs';
import { i as isEqual } from '../../chunk/-EkpfdcW.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const thousand = {
  mounted: async (el, binding) => {
    const elInput = el.getElementsByTagName("input")[binding.value?.elInputIndex || 0] || el.getElementsByTagName("input")[0];
    elInput.style.textAlign = "right";
    elInput.style.fontFamily = "Pathway Gothic One";
    const disabled = elInput.disabled;
    elInput.disabled = true;
    const Cleave = await index.loadCdnSingle("cleave");
    const option = { decimalScale: 2, integerScale: 0, prefix: "", ...binding.value };
    elInput.cleave = new Cleave(elInput, {
      numeral: true,
      numeralThousandsGroupStyle: "thousand",
      numeralDecimalScale: option.decimalScale,
      numeralIntegerScale: option.integerScale,
      prefix: option.prefix
    });
    elInput.value = elInput.cleave?.properties?.result || "";
    elInput.disabled = disabled;
  },
  updated: (el, binding) => {
    setTimeout(() => {
      const event = new Event("input", { bubbles: true });
      const elInput = el.getElementsByTagName("input")[binding.value?.elInputIndex || 0] || el.getElementsByTagName("input")[0];
      elInput.dispatchEvent(event);
      if (elInput.cleave) {
        elInput.value = elInput.cleave?.properties?.result || "";
      }
    }, 0);
  }
};

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "thousand-input",
  props: {
    modelValue: { default: "" },
    formatValue: { default: "" },
    options: { default: () => ({ decimalScale: 2, integerScale: 12 }) },
    padDecimal: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "update:formatValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    function fixValue(val) {
      if (val === "" || val === void 0) {
        return "";
      }
      let myVal = val.replace(/[^\d.]/g, "").replace(/^0+(?=\d)/, "").replace(/^\./, "").replace(/\.+/g, ".");
      const arrayVal = myVal.split(".");
      if (arrayVal.length > 1) {
        const [integer, decimal] = arrayVal;
        myVal = `${integer}.${decimal}`;
      }
      return myVal;
    }
    function padValue(val) {
      if (props.padDecimal && props.options.decimalScale > 0 && val !== props.options.prefix) {
        const [integer, decimal = ""] = val.split(".");
        return `${integer}.${decimal.padEnd(props.options.decimalScale, "0")}`;
      }
      return val;
    }
    function formatValue() {
      const { modelValue } = props;
      const prefix = props.options.prefix || "";
      if (modelValue === "") {
        emits("update:formatValue", prefix);
        return prefix;
      }
      const dot = modelValue.toString().charAt(modelValue.length - 1) === "." ? "." : "";
      const myVal = prefix + (+fixValue(props.modelValue)).toLocaleString("en-US") + dot;
      const formatVal = padValue(myVal);
      emits("update:formatValue", formatVal);
      return myVal;
    }
    const inputRef = useTemplateRef("inputRef");
    const myValue = computed({
      get: () => formatValue(),
      set: (val) => {
        emits("update:modelValue", fixValue(val));
      }
    });
    function handleChange(val) {
      const myVal = fixValue(val).replace(/\.$/, "");
      myValue.value = myVal;
      emits("change", [myVal, padValue(val).replace(/\.$/, "")]);
    }
    const visible = ref(true);
    const observed = computed(() => ({ ...props.options, padDecimal: props.padDecimal }));
    watch(observed, (val1, val2) => {
      if (isEqual(val1, val2)) {
        return;
      }
      visible.value = false;
      nextTick(() => {
        visible.value = true;
        setTimeout(() => {
          myValue.value = inputRef.value?.inputRef?.input?.value || "";
          nextTick(() => {
            handleChange(formatValue());
          });
        }, 100);
      });
    });
    return (_ctx, _cache) => {
      return unref(visible) ? withDirectives((openBlock(), createBlock(Component$1, mergeProps({
        key: 0,
        ref_key: "inputRef",
        ref: inputRef,
        modelValue: unref(myValue),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(myValue) ? myValue.value = $event : null)
      }, _ctx.$attrs, {
        class: _ctx.$style.main,
        onChange: handleChange
      }), createSlots({ _: 2 }, [
        _ctx.$slots.prepend ? {
          name: "prepend",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "prepend")
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots.append ? {
          name: "append",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "append")
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["modelValue", "class"])), [
        [unref(thousand), __props.options]
      ]) : createCommentVNode("", true);
    };
  }
});

/* unplugin-vue-components disabled */const main = "_main_m3b07_1";
const style0 = {
	main: main
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_32 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
    __proto__: null,
    default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_32 as _ };