@hybridly/vue 0.7.10 → 0.7.11

package/dist/index.cjs

@@ -947,7 +947,7 @@ function useDialog() {
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => dialogStore.removeComponent(),
     /** Whether the dialog is shown. */
-    show: vue.computed(() => dialogStore.state.show.value),
+    show: vue.computed({ get: () => dialogStore.state.show.value, set: (v) => !v ? core.router.dialog.close({ local: true }) : null }),
     /** Properties of the dialog. */
     properties: vue.computed(() => state.context.value?.dialog?.properties)
   };
@@ -1186,15 +1186,19 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
+const isNavigating = vue.ref(false);
 function useRoute() {
   const current = vue.ref(core.router.current());
   function matches(name, parameters) {
     return core.router.matches(vue.toValue(name), parameters);
   }
+  registerHook("before", () => isNavigating.value = true);
+  registerHook("after", () => isNavigating.value = false);
   registerHook("navigated", () => {
     current.value = core.router.current();
   });
   return {
+    isNavigating: vue.readonly(isNavigating),
     current: vue.readonly(current),
     matches
   };
@@ -1322,7 +1326,7 @@ function useTable(props, key, defaultOptions = {}) {
     /** Deselects records on the current page. */
     deselectPage: () => bulk.deselect(...table.value.records.map((record) => getRecordKey(record))),
     /** Whether all records on the current page are selected. */
-    isPageSelected: vue.computed(() => table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
+    isPageSelected: vue.computed(() => table.value.records.length > 0 && table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
     /** Checks if the given record is selected. */
     isSelected: (record) => bulk.selected(getRecordKey(record)),
     /** Whether all records are selected. */
@@ -1418,6 +1422,28 @@ function useQueryParameters() {
   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;
@@ -1433,6 +1459,7 @@ exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
+exports.useQueryParameter = useQueryParameter;
 exports.useQueryParameters = useQueryParameters;
 exports.useRefinements = useRefinements;
 exports.useRoute = useRoute;

package/dist/index.d.cts

@@ -224,7 +224,7 @@ declare function useDialog(): {
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => void;
     /** Whether the dialog is shown. */
-    show: vue.ComputedRef<boolean | undefined>;
+    show: vue.WritableComputedRef<boolean | undefined>;
     /** Properties of the dialog. */
     properties: vue.ComputedRef<Properties | undefined>;
 };
@@ -522,6 +522,7 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
 };
 
 declare function useRoute(): {
+    isNavigating: Readonly<vue.Ref<boolean>>;
     current: Readonly<vue.Ref<string | undefined>>;
     matches: <T extends RouteName>(name: MaybeRefOrGetter<T>, parameters?: RouteParameters<T>) => boolean;
 };
@@ -744,6 +745,35 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
  * @see https://hybridly.dev/api/utils/use-query-parameters.html
  */
 declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+type RouteParameter = string | number | boolean | null | undefined;
+type TransformFunction<V extends RouteParameter, R> = (val: V) => R;
+type TransformType<T extends RouteParameter, O> = O extends {
+    transform: 'number';
+} ? number : O extends {
+    transform: 'bool';
+} ? boolean : O extends {
+    transform: 'string';
+} ? string : O extends {
+    transform: 'date';
+} ? Date : O extends {
+    transform: TransformFunction<T, infer R>;
+} ? R : T;
+interface UseQueryParameterOptions<V extends RouteParameter, R> {
+    /**
+     * Specifies a default value if the query parameter does not exist.
+     */
+    defaultValue?: MaybeRefOrGetter<R>;
+    /**
+     * Transforms the query parameter.
+     */
+    transform?: 'number' | 'bool' | 'string' | 'date' | TransformFunction<V, R>;
+}
+/**
+ * Makes the specified query parameter reactive.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameter.html
+ */
+declare function useQueryParameter<ParameterType extends RouteParameter = RouteParameter, Options extends UseQueryParameterOptions<ParameterType, any> = UseQueryParameterOptions<ParameterType, ParameterType>>(name: string, options?: Options): Ref<TransformType<ParameterType, Options>>;
 
 /**
  * Initializes Hybridly's router and context.
@@ -921,4 +951,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, 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 ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.mts

@@ -224,7 +224,7 @@ declare function useDialog(): {
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => void;
     /** Whether the dialog is shown. */
-    show: vue.ComputedRef<boolean | undefined>;
+    show: vue.WritableComputedRef<boolean | undefined>;
     /** Properties of the dialog. */
     properties: vue.ComputedRef<Properties | undefined>;
 };
@@ -522,6 +522,7 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
 };
 
 declare function useRoute(): {
+    isNavigating: Readonly<vue.Ref<boolean>>;
     current: Readonly<vue.Ref<string | undefined>>;
     matches: <T extends RouteName>(name: MaybeRefOrGetter<T>, parameters?: RouteParameters<T>) => boolean;
 };
@@ -744,6 +745,35 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
  * @see https://hybridly.dev/api/utils/use-query-parameters.html
  */
 declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+type RouteParameter = string | number | boolean | null | undefined;
+type TransformFunction<V extends RouteParameter, R> = (val: V) => R;
+type TransformType<T extends RouteParameter, O> = O extends {
+    transform: 'number';
+} ? number : O extends {
+    transform: 'bool';
+} ? boolean : O extends {
+    transform: 'string';
+} ? string : O extends {
+    transform: 'date';
+} ? Date : O extends {
+    transform: TransformFunction<T, infer R>;
+} ? R : T;
+interface UseQueryParameterOptions<V extends RouteParameter, R> {
+    /**
+     * Specifies a default value if the query parameter does not exist.
+     */
+    defaultValue?: MaybeRefOrGetter<R>;
+    /**
+     * Transforms the query parameter.
+     */
+    transform?: 'number' | 'bool' | 'string' | 'date' | TransformFunction<V, R>;
+}
+/**
+ * Makes the specified query parameter reactive.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameter.html
+ */
+declare function useQueryParameter<ParameterType extends RouteParameter = RouteParameter, Options extends UseQueryParameterOptions<ParameterType, any> = UseQueryParameterOptions<ParameterType, ParameterType>>(name: string, options?: Options): Ref<TransformType<ParameterType, Options>>;
 
 /**
  * Initializes Hybridly's router and context.
@@ -921,4 +951,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, 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 ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.d.ts

@@ -224,7 +224,7 @@ declare function useDialog(): {
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => void;
     /** Whether the dialog is shown. */
-    show: vue.ComputedRef<boolean | undefined>;
+    show: vue.WritableComputedRef<boolean | undefined>;
     /** Properties of the dialog. */
     properties: vue.ComputedRef<Properties | undefined>;
 };
@@ -522,6 +522,7 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
 };
 
 declare function useRoute(): {
+    isNavigating: Readonly<vue.Ref<boolean>>;
     current: Readonly<vue.Ref<string | undefined>>;
     matches: <T extends RouteName>(name: MaybeRefOrGetter<T>, parameters?: RouteParameters<T>) => boolean;
 };
