@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js

@@ -1,8 +1,10 @@
 import './NmorphSelectButton.css';
-import { defineComponent as c, ref as S, watch as g, computed as o, provide as n } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import b from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
-const _ = /* @__PURE__ */ c({
+import { defineComponent as g, ref as y, watch as b, computed as u, provide as n } from "vue";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
+import { toCssSize as s } from "../../../utils/common.js";
+import { useFormItemModel as h } from "../nmorph-form/use-form-item-input.js";
+import q from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const F = /* @__PURE__ */ g({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -19,33 +21,34 @@ const _ = /* @__PURE__ */ c({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(u, { expose: s, emit: m }) {
-    s();
-    const e = u, l = m, i = S(e.modelValue);
-    g(
-      () => e.modelValue,
-      (t) => {
-        i.value = t;
-      }
-    );
-    const f = o(
-      () => y({
-        "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
+  setup(m, { expose: f, emit: p }) {
+    f();
+    const e = m, l = p, { modelValue: r, updateModelValue: a } = h(
+      e,
+      (t) => l("update:model-value", t),
+      ""
+    ), i = y(r.value);
+    b(r, (t) => {
+      i.value = t;
+    });
+    const c = u(
+      () => v({
+        "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.height]
       })
-    ), r = (t) => typeof t == "number" ? `${t}px` : t, p = o(() => ({
-      ...e.trackPadding !== void 0 && { "--track-padding": r(e.trackPadding) },
-      ...e.itemSize !== void 0 && { "--item-size": r(e.itemSize) },
+    ), S = u(() => ({
+      ...e.trackPadding !== void 0 && { "--track-padding": s(e.trackPadding) },
+      ...e.itemSize !== void 0 && { "--item-size": s(e.itemSize) },
       ...e.itemFontSize !== void 0 && { "--item-font-size": e.itemFontSize }
-    })), a = (t) => {
-      e.disabled || (i.value = t, l("update:model-value", t));
+    })), o = (t) => {
+      e.disabled || (i.value = t, a(t));
     };
-    n("select-button-selected-value", i), n("select-button-change-handler", a);
-    const d = { props: e, emit: l, initialValue: i, modifiers: f, getCssSize: r, styles: p, changeHandler: a, get NmorphSelectButtonItem() {
-      return b;
+    n("select-button-selected-value", i), n("select-button-change-handler", o);
+    const d = { props: e, emit: l, modelValue: r, updateModelValue: a, initialValue: i, modifiers: c, styles: S, changeHandler: o, get NmorphSelectButtonItem() {
+      return q;
     } };
     return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  _ as default
+  F as default
 };

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue2.js

@@ -22,7 +22,7 @@ const v = /* @__PURE__ */ c({
     s({ inputDOMRef: n });
     const l = d(() => r?.value === e.value), u = d(
       () => f({
-        "nmorph-select-button-item": [`${l.value && "checked"}`, `${e.disabled && "disabled"}`]
+        "nmorph-select-button-item": [l.value && "checked", e.disabled && "disabled"]
       })
     ), a = { selectedValue: r, changeHandler: t, props: e, inputDOMRef: n, checked: l, modifiers: u, clickHandler: () => {
       e.disabled || t && t(e.value);

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

@@ -1,9 +1,10 @@
 import './NmorphSlider.css';
-import { defineComponent as k, computed as m, ref as o, watch as I, onMounted as A, onUnmounted as G } from "vue";
-import { useModifiers as J } from "../../../utils/create-modifiers.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 },
@@ -22,72 +23,73 @@ 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"}`]
+        "nmorph-slider": [e.disabled && "disabled"]
       })
-    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = M, n = o(e.modelValue), c = o(null);
-    I(n, () => {
-      x("update:model-value", n.value);
-    }), I(
-      () => e.modelValue,
-      (t) => {
-        n.value = t;
-      }
-    );
-    const y = o(null), C = m(() => {
-      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = c.value?.clientWidth || 0, d = e.thumbWidth / a * 100, R = d / 2;
-      let D = u - R;
-      const W = `${Math.max(0, Math.min(100 - d, D))}%`, q = a / 100, X = e.thumbWidth / 2 / q, E = (y.value?.tooltipBody.clientWidth ?? 24) / 2 / q, j = E === 1 / 0 ? 1.714 : E, U = `${parseFloat(W) + X - j}%`;
+    ), 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, () => {
+      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: W,
-        tooltip: U
+        thumb: q,
+        tooltip: A
       };
-    }), s = o(0), f = o(0), h = () => {
-      s.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" && (s.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
-    }), G(() => {
-      typeof window < "u" && (document.removeEventListener("pointermove", l), 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;
         u = Math.max(0, Math.min(1, a / d)), n.value = e.min + u * (e.max - e.min);
       }
       n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
-    }, l = (t) => {
-      t.preventDefault(), v(t.clientX);
+    }, s = (t) => {
+      t.preventDefault(), b(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", l), 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", l), 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), w = (t) => typeof t == "number" ? `${t}px` : t, $ = m(() => ({
+    }, w = o(!0), X = m(() => ({
       "--nmorph-slider-thumb-width": g.value,
-      ...e.sliderHeight !== void 0 && { "--slider-height": w(e.sliderHeight) },
+      ...e.sliderHeight !== void 0 && { "--slider-height": H(e.sliderHeight) },
       ...e.valueFixedContainerHeight !== void 0 && {
-        "--value-fixed-container-height": w(e.valueFixedContainerHeight)
+        "--value-fixed-container-height": H(e.valueFixedContainerHeight)
       }
-    })), P = { props: e, id: N, name: T, tabindex: S, modifiers: _, thumbWidthCss: g, tooltipVisible: p, emit: x, thumbValue: n, sliderContainer: c, tooltipRootRef: y, thumbXPercentPosition: C, windowWidth: s, windowHeight: f, resizeWindowHandler: h, updateThumbValue: v, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: V, nativeInputHandler: B, transitionEnabled: b, getCssSize: w, styles: $, 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(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+    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,10 +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 { 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 C = /* @__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 },
@@ -22,47 +23,48 @@ const C = /* @__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, a = i(!1), g = () => {
+  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;
-    }, v = () => {
+    }, y = () => {
       a.value = !1;
-    }, b = n(
-      () => V({
+    }, S = f(
+      () => w({
         "nmorph-switch": [
-          `${e.disabled && "disabled"}`,
-          `${r.value ? "on" : "off"}`,
-          `${e.loading && "loading"}`,
-          `${a.value && "focus"}`
+          e.disabled && "disabled",
+          t.value ? "on" : "off",
+          e.loading && "loading",
+          a.value && "focus"
         ]
       })
-    ), r = i(e.modelValue === e.activeValue), y = () => {
+    ), t = u(i.value === e.activeValue), q = () => {
       if (e.disabled) return;
-      r.value = !r.value;
-      const t = r.value ? e.activeValue : e.inactiveValue;
-      u("update:model-value", t);
-    }, l = i(null);
-    f({ inputDOMRef: l });
-    const o = (t) => typeof t == "number" ? `${t}px` : t, S = n(() => ({
+      t.value = !t.value;
+      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,
-      (t) => {
-        r.value = t === e.activeValue;
-      }
-    );
-    const d = { props: e, id: p, name: c, tabindex: h, emit: u, focus: a, focusHandler: g, blurHandler: v, modifiers: b, initialValue: r, changeHandler: y, inputDOMRef: l, getCssSize: o, 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 {
-  C as default
+  j as default
 };

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

@@ -0,0 +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);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

@@ -1,5 +1,7 @@
+import './NmorphTextInput.css';
 import s from "./NmorphTextInput.vue2.js";
 import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as _, withCtx as a, createVNode as u, resolveDynamicComponent as b } from "vue";
+/* empty css                     */
 import x from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = { class: "nmorph-text-input__input-side" }, k = {
   key: 0,
@@ -27,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,
@@ -64,7 +66,7 @@ function B(p, o, N, e, C, I) {
     /* CLASS, STYLE */
   );
 }
-const M = /* @__PURE__ */ x(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+const z = /* @__PURE__ */ x(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
 export {
-  M as default
+  z as default
 };

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

@@ -1,13 +1,14 @@
-import { defineComponent as C, useSlots as E, computed as n, ref as l } from "vue";
+import './NmorphTextInput.css';
+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 $ } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
-import F from "../../../assets/icons/eye-blocked.svg.js";
-import H from "../../../assets/icons/eye.svg.js";
-import M from "../../basic/nmorph-button/NmorphButton.vue.js";
-import A from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import D from "../../../assets/icons/error.svg.js";
-const U = /* @__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: "" },
@@ -24,40 +25,41 @@ const U = /* @__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 } = j(e), q = n(
-      () => $({
-        nmorph: [O[e.height], `${a.value && "focused"}`],
-        "nmorph-text-input": [
-          `${e.typePassword && "password"}`,
-          `${(e.typePassword || e.clearable) && "with-action"}`
-        ]
+  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 ? D : t.value ? F : H), 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 A;
+    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 M;
+      return R;
     } };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  U 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 $ } from "../../../types/index.js";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as V } from "../nmorph-form/use-form-item-input.js";
-const D = /* @__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 D = /* @__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 } = V(e), a = h(null), s = h(!1), S = l(
-      () => O({
-        nmorph: [$[e.height], `${s.value && "focused"}`],
-        "nmorph-textarea": [`${e.disabled && "disabled"}`, `${e.autoSize && "auto-size"}`]
+  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 {
-  D 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),