@hybridly/vue 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -777,6 +777,106 @@ function useDialog() {
   };
 }
 
+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);
+  async function reset(options = {}) {
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: void 0,
+        [sortsKey.value]: void 0
+      }
+    });
+  }
+  async function clearFilters(options = {}) {
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: void 0
+      }
+    });
+  }
+  async function clearFilter(filter, options = {}) {
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: {
+          [filter]: void 0
+        }
+      }
+    });
+  }
+  async function applyFilter(filter, value, options = {}) {
+    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+      return;
+    }
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: {
+          [filter]: value === "" ? void 0 : value
+        }
+      }
+    });
+  }
+  async function clearSorts(options = {}) {
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [sortsKey.value]: void 0
+      }
+    });
+  }
+  function currentSorts() {
+    return refinements.value.sorts.filter(({ is_active }) => is_active);
+  }
+  function currentFilters() {
+    return refinements.value.filters.filter(({ is_active }) => is_active);
+  }
+  function isSorting() {
+    return currentSorts().length !== 0;
+  }
+  function isFiltering() {
+    return currentFilters().length !== 0;
+  }
+  async function toggleSort(sortName, options) {
+    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+    if (!sort) {
+      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      return;
+    }
+    const next = options?.direction ? sort[options?.direction] : sort.next;
+    return await core.router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [sortsKey.value]: next || void 0
+      }
+    });
+  }
+  return {
+    filters: toReactive(refinements.value.filters),
+    sorts: toReactive(refinements.value.sorts),
+    reset,
+    toggleSort,
+    isSorting,
+    isFiltering,
+    currentSorts,
+    currentFilters,
+    clearFilter,
+    clearSorts,
+    clearFilters,
+    applyFilter
+  };
+}
+
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
@@ -794,3 +894,4 @@ exports.useHistoryState = useHistoryState;
 exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
+exports.useRefinements = useRefinements;

package/dist/index.d.ts

@@ -658,4 +658,163 @@ declare function useDialog(): {
     properties: vue.ComputedRef<Properties | undefined>;
 };
 
