@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

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

@@ -0,0 +1,139 @@
+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({
+  __name: "NmorphOTPInput",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    length: { type: Number, required: !1, default: 6 },
+    mode: { type: String, required: !1, default: "numeric" },
+    autofocus: { type: Boolean, required: !1, default: !1 },
+    autocapitalize: { type: String, required: !1, default: "none" },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    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 = "") => {
+      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) => {
+      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);
+    };
+    z(
+      [() => a.modelValue, () => a.mode, u],
+      () => {
+        const e = A(a.modelValue);
+        (e.join("") !== r.value.join("") || e.length !== r.value.length) && h(e);
+      },
+      { immediate: !0 }
+    );
+    const j = i(
+      () => ee({
+        nmorph: [te[a.height], `${c.value && "focused"}`],
+        "nmorph-otp-input": [`${a.disabled && "disabled"}`]
+      })
+    ), N = i(
+      () => 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);
+      });
+    }, _ = (e) => {
+      g(e), s.value[e]?.select?.(), n.value[e]?.select();
+    }, o = (e = 0) => {
+      D(() => {
+        const t = Math.min(Math.max(e, 0), u.value - 1);
+        g(t), s.value[t]?.focus?.(), n.value[t]?.focus(), _(t);
+      });
+    }, M = () => {
+      s.value.forEach((e, t) => {
+        e?.blur?.(), n.value[t]?.blur();
+      });
+    };
+    O({
+      inputDOMRefs: n,
+      focus: o,
+      blur: M
+    });
+    const f = (e, t = "") => {
+      const l = [...r.value];
+      l[e] = t, h(l, !0);
+    }, H = (e, t) => {
+      const l = v(e).slice(0, u.value - t);
+      if (!l.length) {
+        f(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) => {
+      H(e, t);
+    }, S = (e) => {
+      if (r.value[e]) {
+        f(e);
+        return;
+      }
+      e > 0 && (f(e - 1), o(e - 1));
+    }, B = (e, t) => {
+      if (e.key === "Backspace") {
+        S(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);
+    }, J = (e) => {
+      c.value || (c.value = !0, d("focus")), _(e);
+    }, Q = () => {
+      setTimeout(() => {
+        const e = document.activeElement;
+        !n.value.some((l) => l === e) && c.value && (c.value = !1, d("blur"));
+      });
+    }, U = (e) => p.value > 0 ? p.value + e : p.value;
+    z(
+      () => a.autofocus,
+      (e) => {
+        e && !a.disabled && o(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;
+  }
+});
+export {
+  ce as default
+};

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

@@ -0,0 +1 @@
+.nmorph-radio{--size: var(--height);display:inline-flex;align-items:center;cursor:pointer}.nmorph-radio .nmorph-radio__content{position:relative;display:flex;align-items:center;justify-content: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{border-radius:var(--border-radius-circular);width:100%;height:100%;position:absolute;top:0;left:0;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__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{width:50%;height:50%;background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular);position:absolute;top:50%;left:50%;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;align-items:center;justify-content:center;height:var(--size);padding:var(--indentation-03);white-space:nowrap;border-radius:var(--default-border-radius);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--extra-thin-component .nmorph-radio__fake span,.nmorph-radio.nmorph--extra-thin-component .nmorph-radio__label{font-size:var(--font-size-extra-small);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}

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

@@ -0,0 +1,94 @@
+import './NmorphRadio.css';
+import t from "./NmorphRadio.vue2.js";
+import { openBlock as o, createElementBlock as a, withModifiers as p, normalizeClass as c, createElementVNode as r, createCommentVNode as i, toDisplayString as d, renderSlot as l } from "vue";
+/* empty css                 */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  key: 0,
+  class: "nmorph-radio__content"
+}, h = { class: "nmorph-radio__input-wrapper" }, f = ["name", "value", "checked", "tabindex"], k = {
+  key: 0,
+  class: "nmorph-radio__fake-checked"
+}, b = {
+  key: 0,
+  class: "nmorph-radio__label"
+}, v = {
+  key: 1,
+  class: "nmorph-radio__content"
+}, y = ["disabled", "name", "value", "checked", "tabindex"], u = {
+  key: 0,
+  class: "nmorph-radio__fake"
+}, x = {
+  key: 1,
+  class: "nmorph-radio__fake"
+};
+function N(n, s, R, e, C, D) {
+  return o(), a(
+    "label",
+    {
+      class: c(e.modifiers),
+      onClick: p(e.changeHandler, ["prevent"])
+    },
+    [
+      e.props.styleType === "radio-style" ? (o(), a("div", m, [
+        r("div", h, [
+          r("input", {
+            ref: "inputDOMRef",
+            type: "radio",
+            name: e.props.label,
+            value: e.props.value,
+            checked: e.checked,
+            tabindex: e.props.tabindex,
+            class: "nmorph-native-input"
+          }, null, 8, f),
+          s[0] || (s[0] = r(
+            "div",
+            { class: "nmorph-radio__fake" },
+            null,
+            -1
+            /* HOISTED */
+          )),
+          e.checked ? (o(), a("div", k)) : i("v-if", !0)
+        ]),
+        e.props.label ? (o(), a(
+          "span",
+          b,
+          d(e.props.label),
+          1
+          /* TEXT */
+        )) : l(n.$slots, "label", { key: 1 })
+      ])) : i("v-if", !0),
+      e.props.styleType === "button" ? (o(), a("div", v, [
+        r("input", {
+          ref: "inputDOMRef",
+          type: "radio",
+          disabled: e.props.disabled,
+          name: e.props.label,
+          value: e.props.value,
+          checked: e.checked,
+          tabindex: e.props.tabindex,
+          class: "nmorph-native-input"
+        }, null, 8, y),
+        e.props.label ? (o(), a("div", u, [
+          r(
+            "span",
+            null,
+            d(e.props.label),
+            1
+            /* TEXT */
+          )
+        ])) : (o(), a("div", x, [
+          l(n.$slots, "label", {}, () => [
+            l(n.$slots, "default")
+          ])
+        ]))
+      ])) : i("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const E = /* @__PURE__ */ _(t, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio/NmorphRadio.vue"]]);
+export {
+  E as default
+};

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

@@ -0,0 +1,38 @@
+import './NmorphRadio.css';
+import { defineComponent as h, inject as r, computed as l, ref as m } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
+import { NmorphSelectionControlHeight as v } from "../../../types/index.js";
+const q = /* @__PURE__ */ h({
+  __name: "NmorphRadio",
+  props: {
+    value: { type: String, required: !1, default: "" },
+    styleType: { type: null, required: !1, default: "button" },
+    checked: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    label: { type: String, required: !1, default: "" },
+    tabindex: { type: Number, required: !1, default: 0 },
+    height: { type: null, required: !1 }
+  },
+  setup(s, { expose: p }) {
+    const o = r(
+      "radio-group-selected-value",
+      void 0
+    ), t = r(
+      "change-radio-button-value-handler",
+      void 0
+    ), a = r("radio-group-height", void 0), e = s, c = () => {
+      t && !e.disabled && t(e.value);
+    }, 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]
+      })
+    ), u = m(null);
+    p({ inputDOMRef: u });
+    const n = { groupSelectedValue: o, changeValue: t, groupHeight: a, props: e, changeHandler: c, checked: d, height: i, modifiers: f, inputDOMRef: u };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  q as default
+};

package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.css

@@ -0,0 +1 @@
+.nmorph-radio-group{display:inline-block}.nmorph-radio-group .nmorph-radio-group__wrapper{display:flex;align-items:center}.nmorph-radio-group .nmorph-radio-group__content{display:flex;flex-flow:row wrap;width:100%}.nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:var(--indentation-03)}.nmorph-radio-group.nmorph-radio-group--column .nmorph-radio-group__content{flex-direction:column;align-items:flex-start}.nmorph-radio-group.nmorph-radio-group--column .nmorph-radio:not(:last-child){margin-right:var(--indentation-00);margin-bottom:var(--indentation-03)}

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

@@ -0,0 +1,42 @@
+import './NmorphRadioGroup.css';
+import i from "./NmorphRadioGroup.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeClass as s, createElementVNode as l, Fragment as n, renderList as p, createBlock as m, renderSlot as c } from "vue";
+/* empty css                      */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-radio-group__wrapper" }, u = { class: "nmorph-radio-group__content" };
+function b(t, f, d, r, g, v) {
+  return o(), a(
+    "div",
+    {
+      class: s(r.modifiers)
+    },
+    [
+      l("div", _, [
+        l("div", u, [
+          (o(!0), a(
+            n,
+            null,
+            p(d.options, (e) => (o(), m(r.NmorphRadio, {
+              key: e.value,
+              label: e.label,
+              value: e.value,
+              disabled: e.disabled || r.props.disabled,
+              "style-type": r.props.styleType,
+              tabindex: e.tabindex,
+              height: e.height || r.props.height
+            }, null, 8, ["label", "value", "disabled", "style-type", "tabindex", "height"]))),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          c(t.$slots, "default")
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const B = /* @__PURE__ */ h(i, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue"]]);
+export {
+  B as default
+};

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

@@ -0,0 +1,41 @@
+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({
+  __name: "NmorphRadioGroup",
+  props: {
+    modelValue: { type: String, required: !0, default: "" },
+    options: { type: Array, required: !1, default: () => [] },
+    styleType: { type: null, required: !1, default: "button" },
+    direction: { type: null, required: !1, default: "row" },
+    height: { type: null, required: !1, default: "thin" },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    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;
+    } };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+});
+export {
+  b as default
+};

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

@@ -0,0 +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(--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-select .nmorph-select__selected-values-line{display:flex;align-items:center;justify-content:space-between;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{opacity:0;width:0;height:0;border:none;padding:0;position:absolute}.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--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{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-select.nmorph-select--selected-line-outset .nmorph-select__content{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-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.vue.js

@@ -0,0 +1,157 @@
+import './NmorphSelect.css';
+import p from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as v, createElementVNode as i, withKeys as t, Fragment as a, renderList as d, withModifiers as w, toDisplayString as h, createBlock as l, mergeProps as m, createVNode as s, withCtx as c, renderSlot as k, createCommentVNode as g } from "vue";
+/* empty css                  */
+import y from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, b = ["id", "name", "autocomplete", "tabindex", "disabled"], x = ["value"], O = {
+  key: 0,
+  class: "nmorph-select__selected-value"
+}, D = {
+  key: 1,
+  class: "nmorph-select__selected-value"
+}, H = {
+  key: 2,
+  class: "nmorph-select__selected-value"
+}, u = {
+  ref: "optionsDOMRef",
+  class: "nmorph-select__options"
+};
+function C(_, I, f, e, S, M) {
+  return o(), r(
+    "div",
+    {
+      class: v(e.modifiers)
+    },
+    [
+      i("div", N, [
+        i("select", {
+          id: e.id,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
+          disabled: e.disabledInput,
+          onFocus: e.focusHandler,
+          onBlur: e.blurHandler,
+          onKeydown: [
+            t(e.spaceHandler, ["space"]),
+            t(e.arrowDownHandler, ["arrow-down"]),
+            t(e.arrowUpHandler, ["arrow-up"]),
+            t(e.enterHandler, ["enter"])
+          ]
+        }, [
+          (o(!0), r(
+            a,
+            null,
+            d(e.domOptions, (n) => (o(), r("option", {
+              key: n,
+              value: n
+            }, null, 8, x))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ], 40, b),
+        i(
+          "div",
+          {
+            ref: "nmorphSelectDOMRef",
+            class: "nmorph-select__selected-values-line",
+            onClick: w(e.clickHandler, ["stop"])
+          },
+          [
+            typeof e.initialValue == "string" ? (o(), r(
+              "div",
+              O,
+              h(e.selectedValueTitle),
+              1
+              /* TEXT */
+            )) : e.initialValue.length === 0 ? (o(), r(
+              "div",
+              D,
+              h(e.computedNoElementPlaceholder),
+              1
+              /* TEXT */
+            )) : (o(), r("div", H, [
+              (o(!0), r(
+                a,
+                null,
+                d(e.tags, (n) => (o(), l(e.NmorphTagItem, m({
+                  key: n.value,
+                  ref_for: !0
+                }, n, {
+                  transparent: "",
+                  removable: e.tags.length > 1 || !e.props.valueRequired,
+                  height: "thin",
+                  onClose: e.changeHandler
+                }), null, 16, ["removable"]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])),
+            s(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: c(() => [
+                e.props.loading ? (o(), l(e.NmorphIconLoader, { key: 0 })) : (o(), l(e.NmorphIconChevronDown, { key: 1 }))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ]),
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), l(e.NmorphDropdown, {
+        key: 0,
+        open: e.open && !e.props.loading,
+        "relative-element": e.nmorphSelectDOMRef,
+        "fill-width": !e.autoOptionsWidth,
+        width: e.autoOptionsWidth ? "max-content" : void 0,
+        "min-width": e.optionsMinWidth,
+        "max-width": "calc(100vw - 16px)",
+        "z-index": e.props.zIndex,
+        onOnOutsideClick: e.closeHandler
+      }, {
+        default: c(() => [
+          i(
+            "div",
+            u,
+            [
+              e.props.loading ? (o(), l(e.NmorphIcon, {
+                key: 0,
+                class: "nmorph-select__chevron",
+                size: "medium"
+              }, {
+                default: c(() => [
+                  s(e.NmorphIconChevronDown)
+                ]),
+                _: 1
+                /* STABLE */
+              })) : (o(!0), r(
+                a,
+                { key: 1 },
+                d(f.options, (n) => (o(), l(e.NmorphSelectOption, m({
+                  key: n.value,
+                  ref_for: !0
+                }, n, {
+                  height: e.props.height
+                }), null, 16, ["height"]))),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              k(_.$slots, "default")
+            ],
+            512
+            /* NEED_PATCH */
+          )
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : g("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const E = /* @__PURE__ */ y(p, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+export {
+  E as default
+};

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

@@ -0,0 +1,128 @@
+import './NmorphSelect.css';
+import { defineComponent as U, computed as n, ref as o, watch as N, onMounted as F, nextTick as j, onUnmounted as z, provide as E } from "vue";
+import { NmorphComponentHeight as G } from "../../../types/index.js";
+import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { useI18n as K } from "vue-i18n";
+import { useFormItemInput as Q } from "../nmorph-form/use-form-item-input.js";
+import X from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import Y from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import Z from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ee from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import te from "../../../assets/icons/chevron-down.svg.js";
+import le from "../../../assets/icons/loader.svg.js";
+const ye = /* @__PURE__ */ U({
+  __name: "NmorphSelect",
+  props: {
+    noElementPlaceholder: { type: String, required: !1, default: "" },
+    valueRequired: { type: Boolean, required: !1, default: !1 },
+    options: { type: Array, required: !1, default: () => [] },
+    optionsMap: { type: Array, required: !1, default: () => [] },
+    modelValue: { type: [String, Array], required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    open: { type: Boolean, required: !1, default: !1 },
+    fill: { type: Boolean, required: !1, default: !1 },
+    optionsWidth: { type: String, required: !1, default: "truncate" },
+    zIndex: { type: Number, required: !1 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(M, { expose: _, emit: $ }) {
+    _();
+    const { t: H } = K(), t = M, I = n(
+      () => t.noElementPlaceholder ? t.noElementPlaceholder : H("noElementPlaceholder")
+    ), v = $, e = o(t.modelValue), r = o(t.open), u = n(() => t.disabled || t.loading), m = n(() => t.optionsWidth === "auto"), c = o(null), w = o(null), h = o(!0), { id: V, name: D, autocomplete: O, tabindex: L } = Q(t), g = (l) => {
+      if (!u.value) {
+        if (r.value = !1, typeof e.value == "string" && (!t.valueRequired && e.value === l ? e.value = "" : e.value = l, v("update:model-value", e.value)), Array.isArray(e.value)) {
+          const a = e.value.includes(l), A = e.value.length === 1 && a;
+          if (t.valueRequired && A) return;
+          a ? e.value = e.value.filter((b) => b !== l) : e.value = [...e.value, l];
+        }
+        v("update:model-value", e.value);
+      }
+    }, p = o(!1), P = () => {
+      p.value = !0;
+    }, B = () => {
+      p.value = !1;
+    }, R = n(
+      () => J({
+        nmorph: [G[t.height]],
+        "nmorph-select": [
+          `${t.disabled && "disabled"}`,
+          `${t.modelValue ? "on" : "off"}`,
+          `${t.loading && "loading"}`,
+          `${r.value && !u.value && "open"}`,
+          `${t.fill && "fill"}`,
+          `${m.value && "options-auto-width"}`,
+          `${h.value ? "selected-line-outset" : "selected-line-inset"}`,
+          `${p.value && "focus"}`
+        ]
+      })
+    ), W = () => {
+      u.value || (r.value = !r.value);
+    };
+    N(
+      r,
+      (l) => {
+        l && (h.value = !1);
+      },
+      { immediate: !0 }
+    );
+    const y = () => {
+      r.value = !1;
+    };
+    N(
+      () => t.loading,
+      (l) => {
+        l && (r.value = !1);
+      }
+    );
+    const f = o(), i = o([]), s = o(0), d = o("");
+    N(s, (l) => {
+      d.value = i.value[l], f.value.forEach((a) => {
+        const b = a.getAttribute("value") === d.value ? "add" : "remove";
+        a.classList[b]("nmorph-select-option--focused");
+      });
+    }), F(async () => {
+      await j(), c.value && (f.value = c.value.querySelectorAll(".nmorph-select-option"), f.value.forEach((l) => {
+        const a = l.getAttribute("value");
+        a && i.value.push(a);
+      }), d.value = i.value[s.value], w.value = `${c.value.clientHeight}px`, document.addEventListener("click", y));
+    }), z(() => {
+      document.removeEventListener("click", y);
+    });
+    const k = n(() => typeof e.value == "string" ? e.value === "" ? I.value : t.options.find((l) => l.value === e.value)?.label : t.options.find((l) => l.value === e.value)?.label), q = n(() => t.options.length > 0 ? t.options : t.optionsMap), C = n(() => q.value.length > 0 ? q.value.filter((a) => e.value.includes(a.value)).map((a) => ({ text: a.label, value: a.value })) : Array.isArray(e.value) ? e.value.map((a) => ({ text: a, value: a })) : [{ text: e.value, value: e.value }]);
+    E("select-selected-value", e), E("select-change-selected-value", g);
+    const S = o(null), T = n(
+      () => m.value ? `${S.value?.clientWidth || 0}px` : void 0
+    ), x = { t: H, props: t, computedNoElementPlaceholder: I, emit: v, initialValue: e, open: r, disabledInput: u, autoOptionsWidth: m, optionsDOMRef: c, optionsHeight: w, selectedLineOutset: h, id: V, name: D, autocomplete: O, tabindex: L, changeHandler: g, focus: p, focusHandler: P, blurHandler: B, modifiers: R, clickHandler: W, closeHandler: y, nodeOptions: f, domOptions: i, currentIndex: s, currentFocusedEl: d, selectedValueTitle: k, optionsMap: q, tags: C, nmorphSelectDOMRef: S, optionsMinWidth: T, spaceHandler: () => {
+      u.value || (r.value = !r.value);
+    }, arrowDownHandler: () => {
+      u.value || (s.value = (s.value + 1) % i.value.length);
+    }, arrowUpHandler: () => {
+      u.value || (s.value = (s.value - 1 + i.value.length) % i.value.length);
+    }, enterHandler: () => {
+      r.value && g(d.value);
+    }, get NmorphTagItem() {
+      return ee;
+    }, get NmorphIcon() {
+      return Z;
+    }, get NmorphSelectOption() {
+      return Y;
+    }, get NmorphDropdown() {
+      return X;
+    }, get NmorphIconLoader() {
+      return le;
+    }, get NmorphIconChevronDown() {
+      return te;
+    } };
+    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
+  }
+});
+export {
+  ye as default
+};

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.css

@@ -0,0 +1 @@
+.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;align-items:center;justify-content:space-between;gap:var(--indentation-01);box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}