@simonbackx/vue-app-navigation 2.4.2 → 2.5.1

package/dist/index.js

@@ -276,6 +276,16 @@ class HistoryManagerStatic {
       });
     });
   }
+  resolveUrl(url, index) {
+    if (url !== null) {
+      return "/" + UrlHelper.trim(UrlHelper.transformUrl(url));
+    }
+    if (!this.states[index - 1]) {
+      return "/" + UrlHelper.trim(UrlHelper.transformUrl("/"));
+    }
+    const previousUrl = this.states[index - 1].url;
+    return this.resolveUrl(previousUrl ?? null, index - 1);
+  }
   /// Set the current URL without modifying states
   setUrl(url, title, index) {
     if (!this.active) {
@@ -302,7 +312,7 @@ class HistoryManagerStatic {
           if (ComponentWithProperties.debug) {
             console.log("history.replaceState", count, url);
           }
-          const formattedUrl = "/" + UrlHelper.trim(UrlHelper.transformUrl(url));
+          const formattedUrl = this.resolveUrl(url, count);
           history.replaceState({ counter: count }, "", formattedUrl);
           if (state.title) {
             window.document.title = this.formatTitle(state.title);
@@ -343,12 +353,8 @@ class HistoryManagerStatic {
       if (ComponentWithProperties.debug) {
         console.log("history.replaceState - updateUrl");
       }
-      const current = new UrlHelper();
-      const formattedUrl = "/" + UrlHelper.trim(
-        UrlHelper.transformUrl(
-          current.getPath()
-        )
-      );
+      const lastState = this.states[this.states.length - 1];
+      const formattedUrl = this.resolveUrl(lastState.url ?? null, lastState.index);
       history.replaceState({ counter: this.counter }, "", formattedUrl);
     });
   }
@@ -705,6 +711,10 @@ const _ComponentWithProperties = class _ComponentWithProperties {
   ownsHistoryIndex() {
     return this.historyIndex !== null && _ComponentWithProperties.historyIndexOwners.get(this.historyIndex) === this;
   }
+  overrideUrl(url, title) {
+    this.provide.reactive_navigation_url = url;
+    this.setUrl(url, title);
+  }
   setUrl(url, title) {
     if (this.historyIndex === null) {
       if (_ComponentWithProperties.debug)
@@ -2146,6 +2156,12 @@ function setTitle(title) {
     urlHelpers.setTitle(title);
   });
 }
+function setUrl(url, title) {
+  const urlHelpers = useUrl();
+  onMounted(() => {
+    urlHelpers.overrideUrl(url, title);
+  });
+}
 function useUrl() {
   const currentComponent = useCurrentComponent();
   const navigationUrl = inject("reactive_navigation_url", null);
@@ -2184,6 +2200,16 @@ function useUrl() {
     matchCurrent(template, params) {
       const helper = new UrlHelper(void 0, this.getUrl());
       return helper.match(template, params);
+    },
+    overrideUrl(url, title) {
+      if (!currentComponent) {
+        console.error("No current component while setting title", title);
+        return;
+      }
+      if (unref(disableUrl)) {
+        return;
+      }
+      currentComponent == null ? void 0 : currentComponent.overrideUrl(url, title);
     }
   };
 }
@@ -2946,6 +2972,7 @@ export {
   onNotCheckRoutes,
   setTitle,
   setTitleSuffix,
+  setUrl,
   templateToUrl,
   useCanDismiss,
   useCanPop,

package/dist/src/ComponentWithProperties.d.ts

@@ -1,3 +1,4 @@
+import { HistoryUrl } from './HistoryManager';
 import { ComponentPublicInstance, VNode } from 'vue';
 
 export type ModalDisplayStyle = "cover" | "popup" | "overlay" | "sheet" | "side-view";
@@ -46,7 +47,8 @@ export declare class ComponentWithProperties {
     assignHistoryIndex(): void;
     inheritHistoryIndex(index: number): void;
     ownsHistoryIndex(): boolean;
-    setUrl(url: string, title?: string): void;
+    overrideUrl(url: HistoryUrl, title?: string): void;
+    setUrl(url: HistoryUrl, title?: string): void;
     setTitle(title: string): void;
     /**
      * This will get called when the user returned to this component

package/dist/src/HistoryManager.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="node" />
+/**
+ * null makes sure the previous URL is used for this route
+ */
+export type HistoryUrl = string | null;
 type HistoryState = {
-    url?: string;
+    url?: HistoryUrl;
     title?: string;
     index: number;
     adjustHistory: boolean;
@@ -26,7 +30,8 @@ declare class HistoryManagerStatic {
     private addToQueue;
     private runQueue;
     private go;
-    setUrl(url: string, title?: string, index?: number): void;
+    resolveUrl(url: HistoryUrl, index: number): string;
+    setUrl(url: HistoryUrl, title?: string, index?: number): void;
     updateUrl(): void;
     formatTitle(title: string): string;
     /**

package/dist/src/ModalMixin.d.ts

@@ -66,7 +66,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -136,7 +137,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -440,7 +442,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -510,7 +513,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;

package/dist/src/ModalStackComponent.vue.d.ts

@@ -65,7 +65,8 @@ declare const ModalStackComponent: import('vue').DefineComponent<{
             assignHistoryIndex: () => void;
             inheritHistoryIndex: (index: number) => void;
             ownsHistoryIndex: () => boolean;
-            setUrl: (url: string, title?: string | undefined) => void;
+            overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+            setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
             setTitle: (title: string) => void;
             returnToHistoryIndex: () => boolean;
             componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -135,7 +136,8 @@ declare const ModalStackComponent: import('vue').DefineComponent<{
             assignHistoryIndex: () => void;
             inheritHistoryIndex: (index: number) => void;
             ownsHistoryIndex: () => boolean;
-            setUrl: (url: string, title?: string | undefined) => void;
+            overrideUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
+            setUrl: (url: import('./HistoryManager').HistoryUrl, title?: string | undefined) => void;
             setTitle: (title: string) => void;
             returnToHistoryIndex: () => boolean;
             componentInstance: () => import('vue').ComponentPublicInstance | null;

package/dist/src/StackComponent.vue.d.ts

@@ -45,7 +45,8 @@ declare const StackComponent: import('vue').DefineComponent<{}, {}, {
         assignHistoryIndex: () => void;
         inheritHistoryIndex: (index: number) => void;
         ownsHistoryIndex: () => boolean;
-        setUrl: (url: string, title?: string | undefined) => void;
+        overrideUrl: (url: import('./HistoryManager.ts').HistoryUrl, title?: string | undefined) => void;
+        setUrl: (url: import('./HistoryManager.ts').HistoryUrl, title?: string | undefined) => void;
         setTitle: (title: string) => void;
         returnToHistoryIndex: () => boolean;
         componentInstance: () => import('vue').ComponentPublicInstance | null;

package/dist/src/utils/navigationHooks.d.ts

@@ -1,6 +1,7 @@
 import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
 import { PushOptions } from '../PushOptions';
 import { PopOptions } from '../PopOptions';
+import { HistoryUrl } from '../HistoryManager';
 import { ComponentWithProperties } from '../ComponentWithProperties';
 import { ComponentOptions, Ref } from 'vue';
 
@@ -86,6 +87,7 @@ export declare function useFocused(): boolean | Ref<boolean>;
 export declare function extendUrl(url: string | Ref<string>): void;
 export declare function setTitleSuffix(title: string): void;
 export declare function setTitle(title: string): void;
+export declare function setUrl(url: HistoryUrl, title?: string): void;
 export declare function useUrl(): {
     getUrl(): string;
     /**
@@ -95,4 +97,5 @@ export declare function useUrl(): {
     extendUrl(url: string): string;
     match<Params>(template: string, params?: UrlParamsConstructors<Params>): UrlMatchResult<Params> | undefined;
     matchCurrent<Params_1>(template: string, params?: UrlParamsConstructors<Params_1> | undefined): UrlMatchResult<Params_1> | undefined;
+    overrideUrl(url: HistoryUrl, title?: string): void;
 };

package/dist/test/EditWebshopMixin.d.ts

@@ -129,7 +129,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -199,7 +200,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -503,7 +505,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -573,7 +576,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 assignHistoryIndex: () => void;
                 inheritHistoryIndex: (index: number) => void;
                 ownsHistoryIndex: () => boolean;
-                setUrl: (url: string, title?: string | undefined) => void;
+                overrideUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
+                setUrl: (url: import('..').HistoryUrl, title?: string | undefined) => void;
                 setTitle: (title: string) => void;
                 returnToHistoryIndex: () => boolean;
                 componentInstance: () => import('vue').ComponentPublicInstance | null;
@@ -1533,6 +1537,7 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
         extendUrl(url: string): string;
         match<Params>(template: string, params?: import('..').UrlParamsConstructors<Params> | undefined): import('..').UrlMatchResult<Params> | undefined;
         matchCurrent<Params_1>(template: string, params?: import('..').UrlParamsConstructors<Params_1> | undefined): import('..').UrlMatchResult<Params_1> | undefined;
+        overrideUrl(url: import('..').HistoryUrl, title?: string | undefined): void;
     };
     $navigate: <Params_2 extends Record<string, unknown>>(prop1: string | import('..').Route<Params_2, unknown>, prop2?: import('..').RouteNavigationOptions<Params_2> | undefined) => Promise<void>;
 }, {}, {

package/package.json

@@ -2,7 +2,7 @@
     "name": "@simonbackx/vue-app-navigation",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
-    "version": "2.4.2",
+    "version": "2.5.1",
     "exports": {
         ".": {
             "import": "./dist/index.js",