-export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty };
+type SortDirection = 'asc' | 'desc';
+type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'>;
+interface ToggleSortOptions extends AvailableHybridRequestOptions {
+    direction?: SortDirection;
+}
+declare global {
+    interface FilterRefinement {
+        /**
+         * Whether this filter is currently active.
+         */
+        is_active: boolean;
+        /**
+         * The type of this filter.
+         */
+        type: 'trashed' | 'callback' | 'exact' | 'similarity:loose' | 'similarity:begins_with_strict' | 'similarity:ends_with_strict' | string;
+        /**
+         * The label of the filter.
+         */
+        label: string;
+        /**
+         * The metadata attributes of the filter.
+         */
+        metadata: Record<string, any>;
+        /**
+         * The name of the fitler.
+         */
+        name: string;
+        /**
+         * The current value of the filter.
+         */
+        value: any;
+        /**
+         * Whether this filter is hidden.
+         */
+        hidden: boolean;
+    }
+    interface SortRefinement {
+        /**
+         * Whether this sort is currently active.
+         */
+        is_active: boolean;
+        /**
+         * The current direction of the sort.
+         */
+        direction?: SortDirection;
+        /**
+         * The default direction of the sort.
+         */
+        default?: SortDirection;
+        /**
+         * The label of the sort.
+         */
+        label: string;
+        /**
+         * The metadata attributes of the sort.
+         */
+        metadata: Record<string, any>;
+        /**
+         * The name of the sort.
+         */
+        name: string;
+        /**
+         * The value corresponding to the descending sort.
+         */
+        desc: string;
+        /**
+         * The value corresponding to the ascending sort.
+         */
+        asc: string;
+        /**
+         * The value that will be applied on toggle.
+         */
+        next: string;
+        /**
+         * Whether this sort is hidden.
+         */
+        hidden: boolean;
+    }
+    interface Refinements {
+        /**
+         * The list of available filters.
+         */
+        filters: Array<FilterRefinement>;
+        /**
+         * The list of available sorts.
+         */
+        sorts: Array<SortRefinement>;
+        /**
+         * The URL scope for these refinements.
+         */
+        scope?: string;
+        /**
+         * The scope keys for these refinements.
+         */
+        keys: {
+            /**
+             * The scope key for sorting.
+             */
+            sorts: string;
+            /**
+             * The scope key for filtering.
+             */
+            filters: string;
+        };
+    }
+}
+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): {
+    /**
+     * Available filters.
+     */
+    filters: FilterRefinement[];
+    /**
+     * Available sorts.
+     */
+    sorts: SortRefinement[];
+    /**
+     * Resets all filters and sorts.
+     */
+    reset: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
+    /**
+     * Toggles the specified sort.
+     */
+    toggleSort: (sortName: string, options?: ToggleSortOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+    /**
+     * Whether a sort is active.
+     */
+    isSorting: () => boolean;
+    /**
+     * Whether a filter is active.
+     */
+    isFiltering: () => boolean;
+    /**
+     * The current sorts.
+     */
+    currentSorts: () => Array<SortRefinement>;
+    /**
+     * The current filters.
+     */
+    currentFilters: () => Array<FilterRefinement>;
+    /**
+     * Clears the given filter.
+     */
+    clearFilter: (filter: string, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
+    /**
+     * Resets all sorts.
+     */
+    clearSorts: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
+    /**
+     * Resets all filters.
+     */
+    clearFilters: (options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse>;
+    /**
+     * Applies the given filter.
+     */
+    applyFilter: (filter: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+};
+
+export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };

package/dist/index.mjs

@@ -769,4 +769,104 @@ function useDialog() {
   };
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty };
+function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
+  const refinements = computed(() => properties[refinementsKeys]);
+  const sortsKey = computed(() => refinements.value.keys.sorts);
+  const filtersKey = computed(() => refinements.value.keys.filters);
+  async function reset(options = {}) {
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: void 0,
+        [sortsKey.value]: void 0
+      }
+    });
+  }
+  async function clearFilters(options = {}) {
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: void 0
+      }
+    });
+  }
+  async function clearFilter(filter, options = {}) {
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: {
+          [filter]: void 0
+        }
+      }
+    });
+  }
+  async function applyFilter(filter, value, options = {}) {
+    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+      return;
+    }
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [filtersKey.value]: {
+          [filter]: value === "" ? void 0 : value
+        }
+      }
+    });
+  }
+  async function clearSorts(options = {}) {
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [sortsKey.value]: void 0
+      }
+    });
+  }
+  function currentSorts() {
+    return refinements.value.sorts.filter(({ is_active }) => is_active);
+  }
+  function currentFilters() {
+    return refinements.value.filters.filter(({ is_active }) => is_active);
+  }
+  function isSorting() {
+    return currentSorts().length !== 0;
+  }
+  function isFiltering() {
+    return currentFilters().length !== 0;
+  }
+  async function toggleSort(sortName, options) {
+    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+    if (!sort) {
+      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      return;
+    }
+    const next = options?.direction ? sort[options?.direction] : sort.next;
+    return await router.reload({
+      ...defaultOptions,
+      ...options,
+      data: {
+        [sortsKey.value]: next || void 0
+      }
+    });
+  }
+  return {
+    filters: toReactive(refinements.value.filters),
+    sorts: toReactive(refinements.value.sorts),
+    reset,
+    toggleSort,
+    isSorting,
+    isFiltering,
+    currentSorts,
+    currentFilters,
+    clearFilter,
+    clearSorts,
+    clearFilters,
+    applyFilter
+  };
+}
+
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -44,13 +44,13 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.1",
-    "@hybridly/config": "0.2.0",
-    "@hybridly/core": "0.2.0",
-    "@hybridly/progress-plugin": "0.2.0",
-    "@hybridly/utils": "0.2.0"
+    "@hybridly/config": "0.3.0",
+    "@hybridly/core": "0.3.0",
+    "@hybridly/progress-plugin": "0.3.0",
+    "@hybridly/utils": "0.3.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.192",
+    "@types/lodash": "^4.14.194",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/nprogress": "^0.2.0",