@hybridly/vue 0.5.5 → 0.5.6

package/dist/index.cjs

@@ -1053,11 +1053,13 @@ 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
       }
     });
   }
@@ -1373,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;
@@ -1390,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,6 +713,10 @@ 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;
@@ -1231,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,6 +713,10 @@ 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;
@@ -1231,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,6 +713,10 @@ 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;
@@ -1231,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,11 +1046,13 @@ 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
       }
     });
   }
@@ -1366,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.5",
+  "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.5",
-    "@hybridly/utils": "0.5.5"
+    "@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",