@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

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

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

package/dist/components/form/nmorph-radio/NmorphRadio.css

@@ -1 +1 @@
-.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;justify-content:center;align-items:center}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-radio .nmorph-radio__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;justify-content:center;align-items:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-tiny);line-height:var(--line-height-line)}.nmorph-radio.nmorph--extra-thin-component.nmorph-radio--button .nmorph-radio__fake{padding:var(--indentation-02)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-radio{--size: var(--height);--nmorph-selection-control-font-size: var(--font-size-small);--nmorph-selection-control-line-height: var(--line-height-regular);--nmorph-selection-control-inline-padding: var(--indentation-03);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio.nmorph{height:auto;min-height:var(--size)}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;justify-content:center;align-items:center;min-height:var(--size)}.nmorph-radio span{margin-top:2px}.nmorph-radio .nmorph-radio__input-wrapper{position:relative;width:var(--size);height:var(--size)}.nmorph-radio input{position:absolute;top:0;left:0;width:100%;height:100%}.nmorph-radio input:focus-visible{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio .nmorph-radio__fake span,.nmorph-radio .nmorph-radio__label{font-weight:400;font-size:var(--nmorph-selection-control-font-size);line-height:var(--nmorph-selection-control-line-height)}.nmorph-radio .nmorph-radio__fake-checked{position:absolute;top:50%;left:50%;width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%)}.nmorph-radio .nmorph-radio__label{margin-left:var(--indentation-02)}.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{position:relative;display:flex;justify-content:center;align-items:center;height:var(--size);padding:var(--nmorph-selection-control-inline-padding);white-space:nowrap;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph--extra-thin-component{--nmorph-selection-control-font-size: var(--font-size-tiny);--nmorph-selection-control-line-height: var(--line-height-line);--nmorph-selection-control-inline-padding: var(--indentation-02)}.nmorph-radio.nmorph--thin-component{--nmorph-selection-control-font-size: var(--font-size-extra-small)}.nmorph-radio.nmorph--basic-component{--nmorph-selection-control-font-size: var(--font-size-small)}.nmorph-radio.nmorph--thick-component{--nmorph-selection-control-font-size: var(--font-size-base)}.nmorph-radio.nmorph-radio--checked .nmorph-radio__fake{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-radio.nmorph-radio--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/form/nmorph-radio/NmorphRadio.vue2.js

@@ -25,7 +25,7 @@ const q = /* @__PURE__ */ h({
     }, d = l(() => o?.value === e.value || e.checked), i = l(() => e.height || a?.value || "thin"), f = l(
       () => g({
         nmorph: [v[i.value]],
-        "nmorph-radio": [`${e.disabled && "disabled"}`, `${d.value && "checked"}`, e.styleType]
+        "nmorph-radio": [e.disabled && "disabled", d.value && "checked", e.styleType]
       })
     ), u = m(null);
     p({ inputDOMRef: u });

package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.vue2.js

@@ -1,11 +1,12 @@
 import './NmorphRadioGroup.css';
-import { defineComponent as m, ref as c, watch as h, computed as d, provide as o } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import g from "../nmorph-radio/NmorphRadio.vue.js";
-const b = /* @__PURE__ */ m({
+import { defineComponent as h, ref as y, watch as g, computed as n, provide as a } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as v } from "../nmorph-form/use-form-item-input.js";
+import _ from "../nmorph-radio/NmorphRadio.vue.js";
+const x = /* @__PURE__ */ h({
   __name: "NmorphRadioGroup",
   props: {
-    modelValue: { type: String, required: !0, default: "" },
+    modelValue: { type: String, required: !1, default: "" },
     options: { type: Array, required: !1, default: () => [] },
     styleType: { type: null, required: !1, default: "button" },
     direction: { type: null, required: !1, default: "row" },
@@ -17,25 +18,26 @@ const b = /* @__PURE__ */ m({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(n, { expose: p, emit: s }) {
-    p();
-    const e = n, t = c(e.modelValue);
-    h(
-      () => e.modelValue,
-      (r) => {
-        t.value = r;
-      }
-    );
-    const a = s, i = (r) => {
-      t.value = r, a("update:model-value", t.value);
-    }, f = d(() => y({ "nmorph-radio-group": [e.styleType, e.direction] })), u = d(() => e.height);
-    o("radio-group-selected-value", t), o("change-radio-button-value-handler", i), o("radio-group-height", u);
-    const l = { props: e, initialValue: t, emit: a, changeHandler: i, modifiers: f, height: u, get NmorphRadio() {
-      return g;
+  setup(s, { expose: m, emit: f }) {
+    m();
+    const e = s, i = f, { modelValue: o, updateModelValue: l } = v(
+      e,
+      (r) => i("update:model-value", r),
+      ""
+    ), t = y(o.value);
+    g(o, (r) => {
+      t.value = r;
+    });
+    const u = (r) => {
+      t.value = r, l(t.value);
+    }, c = n(() => q({ "nmorph-radio-group": [e.styleType, e.direction] })), d = n(() => e.height);
+    a("radio-group-selected-value", t), a("change-radio-button-value-handler", u), a("radio-group-height", d);
+    const p = { props: e, emit: i, modelValue: o, updateModelValue: l, initialValue: t, changeHandler: u, modifiers: c, height: d, get NmorphRadio() {
+      return _;
     } };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  b as default
+  x as default
 };

package/dist/components/form/nmorph-select/NmorphSelect.css

@@ -1 +1 @@
-.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}
+.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);border-radius:var(--default-border-radius);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);border-radius:inherit;box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:inherit}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}

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 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({
   __name: "NmorphSelect",
   props: {
     noElementPlaceholder: { type: String, required: !1, default: "" },
@@ -38,112 +39,113 @@ const ke = /* @__PURE__ */ ue({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(T, { 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) => {
+  setup(P, { expose: T, emit: W }) {
+    T();
+    const { t: M } = me(), l = P, D = a(
+      () => l.noElementPlaceholder ? l.noElementPlaceholder : M("noElementPlaceholder")
+    ), A = W, { modelValue: p, updateModelValue: h } = he(
+      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) => {
       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];
+        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];
         }
-        m("update:model-value", l.value);
+        h(t.value);
       }
-    }, p = d(!1), z = () => {
-      p.value = !0;
-    }, F = () => {
-      p.value = !1;
+    }, m = d(!1), U = () => {
+      m.value = !0;
+    }, z = () => {
+      m.value = !1;
     }, j = a(
-      () => ve({
-        nmorph: [de[t.height]],
+      () => ce({
+        nmorph: [ve[l.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"}`
+          l.disabled && "disabled",
+          p.value ? "on" : "off",
+          l.loading && "loading",
+          r.value && !v.value && "open",
+          l.fill && "fill",
+          g.value && "options-auto-width",
+          y.value ? "selected-line-outset" : "selected-line-inset",
+          m.value && "focus"
         ]
       })
-    ), b = (e) => typeof e == "number" ? `${e}px` : e, Y = a(() => ({
-      ...t.width !== void 0 && { "--base-width": b(t.width) }
-    })), G = () => {
+    ), G = a(() => ({
+      ...l.width !== void 0 && { "--base-width": C(l.width) }
+    })), J = () => {
       v.value || (r.value = !r.value);
     };
-    f(
+    c(
       r,
       (e) => {
-        e && (g.value = !1);
+        e && (y.value = !1);
       },
       { immediate: !0 }
     );
     const q = () => {
       r.value = !1;
     };
-    f(
-      () => t.loading,
+    c(
+      () => l.loading,
       (e) => {
         e && (r.value = !1);
       }
+    ), c(
+      p,
+      (e) => {
+        t.value = e;
+      },
+      { deep: !0 }
     );
-    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, {
-      enabled: c,
+    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, {
+      enabled: f,
       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));
+    }), K = a(() => s.virtualItems.value), Q = s.spacerStyle, X = s.contentStyle, Y = a(() => C(l.virtualMaxHeight)), O = () => {
+      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) : 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, "-")}`;
-    f(u, (e) => {
-      r.value && c.value && s.scrollToIndex(e);
-    }), f(
+      () => 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, "-")}`;
+    c(u, (e) => {
+      r.value && f.value && s.scrollToIndex(e);
+    }), c(
       o,
       (e) => {
         u.value >= e.length && (u.value = Math.max(e.length - 1, 0));
       },
       { immediate: !0 }
-    ), f(r, async (e) => {
+    ), c(r, async (e) => {
       if (e) {
-        if (await R(), O(), typeof l.value == "string") {
-          const n = o.value.indexOf(l.value);
+        if (await R(), O(), typeof t.value == "string") {
+          const n = o.value.indexOf(t.value);
           n !== -1 && (u.value = n);
         }
-        s.refresh(), c.value && s.scrollToIndex(u.value);
+        s.refresh(), f.value && s.scrollToIndex(u.value);
       }
-    }), oe(async () => {
+    }), ie(async () => {
       await R(), O(), document.addEventListener("click", q);
-    }), ie(() => {
+    }), se(() => {
       document.removeEventListener("click", q);
     });
-    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 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(
-      () => 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: () => {
+      () => 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: () => {
       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 && S.value && b(S.value);
     }, setVirtualOptionRef: (e, n) => {
-      const w = e instanceof Element ? e : e?.$el;
-      s.measureElement(n, w);
+      s.measureElement(n, pe(e));
     }, escapeHandler: () => {
       r.value = !1;
     }, homeHandler: () => {
@@ -151,21 +153,21 @@ const ke = /* @__PURE__ */ ue({
     }, endHandler: () => {
       u.value = Math.max(o.value.length - 1, 0);
     }, get NmorphTagItem() {
-      return ye;
+      return Ie;
     }, get NmorphIcon() {
-      return ge;
+      return qe;
     }, get NmorphSelectOption() {
-      return he;
+      return be;
     }, get NmorphDropdown() {
-      return me;
+      return He;
     }, get NmorphIconLoaderDots() {
-      return be;
+      return Ne;
     }, get NmorphIconChevronDown() {
-      return He;
+      return xe;
     } };
     return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
   }
 });
 export {
-  ke as default
+  je 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(() => ({