@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,169 +1,221 @@
 import './NmorphAutocomplete.css';
-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 = {
+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 = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, 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 */
-        )
+}, 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)
       ]),
-      e.nmorphAutocompleteDOMRef ? (l(), y(e.NmorphDropdown, {
+      H.value ? (c(), se(s(ge), {
         key: 0,
-        open: e.open,
-        "relative-element": e.nmorphAutocompleteDOMRef,
+        open: a.value,
+        "relative-element": H.value,
         "y-offset": 1,
-        "z-index": e.dropdownZIndex,
+        "z-index": s(A),
         "restore-focus": !1,
         "content-class": "nmorph-autocomplete__dropdown",
-        "aria-label": e.props.name || e.props.id || "autocomplete",
-        onOnOutsideClick: e.closeHandler,
-        onOnEscapeKeydown: e.closeHandler
+        "aria-label": t.name || t.id || "autocomplete",
+        onOnOutsideClick: b,
+        onOnEscapeKeydown: b
       }, {
-        default: p(() => [
-          e.loader ? (l(), t("div", H, [
-            s(c.$slots, "loader", {}, () => [
-              m(e.NmorphIcon, { size: "large" }, {
-                default: p(() => [
-                  m(e.NmorphIconLoaderDots)
+        default: T(() => [
+          y.value ? (c(), m("div", be, [
+            D(e.$slots, "loader", {}, () => [
+              V(s(ke), { size: "large" }, {
+                default: T(() => [
+                  V(s(xe))
                 ]),
                 _: 1
-                /* STABLE */
               })
             ])
-          ])) : e.virtualEnabled ? (l(), t("div", {
+          ])) : C.value ? (c(), m("div", {
             key: 1,
-            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 }),
+            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 }),
             role: "listbox",
-            onScroll: i[1] || (i[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+            onScroll: d[1] || (d[1] = //@ts-ignore
+            (...l) => s(i).scrollHandler && s(i).scrollHandler(...l))
           }, [
-            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", {
+            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", {
             key: 2,
-            id: e.listboxId,
+            id: _.value,
             class: "nmorph-autocomplete__list",
             role: "listbox"
           }, [
-            (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))
+            (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))
         ]),
         _: 3
-        /* 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"]]);
+      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : ce("", !0)
+    ], 6));
+  }
+});
 export {
-  R as default
+  Ke as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphAutocomplete.css';
+import o from "./NmorphAutocomplete.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue.js

@@ -1,96 +1,118 @@
 import './NmorphCheckbox.css';
-import h from "./NmorphCheckbox.vue2.js";
-import { openBlock as o, createElementBlock as c, normalizeClass as i, createElementVNode as n, createCommentVNode as l, toDisplayString as a, renderSlot as r } from "vue";
-/* empty css                    */
-import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = {
+import { defineComponent as N, inject as h, watch as S, ref as r, computed as p, openBlock as o, createElementBlock as l, normalizeClass as O, createElementVNode as s, createCommentVNode as m, toDisplayString as f, renderSlot as _ } from "vue";
+import { useModifiers as R } from "../../../utils/create-modifiers.js";
+import { useFormItemModel as $ } from "../nmorph-form/use-form-item-input.js";
+import { NmorphSelectionControlHeight as w } from "../../../types/common.types.js";
+const A = {
   key: 0,
   class: "nmorph-checkbox__content"
-}, p = { class: "nmorph-checkbox__input-wrapper" }, k = ["disabled", "checked"], b = {
+}, E = { class: "nmorph-checkbox__input-wrapper" }, H = ["disabled", "checked"], j = {
   key: 0,
   class: "nmorph-checkbox__fake-checked"
-}, m = {
+}, z = {
   key: 0,
   class: "nmorph-checkbox__label"
-}, f = {
+}, F = {
   key: 1,
   class: "nmorph-checkbox__label"
-}, x = {
+}, G = {
   key: 1,
   class: "nmorph-checkbox__content"
-}, v = ["disabled", "checked"], y = {
+}, I = ["disabled", "checked"], q = {
   key: 0,
   class: "nmorph-checkbox__fake"
-}, u = {
+}, J = {
   key: 1,
   class: "nmorph-checkbox__fake"
-};
-function C(s, d, g, e, N, D) {
-  return o(), c(
-    "label",
-    {
-      class: i(e.modifiers)
-    },
-    [
-      e.props.design === "checkbox" ? (o(), c("div", _, [
-        n("div", p, [
-          n("input", {
-            ref: "inputDOMRef",
+}, T = /* @__PURE__ */ N({
+  __name: "NmorphCheckbox",
+  props: {
+    id: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    modelValue: { type: Boolean, default: !1 },
+    label: { default: "" },
+    design: { default: "button" },
+    height: {}
+  },
+  emits: ["update:model-value"],
+  setup(g, { expose: x, emit: y }) {
+    const c = h(
+      "checkbox-group-selected-value",
+      void 0
+    ), b = h(
+      "change-checkbox-value-handler",
+      void 0
+    ), C = h("checkbox-group-height", void 0), e = g, V = y, { modelValue: d, updateModelValue: M } = $(
+      e,
+      (t) => V("update:model-value", t),
+      !1
+    );
+    S(d, (t) => {
+      a.value = t;
+    });
+    const i = r(null);
+    x({ inputDOMRef: i });
+    const u = c !== void 0, a = u ? r(c.value) : r(d.value), n = p(() => u ? c.value.includes(e.id) : d.value), B = p(() => e.height || C?.value || "thin"), k = () => {
+      if (!e.disabled) {
+        if (!u) {
+          a.value = !a.value, M(a.value);
+          return;
+        }
+        b && Array.isArray(a.value) && b(e.id, a.value);
+      }
+    }, D = p(
+      () => R({
+        nmorph: [w[B.value]],
+        "nmorph-checkbox": [
+          n.value && "checked",
+          e.disabled && "disabled",
+          e.design === "button" && "button"
+        ]
+      })
+    );
+    return (t, v) => (o(), l("label", {
+      class: O(D.value)
+    }, [
+      e.design === "checkbox" ? (o(), l("div", A, [
+        s("div", E, [
+          s("input", {
+            ref_key: "inputDOMRef",
+            ref: i,
             type: "checkbox",
-            disabled: e.props.disabled,
-            checked: e.checked,
+            disabled: e.disabled,
+            checked: n.value,
             class: "nmorph-native-input",
-            onChange: e.handleChange
-          }, null, 40, k),
-          d[0] || (d[0] = n(
-            "div",
-            { class: "nmorph-checkbox__fake" },
-            null,
-            -1
-            /* CACHED */
-          )),
-          e.checked ? (o(), c("div", b)) : l("v-if", !0)
+            onChange: k
+          }, null, 40, H),
+          v[0] || (v[0] = s("div", { class: "nmorph-checkbox__fake" }, null, -1)),
+          n.value ? (o(), l("div", j)) : m("", !0)
         ]),
-        e.props.label ? (o(), c("div", m, [
-          n(
-            "span",
-            null,
-            a(e.props.label),
-            1
-            /* TEXT */
-          )
-        ])) : (o(), c("div", f, [
-          r(s.$slots, "default")
+        e.label ? (o(), l("div", z, [
+          s("span", null, f(e.label), 1)
+        ])) : (o(), l("div", F, [
+          _(t.$slots, "default")
         ]))
-      ])) : l("v-if", !0),
-      e.props.design === "button" ? (o(), c("div", x, [
-        n("input", {
-          ref: "inputDOMRef",
+      ])) : m("", !0),
+      e.design === "button" ? (o(), l("div", G, [
+        s("input", {
+          ref_key: "inputDOMRef",
+          ref: i,
           type: "checkbox",
-          disabled: e.props.disabled,
-          checked: e.checked,
-          onChange: e.handleChange
-        }, null, 40, v),
-        e.props.label ? (o(), c("div", y, [
-          n(
-            "span",
-            null,
-            a(e.props.label),
-            1
-            /* TEXT */
-          )
-        ])) : (o(), c("div", u, [
-          r(s.$slots, "label", {}, () => [
-            r(s.$slots, "default")
+          disabled: e.disabled,
+          checked: n.value,
+          onChange: k
+        }, null, 40, I),
+        e.label ? (o(), l("div", q, [
+          s("span", null, f(e.label), 1)
+        ])) : (o(), l("div", J, [
+          _(t.$slots, "label", {}, () => [
+            _(t.$slots, "default")
           ])
         ]))
-      ])) : l("v-if", !0)
-    ],
-    2
-    /* CLASS */
-  );
-}
-const R = /* @__PURE__ */ t(h, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-checkbox/NmorphCheckbox.vue"]]);
+      ])) : m("", !0)
+    ], 2));
+  }
+});
 export {
-  R as default
+  T as default
 };

package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphCheckbox.css';
+import o from "./NmorphCheckbox.vue.js";
+/* empty css                    */
+export {
+  o as default
+};