@hybridly/vue 0.4.1 → 0.4.2

package/dist/index.cjs

@@ -543,6 +543,12 @@ function useProperties() {
 function useProperty(path) {
   return vue.computed(() => dotDiver.getByPath(state.context.value?.view.properties, path));
 }
+function setProperty(path, value) {
+  if (!state.context.value?.view.properties) {
+    return;
+  }
+  dotDiver.setByPath(state.context.value.view.properties, path, vue.toValue(value));
+}
 
 function useContext() {
   return vue.computed(() => state.context.value);
@@ -795,6 +801,16 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   const refinements = vue.computed(() => properties[refinementsKeys]);
   const sortsKey = vue.computed(() => refinements.value.keys.sorts);
   const filtersKey = vue.computed(() => refinements.value.keys.filters);
+  defaultOptions = {
+    replace: false,
+    ...defaultOptions
+  };
+  function getSort(name) {
+    return refinements.value.sorts.find((sort) => sort.name === name);
+  }
+  function getFilter(name) {
+    return refinements.value.filters.find((sort) => sort.name === name);
+  }
   async function reset(options = {}) {
     return await core.router.reload({
       ...defaultOptions,
@@ -825,16 +841,21 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
-  async function applyFilter(filter, value, options = {}) {
-    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+  async function applyFilter(name, value, options = {}) {
+    const filter = getFilter(name);
+    if (!filter) {
+      console.warn(`[Refinement] Filter "${name} does not exist."`);
       return;
     }
+    if (["", null].includes(value) || value === filter.default) {
+      value = void 0;
+    }
     return await core.router.reload({
       ...defaultOptions,
       ...options,
       data: {
         [filtersKey.value]: {
-          [filter]: value === "" ? void 0 : value
+          [name]: value
         }
       }
     });
@@ -854,16 +875,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   function currentFilters() {
     return refinements.value.filters.filter(({ is_active }) => is_active);
   }
-  function isSorting() {
+  function isSorting(name) {
+    if (name) {
+      return currentSorts().some((sort) => sort.name === name);
+    }
     return currentSorts().length !== 0;
   }
-  function isFiltering() {
+  function isFiltering(name) {
+    if (name) {
+      return currentFilters().some((filter) => filter.name === name);
+    }
     return currentFilters().length !== 0;
   }
-  async function toggleSort(sortName, options) {
-    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+  async function toggleSort(name, options) {
+    const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      console.warn(`[Refinement] Sort "${name} does not exist."`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -875,9 +902,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
+  function bindFilter(name, options = {}) {
+    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));
+    vue.watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
+      _ref.value = transform(filter?.value);
+    }, { deep: true });
+    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    return _ref;
+  }
   return {
+    bindFilter,
     filters: toReactive(refinements.value.filters),
     sorts: toReactive(refinements.value.sorts),
+    getFilter,
+    getSort,
     reset,
     toggleSort,
     isSorting,
@@ -891,6 +931,20 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
+function useRoute() {
+  const current = vue.ref(hybridly.router.current());
+  function matches(name, parameters) {
+    return hybridly.router.matches(vue.toValue(name), parameters);
+  }
+  registerHook("navigated", () => {
+    current.value = hybridly.router.current();
+  });
+  return {
+    current: vue.readonly(current),
+    matches
+  };
+}
+
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
@@ -899,6 +953,7 @@ exports.defineLayout = defineLayout;
 exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.registerHook = registerHook;
+exports.setProperty = setProperty;
 exports.useBackForward = useBackForward;
 exports.useContext = useContext;
 exports.useDialog = useDialog;
@@ -908,3 +963,4 @@ exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
 exports.useRefinements = useRefinements;
+exports.useRoute = useRoute;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
+import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly, Ref, MaybeRefOrGetter } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
 import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, HybridRequestOptions as HybridRequestOptions$1, UrlResolvable as UrlResolvable$1, registerHook as registerHook$1 } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
@@ -156,6 +156,11 @@ declare const RouterLink: vue.DefineComponent<{
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
 declare function useProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ReturnType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string): ComputedRef<ReturnType>;
+/**
+ * Sets the property at the given path to the given value.
+ * Note: this helper is experimental and may change in the future.
+ */
+declare function setProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ValueType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string, value: ValueType): void;
 
 type UrlResolvable = string | URL | Location;
 type UrlTransformable = BaseUrlTransformable | ((string: URL) => BaseUrlTransformable);
@@ -641,6 +646,11 @@ type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'
 interface ToggleSortOptions extends AvailableHybridRequestOptions {
     direction?: SortDirection;
 }
+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;
+}
 declare global {
     interface FilterRefinement {
         /**
@@ -671,6 +681,10 @@ declare global {
          * Whether this filter is hidden.
          */
         hidden: boolean;
+        /**
+         * The default value of the filter.
+         */
+        default: any;
     }
     interface SortRefinement {
         /**
@@ -745,6 +759,10 @@ declare global {
 declare function useRefinements<Properties extends object, RefinementsKey extends {
     [K in keyof Properties]: Properties[K] extends Refinements ? K : never;
 }[keyof Properties]>(properties: Properties, refinementsKeys: RefinementsKey, defaultOptions?: AvailableHybridRequestOptions): {
+    /**
+     * Binds a named filter to a ref, applying filters when it changes and updating the ref accordingly.
+     */
+    bindFilter: <T = any>(name: string, options?: BindFilterOptions<T>) => Ref<T>;
     /**
      * Available filters.
      */
@@ -753,6 +771,14 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
      * Available sorts.
      */
     sorts: SortRefinement[];
+    /**
+     * Gets a filter by name.
+     */
+    getFilter: (name: string) => FilterRefinement | undefined;
+    /**
+     * Gets a sort by name.
+     */
+    getSort: (name: string) => SortRefinement | undefined;
     /**
      * Resets all filters and sorts.
      */
@@ -760,15 +786,15 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
     /**
      * Toggles the specified sort.
      */
-    toggleSort: (sortName: string, options?: ToggleSortOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+    toggleSort: (name: string, options?: ToggleSortOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
     /**
      * Whether a sort is active.
      */
-    isSorting: () => boolean;
+    isSorting: (name?: string) => boolean;
     /**
      * Whether a filter is active.
      */
-    isFiltering: () => boolean;
+    isFiltering: (name?: string) => boolean;
     /**
      * The current sorts.
      */
@@ -792,7 +818,12 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
     /**
      * Applies the given filter.
      */
-    applyFilter: (filter: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+    applyFilter: (name: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+};
+
+declare function useRoute(): {
+    current: Readonly<vue.Ref<string | undefined>>;
+    matches: <T extends string>(name: MaybeRefOrGetter<T>, parameters?: Record<string, any> | undefined) => boolean;
 };
 
-export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements, useRoute };

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, toValue, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { registerHook as registerHook$1, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { debug, random, showPageComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
-import { getByPath } from '@clickbar/dot-diver';
+import { getByPath, setByPath } from '@clickbar/dot-diver';
 import isEqual from 'lodash.isequal';
 import { router as router$1 } from 'hybridly';
 
@@ -535,6 +535,12 @@ function useProperties() {
 function useProperty(path) {
   return computed(() => getByPath(state.context.value?.view.properties, path));
 }
+function setProperty(path, value) {
+  if (!state.context.value?.view.properties) {
+    return;
+  }
+  setByPath(state.context.value.view.properties, path, toValue(value));
+}
 
 function useContext() {
   return computed(() => state.context.value);
@@ -787,6 +793,16 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   const refinements = computed(() => properties[refinementsKeys]);
   const sortsKey = computed(() => refinements.value.keys.sorts);
   const filtersKey = computed(() => refinements.value.keys.filters);
+  defaultOptions = {
+    replace: false,
+    ...defaultOptions
+  };
+  function getSort(name) {
+    return refinements.value.sorts.find((sort) => sort.name === name);
+  }
+  function getFilter(name) {
+    return refinements.value.filters.find((sort) => sort.name === name);
+  }
   async function reset(options = {}) {
     return await router.reload({
       ...defaultOptions,
@@ -817,16 +833,21 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
-  async function applyFilter(filter, value, options = {}) {
-    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+  async function applyFilter(name, value, options = {}) {
+    const filter = getFilter(name);
+    if (!filter) {
+      console.warn(`[Refinement] Filter "${name} does not exist."`);
       return;
     }
+    if (["", null].includes(value) || value === filter.default) {
+      value = void 0;
+    }
     return await router.reload({
       ...defaultOptions,
       ...options,
       data: {
         [filtersKey.value]: {
-          [filter]: value === "" ? void 0 : value
+          [name]: value
         }
       }
     });
@@ -846,16 +867,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   function currentFilters() {
     return refinements.value.filters.filter(({ is_active }) => is_active);
   }
-  function isSorting() {
+  function isSorting(name) {
+    if (name) {
+      return currentSorts().some((sort) => sort.name === name);
+    }
     return currentSorts().length !== 0;
   }
-  function isFiltering() {
+  function isFiltering(name) {
+    if (name) {
+      return currentFilters().some((filter) => filter.name === name);
+    }
     return currentFilters().length !== 0;
   }
-  async function toggleSort(sortName, options) {
-    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+  async function toggleSort(name, options) {
+    const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      console.warn(`[Refinement] Sort "${name} does not exist."`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -867,9 +894,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
+  function bindFilter(name, options = {}) {
+    const transform = options?.transformValue ?? ((value) => value);
+    const watchFn = options?.watch ?? watch;
+    const _ref = ref(transform(refinements.value.filters.find((f) => f.name === name)?.value));
+    watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
+      _ref.value = transform(filter?.value);
+    }, { deep: true });
+    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    return _ref;
+  }
   return {
+    bindFilter,
     filters: toReactive(refinements.value.filters),
     sorts: toReactive(refinements.value.sorts),
+    getFilter,
+    getSort,
     reset,
     toggleSort,
     isSorting,
@@ -883,4 +923,18 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+function useRoute() {
+  const current = ref(router$1.current());
+  function matches(name, parameters) {
+    return router$1.matches(toValue(name), parameters);
+  }
+  registerHook("navigated", () => {
+    current.value = router$1.current();
+  });
+  return {
+    current: readonly(current),
+    matches
+  };
+}
+
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements, useRoute };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -44,9 +44,9 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",
-    "@hybridly/core": "0.4.1",
-    "@hybridly/progress-plugin": "0.4.1",
-    "@hybridly/utils": "0.4.1"
+    "@hybridly/core": "0.4.2",
+    "@hybridly/progress-plugin": "0.4.2",
+    "@hybridly/utils": "0.4.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",