@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.
- package/README.md +0 -8
- package/dist/components/basic/nmorph-button/NmorphButton.css +1 -1
- package/dist/components/basic/nmorph-button/NmorphButton.vue.js +12 -12
- package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +17 -14
- package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js +1 -1
- package/dist/components/data/nmorph-calendar/utils.js +65 -52
- package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +39 -37
- package/dist/components/data/nmorph-table/NmorphTable.css +1 -1
- package/dist/components/data/nmorph-table/NmorphTable.vue.js +228 -225
- package/dist/components/data/nmorph-table/NmorphTable.vue2.js +57 -43
- package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js +47 -47
- package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js +28 -25
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css +1 -1
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js +102 -92
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +67 -44
- package/dist/components/form/nmorph-date-picker/NmorphDatePicker.css +1 -1
- package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js +45 -33
- package/dist/components/form/nmorph-date-picker/inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue2.js +1 -1
- package/dist/components/form/nmorph-select/NmorphSelect.css +1 -1
- package/dist/components/form/nmorph-select/NmorphSelect.vue.js +135 -125
- package/dist/components/form/nmorph-select/NmorphSelect.vue2.js +76 -65
- package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js +15 -12
- package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js +22 -21
- package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js +16 -16
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css +1 -0
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js +50 -0
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js +69 -0
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.css +1 -1
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js +23 -23
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +31 -25
- package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js +42 -18
- package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js +66 -19
- package/dist/hooks/use-common-styles.js +42 -33
- package/dist/hooks/use-virtual-list.js +65 -37
- package/dist/icons.d.ts +2 -0
- package/dist/icons.js +539 -0
- package/dist/index.es.js +656 -653
- package/dist/index.umd.js +62 -64
- package/dist/nuxt.mjs +3 -3
- package/dist/package.json.js +1 -1
- package/dist/src/components/data/nmorph-calendar/types.d.ts +8 -1
- package/dist/src/components/data/nmorph-calendar/utils.d.ts +2 -1
- package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts +2 -0
- package/dist/src/components/feedback/nmorph-dialog/NmorphDialog.vue.d.ts +2 -0
- package/dist/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.d.ts +2 -0
- package/dist/src/components/form/nmorph-date-picker/NmorphDatePicker.vue.d.ts +13 -1
- package/dist/src/components/form/nmorph-select/NmorphSelect.vue.d.ts +2 -0
- package/dist/src/components/form/nmorph-text-input/NmorphTextInput.vue.d.ts +2 -0
- package/dist/src/components/navigation/index.d.ts +1 -0
- package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +60 -0
- package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +10 -0
- package/dist/src/components/others/nmorph-overlay/NmorphOverlay.vue.d.ts +12 -1
- package/dist/src/hooks/use-virtual-list.d.ts +3 -0
- package/dist/src/icons.d.ts +3 -0
- package/dist/src/styles.d.ts +2 -0
- package/dist/style.css +1 -1
- package/dist/styles.d.ts +2 -0
- package/dist/styles.js +7 -0
- package/dist/utils/theme-style.js +27 -38
- package/package.json +11 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './NmorphDropdown.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { usePlacement as
|
|
5
|
-
import
|
|
6
|
-
const
|
|
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(
|
|
22
|
-
|
|
23
|
-
const e =
|
|
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
|
-
}),
|
|
31
|
-
() =>
|
|
34
|
+
}), y = i(
|
|
35
|
+
() => q({
|
|
32
36
|
"nmorph-dropdown": [`${!e.open && "closed"}`]
|
|
33
37
|
})
|
|
34
|
-
), o = (t) => typeof t == "number" ? `${t}px` : t,
|
|
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
|
-
),
|
|
37
|
-
"--nmorph-dropdown-width":
|
|
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:
|
|
41
|
-
top:
|
|
42
|
-
visibility: e.open &&
|
|
44
|
+
left: l.value.x,
|
|
45
|
+
top: l.value.y,
|
|
46
|
+
visibility: e.open && a.value ? "visible" : "hidden"
|
|
43
47
|
}));
|
|
44
|
-
|
|
48
|
+
v(
|
|
45
49
|
() => e.open,
|
|
46
50
|
(t) => {
|
|
47
|
-
t &&
|
|
51
|
+
t && s();
|
|
48
52
|
},
|
|
49
53
|
{ flush: "post" }
|
|
50
54
|
);
|
|
51
|
-
const
|
|
52
|
-
|
|
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
|
|
60
|
+
return O;
|
|
55
61
|
} };
|
|
56
|
-
return Object.defineProperty(
|
|
62
|
+
return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
|
|
57
63
|
}
|
|
58
64
|
});
|
|
59
65
|
export {
|
|
60
|
-
|
|
66
|
+
k as default
|
|
61
67
|
};
|
|
@@ -1,35 +1,59 @@
|
|
|
1
1
|
import './NmorphOverlay.css';
|
|
2
|
-
import
|
|
3
|
-
import { openBlock as
|
|
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
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
|
|
33
|
+
n(
|
|
12
34
|
"div",
|
|
13
35
|
{
|
|
14
|
-
class:
|
|
15
|
-
style:
|
|
16
|
-
onClick:
|
|
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
|
-
|
|
41
|
+
n("div", {
|
|
42
|
+
ref: "contentRef",
|
|
20
43
|
class: "nmorph-overlay__slot",
|
|
21
|
-
|
|
44
|
+
tabindex: o.props.trapFocus ? -1 : void 0,
|
|
45
|
+
onClick: e[1] || (e[1] = r(() => {
|
|
22
46
|
}, ["stop"]))
|
|
23
47
|
}, [
|
|
24
|
-
|
|
25
|
-
])
|
|
48
|
+
d(l.$slots, "default")
|
|
49
|
+
], 8, y)
|
|
26
50
|
],
|
|
27
51
|
6
|
|
28
52
|
/* CLASS, STYLE */
|
|
29
53
|
)
|
|
30
|
-
], 8, ["to"
|
|
54
|
+
], 8, ["to"]));
|
|
31
55
|
}
|
|
32
|
-
const
|
|
56
|
+
const I = /* @__PURE__ */ f(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
|
|
33
57
|
export {
|
|
34
|
-
|
|
58
|
+
I as default
|
|
35
59
|
};
|
|
@@ -1,32 +1,79 @@
|
|
|
1
1
|
import './NmorphOverlay.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { useZIndex as
|
|
5
|
-
const
|
|
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(
|
|
16
|
-
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
() =>
|
|
20
|
-
),
|
|
21
|
-
() =>
|
|
22
|
-
"nmorph-overlay": [`${
|
|
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
|
-
|
|
26
|
-
},
|
|
27
|
-
|
|
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
|
-
|
|
78
|
+
L as default
|
|
32
79
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { nmorphCombined as p, nmorphInset as
|
|
2
|
-
const
|
|
3
|
-
"nmorph-body-4":
|
|
4
|
-
"nmorph-body-3":
|
|
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":
|
|
12
|
+
"nmorph--shadow-inset": r,
|
|
13
13
|
"nmorph--shadow-combined": p
|
|
14
14
|
}, v = () => {
|
|
15
|
-
let
|
|
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
|
-
${
|
|
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
|
-
${
|
|
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
|
-
${
|
|
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 [
|
|
546
|
-
|
|
547
|
-
.${
|
|
554
|
+
for (const [i, h] of Object.entries(u))
|
|
555
|
+
t += `
|
|
556
|
+
.${i} {
|
|
548
557
|
${h()}
|
|
549
558
|
}
|
|
550
559
|
`;
|
|
551
|
-
return
|
|
552
|
-
},
|
|
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
|
-
|
|
568
|
+
g as useCommonStyles
|
|
560
569
|
};
|
|
@@ -1,46 +1,74 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const e =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const e =
|
|
11
|
-
|
|
12
|
-
|
|
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:
|
|
15
|
-
})) :
|
|
16
|
-
const
|
|
17
|
-
if (!
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
},
|
|
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
|
|
24
|
-
|
|
25
|
-
}),
|
|
26
|
-
typeof window < "u" && window.removeEventListener("resize",
|
|
27
|
-
}),
|
|
28
|
-
() => [
|
|
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
|
-
|
|
56
|
+
M(r);
|
|
31
57
|
}
|
|
32
58
|
), {
|
|
33
|
-
containerRef:
|
|
34
|
-
endIndex:
|
|
35
|
-
offsetTop:
|
|
36
|
-
refresh:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
|
|
73
|
+
C as useVirtualList
|
|
46
74
|
};
|
package/dist/icons.d.ts
ADDED