@nmorph/nmorph-ui-kit 2.2.38 → 2.2.39

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -1,18 +1,18 @@
 import './NmorphSelect.css';
-import { defineComponent as oe, computed as a, ref as d, watch as c, nextTick as R, onMounted as ie, onUnmounted as se, provide as w, toRef as de } from "vue";
-import { NmorphComponentHeight as ve } from "../../../types/index.js";
-import { useModifiers as ce } from "../../../utils/create-modifiers.js";
-import { toCssSize as C, getNmorphOptionHeight as fe, resolveDomElement as pe } from "../../../utils/common.js";
-import { useI18n as me } from "vue-i18n";
-import { useFormItemModel as he, useFormItemInput as ge } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as ye } from "../../../hooks/use-virtual-list.js";
-import He from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import be from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import qe from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import Ie from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import xe from "../../../assets/icons/chevron-down.svg.js";
-import Ne from "../../../assets/icons/loader.svg.js";
-const je = /* @__PURE__ */ oe({
+import { defineComponent as ue, computed as a, ref as d, watch as c, nextTick as R, onMounted as oe, onUnmounted as ie, provide as w, toRef as se } from "vue";
+import { useModifiers as de } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ve, getNmorphOptionHeight as ce, toCssSize as fe, resolveDomElement as pe } from "../../../utils/common.js";
+import { useVirtualList as me } from "../../../hooks/use-virtual-list.js";
+import { useI18n as he } from "vue-i18n";
+import { useFormItemModel as ge, useFormItemInput as ye } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as He } from "../../../types/common.types.js";
+import be from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import qe from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import Ie from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import xe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import Ne from "../../../assets/icons/chevron-down.svg.js";
+import Se from "../../../assets/icons/loader.svg.js";
+const Ge = /* @__PURE__ */ ue({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -39,30 +39,30 @@ const je = /* @__PURE__ */ oe({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(P, { expose: T, emit: W }) {
-    T();
-    const { t: M } = me(), l = P, D = a(
+  setup(C, { expose: P, emit: T }) {
+    P();
+    const { t: M } = he(), l = C, D = a(
       () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
-    ), A = W, { modelValue: p, updateModelValue: h } = he(
+    ), A = T, { modelValue: p, updateModelValue: h } = ge(
       l,
       (e) => A("update:model-value", e),
       ""
-    ), t = d(p.value), r = d(l.open), v = a(() => l.disabled || l.loading), g = a(() => l.optionsWidth === "auto"), y = d(!0), { id: H, name: k, autocomplete: $, tabindex: F } = ge(l), b = (e) => {
+    ), t = d(p.value), r = d(l.open), v = a(() => l.disabled || l.loading), g = a(() => l.optionsWidth === "auto"), y = d(!0), { id: H, name: W, autocomplete: k, tabindex: $ } = ye(l), b = (e) => {
       if (!v.value) {
         if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, h(t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), ne = t.value.length === 1 && n;
-          if (l.valueRequired && ne) return;
-          n ? t.value = t.value.filter((ue) => ue !== e) : t.value = [...t.value, e];
+          const n = t.value.includes(e), re = t.value.length === 1 && n;
+          if (l.valueRequired && re) return;
+          n ? t.value = t.value.filter((ne) => ne !== e) : t.value = [...t.value, e];
         }
         h(t.value);
       }
-    }, m = d(!1), U = () => {
+    }, m = d(!1), z = () => {
       m.value = !0;
-    }, z = () => {
+    }, F = () => {
       m.value = !1;
-    }, j = a(
-      () => ce({
-        nmorph: [ve[l.height]],
+    }, U = a(
+      () => de({
+        nmorph: [He[l.height]],
         "nmorph-select": [
           l.disabled && "disabled",
           p.value ? "on" : "off",
@@ -74,9 +74,11 @@ const je = /* @__PURE__ */ oe({
           m.value && "focus"
         ]
       })
-    ), G = a(() => ({
-      ...l.width !== void 0 && { "--base-width": C(l.width) }
-    })), J = () => {
+    ), j = a(
+      () => ve({
+        "--base-width": l.width
+      })
+    ), G = () => {
       v.value || (r.value = !r.value);
     };
     c(
@@ -101,16 +103,16 @@ const je = /* @__PURE__ */ oe({
       },
       { deep: !0 }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), I = d(null), x = d([]), N = a(() => l.options), f = a(() => l.virtual && N.value.length > 0), E = a(() => l.virtualItemHeight || fe(l.height)), V = a(() => l.virtualOverscan), _ = a(() => l.virtualDynamicHeight), s = ye(N, {
+    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), I = d(null), x = d([]), N = a(() => l.options), f = a(() => l.virtual && N.value.length > 0), E = a(() => l.virtualItemHeight || ce(l.height)), V = a(() => l.virtualOverscan), _ = a(() => l.virtualDynamicHeight), s = me(N, {
       enabled: f,
       itemHeight: E,
       overscan: V,
       dynamic: _
-    }), K = a(() => s.virtualItems.value), Q = s.spacerStyle, X = s.contentStyle, Y = a(() => C(l.virtualMaxHeight)), O = () => {
+    }), J = a(() => s.virtualItems.value), K = s.spacerStyle, Q = s.contentStyle, X = a(() => fe(l.virtualMaxHeight)), S = () => {
       i.value.length > 0 || !I.value || (x.value = Array.from(I.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
     }, o = a(
       () => i.value.length > 0 ? i.value.map((e) => e.value) : x.value
-    ), Z = a(() => f.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), S = a(() => o.value[u.value] || ""), ee = a(() => `${H.value}-listbox`), te = (e) => `${H.value}-option-${e.replace(/\s+/g, "-")}`;
+    ), Y = a(() => f.value ? Array.isArray(t.value) ? t.value : t.value ? [t.value] : [] : o.value), u = d(0), O = a(() => o.value[u.value] || ""), Z = a(() => `${H.value}-listbox`), ee = (e) => `${H.value}-option-${e.replace(/\s+/g, "-")}`;
     c(u, (e) => {
       r.value && f.value && s.scrollToIndex(e);
     }), c(
@@ -121,29 +123,29 @@ const je = /* @__PURE__ */ oe({
       { immediate: !0 }
     ), c(r, async (e) => {
       if (e) {
-        if (await R(), O(), typeof t.value == "string") {
+        if (await R(), S(), typeof t.value == "string") {
           const n = o.value.indexOf(t.value);
           n !== -1 && (u.value = n);
         }
         s.refresh(), f.value && s.scrollToIndex(u.value);
       }
-    }), ie(async () => {
-      await R(), O(), document.addEventListener("click", q);
-    }), se(() => {
+    }), oe(async () => {
+      await R(), S(), document.addEventListener("click", q);
+    }), ie(() => {
       document.removeEventListener("click", q);
     });
-    const le = a(() => typeof t.value == "string" ? t.value === "" ? D.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), ae = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
-    w("select-selected-value", t), w("select-change-selected-value", b), w("select-height", de(l, "height"));
-    const B = d(null), re = a(
+    const te = a(() => typeof t.value == "string" ? t.value === "" ? D.value : i.value.find((e) => e.value === t.value)?.label : i.value.find((e) => e.value === t.value)?.label), le = a(() => i.value.length > 0 ? i.value.filter((n) => t.value.includes(n.value)).map((n) => ({ text: n.label, value: n.value })) : Array.isArray(t.value) ? t.value.map((n) => ({ text: n, value: n })) : [{ text: t.value, value: t.value }]);
+    w("select-selected-value", t), w("select-change-selected-value", b), w("select-height", se(l, "height"));
+    const B = d(null), ae = a(
       () => g.value ? `${B.value?.clientWidth || 0}px` : void 0
-    ), L = { t: M, props: l, computedNoElementPlaceholder: D, emit: A, modelValue: p, updateModelValue: h, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: g, selectedLineOutset: y, id: H, name: k, autocomplete: $, tabindex: F, changeHandler: b, focus: m, focusHandler: U, blurHandler: z, modifiers: j, styles: G, clickHandler: J, closeHandler: q, optionsMap: i, optionsDOMRef: I, slotDomOptions: x, renderedOptions: N, virtualEnabled: f, virtualItemHeight: E, virtualOverscan: V, virtualDynamicHeight: _, virtualList: s, virtualOptions: K, virtualSpacerStyle: Q, virtualContentStyle: X, virtualMaxHeight: Y, refreshDomOptions: O, domOptions: o, nativeOptions: Z, currentIndex: u, currentFocusedEl: S, listboxId: ee, getOptionId: te, selectedValueTitle: le, tags: ae, nmorphSelectDOMRef: B, optionsMinWidth: re, spaceHandler: () => {
+    ), L = { t: M, props: l, computedNoElementPlaceholder: D, emit: A, modelValue: p, updateModelValue: h, initialValue: t, open: r, disabledInput: v, autoOptionsWidth: g, selectedLineOutset: y, id: H, name: W, autocomplete: k, tabindex: $, changeHandler: b, focus: m, focusHandler: z, blurHandler: F, modifiers: U, styles: j, clickHandler: G, closeHandler: q, optionsMap: i, optionsDOMRef: I, slotDomOptions: x, renderedOptions: N, virtualEnabled: f, virtualItemHeight: E, virtualOverscan: V, virtualDynamicHeight: _, virtualList: s, virtualOptions: J, virtualSpacerStyle: K, virtualContentStyle: Q, virtualMaxHeight: X, refreshDomOptions: S, domOptions: o, nativeOptions: Y, currentIndex: u, currentFocusedEl: O, listboxId: Z, getOptionId: ee, selectedValueTitle: te, tags: le, nmorphSelectDOMRef: B, optionsMinWidth: ae, spaceHandler: () => {
       v.value || (r.value = !r.value);
     }, arrowDownHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value + 1) % o.value.length);
     }, arrowUpHandler: () => {
       v.value || o.value.length !== 0 && (r.value || (r.value = !0), u.value = (u.value - 1 + o.value.length) % o.value.length);
     }, enterHandler: () => {
-      r.value && S.value && b(S.value);
+      r.value && O.value && b(O.value);
     }, setVirtualOptionRef: (e, n) => {
       s.measureElement(n, pe(e));
     }, escapeHandler: () => {
@@ -153,21 +155,21 @@ const je = /* @__PURE__ */ oe({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return Ie;
+      return xe;
     }, get NmorphIcon() {
-      return qe;
+      return Ie;
     }, get NmorphSelectOption() {
-      return be;
+      return qe;
     }, get NmorphDropdown() {
-      return He;
+      return be;
     }, get NmorphIconLoaderDots() {
-      return Ne;
+      return Se;
     }, get NmorphIconChevronDown() {
-      return xe;
+      return Ne;
     } };
     return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
 });
 export {
-  je as default
+  Ge as default
 };

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -1,10 +1,11 @@
 import './NmorphSelectOption.css';
 import { defineComponent as g, inject as l, computed as t } from "vue";
-import { NmorphComponentHeight as y } from "../../../../../types/index.js";
-import { useModifiers as S } from "../../../../../utils/create-modifiers.js";
-import b from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import q from "../../../../../assets/icons/success.svg.js";
-const I = /* @__PURE__ */ g({
+import { useModifiers as y } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as b } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as S } from "../../../../../types/common.types.js";
+import q from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import _ from "../../../../../assets/icons/success.svg.js";
+const H = /* @__PURE__ */ g({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
@@ -25,29 +26,31 @@ const I = /* @__PURE__ */ g({
     const r = l("select-selected-value"), o = l("select-change-selected-value"), a = l(
       "select-height",
       void 0
-    ), e = c, i = p, f = () => {
-      e.disabled || (i("change-value", e.value), o && o(e.value));
-    }, u = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), s = t(() => e.height || a?.value || "basic"), h = t(
-      () => S({
-        nmorph: [y[s.value]],
+    ), e = c, s = p, f = () => {
+      e.disabled || (s("change-value", e.value), o && o(e.value));
+    }, i = t(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((v) => v === e.value) : !1), u = t(() => e.height || a?.value || "basic"), m = t(
+      () => y({
+        nmorph: [S[u.value]],
         "nmorph-select-option": [
           e.disabled && "disabled",
           e.label && "with-label",
-          u.value && "checked",
+          i.value && "checked",
           e.focused && "focused"
         ]
       })
-    ), m = t(() => ({
-      ...e.hoverBackground !== void 0 && { "--hover-bg": e.hoverBackground },
-      ...e.hoverColor !== void 0 && { "--hover-color": e.hoverColor }
-    })), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: i, clickHandler: f, checked: u, height: s, modifiers: h, styles: m, get NmorphIcon() {
-      return b;
-    }, get NmorphIconSuccess() {
+    ), h = t(
+      () => b({
+        "--hover-bg": e.hoverBackground,
+        "--hover-color": e.hoverColor
+      })
+    ), n = { selectSelectedValue: r, selectChangeSelectedValue: o, selectHeight: a, props: e, emit: s, clickHandler: f, checked: i, height: u, modifiers: m, styles: h, get NmorphIcon() {
       return q;
+    }, get NmorphIconSuccess() {
+      return _;
     } };
     return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  I as default
+  H as default
 };

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
 };