@hybridly/vue 0.10.0-beta.25 → 0.10.0-beta.27

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import { FormDataConvertible, Path, PathValue, RequestData, SearchableObject } from "@hybridly/utils";
 import * as vue from "vue";
 import { App, Component, ComputedRef, DeepReadonly, DefineComponent, MaybeRefOrGetter, Plugin, PropType, Ref, SlotsType, h } from "vue";
+import * as _hybridly_core0 from "@hybridly/core";
 import { Errors, GlobalHybridlyProperties, HttpClient, HybridRequestOptions, Method, NavigationResponse, Plugin as Plugin$1, Progress, RequestMode, RouteName, RouteParameters, RouterContext, RouterContextOptions, UrlResolvable, Validation, registerHook as registerHook$1, route, router } from "@hybridly/core";
 import { Path as Path$1, SearchableObject as SearchableObject$1 } from "@clickbar/dot-diver";
 
@@ -33,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`.
    */
@@ -60,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;
@@ -73,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>;
@@ -324,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>;
@@ -1049,19 +1077,18 @@ declare function useRefinements<T extends Refinements>(input: MaybeRefOrGetter<T
 declare const registerHook: typeof registerHook$1;
 //#endregion
 //#region src/composables/table.d.ts
-declare global {
-  interface Table<T extends Record<string, any> = any, PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = 'length-aware'> {
-    id: string;
-    keyName: string;
-    scope?: string;
-    columns: Column<T>[];
-    inlineActions: InlineAction[];
-    bulkActions: BulkAction[];
-    records: Array<T>;
-    paginator: Omit<PaginatorKind extends 'cursor' ? CursorPaginator<T> : (PaginatorKind extends 'simple' ? SimplePaginator<T> : Paginator<T>), 'data'>;
-    refinements: Refinements;
-    endpoint: string;
-  }
+interface Table<T extends Record<string, any> = any, PaginatorKind extends 'cursor' | 'length-aware' | 'simple' = 'length-aware'> {
+  id: 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;
 }
 interface Column<T extends object = never> {
   /** The name of this column. */
@@ -1073,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;
@@ -1093,15 +1128,8 @@ interface BulkActionOptions extends Omit<HybridRequestOptions, 'url'> {
   /** Force deselecting all records after action. */
   deselect?: boolean;
 }
-interface InlineActionOptions<T> extends Omit<HybridRequestOptions, 'url'> {
-  record: T;
-}
 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,98 +1141,126 @@ interface TableDefaultOptions extends AvailableHybridRequestOptions {
    */
   data?: Record<string, FormDataConvertible> | FormDataConvertible;
 }
-/**
- * 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): {
-  bindFilter: <T_1 = string | number>(name: string, options?: BindFilterOptions<T_1>) => vue.Ref<string>;
-  filters: BoundFilterRefinement[];
-  sorts: BoundSortRefinement[];
-  filtersKey: string;
-  sortsKey: string;
-  getFilter: (name: string) => BoundFilterRefinement | undefined;
-  getSort: (name: string) => BoundSortRefinement | undefined;
-  reset: (options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse>;
-  toggleSort: (name: string, options?: ToggleSortOptions) => Promise<index_d_exports.NavigationResponse | undefined>;
-  isSorting: (name?: string, direction?: SortDirection) => boolean;
-  isFiltering: (name?: string) => boolean;
-  currentSorts: () => Array<SortRefinement>;
-  currentFilters: () => Array<FilterRefinement>;
-  clearFilter: (filter: string, options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse>;
-  clearSorts: (options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse>;
-  clearFilters: (options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse>;
-  applyFilter: (name: string, value: any, options?: AvailableHybridRequestOptionsForFilters) => Promise<index_d_exports.NavigationResponse | undefined>;
+type UseTableNavigationResponse = Promise<_hybridly_core0.NavigationResponse | undefined>;
+type ExtractRefValue<T> = T extends {
+  value: infer Value;
+} ? Value : T;
+interface UseTableInlineActionItem<RecordType extends Record<string, any>> extends InlineAction {
+  /** Executes the action. */
+  execute: (record: RecordIdentifier | RecordType) => UseTableNavigationResponse;
+}
+interface UseTableBulkActionItem extends BulkAction {
+  /** Executes the action. */
+  execute: (options?: BulkActionOptions) => UseTableNavigationResponse;
+}
+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. */
+  isSorting: (direction?: SortDirection) => boolean;
+  /** Applies the filter for this column. */
+  applyFilter: (value: any, options?: AvailableHybridRequestOptions) => UseTableNavigationResponse;
+  /** Clears the filter for this column. */
+  clearFilter: (options?: AvailableHybridRequestOptions) => UseTableNavigationResponse;
+  /** Checks whether the column is sortable. */
+  isSortable: boolean;
+  /** Checks whether the column is filterable. */
+  isFilterable: boolean;
+}
+interface UseTableRecordItem<RecordType extends Record<string, any>> {
+  /** The actual record. */
+  record: RecordType;
+  /** 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. */
+  actions: Array<InlineAction & {
+    execute: () => UseTableNavigationResponse;
+  }>;
+  /** Selects this record. */
+  select: () => void;
+  /** Deselects this record. */
+  deselect: () => void;
+  /** Toggles the selection for this record. */
+  toggle: (force?: boolean) => void;
+  /** Checks whether this record is selected. */
+  selected: boolean;
+  /** Gets the value of the record for the specified column. */
+  value: (column: string | Column<RecordType>) => any;
+  /** Gets the extra object of the record for the specified column. */
+  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')> extends Omit<UseRefinements, 'filters' | 'sorts' | 'filtersKey' | 'sortsKey'> {
+  /** Selects all records. */
   selectAll: () => void;
+  /** Deselects all records. */
   deselectAll: () => void;
+  /** Selects records on the current page. */
   selectPage: () => void;
+  /** Deselects records on the current page. */
   deselectPage: () => void;
+  /** Whether all records on the current page are selected. */
   isPageSelected: boolean;
-  isSelected: (record: RecordTypeWithExtra | RecordType) => boolean;
+  /** Checks if the given record is selected. */
+  isSelected: (record: RecordType) => boolean;
+  /** Whether all records are selected. */
   allSelected: boolean;
+  /** Whether any records are selected. */
   anySelected: boolean;
+  /** The current record selection. */
   selection: BulkSelection<RecordIdentifier>;
+  /** Binds a checkbox to its selection state. */
   bindCheckbox: (key: RecordIdentifier) => {
     onChange: (event: Event) => void;
     checked: boolean;
     value: RecordIdentifier;
   };
-  toggle: (record: RecordTypeWithExtra | RecordType, force?: boolean) => void;
+  /** Toggles selection for the given record. */
+  toggle: (record: RecordType, force?: boolean) => void;
+  /** Toggles selection for all records. */
   toggleAll: (force?: boolean) => void;
-  select: (record: RecordTypeWithExtra | RecordType) => void;
-  deselect: (record: RecordTypeWithExtra | RecordType) => void;
-  inlineActions: {
-    /** The name of this action. */name: string; /** The label of this action. */
-    label: string; /** The type of this action. */
-    type: string; /** Custom metadata for this action. */
-    metadata: any; /** A user-defined URL to which to post the action. */
-    url?: string; /** Executes the action. */
-    execute: (record: RecordTypeWithExtra | RecordIdentifier | RecordType) => Promise<index_d_exports.NavigationResponse | undefined>;
-  }[];
-  bulkActions: {
-    /** Should deselect all records after action. */deselect: boolean; /** The name of this action. */
-    name: string; /** The label of this action. */
-    label: string; /** The type of this action. */
-    type: string; /** Custom metadata for this action. */
-    metadata: any; /** A user-defined URL to which to post the action. */
-    url?: string; /** Executes the action. */
-    execute: (options?: BulkActionOptions) => Promise<index_d_exports.NavigationResponse | undefined>;
-  }[];
-  executeInlineAction: (action: InlineAction | string, options: InlineActionOptions<RecordTypeWithExtra | RecordIdentifier | RecordType>) => Promise<index_d_exports.NavigationResponse | undefined>;
-  executeBulkAction: (action: BulkAction | string, options?: BulkActionOptions) => Promise<index_d_exports.NavigationResponse | undefined>;
-  columns: {
-    /** Toggles sorting for this column. */toggleSort: (options?: ToggleSortOptions) => Promise<index_d_exports.NavigationResponse | undefined>; /** Checks whether the column is being sorted. */
-    isSorting: (direction?: SortDirection) => boolean; /** Applies the filer for this column. */
-    applyFilter: (value: any, options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse | undefined>; /** Clears the filter for this column. */
-    clearFilter: (options?: AvailableHybridRequestOptions) => Promise<index_d_exports.NavigationResponse>; /** Checks whether the column is sortable. */
-    isSortable: boolean; /** Checks whether the column is filterable. */
-    isFilterable: boolean; /** The name of this column. */
-    name: keyof RecordTypeWithExtra; /** The label of this column. */
-    label: string; /** The type of this column. */
-    type: string; /** Metadata of this column. */
-    metadata: Record<string, any>;
-  }[];
+  /** Selects selection for the given record. */
+  select: (record: RecordType) => void;
+  /** Deselects selection for the given record. */
+  deselect: (record: RecordType) => void;
+  /** List of inline actions for this table. */
+  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: 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<RecordType>>;
+  /** List of records for this table. */
   data: RecordType[];
-  records: {
-    /** The actual record. */record: RecordType; /** The key of the record. Use this instead of `id`. */
-    key: RecordIdentifier; /** Executes the given inline action. */
-    execute: (action: string | InlineAction) => Promise<index_d_exports.NavigationResponse | undefined>; /** Gets the available inline actions. */
-    actions: {
-      /** Executes the action. */execute: () => Promise<index_d_exports.NavigationResponse | undefined>; /** The name of this action. */
-      name: string; /** The label of this action. */
-      label: string; /** The type of this action. */
-      type: string; /** Custom metadata for this action. */
-      metadata: any; /** A user-defined URL to which to post the action. */
-      url?: string;
-    }[]; /** Selects this record. */
-    select: () => void; /** Deselects this record. */
-    deselect: () => void; /** Toggles the selection for this record. */
-    toggle: (force?: boolean) => void; /** Checks whether this record is selected. */
-    selected: boolean; /** Gets the value of the record for the specified column. */
-    value: (column: string | Column<RecordTypeWithExtra>) => any; /** Gets the extra object of the record for the specified column. */
-    extra: (column: string | Column<RecordTypeWithExtra>, path: string) => any;
-  }[];
-  paginator: PaginatorResult<unknown, Omit<PaginatorKind extends "cursor" ? CursorPaginator<RecordTypeWithExtra> : PaginatorKind extends "simple" ? SimplePaginator<RecordTypeWithExtra> : Paginator<RecordTypeWithExtra>, "data">>;
-};
+  /** List of records for this table. */
+  records: Array<UseTableRecordItem<RecordType>>;
+  /** Paginated meta and links. */
+  paginator: PaginatorResult<RecordType, Table<RecordType, PaginatorKind>['paginator']>;
+  /** Available filters. */
+  filters: ExtractRefValue<UseRefinements['filters']>;
+  /** Available sorts. */
+  sorts: ExtractRefValue<UseRefinements['sorts']>;
+  /** The key for the filters. */
+  filtersKey: ExtractRefValue<UseRefinements['filtersKey']>;
+  /** The key for the sorts. */
+  sortsKey: ExtractRefValue<UseRefinements['sortsKey']>;
+}
+/**
+ * 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')>(input: MaybeRefOrGetter<T>, defaultOptions?: TableDefaultOptions): UseTableReturn<T, RecordType, PaginatorKind>;
 //#endregion
 //#region src/composables/validation.d.ts
 /** Accesses all validation errors grouped by bag name. */
@@ -1302,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, TableDefaultOptions, TernaryFilterRefinement, TextFilterRefinement, TimeSuggestion, TimeframeSuggestion, ToggleSortOptions, TrashedFilterRefinement, UseRefinements, 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.
 	*/
@@ -1373,6 +1390,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 +1953,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 +1989,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 +2007,7 @@ function useTable(input, defaultOptions = {}) {
 				type: "action:inline",
 				action: resolvedAction.name,
 				tableId: table.value.id,
-				recordId: getRecordKey(options.record)
+				recordId: recordKey
 			}
 		});
 	}
@@ -1996,20 +2046,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 +2094,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 +2132,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.25",
+	"version": "0.10.0-beta.27",
 	"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.25",
-		"@hybridly/utils": "0.10.0-beta.25",
+		"@hybridly/core": "0.10.0-beta.27",
+		"@hybridly/utils": "0.10.0-beta.27",
 		"@vue/devtools-api": "^8.1.0",
 		"defu": "^6.1.4",
 		"nprogress": "^0.2.0"