@nmorph/nmorph-ui-kit 2.2.34 → 2.2.36

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue.js

@@ -1,21 +1,21 @@
 import './NmorphYearMonthPicker.css';
-import i from "./NmorphYearMonthPicker.vue2.js";
-import { openBlock as l, createElementBlock as m, normalizeClass as c, createElementVNode as t, createVNode as e, withCtx as n } from "vue";
+import l from "./NmorphYearMonthPicker.vue2.js";
+import { openBlock as i, createElementBlock as m, normalizeClass as c, createElementVNode as a, createVNode as e, withCtx as n } from "vue";
 /* empty css                           */
-import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const d = { class: "nmorph-year-month-picker__header" }, p = { class: "nmorph-year-month-picker__value" }, s = { class: "nmorph-year-month-picker__values" };
-function _(k, r, v, o, f, N) {
-  return l(), m(
+import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = { class: "nmorph-year-month-picker__header" }, p = { class: "nmorph-year-month-picker__value" }, s = { class: "nmorph-year-month-picker__values" };
+function _(k, r, f, o, v, N) {
+  return i(), m(
     "div",
     {
       class: c(o.modifiers)
     },
     [
-      t("div", d, [
+      a("div", h, [
         e(o.NmorphButton, {
           class: "nmorph-year-month-picker__action-btn",
           tabindex: -1,
-          onClick: r[0] || (r[0] = (a) => o.buttonClickHandler("decrease"))
+          onClick: r[0] || (r[0] = (t) => o.buttonClickHandler("decrease"))
         }, {
           default: n(() => [
             e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-left" }, {
@@ -29,7 +29,7 @@ function _(k, r, v, o, f, N) {
           _: 1
           /* STABLE */
         }),
-        t("div", p, [
+        a("div", p, [
           e(o.NmorphButton, {
             text: o.value,
             tabindex: -1,
@@ -40,7 +40,7 @@ function _(k, r, v, o, f, N) {
         e(o.NmorphButton, {
           class: "nmorph-year-month-picker__action-btn",
           tabindex: -1,
-          onClick: r[1] || (r[1] = (a) => o.buttonClickHandler("increase"))
+          onClick: r[1] || (r[1] = (t) => o.buttonClickHandler("increase"))
         }, {
           default: n(() => [
             e(o.NmorphIcon, { class: "nmorph-year-month-picker__chevron-right" }, {
@@ -56,19 +56,19 @@ function _(k, r, v, o, f, N) {
         })
       ]),
       e(o.NmorphDivider),
-      t("div", s, [
+      a("div", s, [
         e(o.NmorphRadioGroup, {
-          "model-value": o.selectedValue,
-          options: o.values,
-          "onUpdate:modelValue": o.updateModelValue
-        }, null, 8, ["model-value", "options"])
+          modelValue: o.selectedValueModel,
+          "onUpdate:modelValue": r[2] || (r[2] = (t) => o.selectedValueModel = t),
+          options: o.values
+        }, null, 8, ["modelValue", "options"])
       ])
     ],
     2
     /* CLASS */
   );
 }
-const C = /* @__PURE__ */ h(i, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue"]]);
+const C = /* @__PURE__ */ d(l, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue"]]);
 export {
   C as default
 };

package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue2.js

@@ -1,5 +1,5 @@
 import './NmorphYearMonthPicker.css';
-import { defineComponent as Y, ref as p, watch as _, computed as h } from "vue";
+import { defineComponent as Y, ref as p, watch as _, computed as c } from "vue";
 import { useModifiers as k } from "../../../../../utils/create-modifiers.js";
 import { useCalendarTexts as C } from "../../../../data/nmorph-calendar/hooks/use-calendar-texts.js";
 import { getDecadeYears as I } from "../../../../data/nmorph-calendar/utils.js";
@@ -17,43 +17,46 @@ const z = /* @__PURE__ */ Y({
   emits: ["update-year", "update-month", "back-to-years"],
   setup(f, { expose: g, emit: y }) {
     g();
-    const { months: m } = C(), c = m.map((t, o) => ({
+    const { months: m } = C(), d = m.map((t, n) => ({
       label: t.substring(0, 3),
-      value: String(o),
+      value: String(n),
       tabindex: -1
-    })), e = f, r = p(c), u = p(String(e.currentDate.getMonth())), a = p(e.currentDate.getFullYear()), d = () => {
-      const t = e.currentDate.getFullYear(), o = I(t).map((n) => ({ label: String(n), value: String(n) }));
-      r.value = o;
+    })), e = f, r = p(d), o = p(String(e.currentDate.getMonth())), a = p(e.currentDate.getFullYear()), v = () => {
+      const t = e.currentDate.getFullYear(), n = I(t).map((u) => ({ label: String(u), value: String(u) }));
+      r.value = n;
     };
     _(
       () => e.currentDate,
       () => {
-        e.type === "year" && (d(), u.value = String(e.currentDate.getFullYear()));
+        e.type === "year" && (v(), o.value = String(e.currentDate.getFullYear()));
       },
       {
         immediate: !0,
         deep: !0
       }
     );
-    const l = y, b = h(
+    const l = y, b = c(
       () => k({
         "nmorph-year-month-picker": []
       })
-    ), D = (t) => {
-      u.value = t, e.type === "month" ? l("update-month", u.value) : l("update-year", u.value);
-    }, s = (t) => {
-      r.value = r.value.map((o) => {
-        const n = String(t === "decrease" ? Number(o.value) - 10 : Number(o.value) + 10);
+    ), D = c({
+      get: () => o.value,
+      set: (t) => {
+        o.value = t, e.type === "month" ? l("update-month", o.value) : l("update-year", o.value);
+      }
+    }), s = (t) => {
+      r.value = r.value.map((n) => {
+        const u = String(t === "decrease" ? Number(n.value) - 10 : Number(n.value) + 10);
         return {
-          label: n,
-          value: n
+          label: u,
+          value: u
         };
       });
     }, i = (t) => {
       t === "decrease" ? a.value = a.value - 1 : a.value = a.value + 1, l("update-year", String(a.value));
     }, N = (t) => {
       t === "decrease" ? e.type === "year" ? s("decrease") : i("decrease") : e.type === "year" ? s("increase") : i("increase");
-    }, S = h(() => e.type === "year" ? `${r.value[0].label} - ${r.value[r.value.length - 1].label}` : String(a.value)), v = { months: m, initialMonthData: c, props: e, values: r, selectedValue: u, selectedYear: a, setInitialYearsData: d, emit: l, modifiers: b, updateModelValue: D, updateYearValues: s, updateYear: i, buttonClickHandler: N, value: S, goToYearsHandler: () => {
+    }, S = c(() => e.type === "year" ? `${r.value[0].label} - ${r.value[r.value.length - 1].label}` : String(a.value)), h = { months: m, initialMonthData: d, props: e, values: r, selectedValue: o, selectedYear: a, setInitialYearsData: v, emit: l, modifiers: b, selectedValueModel: D, updateYearValues: s, updateYear: i, buttonClickHandler: N, value: S, goToYearsHandler: () => {
       e.type === "month" && l("back-to-years");
     }, get NmorphButton() {
       return F;
@@ -66,7 +69,7 @@ const z = /* @__PURE__ */ Y({
     }, get NmorphIconChevronDown() {
       return H;
     } };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js

@@ -1,30 +1,31 @@
 import './NmorphFileUpload.css';
-import d from "./NmorphFileUpload.vue2.js";
-import { openBlock as l, createElementBlock as r, normalizeClass as p, createElementVNode as i, renderSlot as m, createVNode as o, TransitionGroup as c, withCtx as t, Fragment as _, renderList as h, createBlock as f, resolveDynamicComponent as u, toDisplayString as v, createCommentVNode as g } from "vue";
+import m from "./NmorphFileUpload.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as d, createElementVNode as l, renderSlot as _, createVNode as n, TransitionGroup as h, withCtx as t, Fragment as f, renderList as v, createBlock as a, createCommentVNode as p, resolveDynamicComponent as u, toDisplayString as g } from "vue";
 /* empty css                      */
 import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-file-upload__trigger" }, k = ["multiple", "disabled"], C = {
+const k = { class: "nmorph-file-upload__trigger" }, N = ["multiple", "disabled", "accept"], C = {
   key: 0,
   class: "nmorph-file-upload__list"
 }, b = { class: "nmorph-file-upload__file-info" }, x = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
-function B(a, I, w, e, D, S) {
-  return l(), r(
+function B(s, I, w, e, D, S) {
+  return o(), r(
     "div",
     {
-      class: p(e.modifiers)
+      class: d(e.modifiers)
     },
     [
-      i("div", N, [
-        i("input", {
+      l("div", k, [
+        l("input", {
           ref: "inputDOMRef",
           type: "file",
           multiple: e.props.multiple,
           disabled: e.props.disabled,
+          accept: e.inputAccept,
           class: "nmorph-native-input",
           onChange: e.handleFileUpload
-        }, null, 40, k),
-        m(a.$slots, "trigger", {}, () => [
-          o(e.NmorphButton, {
+        }, null, 40, N),
+        _(s.$slots, "trigger", {}, () => [
+          n(e.NmorphButton, {
             text: e.computedButtonText,
             fill: "",
             disabled: e.props.disabled,
@@ -32,22 +33,25 @@ function B(a, I, w, e, D, S) {
           }, null, 8, ["text", "disabled"])
         ])
       ]),
-      e.files.length > 0 ? (l(), r("div", C, [
-        o(c, {
+      e.files.length > 0 ? (o(), r("div", C, [
+        n(h, {
           name: "list",
           tag: "div"
         }, {
           default: t(() => [
-            (l(!0), r(
-              _,
+            (o(!0), r(
+              f,
               null,
-              h(e.files, ({ data: n, previewUrl: s }) => (l(), r("div", {
-                key: n.name,
+              v(e.files, ({ data: i, previewUrl: c }) => (o(), r("div", {
+                key: i.name,
                 class: "nmorph-file-upload__file"
               }, [
-                o(e.NmorphImagePreview, { src: s }, null, 8, ["src"]),
-                i("div", b, [
-                  o(
+                e.props.photoWithPreview && e.isImageFile(i) ? (o(), a(e.NmorphImagePreview, {
+                  key: 0,
+                  src: c
+                }, null, 8, ["src"])) : p("v-if", !0),
+                l("div", b, [
+                  n(
                     e.NmorphIcon,
                     {
                       width: "14px",
@@ -55,7 +59,7 @@ function B(a, I, w, e, D, S) {
                     },
                     {
                       default: t(() => [
-                        (l(), f(u(e.typeFileIconMap(n.type))))
+                        (o(), a(u(e.typeFileIconMap(i))))
                       ]),
                       _: 2
                       /* DYNAMIC */
@@ -63,22 +67,22 @@ function B(a, I, w, e, D, S) {
                     1024
                     /* DYNAMIC_SLOTS */
                   ),
-                  i(
+                  l(
                     "span",
                     x,
-                    v(n.name),
+                    g(i.name),
                     1
                     /* TEXT */
                   )
                 ]),
-                i("div", F, [
-                  o(e.NmorphButton, {
+                l("div", F, [
+                  n(e.NmorphButton, {
                     height: "thin",
                     "style-type": "transparent",
-                    onClick: (U) => e.removeFile(n.name)
+                    onClick: (U) => e.removeFile(i.name)
                   }, {
                     "icon-only": t(() => [
-                      o(e.NmorphIconCross)
+                      n(e.NmorphIconCross)
                     ]),
                     _: 1
                     /* STABLE */
@@ -92,13 +96,13 @@ function B(a, I, w, e, D, S) {
           _: 1
           /* STABLE */
         })
-      ])) : g("v-if", !0)
+      ])) : p("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const j = /* @__PURE__ */ y(d, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
+const T = /* @__PURE__ */ y(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
 export {
-  j as default
+  T as default
 };

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue2.js

@@ -1,94 +1,126 @@
 import './NmorphFileUpload.css';
-import { defineComponent as V, computed as N, ref as g, watch as B, onBeforeUnmount as T } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { useI18n as S } from "vue-i18n";
-import j from "../../../assets/icons/doc.svg.js";
-import k from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
-import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import L from "../../basic/nmorph-button/NmorphButton.vue.js";
-import { NmorphImageResolution as O, NmorphAudioResolution as E, NmorphVideoResolution as M, NmorphArchiveResolution as D } from "./types.js";
-import W from "../../../assets/icons/audio.svg.js";
-import $ from "../../../assets/icons/video.svg.js";
-import z from "../../../assets/icons/archive.svg.js";
-import G from "../../../assets/icons/cross.svg.js";
-import H from "../../../assets/icons/image.svg.js";
-const se = /* @__PURE__ */ V({
+import { defineComponent as M, computed as y, ref as F, watch as E, onBeforeUnmount as W } from "vue";
+import { useModifiers as $ } from "../../../utils/create-modifiers.js";
+import { useI18n as D } from "vue-i18n";
+import { resolution as T, NmorphImageResolution as A, NmorphAudioResolution as K, NmorphVideoResolution as z, NmorphArchiveResolution as G } from "./types.js";
+import H from "../../../assets/icons/doc.svg.js";
+import J from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import Q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import X from "../../basic/nmorph-button/NmorphButton.vue.js";
+import Y from "../../../assets/icons/audio.svg.js";
+import Z from "../../../assets/icons/video.svg.js";
+import ee from "../../../assets/icons/archive.svg.js";
+import oe from "../../../assets/icons/cross.svg.js";
+import te from "../../../assets/icons/image.svg.js";
+const ye = /* @__PURE__ */ M({
   __name: "NmorphFileUpload",
   props: {
     modelValue: { type: Array, required: !1, default: () => [] },
     disabled: { type: Boolean, required: !1, default: !1 },
     multiple: { type: Boolean, required: !1, default: !1 },
-    allowedTypes: { type: Array, required: !1, default: () => ["jpg", "jpeg", "png"] },
+    allowedTypes: { type: Array, required: !1, default: () => [] },
     photoWithPreview: { type: Boolean, required: !1, default: !0 },
     buttonText: { type: String, required: !1, default: "" }
   },
   emits: ["update:model-value", "on-unsupported-file-type-error"],
-  setup(I, { expose: b, emit: w }) {
-    const { t: f } = S(), r = I, m = w, x = N(() => r.buttonText ? r.buttonText : f("selectFile")), d = (e) => e.split("/")[1], R = (e) => {
-      const o = d(e);
-      let t = j;
-      return o in O && (t = H), o in E && (t = W), o in M && (t = $), o in D && (t = z), t;
-    }, s = g(null), n = g([...r.modelValue]), i = /* @__PURE__ */ new Set(), a = () => {
-      const e = s.value;
+  setup(R, { expose: U, emit: _ }) {
+    const { t: w } = D(), n = R, d = _, B = y(() => n.buttonText ? n.buttonText : w("selectFile")), g = Object.entries(T), v = {
+      "svg-xml": "svg",
+      "audio-ogg": "ogg",
+      "wideo-ogg": "ogg"
+    }, C = (e) => e.split("/")[1]?.toLowerCase() || "", f = (e) => {
+      const o = e.split(".").pop()?.toLowerCase();
+      return o && o !== e.toLowerCase() ? o : "";
+    }, I = (e) => g.find(([, o]) => o.toLowerCase() === e.toLowerCase())?.[0] || "", u = (e) => Array.from(
+      new Set(
+        [
+          e.type.toLowerCase(),
+          I(e.type),
+          f(e.name),
+          C(e.type)
+        ].filter(Boolean).map((o) => o.toLowerCase())
+      )
+    ), i = (e, o) => Object.prototype.hasOwnProperty.call(o, e), P = (e) => {
+      const o = u(e);
+      return e.type.toLowerCase().startsWith("image/") || o.some((t) => i(t, A));
+    }, L = (e) => {
+      if (n.allowedTypes.length === 0) return !0;
+      const o = u(e);
+      return n.allowedTypes.some((t) => o.includes(String(t).toLowerCase()));
+    }, S = y(() => {
+      if (n.allowedTypes.length !== 0)
+        return Array.from(
+          new Set(
+            n.allowedTypes.flatMap((e) => {
+              const o = String(e).toLowerCase(), t = T[o], r = v[o] || o;
+              return o.includes("/") ? o : t ? [`.${r}`, t] : `.${r}`;
+            })
+          )
+        ).join(",");
+    }), V = (e) => {
+      const o = u(e);
+      let t = H;
+      return (e.type.toLowerCase().startsWith("image/") || o.some((r) => i(r, A))) && (t = te), (e.type.toLowerCase().startsWith("audio/") || o.some((r) => i(r, K))) && (t = Y), (e.type.toLowerCase().startsWith("video/") || o.some((r) => i(r, z))) && (t = Z), o.some((r) => i(r, G)) && (t = ee), t;
+    }, p = F(null), a = F([...n.modelValue]), l = /* @__PURE__ */ new Set(), m = () => {
+      const e = p.value;
       e && (e.value = "");
-    }, u = (e) => {
-      i.has(e) && (URL.revokeObjectURL(e), i.delete(e));
-    }, h = (e) => {
+    }, c = (e) => {
+      l.has(e) && (URL.revokeObjectURL(e), l.delete(e));
+    }, N = (e) => {
       const o = new Set(e.map((t) => t.previewUrl));
-      Array.from(i).forEach((t) => {
-        o.has(t) || u(t);
+      Array.from(l).forEach((t) => {
+        o.has(t) || c(t);
       });
-    }, c = (e) => {
+    }, h = (e) => {
       const o = [...e];
-      n.value = o, m("update:model-value", o);
-    }, U = () => {
-      r.disabled || !s.value || s.value.click();
-    }, _ = (e) => {
-      if (r.disabled) return;
-      const o = e.target, t = Array.from(o.files || []), p = [];
-      t.forEach((l) => {
-        const P = d(l.type);
-        if (!r.allowedTypes.includes(P)) {
-          m("on-unsupported-file-type-error", l.type);
+      a.value = o, d("update:model-value", o);
+    }, O = () => {
+      n.disabled || !p.value || p.value.click();
+    }, j = (e) => {
+      if (n.disabled) return;
+      const o = e.target, t = Array.from(o.files || []), r = [];
+      t.forEach((s) => {
+        if (!L(s)) {
+          d("on-unsupported-file-type-error", s.type || f(s.name) || s.name);
           return;
         }
-        const y = URL.createObjectURL(l);
-        i.add(y), p.push({ data: l, previewUrl: y });
-      }), a(), p.length > 0 && c([...n.value, ...p]);
-    }, A = (e) => {
-      if (r.disabled) return;
-      const o = n.value.findIndex((t) => t.data.name === e);
+        const b = URL.createObjectURL(s);
+        l.add(b), r.push({ data: s, previewUrl: b });
+      }), m(), r.length > 0 && h([...a.value, ...r]);
+    }, k = (e) => {
+      if (n.disabled) return;
+      const o = a.value.findIndex((t) => t.data.name === e);
       if (o !== -1) {
-        const t = n.value[o];
-        u(t.previewUrl), a(), c(n.value.filter((p, l) => l !== o));
+        const t = a.value[o];
+        c(t.previewUrl), m(), h(a.value.filter((r, s) => s !== o));
       }
     };
-    B(
-      () => r.modelValue,
+    E(
+      () => n.modelValue,
       (e) => {
         const o = [...e];
-        h(o), n.value = o, o.length === 0 && a();
+        N(o), a.value = o, o.length === 0 && m();
       },
       { deep: !0 }
-    ), T(() => {
-      Array.from(i).forEach((e) => u(e));
-    }), b({ inputDOMRef: s });
-    const F = N(
-      () => q({
-        "nmorph-file-upload": [`${r.disabled && "disabled"}`]
+    ), W(() => {
+      Array.from(l).forEach((e) => c(e));
+    }), U({ inputDOMRef: p });
+    const q = y(
+      () => $({
+        "nmorph-file-upload": [`${n.disabled && "disabled"}`]
       })
-    ), v = { t: f, props: r, emit: m, computedButtonText: x, getPlainType: d, typeFileIconMap: R, inputDOMRef: s, files: n, createdPreviewUrls: i, resetInputValue: a, revokePreviewUrl: u, revokeRemovedPreviewUrls: h, filesChanged: c, openFileSelector: U, handleFileUpload: _, removeFile: A, modifiers: F, get NmorphButton() {
-      return L;
+    ), x = { t: w, props: n, emit: d, computedButtonText: B, knownResolutionEntries: g, extensionByResolution: v, getPlainType: C, getFileExtension: f, getKnownResolutionByMime: I, getFileTypeCandidates: u, isKnownFileType: i, isImageFile: P, isFileAllowed: L, inputAccept: S, typeFileIconMap: V, inputDOMRef: p, files: a, createdPreviewUrls: l, resetInputValue: m, revokePreviewUrl: c, revokeRemovedPreviewUrls: N, filesChanged: h, openFileSelector: O, handleFileUpload: j, removeFile: k, modifiers: q, get NmorphButton() {
+      return X;
     }, get NmorphIcon() {
-      return C;
+      return Q;
     }, get NmorphImagePreview() {
-      return k;
+      return J;
     }, get NmorphIconCross() {
-      return G;
+      return oe;
     } };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
   }
 });
 export {
-  se as default
+  ye as default
 };

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

@@ -1,14 +1,14 @@
 import './NmorphOTPInput.css';
-import p from "./NmorphOTPInput.vue2.js";
-import { openBlock as a, createElementBlock as d, normalizeClass as m, createElementVNode as i, Fragment as c, renderList as s, createBlock as f, withModifiers as t, withKeys as r } from "vue";
+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, l, H, e, g, y) {
-  return a(), d(
+function _(b, a, g, e, H, y) {
+  return l(), d(
     "div",
     {
-      class: m(e.modifiers)
+      class: p(e.modifiers)
     },
     [
       i("input", {
@@ -18,16 +18,17 @@ function _(b, l, H, e, g, y) {
         disabled: e.props.disabled
       }, null, 8, u),
       i("div", v, [
-        (a(!0), d(
+        (l(!0), d(
           c,
           null,
-          s(e.otpValue, (k, o) => (a(), f(e.NmorphTextInput, {
+          s(e.otpValue, (k, o) => (l(), f(e.NmorphTextInput, {
             id: e.fieldIds[o],
             key: e.fieldIds[o],
             ref_for: !0,
-            ref: (n) => e.setInputRef(n, o),
+            ref: (t) => e.setInputRef(t, o),
+            modelValue: e.getFieldModel(o).value,
+            "onUpdate:modelValue": (t) => e.getFieldModel(o).value = t,
             class: "nmorph-otp-input__field",
-            "model-value": e.otpValue[o],
             height: e.props.height,
             disabled: e.props.disabled,
             autocomplete: e.resolvedAutocomplete,
@@ -43,19 +44,18 @@ function _(b, l, H, e, g, y) {
               autofocus: e.props.autofocus && o === 0,
               "aria-label": `OTP ${o + 1}`
             },
-            "onUpdate:modelValue": (n) => e.inputHandler(n, o),
             onKeydown: [
-              l[0] || (l[0] = (n) => e.keydownHandler(n)),
-              r(t((n) => e.deleteKeyHandler(n, o), ["prevent"]), ["delete"]),
-              r(t((n) => e.arrowLeftHandler(o), ["prevent"]), ["left"]),
-              r(t((n) => e.arrowRightHandler(o), ["prevent"]), ["right"]),
-              r(t(e.homeHandler, ["prevent"]), ["home"]),
-              r(t(e.endHandler, ["prevent"]), ["end"])
+              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: t((n) => e.pasteHandler(n, o), ["prevent"]),
-            onFocus: (n) => e.focusHandler(o),
+            onPaste: n((t) => e.pasteHandler(t, o), ["prevent"]),
+            onFocus: (t) => e.focusHandler(o),
             onBlur: e.blurHandler
-          }, null, 8, ["id", "model-value", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onUpdate:modelValue", "onKeydown", "onPaste", "onFocus"]))),
+          }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "height", "disabled", "autocomplete", "tabindex", "input-attrs", "onKeydown", "onPaste", "onFocus"]))),
           128
           /* KEYED_FRAGMENT */
         ))
@@ -65,7 +65,7 @@ function _(b, l, H, e, g, y) {
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ h(p, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
+const P = /* @__PURE__ */ h(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-otp-input/NmorphOTPInput.vue"]]);
 export {
-  T as default
+  P as default
 };