@sparklingopinions/sparkling-ui 0.6.0 → 0.8.0

package/dist/components/DataList/DataList.vue_vue_type_script_setup_true_lang.js

@@ -1,32 +1,47 @@
 import e from "../Skeleton/Skeleton.js";
 import t from "../Checkbox/Checkbox.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, useModel as x, useSlots as S, useTemplateRef as C, vShow as w, withCtx as T, withDirectives as E } from "vue";
+import n from "../ContextMenu/ContextMenu.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useId as ee, useModel as x, useSlots as te, useTemplateRef as ne, vShow as re, withCtx as S, withDirectives as C } from "vue";
 //#region src/components/DataList/DataList.vue?vue&type=script&setup=true&lang.ts
-var D = ["aria-label", "aria-labelledby"], O = [
+var w = ["aria-label", "aria-labelledby"], T = [
 	"aria-controls",
 	"aria-expanded",
 	"aria-label",
 	"onClick"
-], k = { class: "text-13 text-sui-ink-muted tabular-nums" }, A = ["aria-label", "onClick"], j = ["id"], M = [
+], E = { class: "text-13 text-sui-ink-muted tabular-nums" }, D = { class: "ml-auto flex items-center gap-1" }, O = ["aria-label", "onClick"], k = ["id"], A = [
 	"role",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], N = {
-	key: 0,
-	class: "flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums"
-}, P = { class: "min-w-0 flex-1 truncate font-medium text-sui-ink" }, F = {
+], ie = { class: "min-w-0 flex-1 truncate font-medium text-sui-ink" }, ae = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums"
-}, I = "overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface", L = "flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset", R = /*@__PURE__*/ u({
+}, j = "overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface", M = "flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset", N = /*@__PURE__*/ d({
 	__name: "DataList",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ f({
 		groups: {},
 		rowKey: { default: "id" },
 		selectable: { type: Boolean },
+		checkboxPlacement: { default: "gutter" },
 		loading: { type: Boolean },
 		variant: { default: "joined" },
 		headingLevel: { default: 3 },
+		groupHeaderTone: { default: void 0 },
+		groupHeaderHeight: { default: void 0 },
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		rowHeight: { default: void 0 },
+		dividers: {
+			type: Boolean,
+			default: !1
+		},
+		contextItems: {
+			type: Function,
+			default: void 0
+		},
+		contextLabel: { default: void 0 },
 		onRowClick: {
 			type: Function,
 			default: void 0
@@ -45,152 +60,225 @@ var D = ["aria-label", "aria-labelledby"], O = [
 		collapsed: { default: () => [] },
 		collapsedModifiers: {}
 	}),
-	emits: ["update:selected", "update:collapsed"],
-	setup(u) {
-		let d = u, R = x(u, "selected"), z = x(u, "collapsed"), B = S(), V = b(), H = C("root"), U = (e) => e[d.rowKey ?? "id"], W = r(() => !!d.onRowClick || d.selectable), G = r(() => !d.loading && d.groups.every((e) => e.items.length === 0));
-		function K(e) {
-			z.value = z.value.includes(e) ? z.value.filter((t) => t !== e) : [...z.value, e];
+	emits: /*@__PURE__*/ f(["context-item"], ["update:selected", "update:collapsed"]),
+	setup(d, { emit: f }) {
+		let N = d, oe = f, P = x(d, "selected"), F = x(d, "collapsed"), I = te(), L = ee(), R = ne("root"), z = (e) => e[N.rowKey ?? "id"], B = i(() => !!N.onRowClick || N.selectable), V = i(() => !N.loading && N.groups.every((e) => e.items.length === 0));
+		function H(e) {
+			F.value = F.value.includes(e) ? F.value.filter((t) => t !== e) : [...F.value, e];
 		}
+		let U = (e) => e.collapsible ?? N.collapsible, W = (e) => U(e) && F.value.includes(e.id), G = i(() => N.groups.filter((e) => !W(e)).flatMap((e) => e.items)), K;
 		function q(e) {
-			let t = U(e);
-			R.value = R.value.includes(t) ? R.value.filter((e) => e !== t) : [...R.value, t];
+			let t = z(e);
+			K = t, P.value = P.value.includes(t) ? P.value.filter((e) => e !== t) : [...P.value, t];
+		}
+		function J(e) {
+			let t = G.value.map(z), n = t.indexOf(z(e)), r = t.indexOf(K), i = r < 0 ? [t[n]] : t.slice(Math.min(r, n), Math.max(r, n) + 1);
+			r < 0 && (K = z(e)), P.value = [...P.value, ...i.filter((e) => !P.value.includes(e))];
+		}
+		function se(...e) {
+			let t = e.map(z).filter((e) => !P.value.includes(e));
+			t.length && (P.value = [...P.value, ...new Set(t)]);
 		}
-		function J(e, t) {
+		function ce(e, t) {
+			N.selectable && e.shiftKey ? J(t) : N.selectable && (e.metaKey || e.ctrlKey) || N.selectable && X.value && P.value.length ? q(t) : N.onRowClick?.(t);
+		}
+		function le(e) {
+			N.selectable && e.shiftKey && e.preventDefault();
+		}
+		function ue(e, t) {
 			if (e.target !== e.currentTarget || e.metaKey || e.ctrlKey || e.altKey) return;
-			let n = [...H.value?.querySelectorAll("[data-list-row]") ?? []], r = n.indexOf(e.currentTarget);
-			if (e.key === "ArrowDown" || e.key === "j") n[Math.min(n.length - 1, r + 1)]?.focus();
-			else if (e.key === "ArrowUp" || e.key === "k") n[Math.max(0, r - 1)]?.focus();
-			else if (e.key === "x" && d.selectable) q(t);
-			else if ((e.key === "Enter" || e.key === " ") && d.onRowClick) d.onRowClick(t);
+			let n = [...R.value?.querySelectorAll("[data-list-row]") ?? []].filter((e) => e.closest("ul")?.style.display !== "none"), r = n.indexOf(e.currentTarget), i = e.key === "ArrowDown" || e.key === "j", a = e.key === "ArrowUp" || e.key === "k";
+			if ((i || a) && e.shiftKey && N.selectable) {
+				let e = i ? Math.min(n.length - 1, r + 1) : Math.max(0, r - 1), a = G.value[e];
+				se(t, ...a ? [a] : []), n[e]?.focus();
+			} else if (i) n[Math.min(n.length - 1, r + 1)]?.focus();
+			else if (a) n[Math.max(0, r - 1)]?.focus();
+			else if (e.key === " " && e.shiftKey && N.selectable) J(t);
+			else if (e.key.toLowerCase() === "x" && N.selectable) q(t);
+			else if ((e.key === "Enter" || e.key === " ") && N.onRowClick) N.onRowClick(t);
 			else return;
 			e.preventDefault();
 		}
-		let Y = r(() => d.variant === "cards"), X = (e) => !!B["group-header"] || e.header !== void 0, Z = (e) => e.label ?? e.name ?? "", Q = [
+		let Y = i(() => N.variant === "cards"), X = i(() => N.selectable && N.checkboxPlacement === "leading"), Z = i(() => N.selectable && N.checkboxPlacement === "gutter"), Q = {
+			sunken: "bg-sui-sunken",
+			surface: "bg-sui-surface",
+			canvas: "bg-sui-canvas"
+		}, de = i(() => Q[N.groupHeaderTone ?? (Y.value ? "surface" : "sunken")]), fe = i(() => {
+			let e = {};
+			return N.rowHeight !== void 0 && (e["--sui-list-row"] = `${N.rowHeight}px`), N.groupHeaderHeight !== void 0 && (e["--sui-list-header"] = `${N.groupHeaderHeight}px`), Object.keys(e).length ? e : void 0;
+		}), $ = (e) => !!I["group-header"] || e.header !== void 0, pe = (e) => e.label ?? e.name ?? "", me = [
 			"42%",
 			"58%",
 			"35%",
 			"50%",
 			"46%"
 		];
-		return (r, d) => (m(), o("div", {
+		return (i, f) => (h(), s("div", {
 			ref_key: "root",
-			ref: H,
-			class: f(["flex flex-col text-13 text-sui-ink", Y.value ? "gap-3" : I])
-		}, [G.value && r.$slots.empty ? (m(), o("div", {
+			ref: R,
+			class: p(["flex flex-col text-13 text-sui-ink", Y.value ? "gap-3" : j]),
+			style: m(fe.value)
+		}, [V.value && i.$slots.empty ? (h(), s("div", {
 			key: 0,
-			class: f(Y.value && I)
-		}, [g(r.$slots, "empty")], 2)) : u.loading ? (m(), o("section", {
+			class: p(Y.value && j)
+		}, [_(i.$slots, "empty")], 2)) : d.loading ? (h(), s("section", {
 			key: 1,
 			"aria-busy": !0,
-			class: f(Y.value && I)
-		}, [(m(), o(n, null, h(Q, (t, n) => s("div", {
+			class: p(Y.value && j)
+		}, [(h(), s(r, null, g(me, (t, n) => c("div", {
 			key: n,
 			"aria-hidden": "true",
-			class: "flex h-10 items-center gap-2.5 pr-4 pl-1"
+			class: "flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4 pl-1"
 		}, [
-			d[0] ||= s("span", { class: "w-6 shrink-0" }, null, -1),
-			l(e, {
+			f[0] ||= c("span", { class: "w-6 shrink-0" }, null, -1),
+			u(e, {
 				height: "0.75rem",
 				width: t
 			}, null, 8, ["width"]),
-			d[1] ||= s("span", { class: "flex-1" }, null, -1),
-			l(e, {
+			f[1] ||= c("span", { class: "flex-1" }, null, -1),
+			u(e, {
 				height: "0.75rem",
 				width: "64px"
 			})
-		])), 64))], 2)) : (m(!0), o(n, { key: 2 }, h(u.groups, (e) => (m(), o("section", {
+		])), 64))], 2)) : (h(!0), s(r, { key: 2 }, g(d.groups, (e) => (h(), s("section", {
 			key: e.id,
 			"aria-label": e.label,
-			"aria-labelledby": !e.label && (e.name || X(e)) ? `${y(V)}-${e.id}-name` : void 0,
-			class: f(Y.value ? I : "border-t border-sui-line-subtle first:border-t-0")
-		}, [e.name || X(e) ? (m(), o("header", {
+			"aria-labelledby": !e.label && (e.name || $(e)) ? `${b(L)}-${e.id}-name` : void 0,
+			class: p(Y.value ? j : "border-t border-sui-line-subtle first:border-t-0")
+		}, [e.name || $(e) ? (h(), s("header", {
 			key: 0,
-			class: f(["flex h-9 items-center gap-2 border-b border-sui-line-subtle pr-2 pl-1.5", Y.value ? "bg-sui-surface" : "sticky top-0 z-10 bg-sui-sunken"])
+			class: p(["flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2", [
+				de.value,
+				!Y.value && "sticky top-0 z-10",
+				U(e) ? "pl-1.5" : "pl-4"
+			]])
 		}, [
-			s("button", {
-				"aria-controls": `${y(V)}-${e.id}`,
-				"aria-expanded": !z.value.includes(e.id),
-				"aria-label": z.value.includes(e.id) ? u.expandLabel : u.collapseLabel,
-				class: f(L),
+			U(e) ? (h(), s("button", {
+				key: 0,
+				"aria-controls": `${b(L)}-${e.id}`,
+				"aria-expanded": !F.value.includes(e.id),
+				"aria-label": F.value.includes(e.id) ? d.expandLabel : d.collapseLabel,
+				class: p(M),
 				type: "button",
-				onClick: (t) => K(e.id)
-			}, [(m(), o("svg", {
+				onClick: (t) => H(e.id)
+			}, [(h(), s("svg", {
 				"aria-hidden": "true",
-				class: f(["size-3 fill-none stroke-current transition-transform duration-150", z.value.includes(e.id) && "-rotate-90"]),
+				class: p(["size-3 fill-none stroke-current transition-transform duration-150", W(e) && "-rotate-90"]),
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"stroke-width": "1.5",
 				viewBox: "0 0 12 12"
-			}, [...d[2] ||= [s("path", { d: "M3 4.5 6 7.5l3-3" }, null, -1)]], 2))], 8, O),
-			X(e) ? (m(), i(_(`h${u.headingLevel}`), {
-				key: 0,
-				id: `${y(V)}-${e.id}-name`,
+			}, [...f[2] ||= [c("path", { d: "M3 4.5 6 7.5l3-3" }, null, -1)]], 2))], 8, T)) : o("", !0),
+			$(e) ? (h(), a(v(`h${d.headingLevel}`), {
+				key: 1,
+				id: `${b(L)}-${e.id}-name`,
 				class: "m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink"
 			}, {
-				default: T(() => [g(r.$slots, "group-header", {
-					collapsed: z.value.includes(e.id),
+				default: S(() => [_(i.$slots, "group-header", {
+					collapsed: F.value.includes(e.id),
 					count: e.count ?? e.items.length,
 					group: e
-				}, () => [c(v(e.header), 1)])]),
+				}, () => [l(y(e.header), 1)])]),
 				_: 2
-			}, 1032, ["id"])) : (m(), o(n, { key: 1 }, [
-				g(r.$slots, "group-leading", { group: e }),
-				(m(), i(_(`h${u.headingLevel}`), {
-					id: `${y(V)}-${e.id}-name`,
+			}, 1032, ["id"])) : (h(), s(r, { key: 2 }, [
+				_(i.$slots, "group-leading", { group: e }),
+				(h(), a(v(`h${d.headingLevel}`), {
+					id: `${b(L)}-${e.id}-name`,
 					class: "m-0 text-13 font-medium text-sui-ink"
 				}, {
-					default: T(() => [c(v(e.name), 1)]),
+					default: S(() => [l(y(e.name), 1)]),
 					_: 2
 				}, 1032, ["id"])),
-				s("span", k, v(e.count ?? e.items.length), 1)
+				c("span", E, y(e.count ?? e.items.length), 1)
 			], 64)),
-			u.onNew ? (m(), o("button", {
-				key: 2,
-				"aria-label": u.newLabel.replace("{group}", Z(e)),
-				class: f(["ml-auto", L]),
+			c("span", D, [_(i.$slots, "group-actions", { group: e })]),
+			d.onNew ? (h(), s("button", {
+				key: 3,
+				"aria-label": d.newLabel.replace("{group}", pe(e)),
+				class: p(M),
 				type: "button",
-				onClick: (t) => u.onNew(e)
-			}, [...d[3] ||= [s("svg", {
+				onClick: (t) => d.onNew(e)
+			}, [...f[3] ||= [c("svg", {
 				"aria-hidden": "true",
 				class: "size-3.5 fill-none stroke-current",
 				"stroke-linecap": "round",
 				"stroke-width": "1.5",
 				viewBox: "0 0 14 14"
-			}, [s("path", { d: "M7 2.5v9M2.5 7h9" })], -1)]], 8, A)) : a("", !0)
-		], 2)) : a("", !0), E(s("ul", {
-			id: `${y(V)}-${e.id}`,
+			}, [c("path", { d: "M7 2.5v9M2.5 7h9" })], -1)]], 8, O)) : o("", !0)
+		], 2)) : o("", !0), C(c("ul", {
+			id: `${b(L)}-${e.id}`,
 			class: "m-0 list-none p-0"
-		}, [(m(!0), o(n, null, h(e.items, (e) => (m(), o("li", {
-			key: U(e),
-			class: f(["group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset", R.value.includes(U(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken has-focus-visible:bg-sui-sunken"]),
-			style: p(e.depth ? { paddingLeft: `${e.depth * 22}px` } : void 0)
-		}, [u.selectable ? (m(), o("span", {
-			key: 0,
-			class: f(["flex w-7 shrink-0 justify-end transition-opacity duration-100", R.value.length ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"])
-		}, [l(t, {
-			"aria-label": u.selectLabel,
-			"model-value": R.value.includes(U(e)),
-			tabindex: "-1",
-			"onUpdate:modelValue": (t) => q(e)
-		}, null, 8, [
-			"aria-label",
-			"model-value",
-			"onUpdate:modelValue"
-		])], 2)) : a("", !0), s("div", {
-			class: f(["flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden", [u.selectable ? "pl-2.5" : "pl-4", u.onRowClick && "cursor-pointer"]]),
-			"data-list-row": "",
-			role: u.onRowClick ? "button" : void 0,
-			tabindex: W.value ? 0 : void 0,
-			onClick: (t) => u.onRowClick?.(e),
-			onKeydown: (t) => J(t, e)
-		}, [
-			r.$slots.leading ? (m(), o("span", N, [g(r.$slots, "leading", { item: e })])) : a("", !0),
-			s("span", P, [g(r.$slots, "title", { item: e }, () => [c(v(e.name), 1)])]),
-			r.$slots.meta ? (m(), o("span", F, [g(r.$slots, "meta", { item: e })])) : a("", !0)
-		], 42, M)], 6))), 128))], 8, j), [[w, !z.value.includes(e.id)]])], 10, D))), 128))], 2));
+		}, [(h(!0), s(r, null, g(e.items, (e) => (h(), a(n, {
+			key: z(e),
+			disabled: !d.contextItems,
+			items: d.contextItems?.(e),
+			label: d.contextLabel,
+			onClickItem: (t) => oe("context-item", t, e)
+		}, {
+			default: S(() => [c("li", {
+				class: p(["group/row relative flex h-[var(--sui-list-row,2.5rem)] items-center transition-colors duration-100 has-focus-visible:sui-ring-inset", [d.dividers && "[&+&]:border-t [&+&]:border-sui-line-subtle", P.value.includes(z(e)) ? "bg-sui-accent-wash" : "hover:bg-sui-sunken has-focus-visible:bg-sui-sunken"]]),
+				style: m(e.depth ? { paddingLeft: `${e.depth * 22}px` } : void 0)
+			}, [
+				X.value ? (h(), s("span", {
+					key: 0,
+					class: p(["absolute top-1/2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center", !P.value.length && "hidden group-hover/row:flex group-has-focus-visible/row:flex"]),
+					"data-list-check": "",
+					style: m({ left: `${16 + (e.depth ?? 0) * 22}px` })
+				}, [u(t, {
+					"aria-label": d.selectLabel,
+					"model-value": P.value.includes(z(e)),
+					tabindex: "-1",
+					"onUpdate:modelValue": (t) => q(e)
+				}, null, 8, [
+					"aria-label",
+					"model-value",
+					"onUpdate:modelValue"
+				])], 6)) : o("", !0),
+				Z.value ? (h(), s("span", {
+					key: 1,
+					class: p(["flex w-7 shrink-0 justify-end transition-opacity duration-100", P.value.length ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"])
+				}, [u(t, {
+					"aria-label": d.selectLabel,
+					"model-value": P.value.includes(z(e)),
+					tabindex: "-1",
+					"onUpdate:modelValue": (t) => q(e)
+				}, null, 8, [
+					"aria-label",
+					"model-value",
+					"onUpdate:modelValue"
+				])], 2)) : o("", !0),
+				c("div", {
+					class: p(["flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden", [Z.value ? "pl-2.5" : "pl-4", (d.onRowClick || d.selectable) && "cursor-pointer"]]),
+					"data-list-row": "",
+					role: d.onRowClick ? "button" : void 0,
+					tabindex: B.value ? 0 : void 0,
+					onClick: (t) => ce(t, e),
+					onKeydown: (t) => ue(t, e),
+					onMousedown: le
+				}, [
+					i.$slots.leading ? (h(), s("span", {
+						key: 0,
+						class: p(["flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums", X.value && (P.value.length ? "[&>*:first-child]:invisible" : "group-hover/row:[&>*:first-child]:invisible group-has-focus-visible/row:[&>*:first-child]:invisible")])
+					}, [_(i.$slots, "leading", {
+						item: e,
+						selected: P.value.includes(z(e)),
+						selecting: P.value.length > 0,
+						toggle: () => q(e)
+					})], 2)) : o("", !0),
+					c("span", ie, [_(i.$slots, "title", { item: e }, () => [l(y(e.name), 1)])]),
+					i.$slots.meta ? (h(), s("span", ae, [_(i.$slots, "meta", { item: e })])) : o("", !0)
+				], 42, A)
+			], 6)]),
+			_: 2
+		}, 1032, [
+			"disabled",
+			"items",
+			"label",
+			"onClickItem"
+		]))), 128))], 8, k), [[re, !W(e)]])], 10, w))), 128))], 6));
 	}
 });
 //#endregion
-export { R as default };
+export { N as default };
 
 //# sourceMappingURL=DataList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DataList/DataList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_Fragment","_renderList","_createElementVNode","_createVNode","Skeleton","_unref","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_withDirectives","_normalizeStyle","Checkbox","_vShow","Skeleton_default","Checkbox_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","card","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","props","__props","selected","useModel","collapsed","slots","useSlots","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","toggle","key","onKeydown","event","rows","i","cards","custom","groupName","skeletonWidths","openBlock","createElementBlock","normalizeClass","_ctx","renderSlot","Fragment","renderList","createElementVNode","_cache","createVNode","unref","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","createCommentVNode","withDirectives","normalizeStyle","$event","vShow"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox gutter bound to `v-model:selected`: it shows on hover, and on every row once anything is selected. */\n  selectable?: boolean\n  loading?: boolean\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  variant: 'joined',\n  headingLevel: 3,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. */\n  leading?: (props: { item: T }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])]\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  if (event.key === 'ArrowDown' || event.key === 'j') rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (event.key === 'ArrowUp' || event.key === 'k') rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <section v-else-if=\"loading\" :aria-busy=\"true\" :class=\"cards && card\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-10 items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-9 items-center gap-2 border-b border-sui-line-subtle pr-2 pl-1.5\"\n          :class=\"cards ? 'bg-sui-surface' : 'sticky top-0 z-10 bg-sui-sunken'\"\n        >\n          <button\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"collapsed.includes(group.id) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            class=\"ml-auto\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!collapsed.includes(group.id)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <li\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            class=\"group/row flex h-10 items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n            :class=\"\n              selected.includes(idOf(item))\n                ? 'bg-sui-accent-wash'\n                : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n            \"\n            :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n          >\n            <span\n              v-if=\"selectable\"\n              class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n              :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n            >\n              <Checkbox\n                :aria-label=\"selectLabel\"\n                :model-value=\"selected.includes(idOf(item))\"\n                tabindex=\"-1\"\n                @update:model-value=\"toggle(item)\"\n              />\n            </span>\n            <div\n              class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n              :class=\"[selectable ? 'pl-2.5' : 'pl-4', onRowClick && 'cursor-pointer']\"\n              data-list-row\n              :role=\"onRowClick ? 'button' : undefined\"\n              :tabindex=\"interactive ? 0 : undefined\"\n              @click=\"onRowClick?.(item)\"\n              @keydown=\"onKeydown($event, item)\"\n            >\n              <span v-if=\"$slots.leading\" class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"leading\" />\n              </span>\n              <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n              </span>\n              <span v-if=\"$slots.meta\" class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\">\n                <slot :item=\"item\" name=\"meta\" />\n              </span>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;A,GA2FMkC,IAAO,yEAKPC,IACJ,yM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EApEF,IAAMM,IAAQC,GAYRC,IAAW1C,EAAsByC,GAAC,UAAiC,GACnEG,IAAY5C,EAAqByC,GAAC,WAAkC,GAEpEI,IAAQ5C,EAAA,GAeR8C,IAAKC,EAAM,GACXC,IAAOC,EAA4B,MAAM,GAEzCC,KAAQ,MAAqBC,EAAKZ,EAAM,UAAU,OAClDa,IAAcC,QAAe,CAAC,CAACd,EAAM,cAAcA,EAAM,UAAU,GACnEe,IAAUD,QAAe,CAACd,EAAM,WAAWA,EAAM,OAAO,OAAO,MAAUgB,EAAM,MAAM,WAAW,CAAC,CAAC;EAExG,SAASC,EAAY,GAAiB;GACpC,EAAU,QAAQb,EAAU,MAAM,SAASc,CAAO,IAC9Cd,EAAU,MAAM,QAAQ,MAAMe,MAAMD,CAAO,IAC3C,CAAC,GAAGd,EAAU,OAAOc,CAAO;EAClC;EAEA,SAASE,EAAO,GAAS;GACvB,IAAMC,IAAMV,EAAKC,CAAI;GACrB,EAAS,QAAQV,EAAS,MAAM,SAASmB,CAAG,IAAInB,EAAS,MAAM,QAAQ,MAAMiB,MAAME,CAAG,IAAI,CAAC,GAAGnB,EAAS,OAAOmB,CAAG;EACnH;EAGA,SAASC,EAAU,GAAsB,GAAS;GAChD,IAAIC,EAAM,WAAWA,EAAM,iBAAiBA,EAAM,WAAWA,EAAM,WAAWA,EAAM,QAAQ;GAC5F,IAAMC,IAAO,CAAC,GAAIf,EAAK,OAAO,iBAA8B,iBAAiB,KAAK,CAAC,CAAE,GAC/EgB,IAAID,EAAK,QAAQD,EAAM,aAA4B;GACzD,IAAIA,EAAM,QAAQ,eAAeA,EAAM,QAAQ,KAAK,EAAK,KAAK,IAAIC,EAAK,SAAS,GAAGC,IAAI,CAAC,EAAE,EAAE,MAAM;QAC7F,IAAIF,EAAM,QAAQ,aAAaA,EAAM,QAAQ,KAAK,EAAK,KAAK,IAAI,GAAGE,IAAI,CAAC,EAAE,EAAE,MAAM;QAClF,IAAIF,EAAM,QAAQ,OAAOvB,EAAM,YAAY,EAAOY,CAAI;QACtD,KAAKW,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQvB,EAAM,YAAY,EAAM,WAAWY,CAAI;QAC3F;GACL,EAAM,eAAe;EACvB;EAEA,IAAMc,IAAQZ,QAAed,EAAM,YAAY,OAAO,GAEhD2B,KAAU,MAA4B,CAAC,CAACtB,EAAM,mBAAmBW,EAAM,WAAW,KAAA,GAClFY,KAAa,MAA4BZ,EAAM,SAASA,EAAM,QAAQ,IAEtEa,IAAiB;GAAC;GAAO;GAAO;GAAO;GAAO;EAAK;E,kBAOvDnE,EAAA,GAAAC,EA6IM,OAAA;GA7IG,SAAA;GAAJ,KAAI8C;GAAO,OAAK7C,EAAA,CAAC,sCAA6C8D,EAAA,QAAK,UAAajC,CAAI,CAAA;E,IAC5EsB,EAAA,SAAWxD,EAAAA,OAAO,SAA7BG,EAAA,GAAAC,EAEM,OAAA;;GAF+B,OAAKC,EAAE8D,EAAA,SAASjC,CAAI;E,IACvD5B,EAAqBoE,EAAA,QAAA,OAAA,C,SAEHhC,EAAA,WAApBvC,EAAA,GAAAC,EAYU,WAAA;;GAZoB,aAAW;GAAO,OAAKC,EAAE8D,EAAA,SAASjC,CAAI;E,KAClE/B,EAAA,GAAAC,EAUMG,GAAA,MAAAC,EATiB8D,IAAb,GAAO,MADjB7D,EAUM,OAAA;GARH,KAAKyD;GACN,eAAY;GACZ,OAAM;;GAEN,AAAAa,EAAA,OAAAtE,EAA6B,QAAA,EAAvB,OAAM,eAAc,GAAA,MAAA,EAAA;GAC1BC,EAA4CC,GAAA;IAAlC,QAAO;IAAkB;;GACnC,AAAAoE,EAAA,OAAAtE,EAAuB,QAAA,EAAjB,OAAM,SAAQ,GAAA,MAAA,EAAA;GACpBC,EAA0CC,GAAA;IAAhC,QAAO;IAAU,OAAM;;E,mBAInCR,EAAA,EAAA,GAAAC,EAyHUG,GAAA,EAAA,KAAA,EAAA,GAAAC,EAxHQkC,EAAA,SAAT,OADTvC,EAAA,GAAAC,EAyHU,WAAA;GAvHP,KAAKqD,EAAM;GACX,cAAYA,EAAM;GAClB,mBAAe,CAAGA,EAAM,UAAUA,EAAM,QAAQW,EAAOX,CAAK,KAAA,GAAQ7C,EAAAoC,CAAA,EAAE,GAAIS,EAAM,GAAE,SAAU,KAAA;GAC5F,OAAKpD,EAAE8D,EAAA,QAAQjC,IAAI,kDAAA;E,IAGZuB,EAAM,QAAQW,EAAOX,CAAK,KADlCtD,EAAA,GAAAC,EAoES,UAAA;;GAlEP,OAAKC,EAAA,CAAC,2EACE8D,EAAA,QAAK,mBAAA,iCAAA,CAAA;;GAEb1D,EAmBS,UAAA;IAlBN,iBAAa,GAAKG,EAAAoC,CAAA,EAAE,GAAIS,EAAM;IAC9B,iBAAa,CAAGZ,EAAA,MAAU,SAASY,EAAM,EAAE;IAC3C,cAAYZ,EAAA,MAAU,SAASY,EAAM,EAAE,IAAIf,EAAA,cAAcA,EAAA;IACzD,OAAKrC,EAAE8B,CAAU;IAClB,MAAK;IACJ,UAAK,MAAEuB,EAAYD,EAAM,EAAE;G,KAE5BtD,EAAA,GAAAC,EAUM,OAAA;IATJ,eAAY;IACZ,OAAKC,EAAA,CAAC,qEACEwC,EAAA,MAAU,SAASY,EAAM,EAAE,KAAA,YAAA,CAAA;IACnC,kBAAe;IACf,mBAAgB;IAChB,gBAAa;IACb,SAAQ;G,iBAERhD,EAA6B,QAAA,EAAvB,GAAE,mBAAkB,GAAA,MAAA,EAAA,C;GAKtB2D,EAAOX,CAAK,KAFpBtD,EAAA,GAAAU,EAaYC,EAAA,IAZD4B,EAAA,cAAY,GAAA;;IAEpB,IAAE,GAAK9B,EAAAoC,CAAA,EAAE,GAAIS,EAAM,GAAE;IACtB,OAAM;;IAEN,SAAA1C,QAMC,CANDT,EAMCoE,EAAA,QAAA,gBAAA;KALE,WAAW7B,EAAA,MAAU,SAASY,EAAM,EAAE;KACtC,OAAOA,EAAM,SAASA,EAAM,MAAM;KAC3B;IAHV,SAMC,CADKzC,EAAAC,EAAAwC,EAAM,MAAM,GAAA,CAAA,C;;G,qBAGpBtD,EAAA,GAAAC,EAUWG,GAAA,EAAA,KAAA,EAAA,GAAA;IATTD,EAA4CoE,EAAA,QAAA,iBAAA,EAA9B,SAAK,CAAA;KACnBvE,EAAA,GAAAU,EAMYC,EAAA,IALD4B,EAAA,cAAY,GAAA;KACpB,IAAE,GAAK9B,EAAAoC,CAAA,EAAE,GAAIS,EAAM,GAAE;KACtB,OAAM;;KAEN,SAAA1C,QAAgB,CAAbC,EAAAC,EAAAwC,EAAM,IAAI,GAAA,CAAA,C;;;IAEfhD,EAAoG,QAApGkB,GAAoGV,EAA3CwC,EAAM,SAASA,EAAM,MAAM,MAAM,GAAA,CAAA;;GAGpFf,EAAA,SADRvC,EAAA,GAAAC,EAiBS,UAAA;;IAfN,cAAYsC,EAAA,SAAS,QAAO,WAAY2B,EAAUZ,CAAK,CAAA;IACxD,OAAKpD,EAAA,CAAC,WACE8B,CAAU,CAAA;IAClB,MAAK;IACJ,UAAK,MAAEO,EAAA,MAAMe,CAAK;G,iBAEnBhD,EAQM,OAAA;IAPJ,eAAY;IACZ,OAAM;IACN,kBAAe;IACf,gBAAa;IACb,SAAQ;G,IAERA,EAA6B,QAAA,EAAvB,GAAE,mBAAkB,CAAA,C;E,oBAIhCU,EAAAV,EA4CK,MAAA;GA5CuC,IAAE,GAAKG,EAAAoC,CAAA,EAAE,GAAIS,EAAM;GAAM,OAAM;E,KACzEtD,EAAA,EAAA,GAAAC,EA0CKG,GAAA,MAAAC,EAzCYiD,EAAM,QAAd,OADTtD,EAAA,GAAAC,EA0CK,MAAA;GAxCF,KAAKgD,EAAKC,CAAI;GACf,OAAKhD,EAAA,CAAC,oGACiBsC,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA,I;GAKjD,OAAKjC,EAAEiC,EAAK,QAAK,EAAA,aAAA,GAAqBA,EAAK,QAAK,GAAA,IAAA,IAAc,KAAA,CAAS;E,IAGhEX,EAAA,cADRvC,EAAA,GAAAC,EAWO,QAAA;;GATL,OAAKC,EAAA,CAAC,iEACEsC,EAAA,MAAS,SAAM,gBAAA,uCAAA,CAAA;E,IAEvBjC,EAKEW,GAAA;GAJC,cAAYqB,EAAA;GACZ,eAAaC,EAAA,MAAS,SAASS,EAAKC,CAAI,CAAA;GACzC,UAAS;GACR,wBAAkB,MAAEQ,EAAOR,CAAI;;;;;E,sBAGpC5C,EAkBM,OAAA;GAjBJ,OAAKJ,EAAA,CAAC,uEAAqE,CAClEqC,EAAA,aAAU,WAAA,QAAsBA,EAAA,cAAU,gBAAA,CAAA,CAAA;GACnD,iBAAA;GACC,MAAMA,EAAA,aAAU,WAAc,KAAA;GAC9B,UAAUY,EAAA,QAAW,IAAO,KAAA;GAC5B,UAAK,MAAEZ,EAAA,aAAaW,CAAI;GACxB,YAAO,MAAEU,EAAU2B,GAAQrC,CAAI;;GAEpBrD,EAAAA,OAAO,WAAnBG,EAAA,GAAAC,EAEO,QAFP2B,GAEO,CADLzB,EAAoCoE,EAAA,QAAA,WAAA,EAAvB,QAAI,CAAA,C;GAEnBjE,EAEO,QAFPuB,GAEO,CADL1B,EAAsDoE,EAAA,QAAA,SAAA,EAAzC,QAAI,SAAqC,CAAnB1D,EAAAC,EAAAoC,EAAK,IAAI,GAAA,CAAA,C;GAElCrD,EAAAA,OAAO,QAAnBG,EAAA,GAAAC,EAEO,QAFP6B,GAEO,CADL3B,EAAiCoE,EAAA,QAAA,QAAA,EAApB,QAAI,CAAA,C;E,kCAxCZ,CAAApD,GAAA,CAAAuB,EAAA,MAAU,SAASY,EAAM,EAAE,CAAA,C"}
+{"version":3,"file":"DataList.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_Fragment","_renderList","_createElementVNode","_createVNode","Skeleton","_unref","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_withDirectives","ContextMenu","Checkbox","_vShow","Skeleton_default","Checkbox_default","ContextMenu_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","card","iconButton","DataList_vue_vue_type_script_setup_true_lang_default","\"selected\"","\"selectedModifiers\"","\"collapsed\"","\"collapsedModifiers\"","__emit","props","__props","emit","selected","useModel","collapsed","slots","useSlots","id","useId","root","useTemplateRef","idOf","item","interactive","computed","isEmpty","group","toggleGroup","groupId","x","collapsibleGroup","isCollapsed","visibleItems","anchorKey","toggle","key","selectRange","keys","to","from","span","select","items","clickRow","event","leading","onRowMousedown","onKeydown","rows","row","i","down","up","j","next","cards","gutter","tones","headerTone","sizes","style","custom","groupName","skeletonWidths","openBlock","createElementBlock","normalizeClass","normalizeStyle","_ctx","renderSlot","Fragment","renderList","createElementVNode","_cache","createVNode","unref","createCommentVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","withDirectives","$event","vShow"],"sources":["../../../src/components/DataList/DataList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, useId, useTemplateRef } from 'vue'\n\nimport Checkbox from '../Checkbox/Checkbox.vue'\nimport ContextMenu from '../ContextMenu/ContextMenu.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { DropdownMenuAction, DropdownMenuEntry } from '../internal/menu'\nimport type { DataListGroup } from './types'\n\nexport interface DataListProps<T> {\n  groups: DataListGroup<T>[]\n  /** The item field that identifies it. An item's `depth` indents it as a child. */\n  rowKey?: keyof T & string\n  /** A checkbox bound to `v-model:selected`: it shows on hover and focus, and on every row once anything is selected.\n   *  Shift-click (or Shift+Space) selects a range, Cmd or Ctrl-click toggles one row, Shift+↑ ↓ extends. */\n  selectable?: boolean\n  /** gutter: the checkbox in its own column. leading: it takes the place of the `leading` slot's first mark. */\n  checkboxPlacement?: 'gutter' | 'leading'\n  loading?: boolean\n  /** joined: one frame, sticky sunken group headers. cards: each group its own card, 12px apart, headers not sticky. */\n  variant?: 'joined' | 'cards'\n  /** The group headings' level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** The group headers' ground; by default sunken when joined, surface as cards. */\n  groupHeaderTone?: 'sunken' | 'surface' | 'canvas'\n  /** The group headers' height in px (36 by default); sets `--sui-list-header`. */\n  groupHeaderHeight?: number\n  /** Groups fold away under a chevron; a group's own `collapsible` wins. */\n  collapsible?: boolean\n  /** The rows' height in px, such as 44 (40 by default); sets `--sui-list-row`. */\n  rowHeight?: number\n  /** A hairline between rows. */\n  dividers?: boolean\n  /** Wraps each row in a ContextMenu of these items (`@context-item`); return [] for none. */\n  contextItems?: (item: T) => DropdownMenuEntry[]\n  /** The context menu's accessible name. */\n  contextLabel?: string\n  /** Makes rows open on click and Enter (`@row-click`). */\n  onRowClick?: (item: T) => void\n  /** Adds a + to each group's header (`@new`). */\n  onNew?: (group: DataListGroup<T>) => void\n  /** The + button's name; `{group}` is the group's name. */\n  newLabel?: string\n  collapseLabel?: string\n  expandLabel?: string\n  selectLabel?: string\n}\n\nconst props = withDefaults(defineProps<DataListProps<T>>(), {\n  rowKey: 'id' as never,\n  variant: 'joined',\n  checkboxPlacement: 'gutter',\n  headingLevel: 3,\n  groupHeaderTone: undefined,\n  groupHeaderHeight: undefined,\n  collapsible: true,\n  rowHeight: undefined,\n  dividers: false,\n  contextItems: undefined,\n  contextLabel: undefined,\n  onRowClick: undefined,\n  onNew: undefined,\n  newLabel: 'New in {group}',\n  collapseLabel: 'Collapse group',\n  expandLabel: 'Expand group',\n  selectLabel: 'Select'\n})\n\nconst emit = defineEmits<{ 'context-item': [action: DropdownMenuAction, item: T] }>()\n\nconst selected = defineModel<unknown[]>('selected', { default: () => [] })\nconst collapsed = defineModel<string[]>('collapsed', { default: () => [] })\n\nconst slots = defineSlots<{\n  /** Marks before a group's name, e.g. a status icon. */\n  'group-leading'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Your own group header in place of the name and count, e.g. a status Badge and a count; inside the heading. */\n  'group-header'?: (props: { group: DataListGroup<T>; count: number; collapsed: boolean }) => unknown\n  /** Small marks before an item's title: a status icon, an id, an avatar. With `checkboxPlacement=\"leading\"`, the\n   *  first mark gives way to the checkbox. */\n  leading?: (props: { item: T; selected: boolean; selecting: boolean; toggle: () => void }) => unknown\n  /** The item's title; `item.name` by default. */\n  title?: (props: { item: T }) => unknown\n  /** Right-aligned meta: tags, an avatar, a date. Keep it to three or four things. */\n  meta?: (props: { item: T }) => unknown\n  /** Controls at the end of a group's header, e.g. Show and Hide. */\n  'group-actions'?: (props: { group: DataListGroup<T> }) => unknown\n  /** Shown when every group is empty, e.g. an EmptyState. */\n  empty?: () => unknown\n}>()\n\nconst id = useId()\nconst root = useTemplateRef<HTMLElement>('root')\n\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst interactive = computed(() => !!props.onRowClick || props.selectable)\nconst isEmpty = computed(() => !props.loading && props.groups.every((group) => group.items.length === 0))\n\nfunction toggleGroup(groupId: string) {\n  collapsed.value = collapsed.value.includes(groupId)\n    ? collapsed.value.filter((x) => x !== groupId)\n    : [...collapsed.value, groupId]\n}\n\nconst collapsibleGroup = (group: DataListGroup<T>) => group.collapsible ?? props.collapsible\nconst isCollapsed = (group: DataListGroup<T>) => collapsibleGroup(group) && collapsed.value.includes(group.id)\nconst visibleItems = computed(() => props.groups.filter((group) => !isCollapsed(group)).flatMap((group) => group.items))\n\n// Where a range starts: the row last toggled.\nlet anchorKey: unknown = undefined\n\nfunction toggle(item: T) {\n  const key = idOf(item)\n  anchorKey = key\n  selected.value = selected.value.includes(key) ? selected.value.filter((x) => x !== key) : [...selected.value, key]\n}\n\nfunction selectRange(item: T) {\n  const keys = visibleItems.value.map(idOf)\n  const to = keys.indexOf(idOf(item))\n  const from = keys.indexOf(anchorKey)\n  const span = from < 0 ? [keys[to]] : keys.slice(Math.min(from, to), Math.max(from, to) + 1)\n  if (from < 0) anchorKey = idOf(item)\n  selected.value = [...selected.value, ...span.filter((key) => !selected.value.includes(key))]\n}\n\nfunction select(...items: T[]) {\n  const keys = items.map(idOf).filter((key) => !selected.value.includes(key))\n  if (keys.length) selected.value = [...selected.value, ...new Set(keys)]\n}\n\nfunction clickRow(event: MouseEvent, item: T) {\n  if (props.selectable && event.shiftKey) selectRange(item)\n  else if (props.selectable && (event.metaKey || event.ctrlKey)) toggle(item)\n  // Leading checkboxes stand in for the row's mark, so while selecting a click selects, as in a mail list.\n  else if (props.selectable && leading.value && selected.value.length) toggle(item)\n  else props.onRowClick?.(item)\n}\n\n// A shift-click selects rather than highlighting the text between.\nfunction onRowMousedown(event: MouseEvent) {\n  if (props.selectable && event.shiftKey) event.preventDefault()\n}\n\n// ↑ ↓ or j k move between rows, x selects, Enter and Space open; with Shift, ↑ ↓ extend the selection and Space\n// selects a range.\nfunction onKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || event.metaKey || event.ctrlKey || event.altKey) return\n  // A collapsed group's rows are still in the DOM, hidden.\n  const rows = [...(root.value?.querySelectorAll<HTMLElement>('[data-list-row]') ?? [])].filter(\n    (row) => row.closest('ul')?.style.display !== 'none'\n  )\n  const i = rows.indexOf(event.currentTarget as HTMLElement)\n  const down = event.key === 'ArrowDown' || event.key === 'j'\n  const up = event.key === 'ArrowUp' || event.key === 'k'\n  if ((down || up) && event.shiftKey && props.selectable) {\n    const j = down ? Math.min(rows.length - 1, i + 1) : Math.max(0, i - 1)\n    const next = visibleItems.value[j]\n    select(item, ...(next ? [next] : []))\n    rows[j]?.focus()\n  } else if (down) rows[Math.min(rows.length - 1, i + 1)]?.focus()\n  else if (up) rows[Math.max(0, i - 1)]?.focus()\n  else if (event.key === ' ' && event.shiftKey && props.selectable) selectRange(item)\n  else if (event.key.toLowerCase() === 'x' && props.selectable) toggle(item)\n  else if ((event.key === 'Enter' || event.key === ' ') && props.onRowClick) props.onRowClick(item)\n  else return\n  event.preventDefault()\n}\n\nconst cards = computed(() => props.variant === 'cards')\nconst leading = computed(() => props.selectable && props.checkboxPlacement === 'leading')\nconst gutter = computed(() => props.selectable && props.checkboxPlacement === 'gutter')\nconst tones = { sunken: 'bg-sui-sunken', surface: 'bg-sui-surface', canvas: 'bg-sui-canvas' }\nconst headerTone = computed(() => tones[props.groupHeaderTone ?? (cards.value ? 'surface' : 'sunken')])\nconst sizes = computed(() => {\n  const style: Record<string, string> = {}\n  if (props.rowHeight !== undefined) style['--sui-list-row'] = `${props.rowHeight}px`\n  if (props.groupHeaderHeight !== undefined) style['--sui-list-header'] = `${props.groupHeaderHeight}px`\n  return Object.keys(style).length ? style : undefined\n})\nconst card = 'overflow-clip rounded-xl border border-sui-line-subtle bg-sui-surface'\nconst custom = (group: DataListGroup<T>) => !!slots['group-header'] || group.header !== undefined\nconst groupName = (group: DataListGroup<T>) => group.label ?? group.name ?? ''\n\nconst skeletonWidths = ['42%', '58%', '35%', '50%', '46%']\nconst iconButton =\n  'flex size-6 shrink-0 items-center justify-center rounded-md text-sui-ink-muted outline-hidden transition-colors duration-150 hover:bg-sui-line-subtle hover:text-sui-ink focus-visible:sui-ring-inset'\n</script>\n\n<!-- A grouped list: one dense line per record under sticky, collapsible group headers. -->\n<template>\n  <div ref=\"root\" class=\"flex flex-col text-13 text-sui-ink\" :class=\"cards ? 'gap-3' : card\" :style=\"sizes\">\n    <div v-if=\"isEmpty && $slots.empty\" :class=\"cards && card\">\n      <slot name=\"empty\" />\n    </div>\n    <section v-else-if=\"loading\" :aria-busy=\"true\" :class=\"cards && card\">\n      <div\n        v-for=\"(width, i) in skeletonWidths\"\n        :key=\"i\"\n        aria-hidden=\"true\"\n        class=\"flex h-[var(--sui-list-row,2.5rem)] items-center gap-2.5 pr-4 pl-1\"\n      >\n        <span class=\"w-6 shrink-0\" />\n        <Skeleton height=\"0.75rem\" :width=\"width\" />\n        <span class=\"flex-1\" />\n        <Skeleton height=\"0.75rem\" width=\"64px\" />\n      </div>\n    </section>\n    <template v-else>\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.id\"\n        :aria-label=\"group.label\"\n        :aria-labelledby=\"!group.label && (group.name || custom(group)) ? `${id}-${group.id}-name` : undefined\"\n        :class=\"cards ? card : 'border-t border-sui-line-subtle first:border-t-0'\"\n      >\n        <header\n          v-if=\"group.name || custom(group)\"\n          class=\"flex h-[var(--sui-list-header,2.25rem)] items-center gap-2 border-b border-sui-line-subtle pr-2\"\n          :class=\"[headerTone, !cards && 'sticky top-0 z-10', collapsibleGroup(group) ? 'pl-1.5' : 'pl-4']\"\n        >\n          <button\n            v-if=\"collapsibleGroup(group)\"\n            :aria-controls=\"`${id}-${group.id}`\"\n            :aria-expanded=\"!collapsed.includes(group.id)\"\n            :aria-label=\"collapsed.includes(group.id) ? expandLabel : collapseLabel\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"toggleGroup(group.id)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3 fill-none stroke-current transition-transform duration-150\"\n              :class=\"isCollapsed(group) && '-rotate-90'\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 12 12\"\n            >\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n          <component\n            :is=\"`h${headingLevel}`\"\n            v-if=\"custom(group)\"\n            :id=\"`${id}-${group.id}-name`\"\n            class=\"m-0 flex min-w-0 items-center gap-2 text-13 font-medium text-sui-ink\"\n          >\n            <slot\n              :collapsed=\"collapsed.includes(group.id)\"\n              :count=\"group.count ?? group.items.length\"\n              :group=\"group\"\n              name=\"group-header\"\n              >{{ group.header }}</slot\n            >\n          </component>\n          <template v-else>\n            <slot :group=\"group\" name=\"group-leading\" />\n            <component\n              :is=\"`h${headingLevel}`\"\n              :id=\"`${id}-${group.id}-name`\"\n              class=\"m-0 text-13 font-medium text-sui-ink\"\n            >\n              {{ group.name }}\n            </component>\n            <span class=\"text-13 text-sui-ink-muted tabular-nums\">{{ group.count ?? group.items.length }}</span>\n          </template>\n          <span class=\"ml-auto flex items-center gap-1\">\n            <slot :group=\"group\" name=\"group-actions\" />\n          </span>\n          <button\n            v-if=\"onNew\"\n            :aria-label=\"newLabel.replace('{group}', groupName(group))\"\n            :class=\"iconButton\"\n            type=\"button\"\n            @click=\"onNew(group)\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              class=\"size-3.5 fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-width=\"1.5\"\n              viewBox=\"0 0 14 14\"\n            >\n              <path d=\"M7 2.5v9M2.5 7h9\" />\n            </svg>\n          </button>\n        </header>\n        <ul v-show=\"!isCollapsed(group)\" :id=\"`${id}-${group.id}`\" class=\"m-0 list-none p-0\">\n          <ContextMenu\n            v-for=\"item in group.items\"\n            :key=\"idOf(item) as PropertyKey\"\n            :disabled=\"!contextItems\"\n            :items=\"contextItems?.(item)\"\n            :label=\"contextLabel\"\n            @click-item=\"emit('context-item', $event, item)\"\n          >\n            <li\n              class=\"group/row relative flex h-[var(--sui-list-row,2.5rem)] items-center transition-colors duration-100 has-focus-visible:sui-ring-inset\"\n              :class=\"[\n                dividers && '[&+&]:border-t [&+&]:border-sui-line-subtle',\n                selected.includes(idOf(item))\n                  ? 'bg-sui-accent-wash'\n                  : 'hover:bg-sui-sunken has-focus-visible:bg-sui-sunken'\n              ]\"\n              :style=\"item.depth ? { paddingLeft: `${item.depth * 22}px` } : undefined\"\n            >\n              <!-- Outside the row, which is a button, over the leading slot's first mark: 16px in, or more for a child. -->\n              <span\n                v-if=\"leading\"\n                class=\"absolute top-1/2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center\"\n                :class=\"!selected.length && 'hidden group-hover/row:flex group-has-focus-visible/row:flex'\"\n                data-list-check\n                :style=\"{ left: `${16 + (item.depth ?? 0) * 22}px` }\"\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <span\n                v-if=\"gutter\"\n                class=\"flex w-7 shrink-0 justify-end transition-opacity duration-100\"\n                :class=\"selected.length ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100'\"\n              >\n                <Checkbox\n                  :aria-label=\"selectLabel\"\n                  :model-value=\"selected.includes(idOf(item))\"\n                  tabindex=\"-1\"\n                  @update:model-value=\"toggle(item)\"\n                />\n              </span>\n              <div\n                class=\"flex h-full min-w-0 flex-1 items-center gap-2.5 pr-4 outline-hidden\"\n                :class=\"[gutter ? 'pl-2.5' : 'pl-4', (onRowClick || selectable) && 'cursor-pointer']\"\n                data-list-row\n                :role=\"onRowClick ? 'button' : undefined\"\n                :tabindex=\"interactive ? 0 : undefined\"\n                @click=\"clickRow($event, item)\"\n                @keydown=\"onKeydown($event, item)\"\n                @mousedown=\"onRowMousedown\"\n              >\n                <span\n                  v-if=\"$slots.leading\"\n                  class=\"flex shrink-0 items-center gap-2 text-sui-ink-muted tabular-nums\"\n                  :class=\"\n                    leading &&\n                    (selected.length\n                      ? '[&>*:first-child]:invisible'\n                      : 'group-hover/row:[&>*:first-child]:invisible group-has-focus-visible/row:[&>*:first-child]:invisible')\n                  \"\n                >\n                  <slot\n                    :item=\"item\"\n                    name=\"leading\"\n                    :selected=\"selected.includes(idOf(item))\"\n                    :selecting=\"selected.length > 0\"\n                    :toggle=\"() => toggle(item)\"\n                  />\n                </span>\n                <span class=\"min-w-0 flex-1 truncate font-medium text-sui-ink\">\n                  <slot :item=\"item\" name=\"title\">{{ item.name }}</slot>\n                </span>\n                <span\n                  v-if=\"$slots.meta\"\n                  class=\"flex shrink-0 items-center gap-2 text-xs text-sui-ink-muted tabular-nums\"\n                >\n                  <slot :item=\"item\" name=\"meta\" />\n                </span>\n              </div>\n            </li>\n          </ContextMenu>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/DataList/types.d.ts

@@ -8,5 +8,7 @@ export interface DataListGroup<T> {
     label?: string;
     /** Shown instead of the number of items, e.g. a total beyond the loaded page. */
     count?: number;
+    /** Overrides the list's `collapsible` for this group. */
+    collapsible?: boolean;
     items: T[];
 }

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport type { DropdownMenuAction, DropdownMenuEntry }\n\nexport interface DropdownMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          :class=\"[menuContentClass, 'min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]']\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n            <DropdownMenuItem v-else :class=\"menuItemClass\" @select=\"select(item)\">\n              <MenuItemContent :item=\"item\" />\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownMenu.js","names":["_sfc_main","DropdownMenu_vue_vue_type_script_setup_true_lang_default","DropdownMenu_default"],"sources":["../../../src/components/DropdownMenu/DropdownMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, useId } from 'vue'\n\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRoot,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from 'reka-ui'\n\nimport Button from '../Button/Button.vue'\nimport Icon from '../Icon/Icon.vue'\nimport Tooltip from '../Tooltip/Tooltip.vue'\nimport MenuItemContent from '../internal/MenuItemContent.vue'\nimport {\n  type DropdownMenuAction,\n  type DropdownMenuEntry,\n  type MenuConfirmLabels,\n  menuConfirmDefaults,\n  menuContentClass,\n  menuItemClass,\n  menuSeparatorClass,\n  useMenuSelect\n} from '../internal/menu'\n\nexport type { DropdownMenuAction, DropdownMenuEntry }\n\nexport interface DropdownMenuProps extends MenuConfirmLabels {\n  items?: DropdownMenuEntry[]\n  buttonIcon?: string\n  /** A label beside the icon; without one the button is icon-only, named by the tooltip. */\n  buttonLabel?: string\n  /** The trigger's tooltip and name; null for none. */\n  tooltip?: string | null\n  /** Lines the menu up with the trigger's start or end edge. */\n  align?: 'start' | 'end'\n}\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  ...menuConfirmDefaults,\n  items: () => [],\n  buttonIcon: 'more-vertical',\n  buttonLabel: undefined,\n  tooltip: 'More actions',\n  align: 'start'\n})\n\nconst emit = defineEmits<{ 'click-item': [item: DropdownMenuAction & { id?: string }]; show: []; hide: [] }>()\n\nconst open = ref(false)\nconst uid = useId()\nconst select = useMenuSelect(props, (item) => emit('click-item', item))\n\nfunction onOpenChange(value: boolean) {\n  open.value = value\n  if (value) emit('show')\n  else emit('hide')\n}\n</script>\n\n<template>\n  <div>\n    <!-- Not modal: the page stays live (hover, scroll) while it's open. -->\n    <DropdownMenuRoot :modal=\"false\" :open=\"open\" @update:open=\"onOpenChange\">\n      <!-- The tooltip inside the menu's trigger: Reka's anchors attach to the nearest popper, which must be the menu's. -->\n      <DropdownMenuTrigger as-child>\n        <Tooltip :disabled=\"!tooltip || open\" :text=\"tooltip ?? undefined\">\n          <slot name=\"trigger\" :open=\"open\">\n            <Button\n              :aria-label=\"buttonLabel ? undefined : (tooltip ?? undefined)\"\n              :icon-only=\"!buttonLabel\"\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n              @click.stop\n            >\n              <span v-if=\"buttonLabel\">{{ buttonLabel }}</span>\n              <Icon v-if=\"buttonIcon\" color=\"ink-subtle\" :name=\"buttonIcon\" />\n            </Button>\n          </slot>\n        </Tooltip>\n      </DropdownMenuTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuContent\n          :align=\"align\"\n          :class=\"[menuContentClass, 'min-w-[max(12rem,var(--reka-dropdown-menu-trigger-width))]']\"\n          side=\"bottom\"\n        >\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <DropdownMenuSeparator v-if=\"item.type === 'separator'\" :class=\"menuSeparatorClass\" />\n            <DropdownMenuItem\n              v-else\n              as-child\n              :class=\"menuItemClass\"\n              :text-value=\"item.disabled ? '' : undefined\"\n              @select=\"select(item, $event)\"\n            >\n              <MenuItemContent :item=\"item\" :reason-id=\"`${uid}-${index}`\" />\n            </DropdownMenuItem>\n          </template>\n        </DropdownMenuContent>\n      </DropdownMenuPortal>\n    </DropdownMenuRoot>\n  </div>\n</template>\n"],"mappings":""}