@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.
@@ -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, ref as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useId as E, useSlots as D, watch as O, withCtx as k, withModifiers as A } from "vue";
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 j = {
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
- }, M = Symbol("m3-locale");
75
- function N() {
76
- let e = p(M, {});
77
- return {
78
- ...j,
79
- ...e
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 P = ["aria-label"], F = {
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
- }, I = [
86
+ }, R = [
88
87
  "width",
89
88
  "height",
90
89
  "viewBox"
91
- ], L = ["d", "stroke-dasharray"], R = 3, z = 9, B = /* @__PURE__ */ f({
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 = N(), r = a(() => (t.size / 2 - 1 - R / 2) / 1.25), i = a(() => t.size / 2), o = a(() => {
103
- let e = i.value, t = r.value, n = t * .08, a = z * 24, o = [], s = 0, c = 0, l = 0;
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(z * i), d = e + u * Math.cos(i), f = e + u * Math.sin(i);
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 ?? T(n).loading
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": R,
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, L)], 12, I)) : (y(), c("span", F))], 12, P));
138
+ }, null, 12, z)], 12, R)) : (y(), c("span", ee))], 12, L));
140
139
  }
141
- }), V = [
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 H(e) {
163
- for (let t of V) if (e.classList.contains(t)) return `var(--color-${t.slice(3)})`;
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 U(e) {
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 W(e, t) {
176
- let n = x("var(--color-surface)");
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 = H(t);
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 (!U(n)) {
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 G = "inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer disabled:cursor-not-allowed disabled:opacity-[0.38]", K = /* @__PURE__ */ f({
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(C(r.value), {
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
- G,
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: k(() => [d(e, {
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
- }), q = "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]", J = /* @__PURE__ */ f({
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 w(e) {
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(C(i.value), {
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
- q,
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: w
416
+ onPointerdown: S
401
417
  }, {
402
- default: k(() => [t.loading ? (y(), o(B, {
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), S(n.$slots, "default")]),
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
- }), Y = { class: "flex items-start justify-between gap-4 px-6 pt-6 pb-2" }, X = { class: "text-headline-small text-on-surface" }, Z = { class: "overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant" }, Q = {
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
- }, ee = { class: "flex h-14 shrink-0 items-center gap-2 px-2" }, te = { class: "flex-1 text-title-large font-medium text-on-surface" }, ne = {
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
- }, re = { class: "flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant" }, ie = /*#__PURE__*/ t(/* @__PURE__ */ f({
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 = N(), d = t;
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 O(() => n.modelValue, (e) => {
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: k(() => [e.modelValue ? (y(), c("div", $, [l("div", ee, [
460
- e.persistent ? s("", !0) : (y(), o(K, {
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 ?? T(a).close,
479
+ label: e.closeLabel ?? D(a).close,
464
480
  onClick: f
465
481
  }, null, 8, ["label"])),
466
- l("h2", te, [S(t.$slots, "title", {}, () => [u(w(e.title), 1)], !0)]),
467
- t.$slots.actions ? (y(), c("div", ne, [S(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
468
- ]), l("div", re, [S(t.$slots, "default", {}, void 0, !0)])])) : s("", !0)]),
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: k(() => [e.modelValue ? (y(), c("div", {
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: A(f, ["self"])
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", Y, [l("h2", X, [S(t.$slots, "title", {}, () => [u(w(e.title), 1)], !0)]), e.persistent ? s("", !0) : (y(), o(K, {
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 ?? T(a).close,
498
+ label: e.closeLabel ?? D(a).close,
483
499
  onClick: f
484
500
  }, null, 8, ["label"]))]),
485
- l("div", Z, [S(t.$slots, "default", {}, void 0, !0)]),
486
- t.$slots.actions ? (y(), c("div", Q, [S(t.$slots, "actions", {}, void 0, !0)])) : s("", !0)
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"]]), ae = { class: "flex flex-col gap-1" }, oe = [
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
- ], se = [
513
+ ], fe = [
498
514
  "id",
499
515
  "type",
500
516
  "value",
501
517
  "disabled",
502
518
  "required",
503
519
  "autocomplete"
504
- ], ce = ["for"], le = {
520
+ ], pe = ["for"], me = {
505
521
  key: 0,
506
522
  class: "text-error"
507
- }, ue = {
523
+ }, he = {
508
524
  key: 3,
509
525
  class: "absolute right-2 top-1/2 -translate-y-1/2"
510
- }, de = {
526
+ }, ge = {
511
527
  key: 0,
512
528
  class: "px-4 text-body-small text-error"
513
- }, fe = {
529
+ }, $ = {
514
530
  key: 1,
515
531
  class: "px-4 text-body-small text-on-surface-variant"
516
- }, pe = /* @__PURE__ */ f({
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 = E(), f = D(), p = x(null), { resolvedFieldBg: g } = W(p, () => r.fieldBg), _ = a(() => r.clearable && String(r.modelValue).length > 0 && !r.disabled), v = a(() => {
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
- }), b = a(() => {
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 C(e) {
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", ae, [l("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": T(g) } : void 0)
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: T(o),
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(v.value),
603
- onInput: C
604
- }, null, 42, oe)) : (y(), c("input", {
619
+ class: m(x.value),
620
+ onInput: E
621
+ }, null, 42, de)) : (y(), c("input", {
605
622
  key: 2,
606
- id: T(o),
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(v.value),
614
- onInput: C
615
- }, null, 42, se)),
630
+ class: m(x.value),
631
+ onInput: E
632
+ }, null, 42, fe)),
616
633
  l("label", {
617
- for: T(o),
618
- class: m(b.value)
619
- }, [u(w(t.label), 1), t.required ? (y(), c("span", le, "\xA0*")) : s("", !0)], 10, ce),
620
- n.$slots.trailing ? (y(), c("div", ue, [S(n.$slots, "trailing")])) : _.value ? (y(), c("button", {
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) => i("update:modelValue", "")
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", de, w(t.error), 1)) : t.hint ? (y(), c("p", fe, w(t.hint), 1)) : s("", !0)]));
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
- }), me = /* @__PURE__ */ f({
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 = x(!1), p = x(null), m = x(null), g = x({});
636
- function C() {
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 || C(), f.value = !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
- C();
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 A = a(() => u.align === "right" ? "top right" : "top left");
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
- }, [S(e.$slots, "trigger", { open: f.value })], 512), (y(), o(r, { to: "body" }, [d(i, {
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: k(() => [f.value ? (y(), c("div", {
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: A.value
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
- }, [S(e.$slots, "default", { close: T })], 4)], 4)) : s("", !0)]),
717
+ }, [C(e.$slots, "default", { close: T })], 4)], 4)) : s("", !0)]),
699
718
  _: 3
700
719
  })]))], 64));
701
720
  }
702
- }), he = { class: "flex-1" }, ge = /* @__PURE__ */ f({
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 = D(), _ = a(() => u.to ? "RouterLink" : "button"), v = a(() => !!g.children), b = p("m-menu-close", null);
719
- function w() {
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 = x(!1), E = x(), O = x({});
723
- function A() {
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
- O.value = {
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 j(e) {
752
+ function A(e) {
734
753
  e.relatedTarget?.closest(".m3-submenu") || (T.value = !1);
735
754
  }
736
- function M(e) {
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: A,
744
- onMouseleave: j
745
- }, [(y(), o(C(_.value), {
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: w
773
+ onClick: x
755
774
  }, {
756
- default: k(() => [
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", he, [S(n.$slots, "default")]),
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: k(() => [T.value ? (y(), c("div", {
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(O.value),
790
- onMouseleave: M
791
- }, [S(n.$slots, "children")], 36)) : s("", !0)]),
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 { J as a, B as c, N as d, ie as i, M as l, me as n, K as o, pe as r, W as s, ge as t, j as u };
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-FyttjOj_.js.map
818
+ //# sourceMappingURL=MMenuItem-COdgD4m7.js.map