@nmorph/nmorph-ui-kit 2.2.37 → 2.2.39

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

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

@@ -1 +1 @@
-.nmorph-form-item{margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}
+.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-loose)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-text-color)}

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/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphErrorBox.css';
 import { defineComponent as p, computed as s } from "vue";
-import { NmorphComponentHeight as u } from "../../../../../../../types/index.js";
-import { useModifiers as l } from "../../../../../../../utils/create-modifiers.js";
+import { useModifiers as u } from "../../../../../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as l } from "../../../../../../../types/common.types.js";
 const h = /* @__PURE__ */ p({
   __name: "NmorphErrorBox",
   props: {
@@ -15,8 +15,8 @@ const h = /* @__PURE__ */ p({
       const r = Array.isArray(e.errors) ? e.errors : e.errors.value;
       return r.length ? [r[r.length - 1]] : [];
     }), a = s(
-      () => l({
-        nmorph: [u[e.height]],
+      () => u({
+        nmorph: [l[e.height]],
         "nmorph-error-box": [e.staticHeight && "static-height", t.value.length === 0 && "empty"]
       })
     ), o = { props: e, currentError: t, modifiers: a };

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 { useModifiers as R } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as T, useFormItemModel as D } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as V } from "../../../types/common.types.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 } = T(e), N = n(
+      () => R({
+        nmorph: [V[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 } = D(
+      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
 };