@nmorph/nmorph-ui-kit 2.2.35 → 2.2.37

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

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

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

@@ -31,10 +31,10 @@ const I = /* @__PURE__ */ g({
       () => S({
         nmorph: [y[s.value]],
         "nmorph-select-option": [
-          `${e.disabled && "disabled"}`,
-          `${e.label && "with-label"}`,
-          `${u.value && "checked"}`,
-          `${e.focused && "focused"}`
+          e.disabled && "disabled",
+          e.label && "with-label",
+          u.value && "checked",
+          e.focused && "focused"
         ]
       })
     ), m = t(() => ({

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

@@ -1,8 +1,9 @@
 import './NmorphSelectButton.css';
-import { defineComponent as c, ref as S, watch as g, computed as o, provide as n } from "vue";
+import { defineComponent as c, ref as S, watch as g, computed as d, provide as o } 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 _ = /* @__PURE__ */ c({
+const z = /* @__PURE__ */ c({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -19,33 +20,33 @@ const _ = /* @__PURE__ */ c({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(u, { expose: s, emit: m }) {
+  setup(n, { expose: s, emit: m }) {
     s();
-    const e = u, l = m, i = S(e.modelValue);
+    const e = n, r = m, t = S(e.modelValue);
     g(
       () => e.modelValue,
-      (t) => {
-        i.value = t;
+      (i) => {
+        t.value = i;
       }
     );
-    const f = o(
+    const f = d(
       () => y({
-        "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
+        "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) },
+    ), 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 }
-    })), a = (t) => {
-      e.disabled || (i.value = t, l("update:model-value", t));
+    })), l = (i) => {
+      e.disabled || (t.value = i, r("update:model-value", i));
     };
-    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() {
+    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;
     } };
-    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  _ as default
+  z 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,6 +1,7 @@
 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 { 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({
@@ -27,32 +28,32 @@ const se = /* @__PURE__ */ k({
     const e = H, { id: N, name: T, tabindex: S } = K(e), _ = m(
       () => J({
         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(
+    ), w = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), g = M, n = o(e.modelValue), c = o(null);
+    E(n, () => {
+      g("update:model-value", n.value);
+    }), E(
       () => 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}%`;
+    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}%`;
       return {
-        thumb: W,
+        thumb: P,
         tooltip: U
       };
-    }), s = o(0), f = o(0), h = () => {
-      s.value = window.innerWidth, f.value = window.innerHeight;
+    }), l = o(0), f = o(0), h = () => {
+      l.value = window.innerWidth, f.value = window.innerHeight;
     };
     A(() => {
-      typeof window < "u" && (s.value = window.innerWidth, f.value = window.innerHeight, window.addEventListener("resize", h));
+      typeof window < "u" && (l.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));
+      typeof window < "u" && (document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", h));
     });
     const v = (t) => {
       b.value = !1;
@@ -63,12 +64,12 @@ const se = /* @__PURE__ */ k({
         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) => {
+    }, s = (t) => {
       t.preventDefault(), v(t.clientX);
     }, i = () => {
-      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
+      document.removeEventListener("pointermove", s), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), b.value = !0;
     }, z = (t) => {
-      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), v(t.clientX), document.addEventListener("pointermove", s), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
     }, F = o(null), O = () => {
       e.showTooltip && (p.value = !0);
     }, V = () => {
@@ -76,16 +77,16 @@ const se = /* @__PURE__ */ k({
     }, B = (t) => {
       const r = t.target;
       n.value = Number(r.value);
-    }, b = o(!0), w = (t) => typeof t == "number" ? `${t}px` : t, $ = m(() => ({
-      "--nmorph-slider-thumb-width": g.value,
-      ...e.sliderHeight !== void 0 && { "--slider-height": w(e.sliderHeight) },
+    }, 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": w(e.valueFixedContainerHeight)
+        "--value-fixed-container-height": I(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() {
+    })), 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;
     } };
-    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
   }
 });
 export {

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

@@ -47,7 +47,7 @@ function p(e, _, k, o, y, v) {
             height: "14px"
           }, {
             default: s(() => [
-              h(o.NmorphIconLoader)
+              h(o.NmorphIconLoaderDots)
             ]),
             _: 1
             /* STABLE */

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

@@ -1,10 +1,11 @@
 import './NmorphSwitch.css';
-import { defineComponent as q, ref as o, computed as n, watch as N } from "vue";
+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 L = /* @__PURE__ */ q({
+const M = /* @__PURE__ */ q({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
@@ -23,27 +24,27 @@ const L = /* @__PURE__ */ q({
   },
   emits: ["update:model-value"],
   setup(s, { expose: f, emit: m }) {
-    const e = s, { id: p, name: c, tabindex: h } = _(e), u = m, i = o(!1), g = () => {
-      i.value = !0;
-    }, v = () => {
-      i.value = !1;
+    const e = s, { id: p, name: c, tabindex: h } = _(e), u = m, r = i(!1), v = () => {
+      r.value = !0;
+    }, g = () => {
+      r.value = !1;
     }, b = n(
       () => V({
         "nmorph-switch": [
-          `${e.disabled && "disabled"}`,
-          `${r.value ? "on" : "off"}`,
-          `${e.loading && "loading"}`,
-          `${i.value && "focus"}`
+          e.disabled && "disabled",
+          t.value ? "on" : "off",
+          e.loading && "loading",
+          r.value && "focus"
         ]
       })
-    ), r = o(e.modelValue === e.activeValue), y = () => {
+    ), t = i(e.modelValue === e.activeValue), y = () => {
       if (e.disabled) return;
-      r.value = !r.value;
-      const t = r.value ? e.activeValue : e.inactiveValue;
-      u("update:model-value", t);
-    }, l = o(null);
+      t.value = !t.value;
+      const o = t.value ? e.activeValue : e.inactiveValue;
+      u("update:model-value", o);
+    }, l = i(null);
     f({ inputDOMRef: l });
-    const a = (t) => typeof t == "number" ? `${t}px` : t, S = n(() => ({
+    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) },
@@ -51,18 +52,18 @@ const L = /* @__PURE__ */ q({
     }));
     N(
       () => e.modelValue,
-      (t) => {
-        r.value = t === e.activeValue;
+      (o) => {
+        t.value = o === e.activeValue;
       }
     );
-    const d = { props: e, id: p, name: c, tabindex: h, emit: u, focus: i, focusHandler: g, blurHandler: v, modifiers: b, initialValue: r, changeHandler: y, inputDOMRef: l, getCssSize: a, styles: S, get NmorphIcon() {
+    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 NmorphIconLoader() {
+    }, get NmorphIconLoaderDots() {
       return H;
     } };
     return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
   }
 });
 export {
-  L as default
+  M 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);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,
@@ -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 './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 $ } 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 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({
   __name: "NmorphTextInput",
   props: {
     placeholder: { type: String, required: !1, default: "" },
@@ -25,13 +26,10 @@ const U = /* @__PURE__ */ C({
   },
   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"}`
-        ]
+    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"],
+        "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
       })
     ), w = (P) => {
       const k = P.target;
@@ -50,14 +48,14 @@ const U = /* @__PURE__ */ 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;
+    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;
     }, get NmorphButton() {
-      return M;
+      return A;
     } };
     return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  U as default
+  W as default
 };

package/dist/components/form/nmorph-textarea/NmorphTextarea.css

@@ -0,0 +1 @@
+.nmorph-textarea{height:auto}.nmorph-textarea textarea{display:block;box-sizing:border-box;width:100%;min-width:0;padding:var(--indentation-03) var(--indentation-03) var(--indentation-03) var(--nmorph-textarea-indentation);color:var(--nmorph-text-color);font:inherit;line-height:var(--line-height-regular);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset);transition:background var(--transition-02) ease,box-shadow var(--transition-02) ease,color var(--transition-02) ease;resize:var(--nmorph-textarea-resize)}.nmorph-textarea textarea:focus{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);outline:none;box-shadow:var(--nmorph-shadow-outset)}.nmorph-textarea textarea:disabled{cursor:not-allowed;opacity:.6;resize:none}.nmorph-textarea.nmorph-textarea--auto-size textarea{overflow-y:hidden}

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

@@ -0,0 +1,41 @@
+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";
+/* 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(
+    "div",
+    {
+      class: d(e.modifiers),
+      style: l(e.styles)
+    },
+    [
+      i("textarea", m({
+        id: e.id,
+        ref: "textareaDOMRef",
+        name: e.name,
+        autocomplete: e.autocomplete,
+        tabindex: e.tabindex,
+        class: "nmorph-native-input",
+        placeholder: e.props.placeholder,
+        disabled: e.props.disabled,
+        value: e.props.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)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const k = /* @__PURE__ */ p(a, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
+export {
+  k as default
+};