@vueye-table/vue 3.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brahim Boussadjra and vueye-table contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @vueye-table/vue
+
+Vue composables for the vueye-table engine. `useDataTable` binds a table to the current effect
+scope and exposes its snapshot as plain reactive properties beside named operations;
+`useDataGrid` adds spreadsheet selection, keyboard navigation, and in-cell editing.
+
+```bash
+pnpm add @vueye-table/vue vue
+```
+
+```ts
+import { useDataTable } from "@vueye-table/vue";
+
+const table = useDataTable({ data: () => props.users, columns });
+table.rows; // the current page, reactive
+table.nextPage();
+```
+
+See the [repository README](https://github.com/boussadjra/vueye-table#readme) for every layer.

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+import { CellPosition, CellRange, ColumnDef, DataTable, EditResult, GridBounds, GridDirection, GridKey, GridSelection, MoveOptions, TableColumn, TableOptions, TableRow, TableSnapshot, TableStatePatch } from "@vueye-table/core";
+//#region src/use-data-table.d.ts
+/** Options accepted by {@link useDataTable}. Data, columns, and state may be refs or getters. */
+interface UseDataTableOptions<TRow> extends Omit<TableOptions<TRow>, "data" | "columns" | "rowCount"> {
+  readonly data: MaybeRefOrGetter<readonly TRow[]>;
+  readonly columns: MaybeRefOrGetter<readonly ColumnDef<TRow>[]>;
+  readonly rowCount?: MaybeRefOrGetter<number | undefined> | undefined;
+  /**
+   * State owned by the caller, for example `v-model` props or URL query values. Whenever it
+   * changes it is applied with `setState`; the table's own changes still reach `onStateChange`.
+   */
+  readonly state?: MaybeRefOrGetter<TableStatePatch | undefined> | undefined;
+}
+type TableOperations<TRow> = Omit<DataTable<TRow>, "getSnapshot" | "getState" | "subscribe">;
+/**
+ * A reactive view of a table: every snapshot field is a plain reactive property, so templates read
+ * `table.rows` and `table.pageCount` directly, and every change goes through a named operation.
+ * Watching a field needs a getter: `watch(() => table.page, ...)`.
+ */
+type DataTableBinding<TRow> = TableSnapshot<TRow> & TableOperations<TRow> & {
+  /** The engine behind the binding. */
+  readonly table: DataTable<TRow>;
+  /** The current snapshot, replaced on every change. */
+  readonly snapshot: TableSnapshot<TRow>;
+};
+/**
+ * A binding for any row type, for components that accept every table. Row types make the binding
+ * invariant, so `DataTableBinding<unknown>` would refuse `DataTableBinding<Person>`.
+ */
+type AnyDataTableBinding = DataTableBinding<any>;
+/**
+ * Create a table bound to the current effect scope. The table follows its reactive data,
+ * columns, row count, and state, and stops listening when the scope ends.
+ */
+declare function useDataTable<TRow>(options: UseDataTableOptions<TRow>): DataTableBinding<TRow>;
+//#endregion
+//#region src/use-data-grid.d.ts
+/** The cell being edited and the text typed so far. */
+interface GridEditor {
+  readonly position: CellPosition;
+  readonly draft: string;
+}
+/**
+ * Spreadsheet interaction over a table: a selected range, keyboard navigation, in-cell editing,
+ * copy, paste, and clearing. Positions refer to the current page and the visible columns.
+ */
+interface DataGridBinding<TRow> {
+  readonly selection: GridSelection | undefined;
+  readonly range: CellRange | undefined;
+  readonly editor: GridEditor | undefined;
+  readonly bounds: ComputedRef<GridBounds>;
+  /** The latest edit outcome, to show a rejected value. */
+  readonly lastResult: EditResult<TRow> | undefined;
+  cellAt(position: CellPosition): {
+    row: TableRow<TRow>;
+    column: TableColumn<TRow>;
+  } | undefined;
+  isFocused(position: CellPosition): boolean;
+  isSelected(position: CellPosition): boolean;
+  isEditing(position: CellPosition): boolean;
+  focusCell(position: CellPosition, options?: {
+    readonly extend?: boolean | undefined;
+  }): void;
+  move(direction: GridDirection, options?: MoveOptions): void;
+  selectAll(): void;
+  /** Start editing the focused cell, with its current text or with `initial`. */
+  startEdit(initial?: string): boolean;
+  updateDraft(draft: string): void;
+  /** Write the draft through the table, then move the focus if asked. */
+  commitEdit(then?: GridDirection): EditResult<TRow> | undefined;
+  cancelEdit(): void;
+  /** The selected range as tab-separated text. */
+  copy(): string;
+  /** Paste tab-separated text at the top-left of the selection. */
+  paste(text: string): EditResult<TRow> | undefined;
+  clear(): EditResult<TRow> | undefined;
+  /** Handle a key press. Returns `true` when the grid used it, so the caller can prevent the default. */
+  handleKey(event: GridKey): boolean;
+}
+declare function useDataGrid<TRow>(table: DataTableBinding<TRow>): DataGridBinding<TRow>;
+//#endregion
+//#region src/injection.d.ts
+/** Make a table available to every component below the current one. */
+declare function provideDataTable<TRow>(table: DataTableBinding<TRow>): void;
+/**
+ * Read the table provided by an ancestor. Throws when there is none, naming the component that
+ * provides one, rather than rendering an empty table.
+ */
+declare function injectDataTable<TRow = unknown>(consumer?: string): DataTableBinding<TRow>;
+declare function provideDataGrid<TRow>(grid: DataGridBinding<TRow>): void;
+/** Read the grid provided by an ancestor, or `undefined` outside a grid. */
+declare function injectDataGrid<TRow = unknown>(): DataGridBinding<TRow> | undefined;
+//#endregion
+export { type AnyDataTableBinding, type DataGridBinding, type DataTableBinding, type GridEditor, type UseDataTableOptions, injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useDataTable };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/use-data-table.ts","../src/use-data-grid.ts","../src/injection.ts"],"mappings":";;;;UAmBiB,oBAAoB,cAAc,KACjD,aAAa;WAGJ,MAAM,0BAA0B;WAChC,SAAS,0BAA0B,UAAU;WAC7C,WAAW;;;;;WAKX,QAAQ,iBAAiB;;KAG/B,gBAAgB,QAAQ,KAAK,UAAU;;;;;;KAOhC,iBAAiB,QAAQ,cAAc,QACjD,gBAAgB;;WAEL,OAAO,UAAU;;WAEjB,UAAU,cAAc;;;;;;KAOzB,sBAAsB;;;;;iBA4ClB,aAAa,MAAM,SAAS,oBAAoB,QAAQ,iBAAiB;;;;UCzExE;WACN,UAAU;WACV;;;;;;UAOM,gBAAgB;WACtB,WAAW;WACX,OAAO;WACP,QAAQ;WACR,QAAQ,YAAY;;WAEpB,YAAY,WAAW;EAChC,OAAO,UAAU;IAAiB,KAAK,SAAS;IAAO,QAAQ,YAAY;;EAC3E,UAAU,UAAU;EACpB,WAAW,UAAU;EACrB,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc;aAAqB;;EACvD,KAAK,WAAW,eAAe,UAAU;EACzC;;EAEA,UAAU;EACV,YAAY;;EAEZ,WAAW,OAAO,gBAAgB,WAAW;EAC7C;;EAEA;;EAEA,MAAM,eAAe,WAAW;EAChC,SAAS,WAAW;;EAEpB,UAAU,OAAO;;iBAGH,YAAY,MAAM,OAAO,iBAAiB,QAAQ,gBAAgB;;;;iBCpDlE,iBAAiB,MAAM,OAAO,iBAAiB;;;;;iBAQ/C,gBAAgB,gBAC9B,oBACC,iBAAiB;iBAUJ,gBAAgB,MAAM,MAAM,gBAAgB;;iBAK5C,eAAe,mBAAmB,gBAAgB"}

package/dist/index.js

@@ -0,0 +1,277 @@
+import { computed, getCurrentScope, inject, onScopeDispose, provide, shallowRef, toRaw, toValue, watch } from "vue";
+import { clampPosition, createTable, gridCommand, moveSelection, rangeContains, selectCell, selectionRange } from "@vueye-table/core";
+
+//#region src/injection.ts
+const tableKey = Symbol("vueye-table");
+const gridKey = Symbol("vueye-table-grid");
+/** Make a table available to every component below the current one. */
+function provideDataTable(table) {
+	provide(tableKey, table);
+}
+/**
+* Read the table provided by an ancestor. Throws when there is none, naming the component that
+* provides one, rather than rendering an empty table.
+*/
+function injectDataTable(consumer = "This component") {
+	const table = inject(tableKey, void 0);
+	if (!table) throw new Error(`${consumer} needs a table. Render it inside <DataTableRoot :table="table">, or call provideDataTable(useDataTable(...)) in an ancestor.`);
+	return table;
+}
+function provideDataGrid(grid) {
+	provide(gridKey, grid);
+}
+/** Read the grid provided by an ancestor, or `undefined` outside a grid. */
+function injectDataGrid() {
+	return inject(gridKey, void 0);
+}
+
+//#endregion
+//#region src/use-data-grid.ts
+function useDataGrid(table) {
+	const selection = shallowRef();
+	const editor = shallowRef();
+	const lastResult = shallowRef();
+	const bounds = computed(() => ({
+		rows: table.rows.length,
+		columns: table.columns.length
+	}));
+	const range = computed(() => selection.value ? selectionRange(selection.value) : void 0);
+	const same = (left, right) => left !== void 0 && left.row === right.row && left.column === right.column;
+	watch(bounds, (next) => {
+		const current = selection.value;
+		if (current && (next.rows === 0 || next.columns === 0)) selection.value = void 0;
+		else if (current) {
+			const anchor = clampPosition(current.anchor, next);
+			const focus = clampPosition(current.focus, next);
+			if (!same(current.anchor, anchor) || !same(current.focus, focus)) selection.value = {
+				anchor,
+				focus
+			};
+		}
+		const position = editor.value?.position;
+		if (position && (position.row >= next.rows || position.column >= next.columns)) editor.value = void 0;
+	});
+	const cellAt = (position) => {
+		const row = table.rows[position.row];
+		const column = table.columns[position.column];
+		return row && column ? {
+			row,
+			column
+		} : void 0;
+	};
+	const ensureSelection = () => {
+		if (bounds.value.rows === 0 || bounds.value.columns === 0) return;
+		selection.value ??= selectCell({
+			row: 0,
+			column: 0
+		});
+		return selection.value;
+	};
+	const grid = {
+		get selection() {
+			return selection.value;
+		},
+		get range() {
+			return range.value;
+		},
+		get editor() {
+			return editor.value;
+		},
+		get lastResult() {
+			return lastResult.value;
+		},
+		bounds,
+		cellAt,
+		isFocused: (position) => same(selection.value?.focus, position),
+		isSelected: (position) => range.value ? rangeContains(range.value, position) : false,
+		isEditing: (position) => same(editor.value?.position, position),
+		focusCell(position, { extend = false } = {}) {
+			const target = clampPosition(position, bounds.value);
+			if (editor.value && !same(editor.value.position, target)) grid.commitEdit();
+			selection.value = extend && selection.value ? {
+				anchor: selection.value.anchor,
+				focus: target
+			} : selectCell(target);
+		},
+		move(direction, options) {
+			const current = ensureSelection();
+			if (current) selection.value = moveSelection(current, direction, bounds.value, options);
+		},
+		selectAll() {
+			if (bounds.value.rows > 0 && bounds.value.columns > 0) selection.value = {
+				anchor: {
+					row: 0,
+					column: 0
+				},
+				focus: {
+					row: bounds.value.rows - 1,
+					column: bounds.value.columns - 1
+				}
+			};
+		},
+		startEdit(initial) {
+			const focus = ensureSelection()?.focus;
+			const cell = focus ? cellAt(focus) : void 0;
+			if (!focus || !cell || !cell.column.isEditable(cell.row.original)) return false;
+			editor.value = {
+				position: focus,
+				draft: initial ?? cell.row.getDisplay(cell.column.id)
+			};
+			return true;
+		},
+		updateDraft(draft) {
+			if (editor.value) editor.value = {
+				position: editor.value.position,
+				draft
+			};
+		},
+		commitEdit(then) {
+			const current = editor.value;
+			if (!current) return;
+			const cell = cellAt(current.position);
+			editor.value = void 0;
+			if (!cell) return;
+			const result = table.edit({
+				rowKey: cell.row.key,
+				column: cell.column.id,
+				input: current.draft
+			});
+			lastResult.value = result;
+			if (then) grid.move(then);
+			return result;
+		},
+		cancelEdit() {
+			editor.value = void 0;
+		},
+		copy() {
+			return range.value ? table.copy(range.value) : "";
+		},
+		paste(text) {
+			if (!range.value) return;
+			const result = table.paste({
+				row: range.value.top,
+				column: range.value.left
+			}, text);
+			lastResult.value = result;
+			return result;
+		},
+		clear() {
+			if (!range.value) return;
+			const result = table.clear(range.value);
+			lastResult.value = result;
+			return result;
+		},
+		handleKey(event) {
+			if (editor.value) return false;
+			const command = gridCommand(event);
+			switch (command?.type) {
+				case "move":
+					grid.move(command.direction, command.options);
+					return true;
+				case "edit": return grid.startEdit(command.initial);
+				case "clear":
+					grid.clear();
+					return true;
+				case "selectAll":
+					grid.selectAll();
+					return true;
+				case "undo": return table.undo();
+				case "redo": return table.redo();
+				case "cancel":
+					if (selection.value) selection.value = selectCell(selection.value.focus);
+					return true;
+				default: return false;
+			}
+		}
+	};
+	return grid;
+}
+
+//#endregion
+//#region src/use-data-table.ts
+const OPERATIONS = [
+	"setState",
+	"setData",
+	"setColumns",
+	"setRowCount",
+	"toggleSort",
+	"sort",
+	"clearSorting",
+	"search",
+	"filter",
+	"clearFilters",
+	"goToPage",
+	"nextPage",
+	"previousPage",
+	"setPageSize",
+	"select",
+	"deselect",
+	"toggleRow",
+	"toggleAll",
+	"clearSelection",
+	"getSelectedRows",
+	"toggleColumn",
+	"moveColumn",
+	"edit",
+	"undo",
+	"redo",
+	"copy",
+	"paste",
+	"clear",
+	"exportRows",
+	"reset",
+	"destroy"
+];
+function definedEntries(patch) {
+	return Object.fromEntries(Object.entries(patch ?? {}).filter(([, value]) => value !== void 0));
+}
+/**
+* Create a table bound to the current effect scope. The table follows its reactive data,
+* columns, row count, and state, and stops listening when the scope ends.
+*/
+function useDataTable(options) {
+	const table = createTable({
+		...options,
+		data: toRaw(toValue(options.data)),
+		columns: toValue(options.columns),
+		rowCount: toValue(options.rowCount),
+		initialState: {
+			...options.initialState,
+			...definedEntries(toValue(options.state))
+		}
+	});
+	const snapshot = shallowRef(table.getSnapshot());
+	const unsubscribe = table.subscribe((next) => {
+		snapshot.value = next;
+	});
+	const stops = [
+		watch(() => toValue(options.data), (data) => table.setData(toRaw(data))),
+		watch(() => toValue(options.columns), (columns) => table.setColumns(columns)),
+		watch(() => toValue(options.rowCount), (rowCount) => {
+			if (rowCount !== void 0) table.setRowCount(rowCount);
+		}),
+		watch(() => toValue(options.state), (state) => {
+			if (state) table.setState(state);
+		}, { deep: true })
+	];
+	if (getCurrentScope()) onScopeDispose(() => {
+		for (const stop of stops) stop();
+		unsubscribe();
+		table.destroy();
+	});
+	const binding = { table };
+	Object.defineProperty(binding, "snapshot", {
+		enumerable: true,
+		get: () => snapshot.value
+	});
+	for (const key of Object.keys(snapshot.value)) Object.defineProperty(binding, key, {
+		enumerable: true,
+		get: () => snapshot.value[key]
+	});
+	for (const name of OPERATIONS) binding[name] = table[name];
+	return Object.freeze(binding);
+}
+
+//#endregion
+export { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useDataTable };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/injection.ts","../src/use-data-grid.ts","../src/use-data-table.ts"],"sourcesContent":["import { inject, provide, type InjectionKey } from \"vue\";\n\nimport type { DataGridBinding } from \"./use-data-grid\";\nimport type { DataTableBinding } from \"./use-data-table\";\n\nconst tableKey: InjectionKey<DataTableBinding<unknown>> = Symbol(\"vueye-table\");\nconst gridKey: InjectionKey<DataGridBinding<unknown>> = Symbol(\"vueye-table-grid\");\n\n/** Make a table available to every component below the current one. */\nexport function provideDataTable<TRow>(table: DataTableBinding<TRow>): void {\n  provide(tableKey, table as DataTableBinding<unknown>);\n}\n\n/**\n * Read the table provided by an ancestor. Throws when there is none, naming the component that\n * provides one, rather than rendering an empty table.\n */\nexport function injectDataTable<TRow = unknown>(\n  consumer = \"This component\",\n): DataTableBinding<TRow> {\n  const table = inject(tableKey, undefined);\n  if (!table) {\n    throw new Error(\n      `${consumer} needs a table. Render it inside <DataTableRoot :table=\"table\">, or call provideDataTable(useDataTable(...)) in an ancestor.`,\n    );\n  }\n  return table as DataTableBinding<TRow>;\n}\n\nexport function provideDataGrid<TRow>(grid: DataGridBinding<TRow>): void {\n  provide(gridKey, grid as DataGridBinding<unknown>);\n}\n\n/** Read the grid provided by an ancestor, or `undefined` outside a grid. */\nexport function injectDataGrid<TRow = unknown>(): DataGridBinding<TRow> | undefined {\n  return inject(gridKey, undefined) as DataGridBinding<TRow> | undefined;\n}\n","import {\n  clampPosition,\n  gridCommand,\n  moveSelection,\n  rangeContains,\n  selectCell,\n  selectionRange,\n  type CellPosition,\n  type CellRange,\n  type EditResult,\n  type GridBounds,\n  type GridDirection,\n  type GridKey,\n  type GridSelection,\n  type MoveOptions,\n  type TableColumn,\n  type TableRow,\n} from \"@vueye-table/core\";\nimport { computed, shallowRef, watch, type ComputedRef } from \"vue\";\n\nimport type { DataTableBinding } from \"./use-data-table\";\n\n/** The cell being edited and the text typed so far. */\nexport interface GridEditor {\n  readonly position: CellPosition;\n  readonly draft: string;\n}\n\n/**\n * Spreadsheet interaction over a table: a selected range, keyboard navigation, in-cell editing,\n * copy, paste, and clearing. Positions refer to the current page and the visible columns.\n */\nexport interface DataGridBinding<TRow> {\n  readonly selection: GridSelection | undefined;\n  readonly range: CellRange | undefined;\n  readonly editor: GridEditor | undefined;\n  readonly bounds: ComputedRef<GridBounds>;\n  /** The latest edit outcome, to show a rejected value. */\n  readonly lastResult: EditResult<TRow> | undefined;\n  cellAt(position: CellPosition): { row: TableRow<TRow>; column: TableColumn<TRow> } | undefined;\n  isFocused(position: CellPosition): boolean;\n  isSelected(position: CellPosition): boolean;\n  isEditing(position: CellPosition): boolean;\n  focusCell(position: CellPosition, options?: { readonly extend?: boolean | undefined }): void;\n  move(direction: GridDirection, options?: MoveOptions): void;\n  selectAll(): void;\n  /** Start editing the focused cell, with its current text or with `initial`. */\n  startEdit(initial?: string): boolean;\n  updateDraft(draft: string): void;\n  /** Write the draft through the table, then move the focus if asked. */\n  commitEdit(then?: GridDirection): EditResult<TRow> | undefined;\n  cancelEdit(): void;\n  /** The selected range as tab-separated text. */\n  copy(): string;\n  /** Paste tab-separated text at the top-left of the selection. */\n  paste(text: string): EditResult<TRow> | undefined;\n  clear(): EditResult<TRow> | undefined;\n  /** Handle a key press. Returns `true` when the grid used it, so the caller can prevent the default. */\n  handleKey(event: GridKey): boolean;\n}\n\nexport function useDataGrid<TRow>(table: DataTableBinding<TRow>): DataGridBinding<TRow> {\n  const selection = shallowRef<GridSelection | undefined>();\n  const editor = shallowRef<GridEditor | undefined>();\n  const lastResult = shallowRef<EditResult<TRow> | undefined>();\n  const bounds = computed<GridBounds>(() => ({\n    rows: table.rows.length,\n    columns: table.columns.length,\n  }));\n  const range = computed(() => (selection.value ? selectionRange(selection.value) : undefined));\n\n  const same = (left: CellPosition | undefined, right: CellPosition): boolean =>\n    left !== undefined && left.row === right.row && left.column === right.column;\n\n  // Searching, filtering, paging, or hiding a column can shrink the grid under the selection.\n  // Keep the selection on cells that exist, and drop an edit whose cell is gone.\n  watch(bounds, (next) => {\n    const current = selection.value;\n    if (current && (next.rows === 0 || next.columns === 0)) {\n      selection.value = undefined;\n    } else if (current) {\n      const anchor = clampPosition(current.anchor, next);\n      const focus = clampPosition(current.focus, next);\n      if (!same(current.anchor, anchor) || !same(current.focus, focus)) {\n        selection.value = { anchor, focus };\n      }\n    }\n    const position = editor.value?.position;\n    if (position && (position.row >= next.rows || position.column >= next.columns)) {\n      editor.value = undefined;\n    }\n  });\n\n  const cellAt: DataGridBinding<TRow>[\"cellAt\"] = (position) => {\n    const row = table.rows[position.row];\n    const column = table.columns[position.column];\n    return row && column ? { row, column } : undefined;\n  };\n\n  const ensureSelection = (): GridSelection | undefined => {\n    if (bounds.value.rows === 0 || bounds.value.columns === 0) {\n      return undefined;\n    }\n    selection.value ??= selectCell({ row: 0, column: 0 });\n    return selection.value;\n  };\n\n  const grid: DataGridBinding<TRow> = {\n    get selection() {\n      return selection.value;\n    },\n    get range() {\n      return range.value;\n    },\n    get editor() {\n      return editor.value;\n    },\n    get lastResult() {\n      return lastResult.value;\n    },\n    bounds,\n    cellAt,\n    isFocused: (position) => same(selection.value?.focus, position),\n    isSelected: (position) => (range.value ? rangeContains(range.value, position) : false),\n    isEditing: (position) => same(editor.value?.position, position),\n    focusCell(position, { extend = false } = {}) {\n      const target = clampPosition(position, bounds.value);\n      if (editor.value && !same(editor.value.position, target)) {\n        grid.commitEdit();\n      }\n      selection.value =\n        extend && selection.value\n          ? { anchor: selection.value.anchor, focus: target }\n          : selectCell(target);\n    },\n    move(direction, options) {\n      const current = ensureSelection();\n      if (current) {\n        selection.value = moveSelection(current, direction, bounds.value, options);\n      }\n    },\n    selectAll() {\n      if (bounds.value.rows > 0 && bounds.value.columns > 0) {\n        selection.value = {\n          anchor: { row: 0, column: 0 },\n          focus: { row: bounds.value.rows - 1, column: bounds.value.columns - 1 },\n        };\n      }\n    },\n    startEdit(initial) {\n      const focus = ensureSelection()?.focus;\n      const cell = focus ? cellAt(focus) : undefined;\n      if (!focus || !cell || !cell.column.isEditable(cell.row.original)) {\n        return false;\n      }\n      editor.value = { position: focus, draft: initial ?? cell.row.getDisplay(cell.column.id) };\n      return true;\n    },\n    updateDraft(draft) {\n      if (editor.value) {\n        editor.value = { position: editor.value.position, draft };\n      }\n    },\n    commitEdit(then) {\n      const current = editor.value;\n      if (!current) {\n        return undefined;\n      }\n      const cell = cellAt(current.position);\n      editor.value = undefined;\n      if (!cell) {\n        return undefined;\n      }\n      const result = table.edit({\n        rowKey: cell.row.key,\n        column: cell.column.id,\n        input: current.draft,\n      });\n      lastResult.value = result;\n      if (then) {\n        grid.move(then);\n      }\n      return result;\n    },\n    cancelEdit() {\n      editor.value = undefined;\n    },\n    copy() {\n      return range.value ? table.copy(range.value) : \"\";\n    },\n    paste(text) {\n      if (!range.value) {\n        return undefined;\n      }\n      const result = table.paste({ row: range.value.top, column: range.value.left }, text);\n      lastResult.value = result;\n      return result;\n    },\n    clear() {\n      if (!range.value) {\n        return undefined;\n      }\n      const result = table.clear(range.value);\n      lastResult.value = result;\n      return result;\n    },\n    handleKey(event) {\n      if (editor.value) {\n        return false;\n      }\n      const command = gridCommand(event);\n      switch (command?.type) {\n        case \"move\":\n          grid.move(command.direction, command.options);\n          return true;\n        case \"edit\":\n          return grid.startEdit(command.initial);\n        case \"clear\":\n          grid.clear();\n          return true;\n        case \"selectAll\":\n          grid.selectAll();\n          return true;\n        case \"undo\":\n          return table.undo();\n        case \"redo\":\n          return table.redo();\n        case \"cancel\":\n          if (selection.value) {\n            selection.value = selectCell(selection.value.focus);\n          }\n          return true;\n        default:\n          return false;\n      }\n    },\n  };\n  return grid;\n}\n","import {\n  createTable,\n  type ColumnDef,\n  type DataTable,\n  type TableOptions,\n  type TableSnapshot,\n  type TableStatePatch,\n} from \"@vueye-table/core\";\nimport {\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  toRaw,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n} from \"vue\";\n\n/** Options accepted by {@link useDataTable}. Data, columns, and state may be refs or getters. */\nexport interface UseDataTableOptions<TRow> extends Omit<\n  TableOptions<TRow>,\n  \"data\" | \"columns\" | \"rowCount\"\n> {\n  readonly data: MaybeRefOrGetter<readonly TRow[]>;\n  readonly columns: MaybeRefOrGetter<readonly ColumnDef<TRow>[]>;\n  readonly rowCount?: MaybeRefOrGetter<number | undefined> | undefined;\n  /**\n   * State owned by the caller, for example `v-model` props or URL query values. Whenever it\n   * changes it is applied with `setState`; the table's own changes still reach `onStateChange`.\n   */\n  readonly state?: MaybeRefOrGetter<TableStatePatch | undefined> | undefined;\n}\n\ntype TableOperations<TRow> = Omit<DataTable<TRow>, \"getSnapshot\" | \"getState\" | \"subscribe\">;\n\n/**\n * A reactive view of a table: every snapshot field is a plain reactive property, so templates read\n * `table.rows` and `table.pageCount` directly, and every change goes through a named operation.\n * Watching a field needs a getter: `watch(() => table.page, ...)`.\n */\nexport type DataTableBinding<TRow> = TableSnapshot<TRow> &\n  TableOperations<TRow> & {\n    /** The engine behind the binding. */\n    readonly table: DataTable<TRow>;\n    /** The current snapshot, replaced on every change. */\n    readonly snapshot: TableSnapshot<TRow>;\n  };\n\n/**\n * A binding for any row type, for components that accept every table. Row types make the binding\n * invariant, so `DataTableBinding<unknown>` would refuse `DataTableBinding<Person>`.\n */\nexport type AnyDataTableBinding = DataTableBinding<any>;\n\nconst OPERATIONS = [\n  \"setState\",\n  \"setData\",\n  \"setColumns\",\n  \"setRowCount\",\n  \"toggleSort\",\n  \"sort\",\n  \"clearSorting\",\n  \"search\",\n  \"filter\",\n  \"clearFilters\",\n  \"goToPage\",\n  \"nextPage\",\n  \"previousPage\",\n  \"setPageSize\",\n  \"select\",\n  \"deselect\",\n  \"toggleRow\",\n  \"toggleAll\",\n  \"clearSelection\",\n  \"getSelectedRows\",\n  \"toggleColumn\",\n  \"moveColumn\",\n  \"edit\",\n  \"undo\",\n  \"redo\",\n  \"copy\",\n  \"paste\",\n  \"clear\",\n  \"exportRows\",\n  \"reset\",\n  \"destroy\",\n] as const satisfies readonly (keyof TableOperations<unknown>)[];\n\nfunction definedEntries(patch: TableStatePatch | undefined): TableStatePatch {\n  return Object.fromEntries(Object.entries(patch ?? {}).filter(([, value]) => value !== undefined));\n}\n\n/**\n * Create a table bound to the current effect scope. The table follows its reactive data,\n * columns, row count, and state, and stops listening when the scope ends.\n */\nexport function useDataTable<TRow>(options: UseDataTableOptions<TRow>): DataTableBinding<TRow> {\n  const table = createTable<TRow>({\n    ...options,\n    data: toRaw(toValue(options.data)),\n    columns: toValue(options.columns),\n    rowCount: toValue(options.rowCount),\n    initialState: { ...options.initialState, ...definedEntries(toValue(options.state)) },\n  });\n  const snapshot = shallowRef(table.getSnapshot());\n  const unsubscribe = table.subscribe((next) => {\n    snapshot.value = next;\n  });\n\n  const stops = [\n    watch(\n      () => toValue(options.data),\n      // Reactive arrays arrive as proxies; the engine works on, and compares, the raw array.\n      (data) => table.setData(toRaw(data)),\n    ),\n    watch(\n      () => toValue(options.columns),\n      (columns) => table.setColumns(columns),\n    ),\n    watch(\n      () => toValue(options.rowCount),\n      (rowCount) => {\n        if (rowCount !== undefined) {\n          table.setRowCount(rowCount);\n        }\n      },\n    ),\n    watch(\n      () => toValue(options.state),\n      (state) => {\n        if (state) {\n          table.setState(state);\n        }\n      },\n      { deep: true },\n    ),\n  ];\n\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      for (const stop of stops) {\n        stop();\n      }\n      unsubscribe();\n      table.destroy();\n    });\n  }\n\n  const binding = { table } as Record<string, unknown>;\n  Object.defineProperty(binding, \"snapshot\", { enumerable: true, get: () => snapshot.value });\n  for (const key of Object.keys(snapshot.value)) {\n    Object.defineProperty(binding, key, {\n      enumerable: true,\n      get: () => snapshot.value[key as keyof TableSnapshot<TRow>],\n    });\n  }\n  for (const name of OPERATIONS) {\n    binding[name] = table[name];\n  }\n  return Object.freeze(binding) as unknown as DataTableBinding<TRow>;\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@vueye-table/vue",
+  "version": "3.0.0-alpha.1",
+  "description": "Vue composables that bind the vueye-table engine to reactive state.",
+  "keywords": [
+    "composables",
+    "data-table",
+    "datagrid",
+    "spreadsheet",
+    "vue"
+  ],
+  "homepage": "https://github.com/boussadjra/vueye-table#readme",
+  "bugs": {
+    "url": "https://github.com/boussadjra/vueye-table/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boussadjra/vueye-table.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@vueye-table/core": "3.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "vue": "3.5.43",
+    "@vueye-table/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.5.0 <4"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc -p tsconfig.json",
+    "package:check": "publint --strict && attw --pack . --profile esm-only",
+    "clean": "node ../../scripts/clean-package.mjs"
+  }
+}