@hybridly/vue 0.7.13 → 0.7.14

package/dist/index.cjs

@@ -200,7 +200,10 @@ const wrapper = vue.defineComponent({
     function renderLayout(view) {
       utils.debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
-        return state.view.value.layout(vue.h, view, renderDialog());
+        return state.view.value.layout(vue.h, view, renderDialog(), {
+          ...state.view.value?.properties ?? {},
+          ...state.properties.value
+        });
       }
       if (Array.isArray(state.view.value?.layout)) {
         const layoutsAndView = state.view.value.layout.concat(view).reverse().reduce((child, layout) => {
@@ -1000,7 +1003,7 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   async function applyFilter(name, value, options = {}) {
     const filter = getFilter(name);
     if (!filter) {
-      console.warn(`[Refinement] Filter "${name} does not exist."`);
+      console.warn(`[Refinement] Filter "${name}" does not exist.`);
       return;
     }
     if (["", null].includes(value) || value === filter.default) {
@@ -1046,7 +1049,7 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   async function toggleSort(name, options) {
     const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${name} does not exist."`);
+      console.warn(`[Refinement] Sort "${name}" does not exist.`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -1245,6 +1248,20 @@ function useBulkSelect() {
   const allSelected = vue.computed(() => {
     return selection.value.all && selection.value.except.size === 0;
   });
+  function bindCheckbox(key) {
+    return {
+      onChange: (event) => {
+        const target = event.target;
+        if (target.checked) {
+          select(target.value);
+        } else {
+          deselect(target.value);
+        }
+      },
+      checked: selected(key),
+      value: key
+    };
+  }
   return {
     allSelected,
     selectAll,
@@ -1253,20 +1270,70 @@ function useBulkSelect() {
     deselect,
     toggle,
     selected,
-    selection
+    selection,
+    bindCheckbox
   };
 }
 
+function useQueryParameters() {
+  const state = vue.reactive({});
+  function updateState() {
+    const params = new URLSearchParams(window.location.search);
+    const unusedKeys = new Set(Object.keys(state));
+    for (const key of params.keys()) {
+      const paramsForKey = params.getAll(key);
+      state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
+      unusedKeys.delete(key);
+    }
+    Array.from(unusedKeys).forEach((key) => delete state[key]);
+  }
+  updateState();
+  core.registerHook("after", updateState);
+  return state;
+}
+function useQueryParameter(name, options = {}) {
+  const query = useQueryParameters();
+  const transform = (value2) => {
+    if (options.transform === "bool") {
+      return value2 === true || value2 === "true" || value2 === "1" || value2 === "yes";
+    } else if (options.transform === "number") {
+      return Number(value2);
+    } else if (options.transform === "string") {
+      return String(value2);
+    } else if (options.transform === "date") {
+      return new Date(value2);
+    } else if (typeof options.transform === "function") {
+      return options.transform(value2);
+    }
+    return value2;
+  };
+  const value = vue.ref();
+  vue.watch(query, () => {
+    value.value = transform(query[name] ?? vue.toValue(options.defaultValue));
+  }, { deep: true, immediate: true });
+  return value;
+}
+
 function useTable(props, key, defaultOptions = {}) {
   const table = vue.computed(() => props[key]);
   const bulk = useBulkSelect();
   const refinements = useRefinements(toReactive(table), "refinements", defaultOptions);
+  function getAdditionnalData() {
+    const data = {};
+    if (defaultOptions?.includeQueryParameters !== false) {
+      Object.assign(data, structuredClone(vue.toRaw(useQueryParameters())));
+    }
+    if (defaultOptions?.data) {
+      Object.assign(data, defaultOptions.data);
+    }
+    return data;
+  }
   function getRecordKey(record) {
     if (typeof record !== "object") {
       return record;
     }
     if (Reflect.has(record, "__hybridId")) {
-      return Reflect.get(record, "__hybridId").value;
+      return Reflect.get(record, "__hybridId");
     }
     return Reflect.get(record, table.value.keyName).value;
   }
@@ -1279,6 +1346,7 @@ function useTable(props, key, defaultOptions = {}) {
       url: core.route(table.value.endpoint),
       preserveState: true,
       data: {
+        ...getAdditionnalData(),
         type: "action:inline",
         action: getActionName(action),
         tableId: table.value.id,
@@ -1299,6 +1367,7 @@ function useTable(props, key, defaultOptions = {}) {
       url: core.route(table.value.endpoint),
       preserveState: true,
       data: {
+        ...getAdditionnalData(),
         type: "action:bulk",
         action: actionName,
         tableId: table.value.id,
@@ -1333,6 +1402,8 @@ function useTable(props, key, defaultOptions = {}) {
     allSelected: bulk.allSelected,
     /** The current record selection. */
     selection: bulk.selection,
+    /** Binds a checkbox to its selection state. */
+    bindCheckbox: (key2) => bulk.bindCheckbox(key2),
     /** Toggles selection for the given record. */
     toggle: (record) => bulk.toggle(getRecordKey(record)),
     /** Selects selection for the given record. */
@@ -1406,45 +1477,6 @@ function useTable(props, key, defaultOptions = {}) {
   });
 }
 
-function useQueryParameters() {
-  const state = vue.reactive({});
-  function updateState() {
-    const params = new URLSearchParams(window.location.search);
-    const unusedKeys = new Set(Object.keys(state));
-    for (const key of params.keys()) {
-      const paramsForKey = params.getAll(key);
-      state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
-      unusedKeys.delete(key);
-    }
-    Array.from(unusedKeys).forEach((key) => delete state[key]);
-  }
-  updateState();
-  core.registerHook("after", updateState);
-  return state;
-}
-function useQueryParameter(name, options = {}) {
-  const query = useQueryParameters();
-  const transform = (value2) => {
-    if (options.transform === "bool") {
-      return value2 === true || value2 === "true" || value2 === "1" || value2 === "yes";
-    } else if (options.transform === "number") {
-      return Number(value2);
-    } else if (options.transform === "string") {
-      return String(value2);
-    } else if (options.transform === "date") {
-      return new Date(value2);
-    } else if (typeof options.transform === "function") {
-      return options.transform(value2);
-    }
-    return value2;
-  };
-  const value = vue.ref();
-  vue.watch(query, () => {
-    value.value = transform(query[name] ?? vue.toValue(options.defaultValue));
-  }, { deep: true, immediate: true });
-  return value;
-}
-
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;

package/dist/index.d.cts

@@ -94,13 +94,13 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     progress: {
         readonly event: {
             readonly loaded: number;
-            readonly total?: number;
-            readonly progress?: number;
+            readonly total?: number | undefined;
+            readonly progress?: number | undefined;
             readonly bytes: number;
-            readonly rate?: number;
-            readonly estimated?: number;
-            readonly upload?: boolean;
-            readonly download?: boolean;
+            readonly rate?: number | undefined;
+            readonly estimated?: number | undefined;
+            readonly upload?: boolean | undefined;
+            readonly download?: boolean | undefined;
             readonly event?: any;
             readonly lengthComputable: boolean;
         };
@@ -544,6 +544,11 @@ declare function useBulkSelect<T = any>(): {
     toggle: (record: T, force?: boolean) => void;
     selected: (record: T) => boolean;
     selection: Ref<BulkSelection<T>>;
+    bindCheckbox: (key: T) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: T;
+    };
 };
 
 declare global {
@@ -597,10 +602,21 @@ type AsRecordType<T extends Record<string, any>> = {
         value: T[K];
     };
 };
+interface TableDefaultOptions extends AvailableHybridRequestOptions {
+    /**
+     * Whether to include existing query parameters in the request.
+     * @default true
+     */
+    includeQueryParameters?: boolean;
+    /**
+     * Additionnal data to send with the requests.
+     */
+    data?: Record<string, FormDataConvertible> | FormDataConvertible;
+}
 /**
  * Provides utilities for working with tables.
  */
-declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: AvailableHybridRequestOptions): {
+declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: TableDefaultOptions): {
     bindFilter: <T = any>(name: string, options?: BindFilterOptions<T>) => vue.Ref<T>;
     filters: {
         apply: (value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
@@ -619,8 +635,8 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
         isSorting: (direction?: SortDirection) => boolean;
         clear: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
         is_active: boolean;
-        direction?: SortDirection;
-        default?: SortDirection;
+        direction?: SortDirection | undefined;
+        default?: SortDirection | undefined;
         label: string;
         metadata: Record<string, any>;
         name: string;
@@ -650,6 +666,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     isSelected: (record: RecordType) => boolean;
     allSelected: boolean;
     selection: BulkSelection<RecordIdentifier>;
+    bindCheckbox: (key: RecordIdentifier) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: RecordIdentifier;
+    };
     toggle: (record: RecordType) => void;
     select: (record: RecordType) => void;
     deselect: (record: RecordType) => void;
@@ -951,4 +972,4 @@ declare const RouterLink: vue.DefineComponent<{
     preload: boolean | "hover" | "mount";
 }, {}>;
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type TableDefaultOptions, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.mts

@@ -94,13 +94,13 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     progress: {
         readonly event: {
             readonly loaded: number;
-            readonly total?: number;
-            readonly progress?: number;
+            readonly total?: number | undefined;
+            readonly progress?: number | undefined;
             readonly bytes: number;
-            readonly rate?: number;
-            readonly estimated?: number;
-            readonly upload?: boolean;
-            readonly download?: boolean;
+            readonly rate?: number | undefined;
+            readonly estimated?: number | undefined;
+            readonly upload?: boolean | undefined;
+            readonly download?: boolean | undefined;
             readonly event?: any;
             readonly lengthComputable: boolean;
         };
@@ -544,6 +544,11 @@ declare function useBulkSelect<T = any>(): {
     toggle: (record: T, force?: boolean) => void;
     selected: (record: T) => boolean;
     selection: Ref<BulkSelection<T>>;
+    bindCheckbox: (key: T) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: T;
+    };
 };
 
 declare global {
@@ -597,10 +602,21 @@ type AsRecordType<T extends Record<string, any>> = {
         value: T[K];
     };
 };
+interface TableDefaultOptions extends AvailableHybridRequestOptions {
+    /**
+     * Whether to include existing query parameters in the request.
+     * @default true
+     */
+    includeQueryParameters?: boolean;
+    /**
+     * Additionnal data to send with the requests.
+     */
+    data?: Record<string, FormDataConvertible> | FormDataConvertible;
+}
 /**
  * Provides utilities for working with tables.
  */
-declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: AvailableHybridRequestOptions): {
+declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: TableDefaultOptions): {
     bindFilter: <T = any>(name: string, options?: BindFilterOptions<T>) => vue.Ref<T>;
     filters: {
         apply: (value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
@@ -619,8 +635,8 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
         isSorting: (direction?: SortDirection) => boolean;
         clear: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
         is_active: boolean;
-        direction?: SortDirection;
-        default?: SortDirection;
+        direction?: SortDirection | undefined;
+        default?: SortDirection | undefined;
         label: string;
         metadata: Record<string, any>;
         name: string;
@@ -650,6 +666,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     isSelected: (record: RecordType) => boolean;
     allSelected: boolean;
     selection: BulkSelection<RecordIdentifier>;
+    bindCheckbox: (key: RecordIdentifier) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: RecordIdentifier;
+    };
     toggle: (record: RecordType) => void;
     select: (record: RecordType) => void;
     deselect: (record: RecordType) => void;
@@ -951,4 +972,4 @@ declare const RouterLink: vue.DefineComponent<{
     preload: boolean | "hover" | "mount";
 }, {}>;
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type TableDefaultOptions, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.ts

@@ -94,13 +94,13 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     progress: {
         readonly event: {
             readonly loaded: number;
-            readonly total?: number;
-            readonly progress?: number;
+            readonly total?: number | undefined;
+            readonly progress?: number | undefined;
             readonly bytes: number;
-            readonly rate?: number;
-            readonly estimated?: number;
-            readonly upload?: boolean;
-            readonly download?: boolean;
+            readonly rate?: number | undefined;
+            readonly estimated?: number | undefined;
+            readonly upload?: boolean | undefined;
+            readonly download?: boolean | undefined;
             readonly event?: any;
             readonly lengthComputable: boolean;
         };
@@ -544,6 +544,11 @@ declare function useBulkSelect<T = any>(): {
     toggle: (record: T, force?: boolean) => void;
     selected: (record: T) => boolean;
     selection: Ref<BulkSelection<T>>;
+    bindCheckbox: (key: T) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: T;
+    };
 };
 
 declare global {
@@ -597,10 +602,21 @@ type AsRecordType<T extends Record<string, any>> = {
         value: T[K];
     };
 };
+interface TableDefaultOptions extends AvailableHybridRequestOptions {
+    /**
+     * Whether to include existing query parameters in the request.
+     * @default true
+     */
+    includeQueryParameters?: boolean;
+    /**
+     * Additionnal data to send with the requests.
+     */
+    data?: Record<string, FormDataConvertible> | FormDataConvertible;
+}
 /**
  * Provides utilities for working with tables.
  */
-declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: AvailableHybridRequestOptions): {
+declare function useTable<RecordType extends (Props[PropsKey] extends Table<infer T, any> ? AsRecordType<T> : never), PaginatorKindName extends (Props[PropsKey] extends Table<RecordType, infer PaginatorKind> ? PaginatorKind : never), TableType extends (Props[PropsKey] extends Table<RecordType, PaginatorKindName> ? Table<RecordType, PaginatorKindName> : never), Props extends Record<string, unknown>, PropsKey extends keyof Props>(props: Props, key: PropsKey, defaultOptions?: TableDefaultOptions): {
     bindFilter: <T = any>(name: string, options?: BindFilterOptions<T>) => vue.Ref<T>;
     filters: {
         apply: (value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
@@ -619,8 +635,8 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
         isSorting: (direction?: SortDirection) => boolean;
         clear: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
         is_active: boolean;
-        direction?: SortDirection;
-        default?: SortDirection;
+        direction?: SortDirection | undefined;
+        default?: SortDirection | undefined;
         label: string;
         metadata: Record<string, any>;
         name: string;
@@ -650,6 +666,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     isSelected: (record: RecordType) => boolean;
     allSelected: boolean;
     selection: BulkSelection<RecordIdentifier>;
+    bindCheckbox: (key: RecordIdentifier) => {
+        onChange: (event: Event) => void;
+        checked: boolean;
+        value: RecordIdentifier;
+    };
     toggle: (record: RecordType) => void;
     select: (record: RecordType) => void;
     deselect: (record: RecordType) => void;
@@ -951,4 +972,4 @@ declare const RouterLink: vue.DefineComponent<{
     preload: boolean | "hover" | "mount";
 }, {}>;
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type DefaultFormOptions, type InitializeOptions, type InlineAction, type RecordIdentifier, RouterLink, type SortDirection, type TableDefaultOptions, type ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.mjs

@@ -193,7 +193,10 @@ const wrapper = defineComponent({
     function renderLayout(view) {
       debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
-        return state.view.value.layout(h, view, renderDialog());
+        return state.view.value.layout(h, view, renderDialog(), {
+          ...state.view.value?.properties ?? {},
+          ...state.properties.value
+        });
       }
       if (Array.isArray(state.view.value?.layout)) {
         const layoutsAndView = state.view.value.layout.concat(view).reverse().reduce((child, layout) => {
@@ -993,7 +996,7 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   async function applyFilter(name, value, options = {}) {
     const filter = getFilter(name);
     if (!filter) {
-      console.warn(`[Refinement] Filter "${name} does not exist."`);
+      console.warn(`[Refinement] Filter "${name}" does not exist.`);
       return;
     }
     if (["", null].includes(value) || value === filter.default) {
@@ -1039,7 +1042,7 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   async function toggleSort(name, options) {
     const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${name} does not exist."`);
+      console.warn(`[Refinement] Sort "${name}" does not exist.`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -1238,6 +1241,20 @@ function useBulkSelect() {
   const allSelected = computed(() => {
     return selection.value.all && selection.value.except.size === 0;
   });
+  function bindCheckbox(key) {
+    return {
+      onChange: (event) => {
+        const target = event.target;
+        if (target.checked) {
+          select(target.value);
+        } else {
+          deselect(target.value);
+        }
+      },
+      checked: selected(key),
+      value: key
+    };
+  }
   return {
     allSelected,
     selectAll,
@@ -1246,20 +1263,70 @@ function useBulkSelect() {
     deselect,
     toggle,
     selected,
-    selection
+    selection,
+    bindCheckbox
   };
 }
 
+function useQueryParameters() {
+  const state = reactive({});
+  function updateState() {
+    const params = new URLSearchParams(window.location.search);
+    const unusedKeys = new Set(Object.keys(state));
+    for (const key of params.keys()) {
+      const paramsForKey = params.getAll(key);
+      state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
+      unusedKeys.delete(key);
+    }
+    Array.from(unusedKeys).forEach((key) => delete state[key]);
+  }
+  updateState();
+  registerHook$1("after", updateState);
+  return state;
+}
+function useQueryParameter(name, options = {}) {
+  const query = useQueryParameters();
+  const transform = (value2) => {
+    if (options.transform === "bool") {
+      return value2 === true || value2 === "true" || value2 === "1" || value2 === "yes";
+    } else if (options.transform === "number") {
+      return Number(value2);
+    } else if (options.transform === "string") {
+      return String(value2);
+    } else if (options.transform === "date") {
+      return new Date(value2);
+    } else if (typeof options.transform === "function") {
+      return options.transform(value2);
+    }
+    return value2;
+  };
+  const value = ref();
+  watch(query, () => {
+    value.value = transform(query[name] ?? toValue(options.defaultValue));
+  }, { deep: true, immediate: true });
+  return value;
+}
+
 function useTable(props, key, defaultOptions = {}) {
   const table = computed(() => props[key]);
   const bulk = useBulkSelect();
   const refinements = useRefinements(toReactive(table), "refinements", defaultOptions);
+  function getAdditionnalData() {
+    const data = {};
+    if (defaultOptions?.includeQueryParameters !== false) {
+      Object.assign(data, structuredClone(toRaw(useQueryParameters())));
+    }
+    if (defaultOptions?.data) {
+      Object.assign(data, defaultOptions.data);
+    }
+    return data;
+  }
   function getRecordKey(record) {
     if (typeof record !== "object") {
       return record;
     }
     if (Reflect.has(record, "__hybridId")) {
-      return Reflect.get(record, "__hybridId").value;
+      return Reflect.get(record, "__hybridId");
     }
     return Reflect.get(record, table.value.keyName).value;
   }
@@ -1272,6 +1339,7 @@ function useTable(props, key, defaultOptions = {}) {
       url: route(table.value.endpoint),
       preserveState: true,
       data: {
+        ...getAdditionnalData(),
         type: "action:inline",
         action: getActionName(action),
         tableId: table.value.id,
@@ -1292,6 +1360,7 @@ function useTable(props, key, defaultOptions = {}) {
       url: route(table.value.endpoint),
       preserveState: true,
       data: {
+        ...getAdditionnalData(),
         type: "action:bulk",
         action: actionName,
         tableId: table.value.id,
@@ -1326,6 +1395,8 @@ function useTable(props, key, defaultOptions = {}) {
     allSelected: bulk.allSelected,
     /** The current record selection. */
     selection: bulk.selection,
+    /** Binds a checkbox to its selection state. */
+    bindCheckbox: (key2) => bulk.bindCheckbox(key2),
     /** Toggles selection for the given record. */
     toggle: (record) => bulk.toggle(getRecordKey(record)),
     /** Selects selection for the given record. */
@@ -1399,43 +1470,4 @@ function useTable(props, key, defaultOptions = {}) {
   });
 }
 
-function useQueryParameters() {
-  const state = reactive({});
-  function updateState() {
-    const params = new URLSearchParams(window.location.search);
-    const unusedKeys = new Set(Object.keys(state));
-    for (const key of params.keys()) {
-      const paramsForKey = params.getAll(key);
-      state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
-      unusedKeys.delete(key);
-    }
-    Array.from(unusedKeys).forEach((key) => delete state[key]);
-  }
-  updateState();
-  registerHook$1("after", updateState);
-  return state;
-}
-function useQueryParameter(name, options = {}) {
-  const query = useQueryParameters();
-  const transform = (value2) => {
-    if (options.transform === "bool") {
-      return value2 === true || value2 === "true" || value2 === "1" || value2 === "yes";
-    } else if (options.transform === "number") {
-      return Number(value2);
-    } else if (options.transform === "string") {
-      return String(value2);
-    } else if (options.transform === "date") {
-      return new Date(value2);
-    } else if (typeof options.transform === "function") {
-      return options.transform(value2);
-    }
-    return value2;
-  };
-  const value = ref();
-  watch(query, () => {
-    value.value = transform(query[name] ?? toValue(options.defaultValue));
-  }, { deep: true, immediate: true });
-  return value;
-}
-
 export { RouterLink, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridly/vue",
   "type": "module",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "description": "Vue adapter for Hybridly",
   "author": "Enzo Innocenzi <enzo@innocenzi.dev>",
   "license": "MIT",
@@ -43,22 +43,22 @@
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "@clickbar/dot-diver": "^1.0.6",
-    "@vue/devtools-api": "^7.3.5",
+    "@clickbar/dot-diver": "^1.0.7",
+    "@vue/devtools-api": "^7.3.8",
     "defu": "^6.1.4",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.12.1",
-    "@hybridly/utils": "0.7.13",
-    "@hybridly/core": "0.7.13"
+    "qs": "^6.13.0",
+    "@hybridly/core": "0.7.14",
+    "@hybridly/utils": "0.7.14"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.6",
+    "@types/lodash": "^4.17.7",
     "@types/lodash.isequal": "^4.5.8",
     "@types/nprogress": "^0.2.3",
     "@vue/test-utils": "^2.4.6",
-    "axios": "^1.7.2",
-    "vue": "^3.4.31"
+    "axios": "^1.7.4",
+    "vue": "^3.4.38"
   },
   "scripts": {
     "build": "unbuild",