vectis-ui 0.12.0 → 0.13.0

package/dist/components/VDataTable/VDataTable.vue_vue_type_script_setup_true_lang.js

@@ -4,72 +4,97 @@ import { iconProps as r } from "../VIcon/iconProps.js";
 import { cssSize as i } from "../../utils/css.js";
 import a from "../VIcon/VIcon.js";
 import o from "../VTypography/VTypography.js";
-import ee from "../VSpinner/VSpinner.js";
+import { clamp as ee } from "../../utils/number.js";
+import s from "../VSpinner/VSpinner.js";
 import te from "../VButton/VButton.js";
-import { clamp as ne } from "../../utils/number.js";
-import re from "../VPagination/VPagination.js";
-import { useRootAttrs as ie } from "../../composables/useRootAttrs.js";
-import { toggleValue as ae } from "../../utils/array.js";
-import oe from "../VInput/VInput.js";
-import s from "../VCheckbox/VCheckbox.js";
-import { useTimer as se } from "../../composables/useTimer.js";
-import ce from "../VMenu/VMenu.js";
-import le from "../VMenu/VMenuItem.js";
-import { createNormalizedCache as ue, normalizeText as de } from "../../utils/text.js";
+import { useRootAttrs as ne } from "../../composables/useRootAttrs.js";
+import re from "../VMenu/VMenu.js";
+import ie from "../VPagination/VPagination.js";
+import { useTimer as ae } from "../../composables/useTimer.js";
+import { createNormalizedCache as oe, normalizeText as se } from "../../utils/text.js";
+import { toggleValue as ce } from "../../utils/array.js";
+import le from "../VInput/VInput.js";
+import ue from "../VCheckbox/VCheckbox.js";
+import de from "../VMenu/VMenuItem.js";
+import fe from "../VEmptyState/VEmptyState.js";
+import { inbox as pe } from "../VIcon/icons/inbox.js";
+import { search_off as me } from "../VIcon/icons/search_off.js";
+import { useInfiniteScroll as he } from "../../composables/useInfiniteScroll.js";
+import { useVirtualList as ge } from "../../composables/useVirtualList.js";
 import { arrow_downward as c } from "../VIcon/icons/arrow_downward.js";
-import { arrow_drop_down as fe } from "../VIcon/icons/arrow_drop_down.js";
+import { arrow_drop_down as _e } from "../VIcon/icons/arrow_drop_down.js";
 import { arrow_upward as l } from "../VIcon/icons/arrow_upward.js";
-import { search as pe } from "../VIcon/icons/search.js";
+import { search as ve } from "../VIcon/icons/search.js";
 import { swap_vert as u } from "../VIcon/icons/swap_vert.js";
-import { Fragment as d, computed as f, createBlock as me, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, mergeProps as b, normalizeClass as he, normalizeStyle as ge, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as _e, useModel as D, useSlots as ve, watch as O, watchEffect as ye, withCtx as k } from "vue";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, mergeProps as x, normalizeClass as ye, normalizeStyle as be, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useId as xe, useModel as O, useSlots as Se, watch as k, watchEffect as Ce, withCtx as A } from "vue";
 //#region src/components/VDataTable/VDataTable.vue?vue&type=script&setup=true&lang.ts
