@m3ui-vue/m3ui-vue 0.2.0 → 0.2.2
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/{MMenuItem-CIDblhtb.js → MMenuItem-DpoEsH91.js} +195 -114
- package/dist/MMenuItem-DpoEsH91.js.map +1 -0
- package/dist/components/MAlert.vue.d.ts +1 -0
- package/dist/components/MButton.vue.d.ts +1 -1
- package/dist/components/MCalendar.vue.d.ts +3 -0
- package/dist/components/MChip.vue.d.ts +3 -3
- package/dist/components/MCommandPalette.vue.d.ts +3 -2
- package/dist/components/MConfirmDialog.vue.d.ts +0 -2
- package/dist/components/MDataTable.vue.d.ts +8 -2
- package/dist/components/MDatePicker.vue.d.ts +2 -0
- package/dist/components/MDateRangePicker.vue.d.ts +5 -0
- package/dist/components/MDialog.vue.d.ts +1 -0
- package/dist/components/MFileUpload.vue.d.ts +15 -1
- package/dist/components/MInfiniteScroll.vue.d.ts +7 -5
- package/dist/components/MMultiSelect.vue.d.ts +13 -1
- package/dist/components/MRichTextEditor.vue.d.ts +28 -1
- package/dist/components/MScheduler.vue.d.ts +5 -0
- package/dist/components/MSnackbar.vue.d.ts +4 -1
- package/dist/components/MSpinner.vue.d.ts +1 -0
- package/dist/components/MSpotlightSearch.vue.d.ts +3 -2
- package/dist/components/MTable.vue.d.ts +2 -1
- package/dist/components/MTimePicker.vue.d.ts +1 -0
- package/dist/components/MTour.vue.d.ts +3 -0
- package/dist/components/MTransferList.vue.d.ts +19 -3
- package/dist/components/MTree.vue.d.ts +1 -1
- package/dist/composables/useLocale.d.ts +74 -0
- package/dist/index.d.ts +2 -0
- package/dist/locales/de.d.ts +2 -0
- package/dist/locales/es.d.ts +2 -0
- package/dist/locales/fr.d.ts +2 -0
- package/dist/locales/index.d.ts +8 -0
- package/dist/locales/index.js +489 -0
- package/dist/locales/index.js.map +1 -0
- package/dist/locales/ja.d.ts +2 -0
- package/dist/locales/ko.d.ts +2 -0
- package/dist/locales/pt.d.ts +2 -0
- package/dist/locales/zh.d.ts +2 -0
- package/dist/m3ui-vue.css +1 -1
- package/dist/m3ui.js +2734 -2647
- package/dist/m3ui.js.map +1 -1
- package/dist/plugin.d.ts +3 -1
- package/dist/rich-text-editor.d.ts +1 -0
- package/dist/rich-text-editor.js +141 -113
- package/dist/rich-text-editor.js.map +1 -1
- package/dist/styles/palettes.css +660 -0
- package/dist/styles.css +1 -1
- package/package.json +11 -2
- package/src/__tests__/MAlert.test.ts +59 -0
- package/src/__tests__/MConfirmDialog.test.ts +51 -0
- package/src/__tests__/MDialog.test.ts +58 -0
- package/src/__tests__/MSpinner.test.ts +37 -0
- package/src/__tests__/localePresets.test.ts +45 -0
- package/src/__tests__/plugin.test.ts +27 -0
- package/src/__tests__/setup.ts +11 -0
- package/src/__tests__/useColorPalette.test.ts +71 -0
- package/src/__tests__/useLocale.test.ts +50 -0
- package/src/__tests__/useTheme.test.ts +61 -0
- package/src/components/MAlert.vue +5 -1
- package/src/components/MCalendar.vue +14 -5
- package/src/components/MCommandPalette.vue +11 -7
- package/src/components/MConfirmDialog.vue +6 -5
- package/src/components/MDataTable.vue +18 -9
- package/src/components/MDatePicker.vue +11 -4
- package/src/components/MDateRangePicker.vue +15 -5
- package/src/components/MDialog.vue +5 -1
- package/src/components/MFileUpload.vue +22 -10
- package/src/components/MInfiniteScroll.vue +14 -9
- package/src/components/MMultiSelect.vue +11 -7
- package/src/components/MRichTextEditor.vue +95 -34
- package/src/components/MScheduler.vue +12 -4
- package/src/components/MSnackbar.vue +8 -1
- package/src/components/MSpinner.vue +5 -1
- package/src/components/MSpotlightSearch.vue +11 -7
- package/src/components/MTable.vue +8 -4
- package/src/components/MTimePicker.vue +5 -1
- package/src/components/MTour.vue +12 -9
- package/src/components/MTransferList.vue +30 -15
- package/src/composables/useColorPalette.ts +30 -20
- package/src/composables/useLocale.ts +181 -0
- package/src/index.ts +2 -0
- package/src/locales/de.ts +93 -0
- package/src/locales/es.ts +93 -0
- package/src/locales/fr.ts +93 -0
- package/src/locales/index.ts +8 -0
- package/src/locales/ja.ts +93 -0
- package/src/locales/ko.ts +93 -0
- package/src/locales/pt.ts +93 -0
- package/src/locales/zh.ts +93 -0
- package/src/plugin.ts +7 -1
- package/src/rich-text-editor.ts +1 -0
- package/src/styles/palettes.css +660 -0
- package/dist/MMenuItem-CIDblhtb.js.map +0 -1
|
@@ -1,8 +1,87 @@
|
|
|
1
1
|
import { t as e } from "./MIcon-CaEooCmZ.js";
|
|
2
2
|
import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
|
|
3
|
-
import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f,
|
|
3
|
+
import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, onUnmounted as v, openBlock as y, ref as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useId as T, useSlots as E, watch as D, withCtx as O, withModifiers as k } from "vue";
|
|
4
|
+
//#region src/composables/useLocale.ts
|
|
5
|
+
var A = {
|
|
6
|
+
search: "Search...",
|
|
7
|
+
noResults: "No results",
|
|
8
|
+
close: "Close",
|
|
9
|
+
cancel: "Cancel",
|
|
10
|
+
confirm: "Confirm",
|
|
11
|
+
loading: "Loading",
|
|
12
|
+
previous: "Previous",
|
|
13
|
+
next: "Next",
|
|
14
|
+
today: "Today",
|
|
15
|
+
more: "more",
|
|
16
|
+
selectedCount: "selected",
|
|
17
|
+
recordCount: "record",
|
|
18
|
+
expand: "Expand",
|
|
19
|
+
columns: "Columns",
|
|
20
|
+
exportCsv: "Export CSV",
|
|
21
|
+
noGroup: "No group",
|
|
22
|
+
finish: "Finish",
|
|
23
|
+
dropText: "Drop files here or",
|
|
24
|
+
selectText: "browse",
|
|
25
|
+
maxSizePrefix: "Max.",
|
|
26
|
+
remove: "Remove",
|
|
27
|
+
selectDate: "Select date",
|
|
28
|
+
selectTime: "Select time",
|
|
29
|
+
selectRange: "Select range",
|
|
30
|
+
pickStart: "Select start",
|
|
31
|
+
pickEnd: "Select end",
|
|
32
|
+
previousMonth: "Previous month",
|
|
33
|
+
nextMonth: "Next month",
|
|
34
|
+
dayView: "Day",
|
|
35
|
+
weekView: "Week",
|
|
36
|
+
available: "Available",
|
|
37
|
+
selected: "Selected",
|
|
38
|
+
noItems: "No items",
|
|
39
|
+
moveAllRight: "Move all right",
|
|
40
|
+
moveRight: "Move selected right",
|
|
41
|
+
moveLeft: "Move selected left",
|
|
42
|
+
moveAllLeft: "Move all left",
|
|
43
|
+
searchCommand: "Search command...",
|
|
44
|
+
navigateHint: "navigate",
|
|
45
|
+
selectHint: "select",
|
|
46
|
+
openHint: "open",
|
|
47
|
+
closeHint: "close",
|
|
48
|
+
loadingMore: "Loading...",
|
|
49
|
+
noMoreItems: "No more items",
|
|
50
|
+
bold: "Bold",
|
|
51
|
+
italic: "Italic",
|
|
52
|
+
underline: "Underline",
|
|
53
|
+
strikethrough: "Strikethrough",
|
|
54
|
+
highlight: "Highlight",
|
|
55
|
+
bulletList: "Bullet list",
|
|
56
|
+
orderedList: "Ordered list",
|
|
57
|
+
blockquote: "Blockquote",
|
|
58
|
+
code: "Code",
|
|
59
|
+
alignLeft: "Align left",
|
|
60
|
+
alignCenter: "Align center",
|
|
61
|
+
alignRight: "Align right",
|
|
62
|
+
undo: "Undo",
|
|
63
|
+
redo: "Redo",
|
|
64
|
+
link: "Link",
|
|
65
|
+
image: "Image",
|
|
66
|
+
paragraph: "Paragraph",
|
|
67
|
+
heading1: "Heading 1",
|
|
68
|
+
heading2: "Heading 2",
|
|
69
|
+
heading3: "Heading 3",
|
|
70
|
+
insertLink: "Insert link",
|
|
71
|
+
insertImage: "Insert image",
|
|
72
|
+
imageUrlLabel: "Image URL",
|
|
73
|
+
insert: "Insert"
|
|
74
|
+
}, j = Symbol("m3-locale");
|
|
75
|
+
function M() {
|
|
76
|
+
let e = p(j, {});
|
|
77
|
+
return {
|
|
78
|
+
...A,
|
|
79
|
+
...e
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
//#endregion
|
|
4
83
|
//#region src/composables/useFieldBg.ts
|
|
5
|
-
var
|
|
84
|
+
var N = [
|
|
6
85
|
"bg-surface-container-highest",
|
|
7
86
|
"bg-surface-container-high",
|
|
8
87
|
"bg-surface-container-low",
|
|
@@ -23,11 +102,11 @@ var k = [
|
|
|
23
102
|
"bg-tertiary",
|
|
24
103
|
"bg-error"
|
|
25
104
|
];
|
|
26
|
-
function
|
|
27
|
-
for (let t of
|
|
105
|
+
function P(e) {
|
|
106
|
+
for (let t of N) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
|
|
28
107
|
return null;
|
|
29
108
|
}
|
|
30
|
-
function
|
|
109
|
+
function F(e) {
|
|
31
110
|
if (!e || e === "transparent") return !0;
|
|
32
111
|
let t = e.match(/^rgba?\(([^)]+)\)$/);
|
|
33
112
|
if (t) {
|
|
@@ -36,15 +115,15 @@ function j(e) {
|
|
|
36
115
|
}
|
|
37
116
|
return !1;
|
|
38
117
|
}
|
|
39
|
-
function
|
|
40
|
-
let n =
|
|
118
|
+
function I(e, t) {
|
|
119
|
+
let n = b("var(--color-surface)");
|
|
41
120
|
function r(r) {
|
|
42
121
|
n.value = r, e.value?.style.setProperty("--field-bg", t() ?? r);
|
|
43
122
|
}
|
|
44
123
|
function i() {
|
|
45
124
|
let t = e.value?.parentElement ?? null;
|
|
46
125
|
for (; t;) {
|
|
47
|
-
let e =
|
|
126
|
+
let e = P(t);
|
|
48
127
|
if (e) {
|
|
49
128
|
r(e);
|
|
50
129
|
return;
|
|
@@ -54,7 +133,7 @@ function M(e, t) {
|
|
|
54
133
|
return;
|
|
55
134
|
}
|
|
56
135
|
let n = getComputedStyle(t).backgroundColor;
|
|
57
|
-
if (!
|
|
136
|
+
if (!F(n)) {
|
|
58
137
|
r(n);
|
|
59
138
|
return;
|
|
60
139
|
}
|
|
@@ -63,7 +142,7 @@ function M(e, t) {
|
|
|
63
142
|
r("var(--color-surface)");
|
|
64
143
|
}
|
|
65
144
|
let o = null;
|
|
66
|
-
return
|
|
145
|
+
return _(() => {
|
|
67
146
|
i(), o = new MutationObserver(() => i()), o.observe(document.documentElement, {
|
|
68
147
|
attributes: !0,
|
|
69
148
|
attributeFilter: [
|
|
@@ -72,32 +151,33 @@ function M(e, t) {
|
|
|
72
151
|
"data-theme"
|
|
73
152
|
]
|
|
74
153
|
});
|
|
75
|
-
}),
|
|
154
|
+
}), g(() => o?.disconnect()), { resolvedFieldBg: a(() => t() ?? n.value) };
|
|
76
155
|
}
|
|
77
156
|
//#endregion
|
|
78
157
|
//#region src/components/MSpinner.vue?vue&type=script&setup=true&lang.ts
|
|
79
|
-
var
|
|
158
|
+
var L = ["aria-label"], R = {
|
|
80
159
|
key: 0,
|
|
81
160
|
class: "block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
|
|
82
|
-
},
|
|
161
|
+
}, z = [
|
|
83
162
|
"width",
|
|
84
163
|
"height",
|
|
85
164
|
"viewBox"
|
|
86
|
-
],
|
|
165
|
+
], B = ["d", "stroke-dasharray"], V = 3, H = 9, U = /* @__PURE__ */ f({
|
|
87
166
|
__name: "MSpinner",
|
|
88
167
|
props: {
|
|
89
168
|
size: { default: 20 },
|
|
90
169
|
wavy: {
|
|
91
170
|
type: Boolean,
|
|
92
171
|
default: !1
|
|
93
|
-
}
|
|
172
|
+
},
|
|
173
|
+
label: {}
|
|
94
174
|
},
|
|
95
175
|
setup(e) {
|
|
96
|
-
let t = e, n = a(() => (t.size / 2 - 1 -
|
|
97
|
-
let e =
|
|
98
|
-
for (let
|
|
99
|
-
let
|
|
100
|
-
|
|
176
|
+
let t = e, n = M(), r = a(() => (t.size / 2 - 1 - V / 2) / 1.25), i = a(() => t.size / 2), o = a(() => {
|
|
177
|
+
let e = i.value, t = r.value, n = t * .08, a = H * 24, o = [], s = 0, c = 0, l = 0;
|
|
178
|
+
for (let r = 0; r <= a; r++) {
|
|
179
|
+
let i = 2 * Math.PI * r / a - Math.PI / 2, u = t + n * Math.sin(H * i), d = e + u * Math.cos(i), f = e + u * Math.sin(i);
|
|
180
|
+
r > 0 && (s += Math.sqrt((d - c) ** 2 + (f - l) ** 2)), o.push(`${r === 0 ? "M" : "L"}${d.toFixed(2)},${f.toFixed(2)}`), c = d, l = f;
|
|
101
181
|
}
|
|
102
182
|
let u = s * .58, d = s - u, f = `${u.toFixed(1)} ${d.toFixed(1)}`;
|
|
103
183
|
return {
|
|
@@ -106,33 +186,33 @@ var N = {
|
|
|
106
186
|
len: s.toFixed(1)
|
|
107
187
|
};
|
|
108
188
|
});
|
|
109
|
-
return (t,
|
|
189
|
+
return (t, r) => (y(), c("span", {
|
|
110
190
|
class: "inline-flex shrink-0 items-center justify-center",
|
|
111
|
-
style:
|
|
191
|
+
style: h({
|
|
112
192
|
width: `${e.size}px`,
|
|
113
193
|
height: `${e.size}px`
|
|
114
194
|
}),
|
|
115
195
|
role: "status",
|
|
116
|
-
"aria-label":
|
|
117
|
-
}, [e.wavy ? (
|
|
196
|
+
"aria-label": e.label ?? w(n).loading
|
|
197
|
+
}, [e.wavy ? (y(), c("svg", {
|
|
118
198
|
key: 1,
|
|
119
199
|
width: e.size,
|
|
120
200
|
height: e.size,
|
|
121
201
|
viewBox: `0 0 ${e.size} ${e.size}`,
|
|
122
202
|
fill: "none",
|
|
123
203
|
class: "animate-[m3-wavy-spin_2.8s_linear_infinite]",
|
|
124
|
-
style:
|
|
204
|
+
style: h(`transform-origin: ${i.value}px ${i.value}px`)
|
|
125
205
|
}, [l("path", {
|
|
126
|
-
d:
|
|
206
|
+
d: o.value.path,
|
|
127
207
|
stroke: "currentColor",
|
|
128
|
-
"stroke-width":
|
|
208
|
+
"stroke-width": V,
|
|
129
209
|
"stroke-linecap": "round",
|
|
130
|
-
"stroke-dasharray":
|
|
210
|
+
"stroke-dasharray": o.value.dash,
|
|
131
211
|
class: "animate-[m3-wavy-travel_2s_linear_infinite]",
|
|
132
|
-
style:
|
|
133
|
-
}, null, 12,
|
|
212
|
+
style: h({ "--m3-wave-len": o.value.len })
|
|
213
|
+
}, null, 12, B)], 12, z)) : (y(), c("span", R))], 12, L));
|
|
134
214
|
}
|
|
135
|
-
}),
|
|
215
|
+
}), W = "relative inline-flex items-center justify-center gap-2 h-10 rounded-full text-label-large font-medium whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]", G = /* @__PURE__ */ f({
|
|
136
216
|
__name: "MButton",
|
|
137
217
|
props: {
|
|
138
218
|
variant: { default: "filled" },
|
|
@@ -173,22 +253,22 @@ var N = {
|
|
|
173
253
|
let t = e.currentTarget, n = t.getBoundingClientRect(), i = Math.max(n.width, n.height) * 2, a = document.createElement("span");
|
|
174
254
|
a.className = "m3-ripple", a.style.cssText = `width:${i}px;height:${i}px;top:${e.clientY - n.top - i / 2}px;left:${e.clientX - n.left - i / 2}px`, t.appendChild(a), a.addEventListener("animationend", () => a.remove(), { once: !0 });
|
|
175
255
|
}
|
|
176
|
-
return (n, r) => (
|
|
256
|
+
return (n, r) => (y(), o(S(i.value), {
|
|
177
257
|
to: t.to || void 0,
|
|
178
258
|
type: t.to ? void 0 : t.type,
|
|
179
259
|
disabled: t.disabled || t.loading,
|
|
180
|
-
class:
|
|
181
|
-
style:
|
|
260
|
+
class: m([W, d.value]),
|
|
261
|
+
style: h(l.value),
|
|
182
262
|
onPointerdown: f
|
|
183
263
|
}, {
|
|
184
|
-
default:
|
|
264
|
+
default: O(() => [t.loading ? (y(), o(U, {
|
|
185
265
|
key: 0,
|
|
186
266
|
size: 18
|
|
187
|
-
})) : t.icon ? (
|
|
267
|
+
})) : t.icon ? (y(), o(e, {
|
|
188
268
|
key: 1,
|
|
189
269
|
name: t.icon,
|
|
190
270
|
size: 20
|
|
191
|
-
}, null, 8, ["name"])) : s("", !0),
|
|
271
|
+
}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
|
|
192
272
|
_: 3
|
|
193
273
|
}, 40, [
|
|
194
274
|
"to",
|
|
@@ -198,7 +278,7 @@ var N = {
|
|
|
198
278
|
"style"
|
|
199
279
|
]));
|
|
200
280
|
}
|
|
201
|
-
}),
|
|
281
|
+
}), K = "inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", q = /* @__PURE__ */ f({
|
|
202
282
|
__name: "MIconButton",
|
|
203
283
|
props: {
|
|
204
284
|
icon: {},
|
|
@@ -220,18 +300,18 @@ var N = {
|
|
|
220
300
|
default: return "text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12";
|
|
221
301
|
}
|
|
222
302
|
});
|
|
223
|
-
return (n, a) => (
|
|
303
|
+
return (n, a) => (y(), o(S(r.value), {
|
|
224
304
|
to: t.to || void 0,
|
|
225
305
|
type: t.to ? void 0 : "button",
|
|
226
306
|
"aria-label": t.label || void 0,
|
|
227
307
|
disabled: t.disabled,
|
|
228
|
-
class:
|
|
229
|
-
style:
|
|
308
|
+
class: m([K, i.value]),
|
|
309
|
+
style: h({
|
|
230
310
|
width: `${t.size}px`,
|
|
231
311
|
height: `${t.size}px`
|
|
232
312
|
})
|
|
233
313
|
}, {
|
|
234
|
-
default:
|
|
314
|
+
default: O(() => [d(e, {
|
|
235
315
|
name: t.icon,
|
|
236
316
|
size: Math.round(t.size * .55)
|
|
237
317
|
}, null, 8, ["name", "size"])]),
|
|
@@ -245,10 +325,10 @@ var N = {
|
|
|
245
325
|
"style"
|
|
246
326
|
]));
|
|
247
327
|
}
|
|
248
|
-
}),
|
|
328
|
+
}), J = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, Y = { class: "text-headline-small text-on-surface" }, X = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, Z = {
|
|
249
329
|
key: 0,
|
|
250
330
|
class: "flex justify-end gap-2 px-6 py-4"
|
|
251
|
-
},
|
|
331
|
+
}, Q = /*#__PURE__*/ t(/* @__PURE__ */ f({
|
|
252
332
|
__name: "MDialog",
|
|
253
333
|
props: {
|
|
254
334
|
modelValue: { type: Boolean },
|
|
@@ -257,60 +337,61 @@ var N = {
|
|
|
257
337
|
persistent: {
|
|
258
338
|
type: Boolean,
|
|
259
339
|
default: !1
|
|
260
|
-
}
|
|
340
|
+
},
|
|
341
|
+
closeLabel: {}
|
|
261
342
|
},
|
|
262
343
|
emits: ["update:modelValue"],
|
|
263
344
|
setup(e, { emit: t }) {
|
|
264
|
-
let n = e, a = t;
|
|
265
|
-
function
|
|
266
|
-
n.persistent ||
|
|
345
|
+
let n = e, a = M(), f = t;
|
|
346
|
+
function p() {
|
|
347
|
+
n.persistent || f("update:modelValue", !1);
|
|
267
348
|
}
|
|
268
|
-
function
|
|
269
|
-
e.key === "Escape" &&
|
|
349
|
+
function h(e) {
|
|
350
|
+
e.key === "Escape" && p();
|
|
270
351
|
}
|
|
271
|
-
return
|
|
272
|
-
e ? (document.addEventListener("keydown",
|
|
273
|
-
}), (t, n) => (
|
|
274
|
-
default:
|
|
352
|
+
return D(() => n.modelValue, (e) => {
|
|
353
|
+
e ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", h), document.body.style.overflow = "");
|
|
354
|
+
}), (t, n) => (y(), o(r, { to: "body" }, [d(i, { name: "m3-dialog" }, {
|
|
355
|
+
default: O(() => [e.modelValue ? (y(), c("div", {
|
|
275
356
|
key: 0,
|
|
276
357
|
class: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
|
|
277
|
-
onClick:
|
|
278
|
-
}, [l("div", { class:
|
|
279
|
-
l("div",
|
|
358
|
+
onClick: k(p, ["self"])
|
|
359
|
+
}, [l("div", { class: m(["dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3", e.maxWidth]) }, [
|
|
360
|
+
l("div", J, [l("h2", Y, [x(t.$slots, "title", {}, () => [u(C(e.title), 1)], !0)]), e.persistent ? s("", !0) : (y(), o(q, {
|
|
280
361
|
key: 0,
|
|
281
362
|
icon: "close",
|
|
282
|
-
label:
|
|
283
|
-
onClick:
|
|
284
|
-
}))]),
|
|
285
|
-
l("div",
|
|
286
|
-
t.$slots.actions ? (
|
|
363
|
+
label: e.closeLabel ?? w(a).close,
|
|
364
|
+
onClick: p
|
|
365
|
+
}, null, 8, ["label"]))]),
|
|
366
|
+
l("div", X, [x(t.$slots, "default", {}, void 0, !0)]),
|
|
367
|
+
t.$slots.actions ? (y(), c("div", Z, [x(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
|
|
287
368
|
], 2)])) : s("", !0)]),
|
|
288
369
|
_: 3
|
|
289
370
|
})]));
|
|
290
371
|
}
|
|
291
|
-
}), [["__scopeId", "data-v-
|
|
372
|
+
}), [["__scopeId", "data-v-4ccfbc3c"]]), $ = { class: "flex flex-col gap-1" }, ee = [
|
|
292
373
|
"id",
|
|
293
374
|
"value",
|
|
294
375
|
"rows",
|
|
295
376
|
"disabled",
|
|
296
377
|
"required"
|
|
297
|
-
],
|
|
378
|
+
], te = [
|
|
298
379
|
"id",
|
|
299
380
|
"type",
|
|
300
381
|
"value",
|
|
301
382
|
"disabled",
|
|
302
383
|
"required",
|
|
303
384
|
"autocomplete"
|
|
304
|
-
],
|
|
385
|
+
], ne = ["for"], re = {
|
|
305
386
|
key: 0,
|
|
306
387
|
class: "text-error"
|
|
307
|
-
},
|
|
388
|
+
}, ie = {
|
|
308
389
|
key: 0,
|
|
309
390
|
class: "px-4 text-body-small text-error"
|
|
310
|
-
},
|
|
391
|
+
}, ae = {
|
|
311
392
|
key: 1,
|
|
312
393
|
class: "px-4 text-body-small text-on-surface-variant"
|
|
313
|
-
},
|
|
394
|
+
}, oe = /* @__PURE__ */ f({
|
|
314
395
|
__name: "MTextField",
|
|
315
396
|
props: {
|
|
316
397
|
modelValue: {},
|
|
@@ -333,7 +414,7 @@ var N = {
|
|
|
333
414
|
},
|
|
334
415
|
emits: ["update:modelValue"],
|
|
335
416
|
setup(t, { emit: n }) {
|
|
336
|
-
let r = t, i = n, o =
|
|
417
|
+
let r = t, i = n, o = T(), f = E(), p = b(null), { resolvedFieldBg: g } = I(p, () => r.fieldBg), _ = a(() => r.clearable && String(r.modelValue).length > 0 && !r.disabled), v = a(() => {
|
|
337
418
|
let e = !!f.trailing || r.clearable, t = r.leadingIcon ? "pl-12" : "pl-4", n = e ? "pr-12" : "pr-4", i = [
|
|
338
419
|
"peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent",
|
|
339
420
|
"transition-[border-color,border-width] duration-150",
|
|
@@ -351,7 +432,7 @@ var N = {
|
|
|
351
432
|
"rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2",
|
|
352
433
|
r.error ? "border-error focus:border-b-2 focus:border-error" : "border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary"
|
|
353
434
|
].join(" ");
|
|
354
|
-
}),
|
|
435
|
+
}), S = a(() => {
|
|
355
436
|
let e = [
|
|
356
437
|
"pointer-events-none absolute truncate transition-all duration-200",
|
|
357
438
|
r.leadingIcon ? r.variant === "outlined" ? "left-11" : "left-12" : r.variant === "outlined" ? "left-3" : "left-4",
|
|
@@ -375,68 +456,68 @@ var N = {
|
|
|
375
456
|
let t = e.target;
|
|
376
457
|
i("update:modelValue", t.value);
|
|
377
458
|
}
|
|
378
|
-
return (n, r) => (
|
|
459
|
+
return (n, r) => (y(), c("div", $, [l("div", {
|
|
379
460
|
ref_key: "fieldBgEl",
|
|
380
|
-
ref:
|
|
381
|
-
class:
|
|
382
|
-
style:
|
|
461
|
+
ref: p,
|
|
462
|
+
class: m(["relative", t.variant === "outlined" ? "mt-2" : ""]),
|
|
463
|
+
style: h(t.variant === "outlined" ? { "--field-bg": w(g) } : void 0)
|
|
383
464
|
}, [
|
|
384
|
-
t.leadingIcon ? (
|
|
465
|
+
t.leadingIcon ? (y(), c("div", {
|
|
385
466
|
key: 0,
|
|
386
|
-
class:
|
|
467
|
+
class: m(["pointer-events-none absolute left-3.5 text-on-surface-variant", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"])
|
|
387
468
|
}, [d(e, {
|
|
388
469
|
name: t.leadingIcon,
|
|
389
470
|
size: 20
|
|
390
471
|
}, null, 8, ["name"])], 2)) : s("", !0),
|
|
391
|
-
t.multiline ? (
|
|
472
|
+
t.multiline ? (y(), c("textarea", {
|
|
392
473
|
key: 1,
|
|
393
|
-
id:
|
|
474
|
+
id: w(o),
|
|
394
475
|
value: String(t.modelValue),
|
|
395
476
|
rows: t.rows,
|
|
396
477
|
disabled: t.disabled,
|
|
397
478
|
required: t.required,
|
|
398
479
|
placeholder: " ",
|
|
399
|
-
class:
|
|
480
|
+
class: m(v.value),
|
|
400
481
|
onInput: D
|
|
401
|
-
}, null, 42,
|
|
482
|
+
}, null, 42, ee)) : (y(), c("input", {
|
|
402
483
|
key: 2,
|
|
403
|
-
id:
|
|
484
|
+
id: w(o),
|
|
404
485
|
type: t.type,
|
|
405
486
|
value: t.modelValue,
|
|
406
487
|
disabled: t.disabled,
|
|
407
488
|
required: t.required,
|
|
408
489
|
autocomplete: t.autocomplete,
|
|
409
490
|
placeholder: " ",
|
|
410
|
-
class:
|
|
491
|
+
class: m(v.value),
|
|
411
492
|
onInput: D
|
|
412
|
-
}, null, 42,
|
|
493
|
+
}, null, 42, te)),
|
|
413
494
|
l("label", {
|
|
414
|
-
for:
|
|
415
|
-
class:
|
|
416
|
-
}, [u(
|
|
417
|
-
n.$slots.trailing ? (
|
|
495
|
+
for: w(o),
|
|
496
|
+
class: m(S.value)
|
|
497
|
+
}, [u(C(t.label), 1), t.required ? (y(), c("span", re, "\xA0*")) : s("", !0)], 10, ne),
|
|
498
|
+
n.$slots.trailing ? (y(), c("div", {
|
|
418
499
|
key: 3,
|
|
419
|
-
class:
|
|
420
|
-
}, [
|
|
500
|
+
class: m(["absolute right-2", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"])
|
|
501
|
+
}, [x(n.$slots, "trailing")], 2)) : _.value ? (y(), c("button", {
|
|
421
502
|
key: 4,
|
|
422
503
|
type: "button",
|
|
423
|
-
class:
|
|
504
|
+
class: m(["absolute right-3 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface", t.variant === "filled" ? "top-[57%] -translate-y-1/2" : "top-[55%] -translate-y-1/2"]),
|
|
424
505
|
onClick: r[0] ||= (e) => i("update:modelValue", "")
|
|
425
506
|
}, [d(e, {
|
|
426
507
|
name: "close",
|
|
427
508
|
size: 18
|
|
428
509
|
})], 2)) : s("", !0)
|
|
429
|
-
], 6), t.error ? (
|
|
510
|
+
], 6), t.error ? (y(), c("p", ie, C(t.error), 1)) : t.hint ? (y(), c("p", ae, C(t.hint), 1)) : s("", !0)]));
|
|
430
511
|
}
|
|
431
|
-
}),
|
|
512
|
+
}), se = /* @__PURE__ */ f({
|
|
432
513
|
__name: "MMenu",
|
|
433
514
|
props: { align: { default: "right" } },
|
|
434
515
|
setup(e, { expose: t }) {
|
|
435
|
-
let u = e, f =
|
|
516
|
+
let u = e, f = b(!1), p = b(null), m = b(null), g = b({});
|
|
436
517
|
function S() {
|
|
437
518
|
if (!p.value) return;
|
|
438
519
|
let e = p.value.getBoundingClientRect(), t = window.innerHeight - e.bottom - 8, n = t < 200 && e.top > t, r = { maxHeight: `${Math.min(n ? e.top - 12 : t, 400)}px` };
|
|
439
|
-
n ? r.bottom = `${window.innerHeight - e.top + 4}px` : r.top = `${e.bottom + 4}px`, u.align === "right" ? r.right = `${window.innerWidth - e.right}px` : r.left = `${e.left}px`,
|
|
520
|
+
n ? r.bottom = `${window.innerHeight - e.top + 4}px` : r.top = `${e.bottom + 4}px`, u.align === "right" ? r.right = `${window.innerWidth - e.right}px` : r.left = `${e.left}px`, g.value = r;
|
|
440
521
|
}
|
|
441
522
|
function C() {
|
|
442
523
|
f.value || S(), f.value = !f.value;
|
|
@@ -450,10 +531,10 @@ var N = {
|
|
|
450
531
|
});
|
|
451
532
|
function T(e) {
|
|
452
533
|
let t = e.target;
|
|
453
|
-
!p.value?.contains(t) && !
|
|
534
|
+
!p.value?.contains(t) && !m.value?.contains(t) && w();
|
|
454
535
|
}
|
|
455
536
|
function E(e) {
|
|
456
|
-
if (!f.value ||
|
|
537
|
+
if (!f.value || m.value?.contains(e.target) || !p.value) return;
|
|
457
538
|
let t = p.value.getBoundingClientRect();
|
|
458
539
|
if (t.bottom < 0 || t.top > window.innerHeight) {
|
|
459
540
|
w();
|
|
@@ -461,21 +542,21 @@ var N = {
|
|
|
461
542
|
}
|
|
462
543
|
S();
|
|
463
544
|
}
|
|
464
|
-
function
|
|
545
|
+
function D(e) {
|
|
465
546
|
e.key === "Escape" && w();
|
|
466
547
|
}
|
|
467
|
-
|
|
468
|
-
document.addEventListener("mousedown", T), document.addEventListener("keydown",
|
|
469
|
-
}),
|
|
470
|
-
document.removeEventListener("mousedown", T), document.removeEventListener("keydown",
|
|
548
|
+
_(() => {
|
|
549
|
+
document.addEventListener("mousedown", T), document.addEventListener("keydown", D), window.addEventListener("scroll", E, !0);
|
|
550
|
+
}), v(() => {
|
|
551
|
+
document.removeEventListener("mousedown", T), document.removeEventListener("keydown", D), window.removeEventListener("scroll", E, !0);
|
|
471
552
|
});
|
|
472
553
|
let k = a(() => u.align === "right" ? "top right" : "top left");
|
|
473
|
-
return (e, t) => (
|
|
554
|
+
return (e, t) => (y(), c(n, null, [l("div", {
|
|
474
555
|
ref_key: "triggerEl",
|
|
475
556
|
ref: p,
|
|
476
557
|
class: "inline-block",
|
|
477
558
|
onClick: C
|
|
478
|
-
}, [
|
|
559
|
+
}, [x(e.$slots, "trigger", { open: f.value })], 512), (y(), o(r, { to: "body" }, [d(i, {
|
|
479
560
|
"enter-active-class": "transition-[opacity,transform] duration-100 ease-out",
|
|
480
561
|
"enter-from-class": "opacity-0 scale-95",
|
|
481
562
|
"enter-to-class": "opacity-100 scale-100",
|
|
@@ -483,21 +564,21 @@ var N = {
|
|
|
483
564
|
"leave-from-class": "opacity-100 scale-100",
|
|
484
565
|
"leave-to-class": "opacity-0 scale-95"
|
|
485
566
|
}, {
|
|
486
|
-
default:
|
|
567
|
+
default: O(() => [f.value ? (y(), c("div", {
|
|
487
568
|
key: 0,
|
|
488
569
|
ref_key: "dropdownEl",
|
|
489
|
-
ref:
|
|
570
|
+
ref: m,
|
|
490
571
|
class: "fixed z-500 min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2",
|
|
491
|
-
style:
|
|
492
|
-
...
|
|
572
|
+
style: h({
|
|
573
|
+
...g.value,
|
|
493
574
|
transformOrigin: k.value
|
|
494
575
|
}),
|
|
495
576
|
onClick: w
|
|
496
|
-
}, [
|
|
577
|
+
}, [x(e.$slots, "default")], 4)) : s("", !0)]),
|
|
497
578
|
_: 3
|
|
498
579
|
})]))], 64));
|
|
499
580
|
}
|
|
500
|
-
}),
|
|
581
|
+
}), ce = /* @__PURE__ */ f({
|
|
501
582
|
__name: "MMenuItem",
|
|
502
583
|
props: {
|
|
503
584
|
icon: {},
|
|
@@ -505,22 +586,22 @@ var N = {
|
|
|
505
586
|
},
|
|
506
587
|
setup(t) {
|
|
507
588
|
let n = t, r = a(() => n.to ? "RouterLink" : "button");
|
|
508
|
-
return (n, i) => (
|
|
589
|
+
return (n, i) => (y(), o(S(r.value), {
|
|
509
590
|
to: t.to || void 0,
|
|
510
591
|
type: t.to ? void 0 : "button",
|
|
511
592
|
class: "flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-body-large text-on-surface hover:bg-on-surface/8"
|
|
512
593
|
}, {
|
|
513
|
-
default:
|
|
594
|
+
default: O(() => [t.icon ? (y(), o(e, {
|
|
514
595
|
key: 0,
|
|
515
596
|
name: t.icon,
|
|
516
597
|
size: 20,
|
|
517
598
|
class: "text-on-surface-variant"
|
|
518
|
-
}, null, 8, ["name"])) : s("", !0),
|
|
599
|
+
}, null, 8, ["name"])) : s("", !0), x(n.$slots, "default")]),
|
|
519
600
|
_: 3
|
|
520
601
|
}, 8, ["to", "type"]));
|
|
521
602
|
}
|
|
522
603
|
});
|
|
523
604
|
//#endregion
|
|
524
|
-
export {
|
|
605
|
+
export { q as a, I as c, M as d, Q as i, j as l, se as n, G as o, oe as r, U as s, ce as t, A as u };
|
|
525
606
|
|
|
526
|
-
//# sourceMappingURL=MMenuItem-
|
|
607
|
+
//# sourceMappingURL=MMenuItem-DpoEsH91.js.map
|