@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js

@@ -1,221 +1,169 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as ue, ref as f, computed as o, watch as h, nextTick as ie, openBlock as c, createElementBlock as m, normalizeStyle as g, normalizeClass as k, createElementVNode as x, createVNode as V, unref as s, createBlock as se, withCtx as T, renderSlot as D, Fragment as F, renderList as R, createTextVNode as U, toDisplayString as K, createCommentVNode as ce } from "vue";
-import { useModifiers as Z } from "../../../utils/create-modifiers.js";
-import { getNmorphOptionHeight as de, toCssSize as me, resolveDomElement as pe } from "../../../utils/common.js";
-import { useZIndex as ve } from "../../../hooks/use-z-index.js";
-import { useVirtualList as fe } from "../../../hooks/use-virtual-list.js";
-import { useFormItemModel as he } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentHeight as _e } from "../../../types/common.types.js";
-import ye from "../nmorph-text-input/NmorphTextInput.vue.js";
-/* empty css                                        */
-import ge from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-/* empty css                                                   */
-import ke from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import xe from "../../../assets/icons/loader.svg.js";
-const He = { class: "nmorph-autocomplete__input-content" }, be = {
+import v from "./NmorphAutocomplete.vue2.js";
+import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as d, createVNode as m, createBlock as y, withCtx as p, renderSlot as s, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
+/* empty css                        */
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const g = { class: "nmorph-autocomplete__input-content" }, b = {
+  ref: "nmorphAutocompleteDOMRef",
+  class: "nmorph-autocomplete__input"
+}, H = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, Ce = ["id"], we = ["id", "aria-selected", "onClick"], Ve = ["id"], De = ["id", "aria-selected", "onClick"], Ke = /* @__PURE__ */ ue({
-  __name: "NmorphAutocomplete",
-  props: {
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    clearable: { type: Boolean, default: !0 },
-    list: { default: () => [] },
-    actionCallback: { type: Function, default: void 0 },
-    zIndex: { default: void 0 },
-    virtual: { type: Boolean, default: !1 },
-    virtualItemHeight: { default: void 0 },
-    virtualMaxHeight: { default: 240 },
-    virtualOverscan: { default: 5 },
-    virtualDynamicHeight: { type: Boolean, default: !1 },
-    id: {},
-    name: {},
-    autocomplete: {},
-    height: { default: "basic" },
-    disabled: { type: Boolean, default: !1 },
-    tabindex: {}
-  },
-  emits: ["update:model-value", "select"],
-  setup(j, { emit: q }) {
-    const t = j, I = q, { modelValue: O, updateModelValue: S } = he(
-      t,
-      (e) => I("update:model-value", e),
-      ""
-    ), u = f(O.value), G = o(
-      () => Z({
-        "nmorph-autocomplete": [a.value && "open"]
-      })
-    ), p = f(!1), $ = o({
-      get: () => u.value,
-      set: (e) => {
-        p.value = e === "", u.value = e, a.value = !p.value && r.value.length > 0, n.value = 0, S(u.value);
-      }
-    }), a = f(!1), H = f(null), b = () => {
-      p.value = !0, a.value = !1;
-    }, r = o(() => t.list.filter((e) => Object.keys(e).some((d) => String(e[d]).toLowerCase().includes(u.value.toLowerCase())))), C = o(() => t.virtual && r.value.length > 0), z = o(() => t.virtualItemHeight || de(t.height)), J = o(() => t.virtualOverscan), M = o(() => t.virtualDynamicHeight), i = fe(r, {
-      enabled: C,
-      itemHeight: z,
-      overscan: J,
-      dynamic: M
-    }), P = o(() => i.virtualItems.value), Q = i.spacerStyle, W = i.contentStyle, X = o(() => me(t.virtualMaxHeight)), n = f(0), N = o(() => r.value[n.value]), _ = o(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), w = (e) => `${_.value}-option-${e}`;
-    h(O, (e) => {
-      e !== u.value && (u.value = e);
-    }), h(r, async (e) => {
-      a.value = !p.value && u.value !== "" && e.length > 0, n.value = 0, await ie(), i.scrollToIndex(0), i.refresh();
-    });
-    const B = (e) => {
-      I("select", e), u.value = e.value, S(u.value), setTimeout(() => {
-        p.value = !0, a.value = !1;
-      });
-    }, L = (e) => {
-      B(e);
-    }, Y = () => {
-      p.value = !1, a.value = r.value.length > 0;
-    }, y = f(!1);
-    h(u, async (e) => {
-      e !== "" && t.actionCallback && (y.value = !0, await t.actionCallback(), y.value = !1);
-    }), h(y, (e) => {
-      e && (a.value = !0);
-    }), h(n, (e) => {
-      C.value && i.scrollToIndex(e);
-    });
-    const ee = () => {
-      r.value.length && (a.value = !0, n.value = (n.value + 1) % r.value.length);
-    }, te = () => {
-      r.value.length && (a.value = !0, n.value = (n.value - 1 + r.value.length) % r.value.length);
-    }, le = () => {
-      !a.value || !N.value || B(N.value);
-    }, ae = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), ee()) : e.key === "ArrowUp" ? (e.preventDefault(), te()) : e.key === "Enter" ? (e.preventDefault(), le()) : e.key === "Escape" && (e.preventDefault(), b());
-    }, oe = o(() => ({
-      role: "combobox",
-      "aria-autocomplete": "list",
-      "aria-expanded": a.value,
-      "aria-controls": _.value,
-      "aria-activedescendant": a.value ? w(n.value) : void 0
-    })), ne = (e, d) => {
-      i.measureElement(d, pe(e));
-    }, A = ve(a, () => t.zIndex), re = o(() => ({
-      "--nmorph-autocomplete-input-z-index": A.value + 1
-    })), E = o(
-      () => Z({
-        nmorph: [_e[t.height]]
-      })
-    );
-    return (e, d) => (c(), m("div", {
-      class: k(G.value),
-      style: g(re.value)
-    }, [
-      x("div", He, [
-        x("div", {
-          ref_key: "nmorphAutocompleteDOMRef",
-          ref: H,
-          class: "nmorph-autocomplete__input"
-        }, [
-          V(s(ye), {
-            id: t.id,
-            modelValue: $.value,
-            "onUpdate:modelValue": d[0] || (d[0] = (l) => $.value = l),
-            name: t.name,
-            autocomplete: t.autocomplete,
-            height: t.height,
-            disabled: t.disabled,
-            placeholder: t.placeholder,
-            clearable: t.clearable,
-            "input-attrs": oe.value,
-            onFocus: Y,
-            onKeydown: ae
-          }, null, 8, ["id", "modelValue", "name", "autocomplete", "height", "disabled", "placeholder", "clearable", "input-attrs"])
-        ], 512)
+}, N = ["id"], V = ["id", "aria-selected", "onClick"], C = ["id"], I = ["id", "aria-selected", "onClick"];
+function O(c, i, w, e, D, S) {
+  return l(), t(
+    "div",
+    {
+      class: a(e.modifiers),
+      style: n(e.styles)
+    },
+    [
+      d("div", g, [
+        d(
+          "div",
+          b,
+          [
+            m(e.NmorphTextInput, {
+              id: e.props.id,
+              modelValue: e.inputValue,
+              "onUpdate:modelValue": i[0] || (i[0] = (o) => e.inputValue = o),
+              name: e.props.name,
+              autocomplete: e.props.autocomplete,
+              height: e.props.height,
+              disabled: e.props.disabled,
+              placeholder: e.props.placeholder,
+              clearable: e.props.clearable,
+              "input-attrs": e.inputAttrs,
+              onFocus: e.focusHandler,
+              onKeydown: e.keydownHandler
+            }, null, 8, ["id", "modelValue", "name", "autocomplete", "height", "disabled", "placeholder", "clearable", "input-attrs"])
+          ],
+          512
+          /* NEED_PATCH */
+        )
       ]),
-      H.value ? (c(), se(s(ge), {
+      e.nmorphAutocompleteDOMRef ? (l(), y(e.NmorphDropdown, {
         key: 0,
-        open: a.value,
-        "relative-element": H.value,
+        open: e.open,
+        "relative-element": e.nmorphAutocompleteDOMRef,
         "y-offset": 1,
-        "z-index": s(A),
+        "z-index": e.dropdownZIndex,
         "restore-focus": !1,
         "content-class": "nmorph-autocomplete__dropdown",
-        "aria-label": t.name || t.id || "autocomplete",
-        onOnOutsideClick: b,
-        onOnEscapeKeydown: b
+        "aria-label": e.props.name || e.props.id || "autocomplete",
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.closeHandler
       }, {
-        default: T(() => [
-          y.value ? (c(), m("div", be, [
-            D(e.$slots, "loader", {}, () => [
-              V(s(ke), { size: "large" }, {
-                default: T(() => [
-                  V(s(xe))
+        default: p(() => [
+          e.loader ? (l(), t("div", H, [
+            s(c.$slots, "loader", {}, () => [
+              m(e.NmorphIcon, { size: "large" }, {
+                default: p(() => [
+                  m(e.NmorphIconLoaderDots)
                 ]),
                 _: 1
+                /* STABLE */
               })
             ])
-          ])) : C.value ? (c(), m("div", {
+          ])) : e.virtualEnabled ? (l(), t("div", {
             key: 1,
-            id: _.value,
-            ref: s(i).containerRef,
-            class: k(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": M.value }]),
-            style: g({ "--autocomplete-virtual-item-height": `${z.value}px`, maxHeight: X.value }),
+            id: e.listboxId,
+            ref: e.virtualList.containerRef,
+            class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
+            style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
             role: "listbox",
-            onScroll: d[1] || (d[1] = //@ts-ignore
-            (...l) => s(i).scrollHandler && s(i).scrollHandler(...l))
+            onScroll: i[1] || (i[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
           }, [
-            x("div", {
-              class: "nmorph-autocomplete__virtual-spacer",
-              style: g(s(Q))
-            }, [
-              x("div", {
-                class: "nmorph-autocomplete__virtual-content",
-                style: g(s(W))
-              }, [
-                (c(!0), m(F, null, R(P.value, (l) => (c(), m("div", {
-                  id: w(l.index),
-                  ref_for: !0,
-                  ref: (v) => ne(v, l.index),
-                  key: l.index,
-                  class: k(["nmorph-autocomplete__list-item", [
-                    E.value,
-                    { "nmorph-autocomplete__list-item--focused": l.index === n.value }
-                  ]]),
-                  role: "option",
-                  "aria-selected": l.index === n.value,
-                  onClick: () => L(l.item)
-                }, [
-                  D(e.$slots, "default", {
-                    scope: l.item
-                  }, () => [
-                    U(K(l.item.value), 1)
-                  ])
-                ], 10, we))), 128))
-              ], 4)
-            ], 4)
-          ], 46, Ce)) : (c(), m("div", {
+            d(
+              "div",
+              {
+                class: "nmorph-autocomplete__virtual-spacer",
+                style: n(e.virtualSpacerStyle)
+              },
+              [
+                d(
+                  "div",
+                  {
+                    class: "nmorph-autocomplete__virtual-content",
+                    style: n(e.virtualContentStyle)
+                  },
+                  [
+                    (l(!0), t(
+                      _,
+                      null,
+                      h(e.virtualItems, (o) => (l(), t("div", {
+                        id: e.getOptionId(o.index),
+                        ref_for: !0,
+                        ref: (r) => e.setVirtualItemRef(r, o.index),
+                        key: o.index,
+                        class: a(["nmorph-autocomplete__list-item", [
+                          e.optionHeightModifiers,
+                          { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }
+                        ]]),
+                        role: "option",
+                        "aria-selected": o.index === e.currentIndex,
+                        onClick: () => e.clickHandler(o.item)
+                      }, [
+                        s(c.$slots, "default", {
+                          scope: o.item
+                        }, () => [
+                          f(
+                            u(o.item.value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ], 10, V))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              4
+              /* STYLE */
+            )
+          ], 46, N)) : (l(), t("div", {
             key: 2,
-            id: _.value,
+            id: e.listboxId,
             class: "nmorph-autocomplete__list",
             role: "listbox"
           }, [
-            (c(!0), m(F, null, R(r.value, (l, v) => (c(), m("div", {
-              id: w(v),
-              key: v,
-              class: k(["nmorph-autocomplete__list-item", [E.value, { "nmorph-autocomplete__list-item--focused": v === n.value }]]),
-              role: "option",
-              "aria-selected": v === n.value,
-              onClick: () => L(l)
-            }, [
-              D(e.$slots, "default", { scope: l }, () => [
-                U(K(l.value), 1)
-              ])
-            ], 10, De))), 128))
-          ], 8, Ve))
+            (l(!0), t(
+              _,
+              null,
+              h(e.filteredList, (o, r) => (l(), t("div", {
+                id: e.getOptionId(r),
+                key: r,
+                class: a(["nmorph-autocomplete__list-item", [e.optionHeightModifiers, { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]]),
+                role: "option",
+                "aria-selected": r === e.currentIndex,
+                onClick: () => e.clickHandler(o)
+              }, [
+                s(c.$slots, "default", { scope: o }, () => [
+                  f(
+                    u(o.value),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 10, I))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ], 8, C))
         ]),
         _: 3
-      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : ce("", !0)
-    ], 6));
-  }
-});
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const R = /* @__PURE__ */ k(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  Ke as default
+  R as default
 };

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js

@@ -0,0 +1,115 @@
+import './NmorphAutocomplete.css';
+import { defineComponent as K, ref as s, computed as l, watch as c, nextTick as Q } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { getNmorphOptionHeight as W, toCssSize as X, resolveDomElement as Y } from "../../../utils/common.js";
+import { useZIndex as ee } from "../../../hooks/use-z-index.js";
+import { useVirtualList as te } from "../../../hooks/use-virtual-list.js";
+import { useFormItemModel as ae } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as le } from "../../../types/common.types.js";
+import re from "../nmorph-text-input/NmorphTextInput.vue.js";
+import oe from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ne from "../../../assets/icons/loader.svg.js";
+const Ie = /* @__PURE__ */ K({
+  __name: "NmorphAutocomplete",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    placeholder: { type: String, required: !1, default: "" },
+    clearable: { type: Boolean, required: !1, default: !0 },
+    list: { type: Array, required: !0, default: () => [] },
+    actionCallback: { type: Function, required: !1, default: void 0 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    virtual: { type: Boolean, required: !1, default: !1 },
+    virtualItemHeight: { type: Number, required: !1, default: void 0 },
+    virtualMaxHeight: { type: [Number, String], required: !1, default: 240 },
+    virtualOverscan: { type: Number, required: !1, default: 5 },
+    virtualDynamicHeight: { type: Boolean, required: !1, default: !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", "select"],
+  setup(O, { expose: L, emit: V }) {
+    L();
+    const t = O, p = V, { modelValue: m, updateModelValue: v } = ae(
+      t,
+      (e) => p("update:model-value", e),
+      ""
+    ), o = s(m.value), A = l(
+      () => M({
+        "nmorph-autocomplete": [a.value && "open"]
+      })
+    ), i = s(!1), b = (e) => {
+      i.value = e === "", o.value = e, a.value = !i.value && r.value.length > 0, u.value = 0, v(o.value);
+    }, T = l({
+      get: () => o.value,
+      set: b
+    }), a = s(!1), z = s(null), x = () => {
+      i.value = !0, a.value = !1;
+    }, r = l(() => t.list.filter((e) => Object.keys(e).some((I) => String(e[I]).toLowerCase().includes(o.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), H = l(() => t.virtualItemHeight || W(t.height)), q = l(() => t.virtualOverscan), N = l(() => t.virtualDynamicHeight), n = te(r, {
+      enabled: f,
+      itemHeight: H,
+      overscan: q,
+      dynamic: N
+    }), B = l(() => n.virtualItems.value), E = n.spacerStyle, $ = n.contentStyle, j = l(() => X(t.virtualMaxHeight)), u = s(0), h = l(() => r.value[u.value]), g = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), D = (e) => `${g.value}-option-${e}`;
+    c(m, (e) => {
+      e !== o.value && (o.value = e);
+    }), c(r, async (e) => {
+      a.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await Q(), n.scrollToIndex(0), n.refresh();
+    });
+    const y = (e) => {
+      p("select", e), o.value = e.value, v(o.value), setTimeout(() => {
+        i.value = !0, a.value = !1;
+      });
+    }, F = (e) => {
+      y(e);
+    }, R = () => {
+      i.value = !1, a.value = r.value.length > 0;
+    }, d = s(!1);
+    c(o, async (e) => {
+      e !== "" && t.actionCallback && (d.value = !0, await t.actionCallback(), d.value = !1);
+    }), c(d, (e) => {
+      e && (a.value = !0);
+    }), c(u, (e) => {
+      f.value && n.scrollToIndex(e);
+    });
+    const S = () => {
+      r.value.length && (a.value = !0, u.value = (u.value + 1) % r.value.length);
+    }, w = () => {
+      r.value.length && (a.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
+    }, k = () => {
+      !a.value || !h.value || y(h.value);
+    }, U = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), S()) : e.key === "ArrowUp" ? (e.preventDefault(), w()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), x());
+    }, Z = l(() => ({
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-expanded": a.value,
+      "aria-controls": g.value,
+      "aria-activedescendant": a.value ? D(u.value) : void 0
+    })), P = (e, I) => {
+      n.measureElement(I, Y(e));
+    }, C = ee(a, () => t.zIndex), G = l(() => ({
+      "--nmorph-autocomplete-input-z-index": C.value + 1
+    })), J = l(
+      () => M({
+        nmorph: [le[t.height]]
+      })
+    ), _ = { props: t, emit: p, modelValue: m, updateModelValue: v, initialValue: o, modifiers: A, userClosed: i, updateValueHandler: b, inputValue: T, open: a, nmorphAutocompleteDOMRef: z, closeHandler: x, filteredList: r, virtualEnabled: f, virtualItemHeight: H, virtualOverscan: q, virtualDynamicHeight: N, virtualList: n, virtualItems: B, virtualSpacerStyle: E, virtualContentStyle: $, virtualMaxHeight: j, currentIndex: u, activeItem: h, listboxId: g, getOptionId: D, selectItem: y, clickHandler: F, focusHandler: R, loader: d, arrowDownHandler: S, arrowUpHandler: w, enterHandler: k, keydownHandler: U, inputAttrs: Z, setVirtualItemRef: P, dropdownZIndex: C, styles: G, optionHeightModifiers: J, get NmorphIcon() {
+      return ue;
+    }, get NmorphDropdown() {
+      return oe;
+    }, get NmorphTextInput() {
+      return re;
+    }, get NmorphIconLoaderDots() {
+      return ne;
+    } };
+    return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
+  }
+});
+export {
+  Ie as default
+};