@nmorph/nmorph-ui-kit 2.2.15 → 2.2.16

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 (60) 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-calendar/NmorphCalendar.vue2.js +1 -1
  6. package/dist/components/data/nmorph-calendar/utils.js +65 -52
  7. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +39 -37
  8. package/dist/components/data/nmorph-table/NmorphTable.css +1 -1
  9. package/dist/components/data/nmorph-table/NmorphTable.vue.js +228 -225
  10. package/dist/components/data/nmorph-table/NmorphTable.vue2.js +57 -43
  11. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js +47 -47
  12. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js +28 -25
  13. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css +1 -1
  14. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js +102 -92
  15. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +67 -44
  16. package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css +1 -1
  17. package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js +45 -33
  18. package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js +1 -1
  19. package/dist/components/form/nmorph-select/NmorphSelect.css +1 -1
  20. package/dist/components/form/nmorph-select/NmorphSelect.vue.js +135 -125
  21. package/dist/components/form/nmorph-select/NmorphSelect.vue2.js +76 -65
  22. package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js +15 -12
  23. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js +22 -21
  24. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js +16 -16
  25. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css +1 -0
  26. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js +50 -0
  27. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js +69 -0
  28. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css +1 -1
  29. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js +23 -23
  30. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +31 -25
  31. package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js +42 -18
  32. package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js +66 -19
  33. package/dist/hooks/use-common-styles.js +42 -33
  34. package/dist/hooks/use-virtual-list.js +65 -37
  35. package/dist/icons.d.ts +2 -0
  36. package/dist/icons.js +539 -0
  37. package/dist/index.es.js +656 -653
  38. package/dist/index.umd.js +62 -64
  39. package/dist/nuxt.mjs +3 -3
  40. package/dist/package.json.js +1 -1
  41. package/dist/src/components/data/nmorph-calendar/types.d.ts +8 -1
  42. package/dist/src/components/data/nmorph-calendar/utils.d.ts +2 -1
  43. package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts +2 -0
  44. package/dist/src/components/feedback/nmorph-dialog/NmorphDialog.vue.d.ts +2 -0
  45. package/dist/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.d.ts +2 -0
  46. package/dist/src/components/form/nmorph-date-picker/NmorphDatePicker.vue.d.ts +13 -1
  47. package/dist/src/components/form/nmorph-select/NmorphSelect.vue.d.ts +2 -0
  48. package/dist/src/components/form/nmorph-text-input/NmorphTextInput.vue.d.ts +2 -0
  49. package/dist/src/components/navigation/index.d.ts +1 -0
  50. package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +60 -0
  51. package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +10 -0
  52. package/dist/src/components/others/nmorph-overlay/NmorphOverlay.vue.d.ts +12 -1
  53. package/dist/src/hooks/use-virtual-list.d.ts +3 -0
  54. package/dist/src/icons.d.ts +3 -0
  55. package/dist/src/styles.d.ts +2 -0
  56. package/dist/style.css +1 -1
  57. package/dist/styles.d.ts +2 -0
  58. package/dist/styles.js +7 -0
  59. package/dist/utils/theme-style.js +27 -38
  60. package/package.json +11 -1
@@ -1,9 +1,9 @@
1
1
  import './NmorphDropdown.css';
