@sparklingopinions/sparkling-ui 0.16.0 → 0.17.0

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

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