@hybridly/vue 0.6.1 → 0.7.0

package/dist/index.cjs

@@ -8,7 +8,6 @@ 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 _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -26,18 +25,16 @@ function progress(options) {
   };
   let timeout;
   function startProgress() {
+    nprogress__default.done();
+    nprogress__default.remove();
     nprogress__default.start();
   }
   function finishProgress() {
     if (nprogress__default.isStarted()) {
       nprogress__default.done(true);
+      setTimeout(() => nprogress__default.remove(), 1e3);
     }
-  }
-  function cancelProgress() {
-    if (nprogress__default.isStarted()) {
-      nprogress__default.done(true);
-      nprogress__default.remove();
-    }
+    clearTimeout(timeout);
   }
   return core.definePlugin({
     name: "hybridly:progress",
@@ -52,20 +49,14 @@ function progress(options) {
         return;
       }
       clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        finishProgress();
-        startProgress();
-      }, resolved.delay);
+      timeout = setTimeout(() => 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)
+    after: () => finishProgress()
   });
 }
 function injectCSS(color) {
@@ -177,11 +168,9 @@ const dialogStore = {
 const onMountedCallbacks = [];
 
 const state = {
-  context: vue.ref(),
+  context: vue.shallowRef(),
   view: vue.shallowRef(),
   properties: vue.ref(),
-  viewLayout: vue.shallowRef(),
-  viewLayoutProperties: vue.ref(),
   viewKey: vue.ref(),
   setView(view) {
     utils.debug.adapter("vue:state:view", "Storing view:", view);
@@ -191,18 +180,9 @@ const state = {
     utils.debug.adapter("vue:state:view", "Storing properties:", properties);
     state.properties.value = properties;
   },
-  setViewLayout(layout) {
-    utils.debug.adapter("vue:state:view", "Storing layout", layout);
-    state.viewLayout.value = layout;
-  },
-  setViewLayoutProperties(properties) {
-    utils.debug.adapter("vue:state:view", "Storing layout properties:", properties);
-    state.viewLayoutProperties.value = properties;
-  },
   setContext(context) {
     utils.debug.adapter("vue:state:context", "Storing context:", context);
     state.context.value = vue.unref(context);
-    vue.triggerRef(state.context);
   },
   setViewKey(key) {
     utils.debug.adapter("vue:state:key", "Storing view key:", key);
@@ -222,7 +202,7 @@ const wrapper = vue.defineComponent({
         const layoutsAndView = state.view.value.layout.concat(view).reverse().reduce((child, layout) => {
           layout.inheritAttrs = !!layout.inheritAttrs;
           return vue.h(layout, {
-            ...state.view.value?.layoutProperties ?? {},
+            ...state.view.value?.properties ?? {},
             ...state.properties.value
           }, () => child);
         });
@@ -230,7 +210,7 @@ const wrapper = vue.defineComponent({
       }
       return [
         vue.h(state.view.value?.layout, {
-          ...state.view.value?.layoutProperties ?? {},
+          ...state.view.value?.properties ?? {},
           ...state.properties.value
         }, () => view),
         renderDialog()
@@ -276,13 +256,6 @@ const wrapper = vue.defineComponent({
       }
       utils.debug.adapter("vue:render:wrapper", "Rendering wrapper component.", a.map(vue.toRaw));
       const view = renderView();
-      if (state.viewLayout.value) {
-        state.view.value.layout = state.viewLayout.value;
-      }
-      if (state.viewLayoutProperties.value) {
-        state.view.value.layoutProperties = state.viewLayoutProperties.value;
-        state.viewLayoutProperties.value = void 0;
-      }
       if (state.view.value.layout) {
         return renderLayout(view);
       }
@@ -488,7 +461,8 @@ async function initializeHybridly(options = {}) {
       wrapper,
       render,
       hybridly: devtools,
-      props: { context: state.context.value }
+      props: { context: state.context.value },
+      payload
     });
   }
   const app = vue.createApp({ render });
@@ -729,10 +703,6 @@ function setProperty(path, value) {
   dotDiver.setByPath(state.context.value.view.properties, path, vue.toValue(value));
 }
 
-function useContext() {
-  return vue.computed(() => state.context.value);
-}
-
 function safeClone(obj) {
   return utils.clone(vue.toRaw(obj));
 }
@@ -859,7 +829,7 @@ function useForm(options) {
     core.router.abort();
   }
   vue.watch([fields, processing, errors], () => {
-    isDirty.value = !isEqual__default(vue.toRaw(loaded), vue.toRaw(fields));
+    isDirty.value = !isEqual__default(vue.toRaw(initial), vue.toRaw(fields));
     if (shouldRemember) {
       core.router.history.remember(historyKey, {
         fields: vue.toRaw(fields),
@@ -903,10 +873,10 @@ function useHistoryState(key, initial) {
   return value;
 }
 
-function useBackForward() {
+function useBackForward(options) {
   const callbacks = [];
-  core.registerHook("navigated", (options) => {
-    if (options.type === "back-forward") {
+  core.registerHook("navigated", (options2) => {
+    if (options2.type === "back-forward") {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
     }
@@ -914,8 +884,11 @@ function useBackForward() {
   function onBackForward(fn) {
     callbacks.push(fn);
   }
-  function reloadOnBackForward(options) {
-    onBackForward(() => core.router.reload(options));
+  function reloadOnBackForward(options2) {
+    onBackForward(() => core.router.reload(options2));
+  }
+  if (options?.reload) {
+    reloadOnBackForward(options.reload === true ? void 0 : options.reload);
   }
   return {
     onBackForward,
@@ -923,16 +896,6 @@ function useBackForward() {
   };
 }
 
-function defineLayout(...args) {
-  const layouts = args[0];
-  const properties = args[1];
-  state.setViewLayout(layouts);
-  state.setViewLayoutProperties(properties);
-}
-function defineLayoutProperties(properties) {
-  state.setViewLayoutProperties(properties);
-}
-
 const registerHook = (hook, fn, options) => {
   const unregister = core.registerHook(hook, fn, options);
   if (vue.getCurrentInstance()) {
@@ -944,9 +907,9 @@ const registerHook = (hook, fn, options) => {
 function useDialog() {
   return {
     /** Closes the dialog. */
-    close: () => hybridly.router.dialog.close(),
+    close: () => core.router.dialog.close(),
     /** Closes the dialog without a server round-trip. */
-    closeLocally: () => hybridly.router.dialog.close({ local: true }),
+    closeLocally: () => core.router.dialog.close({ local: true }),
     /** Unmounts the dialog. Should be called after its closing animations. */
     unmount: () => dialogStore.removeComponent(),
     /** Whether the dialog is shown. */
@@ -1175,12 +1138,12 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 }
 
 function useRoute() {
-  const current = vue.ref(hybridly.router.current());
+  const current = vue.ref(core.router.current());
   function matches(name, parameters) {
-    return hybridly.router.matches(vue.toValue(name), parameters);
+    return core.router.matches(vue.toValue(name), parameters);
   }
   registerHook("navigated", () => {
-    current.value = hybridly.router.current();
+    current.value = core.router.current();
   });
   return {
     current: vue.readonly(current),
@@ -1258,9 +1221,9 @@ function useTable(props, key, defaultOptions = {}) {
     return typeof action === "string" ? action : action.name;
   }
   async function executeInlineAction(action, record) {
-    return await hybridly.router.navigate({
+    return await core.router.navigate({
       method: "post",
-      url: hybridly.route(table.value.endpoint),
+      url: core.route(table.value.endpoint),
       preserveState: true,
       data: {
         type: "action:inline",
@@ -1272,9 +1235,9 @@ function useTable(props, key, defaultOptions = {}) {
   }
   async function executeBulkAction(action, options) {
     const actionName = getActionName(action);
-    return await hybridly.router.navigate({
+    return await core.router.navigate({
       method: "post",
-      url: hybridly.route(table.value.endpoint),
+      url: core.route(table.value.endpoint),
       preserveState: true,
       data: {
         type: "action:bulk",
@@ -1388,7 +1351,7 @@ function useQueryParameters() {
     Array.from(unusedKeys).forEach((key) => delete state[key]);
   }
   updateState();
-  hybridly.registerHook("after", updateState);
+  core.registerHook("after", updateState);
   return state;
 }
 
@@ -1396,14 +1359,11 @@ exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
 exports.RouterLink = RouterLink;
-exports.defineLayout = defineLayout;
-exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.registerHook = registerHook;
 exports.setProperty = setProperty;
 exports.useBackForward = useBackForward;
 exports.useBulkSelect = useBulkSelect;
-exports.useContext = useContext;
 exports.useDialog = useDialog;
 exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;