@hybridly/vue 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const vue = require('vue');
 const core = require('@hybridly/core');
 const utils = require('@hybridly/utils');
@@ -12,10 +10,10 @@ const dotDiver = require('@clickbar/dot-diver');
 const isEqual = require('lodash.isequal');
 const hybridly = require('hybridly');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
-const qs__default = /*#__PURE__*/_interopDefaultLegacy(qs);
-const isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+const qs__default = /*#__PURE__*/_interopDefaultCompat(qs);
+const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
 
 const DEBUG_KEY = "vue:state:dialog";
 const dialogStore = {
@@ -226,7 +224,9 @@ function setupDevtools(app) {
     });
     const listen = [
       "start",
+      "ready",
       "data",
+      "navigating",
       "navigated",
       "progress",
       "error",
@@ -235,7 +235,9 @@ function setupDevtools(app) {
       "invalid",
       "exception",
       "fail",
-      "after"
+      "after",
+      "backForward",
+      "success"
     ];
     core.registerHook("before", (options) => {
       const groupId = (Math.random() + 1).toString(36).substring(7);
@@ -412,28 +414,36 @@ Please specify a more appropriate element using the "as" attribute. For example:
 
 <RouterLink href="${url}" method="${method}" as="button">...</RouterLink>`);
       }
+      function performPreload(type) {
+        if (!preloads) {
+          return;
+        }
+        if (props.external) {
+          return;
+        }
+        if (method !== "GET") {
+          return;
+        }
+        if (type !== "mount" && props.disabled) {
+          return;
+        }
+        if (type === "hover" && preloads === "mount") {
+          return;
+        }
+        if (type === "mount" && preloads !== "mount") {
+          return;
+        }
+        core.router.preload(url, {
+          data,
+          ...props.options
+        });
+      }
+      performPreload("mount");
       return vue.h(props.as, {
         ...attrs,
         ...as === "a" ? { href: url } : {},
         ...props.disabled ? { disabled: props.disabled } : {},
-        onMouseenter: () => {
-          if (!preloads) {
-            return;
-          }
-          if (props.external) {
-            return;
-          }
-          if (props.disabled) {
-            return;
-          }
-          if (method !== "GET") {
-            return;
-          }
-          core.router.preload(url, {
-            data,
-            ...props.options
-          });
-        },
+        onMouseenter: () => performPreload("hover"),
         onClick: (event) => {
           if (props.external) {
             return;
@@ -492,7 +502,7 @@ Please specify a more appropriate element using the "as" attribute. For example:
       default: void 0
     },
     preload: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     }
   }
@@ -543,6 +553,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);
@@ -692,6 +708,8 @@ function useForm(options) {
     clearError,
     setInitial,
     hasDirty,
+    submitWith: submit,
+    /** @deprecated Use `submitWith` instead */
     submitWithOptions: submit,
     submit: () => submit(),
     hasErrors: vue.computed(() => Object.values(errors.value ?? {}).length > 0),
@@ -783,10 +801,15 @@ const registerHook = (hook, fn, options) => {
 
 function useDialog() {
   return {
+    /** Closes the dialog. */
     close: () => hybridly.router.dialog.close(),
+    /** Closes the dialog without a server round-trip. */
     closeLocally: () => hybridly.router.dialog.close({ local: true }),
+    /** 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),
+    /** Properties of the dialog. */
     properties: vue.computed(() => state.context.value?.dialog?.properties)
   };
 }
@@ -795,6 +818,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 +858,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 +892,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,22 +919,94 @@ 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 {
+    /**
+     * Binds a named filter to a ref, applying filters when it changes and updating the ref accordingly.
+     */
+    bindFilter,
+    /**
+     * Available filters.
+     */
     filters: toReactive(refinements.value.filters),
+    /**
+     * Available sorts.
+     */
     sorts: toReactive(refinements.value.sorts),
+    /**
+     * Gets a filter by name.
+     */
+    getFilter,
+    /**
+     * Gets a sort by name.
+     */
+    getSort,
+    /**
+     * Resets all filters and sorts.
+     */
     reset,
+    /**
+     * Toggles the specified sort.
+     */
     toggleSort,
+    /**
+     * Whether a sort is active.
+     */
     isSorting,
+    /**
+     * Whether a filter is active.
+     */
     isFiltering,
+    /**
+     * The current sorts.
+     */
     currentSorts,
+    /**
+     * The current filters.
+     */
     currentFilters,
+    /**
+     * Clears the given filter.
+     */
     clearFilter,
+    /**
+     * Resets all sorts.
+     */
     clearSorts,
+    /**
+     * Resets all filters.
+     */
     clearFilters,
+    /**
+     * Applies the given filter.
+     */
     applyFilter
   };
 }
 
+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 +1015,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 +1025,4 @@ exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
 exports.useRefinements = useRefinements;
+exports.useRoute = useRoute;