@vuetify/v0 0.1.3 → 0.1.4

package/dist/createDataTable-BJnmvxfb.mjs

@@ -0,0 +1,387 @@
+import { l as isNullOrUndefined, p as isString, u as isNumber } from "./utilities-BqS1sC1W.mjs";
+import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-EeHQSsb6.mjs";
+import { t as createGroup } from "./createGroup-CPhp6FUh.mjs";
+import { a as useLocale } from "./useLocale-DlbShzF-.mjs";
+import { t as ClientAdapter } from "./v0-BogbIzpM.mjs";
+import { computed, shallowReactive, shallowRef, toRef, watch } from "vue";
+
+//#region src/composables/createDataTable/index.ts
+/**
+* @module createDataTable
+*
+* @remarks
+* Composable data table that composes existing v0 primitives rather than
+* reimplementing their logic. Uses createGroup's tri-state for sort direction
+* and delegates the data pipeline (filter, sort, paginate) to an adapter.
+*
+* Key features:
+* - Adapter pattern for pipeline strategy (client, server, virtual)
+* - Sort via createGroup tri-state: selected=asc, mixed=desc, unselected=none
+* - Selection strategies: single, page, all
+* - Per-column custom sort/filter functions
+* - Row selectability control via itemSelectable
+* - Sort options: mandate, firstSortOrder
+* - Row selection via lightweight Set (not registry-based)
+* - Trinity pattern for dependency injection
+*/
+/**
+* Creates a data table instance with sort controls, selection, and an
+* adapter-driven data pipeline.
+*
+* Must be called inside a component `setup()` or a Vue effect scope.
+* Calling at module scope in SSR environments causes request state leakage.
+*
+* @param options Data table options
+* @returns Data table context with pipeline stages and controls
+*
+* @example
+* ```ts
+* import { createDataTable } from '@vuetify/v0'
+*
+* const table = createDataTable({
+*   items: users,
+*   columns: [
+*     { key: 'name', title: 'Name', sortable: true, filterable: true },
+*     { key: 'email', title: 'Email', sortable: true, filterable: true },
+*     { key: 'age', title: 'Age', sortable: true },
+*   ],
+* })
+*
+* // Search
+* table.search('john')
+*
+* // Sort
+* table.sort.toggle('name')          // asc
+* table.sort.toggle('name')          // desc
+* table.sort.toggle('name')          // none
+* console.log(table.sort.columns.value) // [{ key: 'name', direction: 'asc' }]
+*
+* // Paginate
+* table.pagination.next()
+*
+* // Select rows
+* table.selection.toggle('user-1')
+* ```
+*/
+function createDataTable(options) {
+	const { items: _items, columns, itemValue = "id", filter: filterOptions = {}, pagination: paginationOptions = {}, sortMultiple = false, mandate = false, firstSortOrder = "asc", selectStrategy = "page", itemSelectable, groupBy, enroll = false, expandMultiple = true, locale: initialLocale, adapter = new ClientAdapter() } = options;
+	const _query = shallowRef("");
+	function search(value) {
+		_query.value = value;
+	}
+	const { selectedId: selectedLocale } = useLocale();
+	const locale = toRef(() => {
+		const selected = selectedLocale?.value;
+		if (!/* @__PURE__ */ isNullOrUndefined(selected)) return String(selected);
+		return initialLocale;
+	});
+	const sortable = columns.filter((col) => col.sortable === true);
+	const group = createGroup({ multiple: sortMultiple });
+	group.onboard(sortable.map((col) => ({
+		id: col.key,
+		value: col.key
+	})));
+	const order = shallowReactive([]);
+	function toggle(key) {
+		if (!group.has(key)) return;
+		const isAsc = group.selectedIds.has(key);
+		const isDesc = group.mixed(key);
+		function clearOthers() {
+			if (!sortMultiple) {
+				group.mixedIds.clear();
+				order.length = 0;
+			}
+		}
+		function setAsc() {
+			group.unmix(key);
+			group.select(key);
+		}
+		function setDesc() {
+			group.unselect(key);
+			group.mix(key);
+		}
+		function setNone() {
+			group.unselect(key);
+			group.unmix(key);
+			const idx = order.indexOf(key);
+			if (idx !== -1) order.splice(idx, 1);
+		}
+		if (!isAsc && !isDesc) {
+			clearOthers();
+			if (firstSortOrder === "desc") setDesc();
+			else setAsc();
+			order.push(key);
+		} else if (isAsc) if (firstSortOrder === "desc" && !mandate) setNone();
+		else setDesc();
+		else if (firstSortOrder === "asc" && !mandate) setNone();
+		else setAsc();
+	}
+	const sortBy = computed(() => {
+		const result = [];
+		for (const key of order) if (group.selectedIds.has(key)) result.push({
+			key,
+			direction: "asc"
+		});
+		else if (group.mixed(key)) result.push({
+			key,
+			direction: "desc"
+		});
+		return result;
+	});
+	function direction(key) {
+		if (group.selectedIds.has(key)) return "asc";
+		if (group.mixed(key)) return "desc";
+		return "none";
+	}
+	function priority(key) {
+		return order.indexOf(key);
+	}
+	function reset() {
+		group.unselectAll();
+		group.mixedIds.clear();
+		order.length = 0;
+	}
+	const sort = {
+		toggle,
+		columns: sortBy,
+		order,
+		direction,
+		priority,
+		reset
+	};
+	const filterable = columns.filter((col) => col.filterable === true).map((col) => col.key);
+	const customSorts = {};
+	for (const col of columns) if (col.sort) customSorts[col.key] = col.sort;
+	const customColumnFilters = {};
+	for (const col of columns) if (col.filter) customColumnFilters[col.key] = col.filter;
+	const { allItems, filteredItems, sortedItems, items: visible, pagination, total, loading = toRef(() => false), error = toRef(() => null) } = adapter.setup({
+		items: _items,
+		search: _query,
+		filterableKeys: filterable,
+		sortBy,
+		locale,
+		filterOptions,
+		paginationOptions,
+		customSorts,
+		customColumnFilters
+	});
+	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
+	function rowId(item) {
+		const value = item[itemValue];
+		if (/* @__PURE__ */ isString(value) || /* @__PURE__ */ isNumber(value)) return value;
+		throw new Error(`[v0:data-table] itemValue "${itemValue}" must resolve to a string or number`);
+	}
+	const selectableIds = computed(() => {
+		if (!itemSelectable) return null;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of allItems.value) if (item[itemSelectable]) ids.add(rowId(item));
+		return ids;
+	});
+	function isSelectable(id) {
+		return !selectableIds.value || selectableIds.value.has(id);
+	}
+	const scopeItems = toRef(() => {
+		if (selectStrategy === "single") return [];
+		return selectStrategy === "all" ? sortedItems.value : visible.value;
+	});
+	const selectableScope = computed(() => {
+		if (!itemSelectable) return scopeItems.value;
+		return scopeItems.value.filter((item) => !!item[itemSelectable]);
+	});
+	const selection = {
+		selectedIds,
+		select(id) {
+			if (!isSelectable(id)) return;
+			if (selectStrategy === "single") selectedIds.clear();
+			selectedIds.add(id);
+		},
+		unselect(id) {
+			selectedIds.delete(id);
+		},
+		toggle(id) {
+			if (selectedIds.has(id)) selectedIds.delete(id);
+			else selection.select(id);
+		},
+		isSelected(id) {
+			return selectedIds.has(id);
+		},
+		isSelectable,
+		selectAll() {
+			for (const item of selectableScope.value) selectedIds.add(rowId(item));
+		},
+		unselectAll() {
+			selectedIds.clear();
+		},
+		toggleAll() {
+			if (selectStrategy === "single") return;
+			if (selection.isAllSelected.value) for (const item of selectableScope.value) selectedIds.delete(rowId(item));
+			else selection.selectAll();
+		},
+		isAllSelected: computed(() => {
+			const items = selectableScope.value;
+			if (items.length === 0) return false;
+			return items.every((item) => selectedIds.has(rowId(item)));
+		}),
+		isMixed: computed(() => {
+			const items = selectableScope.value;
+			if (items.length === 0) return false;
+			return items.some((item) => selectedIds.has(rowId(item))) && !selection.isAllSelected.value;
+		})
+	};
+	const expandedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const expansion = {
+		expandedIds,
+		expand(id) {
+			if (!expandMultiple) expandedIds.clear();
+			expandedIds.add(id);
+		},
+		collapse(id) {
+			expandedIds.delete(id);
+		},
+		toggle(id) {
+			if (expandedIds.has(id)) expandedIds.delete(id);
+			else expansion.expand(id);
+		},
+		isExpanded(id) {
+			return expandedIds.has(id);
+		},
+		expandAll() {
+			if (!expandMultiple) return;
+			for (const item of visible.value) expandedIds.add(rowId(item));
+		},
+		collapseAll() {
+			expandedIds.clear();
+		}
+	};
+	const openGroupKeys = shallowReactive(/* @__PURE__ */ new Set());
+	const groups = computed(() => {
+		if (!groupBy) return [];
+		const map = /* @__PURE__ */ new Map();
+		for (const item of sortedItems.value) {
+			const raw = item[groupBy];
+			const key = String(raw ?? "");
+			let entry = map.get(key);
+			if (!entry) {
+				entry = {
+					value: raw,
+					items: []
+				};
+				map.set(key, entry);
+			}
+			entry.items.push(item);
+		}
+		const result = [];
+		for (const [key, entry] of map) result.push({
+			key,
+			value: entry.value,
+			items: entry.items
+		});
+		return result;
+	});
+	if (enroll) {
+		for (const group$1 of groups.value) openGroupKeys.add(group$1.key);
+		if (groups.value.length === 0) {
+			const stop = watch(groups, (newGroups) => {
+				if (newGroups.length === 0) return;
+				for (const group$1 of newGroups) openGroupKeys.add(group$1.key);
+				stop();
+			});
+		}
+	}
+	return {
+		items: visible,
+		allItems,
+		filteredItems,
+		sortedItems,
+		columns,
+		search,
+		query: _query,
+		sort,
+		pagination,
+		selection,
+		expansion,
+		grouping: {
+			groups,
+			toggle(groupKey) {
+				if (openGroupKeys.has(groupKey)) openGroupKeys.delete(groupKey);
+				else openGroupKeys.add(groupKey);
+			},
+			isOpen(groupKey) {
+				return openGroupKeys.has(groupKey);
+			},
+			open(groupKey) {
+				openGroupKeys.add(groupKey);
+			},
+			close(groupKey) {
+				openGroupKeys.delete(groupKey);
+			},
+			openAll() {
+				for (const group$1 of groups.value) openGroupKeys.add(group$1.key);
+			},
+			closeAll() {
+				openGroupKeys.clear();
+			}
+		},
+		total,
+		loading,
+		error
+	};
+}
+/**
+* Creates a data table context with dependency injection support.
+*
+* @param options Data table context options including namespace
+* @returns A trinity tuple: [useDataTable, provideDataTable, defaultContext]
+*
+* @example
+* ```ts
+* import { createDataTableContext } from '@vuetify/v0'
+*
+* const [useDataTable, provideDataTable, context] = createDataTableContext({
+*   namespace: 'app:users',
+*   items: users,
+*   columns: [
+*     { key: 'name', title: 'Name', sortable: true },
+*   ],
+* })
+*
+* // Parent component
+* provideDataTable()
+*
+* // Child component
+* const table = useDataTable()
+* ```
+*/
+function createDataTableContext(_options) {
+	const { namespace = "v0:data-table", ...options } = _options;
+	const [useDataTableContext, _provideDataTableContext] = createContext(namespace);
+	const context = createDataTable(options);
+	function provideDataTableContext(_context = context, app) {
+		return _provideDataTableContext(_context, app);
+	}
+	return createTrinity(useDataTableContext, provideDataTableContext, context);
+}
+/**
+* Returns the current data table context from dependency injection.
+*
+* @typeParam T - Must be provided explicitly; cannot be inferred from namespace.
+*   Prefer the `useX` function from {@link createDataTableContext} for type-safe injection.
+*
+* @param namespace The namespace for the data table context. @default 'v0:data-table'
+* @returns The current data table context
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useDataTable } from '@vuetify/v0'
+*
+*   const table = useDataTable<User>()
+* <\/script>
+* ```
+*/
+function useDataTable(namespace = "v0:data-table") {
+	return useContext(namespace);
+}
+
+//#endregion
+export { createDataTableContext as n, useDataTable as r, createDataTable as t };