@nmorph/nmorph-ui-kit 2.2.34 → 2.2.36

package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphOTPInput.css';
-import { defineComponent as Y, ref as b, computed as i, watch as z, nextTick as D } from "vue";
-import { useModifiers as ee } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as te } from "../../../types/index.js";
-import { useFormItemInput as ae } from "../nmorph-form/use-form-item-input.js";
-import le from "../nmorph-text-input/NmorphTextInput.vue.js";
-const ce = /* @__PURE__ */ Y({
+import { defineComponent as te, ref as b, computed as c, watch as D, nextTick as O } from "vue";
+import { useModifiers as ae } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as le } from "../../../types/index.js";
+import { useFormItemInput as ue } from "../nmorph-form/use-form-item-input.js";
+import oe from "../nmorph-text-input/NmorphTextInput.vue.js";
+const de = /* @__PURE__ */ te({
   __name: "NmorphOTPInput",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -20,120 +20,128 @@ const ce = /* @__PURE__ */ Y({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur", "complete"],
-  setup(F, { expose: O, emit: I }) {
-    const a = F, d = I, { id: V, name: R, autocomplete: q, tabindex: p } = ae(a), s = b([]), n = b([]), c = b(!1), r = b([]), u = i(() => Math.max(1, a.length)), v = (e = "") => {
+  setup(I, { expose: R, emit: j }) {
+    const l = I, f = j, { id: V, name: w, autocomplete: q, tabindex: p } = ue(l), i = b([]), n = b([]), d = b(!1), o = b([]), u = c(() => Math.max(1, l.length)), v = (e = "") => {
       const t = `${e ?? ""}`;
-      return a.mode === "numeric" ? Array.from(t.replace(/\D/g, "")) : a.mode === "alphanumeric" ? Array.from(t.replace(/[^a-zA-Z0-9]/g, "")) : Array.from(t);
-    }, A = (e = a.modelValue) => {
+      return l.mode === "numeric" ? Array.from(t.replace(/\D/g, "")) : l.mode === "alphanumeric" ? Array.from(t.replace(/[^a-zA-Z0-9]/g, "")) : Array.from(t);
+    }, A = (e = l.modelValue) => {
       const t = v(e).slice(0, u.value);
-      return Array.from({ length: u.value }, (l, m) => t[m] || "");
-    }, h = (e, t = !1) => {
-      if (r.value = Array.from({ length: u.value }, (m, y) => e[y] || ""), !t) return;
-      const l = r.value.join("");
-      d("update:model-value", l), r.value.includes("") || d("complete", l);
+      return Array.from({ length: u.value }, (a, s) => t[s] || "");
+    }, g = (e, t = !1) => {
+      if (o.value = Array.from({ length: u.value }, (s, y) => e[y] || ""), !t) return;
+      const a = o.value.join("");
+      f("update:model-value", a), o.value.includes("") || f("complete", a);
     };
-    z(
-      [() => a.modelValue, () => a.mode, u],
+    D(
+      [() => l.modelValue, () => l.mode, u],
       () => {
-        const e = A(a.modelValue);
-        (e.join("") !== r.value.join("") || e.length !== r.value.length) && h(e);
+        const e = A(l.modelValue);
+        (e.join("") !== o.value.join("") || e.length !== o.value.length) && g(e);
       },
       { immediate: !0 }
     );
-    const j = i(
-      () => ee({
-        nmorph: [te[a.height], `${c.value && "focused"}`],
-        "nmorph-otp-input": [`${a.disabled && "disabled"}`]
+    const N = c(
+      () => ae({
+        nmorph: [le[l.height], `${d.value && "focused"}`],
+        "nmorph-otp-input": [`${l.disabled && "disabled"}`]
       })
-    ), N = i(
+    ), T = c(
       () => Array.from({ length: u.value }, (e, t) => t === 0 ? V.value : `${V.value}-${t + 1}`)
-    ), T = i(() => a.mode === "numeric" ? "numeric" : "text"), $ = i(() => q.value || "one-time-code"), w = i(() => {
-      if (a.mode === "numeric") return "[0-9]*";
-      if (a.mode === "alphanumeric") return "[A-Za-z0-9]*";
-    }), g = (e) => {
-      n.value[e] = s.value[e]?.inputDOMRef ?? null;
-    }, x = (e, t) => {
-      s.value[t] = e, D(() => {
-        g(t);
+    ), $ = c(() => l.mode === "numeric" ? "numeric" : "text"), E = c(() => q.value || "one-time-code"), B = c(() => {
+      if (l.mode === "numeric") return "[0-9]*";
+      if (l.mode === "alphanumeric") return "[A-Za-z0-9]*";
+    }), h = (e) => {
+      n.value[e] = i.value[e]?.inputDOMRef ?? null;
+    }, C = (e, t) => {
+      i.value[t] = e, O(() => {
+        h(t);
       });
     }, _ = (e) => {
-      g(e), s.value[e]?.select?.(), n.value[e]?.select();
-    }, o = (e = 0) => {
-      D(() => {
+      h(e), i.value[e]?.select?.(), n.value[e]?.select();
+    }, r = (e = 0) => {
+      O(() => {
         const t = Math.min(Math.max(e, 0), u.value - 1);
-        g(t), s.value[t]?.focus?.(), n.value[t]?.focus(), _(t);
+        h(t), i.value[t]?.focus?.(), n.value[t]?.focus(), _(t);
       });
-    }, M = () => {
-      s.value.forEach((e, t) => {
+    }, F = () => {
+      i.value.forEach((e, t) => {
         e?.blur?.(), n.value[t]?.blur();
       });
     };
-    O({
+    R({
       inputDOMRefs: n,
-      focus: o,
-      blur: M
+      focus: r,
+      blur: F
     });
-    const f = (e, t = "") => {
-      const l = [...r.value];
-      l[e] = t, h(l, !0);
+    const m = (e, t = "") => {
+      const a = [...o.value];
+      a[e] = t, g(a, !0);
     }, H = (e, t) => {
-      const l = v(e).slice(0, u.value - t);
-      if (!l.length) {
-        f(t, "");
+      const a = v(e).slice(0, u.value - t);
+      if (!a.length) {
+        m(t, "");
         return;
       }
-      const m = [...r.value];
-      l.forEach((W, X) => {
-        m[t + X] = W;
-      }), h(m, !0);
-      const y = t + l.length;
-      y < u.value ? o(y) : o(u.value - 1);
-    }, E = (e, t) => {
+      const s = [...o.value];
+      a.forEach((Y, ee) => {
+        s[t + ee] = Y;
+      }), g(s, !0);
+      const y = t + a.length;
+      y < u.value ? r(y) : r(u.value - 1);
+    }, S = (e, t) => {
       H(e, t);
-    }, S = (e) => {
-      if (r.value[e]) {
-        f(e);
+    }, M = /* @__PURE__ */ new Map(), P = (e) => {
+      const t = M.get(e);
+      if (t) return t;
+      const a = c({
+        get: () => o.value[e] || "",
+        set: (s) => S(s, e)
+      });
+      return M.set(e, a), a;
+    }, k = (e) => {
+      if (o.value[e]) {
+        m(e);
         return;
       }
-      e > 0 && (f(e - 1), o(e - 1));
-    }, B = (e, t) => {
+      e > 0 && (m(e - 1), r(e - 1));
+    }, x = (e, t) => {
       if (e.key === "Backspace") {
-        S(t);
+        k(t);
         return;
       }
-      f(t);
-    }, C = (e) => {
-      o(e - 1);
-    }, P = (e) => {
-      o(e + 1);
-    }, L = () => {
-      o(0);
-    }, Z = () => {
-      o(u.value - 1);
-    }, K = (e) => {
-      e.key.length === 1 && !v(e.key).length && e.preventDefault();
-    }, G = (e, t) => {
-      const l = e.clipboardData?.getData("text") || "";
-      H(l, t);
+      m(t);
+    }, L = (e) => {
+      r(e - 1);
+    }, Z = (e) => {
+      r(e + 1);
+    }, K = () => {
+      r(0);
+    }, G = () => {
+      r(u.value - 1);
     }, J = (e) => {
-      c.value || (c.value = !0, d("focus")), _(e);
-    }, Q = () => {
+      e.key.length === 1 && !v(e.key).length && e.preventDefault();
+    }, Q = (e, t) => {
+      const a = e.clipboardData?.getData("text") || "";
+      H(a, t);
+    }, U = (e) => {
+      d.value || (d.value = !0, f("focus")), _(e);
+    }, W = () => {
       setTimeout(() => {
         const e = document.activeElement;
-        !n.value.some((l) => l === e) && c.value && (c.value = !1, d("blur"));
+        !n.value.some((a) => a === e) && d.value && (d.value = !1, f("blur"));
       });
-    }, U = (e) => p.value > 0 ? p.value + e : p.value;
-    z(
-      () => a.autofocus,
+    }, X = (e) => p.value > 0 ? p.value + e : p.value;
+    D(
+      () => l.autofocus,
       (e) => {
-        e && !a.disabled && o(0);
+        e && !l.disabled && r(0);
       },
       { immediate: !0 }
     );
-    const k = { props: a, emit: d, id: V, name: R, autocomplete: q, tabindex: p, inputRefs: s, inputDOMRefs: n, focused: c, otpValue: r, normalizedLength: u, sanitizeValue: v, normalizeOtpValue: A, syncOtpValue: h, modifiers: j, fieldIds: N, inputMode: T, resolvedAutocomplete: $, inputPattern: w, syncInputDOMRef: g, setInputRef: x, selectField: _, focusField: o, blurFields: M, updateCharAt: f, insertValue: H, inputHandler: E, backspaceHandler: S, deleteKeyHandler: B, arrowLeftHandler: C, arrowRightHandler: P, homeHandler: L, endHandler: Z, keydownHandler: K, pasteHandler: G, focusHandler: J, blurHandler: Q, getFieldTabindex: U, NmorphTextInput: le };
-    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+    const z = { props: l, emit: f, id: V, name: w, autocomplete: q, tabindex: p, inputRefs: i, inputDOMRefs: n, focused: d, otpValue: o, normalizedLength: u, sanitizeValue: v, normalizeOtpValue: A, syncOtpValue: g, modifiers: N, fieldIds: T, inputMode: $, resolvedAutocomplete: E, inputPattern: B, syncInputDOMRef: h, setInputRef: C, selectField: _, focusField: r, blurFields: F, updateCharAt: m, insertValue: H, inputHandler: S, fieldModels: M, getFieldModel: P, backspaceHandler: k, deleteKeyHandler: x, arrowLeftHandler: L, arrowRightHandler: Z, homeHandler: K, endHandler: G, keydownHandler: J, pasteHandler: Q, focusHandler: U, blurHandler: W, getFieldTabindex: X, NmorphTextInput: oe };
+    return Object.defineProperty(z, "__isScriptSetup", { enumerable: !1, value: !0 }), z;
   }
 });
 export {
-  ce as default
+  de as default
 };

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

@@ -9,10 +9,10 @@ const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete"
 }, u = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, C = {
+}, D = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, D = ["id"];
+}, C = ["id"];
 function E(y, v, p, e, M, R) {
   return r(), l(
     "div",
@@ -76,7 +76,7 @@ function E(y, v, p, e, M, R) {
               _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (r(), l("div", C, [
+            )) : (r(), l("div", D, [
               (r(!0), l(
                 d,
                 null,
@@ -94,7 +94,7 @@ function E(y, v, p, e, M, R) {
             ])),
             f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
               default: s(() => [
-                e.props.loading ? (r(), i(e.NmorphIconLoader, { key: 0 })) : (r(), i(e.NmorphIconChevronDown, { key: 1 }))
+                e.props.loading ? (r(), i(e.NmorphIconLoaderDots, { key: 0 })) : (r(), i(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -206,7 +206,7 @@ function E(y, v, p, e, M, R) {
               64
               /* STABLE_FRAGMENT */
             ))
-          ], 8, D)
+          ], 8, C)
         ]),
         _: 3
         /* FORWARDED */

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

@@ -1,17 +1,17 @@
 import './NmorphSelect.css';
-import { defineComponent as ue, computed as a, ref as d, watch as f, nextTick as L, onMounted as oe, onUnmounted as ie, provide as R } from "vue";
-import { NmorphComponentHeight as se } from "../../../types/index.js";
-import { useModifiers as de } from "../../../utils/create-modifiers.js";
-import { useI18n as ve } from "vue-i18n";
-import { useFormItemInput as ce } from "../nmorph-form/use-form-item-input.js";
-import { useVirtualList as fe } from "../../../hooks/use-virtual-list.js";
-import pe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import me from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-import he from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ge from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-import ye from "../../../assets/icons/chevron-down.svg.js";
-import He from "../../../assets/icons/loader.svg.js";
-const Pe = /* @__PURE__ */ ue({
+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({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -40,37 +40,37 @@ const Pe = /* @__PURE__ */ ue({
   emits: ["update:model-value"],
   setup(T, { expose: C, emit: P }) {
     C();
-    const { t: M } = ve(), l = T, $ = a(
-      () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
-    ), m = P, t = d(l.modelValue), r = d(l.open), v = a(() => l.disabled || l.loading), h = a(() => l.optionsWidth === "auto"), g = d(!0), { id: y, name: k, autocomplete: W, tabindex: U } = ce(l), H = (e) => {
+    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) => {
       if (!v.value) {
-        if (r.value = !1, typeof t.value == "string" && (!l.valueRequired && t.value === e ? t.value = "" : t.value = e, m("update:model-value", t.value)), Array.isArray(t.value)) {
-          const n = t.value.includes(e), w = t.value.length === 1 && n;
-          if (l.valueRequired && w) return;
-          n ? t.value = t.value.filter((ne) => ne !== e) : t.value = [...t.value, e];
+        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];
         }
-        m("update:model-value", t.value);
+        m("update:model-value", l.value);
       }
     }, p = d(!1), z = () => {
       p.value = !0;
     }, F = () => {
       p.value = !1;
     }, j = a(
-      () => de({
-        nmorph: [se[l.height]],
+      () => ve({
+        nmorph: [de[t.height]],
         "nmorph-select": [
-          `${l.disabled && "disabled"}`,
-          `${l.modelValue ? "on" : "off"}`,
-          `${l.loading && "loading"}`,
+          `${t.disabled && "disabled"}`,
+          `${t.modelValue ? "on" : "off"}`,
+          `${t.loading && "loading"}`,
           `${r.value && !v.value && "open"}`,
-          `${l.fill && "fill"}`,
+          `${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(() => ({
-      ...l.width !== void 0 && { "--base-width": b(l.width) }
+      ...t.width !== void 0 && { "--base-width": b(t.width) }
     })), G = () => {
       v.value || (r.value = !r.value);
     };
@@ -85,29 +85,29 @@ const Pe = /* @__PURE__ */ ue({
       r.value = !1;
     };
     f(
-      () => l.loading,
+      () => t.loading,
       (e) => {
         e && (r.value = !1);
       }
     );
-    const i = a(() => l.options.length > 0 ? l.options : l.optionsMap), x = d(null), I = d([]), N = a(() => l.options), c = a(() => l.virtual && N.value.length > 0), D = a(() => ({
+    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
-    })[l.height || "basic"]), A = a(() => l.virtualItemHeight || D.value), E = a(() => l.virtualOverscan), V = a(() => l.virtualDynamicHeight), s = fe(N, {
+    })[t.height || "basic"]), E = a(() => t.virtualItemHeight || A.value), V = a(() => t.virtualOverscan), _ = a(() => t.virtualDynamicHeight), s = pe(N, {
       enabled: c,
-      itemHeight: A,
-      overscan: E,
-      dynamic: V
+      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(l.virtualMaxHeight)), O = () => {
+    })), 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));
     }, o = a(
       () => i.value.length > 0 ? i.value.map((e) => e.value) : I.value
-    ), Z = a(() => c.value ? Array.isArray(t.value) ? t.value : t.value ? [t.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, "-")}`;
+    ), 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, "-")}`;
     f(u, (e) => {
       r.value && c.value && s.scrollToIndex(e);
     }), f(
@@ -118,22 +118,22 @@ const Pe = /* @__PURE__ */ ue({
       { immediate: !0 }
     ), f(r, async (e) => {
       if (e) {
-        if (await L(), O(), typeof t.value == "string") {
-          const n = o.value.indexOf(t.value);
+        if (await R(), O(), 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 L(), O(), document.addEventListener("click", q);
+      await R(), O(), document.addEventListener("click", q);
     }), ie(() => {
       document.removeEventListener("click", q);
     });
-    const le = a(() => typeof t.value == "string" ? t.value === "" ? $.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 }]);
-    R("select-selected-value", t), R("select-change-selected-value", H);
-    const _ = d(null), re = a(
-      () => h.value ? `${_.value?.clientWidth || 0}px` : void 0
-    ), B = { t: M, props: l, computedNoElementPlaceholder: $, emit: m, initialValue: t, 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: D, virtualItemHeight: A, virtualOverscan: E, virtualDynamicHeight: V, 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: _, optionsMinWidth: re, spaceHandler: () => {
+    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: () => {
       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);
@@ -151,21 +151,21 @@ const Pe = /* @__PURE__ */ ue({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return ge;
+      return ye;
     }, get NmorphIcon() {
-      return he;
+      return ge;
     }, get NmorphSelectOption() {
-      return me;
+      return he;
     }, get NmorphDropdown() {
-      return pe;
-    }, get NmorphIconLoader() {
-      return He;
+      return me;
+    }, get NmorphIconLoaderDots() {
+      return be;
     }, get NmorphIconChevronDown() {
-      return ye;
+      return He;
     } };
-    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
+    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
 });
 export {
-  Pe as default
+  ke as default
 };

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

@@ -1,10 +1,10 @@
 import './NmorphSelectOption.css';
-import { defineComponent as h, inject as i, computed as o } from "vue";
-import { NmorphComponentHeight as v } from "../../../../../types/index.js";
-import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
-import y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-import S from "../../../../../assets/icons/success.svg.js";
-const C = /* @__PURE__ */ h({
+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({
   __name: "NmorphSelectOption",
   props: {
     value: { type: String, required: !0 },
@@ -15,36 +15,39 @@ const C = /* @__PURE__ */ h({
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
-    height: { type: null, required: !1, default: "basic" },
+    height: { type: null, required: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
     tabindex: { type: Number, required: !1 }
   },
   emits: ["change-value"],
-  setup(n, { expose: s, emit: c }) {
-    s();
-    const r = i("select-selected-value"), t = i("select-change-selected-value"), e = n, l = c, d = () => {
-      e.disabled || (l("change-value", e.value), t && t(e.value));
-    }, a = o(() => typeof r?.value == "string" ? r.value === e.value : Array.isArray(r?.value) ? r.value.some((m) => m === e.value) : !1), p = o(
-      () => g({
-        nmorph: [v[e.height]],
+  setup(c, { expose: d, emit: p }) {
+    d();
+    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]],
         "nmorph-select-option": [
           `${e.disabled && "disabled"}`,
           `${e.label && "with-label"}`,
-          `${a.value && "checked"}`,
+          `${u.value && "checked"}`,
           `${e.focused && "focused"}`
         ]
       })
-    ), f = o(() => ({
+    ), m = t(() => ({
       ...e.hoverBackground !== void 0 && { "--hover-bg": e.hoverBackground },
       ...e.hoverColor !== void 0 && { "--hover-color": e.hoverColor }
-    })), u = { selectSelectedValue: r, selectChangeSelectedValue: t, props: e, emit: l, clickHandler: d, checked: a, modifiers: p, styles: f, get NmorphIcon() {
-      return y;
+    })), 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() {
-      return S;
+      return q;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });
 export {
-  C as default
+  I as default
 };

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,10 @@
 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 { 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 C = /* @__PURE__ */ q({
   __name: "NmorphSwitch",
   props: {
     modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
@@ -23,31 +23,31 @@ 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;
+    const e = s, { id: p, name: c, tabindex: h } = _(e), u = m, a = i(!1), g = () => {
+      a.value = !0;
     }, v = () => {
-      i.value = !1;
+      a.value = !1;
     }, b = n(
       () => V({
         "nmorph-switch": [
           `${e.disabled && "disabled"}`,
           `${r.value ? "on" : "off"}`,
           `${e.loading && "loading"}`,
-          `${i.value && "focus"}`
+          `${a.value && "focus"}`
         ]
       })
-    ), r = o(e.modelValue === e.activeValue), y = () => {
+    ), r = 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);
+    }, l = i(null);
     f({ inputDOMRef: l });
-    const a = (t) => typeof t == "number" ? `${t}px` : t, S = n(() => ({
-      ...e.width !== void 0 && { "--width": a(e.width) },
-      ...e.height !== void 0 && { "--height": a(e.height) },
-      ...e.offset !== void 0 && { "--offset": a(e.offset) },
-      ...e.thumbHeight !== void 0 && { "--thumb-height": a(e.thumbHeight) }
+    const o = (t) => typeof t == "number" ? `${t}px` : t, S = n(() => ({
+      ...e.width !== void 0 && { "--width": o(e.width) },
+      ...e.height !== void 0 && { "--height": o(e.height) },
+      ...e.offset !== void 0 && { "--offset": o(e.offset) },
+      ...e.thumbHeight !== void 0 && { "--thumb-height": o(e.thumbHeight) }
     }));
     N(
       () => e.modelValue,
@@ -55,14 +55,14 @@ const L = /* @__PURE__ */ q({
         r.value = t === 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: a, focusHandler: g, blurHandler: v, modifiers: b, initialValue: r, changeHandler: y, inputDOMRef: l, getCssSize: o, 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
+  C 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}