@nmorph/nmorph-ui-kit 2.2.15 → 2.2.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +0 -8
  2. package/dist/components/basic/nmorph-button/NmorphButton.css +1 -1
  3. package/dist/components/basic/nmorph-button/NmorphButton.vue.js +12 -12
  4. package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +17 -14
  5. package/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
  6. package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js +1 -1
  7. package/dist/components/data/nmorph-calendar/utils.js +65 -52
  8. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +39 -37
  9. package/dist/components/data/nmorph-table/NmorphTable.css +1 -1
  10. package/dist/components/data/nmorph-table/NmorphTable.vue.js +228 -225
  11. package/dist/components/data/nmorph-table/NmorphTable.vue2.js +57 -43
  12. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js +47 -47
  13. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js +28 -25
  14. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css +1 -1
  15. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js +102 -92
  16. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +67 -44
  17. package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css +1 -1
  18. package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js +45 -33
  19. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js +1 -1
  20. package/dist/components/form/nmorph-form/use-form-item-input.js +7 -8
  21. package/dist/components/form/nmorph-select/NmorphSelect.css +1 -1
  22. package/dist/components/form/nmorph-select/NmorphSelect.vue.js +135 -125
  23. package/dist/components/form/nmorph-select/NmorphSelect.vue2.js +76 -65
  24. package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js +15 -12
  25. package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js +15 -14
  26. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js +22 -21
  27. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js +16 -16
  28. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css +1 -0
  29. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js +51 -0
  30. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js +72 -0
  31. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css +1 -1
  32. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js +23 -23
  33. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +31 -25
  34. package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js +42 -18
  35. package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js +66 -19
  36. package/dist/hooks/use-common-styles.js +42 -33
  37. package/dist/hooks/use-virtual-list.js +65 -37
  38. package/dist/icons.d.ts +2 -0
  39. package/dist/icons.js +539 -0
  40. package/dist/index.es.js +656 -653
  41. package/dist/index.umd.js +63 -65
  42. package/dist/nuxt.mjs +10 -5
  43. package/dist/outside-hooks/use-nmorph-theme.js +97 -98
  44. package/dist/package.json.js +1 -1
  45. package/dist/plugin.js +43 -43
  46. package/dist/src/components/data/nmorph-calendar/types.d.ts +8 -1
  47. package/dist/src/components/data/nmorph-calendar/utils.d.ts +2 -1
  48. package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts +2 -0
  49. package/dist/src/components/feedback/nmorph-dialog/NmorphDialog.vue.d.ts +2 -0
  50. package/dist/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.d.ts +2 -0
  51. package/dist/src/components/form/nmorph-date-picker/NmorphDatePicker.vue.d.ts +13 -1
  52. package/dist/src/components/form/nmorph-select/NmorphSelect.vue.d.ts +2 -0
  53. package/dist/src/components/form/nmorph-text-input/NmorphTextInput.vue.d.ts +2 -0
  54. package/dist/src/components/navigation/index.d.ts +1 -0
  55. package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +64 -0
  56. package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +10 -0
  57. package/dist/src/components/others/nmorph-overlay/NmorphOverlay.vue.d.ts +12 -1
  58. package/dist/src/hooks/use-virtual-list.d.ts +3 -0
  59. package/dist/src/icons.d.ts +3 -0
  60. package/dist/src/styles.d.ts +2 -0
  61. package/dist/style.css +1 -1
  62. package/dist/styles.d.ts +2 -0
  63. package/dist/styles.js +7 -0
  64. package/dist/utils/theme-style.js +27 -38
  65. package/package.json +11 -1
@@ -1,24 +1,30 @@
1
1
  import './NmorphDatePicker.css';
2
2
  import { defineComponent as H, computed as l, ref as u } from "vue";
3
- import { useModifiers as k } from "../../../utils/create-modifiers.js";
4
- import { NmorphComponentHeight as w } from "../../../types/index.js";
5
- import B from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
6
- import O from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
3
+ import { useModifiers as O } from "../../../utils/create-modifiers.js";
4
+ import { NmorphComponentHeight as k } from "../../../types/index.js";
5
+ import w from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
6
+ import B from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
7
7
  import { useI18n as P } from "vue-i18n";
