@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/inputnumber/index.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as U, useSlots as q, inject as E, shallowRef as K, ref as H, reactive as J, computed as x, onMounted as Q, watch as R, createBlock as m, openBlock as u, createSlots as W, withCtx as p, createVNode as I, renderSlot as g, normalizeClass as b, createCommentVNode as v, createElementVNode as X, unref as r, mergeProps as V, createElementBlock as Y, toDisplayString as Z, nextTick as $ } from "vue";
-import { u as _ } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { u as ee } from "../plugins/WangsVue.es.js";
-import { s as z } from "../vendor/primevue/inputgroupaddon/inputgroupaddon.esm.es.js";
-import { s as te } from "../vendor/primevue/inputnumber/inputnumber.esm.es.js";
-import { _ as ae } from "../fieldwrapper/index.es.js";
-import { _ as S } from "../icon/index.es.js";
-import { _ as le } from "../inputgroup/index.es.js";
-import { _ as oe } from "../validatormessage/index.es.js";
-const ce = /* @__PURE__ */ U({
+import { defineComponent, useSlots, inject, shallowRef, ref, reactive, computed, onMounted, watch, createBlock, openBlock, createSlots, withCtx, createVNode, renderSlot, normalizeClass, createCommentVNode, createElementVNode, unref, mergeProps, createElementBlock, toDisplayString, nextTick } from "vue";
+import { u as useField } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { s as script } from "../vendor/primevue/inputgroupaddon/inputgroupaddon.esm.es.js";
+import { s as script$1 } from "../vendor/primevue/inputnumber/inputnumber.esm.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$3 } from "../icon/index.es.js";
+import { _ as _sfc_main$2 } from "../inputgroup/index.es.js";
+import { _ as _sfc_main$4 } from "../validatormessage/index.es.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "InputNumber",
   props: {
     modelValue: {},
@@ -22,7 +22,7 @@ const ce = /* @__PURE__ */ U({
     fieldName: {},
     mandatory: { type: Boolean },
     validatorMessage: {},
-    showValidatorMessage: { type: Boolean, default: !0 },
+    showValidatorMessage: { type: Boolean, default: true },
     placeholder: {},
     disabled: { type: Boolean },
     invalid: { type: Boolean },
@@ -45,196 +45,266 @@ const ce = /* @__PURE__ */ U({
     inputNumberClass: {},
     inputId: {},
     autoResize: { type: Boolean },
-    allowEmptyValue: { type: Boolean, default: !0 }
+    allowEmptyValue: { type: Boolean, default: true }
   },
   emits: ["update:modelValue", "input"],
-  setup(D, { emit: P }) {
-    const e = D, f = P, i = q(), M = E(
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const InputGroupAddonPreset = inject(
       "preset",
       {}
-    ).inputgroupaddon, { locale: y } = ee("InputNumber"), w = E("preset", {}).inputnumber, N = K(0), h = H(), o = J({
-      value: e.value ?? e.modelValue
-    }), F = x(
+    ).inputgroupaddon;
+    const { locale } = useWangsVueConfig("InputNumber");
+    const Preset = inject("preset", {}).inputnumber;
+    const inputKey = shallowRef(0);
+    const inputNumber = ref();
+    const field = reactive({
+      value: props.value ?? props.modelValue
+    });
+    const inputPlaceholder = computed(
       () => {
-        var t, a;
-        return e.placeholder ?? ((a = y.defaultPlaceholder) == null ? void 0 : a.replace(
+        var _a, _b;
+        return props.placeholder ?? ((_b = locale.defaultPlaceholder) == null ? void 0 : _b.replace(
           "{label}",
-          e.label ? (t = e.label) == null ? void 0 : t.toLowerCase() : ""
+          props.label ? (_a = props.label) == null ? void 0 : _a.toLowerCase() : ""
         ));
       }
     );
-    Q(() => {
-      e.useValidator && Object.assign(
-        o,
-        _(
-          e.fieldName ?? "numberInput",
-          (l) => $(() => O(l))
-        )
-      );
-      const t = e.value ?? e.modelValue, a = t != null ? C(t) : t;
-      a != null && e.allowEmptyValue ? o.value = a : e.allowEmptyValue || (o.value = a ?? e.min ?? 0), e.invalid && e.useValidator && o.validate();
+    onMounted(() => {
+      if (props.useValidator) {
+        Object.assign(
+          field,
+          useField(
+            props.fieldName ?? "numberInput",
+            (value) => {
+              return nextTick(() => setValidatorMessage(value));
+            }
+          )
+        );
+      }
+      const initialValue = props.value ?? props.modelValue;
+      const minOrMaxValue = initialValue != void 0 ? findMinOrMaxValue(initialValue) : initialValue;
+      if (minOrMaxValue != null && props.allowEmptyValue)
+        field.value = minOrMaxValue;
+      else if (!props.allowEmptyValue)
+        field.value = minOrMaxValue ?? props.min ?? 0;
+      if (props.invalid && props.useValidator) field.validate();
+    });
+    const invalidInput = computed(() => props.invalid || !!field.errorMessage);
+    const inputNumberId = computed(() => {
+      if (props.inputId) return props.inputId;
+      return (props.label ?? props.fieldName ?? "input-number").toLowerCase().trim().replaceAll(" ", "-") + "-inputnumber";
     });
-    const G = x(() => e.invalid || !!o.errorMessage), L = x(() => e.inputId ? e.inputId : (e.label ?? e.fieldName ?? "input-number").toLowerCase().trim().replaceAll(" ", "-") + "-inputnumber"), O = (t) => {
-      var l, n;
-      const a = t != null && typeof t == "number";
-      if (e.invalid && typeof e.validatorMessage == "string")
-        return e.validatorMessage;
-      if (typeof e.validatorMessage != "string") {
-        const { empty: s, exist: d } = e.validatorMessage ?? {};
-        if (t == null && e.mandatory)
-          return s ?? y.emptyInvalidText.replace("{label}", e.label);
-        if (a && ((l = e.existingValues) != null && l.includes(t)))
-          return d ?? ((n = y.alreadyExistInvalidText) == null ? void 0 : n.replace("{label}", e.label));
+    const setValidatorMessage = (value) => {
+      var _a, _b;
+      const hasValue = value != null && typeof value === "number";
+      if (props.invalid && typeof props.validatorMessage === "string") {
+        return props.validatorMessage;
+      } else if (typeof props.validatorMessage !== "string") {
+        const { empty, exist } = props.validatorMessage ?? {};
+        if (value == null && props.mandatory) {
+          return empty ?? locale.emptyInvalidText.replace("{label}", props.label);
+        } else if (hasValue && ((_a = props.existingValues) == null ? void 0 : _a.includes(value))) {
+          return exist ?? ((_b = locale.alreadyExistInvalidText) == null ? void 0 : _b.replace("{label}", props.label));
+        }
       }
-      return !0;
-    }, k = () => {
-      N.value++, $(() => {
-        var l;
-        const t = (l = h.value) == null ? void 0 : l.$el, a = t == null ? void 0 : t.querySelector("input");
-        a == null || a.focus();
+      return true;
+    };
+    const blurAndReFocus = () => {
+      inputKey.value++;
+      nextTick(() => {
+        var _a;
+        const inputWrapper = (_a = inputNumber.value) == null ? void 0 : _a["$el"];
+        const input = inputWrapper == null ? void 0 : inputWrapper.querySelector("input");
+        input == null ? void 0 : input.focus();
       });
-    }, c = (t, a) => {
-      const l = a === "input" ? t.value : t;
-      let s = (() => {
-        if (l != null)
-          return l !== "-" ? +l : l;
-      })();
-      if (s != null && !isNaN(+s))
-        s = l != null ? +l : void 0, A(a, s);
-      else if (s == null && typeof s != "string") {
-        const d = e.allowEmptyValue ? s : s ?? e.min ?? 0;
-        o.value = d, a === "input" ? (!e.allowEmptyValue && h.value && k(), f("input", d)) : f("update:modelValue", d);
+    };
+    const onUpdateValue = (event, type) => {
+      const eventValue = type === "input" ? event.value : event;
+      const assignEventValue = () => {
+        if (eventValue != null) {
+          return eventValue !== "-" ? +eventValue : eventValue;
+        }
+        return void 0;
+      };
+      let value = assignEventValue();
+      if (value != null && !isNaN(+value)) {
+        value = eventValue != null ? +eventValue : void 0;
+        handleNumberValue(type, value);
+      } else if (value == null && typeof value !== "string") {
+        const emptyOrMinValue = !props.allowEmptyValue ? value ?? props.min ?? 0 : value;
+        field.value = emptyOrMinValue;
+        if (type === "input") {
+          if (!props.allowEmptyValue && inputNumber.value) {
+            blurAndReFocus();
+          }
+          emit("input", emptyOrMinValue);
+        } else {
+          emit("update:modelValue", emptyOrMinValue);
+        }
       }
-    }, A = (t, a) => {
-      const l = typeof a == "number" ? B(a) : !1;
-      let n = a == null ? void 0 : a.toString().slice(0, a < 0 ? e.maxDigit + 1 : e.maxDigit);
-      n != null && (n = +(n ?? 0)), o.value = l ? +(n ?? 0) : a, l && k(), f(t === "input" ? "input" : "update:modelValue", l ? +(n ?? 0) : a);
-    }, B = (t) => (
-      // eslint-disable-next-line eqeqeq
-      t != null && t.toString().length > (e.maxDigit > 16 ? 16 : e.maxDigit)
-    ), T = () => {
-      const t = +(o.value ?? 0) + 1;
-      (e.max && e.max >= t || e.max == null) && c(t, "modelValue");
-    }, j = () => {
-      const t = +(o.value ?? 0) - 1;
-      (e.min && e.min <= t || e.min == null) && c(t, "modelValue");
-    }, C = (t) => e.min && t < e.min ? e.min : e.max && t > e.max ? e.max : t;
-    return R(
-      () => e.value,
-      (t) => {
-        const a = t != null ? C(t) : t;
-        B(a) || (o.value = a);
+    };
+    const handleNumberValue = (type, value) => {
+      const isExceed = typeof value === "number" ? isExceedMaxDigits(value) : false;
+      let slicedValue = value == null ? void 0 : value.toString().slice(0, value < 0 ? props.maxDigit + 1 : props.maxDigit);
+      if (slicedValue != null) {
+        slicedValue = +(slicedValue ?? 0);
+      }
+      field.value = isExceed ? +(slicedValue ?? 0) : value;
+      if (isExceed) blurAndReFocus();
+      if (type === "input") {
+        emit("input", isExceed ? +(slicedValue ?? 0) : value);
+      } else {
+        emit("update:modelValue", isExceed ? +(slicedValue ?? 0) : value);
+      }
+    };
+    const isExceedMaxDigits = (value) => {
+      return (
+        // eslint-disable-next-line eqeqeq
+        value != null && value.toString().length > (props.maxDigit > 16 ? 16 : props.maxDigit)
+      );
+    };
+    const increment = () => {
+      const incremented = +(field.value ?? 0) + 1;
+      if (props.max && props.max >= incremented || props.max == null)
+        onUpdateValue(incremented, "modelValue");
+    };
+    const decrement = () => {
+      const decremented = +(field.value ?? 0) - 1;
+      if (props.min && props.min <= decremented || props.min == null)
+        onUpdateValue(decremented, "modelValue");
+    };
+    const findMinOrMaxValue = (value) => {
+      if (props.min && value < props.min) return props.min;
+      else if (props.max && value > props.max) return props.max;
+      return value;
+    };
+    watch(
+      () => props.value,
+      (value) => {
+        const valueInRange = value != null ? findMinOrMaxValue(value) : value;
+        if (!isExceedMaxDigits(valueInRange)) {
+          field.value = valueInRange;
+        }
       },
-      { once: !0 }
-    ), R(
-      () => e.modelValue,
-      (t) => {
-        const a = t != null ? C(t) : t;
-        B(a) || (o.value = a);
+      { once: true }
+    );
+    watch(
+      () => props.modelValue,
+      (model) => {
+        const valueInRange = model != null ? findMinOrMaxValue(model) : model;
+        if (!isExceedMaxDigits(valueInRange)) {
+          field.value = valueInRange;
+        }
       }
-    ), (t, a) => (u(), m(ae, {
-      info: t.fieldInfo,
-      label: e.label,
-      mandatory: e.mandatory,
-      "tooltip-pos": t.tooltipPos
-    }, W({
-      default: p(() => [
-        I(le, {
-          class: b([
-            "grid ",
-            {
-              "grid-cols-[max-content,1fr,max-content]": i["addon-left"] && i["addon-right"] || t.showButtons,
-              "grid-cols-[1fr,max-content]": !i["addon-left"] && i["addon-right"],
-              "grid-cols-[max-content,1fr]": i["addon-left"] && !i["addon-right"]
-            },
-            { "w-max": t.autoResize },
-            t.inputGroupClass
-          ]),
-          disabled: e.disabled,
-          invalid: G.value
-        }, {
-          default: p(() => [
-            i["addon-left"] || e.showButtons ? (u(), m(r(z), {
-              key: 0,
-              class: b([t.addonLeftClass, { "cursor-pointer": e.showButtons }]),
-              disabled: t.disabled,
-              pt: {
-                root: r(M).root({ props: e })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        info: _ctx.fieldInfo,
+        label: props.label,
+        mandatory: props.mandatory,
+        "tooltip-pos": _ctx.tooltipPos
+      }, createSlots({
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            class: normalizeClass([
+              "grid ",
+              {
+                "grid-cols-[max-content,1fr,max-content]": slots["addon-left"] && slots["addon-right"] || _ctx.showButtons,
+                "grid-cols-[1fr,max-content]": !slots["addon-left"] && slots["addon-right"],
+                "grid-cols-[max-content,1fr]": slots["addon-left"] && !slots["addon-right"]
               },
-              onClick: a[0] || (a[0] = (l) => e.showButtons && !e.disabled ? j() : void 0)
-            }, {
-              default: p(() => [
-                g(t.$slots, "addon-left", {}, () => [
-                  I(S, V(r(w).decrementicon({ props: e }), { icon: "subtract" }), null, 16)
-                ])
-              ]),
-              _: 3
-            }, 8, ["class", "disabled", "pt"])) : v("", !0),
-            X("span", {
-              class: b(["relative", { "w-max": t.autoResize }]),
-              "data-wv-section": "autoresizeinputwrapper"
-            }, [
-              t.autoResize ? (u(), Y("span", V({
+              { "w-max": _ctx.autoResize },
+              _ctx.inputGroupClass
+            ]),
+            disabled: props.disabled,
+            invalid: invalidInput.value
+          }, {
+            default: withCtx(() => [
+              slots["addon-left"] || props.showButtons ? (openBlock(), createBlock(unref(script), {
                 key: 0,
-                "data-wv-section": "inputresizer"
-              }, r(w).inputresizer), Z((o.value ?? "").toString().padStart(t.padStart, "0")), 17)) : v("", !0),
-              (u(), m(r(te), V({
-                key: N.value,
-                ref_key: "inputNumber",
-                ref: h
-              }, e, {
-                class: [
-                  t.inputNumberClass,
-                  {
-                    "absolute left-0 top-0": t.autoResize
-                  }
-                ],
-                "input-id": L.value,
-                "model-value": o.value,
-                placeholder: t.autoResize ? "" : F.value,
-                "show-buttons": !1,
-                onInput: a[1] || (a[1] = (l) => c(l, "input")),
-                "onUpdate:modelValue": a[2] || (a[2] = (l) => c(l, "modelValue"))
-              }), null, 16, ["class", "input-id", "model-value", "placeholder"]))
-            ], 2),
-            i["addon-right"] || e.showButtons ? (u(), m(r(z), {
-              key: 1,
-              class: b([t.addonRightClass, { "cursor-pointer": e.showButtons }]),
-              disabled: t.disabled,
-              pt: {
-                root: r(M).root({ props: e })
-              },
-              onClick: a[3] || (a[3] = (l) => e.showButtons && !t.disabled ? T() : void 0)
-            }, {
-              default: p(() => [
-                g(t.$slots, "addon-right", {}, () => [
-                  I(S, V(r(w).incrementicon({ props: e }), { icon: "add" }), null, 16)
-                ])
-              ]),
-              _: 3
-            }, 8, ["class", "disabled", "pt"])) : v("", !0)
-          ]),
-          _: 3
-        }, 8, ["class", "disabled", "invalid"]),
-        g(t.$slots, "validatormessage", {}, () => [
-          e.showValidatorMessage ? (u(), m(oe, {
-            key: 0,
-            message: o.errorMessage
-          }, null, 8, ["message"])) : v("", !0)
-        ])
-      ]),
-      _: 2
-    }, [
-      i["field-label-addon"] ? {
-        name: "label-addon",
-        fn: p(() => [
-          g(t.$slots, "field-label-addon")
+                class: normalizeClass([_ctx.addonLeftClass, { "cursor-pointer": props.showButtons }]),
+                disabled: _ctx.disabled,
+                pt: {
+                  root: unref(InputGroupAddonPreset).root({ props })
+                },
+                onClick: _cache[0] || (_cache[0] = ($event) => props.showButtons && !props.disabled ? decrement() : void 0)
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "addon-left", {}, () => [
+                    createVNode(_sfc_main$3, mergeProps(unref(Preset).decrementicon({ props }), { icon: "subtract" }), null, 16)
+                  ])
+                ]),
+                _: 3
+              }, 8, ["class", "disabled", "pt"])) : createCommentVNode("", true),
+              createElementVNode("span", {
+                class: normalizeClass(["relative", { "w-max": _ctx.autoResize }]),
+                "data-wv-section": "autoresizeinputwrapper"
+              }, [
+                _ctx.autoResize ? (openBlock(), createElementBlock("span", mergeProps({
+                  key: 0,
+                  "data-wv-section": "inputresizer"
+                }, unref(Preset).inputresizer), toDisplayString((field.value ?? "").toString().padStart(_ctx.padStart, "0")), 17)) : createCommentVNode("", true),
+                (openBlock(), createBlock(unref(script$1), mergeProps({
+                  key: inputKey.value,
+                  ref_key: "inputNumber",
+                  ref: inputNumber
+                }, props, {
+                  class: [
+                    _ctx.inputNumberClass,
+                    {
+                      "absolute left-0 top-0": _ctx.autoResize
+                    }
+                  ],
+                  "input-id": inputNumberId.value,
+                  "model-value": field.value,
+                  placeholder: _ctx.autoResize ? "" : inputPlaceholder.value,
+                  "show-buttons": false,
+                  onInput: _cache[1] || (_cache[1] = ($event) => onUpdateValue($event, "input")),
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => onUpdateValue($event, "modelValue"))
+                }), null, 16, ["class", "input-id", "model-value", "placeholder"]))
+              ], 2),
+              slots["addon-right"] || props.showButtons ? (openBlock(), createBlock(unref(script), {
+                key: 1,
+                class: normalizeClass([_ctx.addonRightClass, { "cursor-pointer": props.showButtons }]),
+                disabled: _ctx.disabled,
+                pt: {
+                  root: unref(InputGroupAddonPreset).root({ props })
+                },
+                onClick: _cache[3] || (_cache[3] = ($event) => props.showButtons && !_ctx.disabled ? increment() : void 0)
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "addon-right", {}, () => [
+                    createVNode(_sfc_main$3, mergeProps(unref(Preset).incrementicon({ props }), { icon: "add" }), null, 16)
+                  ])
+                ]),
+                _: 3
+              }, 8, ["class", "disabled", "pt"])) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["class", "disabled", "invalid"]),
+          renderSlot(_ctx.$slots, "validatormessage", {}, () => [
+            props.showValidatorMessage ? (openBlock(), createBlock(_sfc_main$4, {
+              key: 0,
+              message: field.errorMessage
+            }, null, 8, ["message"])) : createCommentVNode("", true)
+          ])
         ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["info", "label", "mandatory", "tooltip-pos"]));
+        _: 2
+      }, [
+        slots["field-label-addon"] ? {
+          name: "label-addon",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "field-label-addon")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["info", "label", "mandatory", "tooltip-pos"]);
+    };
   }
 });
 export {
-  ce as _
+  _sfc_main as _
 };