@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

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

@@ -1,10 +1,10 @@
 import './NmorphSelectButton.css';
-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({
+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 { 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: "" },
@@ -21,34 +21,38 @@ const F = /* @__PURE__ */ g({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: f, emit: p }) {
-    f();
-    const e = m, l = p, { modelValue: r, updateModelValue: a } = h(
+  setup(n, { expose: m, emit: f }) {
+    m();
+    const e = n, a = f, { modelValue: i, updateModelValue: l } = v(
       e,
-      (t) => l("update:model-value", t),
+      (t) => a("update:model-value", t),
       ""
-    ), i = y(r.value);
-    b(r, (t) => {
-      i.value = t;
+    ), r = b(i.value);
+    g(i, (t) => {
+      r.value = t;
     });
-    const c = u(
-      () => v({
+    const p = s(
+      () => y({
         "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.height]
       })
-    ), 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 }
+    ), c = s(() => ({
+      ...q({
+        "--track-padding": e.trackPadding,
+        "--item-size": e.itemSize
+      }),
+      ...h({
+        "--item-font-size": e.itemFontSize
+      })
     })), o = (t) => {
-      e.disabled || (i.value = t, a(t));
+      e.disabled || (r.value = t, l(t));
     };
-    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;
+    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(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  F as default
+  x as default
 };

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

@@ -1,10 +1,10 @@
 import './NmorphSlider.css';
-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 { 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__ */ G({
+const de = /* @__PURE__ */ A({
   __name: "NmorphSlider",
   props: {
     modelValue: { type: Number, required: !1, default: 0 },
@@ -25,8 +25,8 @@ const de = /* @__PURE__ */ G({
   emits: ["update:model-value"],
   setup(L, { expose: N, emit: T }) {
     N();
-    const e = L, { id: S, name: _, tabindex: C } = Y(e), F = m(
-      () => Q({
+    const e = L, { id: S, name: H, tabindex: _ } = Y(e), C = m(
+      () => K({
         nmorph: [],
         "nmorph-slider": [e.disabled && "disabled"]
       })
@@ -40,21 +40,21 @@ const de = /* @__PURE__ */ G({
     }), 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}%`;
+    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: q,
-        tooltip: A
+        tooltip: k
       };
-    }), l = o(0), h = o(0), v = () => {
-      l.value = window.innerWidth, h.value = window.innerHeight;
+    }), s = o(0), h = o(0), v = () => {
+      s.value = window.innerWidth, h.value = window.innerHeight;
     };
-    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));
+    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 b = (t) => {
       w.value = !1;
@@ -65,26 +65,26 @@ const de = /* @__PURE__ */ G({
         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) => {
+    }, l = (t) => {
       t.preventDefault(), b(t.clientX);
     }, i = () => {
-      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 = () => {
+      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(), b(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+    }, F = o(null), O = () => {
       e.showTooltip && (p.value = !0);
-    }, R = () => {
+    }, B = () => {
       e.showTooltip && (p.value = !1);
-    }, D = (t) => {
+    }, R = (t) => {
       const r = t.target;
       n.value = Number(r.value);
-    }, w = o(!0), X = m(() => ({
+    }, w = o(!0), D = m(() => ({
       "--nmorph-slider-thumb-width": g.value,
-      ...e.sliderHeight !== void 0 && { "--slider-height": H(e.sliderHeight) },
-      ...e.valueFixedContainerHeight !== void 0 && {
-        "--value-fixed-container-height": H(e.valueFixedContainerHeight)
-      }
-    })), 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() {
+      ...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(W, "__isScriptSetup", { enumerable: !1, value: !0 }), W;

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

@@ -1,11 +1,11 @@
 import './NmorphSwitch.css';
-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 { 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__ */ V({
+const j = /* @__PURE__ */ N({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
@@ -23,46 +23,48 @@ const j = /* @__PURE__ */ V({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(m, { expose: p, emit: c }) {
-    const e = m, { id: h, name: v, tabindex: g } = I(e), l = c, { modelValue: i, updateModelValue: d } = H(
+  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,
-      (r) => l("update:model-value", r),
+      (a) => u("update:model-value", a),
       !1
-    ), a = u(!1), b = () => {
-      a.value = !0;
-    }, y = () => {
-      a.value = !1;
-    }, S = f(
-      () => w({
+    ), r = l(!1), g = () => {
+      r.value = !0;
+    }, b = () => {
+      r.value = !1;
+    }, y = n(
+      () => _({
         "nmorph-switch": [
           e.disabled && "disabled",
           t.value ? "on" : "off",
           e.loading && "loading",
-          a.value && "focus"
+          r.value && "focus"
         ]
       })
-    ), t = u(i.value === e.activeValue), q = () => {
+    ), t = l(o.value === e.activeValue), S = () => {
       if (e.disabled) return;
       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) }
-    }));
-    _(i, (r) => {
-      t.value = r === 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
+      })
+    );
+    V(o, (a) => {
+      t.value = a === 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;
+    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(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {

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({
@@ -32,26 +32,26 @@ function B(p, o, N, e, C, I) {
           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 E, useSlots as F, computed as r, ref as u } from "vue";
-import { NmorphComponentHeight as O } from "../../../types/index.js";
-import { useModifiers as V } from "../../../utils/create-modifiers.js";
+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 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({
+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,41 +26,42 @@ const Z = /* @__PURE__ */ E({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
-  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(
+  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,
-      (s) => n("update:model-value", s),
+      (a) => r("update:model-value", a),
       ""
-    ), x = r(
-      () => V({
-        nmorph: [O[e.height], a.value && "focused"],
+    ), w = o(
+      () => O({
+        nmorph: [R[e.height], u.value && "focused"],
         "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
       })
-    ), 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();
-    }, d = () => {
-      o.value?.blur();
-    }, c = () => {
-      o.value?.select();
-    };
-    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;
+    ), 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 R;
+      return T;
     } };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  Z 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({
@@ -25,17 +25,17 @@ function f(x, o, h, e, b, y) {
         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
 };

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

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