@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js

@@ -1,34 +1,40 @@
 import './NmorphValidationIcon.css';
-import r from "./NmorphValidationIcon.vue2.js";
-import { openBlock as n, createElementBlock as t, normalizeStyle as a, normalizeClass as c, createBlock as i, withCtx as m, resolveDynamicComponent as l, createCommentVNode as d } from "vue";
-/* empty css                          */
-import s from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-function p(f, h, e, o, _, v) {
-  return n(), t(
-    "div",
-    {
-      class: c(o.modifiers),
-      style: a({ "--nmorph-validation-icon-size": o.validateIconSize })
-    },
-    [
-      e.show ? (n(), i(o.NmorphIcon, {
+import { defineComponent as l, computed as i, openBlock as o, createElementBlock as m, normalizeStyle as s, normalizeClass as p, createBlock as a, unref as d, withCtx as f, resolveDynamicComponent as u, createCommentVNode as v } from "vue";
+import { useModifiers as h } from "../../../../../../../utils/create-modifiers.js";
+import _ from "../../../../../../../assets/icons/success.svg.js";
+import y from "../../../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                                  */
+import B from "../../../../../../../assets/icons/error.svg.js";
+const e = "18px", b = /* @__PURE__ */ l({
+  __name: "NmorphValidationIcon",
+  props: {
+    valid: { type: [Boolean, Object] },
+    show: { type: [Boolean, Object], default: !0 }
+  },
+  setup(t) {
+    const n = t, r = i(
+      () => h({
+        "nmorph-validation-icon": [n.valid ? "valid" : "invalid"]
+      })
+    ), c = i(() => n.valid ? _ : B);
+    return (C, I) => (o(), m("div", {
+      class: p(r.value),
+      style: s({ "--nmorph-validation-icon-size": e })
+    }, [
+      t.show ? (o(), a(d(y), {
         key: 0,
         class: "nmorph-validation-icon__content",
-        width: o.validateIconSize,
-        height: o.validateIconSize
+        width: e,
+        height: e
       }, {
-        default: m(() => [
-          (n(), i(l(o.validationIcon)))
+        default: f(() => [
+          (o(), a(u(c.value)))
         ]),
         _: 1
-        /* STABLE */
-      })) : d("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const x = /* @__PURE__ */ s(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue"]]);
+      })) : v("", !0)
+    ], 6));
+  }
+});
 export {
-  x as default
+  b as default
 };

package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphValidationIcon.css';
+import o from "./NmorphValidationIcon.vue.js";
+/* empty css                          */
+export {
+  o as default
+};

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue.js

@@ -1,140 +1,188 @@
 import './NmorphNumberInput.css';
-import h from "./NmorphNumberInput.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as c, normalizeClass as d, createElementVNode as e, createVNode as i, withCtx as t, createCommentVNode as m } from "vue";
-/* empty css                       */
-import l from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = { class: "nmorph-number-input__content" }, s = { class: "nmorph-number-input__input-content" }, b = {
+import { defineComponent as O, computed as s, ref as y, watch as B, openBlock as r, createElementBlock as m, normalizeStyle as T, normalizeClass as $, createElementVNode as u, createVNode as i, unref as t, withCtx as l, createCommentVNode as A } from "vue";
+import { useModifiers as K } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as j, useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as G } from "../../../types/common.types.js";
+import h from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import k from "../../../assets/icons/minus-thin.svg.js";
+import w from "../../../assets/icons/plus-thin.svg.js";
+const J = { class: "nmorph-number-input__content" }, L = { class: "nmorph-number-input__input-content" }, Q = {
   key: 0,
   class: "nmorph-number-input__decrease"
-}, p = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], f = {
+}, U = ["id", "name", "autocomplete", "tabindex", "value", "min", "max"], W = {
   key: 1,
   class: "nmorph-number-input__increase"
-}, B = {
+}, X = {
   key: 2,
   class: "nmorph-number-input__action-btns"
-}, g = { class: "nmorph-number-input__increase" }, u = { class: "nmorph-number-input__decrease" };
-function I(N, y, r, n, v, x) {
-  return o(), a(
-    "div",
-    {
-      class: d(n.modifiers),
-      style: c({ "--nmorph-number-input-right-action-height": n.rightActionBtnHeight })
-    },
-    [
-      e("div", _, [
-        e("div", s, [
-          r.actionBtnPositionRight ? m("v-if", !0) : (o(), a("div", b, [
-            i(n.NmorphButton, {
+}, Y = { class: "nmorph-number-input__increase" }, Z = { class: "nmorph-number-input__decrease" }, re = /* @__PURE__ */ O({
+  __name: "NmorphNumberInput",
+  props: {
+    modelValue: { default: 0 },
+    max: { default: 1 / 0 },
+    min: { default: -1 / 0 },
+    step: { default: 1 },
+    actionBtnPositionRight: { type: Boolean, default: !1 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(p, { expose: I, emit: C }) {
+    const e = p, { id: N, name: M, autocomplete: R, tabindex: P } = j(e), V = s(
+      () => K({
+        nmorph: [G[e.height]],
+        "nmorph-number-input": [e.disabled && "disabled", e.actionBtnPositionRight && "action-btn-position-right"]
+      })
+    ), H = {
+      thick: {
+        default: "12px",
+        right: "8px"
+      },
+      basic: {
+        default: "10px",
+        right: "7px"
+      },
+      thin: {
+        default: "8px",
+        right: "5px"
+      }
+    }, o = s(() => {
+      const a = e.actionBtnPositionRight ? "right" : "default";
+      return H[e.height][a];
+    }), z = C, { modelValue: f, updateModelValue: D } = q(
+      e,
+      (a) => z("update:model-value", a),
+      0
+    ), n = y(f.value), _ = () => {
+      n.value += e.step;
+    }, v = () => {
+      n.value -= e.step;
+    }, b = s(() => n.value <= e.min), g = s(() => n.value >= e.max), S = s(() => e.height === "thick" ? "16px" : "12px"), E = (a) => {
+      const x = a.target;
+      let F = Number(x.value);
+      n.value = F;
+    };
+    B(n, (a) => {
+      a > e.max && (n.value = e.max, d.value?.blur()), n.value < e.min && (n.value = e.min, d.value?.blur()), D(a);
+    }), B(f, (a) => {
+      n.value = a;
+    });
+    const d = y(null);
+    return I({ inputDOMRef: d }), (a, x) => (r(), m("div", {
+      class: $(V.value),
+      style: T({ "--nmorph-number-input-right-action-height": S.value })
+    }, [
+      u("div", J, [
+        u("div", L, [
+          p.actionBtnPositionRight ? A("", !0) : (r(), m("div", Q, [
+            i(t(h), {
               "style-type": "transparent",
-              disabled: n.minBtnDisabled,
-              height: n.props.height,
-              onClick: n.decreaseHandler
+              disabled: b.value,
+              height: e.height,
+              onClick: v
             }, {
-              default: t(() => [
-                i(n.NmorphIcon, {
-                  width: n.actionBtnIconSize,
-                  height: n.actionBtnIconSize
+              default: l(() => [
+                i(t(c), {
+                  width: o.value,
+                  height: o.value
                 }, {
-                  default: t(() => [
-                    i(n.NmorphIconMinusThin)
+                  default: l(() => [
+                    i(t(k))
                   ]),
                   _: 1
-                  /* STABLE */
                 }, 8, ["width", "height"])
               ]),
               _: 1
-              /* STABLE */
             }, 8, ["disabled", "height"])
           ])),
-          e("input", {
-            id: n.id,
-            ref: "inputDOMRef",
-            name: n.name,
-            autocomplete: n.autocomplete,
-            tabindex: n.tabindex,
+          u("input", {
+            id: t(N),
+            ref_key: "inputDOMRef",
+            ref: d,
+            name: t(M),
+            autocomplete: t(R),
+            tabindex: t(P),
             class: "nmorph-native-input",
-            value: n.initialValue,
+            value: n.value,
             type: "number",
-            min: n.props.min,
-            max: n.props.max,
-            onInput: n.inputHandler
-          }, null, 40, p),
-          r.actionBtnPositionRight ? (o(), a("div", B, [
-            e("div", g, [
-              i(n.NmorphButton, {
+            min: e.min,
+            max: e.max,
+            onInput: E
+          }, null, 40, U),
+          p.actionBtnPositionRight ? (r(), m("div", X, [
+            u("div", Y, [
+              i(t(h), {
                 "style-type": "transparent",
-                disabled: n.maxBtnDisabled,
-                onClick: n.increaseHandler
+                disabled: g.value,
+                onClick: _
               }, {
-                default: t(() => [
-                  i(n.NmorphIcon, {
-                    width: n.actionBtnIconSize,
-                    height: n.actionBtnIconSize
+                default: l(() => [
+                  i(t(c), {
+                    width: o.value,
+                    height: o.value
                   }, {
-                    default: t(() => [
-                      i(n.NmorphIconPlusThin)
+                    default: l(() => [
+                      i(t(w))
                     ]),
                     _: 1
-                    /* STABLE */
                   }, 8, ["width", "height"])
                 ]),
                 _: 1
-                /* STABLE */
               }, 8, ["disabled"])
             ]),
-            e("div", u, [
-              i(n.NmorphButton, {
+            u("div", Z, [
+              i(t(h), {
                 "style-type": "transparent",
-                disabled: n.minBtnDisabled,
-                onClick: n.decreaseHandler
+                disabled: b.value,
+                onClick: v
               }, {
-                default: t(() => [
-                  i(n.NmorphIcon, {
-                    width: n.actionBtnIconSize,
-                    height: n.actionBtnIconSize
+                default: l(() => [
+                  i(t(c), {
+                    width: o.value,
+                    height: o.value
                   }, {
-                    default: t(() => [
-                      i(n.NmorphIconMinusThin)
+                    default: l(() => [
+                      i(t(k))
                     ]),
                     _: 1
-                    /* STABLE */
                   }, 8, ["width", "height"])
                 ]),
                 _: 1
-                /* STABLE */
               }, 8, ["disabled"])
             ])
-          ])) : (o(), a("div", f, [
-            i(n.NmorphButton, {
+          ])) : (r(), m("div", W, [
+            i(t(h), {
               "style-type": "transparent",
-              disabled: n.maxBtnDisabled,
-              height: n.props.height,
-              onClick: n.increaseHandler
+              disabled: g.value,
+              height: e.height,
+              onClick: _
             }, {
-              default: t(() => [
-                i(n.NmorphIcon, {
-                  width: n.actionBtnIconSize,
-                  height: n.actionBtnIconSize
+              default: l(() => [
+                i(t(c), {
+                  width: o.value,
+                  height: o.value
                 }, {
-                  default: t(() => [
-                    i(n.NmorphIconPlusThin)
+                  default: l(() => [
+                    i(t(w))
                   ]),
                   _: 1
-                  /* STABLE */
                 }, 8, ["width", "height"])
               ]),
               _: 1
-              /* STABLE */
             }, 8, ["disabled", "height"])
           ]))
         ])
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const C = /* @__PURE__ */ l(h, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-number-input/NmorphNumberInput.vue"]]);
+    ], 6));
+  }
+});
 export {
-  C as default
+  re as default
 };

package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphNumberInput.css';
+import o from "./NmorphNumberInput.vue.js";
+/* empty css                       */
+export {
+  o as default
+};

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue.js

@@ -1,71 +1,196 @@
 import './NmorphOTPInput.css';
-import m from "./NmorphOTPInput.vue2.js";
-import { openBlock as l, createElementBlock as d, normalizeClass as p, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as n, withKeys as r } from "vue";
-/* empty css                    */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = ["name", "value", "disabled"], v = { class: "nmorph-otp-input__content" };
-function _(b, a, g, e, H, y) {
-  return l(), d(
-    "div",
-    {
-      class: p(e.modifiers)
-    },
-    [
-      i("input", {
-        name: e.name,
-        value: e.otpValue.join(""),
+import { defineComponent as ue, ref as g, computed as c, watch as B, openBlock as F, createElementBlock as D, normalizeClass as re, createElementVNode as O, unref as se, Fragment as ce, renderList as ie, createBlock as de, withModifiers as d, withKeys as f, nextTick as E } from "vue";
+import { useModifiers as me } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as pe, useFormItemModel as fe } from "../nmorph-form/use-form-item-input.js";
+import ve from "../nmorph-text-input/NmorphTextInput.vue.js";
+/* empty css                                        */
+import { NmorphComponentHeight as he } from "../../../types/common.types.js";
+const ge = ["name", "value", "disabled"], be = { class: "nmorph-otp-input__content" }, ze = /* @__PURE__ */ ue({
+  __name: "NmorphOTPInput",
+  props: {
+    modelValue: { default: "" },
+    length: { default: 6 },
+    mode: { default: "numeric" },
+    autofocus: { type: Boolean, default: !1 },
+    autocapitalize: { default: "none" },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value", "focus", "blur", "complete"],
+  setup(I, { expose: R, emit: j }) {
+    const o = I, v = j, { id: k, name: P, autocomplete: T, tabindex: b } = pe(o), { modelValue: y, updateModelValue: C } = fe(
+      o,
+      (e) => v("update:model-value", e),
+      ""
+    ), m = g([]), i = g([]), p = g(!1), u = g([]), r = c(() => Math.max(1, o.length)), _ = (e = "") => {
+      const t = `${e ?? ""}`;
+      return o.mode === "numeric" ? Array.from(t.replace(/\D/g, "")) : o.mode === "alphanumeric" ? Array.from(t.replace(/[^a-zA-Z0-9]/g, "")) : Array.from(t);
+    }, K = (e = y.value) => {
+      const t = _(e).slice(0, r.value);
+      return Array.from({ length: r.value }, (l, a) => t[a] || "");
+    }, V = (e, t = !1) => {
+      if (u.value = Array.from({ length: r.value }, (a, n) => e[n] || ""), !t) return;
+      const l = u.value.join("");
+      C(l), u.value.includes("") || v("complete", l);
+    };
+    B(
+      [y, () => o.mode, r],
+      () => {
+        const e = K(y.value);
+        (e.join("") !== u.value.join("") || e.length !== u.value.length) && V(e);
+      },
+      { immediate: !0 }
+    );
+    const L = c(
+      () => me({
+        nmorph: [he[o.height], p.value && "focused"],
+        "nmorph-otp-input": [o.disabled && "disabled"]
+      })
+    ), H = c(
+      () => Array.from({ length: r.value }, (e, t) => t === 0 ? k.value : `${k.value}-${t + 1}`)
+    ), N = c(() => o.mode === "numeric" ? "numeric" : "text"), U = c(() => T.value || "one-time-code"), Z = c(() => {
+      if (o.mode === "numeric") return "[0-9]*";
+      if (o.mode === "alphanumeric") return "[A-Za-z0-9]*";
+    }), M = (e) => {
+      i.value[e] = m.value[e]?.inputDOMRef ?? null;
+    }, q = (e, t) => {
+      m.value[t] = e, E(() => {
+        M(t);
+      });
+    }, z = (e) => {
+      M(e), m.value[e]?.select?.(), i.value[e]?.select();
+    }, s = (e = 0) => {
+      E(() => {
+        const t = Math.min(Math.max(e, 0), r.value - 1);
+        M(t), m.value[t]?.focus?.(), i.value[t]?.focus(), z(t);
+      });
+    };
+    R({
+      inputDOMRefs: i,
+      focus: s,
+      blur: () => {
+        m.value.forEach((e, t) => {
+          e?.blur?.(), i.value[t]?.blur();
+        });
+      }
+    });
+    const h = (e, t = "") => {
+      const l = [...u.value];
+      l[e] = t, V(l, !0);
+    }, A = (e, t) => {
+      const l = _(e).slice(0, r.value - t);
+      if (!l.length) {
+        h(t, "");
+        return;
+      }
+      const a = [...u.value];
+      l.forEach((oe, ne) => {
+        a[t + ne] = oe;
+      }), V(a, !0);
+      const n = t + l.length;
+      n < r.value ? s(n) : s(r.value - 1);
+    }, G = (e, t) => {
+      A(e, t);
+    }, w = /* @__PURE__ */ new Map(), $ = (e) => {
+      const t = w.get(e);
+      if (t) return t;
+      const l = c({
+        get: () => u.value[e] || "",
+        set: (a) => G(a, e)
+      });
+      return w.set(e, l), l;
+    }, J = (e) => {
+      if (u.value[e]) {
+        h(e);
+        return;
+      }
+      e > 0 && (h(e - 1), s(e - 1));
+    }, Q = (e, t) => {
+      if (e.key === "Backspace") {
+        J(t);
+        return;
+      }
+      h(t);
+    }, S = (e) => {
+      s(e - 1);
+    }, W = (e) => {
+      s(e + 1);
+    }, X = () => {
+      s(0);
+    }, Y = () => {
+      s(r.value - 1);
+    }, x = (e) => {
+      e.key.length === 1 && !_(e.key).length && e.preventDefault();
+    }, ee = (e, t) => {
+      const l = e.clipboardData?.getData("text") || "";
+      A(l, t);
+    }, te = (e) => {
+      p.value || (p.value = !0, v("focus")), z(e);
+    }, ae = () => {
+      setTimeout(() => {
+        const e = document.activeElement;
+        !i.value.some((l) => l === e) && p.value && (p.value = !1, v("blur"));
+      });
+    }, le = (e) => b.value > 0 ? b.value + e : b.value;
+    return B(
+      () => o.autofocus,
+      (e) => {
+        e && !o.disabled && s(0);
+      },
+      { immediate: !0 }
+    ), (e, t) => (F(), D("div", {
+      class: re(L.value)
+    }, [
+      O("input", {
+        name: se(P),
+        value: u.value.join(""),
         type: "hidden",
-        disabled: e.props.disabled
-      }, null, 8, u),
-      i("div", v, [
-        (l(!0), d(
-          c,
-          null,
-          s(e.otpValue, (k, o) => (l(), f(e.NmorphTextInput, {
-            id: e.fieldIds[o],
-            key: e.fieldIds[o],
-            ref_for: !0,
-            ref: (t) => e.setInputRef(t, o),
-            modelValue: e.getFieldModel(o).value,
-            "onUpdate:modelValue": (t) => e.getFieldModel(o).value = t,
-            class: "nmorph-otp-input__field",
-            height: e.props.height,
-            disabled: e.props.disabled,
-            autocomplete: e.resolvedAutocomplete,
-            tabindex: e.getFieldTabindex(o),
-            indentation: "0px",
-            "input-attrs": {
-              name: void 0,
-              maxlength: 1,
-              inputmode: e.inputMode,
-              pattern: e.inputPattern,
-              autocapitalize: e.props.autocapitalize,
-              spellcheck: !1,
-              autofocus: e.props.autofocus && o === 0,
-              "aria-label": `OTP ${o + 1}`
-            },
-            onKeydown: [
-              a[0] || (a[0] = (t) => e.keydownHandler(t)),
-              r(n((t) => e.deleteKeyHandler(t, o), ["prevent"]), ["delete"]),
-              r(n((t) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
-              r(n((t) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
-              r(n(e.homeHandler, ["prevent"]), ["home"]),
-              r(n(e.endHandler, ["prevent"]), ["end"])
-            ],
-            onPaste: n((t) => e.pasteHandler(t, o), ["prevent"]),
-            onFocus: (t) => e.focusHandler(o),
-            onBlur: e.blurHandler
-          }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onKeydown", "onPaste", "onFocus"]))),
-          128
-          /* KEYED_FRAGMENT */
-        ))
+        disabled: o.disabled
+      }, null, 8, ge),
+      O("div", be, [
+        (F(!0), D(ce, null, ie(u.value, (l, a) => (F(), de(ve, {
+          id: H.value[a],
+          key: H.value[a],
+          ref_for: !0,
+          ref: (n) => q(n, a),
+          modelValue: $(a).value,
+          "onUpdate:modelValue": (n) => $(a).value = n,
+          class: "nmorph-otp-input__field",
+          height: o.height,
+          disabled: o.disabled,
+          autocomplete: U.value,
+          tabindex: le(a),
+          indentation: "0px",
+          "input-attrs": {
+            name: void 0,
+            maxlength: 1,
+            inputmode: N.value,
+            pattern: Z.value,
+            autocapitalize: o.autocapitalize,
+            spellcheck: !1,
+            autofocus: o.autofocus && a === 0,
+            "aria-label": `OTP ${a + 1}`
+          },
+          onKeydown: [
+            t[0] || (t[0] = (n) => x(n)),
+            f(d((n) => Q(n, a), ["prevent"]), ["delete"]),
+            f(d((n) => S(a), ["prevent"]), ["left"]),
+            f(d((n) => W(a), ["prevent"]), ["right"]),
+            f(d(X, ["prevent"]), ["home"]),
+            f(d(Y, ["prevent"]), ["end"])
+          ],
+          onPaste: d((n) => ee(n, a), ["prevent"]),
+          onFocus: (n) => te(a),
+          onBlur: ae
+        }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onKeydown", "onPaste", "onFocus"]))), 128))
       ])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const P = /* @__PURE__ */ h(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
+    ], 2));
+  }
+});
 export {
-  P as default
+  ze as default
 };

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphOTPInput.css';
+import o from "./NmorphOTPInput.vue.js";
+/* empty css                    */
+export {
+  o as default
+};