@m3ui-vue/m3ui-vue 0.4.1 → 0.4.3
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-FyttjOj_.js → MMenuItem-COdgD4m7.js} +133 -114
- package/dist/MMenuItem-COdgD4m7.js.map +1 -0
- package/dist/components/MAutocomplete.vue.d.ts +4 -0
- package/dist/components/MMaskField.vue.d.ts +4 -0
- package/dist/components/MMultiAutocomplete.vue.d.ts +4 -0
- package/dist/components/MNumberField.vue.d.ts +4 -0
- package/dist/components/MSpotlightSearch.vue.d.ts +1 -1
- package/dist/components/MTagInput.vue.d.ts +4 -0
- package/dist/components/MTextField.vue.d.ts +4 -0
- package/dist/composables/useDebounce.d.ts +4 -0
- package/dist/composables/useLocale.d.ts +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/m3ui-vue.css +1 -1
- package/dist/m3ui.js +3362 -3324
- package/dist/m3ui.js.map +1 -1
- package/dist/plugin.d.ts +2 -2
- package/dist/rich-text-editor.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/__tests__/useDebounce.test.ts +75 -0
- package/src/__tests__/useLocale.test.ts +17 -1
- package/src/components/MAutocomplete.vue +30 -7
- package/src/components/MMaskField.vue +9 -2
- package/src/components/MMultiAutocomplete.vue +30 -7
- package/src/components/MNumberField.vue +22 -7
- package/src/components/MSlider.vue +1 -1
- package/src/components/MTagInput.vue +11 -3
- package/src/components/MTextField.vue +8 -2
- package/src/composables/useDebounce.ts +24 -0
- package/src/composables/useLocale.ts +9 -3
- package/src/index.ts +1 -0
- package/src/plugin.ts +2 -2
- package/dist/MMenuItem-FyttjOj_.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
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, inject as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, onUnmounted as v, openBlock as y, provide as b,
|
|
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, provide as b, reactive as x, ref as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, toValue as E, unref as D, useId as O, useSlots as k, watch as A, watchEffect as j, withCtx as M, withModifiers as N } from "vue";
|
|
4
4
|
//#region src/composables/useLocale.ts
|
|
5
|
-
var
|
|
5
|
+
var P = {
|
|
6
6
|
search: "Search...",
|
|
7
7
|
noResults: "No results",
|
|
8
8
|
close: "Close",
|
|
@@ -71,24 +71,23 @@ var j = {
|
|
|
71
71
|
insertImage: "Insert image",
|
|
72
72
|
imageUrlLabel: "Image URL",
|
|
73
73
|
insert: "Insert"
|
|
74
|
-
},
|
|
75
|
-
function
|
|
76
|
-
let e = p(
|
|
77
|
-
return {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
};
|
|
74
|
+
}, F = Symbol("m3-locale");
|
|
75
|
+
function I() {
|
|
76
|
+
let e = p(F, {}), t = x({ ...P });
|
|
77
|
+
return j(() => {
|
|
78
|
+
Object.assign(t, P, E(e));
|
|
79
|
+
}), t;
|
|
81
80
|
}
|
|
82
81
|
//#endregion
|
|
83
82
|
//#region src/components/MSpinner.vue?vue&type=script&setup=true&lang.ts
|
|
84
|
-
var
|
|
83
|
+
var L = ["aria-label"], ee = {
|
|
85
84
|
key: 0,
|
|
86
85
|
class: "block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
|
|
87
|
-
},
|
|
86
|
+
}, R = [
|
|
88
87
|
"width",
|
|
89
88
|
"height",
|
|
90
89
|
"viewBox"
|
|
91
|
-
],
|
|
90
|
+
], z = ["d", "stroke-dasharray"], B = 3, V = 9, H = /* @__PURE__ */ f({
|
|
92
91
|
__name: "MSpinner",
|
|
93
92
|
props: {
|
|
94
93
|
size: { default: 20 },
|
|
@@ -99,10 +98,10 @@ var P = ["aria-label"], F = {
|
|
|
99
98
|
label: {}
|
|
100
99
|
},
|
|
101
100
|
setup(e) {
|
|
102
|
-
let t = e, n =
|
|
103
|
-
let e = i.value, t = r.value, n = t * .08, a =
|
|
101
|
+
let t = e, n = I(), r = a(() => (t.size / 2 - 1 - B / 2) / 1.25), i = a(() => t.size / 2), o = a(() => {
|
|
102
|
+
let e = i.value, t = r.value, n = t * .08, a = V * 24, o = [], s = 0, c = 0, l = 0;
|
|
104
103
|
for (let r = 0; r <= a; r++) {
|
|
105
|
-
let i = 2 * Math.PI * r / a - Math.PI / 2, u = t + n * Math.sin(
|
|
104
|
+
let i = 2 * Math.PI * r / a - Math.PI / 2, u = t + n * Math.sin(V * i), d = e + u * Math.cos(i), f = e + u * Math.sin(i);
|
|
106
105
|
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;
|
|
107
106
|
}
|
|
108
107
|
let u = s * .58, d = s - u, f = `${u.toFixed(1)} ${d.toFixed(1)}`;
|
|
@@ -119,7 +118,7 @@ var P = ["aria-label"], F = {
|
|
|
119
118
|
height: `${e.size}px`
|
|
120
119
|
}),
|
|
121
120
|
role: "status",
|
|
122
|
-
"aria-label": e.label ??
|
|
121
|
+
"aria-label": e.label ?? D(n).loading
|
|
123
122
|
}, [e.wavy ? (y(), c("svg", {
|
|
124
123
|
key: 1,
|
|
125
124
|
width: e.size,
|
|
@@ -131,14 +130,14 @@ var P = ["aria-label"], F = {
|
|
|
131
130
|
}, [l("path", {
|
|
132
131
|
d: o.value.path,
|
|
133
132
|
stroke: "currentColor",
|
|
134
|
-
"stroke-width":
|
|
133
|
+
"stroke-width": B,
|
|
135
134
|
"stroke-linecap": "round",
|
|
136
135
|
"stroke-dasharray": o.value.dash,
|
|
137
136
|
class: "animate-[m3-wavy-travel_2s_linear_infinite]",
|
|
138
137
|
style: h({ "--m3-wave-len": o.value.len })
|
|
139
|
-
}, null, 12,
|
|
138
|
+
}, null, 12, z)], 12, R)) : (y(), c("span", ee))], 12, L));
|
|
140
139
|
}
|
|
141
|
-
}),
|
|
140
|
+
}), U = [
|
|
142
141
|
"bg-surface-container-highest",
|
|
143
142
|
"bg-surface-container-high",
|
|
144
143
|
"bg-surface-container-low",
|
|
@@ -159,11 +158,11 @@ var P = ["aria-label"], F = {
|
|
|
159
158
|
"bg-tertiary",
|
|
160
159
|
"bg-error"
|
|
161
160
|
];
|
|
162
|
-
function
|
|
163
|
-
for (let t of
|
|
161
|
+
function W(e) {
|
|
162
|
+
for (let t of U) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
|
|
164
163
|
return null;
|
|
165
164
|
}
|
|
166
|
-
function
|
|
165
|
+
function G(e) {
|
|
167
166
|
if (!e || e === "transparent") return !0;
|
|
168
167
|
let t = e.match(/^rgba?\(([^)]+)\)$/);
|
|
169
168
|
if (t) {
|
|
@@ -172,15 +171,15 @@ function U(e) {
|
|
|
172
171
|
}
|
|
173
172
|
return !1;
|
|
174
173
|
}
|
|
175
|
-
function
|
|
176
|
-
let n =
|
|
174
|
+
function K(e, t) {
|
|
175
|
+
let n = S("var(--color-surface)");
|
|
177
176
|
function r(r) {
|
|
178
177
|
n.value = r, e.value?.style.setProperty("--field-bg", t() ?? r);
|
|
179
178
|
}
|
|
180
179
|
function i() {
|
|
181
180
|
let t = e.value?.parentElement ?? null;
|
|
182
181
|
for (; t;) {
|
|
183
|
-
let e =
|
|
182
|
+
let e = W(t);
|
|
184
183
|
if (e) {
|
|
185
184
|
r(e);
|
|
186
185
|
return;
|
|
@@ -190,7 +189,7 @@ function W(e, t) {
|
|
|
190
189
|
return;
|
|
191
190
|
}
|
|
192
191
|
let n = getComputedStyle(t).backgroundColor;
|
|
193
|
-
if (!
|
|
192
|
+
if (!G(n)) {
|
|
194
193
|
r(n);
|
|
195
194
|
return;
|
|
196
195
|
}
|
|
@@ -211,8 +210,25 @@ function W(e, t) {
|
|
|
211
210
|
}), g(() => o?.disconnect()), { resolvedFieldBg: a(() => t() ?? n.value) };
|
|
212
211
|
}
|
|
213
212
|
//#endregion
|
|
213
|
+
//#region src/composables/useDebounce.ts
|
|
214
|
+
function q(e, t) {
|
|
215
|
+
let n = null;
|
|
216
|
+
function r(...r) {
|
|
217
|
+
n && clearTimeout(n), n = setTimeout(() => {
|
|
218
|
+
n = null, e(...r);
|
|
219
|
+
}, t);
|
|
220
|
+
}
|
|
221
|
+
function i() {
|
|
222
|
+
n &&= (clearTimeout(n), null);
|
|
223
|
+
}
|
|
224
|
+
return g(i), {
|
|
225
|
+
debounced: r,
|
|
226
|
+
cancel: i
|
|
227
|
+
};
|
|
228
|
+
}
|
|
229
|
+
//#endregion
|
|
214
230
|
//#region src/components/MIconButton.vue?vue&type=script&setup=true&lang.ts
|
|
215
|
-
var
|
|
231
|
+
var J = "inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", Y = /* @__PURE__ */ f({
|
|
216
232
|
__name: "MIconButton",
|
|
217
233
|
props: {
|
|
218
234
|
icon: {},
|
|
@@ -265,13 +281,13 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
265
281
|
default: return "text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12";
|
|
266
282
|
}
|
|
267
283
|
});
|
|
268
|
-
return (n, i) => (y(), o(
|
|
284
|
+
return (n, i) => (y(), o(w(r.value), {
|
|
269
285
|
to: t.to || void 0,
|
|
270
286
|
type: t.to ? void 0 : "button",
|
|
271
287
|
"aria-label": t.label || void 0,
|
|
272
288
|
disabled: t.disabled,
|
|
273
289
|
class: m([
|
|
274
|
-
|
|
290
|
+
J,
|
|
275
291
|
c.value,
|
|
276
292
|
u.value,
|
|
277
293
|
"relative overflow-hidden"
|
|
@@ -282,7 +298,7 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
282
298
|
}),
|
|
283
299
|
onPointerdown: l
|
|
284
300
|
}, {
|
|
285
|
-
default:
|
|
301
|
+
default: M(() => [d(e, {
|
|
286
302
|
name: t.icon,
|
|
287
303
|
size: s.value.icon
|
|
288
304
|
}, null, 8, ["name", "size"])]),
|
|
@@ -296,7 +312,7 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
296
312
|
"style"
|
|
297
313
|
]));
|
|
298
314
|
}
|
|
299
|
-
}),
|
|
315
|
+
}), X = "relative inline-flex items-center justify-center gap-2 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]", Z = /* @__PURE__ */ f({
|
|
300
316
|
__name: "MButton",
|
|
301
317
|
props: {
|
|
302
318
|
variant: { default: "filled" },
|
|
@@ -380,33 +396,33 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
380
396
|
default: return "";
|
|
381
397
|
}
|
|
382
398
|
});
|
|
383
|
-
function
|
|
399
|
+
function S(e) {
|
|
384
400
|
if (r.disabled || r.loading) return;
|
|
385
401
|
let t = e.currentTarget, n = t.getBoundingClientRect(), i = Math.max(n.width, n.height) * 2, a = document.createElement("span");
|
|
386
402
|
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 });
|
|
387
403
|
}
|
|
388
|
-
return (n, r) => (y(), o(
|
|
404
|
+
return (n, r) => (y(), o(w(i.value), {
|
|
389
405
|
to: t.to || void 0,
|
|
390
406
|
type: t.to ? void 0 : t.type,
|
|
391
407
|
disabled: t.disabled || t.loading,
|
|
392
408
|
class: m([
|
|
393
|
-
|
|
409
|
+
X,
|
|
394
410
|
d.value,
|
|
395
411
|
g.value,
|
|
396
412
|
b.value,
|
|
397
413
|
x.value
|
|
398
414
|
]),
|
|
399
415
|
style: h(l.value),
|
|
400
|
-
onPointerdown:
|
|
416
|
+
onPointerdown: S
|
|
401
417
|
}, {
|
|
402
|
-
default:
|
|
418
|
+
default: M(() => [t.loading ? (y(), o(H, {
|
|
403
419
|
key: 0,
|
|
404
420
|
size: v.value
|
|
405
421
|
}, null, 8, ["size"])) : t.icon ? (y(), o(e, {
|
|
406
422
|
key: 1,
|
|
407
423
|
name: t.icon,
|
|
408
424
|
size: _.value
|
|
409
|
-
}, null, 8, ["name", "size"])) : s("", !0),
|
|
425
|
+
}, null, 8, ["name", "size"])) : s("", !0), C(n.$slots, "default")]),
|
|
410
426
|
_: 3
|
|
411
427
|
}, 40, [
|
|
412
428
|
"to",
|
|
@@ -416,16 +432,16 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
416
432
|
"style"
|
|
417
433
|
]));
|
|
418
434
|
}
|
|
419
|
-
}),
|
|
435
|
+
}), Q = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, te = { class: "text-headline-small text-on-surface" }, ne = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, re = {
|
|
420
436
|
key: 0,
|
|
421
437
|
class: "flex justify-end gap-2 px-6 py-4"
|
|
422
|
-
},
|
|
438
|
+
}, ie = {
|
|
423
439
|
key: 0,
|
|
424
440
|
class: "dialog-fs fixed inset-0 z-50 flex flex-col bg-surface"
|
|
425
|
-
},
|
|
441
|
+
}, ae = { class: "flex h-14 shrink-0 items-center gap-2 px-2" }, oe = { class: "flex-1 text-title-large font-medium text-on-surface" }, se = {
|
|
426
442
|
key: 1,
|
|
427
443
|
class: "flex items-center gap-2"
|
|
428
|
-
},
|
|
444
|
+
}, ce = { class: "flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant" }, le = /*#__PURE__*/ t(/* @__PURE__ */ f({
|
|
429
445
|
__name: "MDialog",
|
|
430
446
|
props: {
|
|
431
447
|
modelValue: { type: Boolean },
|
|
@@ -443,77 +459,77 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
443
459
|
},
|
|
444
460
|
emits: ["update:modelValue"],
|
|
445
461
|
setup(e, { emit: t }) {
|
|
446
|
-
let n = e, a =
|
|
462
|
+
let n = e, a = I(), d = t;
|
|
447
463
|
function f() {
|
|
448
464
|
n.persistent || d("update:modelValue", !1);
|
|
449
465
|
}
|
|
450
466
|
function p(e) {
|
|
451
467
|
e.key === "Escape" && f();
|
|
452
468
|
}
|
|
453
|
-
return
|
|
469
|
+
return A(() => n.modelValue, (e) => {
|
|
454
470
|
e ? (document.addEventListener("keydown", p), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", p), document.body.style.overflow = "");
|
|
455
471
|
}), (t, n) => (y(), o(r, { to: "body" }, [e.fullscreen ? (y(), o(i, {
|
|
456
472
|
key: 1,
|
|
457
473
|
name: "m3-dialog-fs"
|
|
458
474
|
}, {
|
|
459
|
-
default:
|
|
460
|
-
e.persistent ? s("", !0) : (y(), o(
|
|
475
|
+
default: M(() => [e.modelValue ? (y(), c("div", ie, [l("div", ae, [
|
|
476
|
+
e.persistent ? s("", !0) : (y(), o(Y, {
|
|
461
477
|
key: 0,
|
|
462
478
|
icon: "close",
|
|
463
|
-
label: e.closeLabel ??
|
|
479
|
+
label: e.closeLabel ?? D(a).close,
|
|
464
480
|
onClick: f
|
|
465
481
|
}, null, 8, ["label"])),
|
|
466
|
-
l("h2",
|
|
467
|
-
t.$slots.actions ? (y(), c("div",
|
|
468
|
-
]), l("div",
|
|
482
|
+
l("h2", oe, [C(t.$slots, "title", {}, () => [u(T(e.title), 1)], !0)]),
|
|
483
|
+
t.$slots.actions ? (y(), c("div", se, [C(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
|
|
484
|
+
]), l("div", ce, [C(t.$slots, "default", {}, void 0, !0)])])) : s("", !0)]),
|
|
469
485
|
_: 3
|
|
470
486
|
})) : (y(), o(i, {
|
|
471
487
|
key: 0,
|
|
472
488
|
name: "m3-dialog"
|
|
473
489
|
}, {
|
|
474
|
-
default:
|
|
490
|
+
default: M(() => [e.modelValue ? (y(), c("div", {
|
|
475
491
|
key: 0,
|
|
476
492
|
class: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
|
|
477
|
-
onClick:
|
|
493
|
+
onClick: N(f, ["self"])
|
|
478
494
|
}, [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]) }, [
|
|
479
|
-
l("div",
|
|
495
|
+
l("div", Q, [l("h2", te, [C(t.$slots, "title", {}, () => [u(T(e.title), 1)], !0)]), e.persistent ? s("", !0) : (y(), o(Y, {
|
|
480
496
|
key: 0,
|
|
481
497
|
icon: "close",
|
|
482
|
-
label: e.closeLabel ??
|
|
498
|
+
label: e.closeLabel ?? D(a).close,
|
|
483
499
|
onClick: f
|
|
484
500
|
}, null, 8, ["label"]))]),
|
|
485
|
-
l("div",
|
|
486
|
-
t.$slots.actions ? (y(), c("div",
|
|
501
|
+
l("div", ne, [C(t.$slots, "default", {}, void 0, !0)]),
|
|
502
|
+
t.$slots.actions ? (y(), c("div", re, [C(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
|
|
487
503
|
], 2)])) : s("", !0)]),
|
|
488
504
|
_: 3
|
|
489
505
|
}))]));
|
|
490
506
|
}
|
|
491
|
-
}), [["__scopeId", "data-v-2e3c3567"]]),
|
|
507
|
+
}), [["__scopeId", "data-v-2e3c3567"]]), ue = { class: "flex flex-col gap-1" }, de = [
|
|
492
508
|
"id",
|
|
493
509
|
"value",
|
|
494
510
|
"rows",
|
|
495
511
|
"disabled",
|
|
496
512
|
"required"
|
|
497
|
-
],
|
|
513
|
+
], fe = [
|
|
498
514
|
"id",
|
|
499
515
|
"type",
|
|
500
516
|
"value",
|
|
501
517
|
"disabled",
|
|
502
518
|
"required",
|
|
503
519
|
"autocomplete"
|
|
504
|
-
],
|
|
520
|
+
], pe = ["for"], me = {
|
|
505
521
|
key: 0,
|
|
506
522
|
class: "text-error"
|
|
507
|
-
},
|
|
523
|
+
}, he = {
|
|
508
524
|
key: 3,
|
|
509
525
|
class: "absolute right-2 top-1/2 -translate-y-1/2"
|
|
510
|
-
},
|
|
526
|
+
}, ge = {
|
|
511
527
|
key: 0,
|
|
512
528
|
class: "px-4 text-body-small text-error"
|
|
513
|
-
},
|
|
529
|
+
}, $ = {
|
|
514
530
|
key: 1,
|
|
515
531
|
class: "px-4 text-body-small text-on-surface-variant"
|
|
516
|
-
},
|
|
532
|
+
}, _e = /* @__PURE__ */ f({
|
|
517
533
|
__name: "MTextField",
|
|
518
534
|
props: {
|
|
519
535
|
modelValue: {},
|
|
@@ -532,11 +548,12 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
532
548
|
type: Boolean,
|
|
533
549
|
default: !1
|
|
534
550
|
},
|
|
535
|
-
fieldBg: {}
|
|
551
|
+
fieldBg: {},
|
|
552
|
+
debounce: { default: 0 }
|
|
536
553
|
},
|
|
537
|
-
emits: ["update:modelValue"],
|
|
554
|
+
emits: ["update:modelValue", "debounced"],
|
|
538
555
|
setup(t, { emit: n }) {
|
|
539
|
-
let r = t, i = n, o =
|
|
556
|
+
let r = t, i = n, o = O(), f = k(), p = S(null), { resolvedFieldBg: g } = K(p, () => r.fieldBg), { debounced: _, cancel: v } = q((e) => i("debounced", e), r.debounce), b = a(() => r.clearable && String(r.modelValue).length > 0 && !r.disabled), x = a(() => {
|
|
540
557
|
let e = !!f.trailing || r.clearable, t = r.leadingIcon ? "pl-12" : "pl-4", n = e ? "pr-12" : "pr-4", i = [
|
|
541
558
|
"peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent",
|
|
542
559
|
"transition-[border-color,border-width] duration-150",
|
|
@@ -554,7 +571,7 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
554
571
|
"rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2",
|
|
555
572
|
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"
|
|
556
573
|
].join(" ");
|
|
557
|
-
}),
|
|
574
|
+
}), w = a(() => {
|
|
558
575
|
let e = [
|
|
559
576
|
"pointer-events-none absolute truncate transition-all duration-200",
|
|
560
577
|
r.leadingIcon ? r.variant === "outlined" ? "left-11" : "left-12" : r.variant === "outlined" ? "left-3" : "left-4",
|
|
@@ -574,15 +591,15 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
574
591
|
r.error ? "text-error peer-focus:text-error" : "text-on-surface-variant peer-focus:text-primary"
|
|
575
592
|
].join(" ");
|
|
576
593
|
});
|
|
577
|
-
function
|
|
594
|
+
function E(e) {
|
|
578
595
|
let t = e.target;
|
|
579
|
-
i("update:modelValue", t.value);
|
|
596
|
+
i("update:modelValue", t.value), r.debounce > 0 && _(t.value);
|
|
580
597
|
}
|
|
581
|
-
return (n, r) => (y(), c("div",
|
|
598
|
+
return (n, r) => (y(), c("div", ue, [l("div", {
|
|
582
599
|
ref_key: "fieldBgEl",
|
|
583
600
|
ref: p,
|
|
584
601
|
class: m(["relative", t.variant === "outlined" ? "mt-2" : ""]),
|
|
585
|
-
style: h(t.variant === "outlined" ? { "--field-bg":
|
|
602
|
+
style: h(t.variant === "outlined" ? { "--field-bg": D(g) } : void 0)
|
|
586
603
|
}, [
|
|
587
604
|
t.leadingIcon ? (y(), c("div", {
|
|
588
605
|
key: 0,
|
|
@@ -593,53 +610,55 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
593
610
|
}, null, 8, ["name"])], 2)) : s("", !0),
|
|
594
611
|
t.multiline ? (y(), c("textarea", {
|
|
595
612
|
key: 1,
|
|
596
|
-
id:
|
|
613
|
+
id: D(o),
|
|
597
614
|
value: String(t.modelValue),
|
|
598
615
|
rows: t.rows,
|
|
599
616
|
disabled: t.disabled,
|
|
600
617
|
required: t.required,
|
|
601
618
|
placeholder: " ",
|
|
602
|
-
class: m(
|
|
603
|
-
onInput:
|
|
604
|
-
}, null, 42,
|
|
619
|
+
class: m(x.value),
|
|
620
|
+
onInput: E
|
|
621
|
+
}, null, 42, de)) : (y(), c("input", {
|
|
605
622
|
key: 2,
|
|
606
|
-
id:
|
|
623
|
+
id: D(o),
|
|
607
624
|
type: t.type,
|
|
608
625
|
value: t.modelValue,
|
|
609
626
|
disabled: t.disabled,
|
|
610
627
|
required: t.required,
|
|
611
628
|
autocomplete: t.autocomplete,
|
|
612
629
|
placeholder: " ",
|
|
613
|
-
class: m(
|
|
614
|
-
onInput:
|
|
615
|
-
}, null, 42,
|
|
630
|
+
class: m(x.value),
|
|
631
|
+
onInput: E
|
|
632
|
+
}, null, 42, fe)),
|
|
616
633
|
l("label", {
|
|
617
|
-
for:
|
|
618
|
-
class: m(
|
|
619
|
-
}, [u(
|
|
620
|
-
n.$slots.trailing ? (y(), c("div",
|
|
634
|
+
for: D(o),
|
|
635
|
+
class: m(w.value)
|
|
636
|
+
}, [u(T(t.label), 1), t.required ? (y(), c("span", me, "\xA0*")) : s("", !0)], 10, pe),
|
|
637
|
+
n.$slots.trailing ? (y(), c("div", he, [C(n.$slots, "trailing")])) : b.value ? (y(), c("button", {
|
|
621
638
|
key: 4,
|
|
622
639
|
type: "button",
|
|
623
640
|
class: "absolute right-3 top-1/2 -translate-y-1/2 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",
|
|
624
|
-
onClick: r[0] ||= (e) =>
|
|
641
|
+
onClick: r[0] ||= (e) => {
|
|
642
|
+
D(v)(), i("update:modelValue", "");
|
|
643
|
+
}
|
|
625
644
|
}, [d(e, {
|
|
626
645
|
name: "close",
|
|
627
646
|
size: 18
|
|
628
647
|
})])) : s("", !0)
|
|
629
|
-
], 6), t.error ? (y(), c("p",
|
|
648
|
+
], 6), t.error ? (y(), c("p", ge, T(t.error), 1)) : t.hint ? (y(), c("p", $, T(t.hint), 1)) : s("", !0)]));
|
|
630
649
|
}
|
|
631
|
-
}),
|
|
650
|
+
}), ve = /* @__PURE__ */ f({
|
|
632
651
|
__name: "MMenu",
|
|
633
652
|
props: { align: { default: "right" } },
|
|
634
653
|
setup(e, { expose: t }) {
|
|
635
|
-
let u = e, f =
|
|
636
|
-
function
|
|
654
|
+
let u = e, f = S(!1), p = S(null), m = S(null), g = S({});
|
|
655
|
+
function x() {
|
|
637
656
|
if (!p.value) return;
|
|
638
657
|
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` };
|
|
639
658
|
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;
|
|
640
659
|
}
|
|
641
660
|
function w() {
|
|
642
|
-
f.value ||
|
|
661
|
+
f.value || x(), f.value = !f.value;
|
|
643
662
|
}
|
|
644
663
|
function T() {
|
|
645
664
|
f.value = !1;
|
|
@@ -659,7 +678,7 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
659
678
|
T();
|
|
660
679
|
return;
|
|
661
680
|
}
|
|
662
|
-
|
|
681
|
+
x();
|
|
663
682
|
}
|
|
664
683
|
function O(e) {
|
|
665
684
|
e.key === "Escape" && T();
|
|
@@ -669,13 +688,13 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
669
688
|
}), v(() => {
|
|
670
689
|
document.removeEventListener("mousedown", E), document.removeEventListener("keydown", O), window.removeEventListener("scroll", D, !0);
|
|
671
690
|
});
|
|
672
|
-
let
|
|
691
|
+
let k = a(() => u.align === "right" ? "top right" : "top left");
|
|
673
692
|
return (e, t) => (y(), c(n, null, [l("div", {
|
|
674
693
|
ref_key: "triggerEl",
|
|
675
694
|
ref: p,
|
|
676
695
|
class: "inline-block",
|
|
677
696
|
onClick: w
|
|
678
|
-
}, [
|
|
697
|
+
}, [C(e.$slots, "trigger", { open: f.value })], 512), (y(), o(r, { to: "body" }, [d(i, {
|
|
679
698
|
"enter-active-class": "transition-[opacity,transform] duration-100 ease-out",
|
|
680
699
|
"enter-from-class": "opacity-0 scale-95",
|
|
681
700
|
"enter-to-class": "opacity-100 scale-100",
|
|
@@ -683,23 +702,23 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
683
702
|
"leave-from-class": "opacity-100 scale-100",
|
|
684
703
|
"leave-to-class": "opacity-0 scale-95"
|
|
685
704
|
}, {
|
|
686
|
-
default:
|
|
705
|
+
default: M(() => [f.value ? (y(), c("div", {
|
|
687
706
|
key: 0,
|
|
688
707
|
ref_key: "dropdownEl",
|
|
689
708
|
ref: m,
|
|
690
709
|
class: "fixed z-500 min-w-48 overflow-hidden rounded-lg bg-surface-container shadow-elevation-2",
|
|
691
710
|
style: h({
|
|
692
711
|
...g.value,
|
|
693
|
-
transformOrigin:
|
|
712
|
+
transformOrigin: k.value
|
|
694
713
|
})
|
|
695
714
|
}, [l("div", {
|
|
696
715
|
class: "overflow-y-auto py-1",
|
|
697
716
|
style: h({ maxHeight: g.value.maxHeight })
|
|
698
|
-
}, [
|
|
717
|
+
}, [C(e.$slots, "default", { close: T })], 4)], 4)) : s("", !0)]),
|
|
699
718
|
_: 3
|
|
700
719
|
})]))], 64));
|
|
701
720
|
}
|
|
702
|
-
}),
|
|
721
|
+
}), ye = { class: "flex-1" }, be = /* @__PURE__ */ f({
|
|
703
722
|
__name: "MMenuItem",
|
|
704
723
|
props: {
|
|
705
724
|
icon: {},
|
|
@@ -715,34 +734,34 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
715
734
|
},
|
|
716
735
|
emits: ["click"],
|
|
717
736
|
setup(t, { emit: n }) {
|
|
718
|
-
let u = t, f = n, g =
|
|
719
|
-
function
|
|
737
|
+
let u = t, f = n, g = k(), _ = a(() => u.to ? "RouterLink" : "button"), v = a(() => !!g.children), b = p("m-menu-close", null);
|
|
738
|
+
function x() {
|
|
720
739
|
u.disabled || v.value || (f("click"), b?.());
|
|
721
740
|
}
|
|
722
|
-
let T =
|
|
723
|
-
function
|
|
741
|
+
let T = S(!1), E = S(), D = S({});
|
|
742
|
+
function O() {
|
|
724
743
|
if (!v.value || u.disabled || (T.value = !0, !E.value)) return;
|
|
725
744
|
let e = E.value.getBoundingClientRect(), t = e.right + 200 > window.innerWidth;
|
|
726
|
-
|
|
745
|
+
D.value = {
|
|
727
746
|
position: "fixed",
|
|
728
747
|
top: `${e.top}px`,
|
|
729
748
|
...t ? { right: `${window.innerWidth - e.left}px` } : { left: `${e.right}px` },
|
|
730
749
|
zIndex: "501"
|
|
731
750
|
};
|
|
732
751
|
}
|
|
733
|
-
function
|
|
752
|
+
function A(e) {
|
|
734
753
|
e.relatedTarget?.closest(".m3-submenu") || (T.value = !1);
|
|
735
754
|
}
|
|
736
|
-
function
|
|
755
|
+
function j(e) {
|
|
737
756
|
let t = e.relatedTarget;
|
|
738
757
|
t?.closest(".m3-submenu") || E.value?.contains(t) || (T.value = !1);
|
|
739
758
|
}
|
|
740
759
|
return (n, a) => (y(), c("div", {
|
|
741
760
|
ref_key: "itemEl",
|
|
742
761
|
ref: E,
|
|
743
|
-
onMouseenter:
|
|
744
|
-
onMouseleave:
|
|
745
|
-
}, [(y(), o(
|
|
762
|
+
onMouseenter: O,
|
|
763
|
+
onMouseleave: A
|
|
764
|
+
}, [(y(), o(w(_.value), {
|
|
746
765
|
to: t.to || void 0,
|
|
747
766
|
type: t.to ? void 0 : "button",
|
|
748
767
|
class: m(["flex w-full items-center gap-3 px-4 py-2.5 text-left text-body-large transition-colors", [
|
|
@@ -751,16 +770,16 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
751
770
|
!t.disabled && !t.danger ? "text-on-surface hover:bg-on-surface/8" : ""
|
|
752
771
|
]]),
|
|
753
772
|
disabled: t.disabled || void 0,
|
|
754
|
-
onClick:
|
|
773
|
+
onClick: x
|
|
755
774
|
}, {
|
|
756
|
-
default:
|
|
775
|
+
default: M(() => [
|
|
757
776
|
t.icon ? (y(), o(e, {
|
|
758
777
|
key: 0,
|
|
759
778
|
name: t.icon,
|
|
760
779
|
size: 20,
|
|
761
780
|
class: m(["shrink-0", t.danger ? "text-error" : "text-on-surface-variant"])
|
|
762
781
|
}, null, 8, ["name", "class"])) : s("", !0),
|
|
763
|
-
l("span",
|
|
782
|
+
l("span", ye, [C(n.$slots, "default")]),
|
|
764
783
|
v.value ? (y(), o(e, {
|
|
765
784
|
key: 1,
|
|
766
785
|
name: "chevron_right",
|
|
@@ -783,17 +802,17 @@ var G = "inline-flex shrink-0 items-center justify-center transition-colors dura
|
|
|
783
802
|
"leave-active-class": "transition-opacity duration-75",
|
|
784
803
|
"leave-to-class": "opacity-0"
|
|
785
804
|
}, {
|
|
786
|
-
default:
|
|
805
|
+
default: M(() => [T.value ? (y(), c("div", {
|
|
787
806
|
key: 0,
|
|
788
807
|
class: "m3-submenu min-w-44 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2",
|
|
789
|
-
style: h(
|
|
790
|
-
onMouseleave:
|
|
791
|
-
}, [
|
|
808
|
+
style: h(D.value),
|
|
809
|
+
onMouseleave: j
|
|
810
|
+
}, [C(n.$slots, "children")], 36)) : s("", !0)]),
|
|
792
811
|
_: 3
|
|
793
812
|
})])) : s("", !0)], 544));
|
|
794
813
|
}
|
|
795
814
|
});
|
|
796
815
|
//#endregion
|
|
797
|
-
export {
|
|
816
|
+
export { Z as a, K as c, P as d, I as f, le as i, H as l, ve as n, Y as o, _e as r, q as s, be as t, F as u };
|
|
798
817
|
|
|
799
|
-
//# sourceMappingURL=MMenuItem-
|
|
818
|
+
//# sourceMappingURL=MMenuItem-COdgD4m7.js.map
|