@vueye-table/headless 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
+import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useTableLocale, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
 import { Fragment, computed, defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, shallowRef, useId, watch } from "vue";
 import { formatValue, getRowItemKey, gridCommand } from "@vueye-table/core";
 
@@ -32,6 +32,13 @@ const rowProp = {
 function flag(value) {
 	return value ? "" : void 0;
 }
+/**
+* The direction an element is laid out in, read from the nearest `dir` attribute, so keyboard
+* arrows can follow what the reader sees. Without one, left to right.
+*/
+function directionOf(element) {
+	return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+}
 
 //#endregion
 //#region src/controls.ts
@@ -55,10 +62,11 @@ const DataTableSelectAll = defineComponent({
 	slots: Object,
 	props: { label: {
 		type: String,
-		default: "Select all rows"
+		default: void 0
 	} },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectAll>");
+		const locale = useTableLocale();
 		return () => {
 			const state = table.allSelection;
 			const toggle = () => table.toggleAll();
@@ -68,7 +76,7 @@ const DataTableSelectAll = defineComponent({
 			}) ?? checkbox({
 				checked: state === "all",
 				indeterminate: state === "some",
-				label: props.label,
+				label: props.label ?? locale().messages.selectAllRows,
 				disabled: table.selectionMode !== "multiple" || table.rows.length === 0,
 				onChange: toggle
 			});
@@ -81,13 +89,19 @@ const DataTableSelectRow = defineComponent({
 	slots: Object,
 	props: {
 		row: rowProp,
+		/** Defaults to the locale's "Select row 3", the row's place in the table as shown. */
 		label: {
 			type: String,
-			default: "Select row"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectRow>");
+		const locale = useTableLocale();
+		const position = () => {
+			const index = table.rows.indexOf(props.row);
+			return index < 0 ? props.row.index + 1 : Math.max(1, table.pageStart) + index;
+		};
 		return () => {
 			const selected = table.tree ? props.row.selection === "all" : table.isSelected(props.row.key);
 			const indeterminate = table.tree && props.row.selection === "some";
@@ -99,7 +113,7 @@ const DataTableSelectRow = defineComponent({
 			}) ?? checkbox({
 				checked: selected,
 				indeterminate,
-				label: props.label,
+				label: props.label ?? locale().messages.selectRow({ position: locale().count(position()) }),
 				disabled: table.selectionMode === "none",
 				onChange: toggle
 			});
@@ -119,7 +133,7 @@ const DataTableSearch = defineComponent({
 		},
 		label: {
 			type: String,
-			default: "Search"
+			default: void 0
 		},
 		placeholder: {
 			type: String,
@@ -128,13 +142,14 @@ const DataTableSearch = defineComponent({
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTableSearch>");
+		const locale = useTableLocale();
 		let timer;
 		onScopeDispose(() => clearTimeout(timer));
 		return () => h("input", {
 			type: "search",
 			value: table.state.search,
 			placeholder: props.placeholder,
-			"aria-label": props.label,
+			"aria-label": props.label ?? locale().messages.search,
 			onInput: (event) => {
 				const { value } = event.target;
 				clearTimeout(timer);
@@ -155,12 +170,14 @@ const DataTablePagination = defineComponent({
 		as: asProp("nav"),
 		label: {
 			type: String,
-			default: "Pagination"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTablePagination>");
+		const locale = useTableLocale();
 		return () => {
+			const { messages, count } = locale();
 			const slotProps = {
 				page: table.page,
 				pageCount: table.pageCount,
@@ -179,14 +196,14 @@ const DataTablePagination = defineComponent({
 				"data-current": flag(current),
 				onClick
 			}, content);
-			return h(props.as, { "aria-label": props.label }, slots.default?.(slotProps) ?? [
-				button("Previous page", "‹", !table.canPreviousPage, table.previousPage),
+			return h(props.as, { "aria-label": props.label ?? messages.pagination }, slots.default?.(slotProps) ?? [
+				button(messages.previousPage, "‹", !table.canPreviousPage, table.previousPage),
 				...table.pageItems.map((item) => item.type === "gap" ? h("span", {
 					key: item.key,
 					"aria-hidden": "true",
 					"data-gap": ""
-				}, "…") : button(`Page ${item.page}`, String(item.page), false, () => table.goToPage(item.page), item.current)),
-				button("Next page", "›", !table.canNextPage, table.nextPage)
+				}, "…") : button(messages.page(count(item.page)), count(item.page).text, false, () => table.goToPage(item.page), item.current)),
+				button(messages.nextPage, "›", !table.canNextPage, table.nextPage)
 			]);
 		};
 	}
@@ -206,22 +223,23 @@ const DataTablePageSize = defineComponent({
 		},
 		label: {
 			type: String,
-			default: "Rows per page"
+			default: void 0
 		}
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTablePageSize>");
+		const locale = useTableLocale();
 		return () => {
 			const sizes = props.options.includes(table.pageSize) ? props.options : [...props.options, table.pageSize].toSorted((left, right) => left - right);
 			return h("select", {
 				value: table.pageSize,
-				"aria-label": props.label,
+				"aria-label": props.label ?? locale().messages.rowsPerPage,
 				onChange: (event) => table.setPageSize(Number(event.target.value))
 			}, sizes.map((size) => h("option", {
 				key: size,
 				value: size,
 				selected: size === table.pageSize
-			}, String(size))));
+			}, locale().count(size).text)));
 		};
 	}
 });
@@ -233,11 +251,12 @@ const DataTableColumnVisibility = defineComponent({
 		as: asProp("fieldset"),
 		legend: {
 			type: String,
-			default: "Columns"
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableColumnVisibility>");
+		const locale = useTableLocale();
 		return () => {
 			const hidden = new Set(table.state.hiddenColumns);
 			const columns = table.allColumns.map((column) => ({
@@ -247,7 +266,7 @@ const DataTableColumnVisibility = defineComponent({
 			return h(props.as, slots.default?.({
 				columns,
 				toggle: table.toggleColumn
-			}) ?? [props.as === "fieldset" ? h("legend", props.legend) : null, ...columns.map(({ column, visible }) => h("label", {
+			}) ?? [props.as === "fieldset" ? h("legend", props.legend ?? locale().messages.columns) : null, ...columns.map(({ column, visible }) => h("label", {
 				key: column.id,
 				"data-column": column.id
 			}, [h("input", {
@@ -265,7 +284,9 @@ const DataTableStatus = defineComponent({
 	props: { as: asProp("p") },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableStatus>");
+		const locale = useTableLocale();
 		return () => {
+			const { messages, count } = locale();
 			const slotProps = {
 				start: table.pageStart,
 				end: table.pageEnd,
@@ -281,12 +302,23 @@ const DataTableStatus = defineComponent({
 				loadingChildrenCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "loading").length : 0,
 				childErrorCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "error").length : 0
 			};
-			const count = `Loaded ${table.loadedRowCount.toLocaleString()} ${table.loadedRowCount === 1 ? "row" : "rows"}`;
-			const text = table.loadingMode ? table.loadState === "error" ? `${count}. Could not load rows. Retry loading.` : table.loadState === "aborted" ? `${count}. Loading stopped.` : table.loadState === "loading" || table.loadState === "streaming" ? `${count}…` : `${count}${table.loadState === "done" ? ". All rows loaded." : "."}` : table.rowCount === 0 ? "No rows" : `${table.pageStart}–${table.pageEnd} of ${table.rowCount} rows` + (table.selectedCount > 0 ? `, ${table.selectedCount} selected` : "");
+			const text = table.loadingMode ? messages.loadedStatus({
+				loaded: count(table.loadedRowCount),
+				state: table.loadState
+			}) : table.rowCount === 0 ? messages.noRows : messages.rangeStatus({
+				start: count(table.pageStart),
+				end: count(table.pageEnd),
+				total: count(table.rowCount),
+				selected: count(table.selectedCount)
+			});
 			return h(props.as, {
 				role: "status",
 				"aria-live": "polite"
-			}, slots.default?.(slotProps) ?? text + (slotProps.loadingChildrenCount ? " Loading children…" : "") + (slotProps.childErrorCount ? " Could not load children. Retry children in the affected row." : ""));
+			}, slots.default?.(slotProps) ?? [
+				text,
+				slotProps.loadingChildrenCount ? messages.loadingChildren : "",
+				slotProps.childErrorCount ? messages.childrenError : ""
+			].filter((part) => part !== "").join(" "));
 		};
 	}
 });
@@ -294,7 +326,7 @@ const DataTableStatus = defineComponent({
 //#endregion
 //#region src/loading.ts
 /** Keep this visual sentinel out of the live region and logical data-row count. */
-function loadSentinel(table, colspan) {
+function loadSentinel(table, colspan, locale) {
 	return table.loadingMode === "cursor" && table.loadedRowCount > 0 && (table.loadState === "loading" || table.loadState === "streaming") ? h("tr", {
 		key: "vt-load-sentinel",
 		"data-load-sentinel": "",
@@ -302,7 +334,7 @@ function loadSentinel(table, colspan) {
 	}, [h("td", {
 		colspan: Math.max(1, colspan),
 		class: "vt-load-sentinel"
-	}, "Loading more rows…")]) : void 0;
+	}, locale?.messages.loadingMoreRows ?? "Loading more rows…")]) : void 0;
 }
 /** A keyboard-accessible alternative to automatic virtual-end loading, with error recovery. */
 const DataTableLoadMore = defineComponent({
@@ -310,29 +342,30 @@ const DataTableLoadMore = defineComponent({
 	props: {
 		label: {
 			type: String,
-			default: "Load more rows"
+			default: void 0
 		},
 		retryLabel: {
 			type: String,
-			default: "Retry loading"
+			default: void 0
 		},
 		loadingLabel: {
 			type: String,
-			default: "Loading rows…"
+			default: void 0
 		}
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTableLoadMore>");
+		const locale = useTableLocale();
 		return () => table.loadState === "error" ? h("button", {
 			type: "button",
 			onClick: () => table.retry()
-		}, props.retryLabel) : table.loadingMode === "cursor" && table.loadState !== "done" ? h("button", {
+		}, props.retryLabel ?? locale().messages.retryLoading) : table.loadingMode === "cursor" && table.loadState !== "done" ? h("button", {
 			type: "button",
 			disabled: !table.canLoadMore,
 			onClick: () => {
 				table.loadNext();
 			}
-		}, table.loadState === "loading" || table.loadState === "streaming" ? props.loadingLabel : props.label) : null;
+		}, table.loadState === "loading" || table.loadState === "streaming" ? props.loadingLabel ?? locale().messages.loadingRows : props.label ?? locale().messages.loadMoreRows) : null;
 	}
 });
 
@@ -375,6 +408,7 @@ const DataCellEditor = defineComponent({
 	name: "DataCellEditor",
 	props: cellEditorProps,
 	setup(props) {
+		const locale = useTableLocale();
 		const field = ref();
 		const query = ref("");
 		const options = props.spec.options ?? [];
@@ -418,9 +452,10 @@ const DataCellEditor = defineComponent({
 		};
 		return () => {
 			const { editor, spec } = props;
+			const { messages, count } = locale();
 			const attrs = {
 				...editor.attrs,
-				"aria-label": `Edit ${editor.column.header}`,
+				"aria-label": messages.editCell(editor.column.header),
 				"data-editor": "",
 				disabled: editor.pending,
 				onKeydown: keydown
@@ -437,7 +472,7 @@ const DataCellEditor = defineComponent({
 						ref: field,
 						type: "search",
 						value: query.value,
-						"aria-label": `Search ${editor.column.header} options`,
+						"aria-label": messages.searchOptions(editor.column.header),
 						disabled: editor.pending,
 						onInput: (event) => {
 							query.value = event.target.value;
@@ -460,11 +495,11 @@ const DataCellEditor = defineComponent({
 					}, shown.map(({ value, index }) => h("option", {
 						key: index,
 						value: index
-					}, String(value ?? "(empty)")))),
+					}, value === null || value === void 0 ? messages.emptyOption : String(value)))),
 					h("span", {
 						role: "status",
 						"data-editor-hint": ""
-					}, matches.value.length === 0 ? "No matching options. Change your search." : matches.value.length > 50 ? "Showing the first 50 matches. Refine your search." : `${matches.value.length} options`)
+					}, matches.value.length === 0 ? messages.noMatchingOptions : matches.value.length > 50 ? messages.firstMatchesOnly(count(50)) : messages.optionCount(count(matches.value.length)))
 				]);
 			}
 			return h("input", {
@@ -825,7 +860,14 @@ function treeKeydown(event, context, virtual) {
 	const index = table.rows.findIndex((row) => getRowItemKey(row.key) === key);
 	const row = table.rows[index];
 	if (!row) return;
-	const command = gridCommand(event, {
+	const command = gridCommand({
+		key: event.key,
+		shiftKey: event.shiftKey,
+		ctrlKey: event.ctrlKey,
+		metaKey: event.metaKey,
+		altKey: event.altKey,
+		direction: directionOf(target)
+	}, {
 		canExpand: row.canExpand,
 		expanded: row.isExpanded
 	});
@@ -853,11 +895,11 @@ const expandToggleProps = {
 	},
 	expandLabel: {
 		type: String,
-		default: "Expand row"
+		default: void 0
 	},
 	collapseLabel: {
 		type: String,
-		default: "Collapse row"
+		default: void 0
 	}
 };
 const treeCellProps = {
@@ -872,13 +914,15 @@ const DataTableExpandToggle = defineComponent({
 		const table = injectDataTable("<DataTableExpandToggle>");
 		const context = injectHierarchy();
 		const grid = injectDataGrid();
+		const locale = useTableLocale();
+		const label = () => props.row.isExpanded ? props.collapseLabel ?? locale().messages.collapseRow : props.expandLabel ?? locale().messages.expandRow;
 		return () => props.row.canExpand ? h("button", {
 			type: "button",
 			"data-expand-toggle": "",
 			tabindex: table.tree ? -1 : void 0,
 			"aria-expanded": String(props.row.isExpanded),
 			"aria-controls": props.controls ?? (!table.tree ? itemId(context, props.row, true) : props.row.isExpanded ? table.rows.filter((row) => row.parentKey === props.row.key).map((row) => itemId(context, row)).filter(Boolean).join(" ") || void 0 : void 0),
-			"aria-label": props.row.isExpanded ? props.collapseLabel : props.expandLabel,
+			"aria-label": label(),
 			onMousedown: (event) => event.stopPropagation(),
 			onDblclick: (event) => event.stopPropagation(),
 			onClick: (event) => {
@@ -893,7 +937,7 @@ const DataTableExpandToggle = defineComponent({
 		}, slots.default?.({
 			row: props.row,
 			expanded: props.row.isExpanded
-		}) ?? (props.row.isExpanded ? props.collapseLabel : props.expandLabel)) : null;
+		}) ?? label()) : null;
 	}
 });
 const DataTableTreeCell = defineComponent({
@@ -904,6 +948,7 @@ const DataTableTreeCell = defineComponent({
 		const table = injectDataTable("<DataTableTreeCell>");
 		const context = injectHierarchy();
 		const grid = injectDataGrid();
+		const locale = useTableLocale();
 		return () => h(props.as, {
 			class: "vt-tree-cell",
 			"data-tree-cell": "",
@@ -911,8 +956,8 @@ const DataTableTreeCell = defineComponent({
 		}, [
 			h("span", { class: "vt-tree-toggle" }, slots.toggle?.({ row: props.row }) ?? h(DataTableExpandToggle, { row: props.row })),
 			h("span", { class: "vt-tree-label" }, [slots.default?.()]),
-			props.row.childStatus === "loading" ? h("span", { class: "vt-tree-loading" }, "Loading children…") : null,
-			props.row.childStatus === "error" ? h("span", { class: "vt-tree-error" }, ["Could not load children. ", h("button", {
+			props.row.childStatus === "loading" ? h("span", { class: "vt-tree-loading" }, locale().messages.loadingChildren) : null,
+			props.row.childStatus === "error" ? h("span", { class: "vt-tree-error" }, [`${locale().messages.childrenError} `, h("button", {
 				type: "button",
 				class: "vt-tree-retry",
 				onMousedown: (event) => event.stopPropagation(),
@@ -929,7 +974,7 @@ const DataTableTreeCell = defineComponent({
 						else element?.ownerDocument.getElementById(itemId(context, props.row) ?? "")?.focus();
 					});
 				}
-			}, "Retry children")]) : null
+			}, locale().messages.retryChildren)]) : null
 		]);
 	}
 });
@@ -1155,13 +1200,14 @@ const DataTableSortButton = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSortButton>");
+		const locale = useTableLocale();
 		return () => {
 			const sort = table.getSort(props.column.id);
 			const next = !sort ? "ascending" : sort.direction === "asc" ? "descending" : "unsorted";
 			return h(props.as, {
 				type: props.as === "button" ? "button" : void 0,
 				"data-sort": sort?.direction,
-				"aria-label": `${props.column.header}, sort ${next}`,
+				"aria-label": locale().messages.sortBy(props.column.header, next),
 				onClick: (event) => table.toggleSort(props.column.id, { multi: event.shiftKey })
 			}, [slots.default?.({ sort }) ?? props.column.header, slots.indicator?.({ sort })]);
 		};
@@ -1184,6 +1230,7 @@ const DataTableBody = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableBody>");
+		const locale = useTableLocale();
 		const virtual = injectVirtual();
 		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
 		return () => {
@@ -1197,7 +1244,7 @@ const DataTableBody = defineComponent({
 			}) : details.render(item.row, item.rowIndex));
 			const visibleDetails = new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key));
 			const retained = slots.default ? [] : details.retained(visibleDetails);
-			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length);
+			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length, locale());
 			return h(props.as, [
 				...Array.isArray(content) ? content : content ? [content] : [],
 				...retained,
@@ -1593,6 +1640,7 @@ const DataTableRowActions = defineComponent({
 	},
 	setup(props) {
 		const table = injectDataTable("<DataTableRowActions>");
+		const locale = useTableLocale();
 		const context = inject(editingKey, void 0);
 		const id = useEditorId();
 		const element = shallowRef();
@@ -1601,31 +1649,33 @@ const DataTableRowActions = defineComponent({
 			if (previous && !active && !context?.draft && target?.closest("tr")?.contains(target.ownerDocument.activeElement)) nextTick(() => target.querySelector("button[data-edit-row]")?.focus());
 		});
 		return () => {
+			const { messages } = locale();
+			const rowName = String(props.row.key);
 			const draft = context?.draft?.rowKey === props.row.key ? context.draft : void 0;
 			const issues = [...new Map(draft?.issues.map((problem) => [problem.message, problem])).values()];
-			const button = (label, action, disabled = false) => h("button", {
+			const button = (label, action, disabled = false, role) => h("button", {
 				type: "button",
 				disabled,
-				"aria-label": `${label}, row ${String(props.row.key)}`,
-				"data-edit-row": label === "Edit row" ? "" : void 0,
-				...label === "Save row" ? issueAttrs(id, issues, !!draft?.pending) : {},
+				"aria-label": messages.actionOnRow(label, rowName),
+				"data-edit-row": role === "edit" ? "" : void 0,
+				...role === "save" ? issueAttrs(id, issues, !!draft?.pending) : {},
 				onClick: action
 			}, label);
 			return h("div", {
 				ref: element,
 				"data-row-actions": "",
 				role: "group",
-				"aria-label": `Row ${String(props.row.key)} actions`,
+				"aria-label": messages.rowActionsFor(rowName),
 				"aria-busy": draft?.pending ? "true" : void 0
 			}, [
-				...context?.mode === "row" && props.editable ? draft ? [button("Save row", () => context.save(), draft.pending), button("Cancel", () => context.cancel(props.row.key), draft.pending)] : [button("Edit row", () => context.start(props.row))] : [],
+				...context?.mode === "row" && props.editable ? draft ? [button(messages.saveRow, () => context.save(), draft.pending, "save"), button(messages.cancel, () => context.cancel(props.row.key), draft.pending)] : [button(messages.editRow, () => context.start(props.row), false, "edit")] : [],
 				h("details", { onToggle: (event) => {
 					const menu = event.currentTarget;
 					if (menu.open) nextTick(() => menu.scrollIntoView?.({
 						block: "nearest",
 						inline: "nearest"
 					}));
-				} }, [h("summary", { "aria-label": `Actions for row ${String(props.row.key)}` }, "Actions"), h("div", { "data-row-menu": "" }, [button("Revert row", () => table.revert([props.row.key]), !props.row.isDirty || !!draft), props.removable ? button("Remove row", () => table.removeRows([props.row.key]), !!draft) : null])]),
+				} }, [h("summary", { "aria-label": messages.actionsForRow(rowName) }, messages.actions), h("div", { "data-row-menu": "" }, [button(messages.revertRow, () => table.revert([props.row.key]), !props.row.isDirty || !!draft), props.removable ? button(messages.removeRow, () => table.removeRows([props.row.key]), !!draft) : null])]),
 				editorIssues(id, issues, !!draft?.pending)
 			]);
 		};
@@ -1739,7 +1789,14 @@ const DataGridRoot = defineComponent({
 				event.preventDefault();
 				return;
 			}
-			if (grid.handleKey(event)) event.preventDefault();
+			if (grid.handleKey({
+				key: event.key,
+				shiftKey: event.shiftKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				altKey: event.altKey,
+				direction: directionOf(event.currentTarget)
+			})) event.preventDefault();
 		};
 		const onCopy = (event, cut = false) => {
 			if (grid.editor || !grid.range || !event.clipboardData) return;