-var be = [
+var we = [
 	"data-variant",
 	"data-striped",
 	"data-compact",
 	"data-sticky-header",
-	"data-selectable"
-], xe = {
+	"data-selectable",
+	"data-virtual"
+], Te = {
 	key: 0,
-	class: "v-data-table-toolbar"
-}, Se = { class: "v-data-table-scroller" }, Ce = ["aria-labelledby"], we = {
+	class: "v-data-table-header"
+}, Ee = {
 	key: 0,
-	class: "v-data-table-caption"
-}, Te = { class: "v-data-table-head" }, Ee = {
+	class: "v-data-table-titles"
+}, De = {
+	key: 1,
+	class: "v-data-table-toolbar"
+}, Oe = { class: "v-data-table-frame" }, ke = [
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-rowcount",
+	"aria-busy"
+], Ae = ["aria-rowindex"], je = {
 	key: 0,
 	scope: "col",
 	class: "v-data-table-select"
-}, De = ["data-align", "aria-sort"], Oe = ["data-direction", "onClick"], ke = { key: 0 }, Ae = ["colspan"], je = { class: "v-data-table-state-loading" }, Me = { "aria-hidden": "true" }, Ne = { key: 1 }, Pe = ["colspan"], Fe = ["data-selected"], Ie = {
+}, Me = ["data-align", "aria-sort"], Ne = ["data-direction", "onClick"], Pe = { key: 0 }, Fe = ["colspan"], Ie = { class: "v-data-table-state-loading" }, Le = { "aria-hidden": "true" }, Re = { key: 1 }, ze = ["colspan"], Be = {
+	key: 0,
+	class: "v-data-table-spacer",
+	"aria-hidden": "true"
+}, Ve = ["colspan"], He = [
+	"data-index",
+	"aria-rowindex",
+	"data-stripe",
+	"data-selected"
+], Ue = {
 	key: 0,
 	class: "v-data-table-select"
-}, Le = ["data-align"], Re = {
-	key: 1,
+}, We = ["data-align"], Ge = ["colspan"], Ke = {
+	key: 0,
+	class: "v-data-table-state-loading"
+}, qe = {
+	key: 0,
 	class: "v-data-table-footer"
-}, ze = {
+}, Je = {
 	key: 0,
 	class: "v-data-table-selection",
 	"aria-live": "polite"
-}, Be = {
+}, Ye = {
 	key: 1,
 	class: "v-data-table-footer-end"
-}, Ve = {
+}, Xe = {
 	key: 0,
 	class: "v-data-table-per-page"
-}, He = {
+}, Ze = {
 	class: "v-data-table-per-page-label",
 	"aria-hidden": "true"
-}, Ue = {
+}, Qe = {
 	key: 1,
 	class: "v-data-table-range",
 	"aria-live": "polite"
-}, A = /*@__PURE__*/ v({
+}, j = /*@__PURE__*/ y({
 	inheritAttrs: !1,
 	__name: "VDataTable",
-	props: /*@__PURE__*/ y({
+	props: /*@__PURE__*/ b({
 		columns: {},
 		rows: {},
 		rowKey: { default: void 0 },
-		caption: { default: void 0 },
 		variant: { default: "flat" },
 		loading: {
 			type: Boolean,
@@ -78,6 +103,7 @@ var be = [
 		loadingText: { default: void 0 },
 		emptyText: { default: void 0 },
 		title: { default: void 0 },
+		subtitle: { default: void 0 },
 		searchable: {
 			type: Boolean,
 			default: !1
@@ -128,6 +154,14 @@ var be = [
 		serverSide: {
 			type: Boolean,
 			default: !1
+		},
+		virtual: {
+			type: Boolean,
+			default: !1
+		},
+		hasMore: {
+			type: Boolean,
+			default: !1
 		}
 	}, {
 		sort: { default: null },
@@ -141,7 +175,7 @@ var be = [
 		search: { default: "" },
 		searchModifiers: {}
 	}),
-	emits: /*@__PURE__*/ y(["update:params"], [
+	emits: /*@__PURE__*/ b(["update:params", "load-more"], [
 		"update:sort",
 		"update:page",
 		"update:perPage",
@@ -149,84 +183,84 @@ var be = [
 		"update:search"
 	]),
 	setup(c, { expose: l, emit: u }) {
-		let v = c, y = n(), A = t(), We = f(() => v.emptyText ?? y.value.dataTable.empty), j = f(() => v.loadingText ?? y.value.dataTable.loading), Ge = f(() => v.searchPlaceholder ?? y.value.dataTable.searchPlaceholder), Ke = f(() => v.searchLabel ?? y.value.dataTable.searchLabel), M = f(() => v.perPageText ?? y.value.dataTable.perPage), qe = f(() => v.selectAllLabel ?? y.value.dataTable.selectAll), N = D(c, "sort"), P = D(c, "page"), F = D(c, "perPage"), I = D(c, "selected"), L = D(c, "search"), Je = u, { attrs: R, rootClass: Ye, rootStyle: Xe, forwardedAttrs: Ze } = ie(), Qe = ve(), z = S(null);
-		l({ el: z });
-		let B = _e(), $e = f(() => v.caption || !(v.title || Qe.title) || R["aria-label"] !== void 0 || R["aria-labelledby"] !== void 0 ? void 0 : B);
+		let y = c, b = n(), j = t(), M = f(() => y.loadingText ?? b.value.dataTable.loading), $e = f(() => y.searchPlaceholder ?? b.value.dataTable.searchPlaceholder), et = f(() => y.searchLabel ?? b.value.dataTable.searchLabel), N = f(() => y.perPageText ?? b.value.dataTable.perPage), tt = f(() => y.selectAllLabel ?? b.value.dataTable.selectAll), P = O(c, "sort"), F = O(c, "page"), I = O(c, "perPage"), L = O(c, "selected"), R = O(c, "search"), nt = u, { attrs: rt, rootClass: it, rootStyle: at, forwardedAttrs: ot } = ne(), st = Se(), ct = C(null);
+		l({ el: ct });
+		let lt = xe(), ut = xe(), dt = () => rt["aria-label"] !== void 0 || rt["aria-labelledby"] !== void 0, ft = f(() => y.title && !st.header && !dt() ? lt : void 0), pt = f(() => y.subtitle && !st.header ? ut : void 0);
 		if (e) {
-			v.selectable && !v.rowKey && console.warn("[VDataTable] `selectable` without `rowKey` — index-based identities are corrupted by sorting, filtering and pagination.");
+			!ft.value && !dt() && console.warn("[VDataTable] the table has no accessible name: set `title`, or aria-label or aria-labelledby when the `#header` slot replaces it."), y.selectable && !y.rowKey && console.warn("[VDataTable] `selectable` without `rowKey` — index-based identities are corrupted by sorting, filtering and pagination.");
 			let e = /* @__PURE__ */ new Set();
-			ye(() => {
-				let t = v.rowKey;
+			Ce(() => {
+				let t = y.rowKey;
 				if (!t) return;
 				let n = /* @__PURE__ */ new Set();
-				for (let r of v.rows) {
+				for (let r of y.rows) {
 					let i = r[t];
 					typeof i != "string" && typeof i != "number" ? e.has("type") || (e.add("type"), console.warn(`[VDataTable] \`rowKey\` "${t}" is missing or is not a string or a number on some rows: those rows share one identity.`)) : n.has(i) ? e.has("duplicate") || (e.add("duplicate"), console.warn(`[VDataTable] \`rowKey\` "${t}" holds the value "${i}" twice: rows are told apart by it, so it must be unique.`)) : n.add(i);
 				}
 			});
 		}
-		function et(e, t) {
-			if (!v.rowKey) return t;
-			let n = e[v.rowKey];
+		function mt(e, t) {
+			if (!y.rowKey) return t;
+			let n = e[y.rowKey];
 			return typeof n == "string" || typeof n == "number" ? n : String(n);
 		}
-		let tt = ue(), nt = (e, t) => tt(e, String(e[t] ?? ""), t), V = f(() => {
-			if (v.serverSide || !v.searchable) return v.rows;
-			let e = de((L.value ?? "").trim());
-			return e ? v.rows.filter((t) => v.columns.some((n) => nt(t, n.key).includes(e))) : v.rows;
-		}), rt = f(() => new Intl.Collator(A.value, { numeric: !0 })), it = /^\s*[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?\s*$/i;
-		function H(e) {
-			return e instanceof Date ? e.getTime() : typeof e == "string" && it.test(e) ? Number(e) : e;
+		let ht = oe(), gt = (e, t) => ht(e, String(e[t] ?? ""), t), z = f(() => {
+			if (y.serverSide || !y.searchable) return y.rows;
+			let e = se((R.value ?? "").trim());
+			return e ? y.rows.filter((t) => y.columns.some((n) => gt(t, n.key).includes(e))) : y.rows;
+		}), _t = f(() => new Intl.Collator(j.value, { numeric: !0 })), vt = /^\s*[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?\s*$/i;
+		function yt(e) {
+			return e instanceof Date ? e.getTime() : typeof e == "string" && vt.test(e) ? Number(e) : e;
 		}
-		let U = f(() => {
-			let e = N.value;
-			if (!e || v.serverSide) return V.value;
-			let t = e.direction === "asc" ? 1 : -1, n = rt.value.compare;
-			return [...V.value].sort((r, i) => {
-				let a = H(r[e.key]), o = H(i[e.key]);
+		let bt = f(() => {
+			let e = P.value;
+			if (!e || y.serverSide) return z.value;
+			let t = e.direction === "asc" ? 1 : -1, n = _t.value.compare;
+			return [...z.value].sort((r, i) => {
+				let a = yt(r[e.key]), o = yt(i[e.key]);
 				return typeof a == "number" && typeof o == "number" ? (a - o) * t : n(String(a ?? ""), String(o ?? "")) * t;
 			});
-		}), W = f(() => (F.value ?? 0) > 0), G = f(() => v.serverSide ? v.total ?? v.rows.length : V.value.length), K = f(() => W.value ? Math.max(1, Math.ceil(G.value / (F.value ?? 1))) : 1), q = f(() => ne(P.value, 1, K.value)), J = f(() => {
-			if (v.serverSide || !W.value) return U.value;
-			let e = (q.value - 1) * (F.value ?? 0);
-			return U.value.slice(e, e + (F.value ?? 0));
+		}), B = f(() => (I.value ?? 0) > 0), V = f(() => y.serverSide ? y.total ?? y.rows.length : z.value.length), xt = f(() => B.value ? Math.max(1, Math.ceil(V.value / (I.value ?? 1))) : 1), H = f(() => ee(F.value, 1, xt.value)), U = f(() => {
+			if (y.serverSide || !B.value) return bt.value;
+			let e = (H.value - 1) * (I.value ?? 0);
+			return bt.value.slice(e, e + (I.value ?? 0));
 		});
-		function at(e) {
-			let t = N.value;
-			!t || t.key !== e ? N.value = {
+		function St(e) {
+			let t = P.value;
+			!t || t.key !== e ? P.value = {
 				key: e,
 				direction: "asc"
-			} : t.direction === "asc" ? N.value = {
+			} : t.direction === "asc" ? P.value = {
 				key: e,
 				direction: "desc"
-			} : N.value = null;
+			} : P.value = null;
 		}
-		function ot(e) {
-			if (N.value?.key === e.key) return N.value.direction === "asc" ? "ascending" : "descending";
+		function Ct(e) {
+			if (P.value?.key === e.key) return P.value.direction === "asc" ? "ascending" : "descending";
 		}
-		function st(e) {
-			return N.value?.key === e.key ? N.value.direction === "asc" ? v.sortAscIcon : v.sortDescIcon : v.sortIcon;
+		function wt(e) {
+			return P.value?.key === e.key ? P.value.direction === "asc" ? y.sortAscIcon : y.sortDescIcon : y.sortIcon;
 		}
-		let Y = S(L.value), ct = se();
-		function lt() {
-			L.value !== Y.value && (Y.value = L.value, P.value = 1);
+		let W = C(R.value), Tt = ae();
+		function Et() {
+			R.value !== W.value && (W.value = R.value, F.value = 1);
 		}
-		O(L, () => {
-			if (!v.serverSide) {
-				P.value = 1;
+		k(R, () => {
+			if (!y.serverSide) {
+				F.value = 1;
 				return;
 			}
-			ct.start(lt, v.searchDebounce);
+			Tt.start(Et, y.searchDebounce);
 		});
-		let ut = f(() => v.serverSide ? Y.value : L.value);
-		O([
-			P,
-			() => F.value ?? null,
-			() => N.value?.key ?? null,
-			() => N.value?.direction ?? null,
-			Y
+		let G = f(() => y.serverSide ? W.value : R.value), Dt = f(() => y.emptyText ?? (G.value ? b.value.dataTable.noResults : b.value.dataTable.empty));
+		k([
+			F,
+			() => I.value ?? null,
+			() => P.value?.key ?? null,
+			() => P.value?.direction ?? null,
+			W
 		], ([e, t, n, r, i]) => {
-			v.serverSide && Je("update:params", {
+			y.serverSide && nt("update:params", {
 				page: e,
 				perPage: t,
 				sortKey: n,
@@ -234,170 +268,248 @@ var be = [
 				search: i
 			});
 		});
-		let X = f(() => new Set(I.value)), Z = f(() => J.value.map((e, t) => et(e, t))), Q = f(() => Z.value.length > 0 && Z.value.every((e) => X.value.has(e))), dt = f(() => !Q.value && Z.value.some((e) => X.value.has(e))), $ = (e) => X.value.has(e);
-		function ft(e) {
-			I.value = ae(I.value, e);
+		let K = f(() => new Set(L.value)), q = f(() => U.value.map((e, t) => mt(e, t))), J = f(() => q.value.length > 0 && q.value.every((e) => K.value.has(e))), Ot = f(() => !J.value && q.value.some((e) => K.value.has(e))), kt = (e) => K.value.has(e);
+		function At(e) {
+			L.value = ce(L.value, e);
 		}
-		let pt = f(() => Z.value.length === 0 || v.loading);
-		function mt() {
-			if (pt.value) return;
-			let e = Z.value;
-			if (Q.value) {
+		let jt = f(() => q.value.length === 0 || y.loading);
+		function Mt() {
+			if (jt.value) return;
+			let e = q.value;
+			if (J.value) {
 				let t = new Set(e);
-				I.value = I.value.filter((e) => !t.has(e));
+				L.value = L.value.filter((e) => !t.has(e));
 			} else {
-				let t = X.value;
-				I.value = [...I.value, ...e.filter((e) => !t.has(e))];
+				let t = K.value;
+				L.value = [...L.value, ...e.filter((e) => !t.has(e))];
 			}
 		}
-		function ht(e, t) {
-			let n = (W.value ? (q.value - 1) * (F.value ?? 0) : 0) + t;
-			return v.selectRowLabel?.(e, n) ?? y.value.dataTable.selectRow(n + 1);
+		function Nt(e, t) {
+			let n = Pt.value + t;
+			return y.selectRowLabel?.(e, n) ?? b.value.dataTable.selectRow(n + 1);
+		}
+		let Pt = f(() => B.value ? (H.value - 1) * (I.value ?? 0) : 0), Y = C(null), Ft = C(null), X = C(null), Z = C(-1);
+		function It(e) {
+			if (!(e instanceof Element)) return -1;
+			let t = e.closest("tr");
+			return !t || t.parentElement !== X.value || t.dataset.index === void 0 ? -1 : Number(t.dataset.index);
 		}
-		O(F, () => {
-			P.value = 1;
+		let Lt = {
+			regular: 46,
+			compact: 38
+		}, Rt = ge({
+			scrollEl: f(() => y.virtual ? Y.value : null),
+			listEl: X,
+			count: () => U.value.length,
+			key: (e) => q.value[e],
+			itemSize: () => y.compact ? Lt.compact : Lt.regular,
+			overscan: () => 5,
+			initialCount: () => 20,
+			pinned: () => Z.value >= 0 ? [Z.value] : [],
+			insetStart: () => y.stickyHeader ? Ft.value?.offsetHeight ?? 0 : 0
+		}), zt = Rt.measure, Bt = f(() => y.virtual ? Rt.segments.value : U.value.map((e, t) => ({
+			type: "row",
+			index: t
+		}))), Vt = f(() => {
+			if (y.virtual) return y.hasMore ? -1 : V.value + 1;
+		}), Ht = f(() => y.loading && y.hasMore && U.value.length > 0), Q = C(null);
+		he({
+			sentinelEl: Q,
+			root: () => Y.value,
+			canLoad: () => y.hasMore && !y.loading,
+			loaded: () => y.rows,
+			onLoadMore: () => nt("load-more")
+		}), e && k(Bt, (e) => {
+			let t = Y.value;
+			!y.virtual || !t || U.value.length < 100 || t.scrollHeight > t.clientHeight || e.some((e) => e.type === "spacer") || console.warn("[VDataTable] `virtual` renders every row because the table does not scroll: give it a `height` or a parent with a height.");
+		}, {
+			flush: "post",
+			once: !0
+		}), k(I, () => {
+			F.value = 1;
 		});
-		let gt = f(() => v.columns.length + +!!v.selectable), _t = f(() => {
-			let e = I.value.length;
-			return e === 0 ? "" : v.selectionText ? v.selectionText(e) : y.value.dataTable.selection(e);
-		}), vt = f(() => {
-			let e = F.value ?? 0, t = G.value, n = t === 0 ? 0 : (q.value - 1) * e + 1, r = Math.min(q.value * e, t);
-			return v.rangeText?.({
+		let $ = f(() => y.columns.length + +!!y.selectable), Ut = f(() => {
+			let e = L.value.length;
+			return e === 0 ? "" : y.selectionText ? y.selectionText(e) : b.value.dataTable.selection(e);
+		}), Wt = f(() => {
+			let e = I.value ?? 0, t = V.value, n = t === 0 ? 0 : (H.value - 1) * e + 1, r = Math.min(H.value * e, t);
+			return y.rangeText?.({
 				start: n,
 				end: r,
 				total: t
-			}) ?? y.value.dataTable.range({
+			}) ?? b.value.dataTable.range({
 				start: n,
 				end: r,
 				total: t
 			});
-		}), yt = f(() => v.height === void 0 ? void 0 : { blockSize: i(v.height) });
-		return (e, t) => (x(), m("div", {
-			class: he(["v-data-table", E(Ye)]),
-			style: ge([yt.value, E(Xe)]),
+		}), Gt = f(() => y.height === void 0 ? void 0 : { blockSize: i(y.height) });
+		return (e, t) => (S(), h("div", {
+			class: ye(["v-data-table", D(it)]),
+			style: be([Gt.value, D(at)]),
 			"data-variant": c.variant,
 			"data-striped": c.striped ? "" : void 0,
 			"data-compact": c.compact ? "" : void 0,
 			"data-sticky-header": c.stickyHeader ? "" : void 0,
-			"data-selectable": c.selectable ? "" : void 0
+			"data-selectable": c.selectable ? "" : void 0,
+			"data-virtual": c.virtual ? "" : void 0
 		}, [
-			c.title || e.$slots.title || c.searchable ? (x(), m("div", xe, [_(o, {
-				id: E(B),
+			c.title || c.subtitle || e.$slots.header || c.searchable ? (S(), h("div", Te, [T(e.$slots, "header", {}, () => [c.title || c.subtitle ? (S(), h("div", Ee, [c.title ? (S(), p(o, {
+				key: 0,
+				id: D(lt),
 				as: "div",
 				variant: "heading-4",
 				class: "v-data-table-title"
 			}, {
-				default: k(() => [w(e.$slots, "title", {}, () => [g(T(c.title), 1)])]),
-				_: 3
-			}, 8, ["id"]), c.searchable ? (x(), me(oe, {
+				default: A(() => [_(E(c.title), 1)]),
+				_: 1
+			}, 8, ["id"])) : m("", !0), c.subtitle ? (S(), p(o, {
+				key: 1,
+				id: D(ut),
+				variant: "subtitle",
+				tone: "muted",
+				class: "v-data-table-subtitle"
+			}, {
+				default: A(() => [_(E(c.subtitle), 1)]),
+				_: 1
+			}, 8, ["id"])) : m("", !0)])) : m("", !0)]), c.searchable ? (S(), p(le, {
 				key: 0,
-				modelValue: L.value,
-				"onUpdate:modelValue": t[0] ||= (e) => L.value = e,
+				modelValue: R.value,
+				"onUpdate:modelValue": t[0] ||= (e) => R.value = e,
 				class: "v-data-table-search",
 				type: "search",
 				size: "sm",
 				compact: c.compact,
-				"icon-start": E(pe),
+				"icon-start": D(ve),
 				clearable: "",
-				placeholder: Ge.value,
-				"aria-label": Ke.value
+				placeholder: $e.value,
+				"aria-label": et.value
 			}, null, 8, [
 				"modelValue",
 				"compact",
 				"icon-start",
 				"placeholder",
 				"aria-label"
-			])) : p("", !0)])) : p("", !0),
-			h("div", Se, [h("table", b({
+			])) : m("", !0)])) : m("", !0),
+			e.$slots.toolbar ? (S(), h("div", De, [T(e.$slots, "toolbar")])) : m("", !0),
+			g("div", Oe, [g("div", {
+				ref_key: "scrollerEl",
+				ref: Y,
+				class: "v-data-table-scroller"
+			}, [g("table", x({
 				ref_key: "tableEl",
-				ref: z,
+				ref: ct,
 				class: "v-data-table-table",
-				"aria-labelledby": $e.value
-			}, E(Ze)), [
-				c.caption ? (x(), m("caption", we, T(c.caption), 1)) : p("", !0),
-				h("thead", Te, [h("tr", null, [c.selectable ? (x(), m("th", Ee, [_(s, {
-					"model-value": Q.value,
-					indeterminate: dt.value,
-					disabled: pt.value,
-					"aria-label": qe.value,
-					"onUpdate:modelValue": mt
-				}, null, 8, [
-					"model-value",
-					"indeterminate",
-					"disabled",
-					"aria-label"
-				])])) : p("", !0), (x(!0), m(d, null, C(c.columns, (t) => (x(), m("th", {
-					key: t.key,
-					scope: "col",
-					"data-align": t.align,
-					"aria-sort": ot(t)
-				}, [t.sortable ? (x(), m("button", {
-					key: 0,
-					type: "button",
-					class: "v-data-table-sort",
-					"data-direction": N.value?.key === t.key ? N.value.direction : void 0,
-					onClick: (e) => at(t.key)
-				}, [w(e.$slots, `head-${t.key}`, { column: t }, () => [g(T(t.label), 1)]), _(a, b({ class: "v-data-table-sort-icon" }, { ref_for: !0 }, E(r)(st(t))), null, 16)], 8, Oe)) : w(e.$slots, `head-${t.key}`, { column: t }, () => [g(T(t.label), 1)], void 0, 1)], 8, De))), 128))])]),
-				h("tbody", null, [c.loading ? (x(), m("tr", ke, [h("td", {
-					colspan: gt.value,
-					class: "v-data-table-state"
-				}, [w(e.$slots, "loading", {}, () => [h("span", je, [_(ee, { label: j.value }, null, 8, ["label"]), h("span", Me, T(j.value), 1)])])], 8, Ae)])) : J.value.length === 0 ? (x(), m("tr", Ne, [h("td", {
-					colspan: gt.value,
-					class: "v-data-table-state"
-				}, [w(e.$slots, "empty", { search: ut.value }, () => [g(T(We.value), 1)])], 8, Pe)])) : (x(!0), m(d, { key: 2 }, C(J.value, (t, n) => (x(), m("tr", {
-					key: Z.value[n],
-					"data-selected": c.selectable && $(Z.value[n]) ? "" : void 0
-				}, [c.selectable ? (x(), m("td", Ie, [_(s, {
-					"model-value": $(Z.value[n]),
-					"aria-label": ht(t, n),
-					"onUpdate:modelValue": (e) => ft(Z.value[n])
-				}, null, 8, [
-					"model-value",
-					"aria-label",
-					"onUpdate:modelValue"
-				])])) : p("", !0), (x(!0), m(d, null, C(c.columns, (n) => (x(), m("td", {
-					key: n.key,
-					"data-align": n.align
-				}, [w(e.$slots, `cell-${n.key}`, {
-					row: t,
-					value: t[n.key],
-					column: n
-				}, () => [g(T(t[n.key]), 1)])], 8, Le))), 128))], 8, Fe))), 128))])
-			], 16, Ce)]),
-			W.value || c.selectable ? (x(), m("div", Re, [c.selectable ? (x(), m("span", ze, T(_t.value), 1)) : p("", !0), W.value ? (x(), m("div", Be, [
-				c.perPageOptions?.length ? (x(), m("div", Ve, [h("span", He, T(M.value), 1), _(ce, {
+				"aria-labelledby": ft.value,
+				"aria-describedby": pt.value,
+				"aria-rowcount": Vt.value,
+				"aria-busy": Ht.value ? "true" : void 0
+			}, D(ot)), [g("thead", {
+				ref_key: "theadEl",
+				ref: Ft,
+				class: "v-data-table-head"
+			}, [g("tr", { "aria-rowindex": c.virtual ? 1 : void 0 }, [c.selectable ? (S(), h("th", je, [v(ue, {
+				"model-value": J.value,
+				indeterminate: Ot.value,
+				disabled: jt.value,
+				"aria-label": tt.value,
+				"onUpdate:modelValue": Mt
+			}, null, 8, [
+				"model-value",
+				"indeterminate",
+				"disabled",
+				"aria-label"
+			])])) : m("", !0), (S(!0), h(d, null, w(c.columns, (t) => (S(), h("th", {
+				key: t.key,
+				scope: "col",
+				"data-align": t.align,
+				"aria-sort": Ct(t)
+			}, [t.sortable ? (S(), h("button", {
+				key: 0,
+				type: "button",
+				class: "v-data-table-sort",
+				"data-direction": P.value?.key === t.key ? P.value.direction : void 0,
+				onClick: (e) => St(t.key)
+			}, [T(e.$slots, `head-${t.key}`, { column: t }, () => [_(E(t.label), 1)]), v(a, x({ class: "v-data-table-sort-icon" }, { ref_for: !0 }, D(r)(wt(t))), null, 16)], 8, Ne)) : T(e.$slots, `head-${t.key}`, { column: t }, () => [_(E(t.label), 1)], void 0, 1)], 8, Me))), 128))], 8, Ae)], 512), g("tbody", {
+				ref_key: "tbodyEl",
+				ref: X,
+				onFocusin: t[1] ||= (e) => Z.value = It(e.target),
+				onFocusout: t[2] ||= (e) => Z.value = It(e.relatedTarget)
+			}, [c.loading && !Ht.value ? (S(), h("tr", Pe, [g("td", {
+				colspan: $.value,
+				class: "v-data-table-state"
+			}, [T(e.$slots, "loading", {}, () => [g("span", Ie, [v(s, { label: M.value }, null, 8, ["label"]), g("span", Le, E(M.value), 1)])])], 8, Fe)])) : U.value.length === 0 ? (S(), h("tr", Re, [g("td", {
+				colspan: $.value,
+				class: "v-data-table-state"
+			}, [T(e.$slots, "empty", { search: G.value }, () => [v(fe, {
+				size: "sm",
+				icon: G.value ? D(me) : D(pe),
+				title: Dt.value
+			}, null, 8, ["icon", "title"])])], 8, ze)])) : (S(), h(d, { key: 2 }, [(S(!0), h(d, null, w(Bt.value, (t) => (S(), h(d, { key: t.type === "row" ? q.value[t.index] : t.key }, [t.type === "spacer" ? (S(), h("tr", Be, [g("td", {
+				colspan: $.value,
+				style: be({ blockSize: `${t.size}px` })
+			}, null, 12, Ve)])) : (S(), h("tr", {
+				key: 1,
+				ref_for: !0,
+				ref: c.virtual ? (e) => D(zt)(e, t.index) : void 0,
+				"data-index": c.virtual ? t.index : void 0,
+				"aria-rowindex": c.virtual ? Pt.value + t.index + 2 : void 0,
+				"data-stripe": c.striped && t.index % 2 == 1 ? "" : void 0,
+				"data-selected": c.selectable && kt(q.value[t.index]) ? "" : void 0
+			}, [c.selectable ? (S(), h("td", Ue, [v(ue, {
+				"model-value": kt(q.value[t.index]),
+				"aria-label": Nt(U.value[t.index], t.index),
+				"onUpdate:modelValue": (e) => At(q.value[t.index])
+			}, null, 8, [
+				"model-value",
+				"aria-label",
+				"onUpdate:modelValue"
+			])])) : m("", !0), (S(!0), h(d, null, w(c.columns, (n) => (S(), h("td", {
+				key: n.key,
+				"data-align": n.align
+			}, [T(e.$slots, `cell-${n.key}`, {
+				row: U.value[t.index],
+				value: U.value[t.index][n.key],
+				column: n
+			}, () => [_(E(U.value[t.index][n.key]), 1)])], 8, We))), 128))], 8, He))], 64))), 128)), c.hasMore ? (S(), h("tr", {
+				key: 0,
+				ref_key: "sentinelEl",
+				ref: Q,
+				class: "v-data-table-more",
+				"aria-hidden": "true"
+			}, [g("td", { colspan: $.value }, [c.loading ? (S(), h("span", Ke, [v(s), g("span", null, E(M.value), 1)])) : m("", !0)], 8, Ge)], 512)) : m("", !0)], 64))], 544)], 16, ke)], 512), B.value || c.selectable ? (S(), h("div", qe, [c.selectable ? (S(), h("span", Je, E(Ut.value), 1)) : m("", !0), B.value ? (S(), h("div", Ye, [
+				c.perPageOptions?.length ? (S(), h("div", Xe, [g("span", Ze, E(N.value), 1), v(re, {
 					size: "sm",
 					compact: c.compact,
 					placement: "top-end",
 					"match-trigger": ""
 				}, {
-					trigger: k(({ triggerProps: e }) => [_(te, b({
+					trigger: A(({ triggerProps: e }) => [v(te, x({
 						variant: "ghost",
 						tone: "neutral",
 						size: "sm",
 						compact: c.compact
-					}, e, { "aria-label": E(y).dataTable.perPageValue(M.value, F.value ?? 0) }), {
-						default: k(() => [g(T(F.value) + " ", 1), _(a, { name: E(fe) }, null, 8, ["name"])]),
+					}, e, { "aria-label": D(b).dataTable.perPageValue(N.value, I.value ?? 0) }), {
+						default: A(() => [_(E(I.value) + " ", 1), v(a, { name: D(_e) }, null, 8, ["name"])]),
 						_: 1
 					}, 16, ["compact", "aria-label"])]),
-					default: k(() => [(x(!0), m(d, null, C(c.perPageOptions, (e) => (x(), me(le, {
+					default: A(() => [(S(!0), h(d, null, w(c.perPageOptions, (e) => (S(), p(de, {
 						key: e,
 						label: String(e),
-						selected: e === F.value,
-						onSelect: (t) => F.value = e
+						selected: e === I.value,
+						onSelect: (t) => I.value = e
 					}, null, 8, [
 						"label",
 						"selected",
 						"onSelect"
 					]))), 128))]),
 					_: 1
-				}, 8, ["compact"])])) : p("", !0),
-				c.showRange ? (x(), m("span", Ue, T(vt.value), 1)) : p("", !0),
-				_(re, {
-					modelValue: P.value,
-					"onUpdate:modelValue": t[1] ||= (e) => P.value = e,
-					label: E(y).dataTable.pagination,
-					length: K.value,
+				}, 8, ["compact"])])) : m("", !0),
+				c.showRange ? (S(), h("span", Qe, E(Wt.value), 1)) : m("", !0),
+				v(ie, {
+					modelValue: F.value,
+					"onUpdate:modelValue": t[3] ||= (e) => F.value = e,
+					label: D(b).dataTable.pagination,
+					length: xt.value,
 					size: "sm",
 					compact: c.compact,
 					align: "end",
@@ -410,11 +522,11 @@ var be = [
 					"length",
 					"compact"
 				])
-			])) : p("", !0)])) : p("", !0)
-		], 14, be));
+			])) : m("", !0)])) : m("", !0)])
+		], 14, we));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };
 
 //# sourceMappingURL=VDataTable.vue_vue_type_script_setup_true_lang.js.map