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

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
// vue-script:D:\project\_my\vc\src\components\thousand-input\index.vue?type=script
import { defineComponent as _defineComponent2 } from "vue";
import { unref as _unref2, renderSlot as _renderSlot2, isRef as _isRef, mergeProps as _mergeProps, withCtx as _withCtx2, createSlots as _createSlots2, openBlock as _openBlock2, createBlock as _createBlock2, withDirectives as _withDirectives, createCommentVNode as _createCommentVNode } from "vue";
import { computed as computed2, nextTick, ref, watch } from "vue";
import { isEqual } from "lodash-es";

// vue-script:D:\project\_my\vc\src\components\input\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";
import { computed, useCssModule } from "vue";
import { ElInput } from "element-plus";
var input_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    block: { type: Boolean, required: false, default: false },
    width: { type: String, required: false }
  },
  setup(__props) {
    const props = __props;
    _useCssVars((_ctx) => ({
      "1b3ff755-myWidth": _unref(myWidth)
    }));
    const $style = useCssModule();
    const className = computed(() => ({
      [$style.input]: true,
      [$style.block]: props.block
    }));
    const myWidth = computed(() => {
      return props.width || (props.block ? "100%" : "214px");
    });
    return (_ctx, _cache) => {
      return _openBlock(), _createBlock(_unref(ElInput), {
        class: _normalizeClass(_unref(className))
      }, _createSlots({ _: 2 }, [
        _ctx.$slots.prefix ? {
          name: "prefix",
          fn: _withCtx(() => [
            _renderSlot(_ctx.$slots, "prefix")
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots.suffix ? {
          name: "suffix",
          fn: _withCtx(() => [
            _renderSlot(_ctx.$slots, "suffix")
          ]),
          key: "1"
        } : void 0,
        _ctx.$slots.prepend ? {
          name: "prepend",
          fn: _withCtx(() => [
            _renderSlot(_ctx.$slots, "prepend")
          ]),
          key: "2"
        } : void 0,
        _ctx.$slots.append ? {
          name: "append",
          fn: _withCtx(() => [
            _renderSlot(_ctx.$slots, "append")
          ]),
          key: "3"
        } : void 0
      ]), 1032, ["class"]);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\input\index.vue?type=style&index=0&isModule=true&isNameImport=true
var input_default2 = { input: "_input_1hm4f_1", block: "_block_1hm4f_5" };

// src/components/input/index.vue
var cssModules = {};
input_default.__cssModules = cssModules = {};
cssModules["$style"] = input_default2;
var input_default3 = input_default;

// src/directives/thousand/index.ts
import { loader } from "@wfrog/utils";
var thousand = {
  mounted: async (el, binding) => {
    const elInput = el.getElementsByTagName("input")[binding.value?.elInputIndex || 0] || el.getElementsByTagName("input")[0];
    const disabled = elInput.disabled;
    elInput.disabled = true;
    el.classList.add("is-disabled");
    const Cleave = await loader.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.style.textAlign = "right";
    elInput.style.fontFamily = "Pathway Gothic One";
    elInput.value = elInput.cleave?.properties?.result || "";
    el.classList.remove("is-disabled");
    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);
  }
};
var thousand_default = thousand;

// vue-script:D:\project\_my\vc\src\components\thousand-input\index.vue?type=script
var thousand_input_default = /* @__PURE__ */ _defineComponent2({
  __name: "index",
  props: {
    modelValue: { type: String, default: "" },
    formatValue: { type: String, default: "" },
    option: { type: Object, default: () => ({ decimalScale: 2, integerScale: 12 }) },
    padDecimal: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "update:formatValue", "change"],
  setup(__props, { emit }) {
    const props = __props;
    const fixValue = (val) => {
      if (val === "" || val === void 0) {
        return "";
      }
      let myVal = val.replace(/[^\d\.]/g, "").replace(/^0(\d{1,}\.?)+?/, "$1").replace(/^\./, "").replace(/\.{1,}/g, ".");
      const arrayVal = myVal.split(".");
      if (arrayVal.length > 1) {
        const [integer, decimal] = arrayVal;
        myVal = `${integer}.${decimal}`;
      }
      return myVal;
    };
    const padValue = (val) => {
      if (props.padDecimal && props.option.decimalScale > 0 && val !== props.option.prefix) {
        const [integer, decimal = ""] = val.split(".");
        return `${integer}.${decimal.padEnd(props.option.decimalScale, "0")}`;
      }
      return val;
    };
    const formatValue = () => {
      const { modelValue } = props;
      const prefix = props.option.prefix || "";
      if (modelValue === "") {
        emit("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);
      emit("update:formatValue", formatVal);
      return myVal;
    };
    const elInput = ref();
    const myValue = computed2({
      get: () => formatValue(),
      set: (val) => {
        emit("update:modelValue", fixValue(val));
      }
    });
    const handleChange = (val) => {
      const myVal = fixValue(val).replace(/\.$/, "");
      myValue.value = myVal;
      emit("change", [myVal, padValue(val).replace(/\.$/, "")]);
    };
    const visible = ref(true);
    const observed = computed2(() => ({ ...props.option, padDecimal: props.padDecimal }));
    watch(observed, (val1, val2) => {
      if (isEqual(val1, val2)) {
        return;
      }
      visible.value = false;
      nextTick(() => {
        visible.value = true;
        setTimeout(() => {
          myValue.value = elInput.value.input?.value;
          nextTick(() => {
            handleChange(formatValue());
          });
        }, 100);
      });
    });
    return (_ctx, _cache) => {
      return visible.value ? _withDirectives((_openBlock2(), _createBlock2(input_default3, _mergeProps({
        key: 0,
        ref_key: "elInput",
        ref: elInput,
        modelValue: _unref2(myValue),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null)
      }, _ctx.$attrs, {
        class: _ctx.$style.main,
        onChange: handleChange
      }), _createSlots2({ _: 2 }, [
        _ctx.$slots.prepend ? {
          name: "prepend",
          fn: _withCtx2(() => [
            _renderSlot2(_ctx.$slots, "prepend")
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots.append ? {
          name: "append",
          fn: _withCtx2(() => [
            _renderSlot2(_ctx.$slots, "append")
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["modelValue", "class"])), [
        [_unref2(thousand_default), __props.option]
      ]) : _createCommentVNode("v-if", true);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\thousand-input\index.vue?type=style&index=0&isModule=true&isNameImport=true
var thousand_input_default2 = { main: "_main_m3b07_1" };

// src/components/thousand-input/index.vue
var cssModules2 = {};
thousand_input_default.__cssModules = cssModules2 = {};
cssModules2["$style"] = thousand_input_default2;
var thousand_input_default3 = thousand_input_default;
export {
  thousand_input_default3 as default
};