@hybridly/vue 0.5.4 → 0.5.6

package/dist/index.cjs

@@ -1053,22 +1053,37 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
+    const sortData = next ? options?.sortData ?? {} : Object.fromEntries(Object.entries(options?.sortData ?? {}).map(([key, _]) => [key, void 0]));
     return await core.router.reload({
       ...defaultOptions,
       ...options,
       data: {
-        [sortsKey.value]: next || void 0
+        [sortsKey.value]: next || void 0,
+        ...sortData
       }
     });
   }
   function bindFilter(name, options = {}) {
+    const debounce = options.debounce ?? 250;
+    const refDebounce = options.syncDebounce ?? 250;
     const transform = options?.transformValue ?? ((value) => value);
     const watchFn = options?.watch ?? vue.watch;
-    const _ref = vue.ref(transform(refinements.value.filters.find((f) => f.name === name)?.value));
+    const getFilterValue = () => transform(refinements.value.filters.find((f) => f.name === name)?.value);
+    const _ref = vue.ref(getFilterValue());
+    let _filterTimeout;
+    let _refTimeout;
     vue.watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
-      _ref.value = transform(filter?.value);
+      clearTimeout(_refTimeout);
+      _refTimeout = setTimeout(() => _ref.value = transform(filter?.value), refDebounce);
     }, { deep: true });
-    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    watchFn(_ref, (value) => {
+      clearTimeout(_refTimeout);
+      clearTimeout(_filterTimeout);
+      _filterTimeout = setTimeout(() => {
+        clearTimeout(_refTimeout);
+        applyFilter(name, transform(value), options);
+      }, debounce);
+    });
     return _ref;
   }
   return {
@@ -1360,6 +1375,23 @@ 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();
+  hybridly.registerHook("after", updateState);
+  return state;
+}
+
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
@@ -1377,6 +1409,7 @@ exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
+exports.useQueryParameters = useQueryParameters;
 exports.useRefinements = useRefinements;
 exports.useRoute = useRoute;
 exports.useTable = useTable;

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Meth
 export { can, route, router } from '@hybridly/core';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
 import * as _vue_shared from '@vue/shared';
-import { RequestData } from '@hybridly/utils';
+import { RequestData, FormDataConvertible } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 import * as hybridly from 'hybridly';
 
@@ -713,11 +713,25 @@ type SortDirection = 'asc' | 'desc';
 type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'>;
 interface ToggleSortOptions extends AvailableHybridRequestOptions {
     direction?: SortDirection;
+    /** Additional sort data, only applied when sorting. */
+    sortData?: {
+        [key: string]: FormDataConvertible;
+    };
 }
 interface BindFilterOptions<T> extends AvailableHybridRequestOptions {
     transformValue?: (value?: T) => any;
     /** If specified, this callback will watch the ref and apply  */
     watch?: (ref: Ref<T>, cb: any) => void;
+    /**
+     * The debounce time in milliseconds for updating this filter.
+     * @default 250ms
+     */
+    debounce?: number;
+    /**
+     * The debounce time in milliseconds for updating the ref.
+     * @default 250ms
+     */
+    syncDebounce?: number;
 }
 declare global {
     interface FilterRefinement {
@@ -1221,4 +1235,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     paginator: Exclude<PaginatorKindName extends "cursor" ? CursorPaginator<RecordType> : PaginatorKindName extends "simple" ? SimplePaginator<RecordType> : Paginator<RecordType>, "data">;
 };
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useRefinements, useRoute, useTable };
+/**
+ * Access reactive query parameters.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameters.html
+ */
+declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Meth
 export { can, route, router } from '@hybridly/core';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
 import * as _vue_shared from '@vue/shared';
-import { RequestData } from '@hybridly/utils';
+import { RequestData, FormDataConvertible } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 import * as hybridly from 'hybridly';
 
@@ -713,11 +713,25 @@ type SortDirection = 'asc' | 'desc';
 type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'>;
 interface ToggleSortOptions extends AvailableHybridRequestOptions {
     direction?: SortDirection;
+    /** Additional sort data, only applied when sorting. */
+    sortData?: {
+        [key: string]: FormDataConvertible;
+    };
 }
 interface BindFilterOptions<T> extends AvailableHybridRequestOptions {
     transformValue?: (value?: T) => any;
     /** If specified, this callback will watch the ref and apply  */
     watch?: (ref: Ref<T>, cb: any) => void;
+    /**
+     * The debounce time in milliseconds for updating this filter.
+     * @default 250ms
+     */
+    debounce?: number;
+    /**
+     * The debounce time in milliseconds for updating the ref.
+     * @default 250ms
+     */
+    syncDebounce?: number;
 }
 declare global {
     interface FilterRefinement {
@@ -1221,4 +1235,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     paginator: Exclude<PaginatorKindName extends "cursor" ? CursorPaginator<RecordType> : PaginatorKindName extends "simple" ? SimplePaginator<RecordType> : Paginator<RecordType>, "data">;
 };
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useRefinements, useRoute, useTable };
+/**
+ * Access reactive query parameters.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameters.html
+ */
+declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Meth
 export { can, route, router } from '@hybridly/core';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
 import * as _vue_shared from '@vue/shared';
