@wfrog/vc-ui 1.0.0

package/dist/es/components/thousand-input/thousand-input.mjs

@@ -0,0 +1,159 @@
+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 _ };