8
8
  import { useFormItemInput as V } from "../nmorph-form/use-form-item-input.js";
9
- import { formatDateIntl as d } from "../../data/nmorph-calendar/utils.js";
9
+ import { formatDate as s } from "../../data/nmorph-calendar/utils.js";
10
10
  import j from "../../../assets/icons/calendar.svg.js";
11
- import M from "../../basic/nmorph-icon/NmorphIcon.vue.js";
12
- import R from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
13
- const W = /* @__PURE__ */ H({
11
+ import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
12
+ import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
13
+ const X = /* @__PURE__ */ H({
14
14
  __name: "NmorphDatePicker",
15
15
  props: {
16
16
  placeholder: { type: String, required: !1, default: "" },
17
- modelValue: { type: [Date, Array], required: !0, default: null },
17
+ modelValue: { type: [Date, Array, null], required: !0, default: null },
18
18
  type: { type: null, required: !1, default: "date" },
19
19
  textSeparator: { type: String, required: !1, default: "-" },
20
20
  initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
21
21
  zIndex: { type: Number, required: !1, default: void 0 },
22
+ dateLocale: { type: [String, Array], required: !1, default: void 0 },
23
+ dateFormatOptions: { type: null, required: !1, default: void 0 },
24
+ dateFormat: { type: String, required: !1, default: "" },
25
+ dateFormatter: { type: Function, required: !1, default: void 0 },
26
+ valueSeparator: { type: String, required: !1, default: ", " },
27
+ rangeSeparator: { type: String, required: !1, default: " - " },
22
28
  id: { type: String, required: !1 },
23
29
  name: { type: String, required: !1 },
24
30
  autocomplete: { type: String, required: !1 },
@@ -29,42 +35,48 @@ const W = /* @__PURE__ */ H({
29
35
  emits: ["update:model-value"],
30
36
  setup(m, { expose: f, emit: c }) {
31
37
  f();
32
- const { t: s } = P(), r = m, { id: v, name: h, autocomplete: y } = V(r), n = l(() => r.placeholder ? r.placeholder : s("pickADate")), e = u(r.modelValue), p = c, a = u(!1), g = () => {
38
+ const { t: p } = P(), e = m, { id: y, name: v, autocomplete: h } = V(e), n = l(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = c, a = u(!1), g = () => {
33
39
  a.value = !0;
34
- }, D = () => {
40
+ }, q = () => {
35
41
  a.value = !1;
36
- }, q = l(
37
- () => k({
38
- nmorph: [w[r.height]],
39
- "nmorph-date-picker": [`${r.disabled && "disabled"}`, r.type, `${a.value && "focus"}`]
42
+ }, S = l(
43
+ () => O({
44
+ nmorph: [k[e.height]],
45
+ "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${a.value && "focus"}`]
40
46
  })
41
- ), o = u(!1), N = u(null), b = () => {
47
+ ), o = u(!1), D = u(null), N = () => {
42
48
  o.value = !1;
43
- }, I = () => {
49
+ }, b = () => {
44
50
  o.value = !o.value;
45
51
  }, _ = l(() => {
46
- if (!e.value) return n.value;
47
- if (Array.isArray(e.value)) {
48
- if (e.value.length === 0) return n.value;
49
- const t = d(e.value), x = r.type === "daterange" ? " - " : ", ";
50
- return t.join(x);
52
+ if (!t.value) return n.value;
53
+ const r = {
54
+ locale: e.dateLocale,
55
+ options: e.dateFormatOptions,
56
+ format: e.dateFormat,
57
+ formatter: e.dateFormatter
58
+ };
59
+ if (Array.isArray(t.value)) {
60
+ if (t.value.length === 0) return n.value;
61
+ const C = s(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
62
+ return C.join(x);
51
63
  } else
52
- return d(e.value);
53
- }), S = () => {
54
- const t = Array.isArray(e.value) ? [] : null;
55
- e.value = t, p("update:model-value", e.value);
56
- }, A = (t) => {
57
- e.value = t, p("update:model-value", e.value);
58
- }, C = l(() => Array.isArray(e.value) ? e.value.length > 0 : !!e.value), i = { t: s, props: r, id: v, name: h, autocomplete: y, placeholderText: n, selectedDate: e, emit: p, focus: a, focusHandler: g, blurHandler: D, modifiers: q, open: o, nmorphInputDOMRef: N, closeHandler: b, toggleOpen: I, displayValue: _, clearHandler: S, updateSelectedDateHandler: A, showClearButton: C, get NmorphDropdown() {
59
- return R;
60
- }, get NmorphIcon() {
64
+ return s(t.value, r);
65
+ }), A = () => {
66
+ const r = Array.isArray(t.value) ? [] : null;
67
+ t.value = r, d("update:model-value", t.value);
68
+ }, I = (r) => {
69
+ t.value = r, d("update:model-value", t.value);
70
+ }, F = l(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), i = { t: p, props: e, id: y, name: v, autocomplete: h, placeholderText: n, selectedDate: t, emit: d, focus: a, focusHandler: g, blurHandler: q, modifiers: S, open: o, nmorphInputDOMRef: D, closeHandler: N, toggleOpen: b, displayValue: _, clearHandler: A, updateSelectedDateHandler: I, showClearButton: F, get NmorphDropdown() {
61
71
  return M;
72
+ }, get NmorphIcon() {
73
+ return L;
62
74
  }, get NmorphIconCalendar() {
63
75
  return j;
64
- }, NmorphClearButton: B, NmorphDatePickerContent: O };
76
+ }, NmorphClearButton: w, NmorphDatePickerContent: B };
65
77
  return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
66
78
  }
67
79
  });
68
80
  export {
69
- W as default
81
+ X as default
70
82
  };
@@ -7,7 +7,7 @@ const O = /* @__PURE__ */ H({
7
7
  __name: "NmorphDatePickerContent",
8
8
  props: {
9
9
  initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
10
- selectedValues: { type: [Date, Array], required: !0 },
10
+ selectedValues: { type: [Date, Array, null], required: !0 },
11
11
  type: { type: null, required: !1, default: "date" }
12
12
  },
13
13
  emits: ["update-selected-value"],
@@ -1,15 +1,14 @@
1
- import { inject as i, computed as e } from "vue";
2
- import { generateUUID as r } from "../../../utils/common.js";
3
- const d = "nmorph-form-item-input-data", p = (t) => {
4
- const o = i(d, void 0), a = r(), n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), c = e(() => t.autocomplete || o?.autocomplete.value || void 0), u = e(() => t.tabindex ?? 0);
1
+ import { inject as d, useId as i, computed as e } from "vue";
2
+ const l = "nmorph-form-item-input-data", I = (t) => {
3
+ const o = d(l, void 0), a = `nmorph-${i()}`, n = e(() => t.id || o?.id.value || a), m = e(() => t.name || o?.name.value || n.value), u = e(() => t.autocomplete || o?.autocomplete.value || void 0), c = e(() => t.tabindex ?? 0);
5
4
  return {
6
5
  id: n,
7
6
  name: m,
8
- autocomplete: c,
9
- tabindex: u
7
+ autocomplete: u,
8
+ tabindex: c
10
9
  };
11
10
  };
12
11
  export {
13
- d as nmorphFormItemInputDataKey,
14
- p as useFormItemInput
12
+ l as nmorphFormItemInputDataKey,
13
+ I as useFormItemInput
15
14
  };
@@ -1 +1 @@
1
- .nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}
1
+ .nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select .nmorph-select__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.nmorph-select.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}
@@ -1,9 +1,9 @@
1
1
  import './NmorphSelect.css';
2
- import y from "./NmorphSelect.vue2.js";
3
- import { openBlock as o, createElementBlock as r, normalizeClass as g, createElementVNode as t, withKeys as a, Fragment as i, renderList as c, withModifiers as u, toDisplayString as _, createBlock as n, mergeProps as d, createVNode as v, withCtx as h, normalizeStyle as s, renderSlot as w, createCommentVNode as k } from "vue";
2
+ import w from "./NmorphSelect.vue2.js";
3
+ import { openBlock as r, createElementBlock as n, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as l, Fragment as d, renderList as c, toDisplayString as _, createBlock as i, mergeProps as h, createVNode as f, withCtx as m, normalizeStyle as s, renderSlot as b, createCommentVNode as k } from "vue";
4
4
  /* empty css */
5
- import x from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled"], b = ["value"], H = {
5
+ import H from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], u = ["value"], I = {
7
7
  key: 0,
8
8
  class: "nmorph-select__selected-value"
9
9
  }, O = {
@@ -12,15 +12,12 @@ const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete"
12
12
  }, C = {
13
13
  key: 2,
14
14
  class: "nmorph-select__selected-value"
15
- }, D = {
16
- ref: "optionsDOMRef",
17
- class: "nmorph-select__options"
18
- };
19
- function I(f, m, p, e, M, z) {
20
- return o(), r(
15
+ }, D = ["id"];
16
+ function E(p, v, y, e, M, R) {
17
+ return r(), n(
21
18
  "div",
22
19
  {
23
- class: g(e.modifiers)
20
+ class: x(e.modifiers)
24
21
  },
25
22
  [
26
23
  t("div", N, [
@@ -30,22 +27,29 @@ function I(f, m, p, e, M, z) {
30
27
  autocomplete: e.autocomplete,
31
28
  tabindex: e.tabindex,
32
29
  disabled: e.disabledInput,
30
+ role: "combobox",
31
+ "aria-expanded": e.open,
32
+ "aria-controls": e.listboxId,
33
+ "aria-activedescendant": e.open && e.currentFocusedEl ? e.getOptionId(e.currentFocusedEl) : void 0,
33
34
  onFocus: e.focusHandler,
34
35
  onBlur: e.blurHandler,
35
36
  onKeydown: [
36
- a(e.spaceHandler, ["space"]),
37
- a(e.arrowDownHandler, ["arrow-down"]),
38
- a(e.arrowUpHandler, ["arrow-up"]),
39
- a(e.enterHandler, ["enter"])
37
+ a(l(e.spaceHandler, ["prevent"]), ["space"]),
38
+ a(l(e.arrowDownHandler, ["prevent"]), ["arrow-down"]),
39
+ a(l(e.arrowUpHandler, ["prevent"]), ["arrow-up"]),
40
+ a(l(e.enterHandler, ["prevent"]), ["enter"]),
41
+ a(l(e.escapeHandler, ["prevent"]), ["escape"]),
42
+ a(l(e.homeHandler, ["prevent"]), ["home"]),
43
+ a(l(e.endHandler, ["prevent"]), ["end"])
40
44
  ]
41
45
  }, [
42
- (o(!0), r(
43
- i,
46
+ (r(!0), n(
47
+ d,
44
48
  null,
45
- c(e.nativeOptions, (l) => (o(), r("option", {
46
- key: l,
47
- value: l
48
- }, null, 8, b))),
49
+ c(e.nativeOptions, (o) => (r(), n("option", {
50
+ key: o,
51
+ value: o
52
+ }, null, 8, u))),
49
53
  128
50
54
  /* KEYED_FRAGMENT */
51
55
  ))
@@ -55,28 +59,29 @@ function I(f, m, p, e, M, z) {
55
59
  {
56
60
  ref: "nmorphSelectDOMRef",
57
61
  class: "nmorph-select__selected-values-line",
58
- onClick: u(e.clickHandler, ["stop"])
62
+ "aria-hidden": "true",
63
+ onClick: l(e.clickHandler, ["stop"])
59
64
  },
60
65
  [
61
- typeof e.initialValue == "string" ? (o(), r(
66
+ typeof e.initialValue == "string" ? (r(), n(
62
67
  "div",
63
- H,
68
+ I,
64
69
  _(e.selectedValueTitle),
65
70
  1
66
71
  /* TEXT */
67
- )) : e.initialValue.length === 0 ? (o(), r(
72
+ )) : e.initialValue.length === 0 ? (r(), n(
68
73
  "div",
69
74
  O,
70
75
  _(e.computedNoElementPlaceholder),
71
76
  1
72
77
  /* TEXT */
73
- )) : (o(), r("div", C, [
74
- (o(!0), r(
75
- i,
78
+ )) : (r(), n("div", C, [
79
+ (r(!0), n(
80
+ d,
76
81
  null,
77
- c(e.tags, (l) => (o(), n(e.NmorphTagItem, d({
78
- key: l.value
79
- }, { ref_for: !0 }, l, {
82
+ c(e.tags, (o) => (r(), i(e.NmorphTagItem, h({
83
+ key: o.value
84
+ }, { ref_for: !0 }, o, {
80
85
  transparent: "",
81
86
  removable: e.tags.length > 1 || !e.props.valueRequired,
82
87
  height: "thin",
@@ -86,9 +91,9 @@ function I(f, m, p, e, M, z) {
86
91
  /* KEYED_FRAGMENT */
87
92
  ))
88
93
  ])),
89
- v(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
90
- default: h(() => [
91
- e.props.loading ? (o(), n(e.NmorphIconLoader, { key: 0 })) : (o(), n(e.NmorphIconChevronDown, { key: 1 }))
94
+ f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
95
+ default: m(() => [
96
+ e.props.loading ? (r(), i(e.NmorphIconLoader, { key: 0 })) : (r(), i(e.NmorphIconChevronDown, { key: 1 }))
92
97
  ]),
93
98
  _: 1
94
99
  /* STABLE */
@@ -98,7 +103,7 @@ function I(f, m, p, e, M, z) {
98
103
  /* NEED_PATCH */
99
104
  )
100
105
  ]),
101
- e.nmorphSelectDOMRef && !e.props.disabled ? (o(), n(e.NmorphDropdown, {
106
+ e.nmorphSelectDOMRef && !e.props.disabled ? (r(), i(e.NmorphDropdown, {
102
107
  key: 0,
103
108
  open: e.open && !e.props.loading,
104
109
  "relative-element": e.nmorphSelectDOMRef,
@@ -107,105 +112,110 @@ function I(f, m, p, e, M, z) {
107
112
  "min-width": e.optionsMinWidth,
108
113
  "max-width": "calc(100vw - 16px)",
109
114
  "z-index": e.props.zIndex,
110
- onOnOutsideClick: e.closeHandler
115
+ "aria-label": e.name,
116
+ onOnOutsideClick: e.closeHandler,
117
+ onOnEscapeKeydown: e.escapeHandler
111
118
  }, {
112
- default: h(() => [
113
- t(
114
- "div",
115
- D,
116
- [
117
- e.props.loading ? (o(), n(e.NmorphIcon, {
118
- key: 0,
119
- class: "nmorph-select__chevron",
120
- size: "medium"
121
- }, {
122
- default: h(() => [
123
- v(e.NmorphIconChevronDown)
124
- ]),
125
- _: 1
126
- /* STABLE */
127
- })) : e.virtualEnabled ? (o(), r(
128
- "div",
129
- {
130
- key: 1,
131
- ref: e.virtualList.containerRef,
132
- class: "nmorph-select__virtual-list",
133
- style: s({ maxHeight: e.virtualMaxHeight }),
134
- onScroll: m[0] || (m[0] = (...l) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...l))
135
- },
136
- [
137
- t(
138
- "div",
139
- {
140
- class: "nmorph-select__virtual-spacer",
141
- style: s(e.virtualSpacerStyle)
142
- },
143
- [
144
- t(
145
- "div",
146
- {
147
- class: "nmorph-select__virtual-content",
148
- style: s(e.virtualContentStyle)
149
- },
150
- [
151
- (o(!0), r(
152
- i,
153
- null,
154
- c(e.virtualOptions, (l) => (o(), n(e.NmorphSelectOption, d({
155
- key: l.index
156
- }, { ref_for: !0 }, l.item, {
157
- focused: l.item.value === e.currentFocusedEl,
158
- height: e.props.height
159
- }), null, 16, ["focused", "height"]))),
160
- 128
161
- /* KEYED_FRAGMENT */
162
- ))
163
- ],
164
- 4
165
- /* STYLE */
166
- )
167
- ],
168
- 4
169
- /* STYLE */
170
- )
171
- ],
172
- 36
173
- /* STYLE, NEED_HYDRATION */
174
- )) : (o(), r(
175
- i,
176
- { key: 2 },
177
- [
178
- (o(!0), r(
179
- i,
180
- null,
181
- c(p.options, (l) => (o(), n(e.NmorphSelectOption, d({
182
- key: l.value
183
- }, { ref_for: !0 }, l, {
184
- focused: l.value === e.currentFocusedEl,
185
- height: e.props.height
186
- }), null, 16, ["focused", "height"]))),
187
- 128
188
- /* KEYED_FRAGMENT */
189
- )),
190
- w(f.$slots, "default")
191
- ],
192
- 64
193
- /* STABLE_FRAGMENT */
194
- ))
195
- ],
196
- 512
197
- /* NEED_PATCH */
198
- )
119
+ default: m(() => [
120
+ t("div", {
121
+ id: e.listboxId,
122
+ ref: "optionsDOMRef",
123
+ class: "nmorph-select__options",
124
+ role: "listbox"
125
+ }, [
126
+ e.props.loading ? (r(), i(e.NmorphIcon, {
127
+ key: 0,
128
+ class: "nmorph-select__chevron",
129
+ size: "medium"
130
+ }, {
131
+ default: m(() => [
132
+ f(e.NmorphIconChevronDown)
133
+ ]),
134
+ _: 1
135
+ /* STABLE */
136
+ })) : e.virtualEnabled ? (r(), n(
137
+ "div",
138
+ {
139
+ key: 1,
140
+ ref: e.virtualList.containerRef,
141
+ class: "nmorph-select__virtual-list",
142
+ style: s({ maxHeight: e.virtualMaxHeight }),
143
+ onScroll: v[0] || (v[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
144
+ },
145
+ [
146
+ t(
147
+ "div",
148
+ {
149
+ class: "nmorph-select__virtual-spacer",
150
+ style: s(e.virtualSpacerStyle)
151
+ },
152
+ [
153
+ t(
154
+ "div",
155
+ {
156
+ class: "nmorph-select__virtual-content",
157
+ style: s(e.virtualContentStyle)
158
+ },
159
+ [
160
+ (r(!0), n(
161
+ d,
162
+ null,
163
+ c(e.virtualOptions, (o) => (r(), i(e.NmorphSelectOption, h({
164
+ id: e.getOptionId(o.item.value),
165
+ ref_for: !0,
166
+ ref: (g) => e.setVirtualOptionRef(g, o.index),
167
+ key: o.index
168
+ }, { ref_for: !0 }, o.item, {
169
+ focused: o.item.value === e.currentFocusedEl,
170
+ height: e.props.height
171
+ }), null, 16, ["id", "focused", "height"]))),
172
+ 128
173
+ /* KEYED_FRAGMENT */
174
+ ))
175
+ ],
176
+ 4
177
+ /* STYLE */
178
+ )
179
+ ],
180
+ 4
181
+ /* STYLE */
182
+ )
183
+ ],
184
+ 36
185
+ /* STYLE, NEED_HYDRATION */
186
+ )) : (r(), n(
187
+ d,
188
+ { key: 2 },
189
+ [
190
+ (r(!0), n(
191
+ d,
192
+ null,
193
+ c(y.options, (o) => (r(), i(e.NmorphSelectOption, h({
194
+ id: e.getOptionId(o.value),
195
+ key: o.value
196
+ }, { ref_for: !0 }, o, {
197
+ focused: o.value === e.currentFocusedEl,
198
+ height: e.props.height
199
+ }), null, 16, ["id", "focused", "height"]))),
200
+ 128
201
+ /* KEYED_FRAGMENT */
202
+ )),
203
+ b(p.$slots, "default")
204
+ ],
205
+ 64
206
+ /* STABLE_FRAGMENT */
207
+ ))
208
+ ], 8, D)
199
209
  ]),
200
210
  _: 3
201
211
  /* FORWARDED */
202
- }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : k("v-if", !0)
212
+ }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
203
213
  ],
204
214
  2
205
215
  /* CLASS */
206
216
  );
207
217
  }
208
- const B = /* @__PURE__ */ x(y, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
218
+ const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
209
219
  export {
210
220
  B as default
211
221
  };