-import { RequestData } from '@hybridly/utils';
+import { RequestData, FormDataConvertible } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 import * as hybridly from 'hybridly';
 
@@ -713,11 +713,25 @@ type SortDirection = 'asc' | 'desc';
 type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'>;
 interface ToggleSortOptions extends AvailableHybridRequestOptions {
     direction?: SortDirection;
+    /** Additional sort data, only applied when sorting. */
+    sortData?: {
+        [key: string]: FormDataConvertible;
+    };
 }
 interface BindFilterOptions<T> extends AvailableHybridRequestOptions {
     transformValue?: (value?: T) => any;
     /** If specified, this callback will watch the ref and apply  */
     watch?: (ref: Ref<T>, cb: any) => void;
+    /**
+     * The debounce time in milliseconds for updating this filter.
+     * @default 250ms
+     */
+    debounce?: number;
+    /**
+     * The debounce time in milliseconds for updating the ref.
+     * @default 250ms
+     */
+    syncDebounce?: number;
 }
 declare global {
     interface FilterRefinement {
@@ -1221,4 +1235,11 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
     paginator: Exclude<PaginatorKindName extends "cursor" ? CursorPaginator<RecordType> : PaginatorKindName extends "simple" ? SimplePaginator<RecordType> : Paginator<RecordType>, "data">;
 };
 
-export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useRefinements, useRoute, useTable };
+/**
+ * Access reactive query parameters.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameters.html
+ */
+declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+
+export { type Action, type AvailableHybridRequestOptions, type BindFilterOptions, type BulkAction, type BulkSelection, type Column, type InlineAction, type Layout, type RecordIdentifier, RouterLink, type SortDirection, type ToggleSortOptions, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
 import { getByPath, setByPath } from '@clickbar/dot-diver';
 import isEqual from 'lodash.isequal';
-import { router as router$1, route } from 'hybridly';
+import { router as router$1, route, registerHook as registerHook$2 } from 'hybridly';
 
 function progress(options) {
   const resolved = {
@@ -1046,22 +1046,37 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
+    const sortData = next ? options?.sortData ?? {} : Object.fromEntries(Object.entries(options?.sortData ?? {}).map(([key, _]) => [key, void 0]));
     return await router.reload({
       ...defaultOptions,
       ...options,
       data: {
-        [sortsKey.value]: next || void 0
+        [sortsKey.value]: next || void 0,
+        ...sortData
       }
     });
   }
   function bindFilter(name, options = {}) {
+    const debounce = options.debounce ?? 250;
+    const refDebounce = options.syncDebounce ?? 250;
     const transform = options?.transformValue ?? ((value) => value);
     const watchFn = options?.watch ?? watch;
-    const _ref = ref(transform(refinements.value.filters.find((f) => f.name === name)?.value));
+    const getFilterValue = () => transform(refinements.value.filters.find((f) => f.name === name)?.value);
+    const _ref = ref(getFilterValue());
+    let _filterTimeout;
+    let _refTimeout;
     watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
-      _ref.value = transform(filter?.value);
+      clearTimeout(_refTimeout);
+      _refTimeout = setTimeout(() => _ref.value = transform(filter?.value), refDebounce);
     }, { deep: true });
-    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    watchFn(_ref, (value) => {
+      clearTimeout(_refTimeout);
+      clearTimeout(_filterTimeout);
+      _filterTimeout = setTimeout(() => {
+        clearTimeout(_refTimeout);
+        applyFilter(name, transform(value), options);
+      }, debounce);
+    });
     return _ref;
   }
   return {
@@ -1353,4 +1368,21 @@ function useTable(props, key, defaultOptions = {}) {
   });
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useRefinements, useRoute, useTable };
+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$2("after", updateState);
+  return state;
+}
+
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useContext, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameters, useRefinements, useRoute, useTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -39,20 +39,20 @@
   },
   "dependencies": {
     "@clickbar/dot-diver": "^1.0.1",
-    "@vue/devtools-api": "^6.5.0",
-    "defu": "^6.1.2",
+    "@vue/devtools-api": "^6.5.1",
+    "defu": "^6.1.3",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",
-    "@hybridly/core": "0.5.4",
-    "@hybridly/utils": "0.5.4"
+    "@hybridly/utils": "0.5.6",
+    "@hybridly/core": "0.5.6"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.199",
-    "@types/lodash.clonedeep": "^4.5.7",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/nprogress": "^0.2.1",
-    "vue": "^3.3.4"
+    "@types/lodash": "^4.14.200",
+    "@types/lodash.clonedeep": "^4.5.8",
+    "@types/lodash.isequal": "^4.5.7",
+    "@types/nprogress": "^0.2.2",
+    "vue": "^3.3.7"
   },
   "scripts": {
     "build": "unbuild",