2
- import { defineComponent as v, ref as w, toRef as r, computed as n, watch as b } from "vue";
3
- import { useModifiers as x } from "../../../utils/create-modifiers.js";
4
- import { usePlacement as O } from "../../../hooks/use-placement.js";
5
- import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
6
- const g = /* @__PURE__ */ v({
2
+ import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
3
+ import { useModifiers as q } from "../../../utils/create-modifiers.js";
4
+ import { usePlacement as x } from "../../../hooks/use-placement.js";
5
+ import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
6
+ const k = /* @__PURE__ */ w({
7
7
  __name: "NmorphDropdown",
8
8
  props: {
9
9
  open: { type: Boolean, required: !0 },
@@ -15,47 +15,53 @@ const g = /* @__PURE__ */ v({
15
15
  xOffset: { type: Number, required: !1, default: 0 },
16
16
  yOffset: { type: Number, required: !1, default: 0 },
17
17
  fillWidth: { type: Boolean, required: !1, default: !0 },
18
- zIndex: { type: Number, required: !1, default: void 0 }
18
+ zIndex: { type: Number, required: !1, default: void 0 },
19
+ closeOnEscape: { type: Boolean, required: !1, default: !0 },
20
+ trapFocus: { type: Boolean, required: !1, default: !1 },
21
+ role: { type: String, required: !1, default: "listbox" },
22
+ ariaLabel: { type: String, required: !1, default: "" }
19
23
  },
20
- emits: ["on-outside-click"],
21
- setup(s, { expose: f, emit: c }) {
22
- f();
23
- const e = s, l = c, d = w(null), { placementCoords: i, placementReady: p, adjustPlacement: a } = O({
24
+ emits: ["on-outside-click", "on-escape-keydown"],
25
+ setup(f, { expose: m, emit: c }) {
26
+ m();
27
+ const e = f, n = c, d = b(null), { placementCoords: l, placementReady: a, adjustPlacement: s } = x({
24
28
  initialPlacement: r(e, "placement"),
25
29
  contentDOMElement: d,
26
30
  relativeElement: r(e, "relativeElement"),
27
31
  yOffset: r(e, "yOffset"),
28
32
  xOffset: r(e, "xOffset"),
29
33
  enabled: r(e, "open")
30
- }), h = n(
31
- () => x({
34
+ }), y = i(
35
+ () => q({
32
36
  "nmorph-dropdown": [`${!e.open && "closed"}`]
33
37
  })
34
- ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
38
+ ), o = (t) => typeof t == "number" ? `${t}px` : t, p = i(
35
39
  () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
36
- ), y = n(() => ({
37
- "--nmorph-dropdown-width": u.value,
40
+ ), h = i(() => ({
41
+ "--nmorph-dropdown-width": p.value,
38
42
  "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
39
43
  "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
40
- left: i.value.x,
41
- top: i.value.y,
42
- visibility: e.open && p.value ? "visible" : "hidden"
44
+ left: l.value.x,
45
+ top: l.value.y,
46
+ visibility: e.open && a.value ? "visible" : "hidden"
43
47
  }));
44
- b(
48
+ v(
45
49
  () => e.open,
46
50
  (t) => {
47
- t && a();
51
+ t && s();
48
52
  },
49
53
  { flush: "post" }
50
54
  );
51
- const m = { props: e, emit: l, dropdownDOMRef: d, placementCoords: i, placementReady: p, adjustPlacement: a, modifiers: h, getCssSize: o, width: u, dropdownStyle: y, outsideClickHandler: () => {
52
- l("on-outside-click");
55
+ const u = { props: e, emit: n, dropdownDOMRef: d, placementCoords: l, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: p, dropdownStyle: h, outsideClickHandler: () => {
56
+ n("on-outside-click");
57
+ }, escapeHandler: () => {
58
+ n("on-escape-keydown");
53
59
  }, get NmorphOverlay() {
54
- return q;
60
+ return O;
55
61
  } };
56
- return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
62
+ return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
57
63
  }
58
64
  });
59
65
  export {
60
- g as default
66
+ k as default
61
67
  };
@@ -1,35 +1,59 @@
1
1
  import './NmorphOverlay.css';
2
- import s from "./NmorphOverlay.vue2.js";
3
- import { openBlock as i, createBlock as n, Teleport as p, createElementVNode as e, withModifiers as l, normalizeStyle as a, normalizeClass as d, renderSlot as m } from "vue";
2
+ import a from "./NmorphOverlay.vue2.js";
3
+ import { openBlock as t, createElementBlock as c, withModifiers as r, normalizeStyle as i, normalizeClass as s, createElementVNode as n, renderSlot as d, createBlock as p, Teleport as m } from "vue";
4
4
  /* empty css */
5
- import c from "../../../_virtual/_plugin-vue_export-helper.js";
6
- function f(t, r, _, o, h, v) {
7
- return i(), n(p, {
8
- to: o.props.teleportTo,
9
- disabled: o.props.disabledTeleport || !o.props.show
5
+ import f from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const v = ["tabindex"], y = ["tabindex"];
7
+ function k(l, e, _, o, h, x) {
8
+ return o.renderInline ? (t(), c(
9
+ "div",
10
+ {
11
+ key: 0,
12
+ class: s(o.modifiers),
13
+ style: i({ "--nmorph-overlay-z-index": o.zIndex }),
14
+ onClick: r(o.clickHandler, ["stop"])
15
+ },
16
+ [
17
+ n("div", {
18
+ ref: "contentRef",
19
+ class: "nmorph-overlay__slot",
20
+ tabindex: o.props.trapFocus ? -1 : void 0,
21
+ onClick: e[0] || (e[0] = r(() => {
22
+ }, ["stop"]))
23
+ }, [
24
+ d(l.$slots, "default")
25
+ ], 8, v)
26
+ ],
27
+ 6
28
+ /* CLASS, STYLE */
29
+ )) : (t(), p(m, {
30
+ key: 1,
31
+ to: o.props.teleportTo
10
32
  }, [
11
- e(
33
+ n(
12
34
  "div",
13
35
  {
14
- class: d(o.modifiers),
15
- style: a({ "--nmorph-overlay-z-index": o.zIndex }),
16
- onClick: l(o.clickHandler, ["stop"])
36
+ class: s(o.modifiers),
37
+ style: i({ "--nmorph-overlay-z-index": o.zIndex }),
38
+ onClick: r(o.clickHandler, ["stop"])
17
39
  },
18
40
  [
19
- e("div", {
41
+ n("div", {
42
+ ref: "contentRef",
20
43
  class: "nmorph-overlay__slot",
21
- onClick: r[0] || (r[0] = l(() => {
44
+ tabindex: o.props.trapFocus ? -1 : void 0,
45
+ onClick: e[1] || (e[1] = r(() => {
22
46
  }, ["stop"]))
23
47
  }, [
24
- m(t.$slots, "default")
25
- ])
48
+ d(l.$slots, "default")
49
+ ], 8, y)
26
50
  ],
27
51
  6
28
52
  /* CLASS, STYLE */
29
53
  )
30
- ], 8, ["to", "disabled"]);
54
+ ], 8, ["to"]));
31
55
  }
32
- const z = /* @__PURE__ */ c(s, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
56
+ const I = /* @__PURE__ */ f(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
33
57
  export {
34
- z as default
58
+ I as default
35
59
  };
@@ -1,32 +1,79 @@
1
1
  import './NmorphOverlay.css';
2
- import { defineComponent as p, computed as r } from "vue";
3
- import { useModifiers as u } from "../../../utils/create-modifiers.js";
4
- import { useZIndex as f } from "../../../hooks/use-z-index.js";
5
- const y = /* @__PURE__ */ p({
2
+ import { defineComponent as _, computed as i, ref as q, watch as g, onBeforeUnmount as B, nextTick as A } from "vue";
3
+ import { useModifiers as F } from "../../../utils/create-modifiers.js";
4
+ import { useZIndex as I } from "../../../hooks/use-z-index.js";
5
+ const L = /* @__PURE__ */ _({
6
6
  __name: "NmorphOverlay",
7
7
  props: {
8
8
  show: { type: Boolean, required: !0 },
9
9
  transparent: { type: Boolean, required: !1, default: !1 },
10
10
  zIndex: { type: Number, required: !1, default: void 0 },
11
11
  teleportTo: { type: null, required: !1, default: "body" },
12
- disabledTeleport: { type: Boolean, required: !1, default: !1 }
12
+ disabledTeleport: { type: Boolean, required: !1, default: !1 },
13
+ closeOnEscape: { type: Boolean, required: !1, default: !0 },
14
+ trapFocus: { type: Boolean, required: !1, default: !1 },
15
+ restoreFocus: { type: Boolean, required: !1, default: !0 }
13
16
  },
14
- emits: ["on-outside-click"],
15
- setup(s, { expose: n, emit: a }) {
16
- n();
17
- const e = s, l = f(
18
- r(() => e.show),
19
- () => e.zIndex
20
- ), d = r(
21
- () => u({
22
- "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
17
+ emits: ["on-outside-click", "on-escape-keydown"],
18
+ setup(b, { expose: v, emit: h }) {
19
+ v();
20
+ const t = b, E = I(
21
+ i(() => t.show),
22
+ () => t.zIndex
23
+ ), w = i(
24
+ () => F({
25
+ "nmorph-overlay": [`${t.show && "show"}`, `${t.transparent && "transparent"}`]
23
26
  })
24
- ), i = () => {
25
- t("on-outside-click");
26
- }, t = a, o = { props: e, zIndex: l, modifiers: d, clickHandler: i, emit: t };
27
- return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
27
+ ), k = i(() => t.disabledTeleport || !t.show || typeof document > "u"), x = () => {
28
+ s("on-outside-click");
29
+ }, s = h, n = q(null);
30
+ let o = null;
31
+ const d = [
32
+ "a[href]",
33
+ "button:not([disabled])",
34
+ "textarea:not([disabled])",
35
+ "input:not([disabled])",
36
+ "select:not([disabled])",
37
+ '[tabindex]:not([tabindex="-1"])'
38
+ ].join(","), u = () => n.value ? Array.from(n.value.querySelectorAll(d)).filter(
39
+ (e) => e.getAttribute("aria-hidden") !== "true"
40
+ ) : [], c = async () => {
41
+ if (!t.trapFocus) return;
42
+ await A(), (u()[0] || n.value)?.focus();
43
+ }, l = (e) => {
44
+ if (!t.show) return;
45
+ if (e.key === "Escape" && t.closeOnEscape) {
46
+ e.preventDefault(), s("on-escape-keydown");
47
+ return;
48
+ }
49
+ if (e.key !== "Tab" || !t.trapFocus) return;
50
+ const r = u();
51
+ if (!r.length) {
52
+ e.preventDefault(), n.value?.focus();
53
+ return;
54
+ }
55
+ const m = r[0], y = r[r.length - 1];
56
+ e.shiftKey && document.activeElement === m ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), m.focus());
57
+ }, f = () => {
58
+ typeof document > "u" || document.addEventListener("keydown", l);
59
+ }, a = () => {
60
+ typeof document > "u" || document.removeEventListener("keydown", l);
61
+ };
62
+ g(
63
+ () => t.show,
64
+ (e) => {
65
+ typeof document > "u" || (e ? (o = document.activeElement, f(), c()) : (a(), t.restoreFocus && o?.focus?.(), o = null));
66
+ },
67
+ { immediate: !0, flush: "post" }
68
+ ), B(a);
69
+ const p = { props: t, zIndex: E, modifiers: w, renderInline: k, clickHandler: x, emit: s, contentRef: n, get previousActiveElement() {
70
+ return o;
71
+ }, set previousActiveElement(e) {
72
+ o = e;
73
+ }, focusableSelector: d, getFocusableElements: u, focusContent: c, keydownHandler: l, addKeydownListener: f, removeKeydownListener: a };
74
+ return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
28
75
  }
29
76
  });
30
77
  export {
31
- y as default
78
+ L as default
32
79
  };
@@ -1,7 +1,7 @@
1
- import { nmorphCombined as p, nmorphInset as t, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
2
- const b = {
3
- "nmorph-body-4": u,
4
- "nmorph-body-3": i,
1
+ import { nmorphCombined as p, nmorphInset as r, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
2
+ const u = {
3
+ "nmorph-body-4": b,
4
+ "nmorph-body-3": a,
5
5
  "nmorph-body-2": c,
6
6
  "nmorph-body-1": n,
7
7
  "nmorph-title-4": m,
@@ -9,10 +9,10 @@ const b = {
9
9
  "nmorph-title-2": d,
10
10
  "nmorph-title-1": s,
11
11
  "nmorph--shadow-outset": e,
12
- "nmorph--shadow-inset": t,
12
+ "nmorph--shadow-inset": r,
13
13
  "nmorph--shadow-combined": p
14
14
  }, v = () => {
15
- let r = `
15
+ let t = `
16
16
  :root {
17
17
  --font-size-tiny: 10px;
18
18
  --font-size-extra-small: 12px;
@@ -54,6 +54,30 @@ const b = {
54
54
  --indentation-04: 16px;
55
55
 
56
56
  --base-shadow-blur: calc(var(--base-shadow-width) * var(--base-shadow-blur-coefficient));
57
+ --nmorph-shadow-outset:
58
+ var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
59
+ calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
60
+ var(--nmorph-light-shade-color);
61
+ --nmorph-shadow-inset:
62
+ inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
63
+ inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
64
+ var(--nmorph-light-shade-color);
65
+ --nmorph-shadow-combined:
66
+ var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
67
+ calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
68
+ var(--nmorph-light-shade-color),
69
+ inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
70
+ var(--nmorph-dark-shade-color),
71
+ inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
72
+ var(--nmorph-light-shade-color);
73
+ --nmorph-shadow-combined-dark:
74
+ var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
75
+ calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
76
+ var(--nmorph-light-shade-color),
77
+ inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
78
+ var(--nmorph-dark-shade-color),
79
+ inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
80
+ var(--nmorph-dark-shade-color);
57
81
  --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
58
82
 
59
83
  --transition-04: 0.4s;
@@ -219,7 +243,7 @@ const b = {
219
243
  }
220
244
 
221
245
  .nmorph--thin-component.nmorph-native-input {
222
- ${i()}
246
+ ${a()}
223
247
  }
224
248
 
225
249
  .nmorph-native-input:focus {
@@ -278,14 +302,7 @@ const b = {
278
302
  .nmorph-avatar.nmorph--shadow-combined {
279
303
  border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
280
304
  background: var(--nmorph-main-color);
281
- box-shadow:
282
- var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
283
- calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
284
- var(--nmorph-light-shade-color),
285
- inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
286
- var(--nmorph-dark-shade-color),
287
- inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
288
- var(--nmorph-dark-shade-color);
305
+ box-shadow: var(--nmorph-shadow-combined-dark);
289
306
  }
290
307
 
291
308
  .nmorph-avatar > .nmorph-image > img {
@@ -394,7 +411,7 @@ const b = {
394
411
  text-indent: var(--nmorph-text-input-indentation);
395
412
  border: none;
396
413
  border-radius: var(--default-border-radius);
397
- ${t()}
414
+ ${r()}
398
415
  }
399
416
 
400
417
  .nmorph-text-input--with-action input {
@@ -420,21 +437,13 @@ const b = {
420
437
  .nmorph-text-input input:-webkit-autofill:active {
421
438
  -webkit-text-fill-color: var(--nmorph-text-color);
422
439
  caret-color: var(--nmorph-text-color);
423
- box-shadow:
424
- inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
425
- inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
426
- var(--nmorph-light-shade-color),
427
- inset 0 0 0 1000px var(--nmorph-main-color);
440
+ box-shadow: var(--nmorph-shadow-inset), inset 0 0 0 1000px var(--nmorph-main-color);
428
441
  }
429
442
 
430
443
  .nmorph-text-input input:-webkit-autofill:focus {
431
444
  -webkit-text-fill-color: var(--nmorph-focus-text-color);
432
445
  caret-color: var(--nmorph-focus-text-color);
433
- box-shadow:
434
- var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
435
- calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
436
- var(--nmorph-light-shade-color),
437
- inset 0 0 0 1000px var(--nmorph-accent-color);
446
+ box-shadow: var(--nmorph-shadow-outset), inset 0 0 0 1000px var(--nmorph-accent-color);
438
447
  outline: none;
439
448
  }
440
449
 
@@ -530,7 +539,7 @@ const b = {
530
539
 
531
540
  .nmorph-scroll::-webkit-scrollbar-track {
532
541
  border-radius: var(--border-radius-40);
533
- ${t()}
542
+ ${r()}
534
543
  }
535
544
 
536
545
  .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -542,19 +551,19 @@ const b = {
542
551
  background-color: transparent;
543
552
  }
544
553
  `;
545
- for (const [a, h] of Object.entries(b))
546
- r += `
547
- .${a} {
554
+ for (const [i, h] of Object.entries(u))
555
+ t += `
556
+ .${i} {
548
557
  ${h()}
549
558
  }
550
559
  `;
551
- return r;
552
- }, x = () => {
560
+ return t;
561
+ }, g = () => {
553
562
  if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
554
563
  const o = document.createElement("style");
555
564
  o.id = "nmorph-common-styles", o.innerHTML = v(), document.head.appendChild(o);
556
565
  };
557
566
  export {
558
567
  v as getCommonStyles,
559
- x as useCommonStyles
568
+ g as useCommonStyles
560
569
  };
@@ -1,46 +1,74 @@
1
- import { ref as d, computed as t, onMounted as I, nextTick as p, onUnmounted as z, watch as L } from "vue";
2
- const y = (l, v) => {
3
- const c = d(null), s = d(0), h = d(0), n = t(() => v.enabled?.value ?? !0), i = t(() => Math.max(v.overscan?.value ?? 0, 0)), a = t(() => Math.max(v.itemHeight.value, 1)), f = t(() => n.value ? l.value.length * a.value : 0), u = () => {
4
- const e = c.value;
5
- e && (s.value = e.scrollTop, h.value = e.clientHeight);
6
- }, w = () => {
7
- u();
8
- }, r = t(() => n.value ? Math.max(Math.floor(s.value / a.value) - i.value, 0) : 0), m = t(() => {
9
- if (!n.value) return l.value.length;
10
- const e = Math.ceil((s.value + h.value) / a.value) + i.value;
11
- return Math.min(Math.max(e, r.value + i.value), l.value.length);
12
- }), M = t(() => r.value * a.value), g = t(() => n.value ? l.value.slice(r.value, m.value).map((e, o) => ({
1
+ import { ref as m, computed as n, onMounted as R, nextTick as M, onUnmounted as V, watch as k } from "vue";
2
+ const C = (a, h) => {
3
+ const x = m(null), c = m(0), d = m(0), s = n(() => h.enabled?.value ?? !0), i = n(() => Math.max(h.overscan?.value ?? 0, 0)), u = n(() => h.dynamic?.value ?? !1), o = n(() => Math.max(h.itemHeight.value, 1)), g = m({}), p = (e) => u.value && g.value[e] || o.value, f = n(() => {
4
+ const e = [];
5
+ let t = 0;
6
+ for (let l = 0; l < a.value.length; l++)
7
+ e[l] = t, t += p(l);
8
+ return { offsets: e, total: t };
9
+ }), w = n(() => s.value ? u.value ? f.value.total : a.value.length * o.value : 0), r = () => {
10
+ const e = x.value;
11
+ if (!e) return;
12
+ const t = Math.max(w.value - e.clientHeight, 0);
13
+ e.scrollTop > t && (e.scrollTop = t), c.value = e.scrollTop, d.value = e.clientHeight;
14
+ }, I = () => {
15
+ r();
16
+ }, v = n(() => {
17
+ if (!s.value) return 0;
18
+ if (u.value) {
19
+ const e = f.value.offsets.findIndex((t, l) => t + p(l) >= c.value);
20
+ return Math.max(e === -1 ? 0 : e - i.value, 0);
21
+ }
22
+ return Math.max(Math.floor(c.value / o.value) - i.value, 0);
23
+ }), H = n(() => {
24
+ if (!s.value) return a.value.length;
25
+ if (u.value) {
26
+ const t = c.value + d.value;
27
+ let l = v.value;
28
+ for (; l < a.value.length && f.value.offsets[l] <= t; )
29
+ l++;
30
+ return Math.min(l + i.value, a.value.length);
31
+ }
32
+ const e = Math.ceil((c.value + d.value) / o.value) + i.value;
33
+ return Math.min(Math.max(e, v.value + i.value), a.value.length);
34
+ }), y = n(() => u.value ? f.value.offsets[v.value] || 0 : v.value * o.value), z = n(() => s.value ? a.value.slice(v.value, H.value).map((e, t) => ({
13
35
  item: e,
14
- index: r.value + o
15
- })) : l.value.map((e, o) => ({ item: e, index: o }))), H = (e) => {
16
- const o = c.value;
17
- if (!o || !n.value) return;
18
- const T = Math.min(Math.max(e, 0) * a.value, f.value);
19
- o.scrollTop = T, u();
20
- }, x = () => {
21
- u();
36
+ index: v.value + t
37
+ })) : a.value.map((e, t) => ({ item: e, index: t }))), E = (e) => {
38
+ const t = x.value;
39
+ if (!t || !s.value) return;
40
+ const l = Math.min(Math.max(e, 0), Math.max(a.value.length - 1, 0)), b = u.value ? f.value.offsets[l] || 0 : l * o.value;
41
+ t.scrollTop = b, r();
42
+ }, L = (e, t) => {
43
+ if (!u.value || !t) return;
44
+ const l = Math.ceil(t.getBoundingClientRect().height || t.offsetHeight);
45
+ !l || g.value[e] === l || (g.value = { ...g.value, [e]: l }, M(r));
46
+ }, T = () => {
47
+ r();
22
48
  };
23
- return I(() => {
24
- p(u), typeof window < "u" && window.addEventListener("resize", x);
25
- }), z(() => {
26
- typeof window < "u" && window.removeEventListener("resize", x);
27
- }), L(
28
- () => [l.value.length, n.value, a.value],
49
+ return R(() => {
50
+ M(r), typeof window < "u" && window.addEventListener("resize", T);
51
+ }), V(() => {
52
+ typeof window < "u" && window.removeEventListener("resize", T);
53
+ }), k(
54
+ () => [a.value.length, s.value, o.value, u.value],
29
55
  () => {
30
- p(u);
56
+ M(r);
31
57
  }
32
58
  ), {
33
- containerRef: c,
34
- endIndex: m,
35
- offsetTop: M,
36
- refresh: u,
37
- scrollHandler: w,
38
- scrollToIndex: H,
39
- startIndex: r,
40
- totalHeight: f,
41
- virtualItems: g
59
+ containerRef: x,
60
+ endIndex: H,
61
+ offsetTop: y,
62
+ refresh: r,
63
+ measureElement: L,
64
+ scrollHandler: I,
65
+ scrollToIndex: E,
66
+ startIndex: v,
67
+ totalHeight: w,
68
+ viewportHeight: d,
69
+ virtualItems: z
42
70
  };
43
71
  };
44
72
  export {
45
- y as useVirtualList
73
+ C as useVirtualList
46
74
  };
@@ -0,0 +1,2 @@
1
+ export * from './src/icons'
2
+ export {}