@nmorph/nmorph-ui-kit 2.2.15 → 2.2.17

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js

@@ -1,60 +1,60 @@
 import './NmorphDialog.css';
-import t from "./NmorphDialog.vue2.js";
-import { openBlock as i, createBlock as a, withCtx as l, createElementVNode as e, normalizeStyle as d, normalizeClass as c, renderSlot as n, toDisplayString as m, createElementBlock as h, createVNode as s, createCommentVNode as _ } from "vue";
+import s from "./NmorphDialog.vue2.js";
+import { openBlock as l, createBlock as c, withCtx as i, createElementVNode as e, normalizeStyle as d, normalizeClass as t, renderSlot as a, toDisplayString as m, createElementBlock as p, createVNode as n, createCommentVNode as _ } from "vue";
 /* empty css                  */
-import p from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "nmorph-dialog__header" }, g = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
-function v(r, N, y, o, C, w) {
-  return i(), a(o.NmorphOverlay, {
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = ["aria-label"], g = { class: "nmorph-dialog__header" }, v = { class: "nmorph-dialog__title" }, k = { class: "nmorph-dialog__content" };
+function y(r, N, w, o, C, O) {
+  return l(), c(o.NmorphOverlay, {
     show: o.isVisible,
     "z-index": o.props.zIndex,
-    onOnOutsideClick: o.clickOnOverlay
+    "close-on-escape": o.props.closeOnEscape,
+    "trap-focus": "",
+    onOnOutsideClick: o.clickOnOverlay,
+    onOnEscapeKeydown: o.closeHandler
   }, {
-    default: l(() => [
-      e(
-        "div",
-        {
-          class: c(o.modifiers),
-          style: d({ "--nmorph-dialog-width": o.props.width })
-        },
-        [
-          e("div", f, [
-            n(r.$slots, "header", {}, () => [
-              e(
-                "div",
-                g,
-                m(o.props.title),
-                1
-                /* TEXT */
-              ),
-              o.props.showClose ? (i(), h("div", {
-                key: 0,
-                class: "nmorph-dialog__close-icon",
-                onClick: o.closeHandler
-              }, [
-                s(o.NmorphIcon, null, {
-                  default: l(() => [
-                    s(o.NmorphIconCross)
-                  ]),
-                  _: 1
-                  /* STABLE */
-                })
-              ])) : _("v-if", !0)
-            ])
-          ]),
-          e("div", k, [
-            n(r.$slots, "default")
+    default: i(() => [
+      e("div", {
+        class: t(o.modifiers),
+        style: d({ "--nmorph-dialog-width": o.props.width }),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": o.props.title || void 0
+      }, [
+        e("div", g, [
+          a(r.$slots, "header", {}, () => [
+            e(
+              "div",
+              v,
+              m(o.props.title),
+              1
+              /* TEXT */
+            ),
+            o.props.showClose ? (l(), p("div", {
+              key: 0,
+              class: "nmorph-dialog__close-icon",
+              onClick: o.closeHandler
+            }, [
+              n(o.NmorphIcon, null, {
+                default: i(() => [
+                  n(o.NmorphIconCross)
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])) : _("v-if", !0)
           ])
-        ],
-        6
-        /* CLASS, STYLE */
-      )
+        ]),
+        e("div", k, [
+          a(r.$slots, "default")
+        ])
+      ], 14, f)
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["show", "z-index"]);
+  }, 8, ["show", "z-index", "close-on-escape"]);
 }
-const V = /* @__PURE__ */ p(t, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
+const V = /* @__PURE__ */ h(s, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-dialog/NmorphDialog.vue"]]);
 export {
   V as default
 };

package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDialog.css';
-import { defineComponent as d, computed as f, ref as c, watch as y } from "vue";
-import { useModifiers as v } from "../../../utils/create-modifiers.js";
-import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as f, computed as c, ref as d, watch as y } from "vue";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import T from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
 import h from "../../../assets/icons/cross.svg.js";
-const C = /* @__PURE__ */ d({
+const C = /* @__PURE__ */ f({
   __name: "NmorphDialog",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -15,50 +15,53 @@ const C = /* @__PURE__ */ d({
     closeOnClickModal: { type: Boolean, required: !1, default: !0 },
     showClose: { type: Boolean, required: !1, default: !0 },
     zIndex: { type: Number, required: !1, default: void 0 },
-    closeOnOverlay: { type: Boolean, required: !1, default: !0 }
+    closeOnOverlay: { type: Boolean, required: !1, default: !0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["on-close", "update:model-value"],
-  setup(s, { expose: n, emit: m }) {
+  setup(i, { expose: n, emit: m }) {
     n();
-    const e = s, l = m, p = f(
-      () => v({
+    const e = i, r = m, p = c(
+      () => O({
         "nmorph-dialog": []
       })
-    ), u = c(e.modelValue);
-    let o = null, t = null;
+    ), u = d(e.modelValue);
+    let t = null, l = null;
     y(
       () => e.modelValue,
-      (r) => {
-        r ? (t && clearTimeout(t), o = setTimeout(() => {
+      (o) => {
+        o ? (l && clearTimeout(l), t = setTimeout(() => {
           u.value = !0;
-        }, e.openDelay)) : (o && clearTimeout(o), t = setTimeout(() => {
+        }, e.openDelay)) : (t && clearTimeout(t), l = setTimeout(() => {
           u.value = !1;
         }, e.closeDelay));
       },
       { immediate: !0 }
     );
     const a = () => {
-      l("on-close"), o && clearTimeout(o), t = setTimeout(() => {
-        l("update:model-value", !1);
-      }, e.closeDelay);
-    }, i = { props: e, emit: l, modifiers: p, isVisible: u, get openTimeout() {
-      return o;
-    }, set openTimeout(r) {
-      o = r;
-    }, get closeTimeout() {
+      r("on-close"), t && clearTimeout(t);
+      const o = () => {
+        r("update:model-value", !1);
+      };
+      e.closeDelay <= 0 ? o() : l = setTimeout(o, e.closeDelay);
+    }, s = { props: e, emit: r, modifiers: p, isVisible: u, get openTimeout() {
       return t;
-    }, set closeTimeout(r) {
-      t = r;
+    }, set openTimeout(o) {
+      t = o;
+    }, get closeTimeout() {
+      return l;
+    }, set closeTimeout(o) {
+      l = o;
     }, closeHandler: a, clickOnOverlay: () => {
       e.closeOnOverlay && a();
     }, get NmorphOverlay() {
       return T;
     }, get NmorphIcon() {
-      return O;
+      return v;
     }, get NmorphIconCross() {
       return h;
     } };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {

package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css

@@ -1 +1 @@
-.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-right-radius:var(--indentation-02);border-bottom-left-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
+.nmorph-autocomplete .nmorph-autocomplete__list-item{padding:var(--indentation-02) var(--indentation-04);cursor:pointer}.nmorph-autocomplete .nmorph-autocomplete__list-item:last-child{border-bottom-right-radius:var(--indentation-02);border-bottom-left-radius:var(--indentation-02)}.nmorph-autocomplete .nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete .nmorph-autocomplete__list-item:hover,.nmorph-autocomplete .nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete .nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete .nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete .nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete .nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete .nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}

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

@@ -1,31 +1,28 @@
 import './NmorphAutocomplete.css';
 import v from "./NmorphAutocomplete.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeClass as f, createElementVNode as r, createVNode as i, createBlock as k, withCtx as d, renderSlot as n, normalizeStyle as c, Fragment as p, renderList as s, createTextVNode as h, toDisplayString as _, createCommentVNode as y } from "vue";
+import { openBlock as l, createElementBlock as t, normalizeClass as i, createElementVNode as n, createVNode as d, createBlock as y, withCtx as p, renderSlot as c, normalizeStyle as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
 /* empty css                        */
-import g from "../../../_virtual/_plugin-vue_export-helper.js";
-const x = { class: "nmorph-autocomplete__input-content" }, H = {
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-autocomplete__input-content" }, g = {
   ref: "nmorphAutocompleteDOMRef",
   class: "nmorph-autocomplete__input"
-}, N = {
+}, H = {
   key: 0,
   class: "nmorph-autocomplete__loading"
-}, b = ["onClick"], C = {
-  key: 2,
-  class: "nmorph-autocomplete__list"
-}, S = ["onClick"];
-function V(a, m, z, e, L, A) {
+}, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
+function V(a, s, S, e, z, A) {
   return l(), t(
     "div",
     {
-      class: f(e.modifiers)
+      class: i(e.modifiers)
     },
     [
-      r("div", x, [
-        r(
+      n("div", b, [
+        n(
           "div",
-          H,
+          g,
           [
-            i(e.NmorphTextInput, {
+            d(e.NmorphTextInput, {
               id: e.props.id,
               name: e.props.name,
               autocomplete: e.props.autocomplete,
@@ -34,120 +31,133 @@ function V(a, m, z, e, L, A) {
               "model-value": e.initialValue,
               placeholder: e.props.placeholder,
               clearable: e.props.clearable,
+              "input-attrs": e.inputAttrs,
               onFocus: e.focusHandler,
+              onKeydown: e.keydownHandler,
               "onUpdate:modelValue": e.updateValueHandler
-            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable"])
+            }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable", "input-attrs"])
           ],
           512
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphAutocompleteDOMRef ? (l(), k(e.NmorphDropdown, {
+      e.nmorphAutocompleteDOMRef ? (l(), y(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.nmorphAutocompleteDOMRef,
         "y-offset": 1,
         "z-index": e.props.zIndex,
-        onOnOutsideClick: e.closeHandler
+        "aria-label": e.props.name || e.props.id || "autocomplete",
+        onOnOutsideClick: e.closeHandler,
+        onOnEscapeKeydown: e.closeHandler
       }, {
-        default: d(() => [
-          e.loader ? (l(), t("div", N, [
-            n(a.$slots, "loader", {}, () => [
-              i(e.NmorphIcon, { size: "large" }, {
-                default: d(() => [
-                  i(e.NmorphIconLoader)
+        default: p(() => [
+          e.loader ? (l(), t("div", H, [
+            c(a.$slots, "loader", {}, () => [
+              d(e.NmorphIcon, { size: "large" }, {
+                default: p(() => [
+                  d(e.NmorphIconLoader)
                 ]),
                 _: 1
                 /* STABLE */
               })
             ])
-          ])) : e.virtualEnabled ? (l(), t(
-            "div",
-            {
-              key: 1,
-              ref: e.virtualList.containerRef,
-              class: "nmorph-autocomplete__list nmorph-autocomplete__list--virtual",
-              style: c({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
-              onScroll: m[0] || (m[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
-            },
-            [
-              r(
-                "div",
-                {
-                  class: "nmorph-autocomplete__virtual-spacer",
-                  style: c(e.virtualSpacerStyle)
-                },
-                [
-                  r(
-                    "div",
-                    {
-                      class: "nmorph-autocomplete__virtual-content",
-                      style: c(e.virtualContentStyle)
-                    },
-                    [
-                      (l(!0), t(
-                        p,
-                        null,
-                        s(e.virtualItems, (o) => (l(), t("div", {
-                          key: o.index,
-                          class: "nmorph-autocomplete__list-item",
-                          onClick: () => e.clickHandler(o.item)
-                        }, [
-                          n(a.$slots, "default", {
-                            scope: o.item
-                          }, () => [
-                            h(
-                              _(o.item.value),
-                              1
-                              /* TEXT */
-                            )
-                          ])
-                        ], 8, b))),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ],
-                4
-                /* STYLE */
-              )
-            ],
-            36
-            /* STYLE, NEED_HYDRATION */
-          )) : (l(), t("div", C, [
+          ])) : e.virtualEnabled ? (l(), t("div", {
+            key: 1,
+            ref: e.virtualList.containerRef,
+            id: e.listboxId,
+            class: i(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
+            style: m({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
+            role: "listbox",
+            onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
+          }, [
+            n(
+              "div",
+              {
+                class: "nmorph-autocomplete__virtual-spacer",
+                style: m(e.virtualSpacerStyle)
+              },
+              [
+                n(
+                  "div",
+                  {
+                    class: "nmorph-autocomplete__virtual-content",
+                    style: m(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: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
+                        role: "option",
+                        "aria-selected": o.index === e.currentIndex,
+                        onClick: () => e.clickHandler(o.item)
+                      }, [
+                        c(a.$slots, "default", {
+                          scope: o.item
+                        }, () => [
+                          f(
+                            u(o.item.value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ], 10, C))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ],
+              4
+              /* STYLE */
+            )
+          ], 46, N)) : (l(), t("div", {
+            key: 2,
+            id: e.listboxId,
+            class: "nmorph-autocomplete__list",
+            role: "listbox"
+          }, [
             (l(!0), t(
-              p,
+              _,
               null,
-              s(e.filteredList, (o, u) => (l(), t("div", {
-                key: u,
-                class: "nmorph-autocomplete__list-item",
+              h(e.filteredList, (o, r) => (l(), t("div", {
+                id: e.getOptionId(r),
+                key: r,
+                class: i(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
+                role: "option",
+                "aria-selected": r === e.currentIndex,
                 onClick: () => e.clickHandler(o)
               }, [
-                n(a.$slots, "default", { scope: o }, () => [
-                  h(
-                    _(o.value),
+                c(a.$slots, "default", { scope: o }, () => [
+                  f(
+                    u(o.value),
                     1
                     /* TEXT */
                   )
                 ])
-              ], 8, S))),
+              ], 10, O))),
               128
               /* KEYED_FRAGMENT */
             ))
-          ]))
+          ], 8, I))
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "z-index"])) : y("v-if", !0)
+      }, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const B = /* @__PURE__ */ g(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
+const M = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
 export {
-  B as default
+  M as default
 };

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

@@ -1,12 +1,12 @@
 import './NmorphAutocomplete.css';
-import { defineComponent as k, ref as n, computed as r, watch as p, nextTick as O } from "vue";
-import { useModifiers as T } from "../../../utils/create-modifiers.js";
-import { useVirtualList as M } from "../../../hooks/use-virtual-list.js";
-import V from "../nmorph-text-input/NmorphTextInput.vue.js";
-import A from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import D from "../../../assets/icons/loader.svg.js";
-const E = /* @__PURE__ */ k({
+import { defineComponent as z, ref as i, computed as t, watch as c, nextTick as U } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import { useVirtualList as P } from "../../../hooks/use-virtual-list.js";
+import Y from "../nmorph-text-input/NmorphTextInput.vue.js";
+import G from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import J from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import K from "../../../assets/icons/loader.svg.js";
+const le = /* @__PURE__ */ z({
   __name: "NmorphAutocomplete",
   props: {
     modelValue: { type: String, required: !1, default: "" },
@@ -19,6 +19,7 @@ const E = /* @__PURE__ */ k({
     virtualItemHeight: { type: Number, required: !1, default: 34 },
     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 },
@@ -27,52 +28,74 @@ const E = /* @__PURE__ */ k({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "select"],
-  setup(h, { expose: g, emit: y }) {
-    g();
-    const t = h, a = n(t.modelValue), s = y, b = r(
-      () => T({
+  setup(D, { expose: k, emit: _ }) {
+    k();
+    const a = D, n = i(a.modelValue), d = _, C = t(
+      () => F({
         "nmorph-autocomplete": []
       })
-    ), q = (e) => {
-      a.value = e, s("update:model-value", a.value);
-    }, l = n(!1), x = n(null), N = () => {
-      l.value = !1;
-    }, u = r(() => t.list.filter((e) => Object.keys(e).some((L) => String(e[L]).toLowerCase().includes(a.value.toLowerCase())))), d = r(() => t.virtual && u.value.length > 0), c = r(() => t.virtualItemHeight), f = r(() => t.virtualOverscan), o = M(u, {
-      enabled: d,
-      itemHeight: c,
-      overscan: f
-    }), I = r(() => o.virtualItems.value), S = r(() => ({
-      height: `${o.totalHeight.value}px`
-    })), H = r(() => ({
-      transform: `translateY(${o.offsetTop.value}px)`
-    })), m = (e) => typeof e == "number" ? `${e}px` : e, _ = r(() => m(t.virtualMaxHeight));
-    p(u, async (e) => {
-      l.value = e.length > 0, await O(), o.scrollToIndex(0), o.refresh();
+    ), L = (e) => {
+      n.value = e, d("update:model-value", n.value);
+    }, r = i(!1), O = i(null), g = () => {
+      r.value = !1;
+    }, l = t(() => a.list.filter((e) => Object.keys(e).some((h) => String(e[h]).toLowerCase().includes(n.value.toLowerCase())))), p = t(() => a.virtual && l.value.length > 0), y = t(() => a.virtualItemHeight), b = t(() => a.virtualOverscan), I = t(() => a.virtualDynamicHeight), u = P(l, {
+      enabled: p,
+      itemHeight: y,
+      overscan: b,
+      dynamic: I
+    }), T = t(() => u.virtualItems.value), V = t(() => ({
+      height: `${u.totalHeight.value}px`
+    })), $ = t(() => ({
+      transform: `translateY(${u.offsetTop.value}px)`
+    })), x = (e) => typeof e == "number" ? `${e}px` : e, A = t(() => x(a.virtualMaxHeight)), o = i(0), f = t(() => l.value[o.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), H = (e) => `${m.value}-option-${e}`;
+    c(l, async (e) => {
+      r.value = e.length > 0, o.value = 0, await U(), u.scrollToIndex(0), u.refresh();
     });
-    const C = (e) => {
-      s("select", e), a.value = e.value, setTimeout(() => {
-        l.value = !1;
+    const v = (e) => {
+      d("select", e), n.value = e.value, setTimeout(() => {
+        r.value = !1;
       });
-    }, w = () => {
-      l.value = u.value.length > 0;
-    }, i = n(!1);
-    p(a, async (e) => {
-      e !== "" && t.actionCallback && (i.value = !0, await t.actionCallback(), i.value = !1);
-    }), p(i, (e) => {
-      e && (l.value = !0);
+    }, M = (e) => {
+      v(e);
+    }, B = () => {
+      r.value = l.value.length > 0;
+    }, s = i(!1);
+    c(n, async (e) => {
+      e !== "" && a.actionCallback && (s.value = !0, await a.actionCallback(), s.value = !1);
+    }), c(s, (e) => {
+      e && (r.value = !0);
+    }), c(o, (e) => {
+      p.value && u.scrollToIndex(e);
     });
-    const v = { props: t, initialValue: a, emit: s, modifiers: b, updateValueHandler: q, open: l, nmorphAutocompleteDOMRef: x, closeHandler: N, filteredList: u, virtualEnabled: d, virtualItemHeight: c, virtualOverscan: f, virtualList: o, virtualItems: I, virtualSpacerStyle: S, virtualContentStyle: H, getCssSize: m, virtualMaxHeight: _, clickHandler: C, focusHandler: w, loader: i, get NmorphIcon() {
-      return B;
+    const q = () => {
+      l.value.length && (r.value = !0, o.value = (o.value + 1) % l.value.length);
+    }, w = () => {
+      l.value.length && (r.value = !0, o.value = (o.value - 1 + l.value.length) % l.value.length);
+    }, N = () => {
+      !r.value || !f.value || v(f.value);
+    }, E = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), q()) : e.key === "ArrowUp" ? (e.preventDefault(), w()) : e.key === "Enter" ? (e.preventDefault(), N()) : e.key === "Escape" && (e.preventDefault(), g());
+    }, R = t(() => ({
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-expanded": r.value,
+      "aria-controls": m.value,
+      "aria-activedescendant": r.value ? H(o.value) : void 0
+    })), S = { props: a, initialValue: n, emit: d, modifiers: C, updateValueHandler: L, open: r, nmorphAutocompleteDOMRef: O, closeHandler: g, filteredList: l, virtualEnabled: p, virtualItemHeight: y, virtualOverscan: b, virtualDynamicHeight: I, virtualList: u, virtualItems: T, virtualSpacerStyle: V, virtualContentStyle: $, getCssSize: x, virtualMaxHeight: A, currentIndex: o, activeItem: f, listboxId: m, getOptionId: H, selectItem: v, clickHandler: M, focusHandler: B, loader: s, arrowDownHandler: q, arrowUpHandler: w, enterHandler: N, keydownHandler: E, inputAttrs: R, setVirtualItemRef: (e, h) => {
+      const j = e instanceof Element ? e : e?.$el;
+      u.measureElement(h, j);
+    }, get NmorphIcon() {
+      return J;
     }, get NmorphDropdown() {
-      return A;
+      return G;
     }, get NmorphTextInput() {
-      return V;
+      return Y;
     }, get NmorphIconLoader() {
-      return D;
+      return K;
     } };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  E as default
+  le as default
 };

package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css

@@ -1 +1 @@
-.nmorph-date-picker{--width: 200px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{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-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: 42px}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}
+.nmorph-date-picker{--width: 200px;position:relative;width:var(--width)}.nmorph-date-picker .nmorph-date-picker__date-wrapper,.nmorph-date-picker .nmorph-date-picker__date-range-wrapper{height:100%}.nmorph-date-picker .nmorph-date-picker__input{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-date-picker .nmorph-date-picker__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-date-picker .nmorph-date-picker__input--open{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-date-picker .nmorph-date-picker__calendar-icon{margin-right:2px}.nmorph-date-picker .nmorph-date-picker__clear-button-wrapper{width:14px;height:14px;margin-right:1px}.nmorph-date-picker .nmorph-dropdown{padding:var(--indentation-03)}.nmorph-date-picker input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.nmorph-date-picker .nmorph-calendar{--table-data-cell-height: 42px}.nmorph-date-picker.nmorph-date-picker--daterange{--width: 250px}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-dropdown{display:flex;justify-content:space-between}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__value-separator{padding:0 var(--indentation-03)}.nmorph-date-picker.nmorph-date-picker--daterange .nmorph-date-picker__selected-value{display:flex}.nmorph-date-picker.nmorph-date-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-date-picker.nmorph-date-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-date-picker.nmorph-date-picker--disabled .nmorph-date-picker__date-wrapper{pointer-events:none}