@nmorph/nmorph-ui-kit 2.2.37 → 2.2.39

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

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

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 A, computed as m, ref as o, watch as E, onMounted as G, onUnmounted as J } from "vue";
+import { useModifiers as K } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Q } 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__ */ A({
   __name: "NmorphSlider",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -23,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: H, tabindex: _ } = Y(e), C = m(
+      () => K({
         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), V = m(() => {
+      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = f.value?.clientWidth || 0, d = e.thumbWidth / a * 100, X = d / 2;
+      let $ = u - X;
+      const q = `${Math.max(0, Math.min(100 - d, $))}%`, I = a / 100, j = e.thumbWidth / 2 / I, M = (P.value?.tooltipBody.clientWidth ?? 24) / 2 / I, U = M === 1 / 0 ? 1.714 : M, k = `${parseFloat(q) + j - U}%`;
       return {
-        thumb: P,
-        tooltip: U
+        thumb: q,
+        tooltip: k
       };
-    }), l = o(0), f = o(0), h = () => {
-      l.value = window.innerWidth, f.value = window.innerHeight;
+    }), s = o(0), h = o(0), v = () => {
+      s.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));
+    G(() => {
+      typeof window < "u" && (s.value = window.innerWidth, h.value = window.innerHeight, window.addEventListener("resize", v));
+    }), J(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", l), 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));
-    }, s = (t) => {
-      t.preventDefault(), v(t.clientX);
+    }, l = (t) => {
+      t.preventDefault(), b(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
+      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), w.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));
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), b(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
     }, F = o(null), O = () => {
       e.showTooltip && (p.value = !0);
-    }, V = () => {
+    }, B = () => {
       e.showTooltip && (p.value = !1);
-    }, B = (t) => {
+    }, R = (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) },
-      ...e.valueFixedContainerHeight !== void 0 && {
-        "--value-fixed-container-height": I(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 = o(!0), D = m(() => ({
+      "--nmorph-slider-thumb-width": g.value,
+      ...Q({
+        "--slider-height": e.sliderHeight,
+        "--value-fixed-container-height": e.valueFixedContainerHeight
+      })
+    })), W = { props: e, id: S, name: H, tabindex: _, modifiers: C, thumbWidthCss: g, tooltipVisible: p, emit: x, modelValue: c, updateModelValue: y, thumbValue: n, sliderContainer: f, tooltipRootRef: P, thumbXPercentPosition: V, windowWidth: s, windowHeight: h, resizeWindowHandler: v, updateThumbValue: b, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: B, nativeInputHandler: R, transitionEnabled: w, styles: D, 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 N, ref as l, computed as n, watch as V } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as I } from "../../../utils/common.js";
+import { useFormItemInput as w, useFormItemModel as B } from "../nmorph-form/use-form-item-input.js";
+import H from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../assets/icons/loader.svg.js";
+const j = /* @__PURE__ */ N({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
@@ -23,13 +23,17 @@ 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 = () => {
+  setup(f, { expose: m, emit: p }) {
+    const e = f, { id: c, name: h, tabindex: v } = w(e), u = p, { modelValue: o, updateModelValue: i } = B(
+      e,
+      (a) => u("update:model-value", a),
+      !1
+    ), r = l(!1), g = () => {
       r.value = !0;
-    }, g = () => {
+    }, b = () => {
       r.value = !1;
-    }, b = n(
-      () => V({
+    }, y = n(
+      () => _({
         "nmorph-switch": [
           e.disabled && "disabled",
           t.value ? "on" : "off",
@@ -37,33 +41,32 @@ const M = /* @__PURE__ */ q({
           r.value && "focus"
         ]
       })
-    ), t = i(e.modelValue === e.activeValue), y = () => {
+    ), t = l(o.value === e.activeValue), S = () => {
       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) }
-    }));
-    N(
-      () => e.modelValue,
-      (o) => {
-        t.value = o === e.activeValue;
-      }
+      const a = t.value ? e.activeValue : e.inactiveValue;
+      i(a);
+    }, s = l(null);
+    m({ inputDOMRef: s });
+    const q = n(
+      () => I({
+        "--width": e.width,
+        "--height": e.height,
+        "--offset": e.offset,
+        "--thumb-height": e.thumbHeight
+      })
     );
-    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;
-    }, get NmorphIconLoaderDots() {
+    V(o, (a) => {
+      t.value = a === e.activeValue;
+    });
+    const d = { props: e, id: c, name: h, tabindex: v, emit: u, modelValue: o, updateModelValue: i, focus: r, focusHandler: g, blurHandler: b, modifiers: y, initialValue: t, changeHandler: S, inputDOMRef: s, styles: q, get NmorphIcon() {
       return H;
+    }, get NmorphIconLoaderDots() {
+      return x;
     } };
     return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 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

@@ -1,22 +1,22 @@
 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";
+import m from "./NmorphTextInput.vue2.js";
+import { openBlock as t, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as u, withCtx as a, createVNode as b, resolveDynamicComponent as x } from "vue";
 /* empty css                     */
-import x from "../../../_virtual/_plugin-vue_export-helper.js";
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = { class: "nmorph-text-input__input-side" }, k = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
 }, w = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
 function B(p, o, N, e, C, I) {
-  return n(), r(
+  return t(), r(
     "div",
     {
       class: c(e.modifiers),
-      style: m(e.styles)
+      style: s(e.styles)
     },
     [
       i("div", v, [
-        e.slots["prepend-icon"] ? (n(), r("div", k, [
+        e.slots["prepend-icon"] ? (t(), r("div", k, [
           h(p.$slots, "prepend-icon")
         ])) : l("v-if", !0),
         i("input", f({
@@ -29,29 +29,29 @@ 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,
-          onBlur: e.handleBlur,
-          onKeydown: o[0] || (o[0] = (t) => e.emit("keydown", t)),
-          onKeyup: o[1] || (o[1] = y((t) => e.emit("on-enter"), ["enter"]))
+          onFocus: o[0] || (o[0] = (...n) => e.handleFocus && e.handleFocus(...n)),
+          onBlur: o[1] || (o[1] = (...n) => e.handleBlur && e.handleBlur(...n)),
+          onKeydown: o[2] || (o[2] = (n) => e.emit("keydown", n)),
+          onKeyup: o[3] || (o[3] = y((n) => e.emit("on-enter"), ["enter"]))
         }), null, 16, w),
-        e.props.typePassword || e.props.clearable ? (n(), d(e.NmorphButton, {
+        e.props.typePassword || e.props.clearable ? (t(), d(e.NmorphButton, {
           key: 1,
           disabled: e.props.disabled,
           class: "nmorph-text-input__password-btn",
           "style-type": "transparent",
           width: "32px",
           height: e.props.height,
-          onMousedown: o[2] || (o[2] = _(() => {
+          onMousedown: o[4] || (o[4] = u(() => {
           }, ["prevent"])),
           onClick: e.actionButtonClickHandler
         }, {
           default: a(() => [
-            u(e.NmorphIcon, null, {
+            b(e.NmorphIcon, null, {
               default: a(() => [
-                (n(), d(b(e.actionIcon)))
+                (t(), d(x(e.actionIcon)))
               ]),
               _: 1
               /* STABLE */
@@ -66,7 +66,7 @@ function B(p, o, N, e, C, I) {
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ x(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+const M = /* @__PURE__ */ _(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
 export {
-  z as default
+  M as default
 };

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

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

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

@@ -1,15 +1,15 @@
 import './NmorphTextarea.css';
-import a from "./NmorphTextarea.vue2.js";
-import { openBlock as n, createElementBlock as t, normalizeStyle as l, normalizeClass as d, createElementVNode as i, mergeProps as m, withKeys as s } from "vue";
+import n from "./NmorphTextarea.vue2.js";
+import { openBlock as a, createElementBlock as l, normalizeStyle as t, normalizeClass as d, createElementVNode as i, mergeProps as m, withKeys as s } from "vue";
 /* empty css                    */
 import p from "../../../_virtual/_plugin-vue_export-helper.js";
-const c = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
-function f(x, o, h, e, b, y) {
-  return n(), t(
+const f = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
+function x(c, o, b, e, h, y) {
+  return a(), l(
     "div",
     {
       class: d(e.modifiers),
-      style: l(e.styles)
+      style: t(e.styles)
     },
     [
       i("textarea", m({
@@ -21,21 +21,21 @@ 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,
-        onFocus: e.handleFocus,
-        onBlur: e.handleBlur,
-        onKeydown: o[0] || (o[0] = (r) => e.emit("keydown", r)),
-        onKeyup: o[1] || (o[1] = s((r) => e.emit("on-enter"), ["enter"]))
-      }), null, 16, c)
+        onFocus: o[0] || (o[0] = (...r) => e.handleFocus && e.handleFocus(...r)),
+        onBlur: o[1] || (o[1] = (...r) => e.handleBlur && e.handleBlur(...r)),
+        onKeydown: o[2] || (o[2] = (r) => e.emit("keydown", r)),
+        onKeyup: o[3] || (o[3] = s((r) => e.emit("on-enter"), ["enter"]))
+      }), null, 16, f)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const k = /* @__PURE__ */ p(a, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
+const k = /* @__PURE__ */ p(n, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
 export {
   k as default
 };