@nmorph/nmorph-ui-kit 2.2.35 → 2.2.36

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 (108) hide show
  1. package/dist/assets/icons/baseball.svg.js +28 -0
  2. package/dist/assets/icons/basketball.svg.js +21 -0
  3. package/dist/assets/icons/bowl.svg.js +21 -0
  4. package/dist/assets/icons/box.svg.js +35 -0
  5. package/dist/assets/icons/briefcase.svg.js +21 -0
  6. package/dist/assets/icons/brush-filled.svg.js +21 -0
  7. package/dist/assets/icons/brush.svg.js +21 -0
  8. package/dist/assets/icons/camera-filled.svg.js +21 -0
  9. package/dist/assets/icons/chevron-double-left.svg.js +28 -0
  10. package/dist/assets/icons/chevron-double-right.svg.js +28 -0
  11. package/dist/assets/icons/chevron-double-up.svg.js +28 -0
  12. package/dist/assets/icons/chevron-left.svg.js +21 -0
  13. package/dist/assets/icons/chevron-right.svg.js +21 -0
  14. package/dist/assets/icons/chevron-up.svg.js +21 -0
  15. package/dist/assets/icons/chicken.svg.js +21 -0
  16. package/dist/assets/icons/clipboard-check.svg.js +25 -0
  17. package/dist/assets/icons/clipboard.svg.js +25 -0
  18. package/dist/assets/icons/close-bold.svg.js +21 -0
  19. package/dist/assets/icons/cold-drink.svg.js +21 -0
  20. package/dist/assets/icons/comment.svg.js +21 -0
  21. package/dist/assets/icons/database.svg.js +25 -0
  22. package/dist/assets/icons/drag-handle.svg.js +21 -0
  23. package/dist/assets/icons/external-link.svg.js +28 -0
  24. package/dist/assets/icons/filter-off.svg.js +28 -0
  25. package/dist/assets/icons/fingerprint.svg.js +44 -0
  26. package/dist/assets/icons/folder-remove.svg.js +21 -0
  27. package/dist/assets/icons/goblet.svg.js +21 -0
  28. package/dist/assets/icons/ice-tea.svg.js +21 -0
  29. package/dist/assets/icons/inbox.svg.js +25 -0
  30. package/dist/assets/icons/mail.svg.js +25 -0
  31. package/dist/assets/icons/odometer.svg.js +35 -0
  32. package/dist/assets/icons/open.svg.js +28 -0
  33. package/dist/assets/icons/pagination.svg.js +8 -0
  34. package/dist/assets/icons/redo.svg.js +21 -0
  35. package/dist/assets/icons/save.svg.js +25 -0
  36. package/dist/assets/icons/server.svg.js +32 -0
  37. package/dist/assets/icons/shield-check.svg.js +25 -0
  38. package/dist/assets/icons/shield.svg.js +25 -0
  39. package/dist/assets/icons/sliders.svg.js +31 -0
  40. package/dist/assets/icons/stopwatch.svg.js +28 -0
  41. package/dist/assets/icons/suitcase-line.svg.js +22 -0
  42. package/dist/assets/icons/undo.svg.js +21 -0
  43. package/dist/assets/icons/video-camera.svg.js +21 -0
  44. package/dist/components/basic/nmorph-button/NmorphButton.vue.js +10 -10
  45. package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +5 -5
  46. package/dist/components/basic/nmorph-icon/NmorphIcons.js +617 -529
  47. package/dist/components/basic/nmorph-layout/NmorphLayout.css +1 -0
  48. package/dist/components/basic/nmorph-layout/NmorphLayout.vue.js +50 -0
  49. package/dist/components/basic/nmorph-layout/NmorphLayout.vue2.js +28 -0
  50. package/dist/components/basic/nmorph-space/NmorphSpace.css +1 -0
  51. package/dist/components/basic/nmorph-space/NmorphSpace.vue.js +21 -0
  52. package/dist/components/basic/nmorph-space/NmorphSpace.vue2.js +45 -0
  53. package/dist/components/data/nmorph-avatar/NmorphAvatar.vue.js +15 -15
  54. package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js +1 -1
  55. package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js +31 -31
  56. package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js +36 -38
  57. package/dist/components/data/nmorph-qr-code/NmorphQRCode.css +1 -0
  58. package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue.js +59 -0
  59. package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue2.js +50 -0
  60. package/dist/components/data/nmorph-qr-code/qr-code.js +568 -0
  61. package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.css +1 -0
  62. package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue.js +86 -0
  63. package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js +60 -0
  64. package/dist/components/feedback/nmorph-drawer/NmorphDrawer.css +1 -0
  65. package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue.js +81 -0
  66. package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js +47 -0
  67. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js +30 -30
  68. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +57 -54
  69. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js +13 -13
  70. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js +28 -27
  71. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue.js +16 -16
  72. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-year-month-picker/NmorphYearMonthPicker.vue2.js +20 -17
  73. package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue.js +21 -21
  74. package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js +92 -84
  75. package/dist/components/form/nmorph-select/NmorphSelect.vue.js +5 -5
  76. package/dist/components/form/nmorph-select/NmorphSelect.vue2.js +1 -1
  77. package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js +1 -1
  78. package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js +16 -16
  79. package/dist/components/form/nmorph-textarea/NmorphTextarea.css +1 -0
  80. package/dist/components/form/nmorph-textarea/NmorphTextarea.vue.js +41 -0
  81. package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js +67 -0
  82. package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css +1 -1
  83. package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js +38 -28
  84. package/dist/icons.js +621 -533
  85. package/dist/index.es.js +780 -678
  86. package/dist/index.umd.js +27 -27
  87. package/dist/package.json.js +1 -1
  88. package/dist/src/components/basic/index.d.ts +2 -0
  89. package/dist/src/components/basic/nmorph-icon/NmorphIcons.d.ts +48 -3
  90. package/dist/src/components/basic/nmorph-layout/NmorphLayout.vue.d.ts +22 -0
  91. package/dist/src/components/basic/nmorph-space/NmorphSpace.vue.d.ts +33 -0
  92. package/dist/src/components/data/index.d.ts +4 -0
  93. package/dist/src/components/data/nmorph-qr-code/NmorphQRCode.vue.d.ts +34 -0
  94. package/dist/src/components/data/nmorph-qr-code/qr-code.d.ts +12 -0
  95. package/dist/src/components/data/nmorph-virtual-list/NmorphVirtualList.vue.d.ts +46 -0
  96. package/dist/src/components/data/nmorph-virtual-list/types.d.ts +4 -0
  97. package/dist/src/components/feedback/index.d.ts +1 -0
  98. package/dist/src/components/feedback/nmorph-drawer/NmorphDrawer.vue.d.ts +40 -0
  99. package/dist/src/components/form/index.d.ts +1 -0
  100. package/dist/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue.d.ts +1 -1
  101. package/dist/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.d.ts +2 -2
  102. package/dist/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue.d.ts +1 -1
  103. package/dist/src/components/form/nmorph-textarea/NmorphTextarea.vue.d.ts +48 -0
  104. package/dist/src/components/navigation/nmorph-backtop/NmorphBacktop.vue.d.ts +1 -1
  105. package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +1 -1
  106. package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +1 -1
  107. package/dist/style.css +1 -1
  108. package/package.json +1 -1
