@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

@@ -1,304 +1,222 @@
 import './NmorphSelect.css';
-import { defineComponent as Be, computed as n, ref as m, watch as x, nextTick as Z, onMounted as Ce, onUnmounted as Re, provide as $, toRef as ze, openBlock as i, createElementBlock as d, normalizeStyle as I, normalizeClass as Ne, createElementVNode as b, withKeys as h, withModifiers as f, unref as u, Fragment as H, renderList as O, toDisplayString as ee, createBlock as y, mergeProps as L, createVNode as te, withCtx as P, renderSlot as $e, createCommentVNode as Le } from "vue";
-import { useModifiers as Pe } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as qe, getNmorphOptionHeight as Fe, toCssSize as We, resolveDomElement as Ke } from "../../../utils/common.js";
-import { useVirtualList as Te } from "../../../hooks/use-virtual-list.js";
-import { useI18n as Ue } from "vue-i18n";
-import { useFormItemModel as je, useFormItemInput as Ge } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as Je } from "../../../types/common.types.js";
-import Qe from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
-/* empty css                                                                       */
-import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import Xe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-/* empty css                                                   */
-import ae from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
-/* empty css                                                        */
-import Ye from "../../../assets/icons/loader.svg.js";
-import ne from "../../../assets/icons/chevron-down.svg.js";
-const Ze = { class: "nmorph-select__content" }, et = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], tt = ["value"], lt = {
+import w from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as l, normalizeStyle as c, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as n, Fragment as d, renderList as h, toDisplayString as _, createBlock as i, mergeProps as m, createVNode as f, withCtx as s, renderSlot as b, createCommentVNode as k } from "vue";
+/* empty css                  */
+import H from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], I = ["value"], O = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, at = {
+}, u = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, nt = {
+}, D = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, rt = ["id"], Ht = /* @__PURE__ */ Be({
-  __name: "NmorphSelect",
-  props: {
-    noElementPlaceholder: { default: "" },
-    valueRequired: { type: Boolean, default: !1 },
-    options: { default: () => [] },
-    optionsMap: { default: () => [] },
-    modelValue: { default: "" },
-    multiple: { default: void 0 },
-    nullable: { type: Boolean, default: !1 },
-    loading: { type: Boolean, default: !1 },
-    open: { type: Boolean, default: !1 },
-    fill: { type: Boolean, default: !1 },
-    optionsWidth: { default: "truncate" },
-    zIndex: { default: void 0 },
-    virtual: { type: Boolean, default: !1 },
-    virtualItemHeight: { default: 0 },
-    virtualMaxHeight: { default: 240 },
-    virtualOverscan: { default: 5 },
-    virtualDynamicHeight: { type: Boolean, default: !1 },
-    width: { default: void 0 },
-    id: {},
-    name: {},
-    autocomplete: {},
-    height: { default: "basic" },
-    disabled: { type: Boolean, default: !1 },
-    tabindex: {}
-  },
-  emits: ["update:model-value"],
-  setup(q, { emit: re }) {
-    const { t: oe } = Ue(), t = q, S = n(
-      () => t.noElementPlaceholder ? t.noElementPlaceholder : oe("noElementPlaceholder")
-    ), ue = re, { modelValue: k, updateModelValue: F } = je(
-      t,
-      (e) => ue("update:model-value", e),
-      ""
-    ), V = () => t.nullable ? null : "", W = n(() => t.multiple ?? Array.isArray(k.value)), K = (e) => W.value ? Array.isArray(e) ? e : e ? [e] : [] : Array.isArray(e) ? e[0] ?? V() : e ?? V(), l = m(K(k.value)), r = m(t.open), p = n(() => t.disabled || t.loading), A = n(() => t.optionsWidth === "auto"), T = m(!0), { id: E, name: U, autocomplete: ie, tabindex: se } = Ge(t), D = (e) => {
-      if (p.value) return;
-      if (r.value = !1, !W.value) {
-        !t.valueRequired && l.value === e ? l.value = V() : l.value = e, F(l.value);
-        return;
-      }
-      const o = Array.isArray(l.value) ? l.value : [], a = o.includes(e), N = o.length === 1 && a;
-      t.valueRequired && N || (a ? l.value = o.filter((De) => De !== e) : l.value = [...o, e], F(l.value));
-    }, B = m(!1), de = () => {
-      B.value = !0;
-    }, ve = () => {
-      B.value = !1;
-    }, ce = n(
-      () => Pe({
-        nmorph: [Je[t.height]],
-        "nmorph-select": [
-          t.disabled && "disabled",
-          k.value ? "on" : "off",
-          t.loading && "loading",
-          r.value && !p.value && "open",
-          t.fill && "fill",
-          A.value && "options-auto-width",
-          T.value ? "selected-line-outset" : "selected-line-inset",
-          B.value && "focus"
-        ]
-      })
-    ), me = n(
-      () => qe({
-        "--base-width": t.width
-      })
-    ), fe = () => {
-      p.value || (r.value = !r.value);
-    };
-    x(
-      r,
-      (e) => {
-        e && (T.value = !1);
-      },
-      { immediate: !0 }
-    );
-    const C = () => {
-      r.value = !1;
-    };
-    x(
-      () => t.loading,
-      (e) => {
-        e && (r.value = !1);
-      }
-    ), x(
-      k,
-      (e) => {
-        l.value = K(e);
-      },
-      { deep: !0 }
-    );
-    const g = n(() => t.options.length > 0 ? t.options : t.optionsMap), R = m(null), j = m([]), G = n(() => t.options), w = n(() => t.virtual && G.value.length > 0), pe = n(() => t.virtualItemHeight || Fe(t.height)), he = n(() => t.virtualOverscan), ye = n(() => t.virtualDynamicHeight), v = Te(G, {
-      enabled: w,
-      itemHeight: pe,
-      overscan: he,
-      dynamic: ye
-    }), ge = n(() => v.virtualItems.value), _e = v.spacerStyle, xe = v.contentStyle, be = n(() => We(t.virtualMaxHeight)), J = () => {
-      g.value.length > 0 || !R.value || (j.value = Array.from(R.value.querySelectorAll(".nmorph-select-option")).map((e) => e.getAttribute("value")).filter((e) => !!e));
-    }, c = n(
-      () => g.value.length > 0 ? g.value.map((e) => e.value) : j.value
-    ), we = n(() => w.value ? Array.isArray(l.value) ? l.value : l.value ? [l.value] : [] : c.value), s = m(0), _ = n(() => c.value[s.value] || ""), Q = n(() => `${E.value}-listbox`), z = (e) => `${E.value}-option-${e.replace(/\s+/g, "-")}`;
-    x(s, (e) => {
-      r.value && w.value && v.scrollToIndex(e);
-    }), x(
-      c,
-      (e) => {
-        s.value >= e.length && (s.value = Math.max(e.length - 1, 0));
-      },
-      { immediate: !0 }
-    ), x(r, async (e) => {
-      if (e) {
-        if (await Z(), J(), !Array.isArray(l.value) && l.value) {
-          const o = c.value.indexOf(l.value);
-          o !== -1 && (s.value = o);
-        }
-        v.refresh(), w.value && v.scrollToIndex(s.value);
-      }
-    }), Ce(async () => {
-      await Z(), J(), document.addEventListener("click", C);
-    }), Re(() => {
-      document.removeEventListener("click", C);
-    });
-    const He = n(() => Array.isArray(l.value) ? S.value : l.value ? g.value.find((e) => e.value === l.value)?.label : S.value), X = n(() => g.value.length > 0 ? g.value.filter((o) => Array.isArray(l.value) && l.value.includes(o.value)).map((o) => ({ text: o.label, value: o.value })) : Array.isArray(l.value) ? l.value.map((o) => ({ text: o, value: o })) : l.value ? [{ text: l.value, value: l.value }] : []);
-    $("select-selected-value", l), $("select-change-selected-value", D), $("select-height", ze(t, "height"));
-    const M = m(null), ke = n(
-      () => A.value ? `${M.value?.clientWidth || 0}px` : void 0
-    ), Ae = () => {
-      p.value || (r.value = !r.value);
-    }, Me = () => {
-      p.value || c.value.length !== 0 && (r.value || (r.value = !0), s.value = (s.value + 1) % c.value.length);
-    }, Ie = () => {
-      p.value || c.value.length !== 0 && (r.value || (r.value = !0), s.value = (s.value - 1 + c.value.length) % c.value.length);
-    }, Oe = () => {
-      r.value && _.value && D(_.value);
-    }, Se = (e, o) => {
-      v.measureElement(o, Ke(e));
-    }, Y = () => {
-      r.value = !1;
-    }, Ve = () => {
-      s.value = 0;
-    }, Ee = () => {
-      s.value = Math.max(c.value.length - 1, 0);
-    };
-    return (e, o) => (i(), d("div", {
-      class: Ne(ce.value),
-      style: I(me.value)
-    }, [
-      b("div", Ze, [
-        b("select", {
-          id: u(E),
-          name: u(U),
-          autocomplete: u(ie),
-          tabindex: u(se),
-          disabled: p.value,
+}, C = ["id"];
+function E(y, v, p, e, M, R) {
+  return o(), l(
+    "div",
+    {
+      class: x(e.modifiers),
+      style: c(e.styles)
+    },
+    [
+      t("div", N, [
+        t("select", {
+          id: e.id,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
+          disabled: e.disabledInput,
           role: "combobox",
-          "aria-expanded": r.value,
-          "aria-controls": Q.value,
-          "aria-activedescendant": r.value && _.value ? z(_.value) : void 0,
-          onFocus: de,
-          onBlur: ve,
+          "aria-expanded": e.open,
+          "aria-controls": e.listboxId,
+          "aria-activedescendant": e.open && e.currentFocusedEl ? e.getOptionId(e.currentFocusedEl) : void 0,
+          onFocus: e.focusHandler,
+          onBlur: e.blurHandler,
           onKeydown: [
-            h(f(Ae, ["prevent"]), ["space"]),
-            h(f(Me, ["prevent"]), ["arrow-down"]),
-            h(f(Ie, ["prevent"]), ["arrow-up"]),
-            h(f(Oe, ["prevent"]), ["enter"]),
-            h(f(Y, ["prevent"]), ["escape"]),
-            h(f(Ve, ["prevent"]), ["home"]),
-            h(f(Ee, ["prevent"]), ["end"])
+            a(n(e.spaceHandler, ["prevent"]), ["space"]),
+            a(n(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
+            a(n(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
+            a(n(e.enterHandler, ["prevent"]), ["enter"]),
+            a(n(e.escapeHandler, ["prevent"]), ["escape"]),
+            a(n(e.homeHandler, ["prevent"]), ["home"]),
+            a(n(e.endHandler, ["prevent"]), ["end"])
           ]
         }, [
-          (i(!0), d(H, null, O(we.value, (a) => (i(), d("option", {
-            key: a,
-            value: a
-          }, null, 8, tt))), 128))
-        ], 40, et),
-        b("div", {
-          ref_key: "nmorphSelectDOMRef",
-          ref: M,
-          class: "nmorph-select__selected-values-line",
-          "aria-hidden": "true",
-          onClick: f(fe, ["stop"])
-        }, [
-          Array.isArray(l.value) ? l.value.length === 0 ? (i(), d("div", at, ee(S.value), 1)) : (i(), d("div", nt, [
-            (i(!0), d(H, null, O(X.value, (a) => (i(), y(u(Qe), L({
-              key: a.value
-            }, { ref_for: !0 }, a, {
-              transparent: "",
-              removable: X.value.length > 1 || !t.valueRequired,
-              height: "thin",
-              onClose: D
-            }), null, 16, ["removable"]))), 128))
-          ])) : (i(), d("div", lt, ee(He.value), 1)),
-          te(u(le), { class: "nmorph-select__chevron" }, {
-            default: P(() => [
-              t.loading ? (i(), y(u(Ye), { key: 0 })) : (i(), y(u(ne), { key: 1 }))
-            ]),
-            _: 1
-          })
-        ], 512)
+          (o(!0), l(
+            d,
+            null,
+            h(e.nativeOptions, (r) => (o(), l("option", {
+              key: r,
+              value: r
+            }, null, 8, I))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ], 40, S),
+        t(
+          "div",
+          {
+            ref: "nmorphSelectDOMRef",
+            class: "nmorph-select__selected-values-line",
+            "aria-hidden": "true",
+            onClick: n(e.clickHandler, ["stop"])
+          },
+          [
+            Array.isArray(e.initialValue) ? e.initialValue.length === 0 ? (o(), l(
+              "div",
+              u,
+              _(e.computedNoElementPlaceholder),
+              1
+              /* TEXT */
+            )) : (o(), l("div", D, [
+              (o(!0), l(
+                d,
+                null,
+                h(e.tags, (r) => (o(), i(e.NmorphTagItem, m({
+                  key: r.value
+                }, { ref_for: !0 }, r, {
+                  transparent: "",
+                  removable: e.tags.length > 1 || !e.props.valueRequired,
+                  height: "thin",
+                  onClose: e.changeHandler
+                }), null, 16, ["removable"]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : (o(), l(
+              "div",
+              O,
+              _(e.selectedValueTitle),
+              1
+              /* TEXT */
+            )),
+            f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: s(() => [
+                e.props.loading ? (o(), i(e.NmorphIconLoaderDots, { key: 0 })) : (o(), i(e.NmorphIconChevronDown, { key: 1 }))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          512
+          /* NEED_PATCH */
+        )
       ]),
-      M.value && !t.disabled ? (i(), y(u(Xe), {
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), i(e.NmorphDropdown, {
         key: 0,
-        open: r.value && !t.loading,
-        "relative-element": M.value,
-        "fill-width": !A.value,
-        width: A.value ? "max-content" : void 0,
-        "min-width": ke.value,
+        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": t.zIndex,
-        "aria-label": u(U),
-        onOnOutsideClick: C,
-        onOnEscapeKeydown: Y
+        "z-index": e.props.zIndex,
+        "aria-label": e.name,
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.escapeHandler
       }, {
-        default: P(() => [
-          b("div", {
-            id: Q.value,
-            ref_key: "optionsDOMRef",
-            ref: R,
+        default: s(() => [
+          t("div", {
+            id: e.listboxId,
+            ref: "optionsDOMRef",
             class: "nmorph-select__options",
             role: "listbox"
           }, [
-            t.loading ? (i(), y(u(le), {
+            e.props.loading ? (o(), i(e.NmorphIcon, {
               key: 0,
               class: "nmorph-select__chevron",
               size: "medium"
             }, {
-              default: P(() => [
-                te(u(ne))
+              default: s(() => [
+                f(e.NmorphIconChevronDown)
               ]),
               _: 1
-            })) : w.value ? (i(), d("div", {
-              key: 1,
-              ref: u(v).containerRef,
-              class: "nmorph-select__virtual-list",
-              style: I({ maxHeight: be.value }),
-              onScroll: o[0] || (o[0] = //@ts-ignore
-              (...a) => u(v).scrollHandler && u(v).scrollHandler(...a))
-            }, [
-              b("div", {
-                class: "nmorph-select__virtual-spacer",
-                style: I(u(_e))
-              }, [
-                b("div", {
-                  class: "nmorph-select__virtual-content",
-                  style: I(u(xe))
-                }, [
-                  (i(!0), d(H, null, O(ge.value, (a) => (i(), y(u(ae), L({
-                    id: z(a.item.value),
-                    ref_for: !0,
-                    ref: (N) => Se(N, a.index),
-                    key: a.index
-                  }, { ref_for: !0 }, a.item, {
-                    focused: a.item.value === _.value,
-                    height: t.height
-                  }), null, 16, ["id", "focused", "height"]))), 128))
-                ], 4)
-              ], 4)
-            ], 36)) : (i(), d(H, { key: 2 }, [
-              (i(!0), d(H, null, O(q.options, (a) => (i(), y(u(ae), L({
-                id: z(a.value),
-                key: a.value
-              }, { ref_for: !0 }, a, {
-                focused: a.value === _.value,
-                height: t.height
-              }), null, 16, ["id", "focused", "height"]))), 128)),
-              $e(e.$slots, "default")
-            ], 64))
-          ], 8, rt)
+              /* STABLE */
+            })) : e.virtualEnabled ? (o(), l(
+              "div",
+              {
+                key: 1,
+                ref: e.virtualList.containerRef,
+                class: "nmorph-select__virtual-list",
+                style: c({ maxHeight: e.virtualMaxHeight }),
+                onScroll: v[0] || (v[0] = (...r) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...r))
+              },
+              [
+                t(
+                  "div",
+                  {
+                    class: "nmorph-select__virtual-spacer",
+                    style: c(e.virtualSpacerStyle)
+                  },
+                  [
+                    t(
+                      "div",
+                      {
+                        class: "nmorph-select__virtual-content",
+                        style: c(e.virtualContentStyle)
+                      },
+                      [
+                        (o(!0), l(
+                          d,
+                          null,
+                          h(e.virtualOptions, (r) => (o(), i(e.NmorphSelectOption, m({
+                            id: e.getOptionId(r.item.value),
+                            ref_for: !0,
+                            ref: (g) => e.setVirtualOptionRef(g, r.index),
+                            key: r.index
+                          }, { ref_for: !0 }, r.item, {
+                            focused: r.item.value === e.currentFocusedEl,
+                            height: e.props.height
+                          }), null, 16, ["id", "focused", "height"]))),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ],
+                      4
+                      /* STYLE */
+                    )
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              36
+              /* STYLE, NEED_HYDRATION */
+            )) : (o(), l(
+              d,
+              { key: 2 },
+              [
+                (o(!0), l(
+                  d,
+                  null,
+                  h(p.options, (r) => (o(), i(e.NmorphSelectOption, m({
+                    id: e.getOptionId(r.value),
+                    key: r.value
+                  }, { ref_for: !0 }, r, {
+                    focused: r.value === e.currentFocusedEl,
+                    height: e.props.height
+                  }), null, 16, ["id", "focused", "height"]))),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                b(y.$slots, "default")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ], 8, C)
         ]),
         _: 3
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : Le("", !0)
-    ], 6));
-  }
-});
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
-  Ht as default
+  B as default
 };