@nmorph/nmorph-ui-kit 2.2.37 → 2.2.38

package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphSlider.css';
-import { defineComponent as k, computed as m, ref as o, watch as E, onMounted as A, onUnmounted as G } from "vue";
-import { useModifiers as J } from "../../../utils/create-modifiers.js";
-import { toCssSize as I } from "../../../utils/common.js";
-import { useFormItemInput as K } from "../nmorph-form/use-form-item-input.js";
-import Q from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
-const se = /* @__PURE__ */ k({
+import { defineComponent as G, computed as m, ref as o, watch as E, onMounted as J, onUnmounted as K } from "vue";
+import { useModifiers as Q } from "../../../utils/create-modifiers.js";
+import { toCssSize as H } from "../../../utils/common.js";
+import { useFormItemInput as Y, useFormItemModel as Z } from "../nmorph-form/use-form-item-input.js";
+import ee from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
+const de = /* @__PURE__ */ G({
   __name: "NmorphSlider",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -23,41 +23,42 @@ const se = /* @__PURE__ */ k({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(H, { expose: L, emit: M }) {
-    L();
-    const e = H, { id: N, name: T, tabindex: S } = K(e), _ = m(
-      () => J({
+  setup(L, { expose: N, emit: T }) {
+    N();
+    const e = L, { id: S, name: _, tabindex: C } = Y(e), F = m(
+      () => Q({
         nmorph: [],
         "nmorph-slider": [e.disabled && "disabled"]
       })
-    ), w = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), g = M, n = o(e.modelValue), c = o(null);
+    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = T, { modelValue: c, updateModelValue: y } = Z(
+      e,
+      (t) => x("update:model-value", t),
+      0
+    ), n = o(c.value), f = o(null);
     E(n, () => {
-      g("update:model-value", n.value);
-    }), E(
-      () => e.modelValue,
-      (t) => {
-        n.value = t;
-      }
-    );
-    const x = o(null), C = m(() => {
-      const t = l.value - l.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = c.value?.clientWidth || 0, d = e.thumbWidth / a * 100, D = d / 2;
-      let X = u - D;
-      const P = `${Math.max(0, Math.min(100 - d, X))}%`, W = a / 100, $ = e.thumbWidth / 2 / W, q = (x.value?.tooltipBody.clientWidth ?? 24) / 2 / W, j = q === 1 / 0 ? 1.714 : q, U = `${parseFloat(P) + $ - j}%`;
+      y(n.value);
+    }), E(c, (t) => {
+      n.value = t;
+    });
+    const P = o(null), z = m(() => {
+      const t = l.value - l.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = f.value?.clientWidth || 0, d = e.thumbWidth / a * 100, $ = d / 2;
+      let j = u - $;
+      const q = `${Math.max(0, Math.min(100 - d, j))}%`, I = a / 100, U = e.thumbWidth / 2 / I, M = (P.value?.tooltipBody.clientWidth ?? 24) / 2 / I, k = M === 1 / 0 ? 1.714 : M, A = `${parseFloat(q) + U - k}%`;
       return {
-        thumb: P,
-        tooltip: U
+        thumb: q,
+        tooltip: A
       };
-    }), l = o(0), f = o(0), h = () => {
-      l.value = window.innerWidth, f.value = window.innerHeight;
+    }), l = o(0), h = o(0), v = () => {
+      l.value = window.innerWidth, h.value = window.innerHeight;
     };
-    A(() => {
-      typeof window < "u" && (l.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
-    }), G(() => {
-      typeof window < "u" && (document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
+    J(() => {
+      typeof window < "u" && (l.value = window.innerWidth, h.value = window.innerHeight, window.addEventListener("resize", v));
+    }), K(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", v));
     });
-    const v = (t) => {
-      b.value = !1;
-      const r = c.value?.getBoundingClientRect();
+    const b = (t) => {
+      w.value = !1;
+      const r = f.value?.getBoundingClientRect();
       let u = 0;
       if (r) {
         const a = t - r.left, d = r.width;
@@ -65,30 +66,30 @@ const se = /* @__PURE__ */ k({
       }
       n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
     }, s = (t) => {
-      t.preventDefault(), v(t.clientX);
+      t.preventDefault(), b(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
-    }, z = (t) => {
-      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", s), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
-    }, F = o(null), O = () => {
+      document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), w.value = !0;
+    }, O = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), b(t.clientX), document.addEventListener("pointermove", s), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+    }, V = o(null), B = () => {
       e.showTooltip && (p.value = !0);
-    }, V = () => {
+    }, R = () => {
       e.showTooltip && (p.value = !1);
-    }, B = (t) => {
+    }, D = (t) => {
       const r = t.target;
       n.value = Number(r.value);
-    }, b = o(!0), R = m(() => ({
-      "--nmorph-slider-thumb-width": w.value,
-      ...e.sliderHeight !== void 0 && { "--slider-height": I(e.sliderHeight) },
+    }, w = o(!0), X = m(() => ({
+      "--nmorph-slider-thumb-width": g.value,
+      ...e.sliderHeight !== void 0 && { "--slider-height": H(e.sliderHeight) },
       ...e.valueFixedContainerHeight !== void 0 && {
-        "--value-fixed-container-height": I(e.valueFixedContainerHeight)
+        "--value-fixed-container-height": H(e.valueFixedContainerHeight)
       }
-    })), y = { props: e, id: N, name: T, tabindex: S, modifiers: _, thumbWidthCss: w, tooltipVisible: p, emit: g, thumbValue: n, sliderContainer: c, tooltipRootRef: x, thumbXPercentPosition: C, windowWidth: l, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: s, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: V, nativeInputHandler: B, transitionEnabled: b, styles: R, get NmorphTooltip() {
-      return Q;
+    })), W = { props: e, id: S, name: _, tabindex: C, modifiers: F, thumbWidthCss: g, tooltipVisible: p, emit: x, modelValue: c, updateModelValue: y, thumbValue: n, sliderContainer: f, tooltipRootRef: P, thumbXPercentPosition: z, windowWidth: l, windowHeight: h, resizeWindowHandler: v, updateThumbValue: b, pointerMove: s, pointerUp: i, pointerDownHandler: O, sliderFirst: V, handleMouseEnter: B, handleMouseLeave: R, nativeInputHandler: D, transitionEnabled: w, styles: X, get NmorphTooltip() {
+      return ee;
     } };
-    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
+    return Object.defineProperty(W, "__isScriptSetup", { enumerable: !1, value: !0 }), W;
   }
 });
 export {
-  se as default
+  de as default
 };

package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphSwitch.css';
-import { defineComponent as q, ref as i, computed as n, watch as N } from "vue";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { toCssSize as a } from "../../../utils/common.js";
-import { useFormItemInput as _ } from "../nmorph-form/use-form-item-input.js";
-import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import H from "../../../assets/icons/loader.svg.js";
-const M = /* @__PURE__ */ q({
+import { defineComponent as V, ref as u, computed as f, watch as _ } from "vue";
+import { useModifiers as w } from "../../../utils/create-modifiers.js";
+import { toCssSize as o } from "../../../utils/common.js";
+import { useFormItemInput as I, useFormItemModel as H } from "../nmorph-form/use-form-item-input.js";
+import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../assets/icons/loader.svg.js";
+const j = /* @__PURE__ */ V({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
@@ -23,47 +23,48 @@ const M = /* @__PURE__ */ q({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(s, { expose: f, emit: m }) {
-    const e = s, { id: p, name: c, tabindex: h } = _(e), u = m, r = i(!1), v = () => {
-      r.value = !0;
-    }, g = () => {
-      r.value = !1;
-    }, b = n(
-      () => V({
+  setup(m, { expose: p, emit: c }) {
+    const e = m, { id: h, name: v, tabindex: g } = I(e), l = c, { modelValue: i, updateModelValue: d } = H(
+      e,
+      (r) => l("update:model-value", r),
+      !1
+    ), a = u(!1), b = () => {
+      a.value = !0;
+    }, y = () => {
+      a.value = !1;
+    }, S = f(
+      () => w({
         "nmorph-switch": [
           e.disabled && "disabled",
           t.value ? "on" : "off",
           e.loading && "loading",
-          r.value && "focus"
+          a.value && "focus"
         ]
       })
-    ), t = i(e.modelValue === e.activeValue), y = () => {
+    ), t = u(i.value === e.activeValue), q = () => {
       if (e.disabled) return;
       t.value = !t.value;
-      const o = t.value ? e.activeValue : e.inactiveValue;
-      u("update:model-value", o);
-    }, l = i(null);
-    f({ inputDOMRef: l });
-    const S = n(() => ({
-      ...e.width !== void 0 && { "--width": a(e.width) },
-      ...e.height !== void 0 && { "--height": a(e.height) },
-      ...e.offset !== void 0 && { "--offset": a(e.offset) },
-      ...e.thumbHeight !== void 0 && { "--thumb-height": a(e.thumbHeight) }
+      const r = t.value ? e.activeValue : e.inactiveValue;
+      d(r);
+    }, s = u(null);
+    p({ inputDOMRef: s });
+    const N = f(() => ({
+      ...e.width !== void 0 && { "--width": o(e.width) },
+      ...e.height !== void 0 && { "--height": o(e.height) },
+      ...e.offset !== void 0 && { "--offset": o(e.offset) },
+      ...e.thumbHeight !== void 0 && { "--thumb-height": o(e.thumbHeight) }
     }));
-    N(
-      () => e.modelValue,
-      (o) => {
-        t.value = o === e.activeValue;
-      }
-    );
-    const d = { props: e, id: p, name: c, tabindex: h, emit: u, focus: r, focusHandler: v, blurHandler: g, modifiers: b, initialValue: t, changeHandler: y, inputDOMRef: l, styles: S, get NmorphIcon() {
-      return w;
+    _(i, (r) => {
+      t.value = r === e.activeValue;
+    });
+    const n = { props: e, id: h, name: v, tabindex: g, emit: l, modelValue: i, updateModelValue: d, focus: a, focusHandler: b, blurHandler: y, modifiers: S, initialValue: t, changeHandler: q, inputDOMRef: s, styles: N, get NmorphIcon() {
+      return B;
     }, get NmorphIconLoaderDots() {
-      return H;
+      return x;
     } };
-    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  M as default
+  j as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.css

@@ -1 +1 @@
-.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);pointer-events:none}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg{fill:var(--nmorph-focus-text-color)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path{stroke:var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}
+.nmorph-text-input{--prepend-icon-indent: 8px;--prepend-icon-size: 14px;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}.nmorph-text-input__input-side{position:relative;display:flex;justify-content:flex-end;align-items:center;width:100%}.nmorph-text-input__prepend-icon{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--prepend-icon-size);min-width:var(--prepend-icon-size);height:var(--prepend-icon-size);min-height:var(--prepend-icon-size);margin-left:var(--prepend-icon-indent);pointer-events:none}.nmorph-text-input__prepend-icon svg,.nmorph-text-input__prepend-icon .nmorph-icon,.nmorph-text-input__prepend-icon .nmorph-icon__content{width:100%;min-width:100%;height:100%;min-height:100%}.nmorph-text-input__prepend-icon svg{fill:var(--nmorph-text-color);stroke-width:0}.nmorph-text-input__prepend-icon path{stroke:var(--nmorph-text-color)}.nmorph-text-input input{width:100%;height:var(--height);text-indent:var(--nmorph-text-input-indentation);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-text-input--with-action input{padding-right:calc(var(--height) + var(--indentation-03))}.nmorph-text-input input:focus{background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg{fill:var(--nmorph-focus-text-color)}.nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path{stroke:var(--nmorph-focus-text-color)}.nmorph-text-input input:-webkit-autofill,.nmorph-text-input input:-webkit-autofill:hover,.nmorph-text-input input:-webkit-autofill:active{caret-color:var(--nmorph-text-color);box-shadow:var(--nmorph-shadow-inset),inset 0 0 0 1000px var(--nmorph-main-color);-webkit-text-fill-color:var(--nmorph-text-color)}.nmorph-text-input input:-webkit-autofill:focus{caret-color:var(--nmorph-focus-text-color);outline:none;box-shadow:var(--nmorph-shadow-outset),inset 0 0 0 1000px var(--nmorph-accent-color);-webkit-text-fill-color:var(--nmorph-focus-text-color)}.nmorph-text-input input:disabled{cursor:not-allowed;opacity:.6}.nmorph-text-input__password-btn{position:absolute;right:0;height:100%}.nmorph-text-input__password-btn .nmorph-button__content{padding:var(--indentation-03)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn{margin-top:var(--indentation-00)}.nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button{--height: var(--thin-component)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-button:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -29,7 +29,7 @@ function B(p, o, N, e, C, I) {
           type: e.type,
           placeholder: e.props.placeholder,
           disabled: e.props.disabled,
-          value: e.props.modelValue
+          value: e.modelValue
         }, e.props.inputAttrs, {
           onInput: e.handleInput,
           onFocus: e.handleFocus,

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphTextInput.css';
-import { defineComponent as C, useSlots as E, computed as n, ref as l } from "vue";
+import { defineComponent as E, useSlots as F, computed as r, ref as u } from "vue";
 import { NmorphComponentHeight as O } from "../../../types/index.js";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as F } from "../nmorph-form/use-form-item-input.js";
-import H from "../../../assets/icons/eye-blocked.svg.js";
-import M from "../../../assets/icons/eye.svg.js";
-import A from "../../basic/nmorph-button/NmorphButton.vue.js";
-import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import R from "../../../assets/icons/error.svg.js";
-const W = /* @__PURE__ */ C({
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as j, useFormItemModel as H } from "../nmorph-form/use-form-item-input.js";
+import A from "../../../assets/icons/eye-blocked.svg.js";
+import D from "../../../assets/icons/eye.svg.js";
+import R from "../../basic/nmorph-button/NmorphButton.vue.js";
+import T from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import z from "../../../assets/icons/error.svg.js";
+const Z = /* @__PURE__ */ E({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -25,37 +25,41 @@ const W = /* @__PURE__ */ C({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(f, { expose: m, emit: h }) {
-    const s = E(), e = f, { id: y, name: b, autocomplete: v, tabindex: g } = F(e), q = n(
-      () => j({
+  setup(h, { expose: y, emit: b }) {
+    const p = F(), e = h, n = b, { id: v, name: g, autocomplete: q, tabindex: I } = j(e), { modelValue: w, updateModelValue: l } = H(
+      e,
+      (s) => n("update:model-value", s),
+      ""
+    ), x = r(
+      () => V({
         nmorph: [O[e.height], a.value && "focused"],
         "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
       })
-    ), w = (P) => {
-      const k = P.target;
-      r("update:model-value", k.value);
-    }, t = l(!1), x = () => {
-      e.clearable ? r("update:model-value", "") : t.value = !t.value;
-    }, I = n(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = l(!1), N = () => {
-      r("focus"), a.value = !0;
-    }, _ = () => {
-      r("blur"), a.value = !1;
-    }, o = l(null), u = () => {
+    ), N = (s) => {
+      const C = s.target;
+      l(C.value);
+    }, t = u(!1), _ = () => {
+      e.clearable ? l("") : t.value = !t.value;
+    }, S = r(() => e.typePassword && !t.value && !e.clearable ? "password" : "text"), a = u(!1), B = () => {
+      n("focus"), a.value = !0;
+    }, P = () => {
+      n("blur"), a.value = !1;
+    }, o = u(null), i = () => {
       o.value?.focus();
-    }, p = () => {
+    }, d = () => {
       o.value?.blur();
-    }, i = () => {
+    }, c = () => {
       o.value?.select();
     };
-    m({ inputDOMRef: o, focus: u, blur: p, select: i });
-    const r = h, S = n(() => e.clearable ? R : t.value ? H : M), d = n(() => e.indentation || (s["prepend-icon"] ? "28px" : "8px")), B = n(() => ({ "--nmorph-text-input-indentation": d.value })), c = { slots: s, props: e, id: y, name: b, autocomplete: v, tabindex: g, modifiers: q, handleInput: w, showPassword: t, actionButtonClickHandler: x, type: I, focused: a, handleFocus: N, handleBlur: _, inputDOMRef: o, focus: u, blur: p, select: i, emit: r, actionIcon: S, indentation: d, styles: B, get NmorphIcon() {
-      return D;
+    y({ inputDOMRef: o, focus: i, blur: d, select: c });
+    const M = r(() => e.clearable ? z : t.value ? A : D), m = r(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), k = r(() => ({ "--nmorph-text-input-indentation": m.value })), f = { slots: p, props: e, emit: n, id: v, name: g, autocomplete: q, tabindex: I, modelValue: w, updateModelValue: l, modifiers: x, handleInput: N, showPassword: t, actionButtonClickHandler: _, type: S, focused: a, handleFocus: B, handleBlur: P, inputDOMRef: o, focus: i, blur: d, select: c, actionIcon: M, indentation: m, styles: k, get NmorphIcon() {
+      return T;
     }, get NmorphButton() {
-      return A;
+      return R;
     } };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  W as default
+  Z as default
 };

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue.js

@@ -21,7 +21,7 @@ function f(x, o, h, e, b, y) {
         class: "nmorph-native-input",
         placeholder: e.props.placeholder,
         disabled: e.props.disabled,
-        value: e.props.modelValue,
+        value: e.modelValue,
         rows: e.rows
       }, e.props.textareaAttrs, {
         onInput: e.handleInput,

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphTextarea.css';
-import { defineComponent as F, ref as h, computed as l, watch as B, onMounted as I, nextTick as T } from "vue";
-import { NmorphComponentHeight as O } from "../../../types/index.js";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
-const Y = /* @__PURE__ */ F({
+import { defineComponent as B, ref as g, computed as l, watch as T, onMounted as V, nextTick as O } from "vue";
+import { NmorphComponentHeight as j } from "../../../types/index.js";
+import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as P, useFormItemModel as A } from "../nmorph-form/use-form-item-input.js";
+const G = /* @__PURE__ */ B({
   __name: "NmorphTextarea",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -23,45 +23,49 @@ const Y = /* @__PURE__ */ F({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  setup(y, { expose: g, emit: x }) {
-    const e = y, n = x, { id: b, name: w, autocomplete: q, tabindex: v } = j(e), a = h(null), s = h(!1), S = l(
-      () => V({
-        nmorph: [O[e.height], s.value && "focused"],
+  setup(x, { expose: b, emit: w }) {
+    const e = x, n = w, { id: q, name: v, autocomplete: S, tabindex: _ } = P(e), { modelValue: i, updateModelValue: u } = A(
+      e,
+      (t) => n("update:model-value", t),
+      ""
+    ), a = g(null), s = g(!1), z = l(
+      () => k({
+        nmorph: [j[e.height], s.value && "focused"],
         "nmorph-textarea": [e.disabled && "disabled", e.autoSize && "auto-size"]
       })
-    ), i = (t) => {
+    ), d = (t) => {
       const o = window.getComputedStyle(t);
       return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
     }, r = async () => {
       if (!e.autoSize) return;
-      await T();
+      await O();
       const t = a.value;
       if (!t) return;
       t.style.height = "auto";
-      const o = window.getComputedStyle(t), N = parseFloat(o.lineHeight) || 20, c = e.maxRows ? e.maxRows * N + i(t) : 1 / 0, C = Math.min(t.scrollHeight, c);
-      t.style.height = `${C}px`, t.style.overflowY = t.scrollHeight > c ? "auto" : "hidden";
-    }, _ = (t) => {
+      const o = window.getComputedStyle(t), C = parseFloat(o.lineHeight) || 20, y = e.maxRows ? e.maxRows * C + d(t) : 1 / 0, I = Math.min(t.scrollHeight, y);
+      t.style.height = `${I}px`, t.style.overflowY = t.scrollHeight > y ? "auto" : "hidden";
+    }, M = (t) => {
       const o = t.target;
-      n("update:model-value", o.value), r();
-    }, z = () => {
-      n("focus"), s.value = !0;
+      u(o.value), r();
     }, H = () => {
+      n("focus"), s.value = !0;
+    }, R = () => {
       n("blur"), s.value = !1;
-    }, u = () => {
+    }, p = () => {
       a.value?.focus();
-    }, d = () => {
+    }, m = () => {
       a.value?.blur();
-    }, p = () => {
+    }, f = () => {
       a.value?.select();
     };
-    B(() => e.modelValue, r), I(r), g({ textareaDOMRef: a, focus: u, blur: d, select: p, resizeToContent: r });
-    const f = l(() => Math.max(e.minRows, 1)), R = l(() => Math.max(e.rows, f.value)), M = l(() => ({
+    T(i, r), V(r), b({ textareaDOMRef: a, focus: p, blur: m, select: f, resizeToContent: r });
+    const c = l(() => Math.max(e.minRows, 1)), F = l(() => Math.max(e.rows, c.value)), N = l(() => ({
       "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
       "--nmorph-textarea-indentation": e.indentation
-    })), m = { props: e, emit: n, id: b, name: w, autocomplete: q, tabindex: v, textareaDOMRef: a, focused: s, modifiers: S, getVerticalPadding: i, resizeToContent: r, handleInput: _, handleFocus: z, handleBlur: H, focus: u, blur: d, select: p, minRows: f, rows: R, styles: M };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    })), h = { props: e, emit: n, id: q, name: v, autocomplete: S, tabindex: _, modelValue: i, updateModelValue: u, textareaDOMRef: a, focused: s, modifiers: z, getVerticalPadding: d, resizeToContent: r, handleInput: M, handleFocus: H, handleBlur: R, focus: p, blur: m, select: f, minRows: c, rows: F, styles: N };
+    return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
   }
 });
 export {
-  Y as default
+  G as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -47,7 +47,7 @@ function I(S, a, z, e, B, D) {
           autocomplete: e.autocomplete,
           type: "time",
           step: e.inputStep,
-          value: e.props.modelValue || "",
+          value: e.modelValue || "",
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
         }, null, 40, w),