@hybridly/vue 0.10.0-beta.26 → 0.10.0-beta.28

package/dist/index.d.mts

@@ -34,10 +34,8 @@ declare const Deferred: vue.DefineComponent<vue.ExtractPropTypes<{
 type Errors$1<T extends SearchableObject$1> = { [K in keyof T]?: T[K] extends Record<string, any> ? Errors$1<T[K]> : string };
 type FormFieldBehavior$1 = boolean | string[];
 type DefaultFormOptions = Pick<FormOptions<object>, 'timeout' | 'resetOnSuccess' | 'resetOnError' | 'setDefaultOnSuccess' | 'progress' | 'preserveScroll' | 'preserveState' | 'preserveUrl' | 'headers' | 'errorBag' | 'spoof' | 'transformUrl' | 'updateHistoryState' | 'useFormData'>;
-interface FormOptions<T extends SearchableObject$1> extends Omit<HybridRequestOptions, 'data' | 'url' | 'reset'> {
-  fields: T;
+type FormSubmitOptions$1<T extends SearchableObject$1> = Omit<HybridRequestOptions, 'data' | 'url' | 'reset'> & {
   url?: UrlResolvable | (() => UrlResolvable);
-  key?: string | false;
   /**
    * Defines the delay after which the `recentlySuccessful` and `recentlyFailed` variables are reset to `false`.
    */
@@ -61,6 +59,27 @@ interface FormOptions<T extends SearchableObject$1> extends Omit<HybridRequestOp
    * Callback executed before the form submission for transforming the fields.
    */
   transform?: (fields: T) => any;
+};
+type FormAutomaticallySubmitOptions<T extends SearchableObject$1> = true | (FormSubmitOptions$1<T> & {
+  /**
+   * Debounce delay in milliseconds before submitting automatically.
+   * @default 100
+   */
+  debounce?: number;
+  /**
+   * Whether to immediately submit the form on any change. If `false`, submits after the `debounce` delay.
+   * @default true
+   */
+  immediate?: boolean;
+});
+interface FormOptions<T extends SearchableObject$1> extends FormSubmitOptions$1<T> {
+  fields: T;
+  key?: string | false;
+  /**
+   * Automatically submits the form when fields change.
+   * Pass `true` to use defaults or an object to customize submit overrides and debounce delay.
+   */
+  automaticallySubmit?: FormAutomaticallySubmitOptions<T>;
 }
 interface FormReturn<T extends SearchableObject$1, P extends Path$1<T> & string = Path$1<T> & string> {
   resetFields: (...keys: P[]) => void;
@@ -74,7 +93,7 @@ interface FormReturn<T extends SearchableObject$1, P extends Path$1<T> & string
   clearError: (key: P) => void;
   setDefault: (newDefault: Partial<T>) => void;
   hasDirty: (...keys: P[]) => boolean;
-  submit: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<any>;
+  submit: (optionsOverrides?: FormSubmitOptions$1<T>) => Promise<any>;
   hasErrors: boolean;
   defaults: DeepReadonly<T>;
   loaded: DeepReadonly<T>;
@@ -292,7 +311,7 @@ declare const WhenVisible: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
   onLoading?: ((_state: LoadStateSlotProps) => any) | undefined;
 }>, {
-  options: Omit<HybridRequestOptions, "method" | "url" | "data">;
+  options: Omit<HybridRequestOptions<Record<string, any>>, "data" | "method" | "url">;
   as: string;
   buffer: number;
   root: string | Element | null;
@@ -325,6 +344,14 @@ interface BulkSelection<T = any> {
   /** Excluded records. */
   except: Set<T>;
 }
+/**
+ * Returns the inclusive range between two records in the given order.
+ *
+ * This is useful for implementing shift-click bulk selection: keep track of the last selected anchor,
+ * then pass the currently visible record identifiers and the clicked target identifier to this helper.
+ * If the target is not in the list, an empty range is returned. If the anchor is missing, only the target is returned.
+ */
+declare function getBulkSelectionRange<T>(records: readonly T[], anchor: T | undefined, target: T): T[];
 declare function useBulkSelect<T = any>(): {
   allSelected: vue.ComputedRef<boolean>;
   anySelected: vue.ComputedRef<boolean>;
@@ -1052,12 +1079,13 @@ declare const registerHook: typeof registerHook$1;
 //#region src/composables/table.d.ts
 interface Table<T extends Record<string, any> = any, PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = 'length-aware'> {
   id: string;
-  keyName: string;
+  keyName: keyof T | null;
   scope?: string;
   columns: Column<T>[];
   inlineActions: InlineAction[];
   bulkActions: BulkAction[];
   records: Array<T>;
+  cells: TableCellRow<T>[];
   paginator: Omit<PaginatorKind extends 'cursor' ? CursorPaginator<T> : (PaginatorKind extends 'simple' ? SimplePaginator<T> : Paginator<T>), 'data'>;
   refinements: Refinements;
   endpoint: string;
@@ -1072,6 +1100,14 @@ interface Column<T extends object = never> {
   /** Metadata of this column. */
   metadata: Record<string, any>;
 }
+interface TableCell<T extends object = never> {
+  value: any;
+  extra: Record<string, any>;
+}
+interface TableCellRow<T extends object = never> {
+  key: RecordIdentifier | null;
+  columns: Partial<Record<keyof T | string, TableCell<T>>>;
+}
 interface Action {
   /** The name of this action. */
   name: string;
@@ -1094,10 +1130,6 @@ interface BulkActionOptions extends Omit<HybridRequestOptions, 'url'> {
 }
 interface InlineAction extends Action {}
 type RecordIdentifier = string | number;
-type AsRecordTypeWithExtra<T extends Record<string, any>> = { [K in keyof T]: {
-  extra: Record<string, any>;
-  value: T[K];
-} };
 interface TableDefaultOptions extends AvailableHybridRequestOptions {
   /**
    * Whether to include existing query parameters in the request.
@@ -1113,15 +1145,15 @@ type UseTableNavigationResponse = Promise<_hybridly_core0.NavigationResponse | u
 type ExtractRefValue<T> = T extends {
   value: infer Value;
 } ? Value : T;
-interface UseTableInlineActionItem<RecordType extends Record<string, any>, RecordTypeWithExtra extends Record<string, any>> extends InlineAction {
+interface UseTableInlineActionItem<RecordType extends Record<string, any>> extends InlineAction {
   /** Executes the action. */
-  execute: (record: RecordTypeWithExtra | RecordIdentifier | RecordType) => UseTableNavigationResponse;
+  execute: (record: RecordIdentifier | RecordType) => UseTableNavigationResponse;
 }
 interface UseTableBulkActionItem extends BulkAction {
   /** Executes the action. */
   execute: (options?: BulkActionOptions) => UseTableNavigationResponse;
 }
-interface UseTableColumn<RecordTypeWithExtra extends Record<string, any>> extends Column<RecordTypeWithExtra> {
+interface UseTableColumn<RecordType extends Record<string, any>> extends Column<RecordType> {
   /** Toggles sorting for this column. */
   toggleSort: (options?: ToggleSortOptions) => UseTableNavigationResponse;
   /** Checks whether the column is being sorted. */
@@ -1135,11 +1167,15 @@ interface UseTableColumn<RecordTypeWithExtra extends Record<string, any>> extend
   /** Checks whether the column is filterable. */
   isFilterable: boolean;
 }
-interface UseTableRecordItem<RecordType extends Record<string, any>, RecordTypeWithExtra extends Record<string, any>> {
+interface UseTableRecordItem<RecordType extends Record<string, any>> {
   /** The actual record. */
   record: RecordType;
-  /** The key of the record. Use this instead of `id`. */
+  /** Local key of the record. Use this as a rendering key. */
   key: RecordIdentifier;
+  /** Server-side key of the record, if any. */
+  recordKey: RecordIdentifier | undefined;
+  /** Whether this record has a server-side key. */
+  hasKey: boolean;
   /** Executes the given inline action. */
   execute: (action: string | InlineAction) => UseTableNavigationResponse;
   /** Gets the available inline actions. */
@@ -1155,11 +1191,11 @@ interface UseTableRecordItem<RecordType extends Record<string, any>, RecordTypeW
   /** Checks whether this record is selected. */
   selected: boolean;
   /** Gets the value of the record for the specified column. */
-  value: (column: string | Column<RecordTypeWithExtra>) => any;
+  value: (column: string | Column<RecordType>) => any;
   /** Gets the extra object of the record for the specified column. */
-  extra: (column: string | Column<RecordTypeWithExtra>, path: string) => any;
+  extra: (column: string | Column<RecordType>, path: string) => any;
 }
-interface UseTableReturn<T extends Table<any, any>, RecordType extends Record<string, any> = (T extends Table<infer R, any> ? R : any), PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = (T extends Table<any, infer P> ? P : 'length-aware'), RecordTypeWithExtra extends Record<string, any> = AsRecordTypeWithExtra<RecordType>> extends Omit<UseRefinements, 'filters' | 'sorts' | 'filtersKey' | 'sortsKey'> {
+interface UseTableReturn<T extends Table<any, any>, RecordType extends Record<string, any> = (T extends Table<infer R, any> ? R : any), PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = (T extends Table<any, infer P> ? P : 'length-aware')> extends Omit<UseRefinements, 'filters' | 'sorts' | 'filtersKey' | 'sortsKey'> {
   /** Selects all records. */
   selectAll: () => void;
   /** Deselects all records. */
@@ -1171,7 +1207,7 @@ interface UseTableReturn<T extends Table<any, any>, RecordType extends Record<st
   /** Whether all records on the current page are selected. */
   isPageSelected: boolean;
   /** Checks if the given record is selected. */
-  isSelected: (record: RecordTypeWithExtra | RecordType) => boolean;
+  isSelected: (record: RecordType) => boolean;
   /** Whether all records are selected. */
   allSelected: boolean;
   /** Whether any records are selected. */
@@ -1185,33 +1221,33 @@ interface UseTableReturn<T extends Table<any, any>, RecordType extends Record<st
     value: RecordIdentifier;
   };
   /** Toggles selection for the given record. */
-  toggle: (record: RecordTypeWithExtra | RecordType, force?: boolean) => void;
+  toggle: (record: RecordType, force?: boolean) => void;
   /** Toggles selection for all records. */
   toggleAll: (force?: boolean) => void;
   /** Selects selection for the given record. */
-  select: (record: RecordTypeWithExtra | RecordType) => void;
+  select: (record: RecordType) => void;
   /** Deselects selection for the given record. */
-  deselect: (record: RecordTypeWithExtra | RecordType) => void;
+  deselect: (record: RecordType) => void;
   /** List of inline actions for this table. */
-  inlineActions: Array<UseTableInlineActionItem<RecordType, RecordTypeWithExtra>>;
+  inlineActions: Array<UseTableInlineActionItem<RecordType>>;
   /** List of bulk actions for this table. */
   bulkActions: Array<UseTableBulkActionItem>;
   /** Executes the given inline action for the given record. */
   executeInlineAction: (action: InlineAction | string, options: {
-    record: RecordTypeWithExtra | RecordIdentifier | RecordType;
+    record: RecordIdentifier | RecordType;
   } & Omit<HybridRequestOptions, 'url'>) => UseTableNavigationResponse;
   /** Executes the given bulk action. */
   executeBulkAction: (action: BulkAction | string, options?: Omit<HybridRequestOptions, 'url'> & {
     deselect?: boolean;
   }) => UseTableNavigationResponse;
   /** List of columns for this table. */
-  columns: Array<UseTableColumn<RecordTypeWithExtra>>;
+  columns: Array<UseTableColumn<RecordType>>;
   /** List of records for this table. */
   data: RecordType[];
   /** List of records for this table. */
-  records: Array<UseTableRecordItem<RecordType, RecordTypeWithExtra>>;
+  records: Array<UseTableRecordItem<RecordType>>;
   /** Paginated meta and links. */
-  paginator: PaginatorResult<RecordTypeWithExtra, Table<RecordTypeWithExtra, PaginatorKind>['paginator']>;
+  paginator: PaginatorResult<RecordType, Table<RecordType, PaginatorKind>['paginator']>;
   /** Available filters. */
   filters: ExtractRefValue<UseRefinements['filters']>;
   /** Available sorts. */
@@ -1224,7 +1260,7 @@ interface UseTableReturn<T extends Table<any, any>, RecordType extends Record<st
 /**
  * Provides utilities for working with tables.
  */
-declare function useTable<T extends Table<any, any>, RecordType extends Record<string, any> = (T extends Table<infer R, any> ? R : any), PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = (T extends Table<any, infer P> ? P : 'length-aware'), RecordTypeWithExtra extends Record<string, any> = AsRecordTypeWithExtra<RecordType>>(input: MaybeRefOrGetter<T>, defaultOptions?: TableDefaultOptions): UseTableReturn<T, RecordType, PaginatorKind, RecordTypeWithExtra>;
+declare function useTable<T extends Table<any, any>, RecordType extends Record<string, any> = (T extends Table<infer R, any> ? R : any), PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = (T extends Table<any, infer P> ? P : 'length-aware')>(input: MaybeRefOrGetter<T>, defaultOptions?: TableDefaultOptions): UseTableReturn<T, RecordType, PaginatorKind>;
 //#endregion
 //#region src/composables/validation.d.ts
 /** Accesses all validation errors grouped by bag name. */
@@ -1322,4 +1358,4 @@ interface SetupArguments {
   payload: Record<string, any>;
 }
 //#endregion
-export { Action, AvailableHybridRequestOptions, AvailableHybridRequestOptionsForFilters, BaseFilterRefinement, BindFilterOptions, BooleanFilterRefinement, BoundBooleanFilterRefinement, BoundCallbackFilterRefinement, BoundDateFilterRefinement, BoundFilterRefinement, BoundSelectFilterRefinement, BoundSortRefinement, BoundTernaryFilterRefinement, BoundTextFilterRefinement, BoundTrashedFilterRefinement, BulkAction, BulkSelection, CallbackFilterRefinement, Column, DateFilterRefinement, DefaultFormOptions, Deferred, FilterOperator, FilterRefinement, Form, type FormProps, FormReturn, type FormSlotProps, type FormSubmitOptions, type InitializeOptions, InlineAction, InternalProperties, MaybeWithData, NumericFilterRefinement, PaginatorResult, RecordIdentifier, Refinements, RouterLink, SelectFilterRefinement, SortDirection, SortRefinement, Table, TableDefaultOptions, TernaryFilterRefinement, TextFilterRefinement, TimeSuggestion, TimeframeSuggestion, ToggleSortOptions, TrashedFilterRefinement, UseRefinements, UseTableBulkActionItem, UseTableColumn, UseTableInlineActionItem, UseTableRecordItem, UseTableReturn, WhenVisible, createPaginator, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable, useValidation, useValidationBag };
+export { Action, AvailableHybridRequestOptions, AvailableHybridRequestOptionsForFilters, BaseFilterRefinement, BindFilterOptions, BooleanFilterRefinement, BoundBooleanFilterRefinement, BoundCallbackFilterRefinement, BoundDateFilterRefinement, BoundFilterRefinement, BoundSelectFilterRefinement, BoundSortRefinement, BoundTernaryFilterRefinement, BoundTextFilterRefinement, BoundTrashedFilterRefinement, BulkAction, BulkSelection, CallbackFilterRefinement, Column, DateFilterRefinement, DefaultFormOptions, Deferred, FilterOperator, FilterRefinement, Form, type FormProps, FormReturn, type FormSlotProps, type FormSubmitOptions, type InitializeOptions, InlineAction, InternalProperties, MaybeWithData, NumericFilterRefinement, PaginatorResult, RecordIdentifier, Refinements, RouterLink, SelectFilterRefinement, SortDirection, SortRefinement, Table, TableCell, TableCellRow, TableDefaultOptions, TernaryFilterRefinement, TextFilterRefinement, TimeSuggestion, TimeframeSuggestion, ToggleSortOptions, TrashedFilterRefinement, UseRefinements, UseTableBulkActionItem, UseTableColumn, UseTableInlineActionItem, UseTableRecordItem, UseTableReturn, WhenVisible, createPaginator, getBulkSelectionRange, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable, useValidation, useValidationBag };

package/dist/index.mjs

@@ -3,11 +3,11 @@ import { debug, merge, random, showViewComponentErrorModal, wrap } from "@hybrid
 import { computed, createApp, defineComponent, getCurrentInstance, h, isRef, nextTick, onMounted, onUnmounted, reactive, readonly, ref, shallowRef, toRaw, toValue, triggerRef, unref, watch } from "vue";
 import { createRouter, definePlugin, makeUrl, parseQueryString, registerHook as registerHook$1, route, route as route$1, router, router as router$1, stringifyQueryString } from "@hybridly/core";
 import { get, set, unset } from "es-toolkit/compat";
+import { debounce } from "es-toolkit/function";
 import { clone, cloneDeep } from "es-toolkit/object";
 import { isEqual } from "es-toolkit/predicate";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 import nprogress from "nprogress";
-import { debounce } from "es-toolkit/function";
 import { getByPath } from "@clickbar/dot-diver";
 //#region src/stores/state.ts
 const state = {
@@ -216,7 +216,7 @@ function useForm(options) {
 	* Submits the form.
 	*/
 	function submit(optionsOverrides) {
-		const { fields: _f, key: _k, ...optionsWithoutFields } = options;
+		const { fields: _f, key: _k, automaticallySubmit: _as, ...optionsWithoutFields } = options;
 		const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
 		const { timeout, resetOnSuccess, resetOnError, setDefaultOnSuccess, transform, ...requestOptions } = merge(formStore.getDefaultConfig(), resolvedOptions, { mergePlainObjects: true });
 		const url = typeof requestOptions.url === "function" ? requestOptions.url() : requestOptions.url;
@@ -274,6 +274,23 @@ function useForm(options) {
 			}
 		});
 	}
+	if (options.automaticallySubmit) {
+		const submitOptions = options.automaticallySubmit === true ? void 0 : (() => {
+			const { debounce: _debounce, ...submitOptions } = options.automaticallySubmit;
+			return submitOptions;
+		})();
+		const automaticallySubmitOptions = options.automaticallySubmit === true ? {
+			debounce: 100,
+			immediate: true
+		} : options.automaticallySubmit;
+		watch(() => fields, debounce(() => {
+			if (!isDirty.value) return;
+			submit(submitOptions);
+		}, automaticallySubmitOptions.debounce ?? 100), {
+			deep: true,
+			immediate: automaticallySubmitOptions.immediate ?? true
+		});
+	}
 	/**
 	* Clears all errors.
 	*/
@@ -1263,6 +1280,9 @@ async function initializeHybridly(options = {}) {
 			onContextUpdate: (context) => {
 				state.setContext(context);
 			},
+			onPropertiesUpdate: (properties) => {
+				state.setProperties(properties);
+			},
 			onViewSwap: async (options) => {
 				if (options.component) {
 					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: false }));
@@ -1373,6 +1393,21 @@ function useBackForward(options) {
 }
 //#endregion
 //#region src/composables/bulk-select.ts
+/**
+* Returns the inclusive range between two records in the given order.
+*
+* This is useful for implementing shift-click bulk selection: keep track of the last selected anchor,
+* then pass the currently visible record identifiers and the clicked target identifier to this helper.
+* If the target is not in the list, an empty range is returned. If the anchor is missing, only the target is returned.
+*/
+function getBulkSelectionRange(records, anchor, target) {
+	const targetIndex = records.indexOf(target);
+	if (targetIndex === -1) return [];
+	if (anchor === void 0) return [target];
+	const anchorIndex = records.indexOf(anchor);
+	if (anchorIndex === -1) return [target];
+	return records.slice(Math.min(anchorIndex, targetIndex), Math.max(anchorIndex, targetIndex) + 1);
+}
 function useBulkSelect() {
 	const selection = ref({
 		all: false,
@@ -1921,11 +1956,24 @@ function useTable(input, defaultOptions = {}) {
 	*/
 	function getRecordKey(record) {
 		if (typeof record !== "object") return record;
-		if (Reflect.has(record, "__hybridId")) return Reflect.get(record, "__hybridId");
-		if (!table.value.keyName) throw new Error("Record key cannot be fetched because the table has no defined key.");
+		if (!table.value.keyName) return;
 		const value = Reflect.get(record, table.value.keyName);
-		if (typeof value === "object" && Reflect.has(value, "value")) return value.value;
-		return value;
+		if (typeof value === "string" || typeof value === "number") return value;
+	}
+	function getPageRecordKeys() {
+		return table.value.records.map((record) => getRecordKey(record)).filter((key) => key !== void 0);
+	}
+	function warnMissingRecordKey(action) {
+		console.warn(`Cannot ${action} because this table record has no key.`);
+	}
+	function getColumnName(column) {
+		return typeof column === "string" ? column : column.name;
+	}
+	function getCell(index, column) {
+		return table.value.cells[index]?.columns[getColumnName(column)] ?? {
+			value: void 0,
+			extra: {}
+		};
 	}
 	function resolveInlineAction(action) {
 		if (typeof action !== "string") return action;
@@ -1944,10 +1992,15 @@ function useTable(input, defaultOptions = {}) {
 	*/
 	async function executeInlineAction(action, options) {
 		const resolvedAction = resolveInlineAction(action);
+		const recordKey = getRecordKey(options.record);
 		if (!resolvedAction) {
 			console.warn(`Action [${action}] is not defined`);
 			return;
 		}
+		if (recordKey === void 0) {
+			warnMissingRecordKey("execute an inline action");
+			return;
+		}
 		return await router$1.navigate({
 			method: "post",
 			url: getActionUrl(resolvedAction, table.value),
@@ -1957,7 +2010,7 @@ function useTable(input, defaultOptions = {}) {
 				type: "action:inline",
 				action: resolvedAction.name,
 				tableId: table.value.id,
-				recordId: getRecordKey(options.record)
+				recordId: recordKey
 			}
 		});
 	}
@@ -1996,20 +2049,35 @@ function useTable(input, defaultOptions = {}) {
 		});
 	}
 	return reactive({
-		selectAll: bulk.selectAll,
+		selectAll: () => table.value.keyName ? bulk.selectAll() : warnMissingRecordKey("select all records"),
 		deselectAll: bulk.deselectAll,
-		selectPage: () => bulk.select(...table.value.records.map((record) => getRecordKey(record))),
-		deselectPage: () => bulk.deselect(...table.value.records.map((record) => getRecordKey(record))),
-		isPageSelected: computed(() => table.value.records.length > 0 && table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
-		isSelected: (record) => bulk.selected(getRecordKey(record)),
+		selectPage: () => bulk.select(...getPageRecordKeys()),
+		deselectPage: () => bulk.deselect(...getPageRecordKeys()),
+		isPageSelected: computed(() => {
+			const keys = getPageRecordKeys();
+			return keys.length > 0 && keys.every((key) => bulk.selected(key));
+		}),
+		isSelected: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? false : bulk.selected(key);
+		},
 		allSelected: bulk.allSelected,
 		anySelected: bulk.anySelected,
 		selection: bulk.selection,
 		bindCheckbox: (key) => bulk.bindCheckbox(key),
-		toggle: (record, force) => bulk.toggle(getRecordKey(record), force),
-		toggleAll: (force) => bulk.toggleAll(force),
-		select: (record) => bulk.select(getRecordKey(record)),
-		deselect: (record) => bulk.deselect(getRecordKey(record)),
+		toggle: (record, force) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("toggle record selection") : bulk.toggle(key, force);
+		},
+		toggleAll: (force) => table.value.keyName ? bulk.toggleAll(force) : warnMissingRecordKey("toggle all records"),
+		select: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("select this record") : bulk.select(key);
+		},
+		deselect: (record) => {
+			const key = getRecordKey(record);
+			return key === void 0 ? warnMissingRecordKey("deselect this record") : bulk.deselect(key);
+		},
 		inlineActions: computed(() => table.value.inlineActions.map((action) => ({
 			execute: (record) => executeInlineAction(action, { record }),
 			...action
@@ -2029,29 +2097,27 @@ function useTable(input, defaultOptions = {}) {
 			isSortable: !!refinements.sorts.value.find((sort) => sort.name === column.name),
 			isFilterable: !!refinements.filters.value.find((filters) => filters.name === column.name)
 		}))),
-		data: computed(() => {
-			return table.value.records.map((record) => {
-				const entries = Object.entries(record).map(([key, value]) => [key, value.value]).filter(([key]) => key !== "__hybridId");
-				if (entries.length === 0) return;
-				return Object.fromEntries(entries);
-			}).filter(Boolean);
-		}),
-		records: computed(() => table.value.records.map((record) => {
-			const entries = Object.entries(record).map(([key, value]) => [key, value.value]).filter(([key]) => key !== "__hybridId");
+		data: computed(() => table.value.records),
+		records: computed(() => table.value.records.map((record, index) => {
+			const recordKey = getRecordKey(record);
+			const localKey = recordKey ?? `row-${index}`;
+			const selected = recordKey === void 0 ? false : bulk.selected(recordKey);
 			return {
-				record: entries.length > 0 ? Object.fromEntries(entries) : {},
-				key: getRecordKey(record),
-				execute: (action) => executeInlineAction(action, { record: getRecordKey(record) }),
+				record,
+				key: localKey,
+				recordKey,
+				hasKey: recordKey !== void 0,
+				execute: (action) => executeInlineAction(action, { record }),
 				actions: table.value.inlineActions.map((action) => ({
 					...action,
-					execute: () => executeInlineAction(action.name, { record: getRecordKey(record) })
+					execute: () => executeInlineAction(action.name, { record })
 				})),
-				select: () => bulk.select(getRecordKey(record)),
-				deselect: () => bulk.deselect(getRecordKey(record)),
-				toggle: (force) => bulk.toggle(getRecordKey(record), force),
-				selected: bulk.selected(getRecordKey(record)),
-				value: (column) => record[typeof column === "string" ? column : column.name].value,
-				extra: (column, path) => getByPath(record[typeof column === "string" ? column : column.name].extra, path)
+				select: () => recordKey === void 0 ? warnMissingRecordKey("select this record") : bulk.select(recordKey),
+				deselect: () => recordKey === void 0 ? warnMissingRecordKey("deselect this record") : bulk.deselect(recordKey),
+				toggle: (force) => recordKey === void 0 ? warnMissingRecordKey("toggle record selection") : bulk.toggle(recordKey, force),
+				selected,
+				value: (column) => getCell(index, column).value,
+				extra: (column, path) => getByPath(getCell(index, column).extra, path)
 			};
 		})),
 		paginator: computed(() => createPaginator(table.value.paginator, defaultOptions)),
@@ -2069,4 +2135,4 @@ function useValidationBag(bag = "default") {
 	return readonly(toReactive(computed(() => state.context.value?.validation?.[bag] ?? {})));
 }
 //#endregion
-export { Deferred, Form, RouterLink, WhenVisible, createPaginator, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable, useValidation, useValidationBag };
+export { Deferred, Form, RouterLink, WhenVisible, createPaginator, getBulkSelectionRange, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable, useValidation, useValidationBag };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hybridly/vue",
 	"type": "module",
-	"version": "0.10.0-beta.26",
+	"version": "0.10.0-beta.28",
 	"description": "Vue adapter for Hybridly",
 	"author": "Enzo Innocenzi <enzo@innocenzi.dev>",
 	"license": "MIT",
@@ -47,8 +47,8 @@
 	"dependencies": {
 		"@clickbar/dot-diver": "^1.0.7",
 		"es-toolkit": "^1.45.1",
-		"@hybridly/core": "0.10.0-beta.26",
-		"@hybridly/utils": "0.10.0-beta.26",
+		"@hybridly/core": "0.10.0-beta.28",
+		"@hybridly/utils": "0.10.0-beta.28",
 		"@vue/devtools-api": "^8.1.0",
 		"defu": "^6.1.4",
 		"nprogress": "^0.2.0"