@hybridly/vue 0.2.1 → 0.3.1

package/dist/index.cjs

@@ -645,15 +645,15 @@ function useForm(options) {
     if (keys.length === 0) {
       return isDirty.value;
     }
-    return keys.some((key) => !isEqual__default(vue.toRaw(fields[key]), vue.toRaw(initial[key])));
+    return keys.some((key) => !isEqual__default(vue.toRaw(dotDiver.getByPath(fields, key)), vue.toRaw(dotDiver.getByPath(initial, key))));
   }
   function clearError(key) {
-    delete errors.value[key];
+    utils.unsetPropertyAtPath(errors.value, key);
   }
   function setErrors(incoming) {
     clearErrors();
-    Object.entries(incoming).forEach(([key, value]) => {
-      errors.value[key] = value;
+    Object.entries(incoming).forEach(([path, value]) => {
+      utils.setValueAtPath(errors.value, path, value);
     });
   }
   function abort() {
@@ -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

@@ -218,7 +218,7 @@ interface RequestHooks {
     /**
      * Called when a request is successful but there were errors.
      */
-    error: (errors: Errors, context: InternalRouterContext) => MaybePromise<any>;
+    error: (errors: Errors$1, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a request has been aborted.
      */
@@ -406,9 +406,7 @@ interface Progress {
     /** Computed percentage. */
     percentage: Readonly<number>;
 }
-interface Errors {
-    [key: string]: string;
-}
+type Errors$1 = any;
 
 interface Plugin extends Partial<Hooks> {
     /** Identifier of the plugin. */
@@ -475,8 +473,10 @@ interface Serializer {
 /** Accesses the hybridly context. */
 declare function useContext(): vue.ComputedRef<Readonly<InternalRouterContext> | undefined>;
 
-type Fields = Record<string, any>;
-interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'data' | 'url'> {
+type Errors<T extends SearchableObject> = {
+    [K in keyof T]?: T[K] extends Record<string, any> ? Errors<T[K]> : string;
+};
+interface FormOptions<T extends SearchableObject> extends Omit<HybridRequestOptions$1, 'data' | 'url'> {
     fields: T;
     url?: UrlResolvable$1 | (() => UrlResolvable$1);
     key?: string | false;
@@ -497,18 +497,18 @@ interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'da
     /**
      * Callback executed before the form submission for transforming the fields.
      */
-    transform?: (fields: T) => Fields;
+    transform?: (fields: T) => any;
 }
-declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
-    reset: (...keys: (keyof T)[]) => void;
-    clear: (...keys: (keyof T)[]) => void;
-    fields: vue.UnwrapRef<vue.UnwrapNestedRefs<T>>;
+declare function useForm<T extends SearchableObject, P extends Path<T> & string = Path<T> & string>(options: FormOptions<T>): {
+    reset: (...keys: P[]) => void;
+    clear: (...keys: P[]) => void;
+    fields: vue.UnwrapRef<T>;
     abort: () => void;
-    setErrors: (incoming: Record<string, string>) => void;
-    clearErrors: (...keys: (keyof T)[]) => void;
-    clearError: (key: keyof T) => void;
+    setErrors: (incoming: Errors<T>) => void;
+    clearErrors: (...keys: P[]) => void;
+    clearError: (key: P) => void;
     setInitial: (newInitial: Partial<T>) => void;
-    hasDirty: (...keys: (keyof T)[]) => boolean;
+    hasDirty: (...keys: P[]) => boolean;
     submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions$1, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
@@ -529,7 +529,7 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
         readonly percentage: number;
     } | undefined;
     isDirty: boolean;
-    errors: vue.UnwrapRef<DeepReadonly<[Record<keyof T, string>] extends [vue.Ref<any>] ? vue.Ref<any> & Record<keyof T, string> : vue.Ref<vue.UnwrapRef<Record<keyof T, string>>>>>;
+    errors: vue.UnwrapRef<DeepReadonly<[Errors<T>] extends [vue.Ref<any>] ? vue.Ref<any> & Errors<T> : vue.Ref<vue.UnwrapRef<Errors<T>>>>>;
     processing: boolean;
     successful: boolean;
     failed: boolean;
@@ -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

@@ -1,7 +1,7 @@
 import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, 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, showDomainsDisabledErrorModal, showPageComponentErrorModal, merge, clone } from '@hybridly/utils';
+import { debug, random, showDomainsDisabledErrorModal, showPageComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
@@ -637,15 +637,15 @@ function useForm(options) {
     if (keys.length === 0) {
       return isDirty.value;
     }
-    return keys.some((key) => !isEqual(toRaw(fields[key]), toRaw(initial[key])));
+    return keys.some((key) => !isEqual(toRaw(getByPath(fields, key)), toRaw(getByPath(initial, key))));
   }
   function clearError(key) {
-    delete errors.value[key];
+    unsetPropertyAtPath(errors.value, key);
   }
   function setErrors(incoming) {
     clearErrors();
-    Object.entries(incoming).forEach(([key, value]) => {
-      errors.value[key] = value;
+    Object.entries(incoming).forEach(([path, value]) => {
+      setValueAtPath(errors.value, path, value);
     });
   }
   function abort() {
@@ -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.1",
+  "version": "0.3.1",
   "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.1",
-    "@hybridly/core": "0.2.1",
-    "@hybridly/progress-plugin": "0.2.1",
-    "@hybridly/utils": "0.2.1"
+    "@hybridly/config": "0.3.1",
+    "@hybridly/core": "0.3.1",
+    "@hybridly/progress-plugin": "0.3.1",
+    "@hybridly/utils": "0.3.1"
   },
   "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",