@hybridly/vue 0.4.2 → 0.4.4

package/dist/index.cjs

@@ -1,21 +1,138 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const vue = require('vue');
 const core = require('@hybridly/core');
 const utils = require('@hybridly/utils');
-const progressPlugin = require('@hybridly/progress-plugin');
+const nprogress = require('nprogress');
 const devtoolsApi = require('@vue/devtools-api');
 const qs = require('qs');
 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 nprogress__default = /*#__PURE__*/_interopDefaultCompat(nprogress);
+const qs__default = /*#__PURE__*/_interopDefaultCompat(qs);
+const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+
+function progress(options) {
+  const resolved = {
+    delay: 250,
+    color: "#29d",
+    includeCSS: true,
+    spinner: false,
+    ...options
+  };
+  let timeout;
+  function startProgress() {
+    nprogress__default.start();
+  }
+  function finishProgress() {
+    if (nprogress__default.isStarted()) {
+      nprogress__default.done(true);
+    }
+  }
+  function cancelProgress() {
+    if (nprogress__default.isStarted()) {
+      nprogress__default.done(true);
+      nprogress__default.remove();
+    }
+  }
+  return core.definePlugin({
+    name: "hybridly:progress",
+    initialized() {
+      nprogress__default.configure({ showSpinner: resolved.spinner });
+      if (resolved.includeCSS) {
+        injectCSS(resolved.color);
+      }
+    },
+    start: (context) => {
+      if (context.pendingNavigation?.options.progress === false) {
+        return;
+      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        finishProgress();
+        startProgress();
+      }, resolved.delay);
+    },
+    progress: (progress2) => {
+      if (nprogress__default.isStarted() && progress2.percentage) {
+        nprogress__default.set(Math.max(nprogress__default.status, progress2.percentage / 100 * 0.9));
+      }
+    },
+    success: () => finishProgress(),
+    error: () => cancelProgress(),
+    fail: () => cancelProgress(),
+    after: () => clearTimeout(timeout)
+  });
+}
+function injectCSS(color) {
+  const element = document.createElement("style");
+  element.textContent = `
+    #nprogress {
+      pointer-events: none;
+			--progress-color: ${color};
+    }
+    #nprogress .bar {
+      background: var(--progress-color);
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px var(--progress-color), 0 0 5px var(--progress-color);
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: var(--progress-color);
+      border-left-color: var(--progress-color);
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(element);
+}
 
 const DEBUG_KEY = "vue:state:dialog";
 const dialogStore = {
@@ -226,7 +343,9 @@ function setupDevtools(app) {
     });
     const listen = [
       "start",
+      "ready",
       "data",
+      "navigating",
       "navigated",
       "progress",
       "error",
@@ -235,7 +354,9 @@ function setupDevtools(app) {
       "invalid",
       "exception",
       "fail",
-      "after"
+      "after",
+      "backForward",
+      "success"
     ];
     core.registerHook("before", (options) => {
       const groupId = (Math.random() + 1).toString(36).substring(7);
@@ -276,6 +397,29 @@ const devtools = {
   }
 };
 
+function viewTransition() {
+  if (!document.startViewTransition) {
+    return { name: "view-transition" };
+  }
+  let domUpdated;
+  return {
+    name: "view-transition",
+    navigating: async ({ isInitial }) => {
+      if (isInitial) {
+        return;
+      }
+      return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
+        confirmTransitionStarted(true);
+        return new Promise((resolve) => domUpdated = resolve);
+      }));
+    },
+    mounted: () => {
+      domUpdated?.();
+      domUpdated = void 0;
+    }
+  };
+}
+
 async function initializeHybridly(options = {}) {
   const resolved = options;
   const { element, payload, resolve } = prepare(resolved);
@@ -361,11 +505,12 @@ function prepare(options) {
     }
     return await resolveViewComponent(name, options);
   };
+  options.plugins ?? (options.plugins = []);
   if (options.progress !== false) {
-    options.plugins = [
-      progressPlugin.progress(typeof options.progress === "object" ? options.progress : {}),
-      ...options.plugins ?? []
-    ];
+    options.plugins.push(progress(typeof options.progress === "object" ? options.progress : {}));
+  }
+  if (options.viewTransition !== false) {
+    options.plugins.push(viewTransition());
   }
   return {
     isServer,
@@ -412,28 +557,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 +645,7 @@ Please specify a more appropriate element using the "as" attribute. For example:
       default: void 0
     },
     preload: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     }
   }
@@ -698,6 +851,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),
@@ -789,10 +944,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)
   };
 }
@@ -913,20 +1073,65 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
     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
   };
 }