@@ -744,6 +745,35 @@ declare function useTable<RecordType extends (Props[PropsKey] extends Table<infe
  * @see https://hybridly.dev/api/utils/use-query-parameters.html
  */
 declare function useQueryParameters<T extends Record<string, any> = Record<string, any>>(): T;
+type RouteParameter = string | number | boolean | null | undefined;
+type TransformFunction<V extends RouteParameter, R> = (val: V) => R;
+type TransformType<T extends RouteParameter, O> = O extends {
+    transform: 'number';
+} ? number : O extends {
+    transform: 'bool';
+} ? boolean : O extends {
+    transform: 'string';
+} ? string : O extends {
+    transform: 'date';
+} ? Date : O extends {
+    transform: TransformFunction<T, infer R>;
+} ? R : T;
+interface UseQueryParameterOptions<V extends RouteParameter, R> {
+    /**
+     * Specifies a default value if the query parameter does not exist.
+     */
+    defaultValue?: MaybeRefOrGetter<R>;
+    /**
+     * Transforms the query parameter.
+     */
+    transform?: 'number' | 'bool' | 'string' | 'date' | TransformFunction<V, R>;
+}
+/**
+ * Makes the specified query parameter reactive.
+ *
+ * @see https://hybridly.dev/api/utils/use-query-parameter.html
+ */
+declare function useQueryParameter<ParameterType extends RouteParameter = RouteParameter, Options extends UseQueryParameterOptions<ParameterType, any> = UseQueryParameterOptions<ParameterType, ParameterType>>(name: string, options?: Options): Ref<TransformType<ParameterType, Options>>;
 
 /**
  * Initializes Hybridly's router and context.
@@ -921,4 +951,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, 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 ToggleSortOptions, initializeHybridly, registerHook, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };

package/dist/index.mjs

@@ -940,7 +940,7 @@ function useDialog() {
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => dialogStore.removeComponent(),
     /** Whether the dialog is shown. */
-    show: computed(() => dialogStore.state.show.value),
+    show: computed({ get: () => dialogStore.state.show.value, set: (v) => !v ? router.dialog.close({ local: true }) : null }),
     /** Properties of the dialog. */
     properties: computed(() => state.context.value?.dialog?.properties)
   };
@@ -1179,15 +1179,19 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
+const isNavigating = ref(false);
 function useRoute() {
   const current = ref(router.current());
   function matches(name, parameters) {
     return router.matches(toValue(name), parameters);
   }
+  registerHook("before", () => isNavigating.value = true);
+  registerHook("after", () => isNavigating.value = false);
   registerHook("navigated", () => {
     current.value = router.current();
   });
   return {
+    isNavigating: readonly(isNavigating),
     current: readonly(current),
     matches
   };
@@ -1315,7 +1319,7 @@ function useTable(props, key, defaultOptions = {}) {
     /** Deselects records on the current page. */
     deselectPage: () => bulk.deselect(...table.value.records.map((record) => getRecordKey(record))),
     /** Whether all records on the current page are selected. */
-    isPageSelected: computed(() => table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
+    isPageSelected: computed(() => table.value.records.length > 0 && table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
     /** Checks if the given record is selected. */
     isSelected: (record) => bulk.selected(getRecordKey(record)),
     /** Whether all records are selected. */
@@ -1411,5 +1415,27 @@ function useQueryParameters() {
   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, useQueryParameters, useRefinements, useRoute, useTable };
+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.10",
+  "version": "0.7.11",
   "description": "Vue adapter for Hybridly",
   "author": "Enzo Innocenzi <enzo@innocenzi.dev>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.12.1",
-    "@hybridly/core": "0.7.10",
-    "@hybridly/utils": "0.7.10"
+    "@hybridly/utils": "0.7.11",
+    "@hybridly/core": "0.7.11"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.6",