@nmorph/nmorph-ui-kit 2.2.16 → 2.2.18
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/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
- package/dist/components/form/nmorph-form/use-form-item-input.js +7 -8
- package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js +15 -14
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.css +1 -1
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js +72 -12
- package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js +71 -27
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js +5 -5
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +6 -5
- package/dist/index.umd.js +13 -13
- package/dist/nuxt.mjs +7 -2
- package/dist/outside-hooks/use-nmorph-theme.js +97 -98
- package/dist/package.json.js +1 -1
- package/dist/plugin.js +43 -43
- package/dist/src/components/navigation/index.d.ts +1 -0
- package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +12 -1
- package/dist/src/components/navigation/nmorph-context-menu/types.d.ts +12 -0
- package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/nuxt.mjs
CHANGED
|
@@ -48,11 +48,15 @@ const mergeMessages = (base, overrides = {}) => {
|
|
|
48
48
|
return result
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
export default defineNuxtPlugin(
|
|
51
|
+
export default defineNuxtPlugin({
|
|
52
|
+
name: 'nmorph',
|
|
53
|
+
enforce: 'post',
|
|
54
|
+
setup(nuxtApp) {
|
|
52
55
|
const pluginOptions = { ...options }
|
|
53
56
|
const i18nOptions = { ...(pluginOptions.i18n || {}) }
|
|
54
57
|
const messages = mergeMessages(libraryMessages, i18nOptions.messages)
|
|
55
|
-
const
|
|
58
|
+
const vueI18nGlobal = nuxtApp.vueApp.__VUE_I18N__?.global
|
|
59
|
+
const i18n = nuxtApp.$i18n?.mergeLocaleMessage ? nuxtApp.$i18n : vueI18nGlobal
|
|
56
60
|
|
|
57
61
|
if (import.meta.server) {
|
|
58
62
|
useHead({
|
|
@@ -85,6 +89,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
85
89
|
|
|
86
90
|
pluginOptions.i18n = i18nOptions
|
|
87
91
|
nuxtApp.vueApp.use(NmorphLibrary, pluginOptions)
|
|
92
|
+
}
|
|
88
93
|
})
|
|
89
94
|
`
|
|
90
95
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import
|
|
1
|
+
import { ref as H, readonly as _ } from "vue";
|
|
2
|
+
import w from "../package.json.js";
|
|
3
3
|
import { nmorphLog as I } from "../outside-utils/index.js";
|
|
4
|
-
import { camelToKebab as
|
|
4
|
+
import { camelToKebab as E } from "../utils/case-transformers.js";
|
|
5
5
|
const $ = {
|
|
6
6
|
info: "#d4e5edbb",
|
|
7
7
|
infoText: "#506c80",
|
|
@@ -26,7 +26,7 @@ const $ = {
|
|
|
26
26
|
placeholderText: "#c1c9cf",
|
|
27
27
|
semiContrastText: "#8a9dc0",
|
|
28
28
|
contrastText: "#b4c4de"
|
|
29
|
-
},
|
|
29
|
+
}, F = {
|
|
30
30
|
darkShade: "#0f1112",
|
|
31
31
|
main: "#1c1f21",
|
|
32
32
|
lightShade: "#292d30",
|
|
@@ -37,11 +37,11 @@ const $ = {
|
|
|
37
37
|
placeholderText: "#575757",
|
|
38
38
|
semiContrastText: "#9caab0",
|
|
39
39
|
contrastText: "#c3cdd1"
|
|
40
|
-
},
|
|
40
|
+
}, T = "nmorph-data-theme", R = "dark", C = {
|
|
41
41
|
themes: {
|
|
42
42
|
common: $,
|
|
43
43
|
light: V,
|
|
44
|
-
dark:
|
|
44
|
+
dark: F
|
|
45
45
|
},
|
|
46
46
|
defaultTheme: R,
|
|
47
47
|
saveCurrentThemeToLS: !0,
|
|
@@ -51,143 +51,142 @@ const $ = {
|
|
|
51
51
|
baseShadowWidth: "3.5px",
|
|
52
52
|
baseShadowBlurCoefficient: "2"
|
|
53
53
|
}
|
|
54
|
-
},
|
|
55
|
-
if (!
|
|
56
|
-
return
|
|
57
|
-
},
|
|
54
|
+
}, U = (r) => /^#[0-9A-Fa-f]{6}$/.test(r), L = (r) => {
|
|
55
|
+
if (!U(r)) throw new Error(`Invalid hex color: ${r}`);
|
|
56
|
+
return r;
|
|
57
|
+
}, A = (r, e) => {
|
|
58
58
|
const n = {};
|
|
59
|
-
return
|
|
60
|
-
n[
|
|
61
|
-
}), e.forEach(({ name:
|
|
62
|
-
n[
|
|
63
|
-
}), Object.entries(n).map(([
|
|
64
|
-
},
|
|
65
|
-
let n = parseInt(
|
|
66
|
-
n = Math.round(n * (1 + e / 100)),
|
|
67
|
-
const c = n.toString(16).padStart(2, "0"), i =
|
|
68
|
-
return `#${c}${i}${
|
|
69
|
-
}, G = (
|
|
70
|
-
themes:
|
|
71
|
-
defaultTheme:
|
|
72
|
-
saveCurrentThemeToLS:
|
|
73
|
-
darkShadeGeneratorCoefficient:
|
|
74
|
-
lightShadeGeneratorCoefficient:
|
|
75
|
-
other:
|
|
76
|
-
}),
|
|
59
|
+
return r.forEach(({ name: a, color: s }) => {
|
|
60
|
+
n[a] = s;
|
|
61
|
+
}), e.forEach(({ name: a, color: s }) => {
|
|
62
|
+
n[a] = s;
|
|
63
|
+
}), Object.entries(n).map(([a, s]) => ({ name: a, color: s }));
|
|
64
|
+
}, y = (r, e) => {
|
|
65
|
+
let n = parseInt(r.substring(1, 3), 16), a = parseInt(r.substring(3, 5), 16), s = parseInt(r.substring(5, 7), 16);
|
|
66
|
+
n = Math.round(n * (1 + e / 100)), a = Math.round(a * (1 + e / 100)), s = Math.round(s * (1 + e / 100)), n = Math.min(255, Math.max(0, n)), a = Math.min(255, Math.max(0, a)), s = Math.min(255, Math.max(0, s));
|
|
67
|
+
const c = n.toString(16).padStart(2, "0"), i = a.toString(16).padStart(2, "0"), l = s.toString(16).padStart(2, "0");
|
|
68
|
+
return `#${c}${i}${l}`;
|
|
69
|
+
}, G = (r) => ({
|
|
70
|
+
themes: r?.themes ?? C.themes,
|
|
71
|
+
defaultTheme: r?.defaultTheme ?? C.defaultTheme,
|
|
72
|
+
saveCurrentThemeToLS: r?.saveCurrentThemeToLS ?? C.saveCurrentThemeToLS,
|
|
73
|
+
darkShadeGeneratorCoefficient: r?.darkShadeGeneratorCoefficient ?? C.darkShadeGeneratorCoefficient,
|
|
74
|
+
lightShadeGeneratorCoefficient: r?.lightShadeGeneratorCoefficient ?? C.lightShadeGeneratorCoefficient,
|
|
75
|
+
other: r?.other ?? C.other
|
|
76
|
+
}), N = (r, e) => {
|
|
77
77
|
try {
|
|
78
|
-
const n =
|
|
78
|
+
const n = L(e);
|
|
79
79
|
return {
|
|
80
|
-
darkShade:
|
|
81
|
-
lightShade:
|
|
80
|
+
darkShade: y(n, r.darkShadeGeneratorCoefficient),
|
|
81
|
+
lightShade: y(n, r.lightShadeGeneratorCoefficient)
|
|
82
82
|
};
|
|
83
83
|
} catch (n) {
|
|
84
84
|
return console.error(n instanceof Error ? n.message : n), {};
|
|
85
85
|
}
|
|
86
|
-
}, x = (
|
|
87
|
-
name: `--nmorph-${
|
|
86
|
+
}, x = (r) => Object.entries(r).filter(([, e]) => typeof e == "string").map(([e, n]) => ({
|
|
87
|
+
name: `--nmorph-${E(e)}-color`,
|
|
88
88
|
color: n
|
|
89
|
-
})),
|
|
90
|
-
const n = (c) => c.map((i) => `${i.name}: ${i.color};`).join(" "),
|
|
91
|
-
return Object.entries(
|
|
92
|
-
const
|
|
93
|
-
if (c === "common") s.push(n(
|
|
89
|
+
})), P = (r, e) => {
|
|
90
|
+
const n = (c) => c.map((i) => `${i.name}: ${i.color};`).join(" "), a = Object.entries(e).map(([c, i]) => `--${E(c)}: ${i};`).join(" "), s = [];
|
|
91
|
+
return Object.entries(r).forEach(([c, i]) => {
|
|
92
|
+
const l = x($);
|
|
93
|
+
if (c === "common") s.push(n(A(l, i)));
|
|
94
94
|
else {
|
|
95
|
-
const
|
|
96
|
-
&[${
|
|
95
|
+
const S = `
|
|
96
|
+
&[${T}='${c}'] {
|
|
97
97
|
${n(i)}
|
|
98
98
|
}
|
|
99
99
|
`;
|
|
100
|
-
s.push(
|
|
100
|
+
s.push(S);
|
|
101
101
|
}
|
|
102
102
|
}), `
|
|
103
103
|
:root {
|
|
104
104
|
${s.join(" ")}
|
|
105
|
-
${
|
|
105
|
+
${a}
|
|
106
106
|
}
|
|
107
107
|
`;
|
|
108
|
-
},
|
|
108
|
+
}, K = (r) => {
|
|
109
109
|
const e = {};
|
|
110
|
-
return Object.entries(
|
|
110
|
+
return Object.entries(r.themes).forEach(([n, a]) => {
|
|
111
111
|
e[n] = [];
|
|
112
|
-
const s = !!
|
|
113
|
-
!!
|
|
112
|
+
const s = !!a.darkShade, c = !!a.lightShade;
|
|
113
|
+
!!a.main && !s && !c && a.main && (e[n] = x(N(r, a.main))), e[n] = [...e[n], ...x(a)];
|
|
114
114
|
}), e;
|
|
115
|
-
},
|
|
116
|
-
const e = G(
|
|
117
|
-
return
|
|
118
|
-
},
|
|
119
|
-
I("warn", `NMORPH(v${
|
|
120
|
-
const e = G(
|
|
115
|
+
}, J = (r) => {
|
|
116
|
+
const e = G(r);
|
|
117
|
+
return P(K(e), e.other);
|
|
118
|
+
}, Q = (r) => {
|
|
119
|
+
I("warn", `NMORPH(v${w.version})`);
|
|
120
|
+
const e = G(r), n = (o) => {
|
|
121
121
|
try {
|
|
122
|
-
const
|
|
122
|
+
const t = L(o);
|
|
123
123
|
return {
|
|
124
|
-
darkShade:
|
|
125
|
-
lightShade:
|
|
124
|
+
darkShade: y(t, e.darkShadeGeneratorCoefficient),
|
|
125
|
+
lightShade: y(t, e.lightShadeGeneratorCoefficient)
|
|
126
126
|
};
|
|
127
|
-
} catch (
|
|
128
|
-
return console.error(
|
|
127
|
+
} catch (t) {
|
|
128
|
+
return console.error(t instanceof Error ? t.message : t), {};
|
|
129
129
|
}
|
|
130
|
-
},
|
|
131
|
-
const
|
|
132
|
-
return s(
|
|
133
|
-
}, s = (
|
|
134
|
-
name: `--nmorph-${
|
|
130
|
+
}, a = (o) => {
|
|
131
|
+
const t = n(o);
|
|
132
|
+
return s(t);
|
|
133
|
+
}, s = (o) => Object.entries(o).filter(([, t]) => typeof t == "string").map(([t, h]) => ({
|
|
134
|
+
name: `--nmorph-${E(t)}-color`,
|
|
135
135
|
color: h
|
|
136
|
-
})), c = (
|
|
137
|
-
const h = (f) => f.map((u) => `${u.name}: ${u.color};`).join(" "),
|
|
138
|
-
return Object.entries(
|
|
136
|
+
})), c = (o, t) => {
|
|
137
|
+
const h = (f) => f.map((u) => `${u.name}: ${u.color};`).join(" "), m = Object.entries(t).map(([f, u]) => `--${E(f)}: ${u};`).join(" "), b = [];
|
|
138
|
+
return Object.entries(o).forEach(([f, u]) => {
|
|
139
139
|
const k = s($);
|
|
140
|
-
if (f === "common")
|
|
140
|
+
if (f === "common") b.push(h(A(k, u)));
|
|
141
141
|
else {
|
|
142
142
|
const B = `
|
|
143
|
-
&[${
|
|
143
|
+
&[${T}='${f}'] {
|
|
144
144
|
${h(u)}
|
|
145
145
|
}
|
|
146
146
|
`;
|
|
147
|
-
|
|
147
|
+
b.push(B);
|
|
148
148
|
}
|
|
149
149
|
}), `
|
|
150
150
|
:root {
|
|
151
|
-
${
|
|
152
|
-
${
|
|
151
|
+
${b.join(" ")}
|
|
152
|
+
${m}
|
|
153
153
|
}
|
|
154
154
|
`;
|
|
155
|
-
}, i = (
|
|
156
|
-
const
|
|
157
|
-
return Object.entries(
|
|
158
|
-
|
|
159
|
-
const
|
|
160
|
-
!!
|
|
161
|
-
}),
|
|
162
|
-
},
|
|
163
|
-
let
|
|
164
|
-
|
|
155
|
+
}, i = (o) => {
|
|
156
|
+
const t = {};
|
|
157
|
+
return Object.entries(o).forEach(([h, m]) => {
|
|
158
|
+
t[h] = [];
|
|
159
|
+
const b = !!m.darkShade, f = !!m.lightShade;
|
|
160
|
+
!!m.main && !b && !f && m.main && (t[h] = a(m.main)), t[h] = [...t[h], ...s(m)];
|
|
161
|
+
}), t;
|
|
162
|
+
}, l = typeof document < "u", S = H(e.defaultTheme);
|
|
163
|
+
let g = i(e.themes), d = null;
|
|
164
|
+
l && (d = document.getElementById("nmorph-theme-styles"), d || (d = document.createElement("style"), d.id = "nmorph-theme-styles", d.type = "text/css", document.head.appendChild(d)), d.innerHTML = c(g, e.other));
|
|
165
165
|
const D = () => {
|
|
166
|
-
|
|
167
|
-
},
|
|
168
|
-
|
|
169
|
-
}, M = (
|
|
170
|
-
const h =
|
|
171
|
-
e.themes[
|
|
172
|
-
}, O = (
|
|
173
|
-
|
|
166
|
+
g = i(e.themes), d && (d.innerHTML = c(g, e.other));
|
|
167
|
+
}, p = (o) => {
|
|
168
|
+
S.value = o, l && (document.documentElement.setAttribute(T, S.value), !(typeof localStorage > "u") && (e.saveCurrentThemeToLS ? localStorage.setItem(T, o) : localStorage.removeItem(T)));
|
|
169
|
+
}, M = (o, t) => {
|
|
170
|
+
const h = t.main && !t.darkShade && !t.lightShade ? n(t.main) : {};
|
|
171
|
+
e.themes[o] = { ...e.themes[o], ...t, ...h }, D();
|
|
172
|
+
}, O = (o, t) => {
|
|
173
|
+
t && M(o, t), p(o);
|
|
174
|
+
}, v = () => {
|
|
175
|
+
const o = document.documentElement.getAttribute(T), t = typeof localStorage < "u" ? localStorage.getItem(T) : null, h = t ? g[t] : void 0, m = o ? g[o] : void 0;
|
|
176
|
+
return e.saveCurrentThemeToLS && t && h ? t : o && m ? o : S.value;
|
|
174
177
|
};
|
|
175
|
-
|
|
176
|
-
const a = localStorage.getItem(C), r = a ? p[a] : void 0;
|
|
177
|
-
e.saveCurrentThemeToLS && r && (T.value = a);
|
|
178
|
-
}
|
|
179
|
-
y(T.value);
|
|
178
|
+
l ? document.documentElement.hasAttribute(T) ? window.requestAnimationFrame(() => p(v())) : p(v()) : p(S.value);
|
|
180
179
|
const j = e;
|
|
181
180
|
return {
|
|
182
|
-
setTheme:
|
|
181
|
+
setTheme: p,
|
|
183
182
|
setThemeColors: M,
|
|
184
183
|
applyTheme: O,
|
|
185
|
-
currentTheme:
|
|
184
|
+
currentTheme: _(S),
|
|
186
185
|
data: j,
|
|
187
|
-
getDynamicColorVariables:
|
|
186
|
+
getDynamicColorVariables: a
|
|
188
187
|
};
|
|
189
188
|
};
|
|
190
189
|
export {
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
J as getNmorphThemeStyles,
|
|
191
|
+
Q as useNmorphTheme
|
|
193
192
|
};
|
package/dist/package.json.js
CHANGED
package/dist/plugin.js
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
3
|
-
import { default as
|
|
4
|
-
import { nmorphLog as
|
|
1
|
+
import { default as L } from "./locales/ru.js";
|
|
2
|
+
import { default as M } from "./locales/zh.js";
|
|
3
|
+
import { default as z } from "./locales/en.js";
|
|
4
|
+
import { nmorphLog as D } from "./outside-utils/index.js";
|
|
5
5
|
import { useNmorphTheme as h } from "./outside-hooks/use-nmorph-theme.js";
|
|
6
|
-
import { getNmorphThemeStyles as
|
|
7
|
-
import { useCommonStyles as
|
|
8
|
-
import { getCommonStyles as
|
|
9
|
-
import { AvatarShapeType as
|
|
6
|
+
import { getNmorphThemeStyles as H } from "./outside-hooks/use-nmorph-theme.js";
|
|
7
|
+
import { useCommonStyles as c } from "./hooks/use-common-styles.js";
|
|
8
|
+
import { getCommonStyles as j } from "./hooks/use-common-styles.js";
|
|
9
|
+
import { AvatarShapeType as F, Locale as G, NmorphColor as P, NmorphComponentDirection as R, NmorphComponentHeight as U, NmorphComponentPosition as Z, NmorphImageFit as k, NmorphRadioStyleType as q, NmorphSelectionControlHeight as J, NmorphSelectionDateType as K, NmorphShadowType as Q, NmorphSortOrder as W } from "./types/index.js";
|
|
10
10
|
import { useNmorphTranslation as f } from "./hooks/use-nmorph-translation.js";
|
|
11
|
-
import { useNmorphBrowser as
|
|
12
|
-
import { useNmorphZIndex as
|
|
13
|
-
import { useNmorph as
|
|
14
|
-
import { useNmorphNotification as
|
|
15
|
-
const
|
|
16
|
-
install(
|
|
11
|
+
import { useNmorphBrowser as N } from "./outside-hooks/use-nmorph-browser.js";
|
|
12
|
+
import { useNmorphZIndex as g } from "./outside-hooks/use-nmorph-z-index.js";
|
|
13
|
+
import { useNmorph as Y } from "./outside-hooks/use-nmorph.js";
|
|
14
|
+
import { useNmorphNotification as V } from "./outside-hooks/use-nmorph-notification.js";
|
|
15
|
+
const u = {
|
|
16
|
+
install(o, r = {}) {
|
|
17
17
|
if (!r?.i18n?.outsideMessagesMerge) {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}),
|
|
18
|
+
const e = f(r.i18n), t = o.__VUE_I18N__?.global, s = !!(o.component("i18n-t") || o.component("I18nT") || o.directive("t"));
|
|
19
|
+
t?.mergeLocaleMessage ? (e.global.messages.value && Object.entries(e.global.messages.value).forEach(([p, i]) => {
|
|
20
|
+
t.mergeLocaleMessage?.(p, i);
|
|
21
|
+
}), t.locale && e.global.locale.value && (t.locale.value = e.global.locale.value)) : s || o.use(e);
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
return
|
|
23
|
+
c();
|
|
24
|
+
const m = h(r.theme), n = N(), a = g(r.zIndex), l = { theme: m, browser: n, zIndex: a };
|
|
25
|
+
return o.provide("nmorph", l), o;
|
|
26
26
|
}
|
|
27
|
-
}, S =
|
|
27
|
+
}, S = u;
|
|
28
28
|
export {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
F as AvatarShapeType,
|
|
30
|
+
G as Locale,
|
|
31
|
+
P as NmorphColor,
|
|
32
|
+
R as NmorphComponentDirection,
|
|
33
|
+
U as NmorphComponentHeight,
|
|
34
|
+
Z as NmorphComponentPosition,
|
|
35
|
+
k as NmorphImageFit,
|
|
36
36
|
S as NmorphLibrary,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
37
|
+
q as NmorphRadioStyleType,
|
|
38
|
+
J as NmorphSelectionControlHeight,
|
|
39
|
+
K as NmorphSelectionDateType,
|
|
40
|
+
Q as NmorphShadowType,
|
|
41
|
+
W as NmorphSortOrder,
|
|
42
|
+
z as en,
|
|
43
|
+
j as getCommonStyles,
|
|
44
|
+
H as getNmorphThemeStyles,
|
|
45
|
+
D as nmorphLog,
|
|
46
|
+
L as ru,
|
|
47
|
+
Y as useNmorph,
|
|
48
|
+
N as useNmorphBrowser,
|
|
49
|
+
V as useNmorphNotification,
|
|
50
50
|
h as useNmorphTheme,
|
|
51
|
-
|
|
51
|
+
M as zh
|
|
52
52
|
};
|
|
@@ -3,6 +3,7 @@ export { default as NmorphBreadcrumb } from './nmorph-breadcrumb/NmorphBreadcrum
|
|
|
3
3
|
export * from './nmorph-breadcrumb/types';
|
|
4
4
|
export { default as NmorphBreadcrumbItem } from './nmorph-breadcrumb/components/nmorph-breadcrumb-item/NmorphBreadcrumbItem.vue';
|
|
5
5
|
export { default as NmorphContextMenu } from './nmorph-context-menu/NmorphContextMenu.vue';
|
|
6
|
+
export * from './nmorph-context-menu/types';
|
|
6
7
|
export { default as NmorphDropdown } from './nmorph-dropdown/NmorphDropdown.vue';
|
|
7
8
|
export { default as NmorphTabs } from './nmorph-tabs/NmorphTabs.vue';
|
|
8
9
|
export * from './nmorph-tabs/type';
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { NmorphPlacementType } from '../../../types';
|
|
2
|
+
import { NmorphContextMenuOption } from './types';
|
|
2
3
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
|
+
type NmorphContextMenuTrigger = 'contextmenu' | 'click' | 'both';
|
|
3
5
|
interface INmorphProps {
|
|
4
|
-
modelValue?: boolean;
|
|
6
|
+
modelValue?: boolean | null;
|
|
7
|
+
options?: NmorphContextMenuOption[];
|
|
8
|
+
trigger?: NmorphContextMenuTrigger;
|
|
5
9
|
placement?: NmorphPlacementType;
|
|
6
10
|
width?: number | string;
|
|
7
11
|
minWidth?: number | string;
|
|
@@ -13,6 +17,7 @@ interface INmorphProps {
|
|
|
13
17
|
closeOnEscape?: boolean;
|
|
14
18
|
trapFocus?: boolean;
|
|
15
19
|
disabled?: boolean;
|
|
20
|
+
closeOnScroll?: boolean;
|
|
16
21
|
role?: string;
|
|
17
22
|
ariaLabel?: string;
|
|
18
23
|
}
|
|
@@ -20,12 +25,14 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
|
|
|
20
25
|
close: () => void;
|
|
21
26
|
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
22
27
|
close: () => any;
|
|
28
|
+
select: (option: NmorphContextMenuOption, index: number) => any;
|
|
23
29
|
"update:model-value": (value: boolean) => any;
|
|
24
30
|
"on-outside-click": () => any;
|
|
25
31
|
"on-escape-keydown": () => any;
|
|
26
32
|
open: (event: MouseEvent | KeyboardEvent) => any;
|
|
27
33
|
}, string, PublicProps, Readonly<INmorphProps> & Readonly<{
|
|
28
34
|
onClose?: () => any;
|
|
35
|
+
onSelect?: (option: NmorphContextMenuOption, index: number) => any;
|
|
29
36
|
"onUpdate:model-value"?: (value: boolean) => any;
|
|
30
37
|
"onOn-outside-click"?: () => any;
|
|
31
38
|
"onOn-escape-keydown"?: () => any;
|
|
@@ -33,10 +40,12 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
|
|
|
33
40
|
}>, {
|
|
34
41
|
disabled: boolean;
|
|
35
42
|
width: string | number;
|
|
43
|
+
modelValue: boolean;
|
|
36
44
|
minWidth: string | number;
|
|
37
45
|
zIndex: number;
|
|
38
46
|
closeOnEscape: boolean;
|
|
39
47
|
trapFocus: boolean;
|
|
48
|
+
options: NmorphContextMenuOption[];
|
|
40
49
|
role: string;
|
|
41
50
|
placement: NmorphPlacementType;
|
|
42
51
|
maxWidth: string | number;
|
|
@@ -44,6 +53,8 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
|
|
|
44
53
|
yOffset: number;
|
|
45
54
|
fillWidth: boolean;
|
|
46
55
|
ariaLabel: string;
|
|
56
|
+
trigger: NmorphContextMenuTrigger;
|
|
57
|
+
closeOnScroll: boolean;
|
|
47
58
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {
|
|
48
59
|
triggerDOMRef: HTMLDivElement;
|
|
49
60
|
}, HTMLDivElement>, {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
2
|
+
export type NmorphContextMenuOptionPrimitive = string | number;
|
|
3
|
+
export interface INmorphContextMenuOption {
|
|
4
|
+
label?: string | number;
|
|
5
|
+
value?: unknown;
|
|
6
|
+
component?: Component;
|
|
7
|
+
componentProps?: Record<string, unknown>;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
color?: string;
|
|
10
|
+
closeOnClick?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export type NmorphContextMenuOption = NmorphContextMenuOptionPrimitive | INmorphContextMenuOption;
|
|
@@ -15,6 +15,7 @@ interface INmorphProps {
|
|
|
15
15
|
trapFocus?: boolean;
|
|
16
16
|
role?: string;
|
|
17
17
|
ariaLabel?: string;
|
|
18
|
+
contentClass?: string;
|
|
18
19
|
}
|
|
19
20
|
declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
20
21
|
"on-outside-click": () => any;
|
|
@@ -35,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphProps, {
|
|
|
35
36
|
yOffset: number;
|
|
36
37
|
fillWidth: boolean;
|
|
37
38
|
ariaLabel: string;
|
|
39
|
+
contentClass: string;
|
|
38
40
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
39
41
|
dropdownDOMRef: HTMLDivElement;
|
|
40
42
|
}, any>, {
|