@@ -0,0 +1,81 @@
1
+ import './NmorphDrawer.css';
2
+ import c from "./NmorphDrawer.vue2.js";
3
+ import { openBlock as e, createBlock as p, withCtx as n, createElementVNode as l, normalizeStyle as m, normalizeClass as d, createElementBlock as a, renderSlot as t, toDisplayString as _, createVNode as i, createCommentVNode as s } from "vue";
4
+ /* empty css */
5
+ import h from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const f = ["aria-label"], w = {
7
+ key: 0,
8
+ class: "nmorph-drawer__header"
9
+ }, b = { class: "nmorph-drawer__title" }, y = ["aria-label"], k = {
10
+ key: 1,
11
+ class: "nmorph-drawer__footer"
12
+ };
13
+ function v(r, C, N, o, z, O) {
14
+ return e(), p(o.NmorphOverlay, {
15
+ show: o.props.modelValue,
16
+ "z-index": o.props.zIndex,
17
+ "teleport-to": o.props.teleportTo,
18
+ "disabled-teleport": o.props.disabledTeleport,
19
+ "close-on-escape": o.props.closeOnEscape,
20
+ "trap-focus": "",
21
+ onOnOutsideClick: o.overlayClickHandler,
22
+ onOnEscapeKeydown: o.closeHandler
23
+ }, {
24
+ default: n(() => [
25
+ l("aside", {
26
+ class: d(o.modifiers),
27
+ style: m(o.drawerStyle),
28
+ role: "dialog",
29
+ "aria-modal": "true",
30
+ "aria-label": o.props.title || void 0
31
+ }, [
32
+ o.hasHeader ? (e(), a("div", w, [
33
+ t(r.$slots, "header", {}, () => [
34
+ l(
35
+ "div",
36
+ b,
37
+ _(o.props.title),
38
+ 1
39
+ /* TEXT */
40
+ ),
41
+ o.props.showClose ? (e(), a("button", {
42
+ key: 0,
43
+ class: "nmorph-drawer__close",
44
+ type: "button",
45
+ "aria-label": o.props.title ? `Close ${o.props.title}` : "Close drawer",
46
+ onClick: o.closeHandler
47
+ }, [
48
+ i(o.NmorphIcon, null, {
49
+ default: n(() => [
50
+ i(o.NmorphIconCross)
51
+ ]),
52
+ _: 1
53
+ /* STABLE */
54
+ })
55
+ ], 8, y)) : s("v-if", !0)
56
+ ])
57
+ ])) : s("v-if", !0),
58
+ l(
59
+ "div",
60
+ {
61
+ class: d(["nmorph-drawer__content", o.props.contentClass])
62
+ },
63
+ [
64
+ t(r.$slots, "default")
65
+ ],
66
+ 2
67
+ /* CLASS */
68
+ ),
69
+ o.slots.footer ? (e(), a("div", k, [
70
+ t(r.$slots, "footer")
71
+ ])) : s("v-if", !0)
72
+ ], 14, f)
73
+ ]),
74
+ _: 3
75
+ /* FORWARDED */
76
+ }, 8, ["show", "z-index", "teleport-to", "disabled-teleport", "close-on-escape"]);
77
+ }
78
+ const V = /* @__PURE__ */ h(c, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-drawer/NmorphDrawer.vue"]]);
79
+ export {
80
+ V as default
81
+ };
@@ -0,0 +1,47 @@
1
+ import './NmorphDrawer.css';
2
+ import { defineComponent as y, useSlots as h, computed as o } from "vue";
3
+ import { useModifiers as q } from "../../../utils/create-modifiers.js";
4
+ import _ from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
5
+ import g from "../../basic/nmorph-icon/NmorphIcon.vue.js";
6
+ import N from "../../../assets/icons/cross.svg.js";
7
+ const w = /* @__PURE__ */ y({
8
+ __name: "NmorphDrawer",
9
+ props: {
10
+ modelValue: { type: Boolean, required: !1, default: !1 },
11
+ title: { type: String, required: !1, default: "" },
12
+ placement: { type: String, required: !1, default: "right" },
13
+ size: { type: [Number, String], required: !1, default: "360px" },
14
+ showClose: { type: Boolean, required: !1, default: !0 },
15
+ closeOnOverlay: { type: Boolean, required: !1, default: !0 },
16
+ closeOnEscape: { type: Boolean, required: !1, default: !0 },
17
+ zIndex: { type: Number, required: !1, default: void 0 },
18
+ teleportTo: { type: null, required: !1, default: "body" },
19
+ disabledTeleport: { type: Boolean, required: !1, default: !1 },
20
+ contentClass: { type: String, required: !1, default: "" }
21
+ },
22
+ emits: ["on-close", "update:model-value"],
23
+ setup(p, { expose: u, emit: d }) {
24
+ u();
25
+ const e = p, r = d, l = h(), i = o(
26
+ () => q({
27
+ "nmorph-drawer": [e.placement, `${e.modelValue && "open"}`]
28
+ })
29
+ ), s = (t) => typeof t == "number" ? `${t}px` : t, f = o(() => ({
30
+ "--nmorph-drawer-size": s(e.size)
31
+ })), a = () => {
32
+ r("on-close"), r("update:model-value", !1);
33
+ }, m = () => {
34
+ e.closeOnOverlay && a();
35
+ }, c = o(() => !!(l.header || e.title || e.showClose)), n = { props: e, emit: r, slots: l, modifiers: i, getCssSize: s, drawerStyle: f, closeHandler: a, overlayClickHandler: m, hasHeader: c, get NmorphIcon() {
36
+ return g;
37
+ }, get NmorphIconCross() {
38
+ return N;
39
+ }, get NmorphOverlay() {
40
+ return _;
41
+ } };
42
+ return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
43
+ }
44
+ });
45
+ export {
46
+ w as default
47
+ };
@@ -1,6 +1,6 @@
1
1
  import './NmorphAutocomplete.css';
2
2
  import v from "./NmorphAutocomplete.vue2.js";
3
- import { openBlock as l, createElementBlock as t, normalizeStyle as i, normalizeClass as n, createElementVNode as a, createVNode as c, createBlock as y, withCtx as p, renderSlot as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
3
+ 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";
4
4
  /* empty css */
5
5
  import k from "../../../_virtual/_plugin-vue_export-helper.js";
6
6
  const g = { class: "nmorph-autocomplete__input-content" }, b = {
@@ -9,34 +9,34 @@ const g = { class: "nmorph-autocomplete__input-content" }, b = {
9
9
  }, H = {
10
10
  key: 0,
11
11
  class: "nmorph-autocomplete__loading"
12
- }, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
13
- function V(d, s, w, e, S, A) {
12
+ }, N = ["id"], V = ["id", "aria-selected", "onClick"], C = ["id"], I = ["id", "aria-selected", "onClick"];
13
+ function O(c, i, w, e, D, S) {
14
14
  return l(), t(
15
15
  "div",
16
16
  {
17
- class: n(e.modifiers),
18
- style: i(e.styles)
17
+ class: a(e.modifiers),
18
+ style: n(e.styles)
19
19
  },
20
20
  [
21
- a("div", g, [
22
- a(
21
+ d("div", g, [
22
+ d(
23
23
  "div",
24
24
  b,
25
25
  [
26
- c(e.NmorphTextInput, {
26
+ m(e.NmorphTextInput, {
27
27
  id: e.props.id,
28
+ modelValue: e.inputValue,
29
+ "onUpdate:modelValue": i[0] || (i[0] = (o) => e.inputValue = o),
28
30
  name: e.props.name,
29
31
  autocomplete: e.props.autocomplete,
30
32
  height: e.props.height,
31
33
  disabled: e.props.disabled,
32
- "model-value": e.initialValue,
33
34
  placeholder: e.props.placeholder,
34
35
  clearable: e.props.clearable,
35
36
  "input-attrs": e.inputAttrs,
36
37
  onFocus: e.focusHandler,
37
- onKeydown: e.keydownHandler,
38
- "onUpdate:modelValue": e.updateValueHandler
39
- }, null, 8, ["id", "name", "autocomplete", "height", "disabled", "model-value", "placeholder", "clearable", "input-attrs"])
38
+ onKeydown: e.keydownHandler
39
+ }, null, 8, ["id", "modelValue", "name", "autocomplete", "height", "disabled", "placeholder", "clearable", "input-attrs"])
40
40
  ],
41
41
  512
42
42
  /* NEED_PATCH */
@@ -56,10 +56,10 @@ function V(d, s, w, e, S, A) {
56
56
  }, {
57
57
  default: p(() => [
58
58
  e.loader ? (l(), t("div", H, [
59
- m(d.$slots, "loader", {}, () => [
60
- c(e.NmorphIcon, { size: "large" }, {
59
+ s(c.$slots, "loader", {}, () => [
60
+ m(e.NmorphIcon, { size: "large" }, {
61
61
  default: p(() => [
62
- c(e.NmorphIconLoader)
62
+ m(e.NmorphIconLoaderDots)
63
63
  ]),
64
64
  _: 1
65
65
  /* STABLE */
@@ -69,23 +69,23 @@ function V(d, s, w, e, S, A) {
69
69
  key: 1,
70
70
  id: e.listboxId,
71
71
  ref: e.virtualList.containerRef,
72
- class: n(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
73
- style: i({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
72
+ class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
73
+ style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
74
74
  role: "listbox",
75
- onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
75
+ onScroll: i[1] || (i[1] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
76
76
  }, [
77
- a(
77
+ d(
78
78
  "div",
79
79
  {
80
80
  class: "nmorph-autocomplete__virtual-spacer",
81
- style: i(e.virtualSpacerStyle)
81
+ style: n(e.virtualSpacerStyle)
82
82
  },
83
83
  [
84
- a(
84
+ d(
85
85
  "div",
86
86
  {
87
87
  class: "nmorph-autocomplete__virtual-content",
88
- style: i(e.virtualContentStyle)
88
+ style: n(e.virtualContentStyle)
89
89
  },
90
90
  [
91
91
  (l(!0), t(
@@ -96,7 +96,7 @@ function V(d, s, w, e, S, A) {
96
96
  ref_for: !0,
97
97
  ref: (r) => e.setVirtualItemRef(r, o.index),
98
98
  key: o.index,
99
- class: n(["nmorph-autocomplete__list-item", [
99
+ class: a(["nmorph-autocomplete__list-item", [
100
100
  e.optionHeightModifiers,
101
101
  { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }
102
102
  ]]),
@@ -104,7 +104,7 @@ function V(d, s, w, e, S, A) {
104
104
  "aria-selected": o.index === e.currentIndex,
105
105
  onClick: () => e.clickHandler(o.item)
106
106
  }, [
107
- m(d.$slots, "default", {
107
+ s(c.$slots, "default", {
108
108
  scope: o.item
109
109
  }, () => [
110
110
  f(
@@ -113,7 +113,7 @@ function V(d, s, w, e, S, A) {
113
113
  /* TEXT */
114
114
  )
115
115
  ])
116
- ], 10, C))),
116
+ ], 10, V))),
117
117
  128
118
118
  /* KEYED_FRAGMENT */
119
119
  ))
@@ -137,23 +137,23 @@ function V(d, s, w, e, S, A) {
137
137
  h(e.filteredList, (o, r) => (l(), t("div", {
138
138
  id: e.getOptionId(r),
139
139
  key: r,
140
- class: n(["nmorph-autocomplete__list-item", [e.optionHeightModifiers, { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]]),
140
+ class: a(["nmorph-autocomplete__list-item", [e.optionHeightModifiers, { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]]),
141
141
  role: "option",
142
142
  "aria-selected": r === e.currentIndex,
143
143
  onClick: () => e.clickHandler(o)
144
144
  }, [
145
- m(d.$slots, "default", { scope: o }, () => [
145
+ s(c.$slots, "default", { scope: o }, () => [
146
146
  f(
147
147
  u(o.value),
148
148
  1
149
149
  /* TEXT */
150
150
  )
151
151
  ])
152
- ], 10, O))),
152
+ ], 10, I))),
153
153
  128
154
154
  /* KEYED_FRAGMENT */
155
155
  ))
156
- ], 8, I))
156
+ ], 8, C))
157
157
  ]),
158
158
  _: 3
159
159
  /* FORWARDED */
@@ -163,7 +163,7 @@ function V(d, s, w, e, S, A) {
163
163
  /* CLASS, STYLE */
164
164
  );
165
165
  }
166
- const R = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
166
+ const R = /* @__PURE__ */ k(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
167
167
  export {
168
168
  R as default
169
169
  };
@@ -1,14 +1,14 @@
1
1
  import './NmorphAutocomplete.css';
2
- import { defineComponent as J, ref as s, computed as a, watch as c, nextTick as K } from "vue";
3
- import { useModifiers as _ } from "../../../utils/create-modifiers.js";
4
- import { NmorphComponentHeight as Q } from "../../../types/index.js";
5
- import { useVirtualList as W } from "../../../hooks/use-virtual-list.js";
6
- import { useZIndex as X } from "../../../hooks/use-z-index.js";
7
- import ee from "../nmorph-text-input/NmorphTextInput.vue.js";
8
- import te from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
9
- import ae from "../../basic/nmorph-icon/NmorphIcon.vue.js";
10
- import le from "../../../assets/icons/loader.svg.js";
11
- const fe = /* @__PURE__ */ J({
2
+ import { defineComponent as K, ref as s, computed as t, watch as c, nextTick as Q } from "vue";
3
+ import { useModifiers as M } from "../../../utils/create-modifiers.js";
4
+ import { NmorphComponentHeight as W } from "../../../types/index.js";
5
+ import { useVirtualList as X } from "../../../hooks/use-virtual-list.js";
6
+ import { useZIndex as ee } from "../../../hooks/use-z-index.js";
7
+ import te from "../nmorph-text-input/NmorphTextInput.vue.js";
8
+ import ae from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
9
+ import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
10
+ import re from "../../../assets/icons/loader.svg.js";
11
+ const ve = /* @__PURE__ */ K({
12
12
  __name: "NmorphAutocomplete",
13
13
  props: {
14
14
  modelValue: { type: String, required: !1, default: "" },
@@ -30,89 +30,92 @@ const fe = /* @__PURE__ */ J({
30
30
  tabindex: { type: Number, required: !1 }
31
31
  },
32
32
  emits: ["update:model-value", "select"],
33
- setup(M, { expose: O, emit: $ }) {
34
- O();
35
- const t = M, o = s(t.modelValue), d = $, L = a(
36
- () => _({
33
+ setup(O, { expose: $, emit: L }) {
34
+ $();
35
+ const a = O, o = s(a.modelValue), p = L, T = t(
36
+ () => M({
37
37
  "nmorph-autocomplete": [`${l.value && "open"}`]
38
38
  })
39
- ), i = s(!1), T = (e) => {
40
- i.value = e === "", o.value = e, l.value = !i.value && r.value.length > 0, u.value = 0, d("update:model-value", o.value);
41
- }, l = s(!1), A = s(null), y = () => {
39
+ ), i = s(!1), y = (e) => {
40
+ i.value = e === "", o.value = e, l.value = !i.value && r.value.length > 0, u.value = 0, p("update:model-value", o.value);
41
+ }, V = t({
42
+ get: () => o.value,
43
+ set: y
44
+ }), l = s(!1), A = s(null), b = () => {
42
45
  i.value = !0, l.value = !1;
43
- }, r = a(() => t.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(o.value.toLowerCase())))), f = a(() => t.virtual && r.value.length > 0), b = a(() => ({
46
+ }, r = t(() => a.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(o.value.toLowerCase())))), f = t(() => a.virtual && r.value.length > 0), x = t(() => ({
44
47
  basic: 30,
45
48
  thick: 38,
46
49
  thin: 22
47
- })[t.height || "basic"]), x = a(() => t.virtualItemHeight || b.value), I = a(() => t.virtualOverscan), H = a(() => t.virtualDynamicHeight), n = W(r, {
50
+ })[a.height || "basic"]), I = t(() => a.virtualItemHeight || x.value), H = t(() => a.virtualOverscan), q = t(() => a.virtualDynamicHeight), n = X(r, {
48
51
  enabled: f,
49
- itemHeight: x,
50
- overscan: I,
51
- dynamic: H
52
- }), V = a(() => n.virtualItems.value), z = a(() => ({
52
+ itemHeight: I,
53
+ overscan: H,
54
+ dynamic: q
55
+ }), z = t(() => n.virtualItems.value), B = t(() => ({
53
56
  height: `${n.totalHeight.value}px`
54
- })), B = a(() => ({
57
+ })), E = t(() => ({
55
58
  transform: `translateY(${n.offsetTop.value}px)`
56
- })), q = (e) => typeof e == "number" ? `${e}px` : e, E = a(() => q(t.virtualMaxHeight)), u = s(0), v = a(() => r.value[u.value]), m = a(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), N = (e) => `${m.value}-option-${e}`;
59
+ })), N = (e) => typeof e == "number" ? `${e}px` : e, j = t(() => N(a.virtualMaxHeight)), u = s(0), v = t(() => r.value[u.value]), m = t(() => `${a.id || a.name || "nmorph-autocomplete"}-listbox`), w = (e) => `${m.value}-option-${e}`;
57
60
  c(
58
- () => t.modelValue,
61
+ () => a.modelValue,
59
62
  (e) => {
60
63
  e !== o.value && (o.value = e);
61
64
  }
62
65
  ), c(r, async (e) => {
63
- l.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await K(), n.scrollToIndex(0), n.refresh();
66
+ l.value = !i.value && o.value !== "" && e.length > 0, u.value = 0, await Q(), n.scrollToIndex(0), n.refresh();
64
67
  });
65
68
  const h = (e) => {
66
- d("select", e), o.value = e.value, d("update:model-value", o.value), setTimeout(() => {
69
+ p("select", e), o.value = e.value, p("update:model-value", o.value), setTimeout(() => {
67
70
  i.value = !0, l.value = !1;
68
71
  });
69
- }, j = (e) => {
72
+ }, R = (e) => {
70
73
  h(e);
71
- }, R = () => {
74
+ }, U = () => {
72
75
  i.value = !1, l.value = r.value.length > 0;
73
- }, p = s(!1);
76
+ }, d = s(!1);
74
77
  c(o, async (e) => {
75
- e !== "" && t.actionCallback && (p.value = !0, await t.actionCallback(), p.value = !1);
76
- }), c(p, (e) => {
78
+ e !== "" && a.actionCallback && (d.value = !0, await a.actionCallback(), d.value = !1);
79
+ }), c(d, (e) => {
77
80
  e && (l.value = !0);
78
81
  }), c(u, (e) => {
79
82
  f.value && n.scrollToIndex(e);
80
83
  });
81
- const w = () => {
84
+ const D = () => {
82
85
  r.value.length && (l.value = !0, u.value = (u.value + 1) % r.value.length);
83
86
  }, S = () => {
84
87
  r.value.length && (l.value = !0, u.value = (u.value - 1 + r.value.length) % r.value.length);
85
88
  }, k = () => {
86
89
  !l.value || !v.value || h(v.value);
87
- }, U = (e) => {
88
- e.key === "ArrowDown" ? (e.preventDefault(), w()) : e.key === "ArrowUp" ? (e.preventDefault(), S()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), y());
89
- }, Z = a(() => ({
90
+ }, Z = (e) => {
91
+ e.key === "ArrowDown" ? (e.preventDefault(), D()) : e.key === "ArrowUp" ? (e.preventDefault(), S()) : e.key === "Enter" ? (e.preventDefault(), k()) : e.key === "Escape" && (e.preventDefault(), b());
92
+ }, F = t(() => ({
90
93
  role: "combobox",
91
94
  "aria-autocomplete": "list",
92
95
  "aria-expanded": l.value,
93
96
  "aria-controls": m.value,
94
- "aria-activedescendant": l.value ? N(u.value) : void 0
95
- })), F = (e, g) => {
96
- const G = e instanceof Element ? e : e?.$el;
97
- n.measureElement(g, G);
98
- }, D = X(l, () => t.zIndex), P = a(() => ({
99
- "--nmorph-autocomplete-input-z-index": D.value + 1
100
- })), Y = a(
101
- () => _({
102
- nmorph: [Q[t.height]]
97
+ "aria-activedescendant": l.value ? w(u.value) : void 0
98
+ })), P = (e, g) => {
99
+ const J = e instanceof Element ? e : e?.$el;
100
+ n.measureElement(g, J);
101
+ }, C = ee(l, () => a.zIndex), Y = t(() => ({
102
+ "--nmorph-autocomplete-input-z-index": C.value + 1
103
+ })), G = t(
104
+ () => M({
105
+ nmorph: [W[a.height]]
103
106
  })
104
- ), C = { props: t, initialValue: o, emit: d, modifiers: L, userClosed: i, updateValueHandler: T, open: l, nmorphAutocompleteDOMRef: A, closeHandler: y, filteredList: r, virtualEnabled: f, defaultOptionHeight: b, virtualItemHeight: x, virtualOverscan: I, virtualDynamicHeight: H, virtualList: n, virtualItems: V, virtualSpacerStyle: z, virtualContentStyle: B, getCssSize: q, virtualMaxHeight: E, currentIndex: u, activeItem: v, listboxId: m, getOptionId: N, selectItem: h, clickHandler: j, focusHandler: R, loader: p, arrowDownHandler: w, arrowUpHandler: S, enterHandler: k, keydownHandler: U, inputAttrs: Z, setVirtualItemRef: F, dropdownZIndex: D, styles: P, optionHeightModifiers: Y, get NmorphIcon() {
105
- return ae;
107
+ ), _ = { props: a, initialValue: o, emit: p, modifiers: T, userClosed: i, updateValueHandler: y, inputValue: V, open: l, nmorphAutocompleteDOMRef: A, closeHandler: b, filteredList: r, virtualEnabled: f, defaultOptionHeight: x, virtualItemHeight: I, virtualOverscan: H, virtualDynamicHeight: q, virtualList: n, virtualItems: z, virtualSpacerStyle: B, virtualContentStyle: E, getCssSize: N, virtualMaxHeight: j, currentIndex: u, activeItem: v, listboxId: m, getOptionId: w, selectItem: h, clickHandler: R, focusHandler: U, loader: d, arrowDownHandler: D, arrowUpHandler: S, enterHandler: k, keydownHandler: Z, inputAttrs: F, setVirtualItemRef: P, dropdownZIndex: C, styles: Y, optionHeightModifiers: G, get NmorphIcon() {
108
+ return le;
106
109
  }, get NmorphDropdown() {
107
- return te;
110
+ return ae;
108
111
  }, get NmorphTextInput() {
109
- return ee;
110
- }, get NmorphIconLoader() {
111
- return le;
112
+ return te;
113
+ }, get NmorphIconLoaderDots() {
114
+ return re;
112
115
  } };
113
- return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
116
+ return Object.defineProperty(_, "__isScriptSetup", { enumerable: !1, value: !0 }), _;
114
117
  }
115
118
  });
116
119
  export {
117
- fe as default
120
+ ve as default
118
121
  };
@@ -1,23 +1,23 @@
1
- import t from "./NmorphDatePickerContent.vue2.js";
2
- import { openBlock as a, createElementBlock as o, normalizeClass as i, createBlock as r, withCtx as l, createVNode as d, createCommentVNode as n } from "vue";
3
- import c from "../../../../../_virtual/_plugin-vue_export-helper.js";
4
- function h(m, k, p, e, Y, f) {
5
- return a(), o(
1
+ import l from "./NmorphDatePickerContent.vue2.js";
2
+ import { openBlock as a, createElementBlock as i, normalizeClass as d, createBlock as r, withCtx as c, createVNode as m, createCommentVNode as n } from "vue";
3
+ import h from "../../../../../_virtual/_plugin-vue_export-helper.js";
4
+ function k(Y, t, f, e, p, y) {
5
+ return a(), i(
6
6
  "div",
7
7
  {
8
- class: i(e.modifiers)
8
+ class: d(e.modifiers)
9
9
  },
10
10
  [
11
11
  e.selectedPicker === "calendar" ? (a(), r(e.NmorphCalendar, {
12
12
  key: 0,
13
+ modelValue: e.selectedValuesModel,
14
+ "onUpdate:modelValue": t[0] || (t[0] = (o) => e.selectedValuesModel = o),
13
15
  type: e.props.type,
14
16
  "initial-date": e.initialDate,
15
- "model-value": e.props.selectedValues,
16
- "onUpdate:modelValue": e.updateSelectedDate,
17
17
  onUpdateInitialDate: e.updateInitialDate
18
18
  }, {
19
- header: l(() => [
20
- d(e.NmorphDatePickerHeader, {
19
+ header: c(() => [
20
+ m(e.NmorphDatePickerHeader, {
21
21
  year: e.initialDate.getFullYear(),
22
22
  month: e.initialDate.getMonth(),
23
23
  onPrevMonth: e.prevMonthHandler,
@@ -30,7 +30,7 @@ function h(m, k, p, e, Y, f) {
30
30
  ]),
31
31
  _: 1
32
32
  /* STABLE */
33
- }, 8, ["type", "initial-date", "model-value"])) : n("v-if", !0),
33
+ }, 8, ["modelValue", "type", "initial-date"])) : n("v-if", !0),
34
34
  e.selectedPicker === "year" ? (a(), r(e.NmorphYearMonthPicker, {
35
35
  key: 1,
36
36
  type: "year",
@@ -50,7 +50,7 @@ function h(m, k, p, e, Y, f) {
50
50
  /* CLASS */
51
51
  );
52
52
  }
53
- const H = /* @__PURE__ */ c(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue"]]);
53
+ const N = /* @__PURE__ */ h(l, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue"]]);
54
54
  export {
55
- H as default
55
+ N as default
56
56
  };
@@ -1,9 +1,9 @@
1
- import { defineComponent as H, computed as n, ref as i } from "vue";
2
- import { useModifiers as Y } from "../../../../../utils/create-modifiers.js";
3
- import f from "../nmorph-date-picker-header/NmorphDatePickerHeader.vue.js";
4
- import M from "../nmorph-year-month-picker/NmorphYearMonthPicker.vue.js";
5
- import _ from "../../../../data/nmorph-calendar/NmorphCalendar.vue.js";
6
- const O = /* @__PURE__ */ H({
1
+ import { defineComponent as x, computed as n, ref as i } from "vue";
2
+ import { useModifiers as b } from "../../../../../utils/create-modifiers.js";
3
+ import F from "../nmorph-date-picker-header/NmorphDatePickerHeader.vue.js";
4
+ import P from "../nmorph-year-month-picker/NmorphYearMonthPicker.vue.js";
5
+ import C from "../../../../data/nmorph-calendar/NmorphCalendar.vue.js";
6
+ const O = /* @__PURE__ */ x({
7
7
  __name: "NmorphDatePickerContent",
8
8
  props: {
9
9
  initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
@@ -13,37 +13,38 @@ const O = /* @__PURE__ */ H({
13
13
  emits: ["update-selected-value"],
14
14
  setup(v, { expose: m, emit: h }) {
15
15
  m();
16
- const l = v, o = h, D = n(
17
- () => Y({
16
+ const r = v, o = h, D = n(
17
+ () => b({
18
18
  "nmorph-date-picker-content": []
19
19
  })
20
- ), e = i(l.initialDate), a = i("calendar"), u = n(() => new Date(e.value.setMonth(e.value.getMonth() - 1))), d = n(() => new Date(e.value.setMonth(e.value.getMonth() + 1))), s = n(() => new Date(e.value.setFullYear(e.value.getFullYear() - 1))), c = n(() => new Date(e.value.setFullYear(e.value.getFullYear() + 1))), p = { props: l, emit: o, modifiers: D, initialDate: e, selectedPicker: a, prevMonth: u, nextMonth: d, prevYear: s, nextYear: c, prevMonthHandler: () => {
20
+ ), e = i(r.initialDate), a = i("calendar"), u = n(() => new Date(e.value.setMonth(e.value.getMonth() - 1))), s = n(() => new Date(e.value.setMonth(e.value.getMonth() + 1))), c = n(() => new Date(e.value.setFullYear(e.value.getFullYear() - 1))), d = n(() => new Date(e.value.setFullYear(e.value.getFullYear() + 1))), f = () => {
21
21
  e.value = u.value;
22
- }, nextMonthHandler: () => {
23
- e.value = d.value;
24
- }, prevYearHandler: () => {
22
+ }, M = () => {
25
23
  e.value = s.value;
26
- }, nextYearHandler: () => {
24
+ }, Y = () => {
27
25
  e.value = c.value;
28
- }, changeYearHandler: () => {
26
+ }, H = () => {
27
+ e.value = d.value;
28
+ }, _ = () => {
29
29
  a.value = "year";
30
- }, changeMonthHandler: () => {
30
+ }, g = () => {
31
31
  a.value = "month";
32
- }, updateYearHandler: (t) => {
33
- const r = new Date(e.value.setFullYear(Number(t)));
34
- e.value = r, a.value = "month";
35
- }, updateMonthHandler: (t) => {
36
- const r = new Date(e.value.setMonth(Number(t)));
37
- e.value = r, a.value = "calendar";
38
- }, backToYearsHandler: () => {
32
+ }, y = (t) => {
33
+ const l = new Date(e.value.setFullYear(Number(t)));
34
+ e.value = l, a.value = "month";
35
+ }, w = (t) => {
36
+ const l = new Date(e.value.setMonth(Number(t)));
37
+ e.value = l, a.value = "calendar";
38
+ }, N = () => {
39
39
  a.value = "year";
40
- }, updateSelectedDate: (t) => {
41
- o("update-selected-value", t);
42
- }, updateInitialDate: (t) => {
40
+ }, k = n({
41
+ get: () => r.selectedValues,
42
+ set: (t) => o("update-selected-value", t)
43
+ }), p = { props: r, emit: o, modifiers: D, initialDate: e, selectedPicker: a, prevMonth: u, nextMonth: s, prevYear: c, nextYear: d, prevMonthHandler: f, nextMonthHandler: M, prevYearHandler: Y, nextYearHandler: H, changeYearHandler: _, changeMonthHandler: g, updateYearHandler: y, updateMonthHandler: w, backToYearsHandler: N, selectedValuesModel: k, updateInitialDate: (t) => {
43
44
  e.value = t;
44
45
  }, get NmorphCalendar() {
45
- return _;
46
- }, NmorphDatePickerHeader: f, NmorphYearMonthPicker: M };
46
+ return C;
47
+ }, NmorphDatePickerHeader: F, NmorphYearMonthPicker: P };
47
48
  return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
48
49
  }
49
50
  });