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

package/inputrangenumber/index.es.js

@@ -1,14 +1,15 @@
-import { defineComponent as x, reactive as f, onMounted as M, computed as N, watch as s, createBlock as _, openBlock as B, withCtx as u, createElementVNode as F, createVNode as t, createTextVNode as P, unref as n, mergeProps as g, nextTick as I } from "vue";
-import { u as V } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { u as $ } from "../plugins/WangsVue.es.js";
-import { s as h } from "../vendor/primevue/inputnumber/inputnumber.esm.es.js";
-import { _ as k } from "../fieldwrapper/index.es.js";
-import { _ as w } from "../inputgroup/index.es.js";
-import { _ as O } from "../validatormessage/index.es.js";
-const T = {
+import { defineComponent, reactive, onMounted, computed, watch, createBlock, openBlock, withCtx, createElementVNode, createVNode, createTextVNode, unref, mergeProps, 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/inputnumber/inputnumber.esm.es.js";
+import { _ as _sfc_main$1 } from "../fieldwrapper/index.es.js";
+import { _ as _sfc_main$2 } from "../inputgroup/index.es.js";
+import { _ as _sfc_main$3 } from "../validatormessage/index.es.js";
+const _hoisted_1 = {
   class: "flex gap-2 w-full items-center",
   "data-wv-section": "inputwrapper"
-}, q = /* @__PURE__ */ x({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "InputRangeNumber",
   props: {
     modelValue: {},
@@ -27,108 +28,138 @@ const T = {
     maxFieldName: {}
   },
   emits: ["update:modelValue", "submit"],
-  setup(y, { emit: b }) {
-    const a = y, d = b, { locale: m } = $("InputRangeNumber"), l = f({
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { locale } = useWangsVueConfig("InputRangeNumber");
+    const minField = reactive({
       value: void 0
-    }), o = f({
+    });
+    const maxField = reactive({
       value: void 0
     });
-    M(() => {
-      a.useValidator && (Object.assign(
-        l,
-        V(
-          a.minFieldName ?? "minNumberInput",
-          (e) => c(e),
-          { initialValue: void 0 }
-        )
-      ), Object.assign(
-        o,
-        V(
-          a.maxFieldName ?? "maxNumberInput",
-          (e) => c(e),
-          { initialValue: void 0 }
-        )
-      ), a.value && (l.value = a.value[0], o.value = a.value[1])), a.invalid && a.useValidator && (l.validate(), o.validate());
+    onMounted(() => {
+      if (props.useValidator) {
+        Object.assign(
+          minField,
+          useField(
+            props.minFieldName ?? "minNumberInput",
+            (value) => {
+              return setValidatorMessage(value);
+            },
+            { initialValue: void 0 }
+          )
+        );
+        Object.assign(
+          maxField,
+          useField(
+            props.maxFieldName ?? "maxNumberInput",
+            (value) => {
+              return setValidatorMessage(value);
+            },
+            { initialValue: void 0 }
+          )
+        );
+        if (props.value) {
+          minField.value = props.value[0];
+          maxField.value = props.value[1];
+        }
+      }
+      if (props.invalid && props.useValidator) {
+        minField.validate();
+        maxField.validate();
+      }
     });
-    const p = N(
-      () => a.invalid || !!l.errorMessage || !!o.errorMessage
-    ), v = (e) => {
-      e.key === "Enter" && d("submit");
-    }, c = async (e) => {
-      if (await I(), typeof a.validatorMessage == "string" && a.invalid)
-        return a.validatorMessage;
-      if (typeof a.validatorMessage != "string") {
-        const { empty: i } = a.validatorMessage ?? {};
-        if (e == null && a.mandatory)
-          return i ?? !0;
+    const invalidInput = computed(
+      () => props.invalid || !!minField.errorMessage || !!maxField.errorMessage
+    );
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") emit("submit");
+    };
+    const setValidatorMessage = async (value) => {
+      await nextTick();
+      if (typeof props.validatorMessage === "string" && props.invalid) {
+        return props.validatorMessage;
+      } else if (typeof props.validatorMessage !== "string") {
+        const { empty } = props.validatorMessage ?? {};
+        if (value == null && props.mandatory) {
+          return empty ?? true;
+        }
       }
-      return !0;
+      return true;
     };
-    return s(
+    watch(
       [
-        () => l.value,
-        () => o.value
+        () => minField.value,
+        () => maxField.value
       ],
-      ([e, i]) => {
-        d("update:modelValue", [e, i]);
+      ([newMinValue, newMaxValue]) => {
+        emit("update:modelValue", [newMinValue, newMaxValue]);
       }
-    ), s(
-      () => a.value,
-      (e) => {
-        l.value = e ? e[0] : void 0, o.value = e ? e[1] : void 0;
+    );
+    watch(
+      () => props.value,
+      (value) => {
+        minField.value = value ? value[0] : void 0;
+        maxField.value = value ? value[1] : void 0;
       },
-      { once: !0 }
-    ), s(
-      () => a.modelValue,
-      (e) => {
-        l.value = e ? e[0] : void 0, o.value = e ? e[1] : void 0;
+      { once: true }
+    );
+    watch(
+      () => props.modelValue,
+      (model) => {
+        minField.value = model ? model[0] : void 0;
+        maxField.value = model ? model[1] : void 0;
       }
-    ), (e, i) => (B(), _(k, {
-      label: a.label,
-      "show-optional-text": e.showOptionalText
-    }, {
-      default: u(() => [
-        F("div", T, [
-          t(w, { invalid: p.value }, {
-            default: u(() => [
-              t(n(h), g(e.$props, {
-                modelValue: l.value,
-                "onUpdate:modelValue": i[0] || (i[0] = (r) => l.value = r),
-                max: o.value,
-                placeholder: e.placeholder ?? e.minPlaceholder ?? n(m).minPlaceholder,
-                "use-grouping": !1,
-                onKeydown: v,
-                class: "w-full",
-                "input-id": "range-start"
-              }), null, 16, ["modelValue", "max", "placeholder"])
-            ]),
-            _: 1
-          }, 8, ["invalid"]),
-          i[2] || (i[2] = P(" - ")),
-          t(w, { invalid: p.value }, {
-            default: u(() => [
-              t(n(h), g(e.$props, {
-                modelValue: o.value,
-                "onUpdate:modelValue": i[1] || (i[1] = (r) => o.value = r),
-                min: l.value,
-                placeholder: e.placeholder ?? e.maxPlaceholder ?? n(m).maxPlaceholder,
-                "use-grouping": !1,
-                onKeydown: v,
-                class: "w-full",
-                "input-id": "range-end"
-              }), null, 16, ["modelValue", "min", "placeholder"])
-            ]),
-            _: 1
-          }, 8, ["invalid"])
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        label: props.label,
+        "show-optional-text": _ctx.showOptionalText
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$2, { invalid: invalidInput.value }, {
+              default: withCtx(() => [
+                createVNode(unref(script), mergeProps(_ctx.$props, {
+                  modelValue: minField.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => minField.value = $event),
+                  max: maxField.value,
+                  placeholder: _ctx.placeholder ?? _ctx.minPlaceholder ?? unref(locale).minPlaceholder,
+                  "use-grouping": false,
+                  onKeydown: handleKeydown,
+                  class: "w-full",
+                  "input-id": "range-start"
+                }), null, 16, ["modelValue", "max", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["invalid"]),
+            _cache[2] || (_cache[2] = createTextVNode(" - ")),
+            createVNode(_sfc_main$2, { invalid: invalidInput.value }, {
+              default: withCtx(() => [
+                createVNode(unref(script), mergeProps(_ctx.$props, {
+                  modelValue: maxField.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => maxField.value = $event),
+                  min: minField.value,
+                  placeholder: _ctx.placeholder ?? _ctx.maxPlaceholder ?? unref(locale).maxPlaceholder,
+                  "use-grouping": false,
+                  onKeydown: handleKeydown,
+                  class: "w-full",
+                  "input-id": "range-end"
+                }), null, 16, ["modelValue", "min", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["invalid"])
+          ]),
+          createVNode(_sfc_main$3, {
+            message: minField.errorMessage ?? maxField.errorMessage
+          }, null, 8, ["message"])
         ]),
-        t(O, {
-          message: l.errorMessage ?? o.errorMessage
-        }, null, 8, ["message"])
-      ]),
-      _: 1
-    }, 8, ["label", "show-optional-text"]));
+        _: 1
+      }, 8, ["label", "show-optional-text"]);
+    };
   }
 });
 export {
-  q as _
+  _sfc_main as _
 };