@nmorph/nmorph-ui-kit 2.2.37 → 2.2.38

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

@@ -1,30 +1,34 @@
 import './NmorphFileUpload.css';
-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";
+import p from "./NmorphFileUpload.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as s, 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 m, resolveDynamicComponent as u, toDisplayString as g } from "vue";
 /* empty css                      */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "nmorph-file-upload__trigger" }, N = ["multiple", "disabled", "accept"], C = {
+import b from "../../../_virtual/_plugin-vue_export-helper.js";
+const x = { class: "nmorph-file-upload__trigger" }, y = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], k = {
   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(s, I, w, e, D, S) {
+}, N = { class: "nmorph-file-upload__file-info" }, C = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
+function B(d, I, w, e, D, S) {
   return o(), r(
     "div",
     {
-      class: d(e.modifiers)
+      class: s(e.modifiers)
     },
     [
-      l("div", k, [
+      l("div", x, [
         l("input", {
+          id: e.id,
           ref: "inputDOMRef",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
           type: "file",
           multiple: e.props.multiple,
           disabled: e.props.disabled,
           accept: e.inputAccept,
           class: "nmorph-native-input",
           onChange: e.handleFileUpload
-        }, null, 40, N),
-        _(s.$slots, "trigger", {}, () => [
+        }, null, 40, y),
+        _(d.$slots, "trigger", {}, () => [
           n(e.NmorphButton, {
             text: e.computedButtonText,
             fill: "",
@@ -33,7 +37,7 @@ function B(s, I, w, e, D, S) {
           }, null, 8, ["text", "disabled"])
         ])
       ]),
-      e.files.length > 0 ? (o(), r("div", C, [
+      e.files.length > 0 ? (o(), r("div", k, [
         n(h, {
           name: "list",
           tag: "div"
@@ -49,8 +53,8 @@ function B(s, I, w, e, D, S) {
                 e.props.photoWithPreview && e.isImageFile(i) ? (o(), a(e.NmorphImagePreview, {
                   key: 0,
                   src: c
-                }, null, 8, ["src"])) : p("v-if", !0),
-                l("div", b, [
+                }, null, 8, ["src"])) : m("v-if", !0),
+                l("div", N, [
                   n(
                     e.NmorphIcon,
                     {
@@ -69,7 +73,7 @@ function B(s, I, w, e, D, S) {
                   ),
                   l(
                     "span",
-                    x,
+                    C,
                     g(i.name),
                     1
                     /* TEXT */
@@ -96,13 +100,13 @@ function B(s, I, w, e, D, S) {
           _: 1
           /* STABLE */
         })
-      ])) : p("v-if", !0)
+      ])) : m("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ y(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
+const T = /* @__PURE__ */ b(p, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
 export {
   T as default
 };

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

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

package/dist/components/form/nmorph-form/NmorphForm.vue2.js

@@ -1,23 +1,23 @@
-import { defineComponent as i, computed as p, provide as s } from "vue";
-import { useModifiers as d } from "../../../utils/create-modifiers.js";
-import { useFormValidation as n } from "../../../hooks/use-form-validation.js";
-const c = /* @__PURE__ */ i({
+import { defineComponent as i, computed as p, provide as n } from "vue";
+import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { useFormValidation as d } from "../../../hooks/use-form-validation.js";
+const _ = /* @__PURE__ */ i({
   __name: "NmorphForm",
   props: {
-    value: { type: Object, required: !0 },
+    value: { type: null, required: !0 },
     validateImmediately: { type: Boolean, required: !1, default: !1 }
   },
   setup(t, { expose: a }) {
     const e = t, m = p(
-      () => d({
+      () => s({
         "nmorph-form": []
       })
-    ), o = n(e.value, e.validateImmediately);
-    a({ formData: o }), s("form-data", o);
+    ), o = d(e.value, e.validateImmediately);
+    a({ formData: o }), n("form-data", o);
     const r = { props: e, modifiers: m, formValidationData: o };
     return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });
 export {
-  c as default
+  _ as default
 };

package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphFormItem.css';
-import { defineComponent as p, inject as s, computed as o, provide as f, toRef as c } from "vue";
-import { useModifiers as h } from "../../../../../utils/create-modifiers.js";
-import v from "./inner-components/nmorph-error-box/NmorphErrorBox.vue.js";
-import _ from "./inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js";
-import { nmorphFormItemInputDataKey as y } from "../../use-form-item-input.js";
-const B = /* @__PURE__ */ p({
+import { defineComponent as y, inject as S, computed as e, unref as d, provide as b, toRef as I } from "vue";
+import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
+import q from "./inner-components/nmorph-error-box/NmorphErrorBox.vue.js";
+import B from "./inner-components/nmorph-validation-icon/NmorphValidationIcon.vue.js";
+import { nmorphFormItemInputDataKey as x } from "../../use-form-item-input.js";
+const T = /* @__PURE__ */ y({
   __name: "NmorphFormItem",
   props: {
     id: { type: String, required: !0 },
@@ -15,31 +15,40 @@ const B = /* @__PURE__ */ p({
     showValidationIcon: { type: Boolean, required: !1, default: !0 },
     staticErrorBoxSpace: { type: Boolean, required: !1, default: !1 }
   },
-  setup(n, { expose: d }) {
-    d();
-    const e = n, r = s("form-data"), t = o(() => r?.fields[e.id]), a = o(() => t.value), u = o(
-      () => !!a.value && !!t?.value?.touched && e.showValidationIcon
-    ), i = o(() => a.value && t.value?.touched);
-    f(y, {
-      id: c(e, "id"),
-      name: o(() => e.name || e.id),
-      autocomplete: o(() => e.autocomplete || void 0)
+  setup(v, { expose: h }) {
+    h();
+    const o = v, t = S("form-data"), a = e(() => t?.fields[o.id]), r = e(() => t?.formValue[o.id]), u = e(() => r.value?.value), n = e(() => r.value?.rules || []), s = e(() => d(a.value?.errors) || []), f = e(() => d(a.value?.valid) ?? !0), p = e(() => d(a.value?.touched) ?? !1), l = e(() => a.value), V = e(
+      () => !!l.value && !!a?.value?.touched && o.showValidationIcon
+    ), m = e(() => l.value && a.value?.touched);
+    b(x, {
+      id: I(o, "id"),
+      name: e(() => o.name || o.id),
+      autocomplete: e(() => o.autocomplete || void 0),
+      value: u,
+      rules: n,
+      errors: s,
+      valid: f,
+      touched: p,
+      updateValue: (i) => t?.updateFieldValue(o.id, i),
+      validate: (i) => {
+        t?.validateField(o.id, i);
+      }
     });
-    const m = o(
-      () => h({
+    const _ = e(
+      () => g({
         "nmorph-form-item": [
-          e.label && "labeled",
-          i.value && (t.value?.valid ? "valid" : "invalid")
+          o.label && "labeled",
+          m.value && (a.value?.valid ? "valid" : "invalid")
         ]
       })
-    ), l = { props: e, formData: r, validationData: t, ableToShowValidation: a, showStatusIcon: u, ableToAddValidationModifiers: i, modifiers: m, get NmorphValidationIcon() {
-      return _;
+    ), c = { props: o, formData: t, validationData: a, fieldData: r, fieldValue: u, fieldRules: n, fieldErrors: s, fieldValid: f, fieldTouched: p, ableToShowValidation: l, showStatusIcon: V, ableToAddValidationModifiers: m, modifiers: _, get NmorphValidationIcon() {
+      return B;
     }, get NmorphErrorBox() {
-      return v;
+      return q;
     } };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  B as default
+  T as default
 };

package/dist/components/form/nmorph-form/use-form-item-input.js

@@ -1,14 +1,35 @@
-import { inject as d, useId as i, computed as e } from "vue";
-const l = "nmorph-form-item-input-data", I = (t) => {
-  const o = d(l, void 0), a = `nmorph-${i()}`, n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), u = e(() => t.autocomplete || o?.autocomplete.value || void 0), c = e(() => t.tabindex ?? 0);
+import { inject as r, getCurrentInstance as s, computed as n, useId as v } from "vue";
+const i = "nmorph-form-item-input-data", f = (e) => {
+  const o = r(i, void 0), u = `nmorph-${v()}`, a = n(() => e.id || o?.id.value || u), m = n(() => e.name || o?.name.value || a.value), l = n(() => e.autocomplete || o?.autocomplete.value || void 0), d = n(() => e.tabindex ?? 0);
   return {
-    id: n,
+    id: a,
     name: m,
-    autocomplete: u,
-    tabindex: c
+    autocomplete: l,
+    tabindex: d
+  };
+}, c = (e, o) => Object.prototype.hasOwnProperty.call(e, o), h = (e, o, u) => {
+  const a = r(i, void 0), m = s(), l = n(() => {
+    const t = m?.vnode.props || {};
+    return c(t, "modelValue") || c(t, "model-value");
+  }), d = n(() => {
+    if (l.value) return e.modelValue !== void 0 ? e.modelValue : u;
+    const t = a?.value.value;
+    return t !== void 0 ? t : e.modelValue !== void 0 ? e.modelValue : u;
+  });
+  return {
+    formItemInputData: a,
+    modelValue: d,
+    modelValueIsControlled: l,
+    updateModelValue: (t) => {
+      l.value || a?.updateValue(t), o(t);
+    },
+    validateModelValue: (t = d.value) => {
+      a?.validate(t);
+    }
   };
 };
 export {
-  l as nmorphFormItemInputDataKey,
-  I as useFormItemInput
+  i as nmorphFormItemInputDataKey,
+  f as useFormItemInput,
+  h as useFormItemModel
 };

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

@@ -1,13 +1,13 @@
 import './NmorphNumberInput.css';
-import { defineComponent as S, computed as n, ref as l, watch as P } from "vue";
-import { NmorphComponentHeight as H } from "../../../types/index.js";
-import { useModifiers as M } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as R } from "../nmorph-form/use-form-item-input.js";
-import T from "../../../assets/icons/plus-thin.svg.js";
-import D from "../../../assets/icons/minus-thin.svg.js";
-import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import z from "../../basic/nmorph-button/NmorphButton.vue.js";
-const E = /* @__PURE__ */ S({
+import { defineComponent as H, computed as n, ref as s, watch as p } from "vue";
+import { NmorphComponentHeight as R } from "../../../types/index.js";
+import { useModifiers as T } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as D, useFormItemModel as V } from "../nmorph-form/use-form-item-input.js";
+import k from "../../../assets/icons/plus-thin.svg.js";
+import z from "../../../assets/icons/minus-thin.svg.js";
+import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import F from "../../basic/nmorph-button/NmorphButton.vue.js";
+const L = /* @__PURE__ */ H({
   __name: "NmorphNumberInput",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -23,17 +23,13 @@ const E = /* @__PURE__ */ S({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: p, emit: s }) {
-    const e = m, { id: d, name: c, autocomplete: f, tabindex: h } = R(e), g = n(
-      () => M({
-        nmorph: [H[e.height]],
+  setup(d, { expose: c, emit: f }) {
+    const e = d, { id: h, name: g, autocomplete: b, tabindex: x } = D(e), N = n(
+      () => T({
+        nmorph: [R[e.height]],
         "nmorph-number-input": [e.disabled && "disabled", e.actionBtnPositionRight && "action-btn-position-right"]
       })
-    ), t = l(e.modelValue), b = () => {
-      t.value += e.step;
-    }, x = () => {
-      t.value -= e.step;
-    }, N = n(() => t.value <= e.min), y = n(() => t.value >= e.max), v = n(() => e.height === "thick" ? "16px" : "12px"), o = {
+    ), a = {
       thick: {
         default: "12px",
         right: "8px"
@@ -46,31 +42,41 @@ const E = /* @__PURE__ */ S({
         default: "8px",
         right: "5px"
       }
-    }, I = n(() => {
+    }, v = n(() => {
       const i = e.actionBtnPositionRight ? "right" : "default";
-      return o[e.height][i];
-    }), a = s, q = (i) => {
-      const B = i.target;
-      let _ = Number(B.value);
-      t.value = _;
+      return a[e.height][i];
+    }), u = f, { modelValue: o, updateModelValue: l } = V(
+      e,
+      (i) => u("update:model-value", i),
+      0
+    ), t = s(o.value), y = () => {
+      t.value += e.step;
+    }, I = () => {
+      t.value -= e.step;
+    }, q = n(() => t.value <= e.min), B = n(() => t.value >= e.max), _ = n(() => e.height === "thick" ? "16px" : "12px"), M = (i) => {
+      const S = i.target;
+      let P = Number(S.value);
+      t.value = P;
     };
-    P(t, (i) => {
-      i > e.max && (t.value = e.max, r.value?.blur()), t.value < e.min && (t.value = e.min, r.value?.blur()), a("update:model-value", i);
+    p(t, (i) => {
+      i > e.max && (t.value = e.max, r.value?.blur()), t.value < e.min && (t.value = e.min, r.value?.blur()), l(i);
+    }), p(o, (i) => {
+      t.value = i;
     });
-    const r = l(null);
-    p({ inputDOMRef: r });
-    const u = { props: e, id: d, name: c, autocomplete: f, tabindex: h, modifiers: g, initialValue: t, increaseHandler: b, decreaseHandler: x, minBtnDisabled: N, maxBtnDisabled: y, rightActionBtnHeight: v, iconSizeMap: o, actionBtnIconSize: I, emit: a, inputHandler: q, inputDOMRef: r, get NmorphButton() {
-      return z;
+    const r = s(null);
+    c({ inputDOMRef: r });
+    const m = { props: e, id: h, name: g, autocomplete: b, tabindex: x, modifiers: N, iconSizeMap: a, actionBtnIconSize: v, emit: u, modelValue: o, updateModelValue: l, initialValue: t, increaseHandler: y, decreaseHandler: I, minBtnDisabled: q, maxBtnDisabled: B, rightActionBtnHeight: _, inputHandler: M, inputDOMRef: r, get NmorphButton() {
+      return F;
     }, get NmorphIcon() {
-      return k;
+      return C;
     }, get NmorphIconMinusThin() {
-      return D;
+      return z;
     }, get NmorphIconPlusThin() {
-      return T;
+      return k;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  E as default
+  L as default
 };