@muibook/components 15.0.0 → 16.0.0
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/esm/components/mui-prompt/index.js +145 -158
- package/dist/esm/components/mui-prompt-message/index.js +26 -43
- package/dist/esm/components/mui-slide-frame/index.js +57 -119
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +2778 -2869
- package/dist/types/components/mui-slide-frame/index.d.ts +0 -1
- package/package.json +1 -1
|
@@ -16,12 +16,12 @@ import "../mui-icons/stop/index.js";
|
|
|
16
16
|
import "../mui-icons/attention/index.js";
|
|
17
17
|
import "../mui-rule/index.js";
|
|
18
18
|
import "../mui-prompt-toggle/index.js";
|
|
19
|
-
class
|
|
19
|
+
class S extends HTMLElement {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(), this.triggerEl = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null, this.previewResizeObserver = null, this.fanAnimations = /* @__PURE__ */ new Map(), this.pendingColorFade = !1, this.lastDebugPayload = '{"event":"idle"}', this.lightDomObserver = null, this.onActionsSlotChange = () => this.updateActionsLayout(), this.enforceActionVariants = () => {
|
|
22
22
|
if (!this.shadowRoot) return;
|
|
23
|
-
const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-
|
|
24
|
-
if (!
|
|
23
|
+
const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-right"]')), o = (r, n) => {
|
|
24
|
+
if (!n || r.tagName.toLowerCase() !== "mui-button") return;
|
|
25
25
|
if (r.hasAttribute("icon-only")) {
|
|
26
26
|
r.style.marginRight = "var(--space-025)";
|
|
27
27
|
return;
|
|
@@ -29,16 +29,16 @@ class k extends HTMLElement {
|
|
|
29
29
|
r.style.marginRight === "var(--space-025)" && (r.style.marginRight = "");
|
|
30
30
|
};
|
|
31
31
|
e.forEach((r) => {
|
|
32
|
-
const
|
|
32
|
+
const n = r.name === "actions";
|
|
33
33
|
r.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
34
|
-
[a, ...Array.from(a.querySelectorAll("*"))].forEach((
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
|
|
34
|
+
[a, ...Array.from(a.querySelectorAll("*"))].forEach((h) => {
|
|
35
|
+
const p = h.tagName.toLowerCase();
|
|
36
|
+
if (p === "mui-button") {
|
|
37
|
+
h.setAttribute("variant", "tertiary"), o(h, n);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
p === "mui-dropdown" && h.querySelectorAll('[slot="action"]').forEach((d) => {
|
|
41
|
+
d instanceof HTMLElement && d.tagName.toLowerCase() === "mui-button" && (d.setAttribute("variant", "tertiary"), o(d, n));
|
|
42
42
|
});
|
|
43
43
|
});
|
|
44
44
|
});
|
|
@@ -48,20 +48,20 @@ class k extends HTMLElement {
|
|
|
48
48
|
}, this.onPaste = (t) => {
|
|
49
49
|
const e = t, o = e.clipboardData;
|
|
50
50
|
if (!o) return;
|
|
51
|
-
const r = Array.from(o.files || []),
|
|
52
|
-
if (!
|
|
53
|
-
(
|
|
54
|
-
const v = r.map((
|
|
55
|
-
kind:
|
|
56
|
-
mimeType:
|
|
57
|
-
file:
|
|
58
|
-
fileName:
|
|
59
|
-
size:
|
|
60
|
-
badge:
|
|
61
|
-
preview:
|
|
62
|
-
value:
|
|
51
|
+
const r = Array.from(o.files || []), n = o.getData("text/plain") || "", i = n.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, h = this.getAttribute("preview-overflow-to-preview") !== "false", p = this.getAttribute("preview-threshold-chars"), c = Number.isFinite(Number.parseInt(p || "", 10)) ? Math.max(1, Number.parseInt(p || "", 10)) : 220, d = a ? this.detectBadge(i) : "", u = d !== "" && d !== "Insightful", b = h && a && (!!(l != null && l.url) || i.length >= c || u), m = r.length > 0;
|
|
52
|
+
if (!m && !a) return;
|
|
53
|
+
(m || b) && e.preventDefault();
|
|
54
|
+
const v = r.map((s) => ({
|
|
55
|
+
kind: s.type.startsWith("image/") ? "image" : s.type.startsWith("video/") ? "video" : s.type.startsWith("audio/") ? "audio" : "file",
|
|
56
|
+
mimeType: s.type || "",
|
|
57
|
+
file: s,
|
|
58
|
+
fileName: s.name || "",
|
|
59
|
+
size: s.size || 0,
|
|
60
|
+
badge: s.type.startsWith("image/") ? "IMG" : s.type.startsWith("video/") ? "VIDEO" : s.type.startsWith("audio/") ? "MUSIC" : "FILE",
|
|
61
|
+
preview: s.name || "Pasted file",
|
|
62
|
+
value: s.name || ""
|
|
63
63
|
}));
|
|
64
|
-
|
|
64
|
+
b && i && (l != null && l.url ? v.unshift({
|
|
65
65
|
kind: l.kind === "image" ? "image" : "text",
|
|
66
66
|
mimeType: l.mimeType,
|
|
67
67
|
badge: l.badge,
|
|
@@ -72,14 +72,14 @@ class k extends HTMLElement {
|
|
|
72
72
|
mimeType: "text/plain",
|
|
73
73
|
badge: this.detectBadge(i),
|
|
74
74
|
preview: i.slice(0, 260),
|
|
75
|
-
value:
|
|
75
|
+
value: n
|
|
76
76
|
})), this.emitPromptItems({
|
|
77
77
|
source: "paste",
|
|
78
78
|
items: v,
|
|
79
|
-
text:
|
|
80
|
-
textBadge: (l == null ? void 0 : l.badge) ||
|
|
81
|
-
overflowed:
|
|
82
|
-
thresholdChars:
|
|
79
|
+
text: n || "",
|
|
80
|
+
textBadge: (l == null ? void 0 : l.badge) || d,
|
|
81
|
+
overflowed: b,
|
|
82
|
+
thresholdChars: c
|
|
83
83
|
});
|
|
84
84
|
}, this.onInput = (t) => {
|
|
85
85
|
const e = t.target;
|
|
@@ -135,8 +135,8 @@ class k extends HTMLElement {
|
|
|
135
135
|
}, this.onContextChipDismiss = (t) => {
|
|
136
136
|
t.composedPath().find(
|
|
137
137
|
(r) => {
|
|
138
|
-
var
|
|
139
|
-
return r instanceof HTMLElement && (((
|
|
138
|
+
var n, i, a;
|
|
139
|
+
return r instanceof HTMLElement && (((n = r.hasAttribute) == null ? void 0 : n.call(r, "context-active")) || ((i = r.hasAttribute) == null ? void 0 : i.call(r, "context-chip")) || ((a = r.hasAttribute) == null ? void 0 : a.call(r, "context-spinner")));
|
|
140
140
|
}
|
|
141
141
|
) && (this.setContextMode("icon", "dismiss"), this.updateActionsLayout());
|
|
142
142
|
}, this.toggleFanOpen = () => {
|
|
@@ -183,17 +183,17 @@ class k extends HTMLElement {
|
|
|
183
183
|
}
|
|
184
184
|
setDebugState(t, e) {
|
|
185
185
|
if (!this.shadowRoot) return;
|
|
186
|
-
const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"),
|
|
187
|
-
if (!o || !r || !
|
|
186
|
+
const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), n = this.shadowRoot.querySelector("#promptDebugPayload");
|
|
187
|
+
if (!o || !r || !n) return;
|
|
188
188
|
const i = this.hasAttribute("debug");
|
|
189
|
-
o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)),
|
|
189
|
+
o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), n.textContent = this.lastDebugPayload);
|
|
190
190
|
}
|
|
191
191
|
emitPromptItems({
|
|
192
192
|
items: t,
|
|
193
193
|
text: e,
|
|
194
194
|
textBadge: o,
|
|
195
195
|
overflowed: r,
|
|
196
|
-
thresholdChars:
|
|
196
|
+
thresholdChars: n,
|
|
197
197
|
source: i
|
|
198
198
|
}) {
|
|
199
199
|
this.dispatchEvent(
|
|
@@ -204,7 +204,7 @@ class k extends HTMLElement {
|
|
|
204
204
|
text: e,
|
|
205
205
|
textBadge: o,
|
|
206
206
|
overflowed: r,
|
|
207
|
-
thresholdChars:
|
|
207
|
+
thresholdChars: n,
|
|
208
208
|
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
209
209
|
},
|
|
210
210
|
bubbles: !0,
|
|
@@ -236,19 +236,19 @@ class k extends HTMLElement {
|
|
|
236
236
|
const t = this.normalizeContextMode(this.getAttribute("context-mode"));
|
|
237
237
|
Array.from(
|
|
238
238
|
this.shadowRoot.querySelectorAll(
|
|
239
|
-
'slot[name="actions"], slot[name="actions-right"]
|
|
239
|
+
'slot[name="actions"], slot[name="actions-right"]'
|
|
240
240
|
)
|
|
241
241
|
).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
|
|
242
242
|
[r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
|
|
243
|
-
const l = i.tagName.toLowerCase() === "mui-prompt-toggle",
|
|
243
|
+
const l = i.tagName.toLowerCase() === "mui-prompt-toggle", h = i.hasAttribute("context-toggle"), p = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
|
|
244
244
|
if (l) {
|
|
245
245
|
i.setAttribute("mode", t);
|
|
246
246
|
return;
|
|
247
247
|
}
|
|
248
|
-
if (
|
|
248
|
+
if (h || p) {
|
|
249
249
|
i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
|
|
250
|
-
const
|
|
251
|
-
i.toggleAttribute("hidden", !
|
|
250
|
+
const c = h ? t === "icon" : t === "chip";
|
|
251
|
+
i.toggleAttribute("hidden", !c), i.style.display = c ? "inline-flex" : "none";
|
|
252
252
|
}
|
|
253
253
|
});
|
|
254
254
|
});
|
|
@@ -286,9 +286,9 @@ class k extends HTMLElement {
|
|
|
286
286
|
return;
|
|
287
287
|
}
|
|
288
288
|
if (t === "context-mode") {
|
|
289
|
-
const
|
|
290
|
-
if (o !==
|
|
291
|
-
this.setAttribute("context-mode",
|
|
289
|
+
const n = this.normalizeContextMode(o);
|
|
290
|
+
if (o !== n) {
|
|
291
|
+
this.setAttribute("context-mode", n);
|
|
292
292
|
return;
|
|
293
293
|
}
|
|
294
294
|
this.syncContextModeUI(), this.updateActionsLayout();
|
|
@@ -434,10 +434,10 @@ class k extends HTMLElement {
|
|
|
434
434
|
t == null || t.focus();
|
|
435
435
|
}
|
|
436
436
|
syncTextareaHeight(t) {
|
|
437
|
-
const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10),
|
|
437
|
+
const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), n = getComputedStyle(t), a = (Number.parseFloat(n.fontSize) || 16) * 1.55, l = Number.parseFloat(n.paddingTop) || 0, h = Number.parseFloat(n.paddingBottom) || 0, p = Number.parseFloat(n.borderTopWidth) || 0, c = Number.parseFloat(n.borderBottomWidth) || 0, d = l + h + p + c, u = 3 * a + d, b = r * a + d;
|
|
438
438
|
t.style.height = "auto";
|
|
439
|
-
const
|
|
440
|
-
t.style.height = `${Math.ceil(v)}px`, t.style.overflowY =
|
|
439
|
+
const m = t.scrollHeight, v = Math.max(u, Math.min(m, b));
|
|
440
|
+
t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = m > b ? "auto" : "hidden";
|
|
441
441
|
}
|
|
442
442
|
detectBadge(t) {
|
|
443
443
|
const e = t.trim();
|
|
@@ -476,7 +476,7 @@ class k extends HTMLElement {
|
|
|
476
476
|
const o = e.match(/https?:\/\/[^\s]+/i), r = ((o == null ? void 0 : o[0]) || e).trim();
|
|
477
477
|
if (!/^https?:\/\//i.test(r)) return null;
|
|
478
478
|
try {
|
|
479
|
-
const
|
|
479
|
+
const n = new URL(r), i = n.pathname.toLowerCase(), a = n.hostname.toLowerCase();
|
|
480
480
|
if (/\.(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(i))
|
|
481
481
|
return { url: r, kind: "image", badge: "IMG", mimeType: "image/*" };
|
|
482
482
|
if (a === "youtu.be" || a.endsWith("youtube.com") || a.endsWith("youtube-nocookie.com"))
|
|
@@ -495,24 +495,24 @@ class k extends HTMLElement {
|
|
|
495
495
|
return null;
|
|
496
496
|
}
|
|
497
497
|
bindEvents() {
|
|
498
|
-
var
|
|
498
|
+
var n;
|
|
499
499
|
if (!this.shadowRoot) return;
|
|
500
500
|
this.unbindEvents();
|
|
501
501
|
const t = this.shadowRoot.querySelector("textarea");
|
|
502
502
|
t == null || t.addEventListener("input", this.onInput), t == null || t.addEventListener("keydown", this.onKeyDown), t == null || t.addEventListener("paste", this.onPaste), t == null || t.addEventListener("focus", this.onTextareaFocus);
|
|
503
|
-
const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-
|
|
504
|
-
e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange),
|
|
503
|
+
const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-right"]'), r = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
|
|
504
|
+
e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange), typeof MutationObserver < "u" && ((n = this.lightDomObserver) == null || n.disconnect(), this.lightDomObserver = new MutationObserver(() => this.updateActionsLayout()), this.lightDomObserver.observe(this, {
|
|
505
505
|
childList: !0,
|
|
506
506
|
subtree: !0,
|
|
507
507
|
attributes: !0,
|
|
508
508
|
attributeFilter: ["slot", "hidden"]
|
|
509
|
-
})),
|
|
509
|
+
})), r == null || r.addEventListener("click", this.onDefaultSubmitClick), this.addEventListener("prompt-preview-open", this.onPreviewOpen), this.addEventListener("click", this.onContextToggleClick), this.addEventListener("dismiss", this.onContextChipDismiss), this.syncErrorVisibility(), this.bindPreviewOverflow(), this.bindActionTrigger(), this.syncLoadingState();
|
|
510
510
|
}
|
|
511
511
|
unbindEvents() {
|
|
512
|
-
var i, a, l
|
|
512
|
+
var n, i, a, l;
|
|
513
513
|
if (!this.shadowRoot) return;
|
|
514
|
-
const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-
|
|
515
|
-
t == null || t.removeEventListener("input", this.onInput), t == null || t.removeEventListener("keydown", this.onKeyDown), t == null || t.removeEventListener("paste", this.onPaste), t == null || t.removeEventListener("focus", this.onTextareaFocus),
|
|
514
|
+
const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-right"]'), r = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
|
|
515
|
+
t == null || t.removeEventListener("input", this.onInput), t == null || t.removeEventListener("keydown", this.onKeyDown), t == null || t.removeEventListener("paste", this.onPaste), t == null || t.removeEventListener("focus", this.onTextareaFocus), r == null || r.removeEventListener("click", this.onDefaultSubmitClick), e == null || e.removeEventListener("slotchange", this.onActionsSlotChange), o == null || o.removeEventListener("slotchange", this.onActionsSlotChange), this.removeEventListener("prompt-preview-open", this.onPreviewOpen), this.removeEventListener("click", this.onContextToggleClick), this.removeEventListener("dismiss", this.onContextChipDismiss), this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null), (n = this.previewRowEl) == null || n.removeEventListener("scroll", this.onPreviewScroll), (i = this.previewSlotEl) == null || i.removeEventListener("slotchange", this.onPreviewSlotChange), (a = this.previewResizeObserver) == null || a.disconnect(), this.previewResizeObserver = null, (l = this.lightDomObserver) == null || l.disconnect(), this.lightDomObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
|
|
516
516
|
}
|
|
517
517
|
bindPreviewOverflow() {
|
|
518
518
|
var t, e;
|
|
@@ -539,54 +539,54 @@ class k extends HTMLElement {
|
|
|
539
539
|
});
|
|
540
540
|
return;
|
|
541
541
|
}
|
|
542
|
-
const
|
|
542
|
+
const n = e === "auto" ? this.hasAttribute("loading") : !0;
|
|
543
543
|
r.forEach((a) => {
|
|
544
|
-
a.tagName.toLowerCase() === "mui-prompt-preview" && (
|
|
544
|
+
a.tagName.toLowerCase() === "mui-prompt-preview" && (n ? a.setAttribute("loading", "") : a.removeAttribute("loading"), o && a.setAttribute("loading-label", o));
|
|
545
545
|
});
|
|
546
546
|
}
|
|
547
547
|
normalizePreviewDetail(t) {
|
|
548
|
-
const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(),
|
|
548
|
+
const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(), n = String(t.label || "Pasted Content"), i = String(t.imageTint || "").trim(), a = o ? "image" : e ? "code" : "text";
|
|
549
549
|
return {
|
|
550
550
|
id: String(t.id || ""),
|
|
551
551
|
value: e,
|
|
552
552
|
badge: r || (o ? "IMG" : this.detectBadge(e)),
|
|
553
|
-
label:
|
|
553
|
+
label: n,
|
|
554
554
|
bgImage: o,
|
|
555
555
|
imageTint: i,
|
|
556
556
|
type: a
|
|
557
557
|
};
|
|
558
558
|
}
|
|
559
559
|
openInternalPreviewDialog(t) {
|
|
560
|
-
var
|
|
560
|
+
var f;
|
|
561
561
|
if (!this.shadowRoot) return;
|
|
562
|
-
const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"),
|
|
563
|
-
if (!
|
|
562
|
+
const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), n = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), h = this.getAttribute("preview-dialog-title") || l.label, p = l.value, c = l.bgImage, d = l.badge, u = p ? this.detectMediaUrl(p) : null, b = !c && p.length > 0 && (d === "VIDEO" || d === "MUSIC"), m = !c && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), v = c.length > 0, s = p.length > 0, y = (() => {
|
|
563
|
+
if (!u || u.kind !== "audio") return !1;
|
|
564
564
|
try {
|
|
565
|
-
const
|
|
566
|
-
return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(
|
|
565
|
+
const g = new URL(u.url);
|
|
566
|
+
return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(g.pathname.toLowerCase());
|
|
567
567
|
} catch {
|
|
568
568
|
return !1;
|
|
569
569
|
}
|
|
570
|
-
})(),
|
|
571
|
-
if (!
|
|
570
|
+
})(), w = (() => {
|
|
571
|
+
if (!u || !y) return "";
|
|
572
572
|
try {
|
|
573
|
-
const
|
|
573
|
+
const x = new URL(u.url).pathname.split("/").filter(Boolean).pop() || "", A = decodeURIComponent(x), E = A.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || A || "Audio";
|
|
574
574
|
return E.charAt(0).toUpperCase() + E.slice(1);
|
|
575
575
|
} catch {
|
|
576
576
|
return "Audio";
|
|
577
577
|
}
|
|
578
578
|
})();
|
|
579
|
-
if (!(!v && !
|
|
580
|
-
if (this.setAttribute("preview-dialog-value",
|
|
581
|
-
a && a.setAttribute("hidden", ""),
|
|
582
|
-
else if (
|
|
579
|
+
if (!(!v && !s && !m)) {
|
|
580
|
+
if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", c), this.setAttribute("preview-dialog-type", d || (v ? "IMG" : "CODE")), o && (o.textContent = h), m ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
|
|
581
|
+
a && a.setAttribute("hidden", ""), n && (n.setAttribute("src", c), n.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
|
|
582
|
+
else if (m && u) {
|
|
583
583
|
if (a) {
|
|
584
|
-
const
|
|
585
|
-
a.textContent =
|
|
584
|
+
const g = y;
|
|
585
|
+
a.textContent = g ? w : u.url, g ? (a.setAttribute("href", u.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !g);
|
|
586
586
|
}
|
|
587
|
-
i && (i.setAttribute("src",
|
|
588
|
-
} else
|
|
589
|
-
(
|
|
587
|
+
i && (i.setAttribute("src", u.url), i.removeAttribute("type"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), n && (n.removeAttribute("src"), n.setAttribute("hidden", ""));
|
|
588
|
+
} else b ? (a && (a.textContent = p, a.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", p), i.setAttribute("type", d === "VIDEO" ? "video" : "audio"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), n && (n.removeAttribute("src"), n.setAttribute("hidden", ""))) : (a && a.setAttribute("hidden", ""), r && (r.textContent = this.formatPreviewCode(p, d), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), n && (n.removeAttribute("src"), n.setAttribute("hidden", "")));
|
|
589
|
+
(f = e == null ? void 0 : e.open) == null || f.call(e);
|
|
590
590
|
}
|
|
591
591
|
}
|
|
592
592
|
syncPreviewEdgeShadows() {
|
|
@@ -599,22 +599,20 @@ class k extends HTMLElement {
|
|
|
599
599
|
}
|
|
600
600
|
bindActionTrigger() {
|
|
601
601
|
if (!this.shadowRoot || !this.isFanModeEnabled()) return;
|
|
602
|
-
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector(
|
|
602
|
+
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
|
|
603
603
|
if (!t) return;
|
|
604
604
|
this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null);
|
|
605
|
-
const
|
|
606
|
-
(
|
|
607
|
-
),
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
if (!(s.length > 0)) {
|
|
611
|
-
o && (o.setAttribute("hidden", ""), o.style.display = "none");
|
|
605
|
+
const o = t.assignedElements({ flatten: !0 }).filter(
|
|
606
|
+
(a) => !a.hasAttribute("hidden")
|
|
607
|
+
), r = o.length > 0;
|
|
608
|
+
if (!r) {
|
|
609
|
+
e && (e.setAttribute("hidden", ""), e.style.display = "none");
|
|
612
610
|
return;
|
|
613
611
|
}
|
|
614
|
-
const
|
|
615
|
-
|
|
616
|
-
const
|
|
617
|
-
|
|
612
|
+
const n = o.length === 1 && this.isContextOnlyAction(o[0]);
|
|
613
|
+
e && (e.toggleAttribute("hidden", n), e.style.display = n ? "none" : "inline-flex");
|
|
614
|
+
const i = n || !r ? null : e;
|
|
615
|
+
i && (this.triggerEl = i, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
|
|
618
616
|
}
|
|
619
617
|
syncTriggerIconState() {
|
|
620
618
|
if (!this.triggerEl) return;
|
|
@@ -635,79 +633,77 @@ class k extends HTMLElement {
|
|
|
635
633
|
updateActionsLayout() {
|
|
636
634
|
if (!this.shadowRoot) return;
|
|
637
635
|
this.syncContextModeUI();
|
|
638
|
-
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector(
|
|
636
|
+
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
|
|
639
637
|
if (!t) return;
|
|
640
|
-
const
|
|
641
|
-
(
|
|
642
|
-
),
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const n = !i || l;
|
|
649
|
-
o.toggleAttribute("hidden", n), o.style.display = n ? "none" : "inline-flex";
|
|
638
|
+
const o = t.assignedElements({ flatten: !0 }).filter(
|
|
639
|
+
(s) => !s.hasAttribute("hidden")
|
|
640
|
+
), r = o.length > 0, n = this.shadowRoot.querySelector(".actions-slot-left");
|
|
641
|
+
n && (n.style.display = r ? "inline-flex" : "none");
|
|
642
|
+
const i = o.length === 1 && this.isContextOnlyAction(o[0]);
|
|
643
|
+
if (e) {
|
|
644
|
+
const s = !r || i;
|
|
645
|
+
e.toggleAttribute("hidden", s), e.style.display = s ? "none" : "inline-flex";
|
|
650
646
|
}
|
|
651
|
-
const
|
|
652
|
-
this.toggleAttribute("has-actions",
|
|
653
|
-
const
|
|
654
|
-
this.enforceActionVariants(),
|
|
655
|
-
|
|
656
|
-
const
|
|
657
|
-
if (
|
|
658
|
-
this.setFanItemInert(
|
|
647
|
+
const a = i || !r ? null : e, l = o.filter((s) => s !== a), h = a ? [a, ...l] : o, p = this.shadowRoot.querySelector('slot[name="actions-right"]'), c = (p == null ? void 0 : p.assignedElements({ flatten: !0 })) || [], d = l.length > 0;
|
|
648
|
+
this.toggleAttribute("has-actions", r), this.toggleAttribute("has-extra-actions", d);
|
|
649
|
+
const u = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), m = 100, v = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
|
|
650
|
+
this.enforceActionVariants(), h.forEach((s, y) => {
|
|
651
|
+
s.style.transition = `transform ${m}ms ease, opacity ${m}ms ease`, s.style.zIndex = "";
|
|
652
|
+
const w = this.fanAnimations.get(s);
|
|
653
|
+
if (w && (w.cancel(), this.fanAnimations.delete(s)), !u) {
|
|
654
|
+
this.setFanItemInert(s, !1), s.style.transitionDelay = "", s.style.transform = "", s.style.opacity = "", s.style.pointerEvents = "", s.style.filter = "";
|
|
659
655
|
return;
|
|
660
656
|
}
|
|
661
657
|
if (y === 0) {
|
|
662
|
-
this.setFanItemInert(
|
|
658
|
+
this.setFanItemInert(s, !1), s.style.transitionDelay = "", s.style.transform = "translateX(0)", s.style.opacity = "1", s.style.pointerEvents = "", s.style.filter = "";
|
|
663
659
|
return;
|
|
664
660
|
}
|
|
665
|
-
if (!
|
|
666
|
-
this.setFanItemInert(
|
|
661
|
+
if (!b) {
|
|
662
|
+
this.setFanItemInert(s, !0), s.style.transitionDelay = "", s.style.transform = "translateX(0) scale(0.8)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "";
|
|
667
663
|
return;
|
|
668
664
|
}
|
|
669
|
-
const
|
|
670
|
-
|
|
671
|
-
if (
|
|
672
|
-
|
|
665
|
+
const f = `calc(${v} * -${y})`, g = y * 50;
|
|
666
|
+
s.style.transition = `opacity ${Math.max(120, m - 40)}ms ease, transform ${m}ms cubic-bezier(0.22, 1, 0.36, 1)`, s.style.transitionDelay = `${g}ms`, s.style.transform = "translateX(0) scale(0.92)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "", this.setFanItemInert(s, !0), requestAnimationFrame(() => {
|
|
667
|
+
if (s.style.transform = `translateX(${f})`, s.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
668
|
+
s.style.pointerEvents = "", this.setFanItemInert(s, !1);
|
|
673
669
|
return;
|
|
674
670
|
}
|
|
675
|
-
const
|
|
671
|
+
const A = s.animate(
|
|
676
672
|
[
|
|
677
673
|
{ transform: "translateX(0) scale(0.92)" },
|
|
678
|
-
{ transform: `translateX(${
|
|
679
|
-
{ transform: `translateX(calc(${
|
|
680
|
-
{ transform: `translateX(${
|
|
674
|
+
{ transform: `translateX(${f}) scale(1.03)`, offset: 0.68 },
|
|
675
|
+
{ transform: `translateX(calc(${f} - var(--space-050))) scale(0.99)`, offset: 0.86 },
|
|
676
|
+
{ transform: `translateX(${f}) scale(1)` }
|
|
681
677
|
],
|
|
682
678
|
{
|
|
683
|
-
duration:
|
|
684
|
-
delay:
|
|
679
|
+
duration: m + 180,
|
|
680
|
+
delay: g,
|
|
685
681
|
easing: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
686
682
|
fill: "forwards"
|
|
687
683
|
}
|
|
688
684
|
);
|
|
689
|
-
this.fanAnimations.set(
|
|
685
|
+
this.fanAnimations.set(s, A), A.finished.catch(() => {
|
|
690
686
|
}).finally(() => {
|
|
691
|
-
|
|
687
|
+
s.style.pointerEvents = "", this.setFanItemInert(s, !1);
|
|
692
688
|
});
|
|
693
689
|
});
|
|
694
|
-
}),
|
|
695
|
-
|
|
690
|
+
}), c.forEach((s) => {
|
|
691
|
+
s.style.transition = "", s.style.zIndex = "";
|
|
696
692
|
}), this.bindActionTrigger(), this.syncTriggerIconState();
|
|
697
693
|
}
|
|
698
694
|
render() {
|
|
699
695
|
if (!this.shadowRoot) return;
|
|
700
|
-
const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"),
|
|
696
|
+
const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), n = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", h = this.getAttribute("color-top-accent") || "", c = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", d = c ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", u = c ? h || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", b = c ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", m = c ? a || "var(--prompt-color-top-mid, var(--blue-500))" : h || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), s = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), w = !v && !s ? "Prompt input" : "", f = (this.getAttribute("error-message") || "").trim(), g = f;
|
|
701
697
|
this.shadowRoot.innerHTML = /*html*/
|
|
702
698
|
`
|
|
703
699
|
<style>
|
|
704
700
|
:host {
|
|
705
701
|
display: block;
|
|
706
702
|
--prompt-action-radius: var(--chip-radius-small, var(--radius-400));
|
|
707
|
-
--_prompt-color-top-start-source: ${
|
|
708
|
-
--_prompt-color-top-mid-source: ${
|
|
709
|
-
--_prompt-color-top-end-source: ${
|
|
710
|
-
--_prompt-color-top-accent-source: ${
|
|
703
|
+
--_prompt-color-top-start-source: ${d};
|
|
704
|
+
--_prompt-color-top-mid-source: ${u};
|
|
705
|
+
--_prompt-color-top-end-source: ${b};
|
|
706
|
+
--_prompt-color-top-accent-source: ${m};
|
|
711
707
|
--_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
|
|
712
708
|
--_prompt-accent-secondary: var(--prompt-accent-secondary, var(--blue-500));
|
|
713
709
|
--_prompt-accent-mid: color-mix(in srgb, var(--_prompt-accent-primary) 52%, var(--_prompt-accent-secondary) 48%);
|
|
@@ -719,10 +715,10 @@ class k extends HTMLElement {
|
|
|
719
715
|
var(--_prompt-color-top-accent-source) 16%,
|
|
720
716
|
transparent 84%
|
|
721
717
|
);
|
|
722
|
-
--_prompt-layer-start-tint: ${
|
|
723
|
-
--_prompt-layer-mid-tint: ${
|
|
724
|
-
--_prompt-layer-end-tint: ${
|
|
725
|
-
--_prompt-layer-accent-tint: ${
|
|
718
|
+
--_prompt-layer-start-tint: ${c ? "var(--_prompt-end-tint)" : "var(--_prompt-start-tint)"};
|
|
719
|
+
--_prompt-layer-mid-tint: ${c ? "var(--_prompt-accent-tint)" : "var(--_prompt-mid-tint)"};
|
|
720
|
+
--_prompt-layer-end-tint: ${c ? "var(--_prompt-start-tint)" : "var(--_prompt-end-tint)"};
|
|
721
|
+
--_prompt-layer-accent-tint: ${c ? "var(--_prompt-mid-tint)" : "var(--_prompt-accent-tint)"};
|
|
726
722
|
--_prompt-spectrum-blend-mode-hover: normal;
|
|
727
723
|
--_prompt-spectrum-blend-mode-focus: normal;
|
|
728
724
|
--prompt-placeholder-color-hover-light: var(--grey-1200);
|
|
@@ -1129,11 +1125,13 @@ class k extends HTMLElement {
|
|
|
1129
1125
|
outline: none;
|
|
1130
1126
|
background: transparent;
|
|
1131
1127
|
color: var(--text-color);
|
|
1132
|
-
font:
|
|
1128
|
+
font-family: var(--font-family);
|
|
1129
|
+
font-size: var(--text-font-size);
|
|
1130
|
+
font-weight: var(--font-weight-regular);
|
|
1133
1131
|
padding-block-start: calc(var(--space-300) + var(--space-050));
|
|
1134
1132
|
padding-inline: calc(var(--space-300) + var(--space-100));
|
|
1135
1133
|
padding-block-end: var(--space-000);
|
|
1136
|
-
line-height: var(--text-line-height
|
|
1134
|
+
line-height: var(--text-line-height);
|
|
1137
1135
|
resize: none;
|
|
1138
1136
|
height: calc(3 * 1.55em);
|
|
1139
1137
|
min-height: calc(3 * 1.55em);
|
|
@@ -1282,7 +1280,6 @@ class k extends HTMLElement {
|
|
|
1282
1280
|
--action-radius-medium: var(--prompt-action-radius);
|
|
1283
1281
|
--action-radius-large: var(--prompt-action-radius);
|
|
1284
1282
|
}
|
|
1285
|
-
slot[name="actions-trigger"]::slotted(mui-button),
|
|
1286
1283
|
slot[name="actions"]::slotted(mui-button),
|
|
1287
1284
|
slot[name="actions-right"]::slotted(mui-button) {
|
|
1288
1285
|
--action-radius-x-small: var(--prompt-action-radius);
|
|
@@ -1290,7 +1287,6 @@ class k extends HTMLElement {
|
|
|
1290
1287
|
--action-radius-medium: var(--prompt-action-radius);
|
|
1291
1288
|
--action-radius-large: var(--prompt-action-radius);
|
|
1292
1289
|
}
|
|
1293
|
-
slot[name="actions-trigger"]::slotted(mui-dropdown),
|
|
1294
1290
|
slot[name="actions"]::slotted(mui-dropdown),
|
|
1295
1291
|
slot[name="actions-right"]::slotted(mui-dropdown) {
|
|
1296
1292
|
--action-radius-x-small: var(--prompt-action-radius);
|
|
@@ -1300,7 +1296,6 @@ class k extends HTMLElement {
|
|
|
1300
1296
|
position: relative;
|
|
1301
1297
|
z-index: 4;
|
|
1302
1298
|
}
|
|
1303
|
-
slot[name="actions-trigger"]::slotted(mui-h-stack),
|
|
1304
1299
|
slot[name="actions"]::slotted(mui-h-stack),
|
|
1305
1300
|
slot[name="actions-right"]::slotted(mui-h-stack) {
|
|
1306
1301
|
--action-radius-x-small: var(--prompt-action-radius);
|
|
@@ -1308,7 +1303,6 @@ class k extends HTMLElement {
|
|
|
1308
1303
|
--action-radius-medium: var(--prompt-action-radius);
|
|
1309
1304
|
--action-radius-large: var(--prompt-action-radius);
|
|
1310
1305
|
}
|
|
1311
|
-
slot[name="actions-trigger"]::slotted(mui-prompt-toggle),
|
|
1312
1306
|
slot[name="actions"]::slotted(mui-prompt-toggle),
|
|
1313
1307
|
slot[name="actions-right"]::slotted(mui-prompt-toggle) {
|
|
1314
1308
|
--action-radius-x-small: var(--prompt-action-radius);
|
|
@@ -1316,18 +1310,13 @@ class k extends HTMLElement {
|
|
|
1316
1310
|
--action-radius-medium: var(--prompt-action-radius);
|
|
1317
1311
|
--action-radius-large: var(--prompt-action-radius);
|
|
1318
1312
|
}
|
|
1319
|
-
slot[name="actions-trigger"],
|
|
1320
1313
|
slot[name="actions"],
|
|
1321
1314
|
slot[name="actions-right"] {
|
|
1322
1315
|
display: inline-flex;
|
|
1323
1316
|
align-items: center;
|
|
1324
1317
|
gap: var(--space-025);
|
|
1325
1318
|
}
|
|
1326
|
-
slot[name="actions-trigger"] {
|
|
1327
|
-
flex: 0 0 auto;
|
|
1328
|
-
}
|
|
1329
1319
|
::slotted([slot="actions"]:not([hidden])),
|
|
1330
|
-
::slotted([slot="actions-trigger"]:not([hidden])),
|
|
1331
1320
|
::slotted([slot="actions-right"]:not([hidden])) {
|
|
1332
1321
|
display: inline-flex;
|
|
1333
1322
|
align-items: center;
|
|
@@ -1428,22 +1417,20 @@ class k extends HTMLElement {
|
|
|
1428
1417
|
rows="${o}"
|
|
1429
1418
|
placeholder="${t}"
|
|
1430
1419
|
${v ? `aria-label="${v.replace(/"/g, """)}"` : ""}
|
|
1431
|
-
${
|
|
1432
|
-
${
|
|
1433
|
-
${
|
|
1420
|
+
${s ? `aria-labelledby="${s.replace(/"/g, """)}"` : ""}
|
|
1421
|
+
${y ? `aria-describedby="${y.replace(/"/g, """)}"` : ""}
|
|
1422
|
+
${w ? `aria-label="${w}"` : ""}
|
|
1434
1423
|
${r ? "disabled" : ""}
|
|
1435
1424
|
>${e}</textarea>
|
|
1436
1425
|
</slot>
|
|
1437
1426
|
</div>
|
|
1438
1427
|
<div class="actions-slot actions-slot-left">
|
|
1439
|
-
<
|
|
1440
|
-
<mui-
|
|
1441
|
-
<mui-icon-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
</mui-button>
|
|
1446
|
-
</slot>
|
|
1428
|
+
<mui-button id="promptDefaultActionsTrigger" variant="tertiary" fan-trigger icon-only size="small" aria-label="More actions">
|
|
1429
|
+
<mui-icon-toggle rotate size="small">
|
|
1430
|
+
<mui-icon-grid slot="start" size="small"></mui-icon-grid>
|
|
1431
|
+
<mui-icon-close slot="end" size="small"></mui-icon-close>
|
|
1432
|
+
</mui-icon-toggle>
|
|
1433
|
+
</mui-button>
|
|
1447
1434
|
<slot name="actions"></slot>
|
|
1448
1435
|
</div>
|
|
1449
1436
|
<div class="actions-slot actions-slot-right">
|
|
@@ -1464,9 +1451,9 @@ class k extends HTMLElement {
|
|
|
1464
1451
|
</div>
|
|
1465
1452
|
<div class="error-region" hidden>
|
|
1466
1453
|
|
|
1467
|
-
<mui-body size="x-small" variant="error" class="error-default" ${
|
|
1454
|
+
<mui-body size="x-small" variant="error" class="error-default" ${f ? "" : "hidden"}>
|
|
1468
1455
|
<mui-icon-attention slot="before"></mui-icon-attention>
|
|
1469
|
-
<span class="error-text">${
|
|
1456
|
+
<span class="error-text">${g}</span>
|
|
1470
1457
|
</mui-body>
|
|
1471
1458
|
|
|
1472
1459
|
</div>
|
|
@@ -1478,7 +1465,7 @@ class k extends HTMLElement {
|
|
|
1478
1465
|
|
|
1479
1466
|
<mui-dialog
|
|
1480
1467
|
id="promptAutoPreviewDialog"
|
|
1481
|
-
width="${
|
|
1468
|
+
width="${n}"
|
|
1482
1469
|
content-padding="none"
|
|
1483
1470
|
>
|
|
1484
1471
|
<mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>
|
|
@@ -1490,4 +1477,4 @@ class k extends HTMLElement {
|
|
|
1490
1477
|
`, this.setDebugState("Idle: no submit yet.");
|
|
1491
1478
|
}
|
|
1492
1479
|
}
|
|
1493
|
-
customElements.get("mui-prompt") || customElements.define("mui-prompt",
|
|
1480
|
+
customElements.get("mui-prompt") || customElements.define("mui-prompt", S);
|