@octane-xplat/table 0.0.1 → 0.10.0

package/dist/native/GridControls.tsrx.js

@@ -0,0 +1,424 @@
+import { moveColumn } from "./grid-layout.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+import { CheckboxInput, HStack, Pressable, Text, TextInput, View } from "@octane-xplat/ui";
+//#region src/GridControls.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan10 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan11 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan12 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		}
+	]
+});
+var __octaneUniversalPlan13 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Action = defineUniversalComponent("nativescript", function Action(props) {
+	return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			"vx-datagrid-action"
+		],
+		[
+			"set",
+			"disabled",
+			props.disabled
+		],
+		[
+			"set",
+			"onPress",
+			props.onPress
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			props.label
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Text, universalProps([], props.label))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var GridControls = defineUniversalComponent("nativescript", function GridControls(props) {
+	const [settingsOpen, setSettingsOpen] = useState(false, _h$0);
+	props.state;
+	const table = props.table;
+	const columns = table.getAllLeafColumns();
+	const order = columns.map((column) => column.id);
+	const move = (id, index) => table.setColumnOrder(moveColumn(order, id, order[index]));
+	return universalValue(__octaneUniversalPlan10, [universalComponent("nativescript", View, universalProps([], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan9, [universalComponent("nativescript", HStack, universalProps([[
+			"set",
+			"className",
+			"vx-datagrid-controls"
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan4, [props.search ? universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", TextInput, universalProps([
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-search` : void 0
+				],
+				[
+					"set",
+					"className",
+					"flex-1"
+				],
+				[
+					"set",
+					"value",
+					String(props.state.globalFilter ?? "")
+				],
+				[
+					"set",
+					"placeholder",
+					"Filter rows"
+				],
+				[
+					"set",
+					"accessibilityLabel",
+					"Filter rows"
+				],
+				[
+					"set",
+					"onChange",
+					(value) => {
+						table.setGlobalFilter(value);
+						table.setPageIndex(0);
+					}
+				]
+			]))]) : null, props.settings ? universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Action, universalProps([
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-settings` : void 0
+				],
+				[
+					"set",
+					"label",
+					"Columns"
+				],
+				[
+					"set",
+					"onPress",
+					() => setSettingsOpen(!settingsOpen)
+				]
+			]))]) : null]);
+		}))), props.settings && settingsOpen ? universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", View, universalProps([[
+			"set",
+			"className",
+			"vx-datagrid-settings"
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan7, [columns.map((column, index) => universalValue(__octaneUniversalPlan6, [universalComponent("nativescript", HStack, universalProps([[
+				"set",
+				"key",
+				column.id
+			], [
+				"set",
+				"className",
+				"vx-datagrid-controls"
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan5, [
+					universalComponent("nativescript", CheckboxInput, universalProps([
+						[
+							"set",
+							"id",
+							props.id ? `${props.id}-visible-${column.id}` : void 0
+						],
+						[
+							"set",
+							"checked",
+							column.getIsVisible()
+						],
+						[
+							"set",
+							"isDisabled",
+							!column.getCanHide()
+						],
+						[
+							"set",
+							"label",
+							typeof column.columnDef.header === "string" ? column.columnDef.header : column.id
+						],
+						[
+							"set",
+							"accessibilityLabel",
+							`Show ${column.id}`
+						],
+						[
+							"set",
+							"onCheckedChange",
+							(checked) => column.toggleVisibility(checked)
+						]
+					])),
+					universalComponent("nativescript", Action, universalProps([
+						[
+							"set",
+							"id",
+							props.id ? `${props.id}-earlier-${column.id}` : void 0
+						],
+						[
+							"set",
+							"label",
+							`Move ${column.id} earlier`
+						],
+						[
+							"set",
+							"disabled",
+							index === 0
+						],
+						[
+							"set",
+							"onPress",
+							() => move(column.id, index - 1)
+						]
+					])),
+					universalComponent("nativescript", Action, universalProps([
+						[
+							"set",
+							"id",
+							props.id ? `${props.id}-later-${column.id}` : void 0
+						],
+						[
+							"set",
+							"label",
+							`Move ${column.id} later`
+						],
+						[
+							"set",
+							"disabled",
+							index === columns.length - 1
+						],
+						[
+							"set",
+							"onPress",
+							() => move(column.id, index + 1)
+						]
+					]))
+				]);
+			})))])), universalComponent("nativescript", Action, universalProps([
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-reset-columns` : void 0
+				],
+				[
+					"set",
+					"label",
+					"Reset columns"
+				],
+				[
+					"set",
+					"onPress",
+					() => {
+						table.resetColumnVisibility();
+						table.resetColumnOrder();
+						table.resetColumnSizing();
+					}
+				]
+			]))]);
+		})))]) : null]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var GridPagination = defineUniversalComponent("nativescript", function GridPagination(props) {
+	props.state;
+	const table = props.table;
+	const { pageIndex, pageSize } = props.state.pagination;
+	const count = table.getPageCount();
+	const sizes = [...new Set((props.sizes ?? [
+		10,
+		25,
+		50
+	]).filter((size) => Number.isInteger(size) && size > 0))];
+	return universalValue(__octaneUniversalPlan13, [universalComponent("nativescript", HStack, universalProps([[
+		"set",
+		"className",
+		"vx-datagrid-controls"
+	], [
+		"set",
+		"accessibilityLabel",
+		"Pagination"
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan12, [
+			universalComponent("nativescript", Action, universalProps([
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-previous` : void 0
+				],
+				[
+					"set",
+					"label",
+					"Previous page"
+				],
+				[
+					"set",
+					"disabled",
+					!table.getCanPreviousPage()
+				],
+				[
+					"set",
+					"onPress",
+					() => table.previousPage()
+				]
+			])),
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"id",
+				props.id ? `${props.id}-page` : void 0
+			]], count < 0 ? `Page ${pageIndex + 1}` : `Page ${count === 0 ? 0 : pageIndex + 1} of ${count}`)),
+			universalComponent("nativescript", Action, universalProps([
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-next` : void 0
+				],
+				[
+					"set",
+					"label",
+					"Next page"
+				],
+				[
+					"set",
+					"disabled",
+					!table.getCanNextPage()
+				],
+				[
+					"set",
+					"onPress",
+					() => table.nextPage()
+				]
+			])),
+			sizes.map((size) => universalValue(__octaneUniversalPlan11, [universalComponent("nativescript", Action, universalProps([
+				[
+					"set",
+					"key",
+					size
+				],
+				[
+					"set",
+					"id",
+					props.id ? `${props.id}-size-${size}` : void 0
+				],
+				[
+					"set",
+					"label",
+					`${size} per page`
+				],
+				[
+					"set",
+					"disabled",
+					pageSize === size
+				],
+				[
+					"set",
+					"onPress",
+					() => {
+						table.setPageSize(size);
+						table.setPageIndex(0);
+					}
+				]
+			]))]))
+		]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { GridControls, GridPagination };

package/dist/native/grid-accessibility.js

@@ -0,0 +1,12 @@
+//#region src/grid-accessibility.ts
+/** Positions describe the final flat row model, before VirtualList windowing.
+* Header rows count toward ARIA indices, but not the spoken data-row ordinal. */
+function gridRowPosition(index, pagination, headerRows, rowCount) {
+	const ordinal = pagination.pageIndex * pagination.pageSize + index + 1;
+	return {
+		ariaIndex: headerRows + ordinal,
+		label: rowCount < 0 ? `Row ${ordinal}` : `Row ${ordinal} of ${rowCount}`
+	};
+}
+//#endregion
+export { gridRowPosition };

package/dist/native/grid-layout.js

@@ -0,0 +1,43 @@
+//#region src/grid-layout.ts
+/** Resolve the displayed width without changing flexible legacy columns. */
+function columnStyle(column, fixed, sizing) {
+	return fixed || column.columnDef.size != null || sizing[column.id] != null ? {
+		width: column.getSize(),
+		flexGrow: 0,
+		flexShrink: 0
+	} : {
+		flexGrow: 1,
+		flexShrink: 1
+	};
+}
+/** Move a column within the complete order, preserving hidden columns. */
+function moveColumn(order, source, target) {
+	const from = order.indexOf(source);
+	const to = order.indexOf(target);
+	if (from < 0 || to < 0 || from === to) return order;
+	const next = [...order];
+	next.splice(from, 1);
+	next.splice(to, 0, source);
+	return next;
+}
+/** Find the visible column whose midpoint a horizontal drag has crossed. */
+function dragTarget(columns, id, dx) {
+	const from = columns.findIndex((column) => column.id === id);
+	if (from < 0 || !Number.isFinite(dx)) return id;
+	let distance = columns[from].getSize() / 2;
+	let target = id;
+	const direction = dx < 0 ? -1 : 1;
+	for (let i = from + direction; i >= 0 && i < columns.length; i += direction) {
+		distance += columns[i].getSize() / 2;
+		if (Math.abs(dx) < distance) break;
+		target = columns[i].id;
+		distance += columns[i].getSize() / 2;
+	}
+	return target;
+}
+/** Clamp interactive widths to the column's configured bounds. */
+function resizedWidth(column, width) {
+	return Math.max(column.columnDef.minSize ?? 20, Math.min(column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, width));
+}
+//#endregion
+export { columnStyle, dragTarget, moveColumn, resizedWidth };

package/dist/native/index.js

@@ -0,0 +1,4 @@
+import { createTable, dataGridFeatures } from "./table.js";
+import { useTable } from "./useTable.tsrx.js";
+import { DataGrid } from "./DataGrid.tsrx.js";
+export { DataGrid, createTable, dataGridFeatures, useTable };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "8af481a2-70fa-40e2-acb7-fbfa8a109b36",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/native/table.js

@@ -0,0 +1,56 @@
+import { aggregationFns, columnFacetingFeature, columnFilteringFeature, columnGroupingFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, constructTable, createExpandedRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, filterFns, globalFilteringFeature, rowAggregationFeature, rowExpandingFeature, rowPaginationFeature, rowPinningFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from "@tanstack/table-core";
+import { storeReactivityBindings } from "@tanstack/table-core/store-reactivity-bindings";
+//#region src/table.ts
+/** DataGrid's default feature slots: every stock feature whose machinery is
+*  DOM-free — sorting, filtering, grouping, expanding, pagination, pinning,
+*  selection, column ordering/visibility/sizing, faceting, global filtering,
+*  aggregation — plus the row-model factories and builtin fn registries that
+*  v9 keeps as separate slots. Omitted: `columnResizingFeature` (its drag
+*  handler installs global event listeners — web-only; resize gesture UI
+*  belongs to platform leaves) and `cellSelectionFeature`/`cellSpanningFeature`
+*  (range-selection UX is web-spreadsheet-shaped, not a v1 xplat idiom). Pass
+*  `features` to add them where a platform leaf supports them. */
+var dataGridFeatures = tableFeatures({
+	columnFacetingFeature,
+	columnFilteringFeature,
+	columnGroupingFeature,
+	columnOrderingFeature,
+	columnPinningFeature,
+	columnSizingFeature,
+	columnVisibilityFeature,
+	globalFilteringFeature,
+	rowAggregationFeature,
+	rowExpandingFeature,
+	rowPaginationFeature,
+	rowPinningFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	sortedRowModel: createSortedRowModel(),
+	filteredRowModel: createFilteredRowModel(),
+	groupedRowModel: createGroupedRowModel(),
+	expandedRowModel: createExpandedRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	facetedRowModel: createFacetedRowModel(),
+	facetedMinMaxValues: createFacetedMinMaxValues(),
+	facetedUniqueValues: createFacetedUniqueValues(),
+	sortFns,
+	filterFns,
+	aggregationFns
+});
+/** Construct a table instance bound to TanStack Store reactivity — the
+*  vanilla/non-framework binding (`table.optionsStore` subscribable, atoms
+*  from `@tanstack/store`, `queueMicrotask` scheduling — all DOM-free). Wrap
+*  with `useTable` inside a component; call directly for non-rendering
+*  consumers (tests, headless row models). */
+function createTable(options) {
+	return constructTable({
+		...options,
+		features: {
+			coreReactivityFeature: storeReactivityBindings(),
+			...dataGridFeatures,
+			...options.features
+		}
+	});
+}
+//#endregion
+export { createTable, dataGridFeatures };

package/dist/native/useTable.tsrx.js

@@ -0,0 +1,24 @@
+import { createTable } from "./table.js";
+import { hookSlots, useCallback, useState, useSyncExternalStore } from "@nativescript-community/octane";
+//#region src/useTable.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+function useTable(options) {
+	const [{ table }] = useState(() => ({ table: createTable(options) }), _h$0);
+	table.setOptions((prev) => ({
+		...prev,
+		...options
+	}));
+	const subscribe = useCallback((notify) => {
+		const sub = table.store.subscribe(() => notify());
+		return () => sub.unsubscribe();
+	}, [table], _h$1);
+	return {
+		table,
+		state: useSyncExternalStore(subscribe, () => table.store.get(), _h$2)
+	};
+}
+//#endregion
+export { useTable };

package/dist/web/ColumnDrag.tsrx.js

@@ -0,0 +1,85 @@
+import { dragTarget, moveColumn, resizedWidth } from "./grid-layout.js";
+import { Fragment, createScopedElement, createScopedValue, hookSlots, positionalChildren, useRef } from "octane";
+import { createElementFromConfig } from "octane/internal/client";
+import { HStack, Pressable, Text, View } from "@octane-xplat/ui";
+//#region src/ColumnDrag.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function ColumnDrag(props) {
+	props.state;
+	const drag = useRef(null, _h$0);
+	const begin = () => {
+		drag.current = {
+			size: props.column.getSize(),
+			sizing: { ...props.table.store.get().columnSizing },
+			order: props.table.getAllLeafColumns().map((column) => column.id),
+			columns: props.table.getVisibleLeafColumns().map((column) => {
+				const size = column.getSize();
+				return {
+					id: column.id,
+					getSize: () => size
+				};
+			})
+		};
+	};
+	const onPan = (event, resize) => {
+		if (event.state === "began") {
+			begin();
+			return;
+		}
+		const start = drag.current;
+		if (!start) return;
+		if (event.state === "cancelled") {
+			if (resize) props.table.setColumnSizing((old) => {
+				const next = { ...old };
+				if (start.sizing[props.column.id] == null) delete next[props.column.id];
+				else next[props.column.id] = start.sizing[props.column.id];
+				return next;
+			});
+			drag.current = null;
+			return;
+		}
+		const dx = event.dx * (props.direction === "rtl" ? -1 : 1);
+		if (resize && Number.isFinite(dx)) props.table.setColumnSizing((old) => ({
+			...old,
+			[props.column.id]: resizedWidth(props.column, start.size + dx)
+		}));
+		if (event.state === "ended") {
+			if (!resize) {
+				const target = dragTarget(start.columns, props.column.id, dx);
+				props.table.setColumnOrder(moveColumn(start.order, props.column.id, target));
+			}
+			drag.current = null;
+		}
+	};
+	const adjust = (delta) => props.table.setColumnSizing((old) => ({
+		...old,
+		[props.column.id]: resizedWidth(props.column, props.column.getSize() + delta)
+	}));
+	return createScopedElement(HStack, { className: "vx-datagrid-handles" }, () => positionalChildren([props.reorder ? createScopedValue(() => createScopedElement(View, {
+		id: props.id ? `${props.id}-drag` : void 0,
+		className: "vx-datagrid-handle",
+		onPan: (event) => onPan(event, false),
+		accessibilityLabel: `Drag ${props.column.id} to reorder`
+	}, () => createElementFromConfig("c:d5e6d01e", Text, {}, ["↔"]), "c:9da8188a")) : null, props.resize ? createScopedElement(Fragment, {}, () => positionalChildren([
+		createScopedValue(() => createScopedElement(Pressable, {
+			id: props.id ? `${props.id}-narrow` : void 0,
+			className: "vx-datagrid-handle",
+			onPress: () => adjust(-10),
+			accessibilityLabel: `Narrow ${props.column.id}`
+		}, () => createElementFromConfig("c:376fb3c0", Text, {}, ["−"]), "c:f1407fa0")),
+		createScopedValue(() => createScopedElement(View, {
+			id: props.id ? `${props.id}-resize` : void 0,
+			className: "vx-datagrid-handle",
+			onPan: (event) => onPan(event, true),
+			accessibilityLabel: `Drag to resize ${props.column.id}`
+		}, () => createElementFromConfig("c:a915504c", Text, {}, ["│"]), "c:0441cf15")),
+		createScopedValue(() => createScopedElement(Pressable, {
+			id: props.id ? `${props.id}-widen` : void 0,
+			className: "vx-datagrid-handle",
+			onPress: () => adjust(10),
+			accessibilityLabel: `Widen ${props.column.id}`
+		}, () => createElementFromConfig("c:0b4f279f", Text, {}, ["+"]), "c:862eb88c"))
+	])) : null]), "c:1fd84f18");
+}
+//#endregion
+export { ColumnDrag };