@ac-design/design-system 2.3.0 → 2.4.1

package/dist/lib/components/AcCodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -2,35 +2,39 @@ import e from "./AcTooltip.js";
 import { copyText as t } from "../composables/copyText.js";
 import n from "./AcSegmentedControl.js";
 import { editorHighlight as r, editorPhrases as i, editorTheme as a } from "../editor/theme.js";
-import { Fragment as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, nextTick as te, normalizeClass as p, normalizeStyle as ne, onBeforeUnmount as re, onMounted as ie, openBlock as m, ref as h, renderList as ae, renderSlot as oe, resolveDynamicComponent as se, shallowRef as ce, toDisplayString as g, unref as _, useId as le, useModel as ue, useSlots as de, vShow as fe, watch as v, withCtx as pe, withDirectives as me } from "vue";
-import { Check as he, CircleAlert as ge, Copy as _e, TriangleAlert as ve } from "@lucide/vue";
-import { closeBrackets as ye, closeBracketsKeymap as be } from "@codemirror/autocomplete";
-import { defaultKeymap as xe, history as Se, historyKeymap as Ce, indentWithTab as we, simplifySelection as Te, temporarilySetTabFocusMode as Ee } from "@codemirror/commands";
-import { json as De } from "@codemirror/lang-json";
-import { yaml as Oe } from "@codemirror/lang-yaml";
-import { StreamLanguage as ke, bracketMatching as Ae, foldGutter as je, foldKeymap as Me, indentOnInput as Ne, indentUnit as Pe } from "@codemirror/language";
-import { shell as Fe } from "@codemirror/legacy-modes/mode/shell";
-import { lintGutter as Ie, lintKeymap as Le, linter as Re } from "@codemirror/lint";
-import { highlightSelectionMatches as ze, search as Be, searchKeymap as Ve } from "@codemirror/search";
-import { Compartment as y, EditorState as b, Text as x } from "@codemirror/state";
-import { EditorView as S, drawSelection as He, dropCursor as Ue, highlightActiveLine as We, highlightActiveLineGutter as Ge, keymap as Ke, lineNumbers as C, placeholder as w } from "@codemirror/view";
+import { Fragment as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, nextTick as te, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ne, onMounted as re, openBlock as h, ref as g, renderList as ie, renderSlot as ae, resolveDynamicComponent as oe, shallowRef as se, toDisplayString as _, unref as v, useId as ce, useModel as y, useSlots as le, vShow as ue, watch as b, withCtx as de, withDirectives as fe } from "vue";
+import { Check as pe, CircleAlert as me, Copy as he, TriangleAlert as ge } from "@lucide/vue";
+import { closeBrackets as _e, closeBracketsKeymap as ve } from "@codemirror/autocomplete";
+import { defaultKeymap as ye, history as be, historyKeymap as xe, indentWithTab as Se, simplifySelection as Ce, temporarilySetTabFocusMode as we } from "@codemirror/commands";
+import { json as Te } from "@codemirror/lang-json";
+import { yaml as Ee } from "@codemirror/lang-yaml";
+import { StreamLanguage as De, bracketMatching as Oe, foldGutter as ke, foldKeymap as Ae, indentOnInput as je, indentUnit as Me } from "@codemirror/language";
+import { shell as Ne } from "@codemirror/legacy-modes/mode/shell";
+import { lintGutter as Pe, lintKeymap as Fe, linter as Ie } from "@codemirror/lint";
+import { highlightSelectionMatches as Le, search as Re, searchKeymap as ze } from "@codemirror/search";
+import { Compartment as x, EditorState as S, Text as C } from "@codemirror/state";
+import { EditorView as w, drawSelection as Be, dropCursor as Ve, highlightActiveLine as He, highlightActiveLineGutter as Ue, keymap as We, lineNumbers as Ge, placeholder as Ke } from "@codemirror/view";
 //#region src/lib/components/AcCodeEditor.vue?vue&type=script&setup=true&lang.ts
 var qe = {
 	key: 0,
-	class: "flex min-h-12 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-surface-muted px-4 py-2"
+	class: "text-danger",
+	"aria-hidden": "true"
 }, Je = {
 	key: 0,
-	class: "min-w-0 truncate font-mono text-xs font-medium text-heading"
+	class: "flex min-h-12 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-surface-muted px-4 py-2"
 }, Ye = {
+	key: 0,
+	class: "min-w-0 truncate font-mono text-xs font-medium text-heading"
+}, Xe = {
 	key: 1,
 	class: "rounded-6 border border-border bg-surface px-1.5 text-xs leading-5 font-medium text-muted"
-}, Xe = {
+}, Ze = {
 	key: 2,
 	class: "text-xs text-muted"
-}, Ze = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, Qe = ["aria-label"], $e = ["id"], et = {
+}, Qe = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, $e = ["aria-label"], et = ["id"], tt = {
 	class: "sr-only",
 	"aria-live": "polite"
-}, tt = { class: "ac-scrollbar max-h-[calc(92px*var(--ac-scale))] py-1" }, nt = ["onClick"], rt = { class: "shrink-0 font-mono text-muted" }, it = { class: "min-w-0 [overflow-wrap:anywhere]" }, T = /*@__PURE__*/ d({
+}, nt = { class: "ac-scrollbar max-h-[calc(92px*var(--ac-scale))] py-1" }, rt = ["onClick"], it = { class: "shrink-0 font-mono text-muted" }, at = { class: "min-w-0 [overflow-wrap:anywhere]" }, ot = /*@__PURE__*/ d({
 	__name: "AcCodeEditor",
 	props: /*@__PURE__*/ f({
 		language: { default: "yaml" },
@@ -65,6 +69,19 @@ var qe = {
 		bordered: {
 			type: Boolean,
 			default: !0
+		},
+		showLabel: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		showProblems: {
+			type: Boolean,
+			default: !0
 		}
 	}, {
 		modelValue: { default: "" },
@@ -77,188 +94,188 @@ var qe = {
 		"focus",
 		"blur"
 	], ["update:modelValue", "update:view"]),
-	setup(d, { expose: f, emit: T }) {
-		let E = d, D = ue(d, "modelValue"), O = ue(d, "view"), k = T, at = de(), ot, A = () => ot ??= import("@codemirror/merge"), st, ct = () => st ??= import("../editor/validate.js"), j = {
+	setup(d, { expose: f, emit: ot }) {
+		let T = d, E = y(d, "modelValue"), D = y(d, "view"), O = ot, st = le(), ct, k = () => ct ??= import("@codemirror/merge"), lt, ut = () => lt ??= import("../editor/validate.js"), dt = {
 			yaml: "YAML",
 			json: "JSON",
 			shell: "Shell",
 			text: "Text"
-		}, M = {
+		}, ft = {
 			margin: 3,
 			minSize: 6
-		}, lt = h(), N = h(), P = ce(), F, I = h([]), L = h(0), R = h(!1), ut = le(), z = o(() => E.original !== void 0 && !E.readonly), B = o(() => E.original !== void 0 && E.readonly), V = o(() => B.value || z.value && O.value === "changes"), dt = o(() => !!E.title || E.copyable || z.value || B.value || !!at.actions), ft = o(() => E.validate && (E.language === "yaml" || E.language === "json")), H = o(() => E.label || E.title || `${j[E.language]} editor`), pt = o(() => I.value.filter((e) => e.severity === "error").length), mt = o(() => [{
+		}, pt = g(), A = g(), j = se(), M, N = g([]), P = g(0), F = g(!1), I = ce(), mt = `${I}-label`, ht = `${I}-msg`, L = o(() => T.original !== void 0 && !T.readonly), R = o(() => T.original !== void 0 && T.readonly), z = o(() => R.value || L.value && D.value === "changes"), gt = o(() => !!T.title || T.copyable || L.value || R.value || !!st.actions), _t = o(() => T.validate && (T.language === "yaml" || T.language === "json")), B = o(() => T.label || T.title || `${dt[T.language]} editor`), V = o(() => T.showLabel && !!T.label || !!T.errorMsg), H = o(() => ["flex min-w-0 flex-col overflow-hidden bg-background", T.bordered && "rounded-10 border border-border transition-[border-color,box-shadow] duration-200 has-[.cm-editor.cm-focused]:focus-ring"]), U = o(() => N.value.filter((e) => e.severity === "error").length), vt = o(() => [{
 			value: "edit",
 			label: "Edit"
 		}, {
 			value: "changes",
-			label: L.value ? `Changes · ${L.value}` : "Changes"
-		}]), U = o(() => ({
-			height: E.height === "auto" ? void 0 : E.height,
-			maxHeight: E.maxHeight
+			label: P.value ? `Changes · ${P.value}` : "Changes"
+		}]), yt = o(() => ({
+			height: T.height === "auto" ? void 0 : T.height,
+			maxHeight: T.maxHeight
 		})), W = {
-			language: new y(),
-			readonly: new y(),
-			wrap: new y(),
-			gutters: new y(),
-			lint: new y(),
-			placeholder: new y(),
-			attributes: new y()
+			language: new x(),
+			readonly: new x(),
+			wrap: new x(),
+			gutters: new x(),
+			lint: new x(),
+			placeholder: new x(),
+			attributes: new x()
 		};
 		function G() {
-			return E.language === "yaml" ? Oe() : E.language === "json" ? De() : E.language === "shell" ? ke.define(Fe) : [];
+			return T.language === "yaml" ? Ee() : T.language === "json" ? Te() : T.language === "shell" ? De.define(Ne) : [];
 		}
-		function ht() {
-			return E.lineNumbers ? [
-				C(),
-				je({
+		function bt() {
+			return T.lineNumbers ? [
+				Ge(),
+				ke({
 					openText: "▾",
 					closedText: "▸"
 				}),
-				Ge()
+				Ue()
 			] : [];
 		}
-		function gt(e) {
-			JSON.stringify(e) !== JSON.stringify(I.value) && (I.value = e, k("validate", e));
+		function xt(e) {
+			JSON.stringify(e) !== JSON.stringify(N.value) && (N.value = e, O("validate", e));
 		}
-		function _t() {
-			return ft.value ? [Ie(), Re(async (e) => {
-				let t = e.state.doc.toString(), { checkDocument: n, toProblems: r } = await ct(), i = await n(t, E.language, E.schema);
-				return P.value?.state.doc.toString() === t && gt(r(i, e.state.doc)), i;
-			}, { delay: 300 })] : (gt([]), []);
+		function St() {
+			return _t.value ? [Pe(), Ie(async (e) => {
+				let t = e.state.doc.toString(), { checkDocument: n, toProblems: r } = await ut(), i = await n(t, T.language, T.schema);
+				return j.value?.state.doc.toString() === t && xt(r(i, e.state.doc)), i;
+			}, { delay: 300 })] : (xt([]), []);
 		}
-		function vt() {
-			return S.contentAttributes.of({
-				"aria-label": H.value,
-				...E.readonly ? { "aria-readonly": "true" } : {},
-				...pt.value ? {
-					"aria-invalid": "true",
-					"aria-describedby": ut
-				} : {}
+		function Ct() {
+			let e = [T.showProblems && U.value && I, T.errorMsg && ht].filter(Boolean).join(" ");
+			return w.contentAttributes.of({
+				"aria-label": B.value,
+				...T.readonly ? { "aria-readonly": "true" } : {},
+				...T.required ? { "aria-required": "true" } : {},
+				...U.value || T.errorMsg ? { "aria-invalid": "true" } : {},
+				...e ? { "aria-describedby": e } : {}
 			});
 		}
-		let K = 0, yt = {
+		let K = 0, wt = {
 			key: "Escape",
 			run: (e) => {
 				let t = Date.now();
-				return t - K < 2e3 ? !1 : (K = t, Te(e), Ee(e));
+				return t - K < 2e3 ? !1 : (K = t, Ce(e), we(e));
 			}
 		};
-		function bt() {
-			P.value = new S({
-				parent: lt.value,
-				state: b.create({
-					doc: D.value,
+		function Tt() {
+			j.value = new w({
+				parent: pt.value,
+				state: S.create({
+					doc: E.value,
 					extensions: [
 						a,
 						r,
 						i,
-						Se(),
+						be(),
+						Be(),
+						Ve(),
+						je(),
+						Me.of("  "),
+						S.tabSize.of(2),
+						Oe(),
+						_e(),
 						He(),
-						Ue(),
-						Ne(),
-						Pe.of("  "),
-						b.tabSize.of(2),
-						Ae(),
-						ye(),
-						We(),
-						ze(),
-						Be({ top: !0 }),
-						Ke.of([
-							...be,
-							...Ve,
-							...Me,
-							...Le,
-							yt,
-							we,
-							...Ce,
-							...xe
+						Le(),
+						Re({ top: !0 }),
+						We.of([
+							...ve,
+							...ze,
+							...Ae,
+							...Fe,
+							wt,
+							Se,
+							...xe,
+							...ye
 						]),
 						W.language.of(G()),
-						W.readonly.of(b.readOnly.of(E.readonly)),
-						W.wrap.of(E.wrap ? S.lineWrapping : []),
-						W.gutters.of(ht()),
-						W.lint.of(_t()),
-						W.placeholder.of(E.placeholder ? w(E.placeholder) : []),
-						W.attributes.of(vt()),
-						S.updateListener.of((e) => {
-							e.docChanged && (D.value = e.state.doc.toString()), e.focusChanged && e.view.hasFocus ? k("focus") : e.focusChanged && k("blur");
+						W.readonly.of(S.readOnly.of(T.readonly)),
+						W.wrap.of(T.wrap ? w.lineWrapping : []),
+						W.gutters.of(bt()),
+						W.lint.of(St()),
+						W.placeholder.of(T.placeholder ? Ke(T.placeholder) : []),
+						W.attributes.of(Ct()),
+						w.updateListener.of((e) => {
+							e.docChanged && (E.value = e.state.doc.toString()), e.focusChanged && e.view.hasFocus ? O("focus") : e.focusChanged && O("blur");
 						})
 					]
 				})
 			});
 		}
 		function q(e, t) {
-			P.value?.dispatch({ effects: e.reconfigure(t) });
+			j.value?.dispatch({ effects: e.reconfigure(t) });
 		}
 		function J(e) {
 			return [
 				a,
 				r,
 				G(),
-				b.readOnly.of(!0),
-				b.tabSize.of(2),
-				E.wrap ? S.lineWrapping : [],
-				E.lineNumbers ? C() : [],
-				S.contentAttributes.of({
+				S.readOnly.of(!0),
+				S.tabSize.of(2),
+				T.wrap ? w.lineWrapping : [],
+				T.lineNumbers ? Ge() : [],
+				w.contentAttributes.of({
 					"aria-label": e,
 					"aria-readonly": "true"
 				})
 			];
 		}
 		function Y() {
-			X++, F?.destroy(), F = void 0;
+			X++, M?.destroy(), M = void 0;
 		}
 		let X = 0;
 		async function Z() {
-			let e = ++X, { MergeView: t, unifiedMergeView: n } = await A();
-			if (e !== X || !V.value || (Y(), !N.value)) return;
-			let r = E.original ?? "";
-			if (E.diffLayout === "split") {
-				F = new t({
-					parent: N.value,
+			let e = ++X, { MergeView: t, unifiedMergeView: n } = await k();
+			if (e !== X || !z.value || (Y(), !A.value)) return;
+			let r = T.original ?? "";
+			if (T.diffLayout === "split") {
+				M = new t({
+					parent: A.value,
 					a: {
 						doc: r,
-						extensions: J(`Saved version of ${H.value}`)
+						extensions: J(`Saved version of ${B.value}`)
 					},
 					b: {
-						doc: D.value,
-						extensions: J(`Changed version of ${H.value}`)
+						doc: E.value,
+						extensions: J(`Changed version of ${B.value}`)
 					},
 					gutter: !0,
 					highlightChanges: !0,
-					collapseUnchanged: M
+					collapseUnchanged: ft
 				});
 				return;
 			}
-			F = new S({
-				parent: N.value,
-				doc: D.value,
-				extensions: [J(`Changes to ${H.value}`), n({
+			M = new w({
+				parent: A.value,
+				doc: E.value,
+				extensions: [J(`Changes to ${B.value}`), n({
 					original: r,
 					mergeControls: !1,
 					gutter: !0,
 					highlightChanges: !0,
 					syntaxHighlightDeletions: !0,
-					collapseUnchanged: M
+					collapseUnchanged: ft
 				})]
 			});
 		}
 		let Q;
-		function xt() {
-			if (clearTimeout(Q), E.original === void 0) {
-				L.value = 0;
+		function Et() {
+			if (clearTimeout(Q), T.original === void 0) {
+				P.value = 0;
 				return;
 			}
 			Q = setTimeout(async () => {
-				let { Chunk: e } = await A();
-				E.original !== void 0 && (L.value = e.build(x.of(E.original.split("\n")), x.of(D.value.split("\n"))).length);
+				let { Chunk: e } = await k();
+				T.original !== void 0 && (P.value = e.build(C.of(T.original.split("\n")), C.of(E.value.split("\n"))).length);
 			}, 250);
 		}
-		function St() {
-			P.value?.focus();
+		function Dt() {
+			j.value?.focus();
 		}
-		function Ct(e) {
-			let t = P.value;
+		function Ot(e) {
+			let t = j.value;
 			t && (t.dispatch({
 				selection: {
 					anchor: e.from,
@@ -268,114 +285,130 @@ var qe = {
 			}), t.focus());
 		}
 		let $;
-		async function wt() {
+		async function kt() {
 			try {
-				await t(D.value), R.value = !0, clearTimeout($), $ = setTimeout(() => R.value = !1, 1500);
+				await t(E.value), F.value = !0, clearTimeout($), $ = setTimeout(() => F.value = !1, 1500);
 			} catch {}
 		}
-		return v(D, (e) => {
-			let t = P.value;
+		return b(E, (e) => {
+			let t = j.value;
 			t && e !== t.state.doc.toString() && t.dispatch({ changes: {
 				from: 0,
 				to: t.state.doc.length,
 				insert: e
 			} });
-		}), v(() => E.language, () => q(W.language, G())), v(() => E.readonly, (e) => q(W.readonly, b.readOnly.of(e))), v(() => E.wrap, (e) => q(W.wrap, e ? S.lineWrapping : [])), v(() => E.lineNumbers, () => q(W.gutters, ht())), v(() => E.placeholder, (e) => q(W.placeholder, e ? w(e) : [])), v([
-			() => E.language,
-			() => E.schema,
-			() => E.validate
-		], () => q(W.lint, _t())), v([
-			H,
-			() => E.readonly,
-			pt
-		], () => q(W.attributes, vt())), v([() => E.original, D], xt, { immediate: !0 }), v([
-			V,
-			() => E.diffLayout,
-			() => E.original,
-			() => E.language,
-			() => E.wrap
+		}), b(() => T.language, () => q(W.language, G())), b(() => T.readonly, (e) => q(W.readonly, S.readOnly.of(e))), b(() => T.wrap, (e) => q(W.wrap, e ? w.lineWrapping : [])), b(() => T.lineNumbers, () => q(W.gutters, bt())), b(() => T.placeholder, (e) => q(W.placeholder, e ? Ke(e) : [])), b([
+			() => T.language,
+			() => T.schema,
+			() => T.validate
+		], () => q(W.lint, St())), b([
+			B,
+			() => T.readonly,
+			U,
+			() => T.required,
+			() => T.errorMsg,
+			() => T.showProblems
+		], () => q(W.attributes, Ct())), b([() => T.original, E], Et, { immediate: !0 }), b([
+			z,
+			() => T.diffLayout,
+			() => T.original,
+			() => T.language,
+			() => T.wrap
 		], async ([e]) => {
 			if (!e) return Y();
 			await te(), Z();
-		}), v(D, () => V.value && Z()), ie(() => {
-			bt(), V.value && Z();
-		}), re(() => {
-			clearTimeout(Q), clearTimeout($), Y(), P.value?.destroy();
+		}), b(E, () => z.value && Z()), re(() => {
+			Tt(), z.value && Z();
+		}), ne(() => {
+			clearTimeout(Q), clearTimeout($), Y(), j.value?.destroy();
 		}), f({
-			focus: St,
-			editor: P
-		}), (t, r) => (m(), l("div", {
-			class: p(["flex min-w-0 flex-col overflow-hidden bg-background", d.bordered && "rounded-10 border border-border transition-[border-color,box-shadow] duration-200 has-[.cm-editor.cm-focused]:focus-ring"]),
+			focus: Dt,
+			editor: j
+		}), (t, r) => (h(), l("div", {
+			class: p(V.value ? "flex min-w-0 flex-col" : H.value),
 			"data-ac-ds": "",
 			"data-testid": "ac-code-editor"
 		}, [
-			dt.value ? (m(), l("div", qe, [
-				d.title ? (m(), l("span", Je, g(d.title), 1)) : c("", !0),
-				d.language === "text" ? c("", !0) : (m(), l("span", Ye, g(j[d.language]), 1)),
-				B.value ? (m(), l("span", Xe, g(L.value ? `${L.value} ${L.value === 1 ? "change" : "changes"}` : "No changes"), 1)) : c("", !0),
-				u("div", Ze, [
-					oe(t.$slots, "actions"),
-					z.value ? (m(), s(n, {
-						key: 0,
-						modelValue: O.value,
-						"onUpdate:modelValue": r[0] ||= (e) => O.value = e,
-						options: mt.value,
-						size: "small",
-						label: "Editor view"
-					}, null, 8, ["modelValue", "options"])) : c("", !0),
-					d.copyable ? (m(), s(e, {
-						key: 1,
-						content: R.value ? "Copied" : "Copy"
-					}, {
-						default: pe(() => [u("button", {
-							type: "button",
-							class: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-							"aria-label": R.value ? "Copied" : "Copy to clipboard",
-							onClick: wt
-						}, [R.value ? (m(), s(_(he), {
+			V.value && d.showLabel && d.label ? (h(), l("div", {
+				key: 0,
+				id: mt,
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [u("span", null, _(d.label), 1), d.required ? (h(), l("span", qe, "*")) : c("", !0)])) : c("", !0),
+			u("div", { class: p(V.value ? H.value : "contents") }, [
+				gt.value ? (h(), l("div", Je, [
+					d.title ? (h(), l("span", Ye, _(d.title), 1)) : c("", !0),
+					d.language === "text" ? c("", !0) : (h(), l("span", Xe, _(dt[d.language]), 1)),
+					R.value ? (h(), l("span", Ze, _(P.value ? `${P.value} ${P.value === 1 ? "change" : "changes"}` : "No changes"), 1)) : c("", !0),
+					u("div", Qe, [
+						ae(t.$slots, "actions"),
+						L.value ? (h(), s(n, {
 							key: 0,
-							class: "size-4 text-success-strong",
-							"aria-hidden": "true"
-						})) : (m(), s(_(_e), {
+							modelValue: D.value,
+							"onUpdate:modelValue": r[0] ||= (e) => D.value = e,
+							options: vt.value,
+							size: "small",
+							label: "Editor view"
+						}, null, 8, ["modelValue", "options"])) : c("", !0),
+						d.copyable ? (h(), s(e, {
 							key: 1,
-							class: "size-4",
-							"aria-hidden": "true"
-						}))], 8, Qe)]),
-						_: 1
-					}, 8, ["content"])) : c("", !0)
-				])
-			])) : c("", !0),
-			me(u("div", {
-				ref_key: "host",
-				ref: lt,
-				class: p(["min-h-0 flex-auto [&>.cm-editor]:max-h-[inherit]", d.height === "auto" && "min-h-20"]),
-				style: ne(U.value)
-			}, null, 6), [[fe, !V.value]]),
-			V.value ? (m(), l("div", {
+							content: F.value ? "Copied" : "Copy"
+						}, {
+							default: de(() => [u("button", {
+								type: "button",
+								class: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+								"aria-label": F.value ? "Copied" : "Copy to clipboard",
+								onClick: kt
+							}, [F.value ? (h(), s(v(pe), {
+								key: 0,
+								class: "size-4 text-success-strong",
+								"aria-hidden": "true"
+							})) : (h(), s(v(he), {
+								key: 1,
+								class: "size-4",
+								"aria-hidden": "true"
+							}))], 8, $e)]),
+							_: 1
+						}, 8, ["content"])) : c("", !0)
+					])
+				])) : c("", !0),
+				fe(u("div", {
+					ref_key: "host",
+					ref: pt,
+					class: p(["min-h-0 flex-auto [&>.cm-editor]:max-h-[inherit]", d.height === "auto" && "min-h-20"]),
+					style: m(yt.value)
+				}, null, 6), [[ue, !z.value]]),
+				z.value ? (h(), l("div", {
+					key: 1,
+					ref_key: "diffHost",
+					ref: A,
+					class: "min-h-0 flex-auto overflow-auto [&_.cm-mergeView]:h-full [&>.cm-editor]:max-h-[inherit]",
+					style: m(yt.value)
+				}, null, 4)) : c("", !0),
+				d.showProblems && N.value.length && !z.value ? (h(), l("div", {
+					key: 2,
+					id: v(I),
+					class: "border-t border-border bg-surface-muted"
+				}, [u("p", tt, _(N.value.length) + " " + _(N.value.length === 1 ? "problem" : "problems"), 1), u("ul", nt, [(h(!0), l(ee, null, ie(N.value, (e, t) => (h(), l("li", { key: t }, [u("button", {
+					type: "button",
+					class: "flex w-full cursor-pointer items-start gap-2 px-4 py-1 text-left text-xs leading-5 text-body transition-colors duration-200 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
+					onClick: (t) => Ot(e)
+				}, [
+					(h(), s(oe(e.severity === "error" ? v(me) : v(ge)), {
+						class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-danger" : "text-warning"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])),
+					u("span", it, "Ln " + _(e.line) + ", Col " + _(e.column), 1),
+					u("span", at, _(e.message), 1)
+				], 8, rt)]))), 128))])], 8, et)) : c("", !0)
+			], 2),
+			d.errorMsg ? (h(), l("p", {
 				key: 1,
-				ref_key: "diffHost",
-				ref: N,
-				class: "min-h-0 flex-auto overflow-auto [&_.cm-mergeView]:h-full [&>.cm-editor]:max-h-[inherit]",
-				style: ne(U.value)
-			}, null, 4)) : c("", !0),
-			I.value.length && !V.value ? (m(), l("div", {
-				key: 2,
-				id: _(ut),
-				class: "border-t border-border bg-surface-muted"
-			}, [u("p", et, g(I.value.length) + " " + g(I.value.length === 1 ? "problem" : "problems"), 1), u("ul", tt, [(m(!0), l(ee, null, ae(I.value, (e, t) => (m(), l("li", { key: t }, [u("button", {
-				type: "button",
-				class: "flex w-full cursor-pointer items-start gap-2 px-4 py-1 text-left text-xs leading-5 text-body transition-colors duration-200 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
-				onClick: (t) => Ct(e)
-			}, [
-				(m(), s(se(e.severity === "error" ? _(ge) : _(ve)), {
-					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-danger" : "text-warning"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"])),
-				u("span", rt, "Ln " + g(e.line) + ", Col " + g(e.column), 1),
-				u("span", it, g(e.message), 1)
-			], 8, nt)]))), 128))])], 8, $e)) : c("", !0)
+				id: ht,
+				class: "mt-2 text-xs text-danger-strong",
+				role: "alert"
+			}, _(d.errorMsg), 1)) : c("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { T as default };
+export { ot as default };

package/dist/lib/components/AcColorInput.vue.d.ts

@@ -21,8 +21,8 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall. With `swatch-only`, a 40px or 48px swatch. */
-    size?: "small" | "normal";
+    /** `small` 36px or `normal` 42px tall. With `swatch-only`, the swatch is `xs` 16px, `xsmall` 32px, `small` 40px, `normal` 48px or `large` 80px; without it, `xs` and `xsmall` look like `small` and `large` like `normal`. */
+    size?: "xs" | "xsmall" | "small" | "normal" | "large";
     /** Shows only the native colour swatch, with no hex field: cloud-ui's AcColorInput look. */
     swatchOnly?: boolean;
 }
@@ -46,7 +46,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     disabled: boolean;
     name: string;
-    size: "small" | "normal";
+    size: "xs" | "xsmall" | "small" | "normal" | "large";
     hint: string;
     readonly: boolean;
     errorMsg: string;