@simonbackx/vue-app-navigation 2.8.2 → 2.10.0

package/dist/index.js

@@ -137,9 +137,9 @@ const _UrlHelper = class _UrlHelper {
     return matchPath(this.getParts(), this.getSearchParams(), template, params);
   }
 };
-/** 
+/**
  * Use this for the universal fixed prefix
- * 
+ *
  * Always remove this prefix when getting an url, and add it when doing setUrl.
  * When you want to host an app in a subdirectory
  * Slashes are added automatically on the sides if needed
@@ -235,6 +235,13 @@ class HistoryManagerStatic {
       this.runQueue();
     }
   }
+  waitForQueue() {
+    return new Promise((resolve) => {
+      this.addToQueue(() => {
+        resolve();
+      });
+    });
+  }
   runQueue() {
     this.isQueueRunning = true;
     const action = this.historyQueue.shift();
@@ -304,6 +311,7 @@ class HistoryManagerStatic {
       }
       const didJustLoadPage = Date.now() - this.pageLoadedAt < 1e3 * 5;
       this.changeUrlTimeout = setTimeout(() => {
+        this.changeUrlTimeout = null;
         if (this.counter !== count || state.url !== url) {
           return;
         }
@@ -341,18 +349,24 @@ class HistoryManagerStatic {
     }
   }
   // Call this when url formatting or prefix has changed
-  updateUrl() {
+  async updateUrl() {
     if (!this.active) {
       return;
     }
     if (this.changeUrlTimeout) {
+      await this.waitForQueue();
       return;
     }
+    const state = this.states[this.states.length - 1];
+    const count = state.index;
     this.addToQueue(() => {
-      const lastState = this.states[this.states.length - 1];
-      const formattedUrl = this.resolveUrl(lastState.index);
-      history.replaceState({ counter: this.counter }, "", formattedUrl);
+      if (this.counter !== count) {
+        return;
+      }
+      const formattedUrl = this.resolveUrl(count);
+      history.replaceState({ counter: count }, "", formattedUrl);
     });
+    await this.waitForQueue();
   }
   formatTitle(title) {
     return title + (this.titleSuffix ? " | " + this.titleSuffix : "");
@@ -847,7 +861,7 @@ __publicField(_ComponentWithProperties, "debug", false);
 __publicField(_ComponentWithProperties, "historyIndexOwners", /* @__PURE__ */ new Map());
 let ComponentWithProperties = _ComponentWithProperties;
 /**
-* @vue/shared v3.5.12
+* @vue/shared v3.5.16
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -1153,11 +1167,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const FramedComponent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
-function useNavigationController() {
-  const c = inject("reactive_navigationController");
-  return shallowRef(c);
-}
-const NavigationController$1 = defineComponent({
+const _sfc_main$4 = defineComponent({
   name: "NavigationController",
   components: {
     FramedComponent
@@ -1557,7 +1567,7 @@ const NavigationController$1 = defineComponent({
       }
     },
     enter(element, done) {
-      if (this.transitionName == "none") {
+      if (this.transitionName === "none") {
         this.getScrollElement().scrollTop = this.nextScrollPosition;
         const internal = this.getInternalScrollElement(element);
         if (internal) {
@@ -1674,7 +1684,6 @@ const NavigationController$1 = defineComponent({
     }
   }
 });
-const _sfc_main$4 = NavigationController$1;
 const _hoisted_1$3 = {
   key: 0,
   class: "navigation-controller"
@@ -1744,8 +1753,9 @@ function useNavigate() {
       return;
     }
     let component;
-    if (typeof route.component === "function" || componentProperties.then) {
-      const method = typeof route.component === "function" ? route.component : () => route.component;
+    const isComponentFunction = typeof route.component === "function" && !(!!route.component.prototype && route.component.prototype.constructor === route.component);
+    if (isComponentFunction || componentProperties.then) {
+      const method = isComponentFunction ? route.component : () => route.component;
       const originalProperties = componentProperties;
       if (!("PromiseComponent" in window)) {
         throw new Error("Required PromiseComponent window variable to make async components work in routes");
@@ -1754,7 +1764,7 @@ function useNavigate() {
       componentProperties = {
         promise: async () => {
           const realComponent = await method();
-          return new ComponentWithProperties(realComponent, await originalProperties);
+          return new ComponentWithProperties(realComponent === "self" ? instance == null ? void 0 : instance.type : realComponent, await originalProperties);
         }
       };
     } else {
@@ -2372,7 +2382,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const style = options.modalDisplayStyle ?? component.modalDisplayStyle ?? "cover";
       component.setDisplayStyle(style);
       if ((style === "popup" || style === "sheet" || style === "side-view") && ((_a = stackComponent.value) == null ? void 0 : _a.$el).offsetWidth > 800 || style === "sheet" && ((_b = stackComponent.value) == null ? void 0 : _b.$el).offsetWidth > 700) {
-        const c = new ComponentWithProperties(_sfc_main, {
+        const c = new ComponentWithProperties(_sfc_main$1, {
           root: component,
           className: options.modalClass ?? style,
           style: options.modalCssStyle ?? void 0
@@ -2439,6 +2449,14 @@ const ModalStackComponentFinderMixin = defineComponent({
     }
   }
 });
+function useNavigationController() {
+  const c = inject("reactive_navigationController");
+  return shallowRef(c);
+}
+function useSplitViewController() {
+  const c = inject("reactive_splitViewController");
+  return shallowRef(c);
+}
 function injectHooks(instanceProxy, definitions) {
   const ctx = instanceProxy.$.ctx;
   for (const key in definitions) {
@@ -2459,6 +2477,176 @@ function injectHooks(instanceProxy, definitions) {
     }
   }
 }
+function useModalStackComponent() {
+  const c = inject("reactive_modalStackComponent");
+  return c;
+}
+function usePopup() {
+  return inject("reactive_popup", null);
+}
+const navigationMethods = {
+  setTitle() {
+    var _a;
+    const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
+    if (!navigationOptions)
+      return;
+    const title = navigationOptions.title;
+    if (typeof title === "function") {
+      this.$url.setTitle(title.call(this));
+    } else {
+      this.$url.setTitle(title ?? "");
+    }
+  }
+};
+const NavigationMixin = {
+  created() {
+    var _a;
+    const definitions = {
+      pop: usePop(),
+      showDetail: useShowDetail(),
+      show: useShow(),
+      present: usePresent(),
+      dismiss: useDismiss(),
+      canPop: useCanPop(),
+      canDismiss: useCanDismiss(),
+      isFocused: useFocused(),
+      emitParents: () => {
+        throw new Error("emitParents has been removed and should no longer be needed");
+      },
+      popup: usePopup(),
+      modalStackComponent: useModalStackComponent(),
+      navigationController: useNavigationController(),
+      splitViewController: useSplitViewController(),
+      $url: useUrl(),
+      $navigate: useNavigate()
+    };
+    const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
+    if (navigationOptions || this.customRoutes) {
+      defineRoutes((navigationOptions == null ? void 0 : navigationOptions.routes) ?? (this.customRoutes ? this.customRoutes.bind(this) : null) ?? []);
+    }
+    injectHooks(this, definitions);
+  },
+  computed: {
+    modalNavigationController() {
+      return this.modalStackComponent.navigationController;
+    }
+  },
+  activated() {
+    navigationMethods.setTitle.call(this);
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-types
+};
+const _hoisted_1$1 = { class: "scrollable-container" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Popup",
+  props: {
+    root: {},
+    className: { default: "popup" },
+    style: { default: "" }
+  },
+  setup(__props, { expose: __expose }) {
+    const instance = getCurrentInstance();
+    const Popup = instance.type;
+    const props = __props;
+    const hide = ref(false);
+    const modalStackComponent = useModalStackComponent();
+    const pop = usePop();
+    const mainContent = ref(null);
+    const component = useCurrentComponent();
+    provide("reactive_navigation_dismiss", async (options) => {
+      return await dismiss(options);
+    });
+    provide("reactive_navigation_pop", async (options) => {
+      console.warn("Using .pop() inside a Popup without a NavigationController dismisses the Popup. It is recommended to use .dismiss() instead.");
+      return await dismiss(options);
+    });
+    provide("reactive_navigation_can_pop", false);
+    provide("reactive_navigation_can_dismiss", true);
+    provide("reactive_popup", computed(() => getExposeProxy(instance)));
+    const pushDown = computed(() => {
+      var _a, _b;
+      const popups = ((_b = (_a = modalStackComponent.value) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.children.filter((c) => c.component === Popup && (c.properties.className ?? "popup") === (props.className ?? "popup") && !c.isDismissing.value)) ?? [];
+      if (popups.length > 0 && popups[popups.length - 1] !== component) {
+        if (popups.length > 1 && popups[popups.length - 2] === component) {
+          return 1;
+        }
+        return 2;
+      }
+      return 0;
+    });
+    const buildClass = computed(() => {
+      const vvv = { "push-down": pushDown.value == 1, "push-down-full": pushDown.value > 1 };
+      const j = Object.keys(vvv).filter((p) => !!vvv[p]).join(" ");
+      return j + (j ? " " : "") + (props.className ? props.className : "popup") + (props.root.animated ? " animated" : "") + (isFocused.value ? " focused" : "");
+    });
+    const isFocused = useFocused();
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.repeat) {
+        return;
+      }
+      if (!isFocused.value) {
+        return;
+      }
+      const key = event.key || event.keyCode;
+      if (key === "Escape" || key === "Esc" || key === 27) {
+        dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    };
+    const shouldNavigateAway = () => {
+      return props.root.shouldNavigateAway();
+    };
+    const dismiss = async (options) => {
+      var _a;
+      if (hide.value) {
+        return;
+      }
+      if (!(options == null ? void 0 : options.force)) {
+        const r = await shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      component.isDismissing.value = true;
+      (_a = pop(options)) == null ? void 0 : _a.catch(console.error);
+    };
+    const onClick = (event) => {
+      if (mainContent.value && !mainContent.value.contains(event.target) && document.body.contains(event.target)) {
+        dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    };
+    onActivated(() => {
+      document.addEventListener("keydown", onKey);
+    });
+    onDeactivated(() => {
+      document.removeEventListener("keydown", onKey);
+    });
+    __expose({
+      dismiss: shallowRef(dismiss),
+      pop: shallowRef(dismiss)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(buildClass.value),
+        style: normalizeStyle(_ctx.style),
+        onClick
+      }, [
+        createElementVNode("div", {
+          ref_key: "mainContent",
+          ref: mainContent
+        }, [
+          createElementVNode("div", _hoisted_1$1, [
+            (openBlock(), createBlock(unref(ComponentWithPropertiesInstance), {
+              key: _ctx.root.key,
+              component: _ctx.root
+            }, null, 8, ["component"]))
+          ])
+        ], 512)
+      ], 6);
+    };
+  }
+});
 const throttle = (func, limit) => {
   let lastFunc;
   let lastRan;
@@ -2479,11 +2667,7 @@ const throttle = (func, limit) => {
     }
   };
 };
-function useSplitViewController() {
-  const c = inject("reactive_splitViewController");
-  return shallowRef(c);
-}
-const SplitViewController$1 = defineComponent({
+const _sfc_main = defineComponent({
   name: "SplitViewController",
   components: {
     NavigationController,
@@ -2742,8 +2926,7 @@ const SplitViewController$1 = defineComponent({
     }
   }
 });
-const _sfc_main$1 = SplitViewController$1;
-const _hoisted_1$1 = ["data-has-detail"];
+const _hoisted_1 = ["data-has-detail"];
 const _hoisted_2 = {
   ref: "masterElement",
   class: "master"
@@ -2772,179 +2955,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         root: _ctx.detail
       }, null, 8, ["root"]))
     ])) : createCommentVNode("", true)
-  ], 8, _hoisted_1$1);
+  ], 8, _hoisted_1);
 }
-const SplitViewController = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
-function useModalStackComponent() {
-  const c = inject("reactive_modalStackComponent");
-  return c;
-}
-function usePopup() {
-  return inject("reactive_popup", null);
-}
-const navigationMethods = {
-  setTitle() {
-    var _a;
-    const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
-    if (!navigationOptions)
-      return;
-    const title = navigationOptions.title;
-    if (typeof title === "function") {
-      this.$url.setTitle(title.call(this));
-    } else {
-      this.$url.setTitle(title ?? "");
-    }
-  }
-};
-const NavigationMixin = {
-  created() {
-    var _a;
-    const definitions = {
-      pop: usePop(),
-      showDetail: useShowDetail(),
-      show: useShow(),
-      present: usePresent(),
-      dismiss: useDismiss(),
-      canPop: useCanPop(),
-      canDismiss: useCanDismiss(),
-      isFocused: useFocused(),
-      emitParents: () => {
-        throw new Error("emitParents has been removed and should no longer be needed");
-      },
-      popup: usePopup(),
-      modalStackComponent: useModalStackComponent(),
-      navigationController: useNavigationController(),
-      splitViewController: useSplitViewController(),
-      $url: useUrl(),
-      $navigate: useNavigate()
-    };
-    const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
-    if (navigationOptions || this.customRoutes) {
-      defineRoutes((navigationOptions == null ? void 0 : navigationOptions.routes) ?? (this.customRoutes ? this.customRoutes.bind(this) : null) ?? []);
-    }
-    injectHooks(this, definitions);
-  },
-  computed: {
-    modalNavigationController() {
-      return this.modalStackComponent.navigationController;
-    }
-  },
-  activated() {
-    navigationMethods.setTitle.call(this);
-  }
-  // eslint-disable-next-line @typescript-eslint/ban-types
-};
-const _hoisted_1 = { class: "scrollable-container" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Popup",
-  props: {
-    root: {},
-    className: { default: "popup" },
-    style: { default: "" }
-  },
-  setup(__props, { expose: __expose }) {
-    const instance = getCurrentInstance();
-    const Popup = instance.type;
-    const props = __props;
-    const hide = ref(false);
-    const modalStackComponent = useModalStackComponent();
-    const pop = usePop();
-    const mainContent = ref(null);
-    const component = useCurrentComponent();
-    provide("reactive_navigation_dismiss", async (options) => {
-      return await dismiss(options);
-    });
-    provide("reactive_navigation_pop", async (options) => {
-      console.warn("Using .pop() inside a Popup without a NavigationController dismisses the Popup. It is recommended to use .dismiss() instead.");
-      return await dismiss(options);
-    });
-    provide("reactive_navigation_can_pop", false);
-    provide("reactive_navigation_can_dismiss", true);
-    provide("reactive_popup", computed(() => getExposeProxy(instance)));
-    const pushDown = computed(() => {
-      var _a, _b;
-      const popups = ((_b = (_a = modalStackComponent.value) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.children.filter((c) => c.component === Popup && (c.properties.className ?? "popup") === (props.className ?? "popup") && !c.isDismissing.value)) ?? [];
-      if (popups.length > 0 && popups[popups.length - 1] !== component) {
-        if (popups.length > 1 && popups[popups.length - 2] === component) {
-          return 1;
-        }
-        return 2;
-      }
-      return 0;
-    });
-    const buildClass = computed(() => {
-      const vvv = { "push-down": pushDown.value == 1, "push-down-full": pushDown.value > 1 };
-      const j = Object.keys(vvv).filter((p) => !!vvv[p]).join(" ");
-      return j + (j ? " " : "") + (props.className ? props.className : "popup") + (props.root.animated ? " animated" : "") + (isFocused.value ? " focused" : "");
-    });
-    const isFocused = useFocused();
-    const onKey = (event) => {
-      if (event.defaultPrevented || event.repeat) {
-        return;
-      }
-      if (!isFocused.value) {
-        return;
-      }
-      const key = event.key || event.keyCode;
-      if (key === "Escape" || key === "Esc" || key === 27) {
-        dismiss().catch(console.error);
-        event.preventDefault();
-      }
-    };
-    const shouldNavigateAway = () => {
-      return props.root.shouldNavigateAway();
-    };
-    const dismiss = async (options) => {
-      var _a;
-      if (hide.value) {
-        return;
-      }
-      if (!(options == null ? void 0 : options.force)) {
-        const r = await shouldNavigateAway();
-        if (!r) {
-          return false;
-        }
-      }
-      component.isDismissing.value = true;
-      (_a = pop(options)) == null ? void 0 : _a.catch(console.error);
-    };
-    const onClick = (event) => {
-      if (mainContent.value && !mainContent.value.contains(event.target) && document.body.contains(event.target)) {
-        dismiss().catch(console.error);
-        event.preventDefault();
-      }
-    };
-    onActivated(() => {
-      document.addEventListener("keydown", onKey);
-    });
-    onDeactivated(() => {
-      document.removeEventListener("keydown", onKey);
-    });
-    __expose({
-      dismiss: shallowRef(dismiss),
-      pop: shallowRef(dismiss)
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(buildClass.value),
-        style: normalizeStyle(_ctx.style),
-        onClick
-      }, [
-        createElementVNode("div", {
-          ref_key: "mainContent",
-          ref: mainContent
-        }, [
-          createElementVNode("div", _hoisted_1, [
-            (openBlock(), createBlock(unref(ComponentWithPropertiesInstance), {
-              key: _ctx.root.key,
-              component: _ctx.root
-            }, null, 8, ["component"]))
-          ])
-        ], 512)
-      ], 6);
-    };
-  }
-});
+const SplitViewController = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   ComponentWithProperties,
   ComponentWithPropertiesInstance,
@@ -2954,7 +2967,7 @@ export {
   ModalStackComponentFinderMixin,
   NavigationController,
   NavigationMixin,
-  _sfc_main as Popup,
+  _sfc_main$1 as Popup,
   SplitViewController,
   _sfc_main$3 as StackComponent,
   UrlHelper,

package/dist/src/ComponentWithProperties.d.ts

@@ -1,7 +1,7 @@
 import { HistoryUrl } from './HistoryManager';
 import { ComponentInternalInstance, ComponentPublicInstance, Raw, VNode } from 'vue';
 
-export type ModalDisplayStyle = "cover" | "popup" | "overlay" | "sheet" | "side-view";
+export type ModalDisplayStyle = 'cover' | 'popup' | 'overlay' | 'sheet' | 'side-view';
 export declare function useCurrentComponent(): ComponentWithPropertiesType | null;
 export declare function getExposeProxy(instance: ComponentInternalInstance | null | undefined): ComponentPublicInstance | undefined;
 export declare function forAllRoots(root: ComponentWithProperties, handler: (root: ComponentWithPropertiesType) => void, alreadyProcessed?: Set<ComponentWithPropertiesType>): void;

package/dist/src/HistoryManager.d.ts

@@ -28,12 +28,13 @@ declare class HistoryManagerStatic {
     removeListener(owner: unknown): void;
     callListeners(): void;
     private addToQueue;
+    private waitForQueue;
     private runQueue;
     private go;
     getStateUrl(index: number): string;
     resolveUrl(index: number): string;
     setUrl(url: HistoryUrl, title?: string, index?: number): void;
-    updateUrl(): void;
+    updateUrl(): Promise<void>;
     formatTitle(title: string): string;
     /**
      * Set the saved title for a given state. If that state is the current one, it will also get set immediately

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

@@ -1,10 +1,9 @@
 import { PushOptions } from './PushOptions';
 import { PopOptions } from './PopOptions';
 import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 
-export declare function useNavigationController(): Ref<InstanceType<typeof NavigationController>>;
-declare const NavigationController: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     root: {
         default: null;
         type: PropType<ComponentWithProperties | null>;
@@ -60,7 +59,7 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
     afterLeave(element: any): void;
     afterEnter(element: any): void;
     enterCancelled(_element: any): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], "present" | "didPush" | "didPop" | "showDetail", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     root: {
         default: null;
         type: PropType<ComponentWithProperties | null>;
@@ -77,12 +76,7 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
         type: ObjectConstructor;
         default: null;
     };
-}>> & Readonly<{
-    onPresent?: ((...args: any[]) => any) | undefined;
-    onDidPush?: ((...args: any[]) => any) | undefined;
-    onDidPop?: ((...args: any[]) => any) | undefined;
-    onShowDetail?: ((...args: any[]) => any) | undefined;
-}>, {
+}>> & Readonly<{}>, {
     root: ComponentWithProperties | null;
     customProvide: Record<string, any>;
     initialComponents: ComponentWithProperties[] | null;
@@ -135,12 +129,7 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
             type: ObjectConstructor;
             default: null;
         };
-    }>> & Readonly<{
-        onPresent?: ((...args: any[]) => any) | undefined;
-        onDidPush?: ((...args: any[]) => any) | undefined;
-        onDidPop?: ((...args: any[]) => any) | undefined;
-        onShowDetail?: ((...args: any[]) => any) | undefined;
-    }>, {}, {
+    }>> & Readonly<{}>, {}, {
         components: ComponentWithPropertiesType[];
         mainComponent: ComponentWithPropertiesType | null;
         transitionName: string;
@@ -179,7 +168,7 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
         afterLeave(element: any): void;
         afterEnter(element: any): void;
         enterCancelled(_element: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], {}, {}, false, {
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, {}, {}, false, {
         reactive_navigation_pop: {
             default: null;
         };
@@ -243,12 +232,7 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
             type: ObjectConstructor;
             default: null;
         };
-    }>> & Readonly<{
-        onPresent?: ((...args: any[]) => any) | undefined;
-        onDidPush?: ((...args: any[]) => any) | undefined;
-        onDidPop?: ((...args: any[]) => any) | undefined;
-        onShowDetail?: ((...args: any[]) => any) | undefined;
-    }>, {}, {
+    }>> & Readonly<{}>, {}, {
         components: ComponentWithPropertiesType[];
         mainComponent: ComponentWithPropertiesType | null;
         transitionName: string;
@@ -291,4 +275,4 @@ declare const NavigationController: import('vue').DefineComponent<import('vue').
     reactive_navigation_show: (options: PushOptions) => Promise<void>;
     reactive_navigation_pop: import('vue').ComputedRef<unknown>;
 }, true, {}, any>;
-export default NavigationController;
+export default _default;

package/dist/src/NavigationMixin.d.ts

@@ -1,8 +1,9 @@
+import { useNavigationController } from './useNavigationController';
 import { useModalStackComponent } from './utils/useModalStackComponent';
 import { NavigationOptions, useCanDismiss, useCanPop, useDismiss, useFocused, useNavigate, usePop, usePresent, useShow, useShowDetail, useUrl } from './utils/navigationHooks';
-import { useSplitViewController } from './SplitViewController.vue';
+import { useSplitViewController } from './useSplitViewController';
 import { default as Popup } from './Popup.vue';
-import { default as NavigationController, useNavigationController } from './NavigationController.vue';
+import { default as NavigationController } from './NavigationController.vue';
 import { DefineComponent, Ref } from 'vue';
 
 /**

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

@@ -2,10 +2,9 @@ import { DefaultRouteHandler } from './utils/navigationHooks';
 import { PushOptions } from './PushOptions';
 import { default as NavigationController } from './NavigationController.vue';
 import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 
-export declare function useSplitViewController(): Ref<InstanceType<typeof SplitViewController>>;
-declare const SplitViewController: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     root: {
         required: true;
         type: PropType<ComponentWithPropertiesType>;
@@ -105,7 +104,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
         afterLeave(element: any): void;
         afterEnter(element: any): void;
         enterCancelled(_element: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], "present" | "didPush" | "didPop" | "showDetail", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         root: {
             default: null;
             type: PropType<ComponentWithProperties | null>;
@@ -122,12 +121,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
             type: ObjectConstructor;
             default: null;
         };
-    }>> & Readonly<{
-        onPresent?: ((...args: any[]) => any) | undefined;
-        onDidPush?: ((...args: any[]) => any) | undefined;
-        onDidPop?: ((...args: any[]) => any) | undefined;
-        onShowDetail?: ((...args: any[]) => any) | undefined;
-    }>, {
+    }>> & Readonly<{}>, {
         root: ComponentWithProperties | null;
         customProvide: Record<string, any>;
         initialComponents: ComponentWithProperties[] | null;
@@ -180,12 +174,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                 type: ObjectConstructor;
                 default: null;
             };
-        }>> & Readonly<{
-            onPresent?: ((...args: any[]) => any) | undefined;
-            onDidPush?: ((...args: any[]) => any) | undefined;
-            onDidPop?: ((...args: any[]) => any) | undefined;
-            onShowDetail?: ((...args: any[]) => any) | undefined;
-        }>, {}, {
+        }>> & Readonly<{}>, {}, {
             components: ComponentWithPropertiesType[];
             mainComponent: ComponentWithPropertiesType | null;
             transitionName: string;
@@ -224,7 +213,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
             afterLeave(element: any): void;
             afterEnter(element: any): void;
             enterCancelled(_element: any): void;
-        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], {}, {}, false, {
+        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, {}, {}, false, {
             reactive_navigation_pop: {
                 default: null;
             };
@@ -288,12 +277,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                 type: ObjectConstructor;
                 default: null;
             };
-        }>> & Readonly<{
-            onPresent?: ((...args: any[]) => any) | undefined;
-            onDidPush?: ((...args: any[]) => any) | undefined;
-            onDidPop?: ((...args: any[]) => any) | undefined;
-            onShowDetail?: ((...args: any[]) => any) | undefined;
-        }>, {}, {
+        }>> & Readonly<{}>, {}, {
             components: ComponentWithPropertiesType[];
             mainComponent: ComponentWithPropertiesType | null;
             transitionName: string;
@@ -455,7 +439,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
             afterLeave(element: any): void;
             afterEnter(element: any): void;
             enterCancelled(_element: any): void;
-        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], "present" | "didPush" | "didPop" | "showDetail", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
             root: {
                 default: null;
                 type: PropType<ComponentWithProperties | null>;
@@ -472,12 +456,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                 type: ObjectConstructor;
                 default: null;
             };
-        }>> & Readonly<{
-            onPresent?: ((...args: any[]) => any) | undefined;
-            onDidPush?: ((...args: any[]) => any) | undefined;
-            onDidPop?: ((...args: any[]) => any) | undefined;
-            onShowDetail?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }>> & Readonly<{}>, {
             root: ComponentWithProperties | null;
             customProvide: Record<string, any>;
             initialComponents: ComponentWithProperties[] | null;
@@ -530,12 +509,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                     type: ObjectConstructor;
                     default: null;
                 };
-            }>> & Readonly<{
-                onPresent?: ((...args: any[]) => any) | undefined;
-                onDidPush?: ((...args: any[]) => any) | undefined;
-                onDidPop?: ((...args: any[]) => any) | undefined;
-                onShowDetail?: ((...args: any[]) => any) | undefined;
-            }>, {}, {
+            }>> & Readonly<{}>, {}, {
                 components: ComponentWithPropertiesType[];
                 mainComponent: ComponentWithPropertiesType | null;
                 transitionName: string;
@@ -574,7 +548,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                 afterLeave(element: any): void;
                 afterEnter(element: any): void;
                 enterCancelled(_element: any): void;
-            }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("present" | "didPush" | "didPop" | "showDetail")[], {}, {}, false, {
+            }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, {}, {}, false, {
                 reactive_navigation_pop: {
                     default: null;
                 };
@@ -638,12 +612,7 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
                     type: ObjectConstructor;
                     default: null;
                 };
-            }>> & Readonly<{
-                onPresent?: ((...args: any[]) => any) | undefined;
-                onDidPush?: ((...args: any[]) => any) | undefined;
-                onDidPop?: ((...args: any[]) => any) | undefined;
-                onShowDetail?: ((...args: any[]) => any) | undefined;
-            }>, {}, {
+            }>> & Readonly<{}>, {}, {
                 components: ComponentWithPropertiesType[];
                 mainComponent: ComponentWithPropertiesType | null;
                 transitionName: string;
@@ -757,4 +726,4 @@ declare const SplitViewController: import('vue').DefineComponent<import('vue').E
     }, {}>;
     reactive_navigation_show_detail: (options: PushOptions) => Promise<boolean>;
 }, true, {}, any>;
-export default SplitViewController;
+export default _default;

package/dist/src/index.d.ts

@@ -5,13 +5,13 @@ export * from './HistoryManager';
 export { default as ModalStackComponent } from './ModalStackComponent.vue';
 export * from './ModalStackComponentFinderMixin';
 export { default as NavigationController } from './NavigationController.vue';
-export { useNavigationController } from './NavigationController.vue';
+export { useNavigationController } from './useNavigationController.ts';
 export * from './NavigationMixin';
 export * from './PopOptions';
 export { default as Popup } from './Popup.vue';
 export * from './PushOptions';
 export { default as SplitViewController } from './SplitViewController.vue';
-export { useSplitViewController } from './SplitViewController.vue';
+export { useSplitViewController } from './useSplitViewController.ts';
 export { default as StackComponent } from './StackComponent.vue';
 export * from './utils/injectHooks';
 export * from './utils/navigationHooks';

package/dist/src/useNavigationController.d.ts

@@ -0,0 +1,4 @@
+import { default as NavigationController } from './NavigationController.vue';
+import { Ref } from 'vue';
+
+export declare function useNavigationController(): Ref<InstanceType<typeof NavigationController>>;

package/dist/src/useSplitViewController.d.ts

@@ -0,0 +1,4 @@
+import { default as SplitViewController } from './SplitViewController.vue';
+import { Ref } from 'vue';
+
+export declare function useSplitViewController(): Ref<InstanceType<typeof SplitViewController>>;

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

@@ -3,14 +3,14 @@ import { PushOptions } from '../PushOptions';
 import { PopOptions } from '../PopOptions';
 import { HistoryUrl } from '../HistoryManager';
 import { ComponentWithProperties } from '../ComponentWithProperties';
-import { ComponentOptions, Ref } from 'vue';
+import { Component, Ref } from 'vue';
 
-export type Route<Params, T> = {
+export type Route<Params> = {
     name?: string;
     url: string;
     params?: UrlParamsConstructors<Params>;
     query?: UrlParamsConstructors<unknown>;
-    component: ComponentOptions | (() => Promise<ComponentOptions>) | 'self';
+    component: Component | (() => Promise<Component>) | 'self';
     present?: 'popup' | 'sheet' | true;
     show?: true | 'detail';
     isDefault?: RouteNavigationOptions<Params>;
@@ -58,21 +58,21 @@ export type RouteIdentification<Params> = {
 } | {
     url: string;
 } | {
-    route: Route<Params, any>;
+    route: Route<Params>;
 };
 export type NavigationOptions<T> = {
     title: string | ((this: T) => string);
-    routes?: Route<{}, T>[];
+    routes?: Route<any>[];
 };
 export declare function usePop(): (options?: PopOptions) => Promise<void> | undefined;
-export declare function useNavigate(): <Params extends Record<string, unknown>>(prop1: string | Route<Params, unknown>, prop2?: RouteNavigationOptions<Params>) => Promise<void>;
+export declare function useNavigate(): <Params extends Record<string, unknown>>(prop1: string | Route<Params>, prop2?: RouteNavigationOptions<Params>) => Promise<void>;
 export type DefaultRouteHandler = () => Promise<boolean>;
 export type OnCheckRoutesHandler = () => Promise<void> | void;
 export declare function onCheckRoutes(handler: OnCheckRoutesHandler): void;
 export declare function onNotCheckRoutes(handler: OnCheckRoutesHandler): void;
-export declare function defineRoutes(routes: (Route<any, undefined>[]) | (() => Promise<boolean | (Route<any, undefined>[])>)): void;
+export declare function defineRoutes(routes: (Route<any>[]) | (() => Promise<boolean | (Route<any>[])>)): void;
 export declare function useCurrentHref(): Ref<string, string>;
-export declare function useCheckRoute(): <Params extends Record<string, unknown>>(prop1: string | Route<Params, unknown>, prop2?: RouteNavigationOptions<Params>) => boolean;
+export declare function useCheckRoute(): <Params extends Record<string, unknown>>(prop1: string | Route<Params>, prop2?: RouteNavigationOptions<Params>) => boolean;
 export declare function normalizePushOptions(o: PushOptions | ComponentWithProperties, currentComponent: ComponentWithProperties | null, urlHelpers: ReturnType<typeof useUrl>): PushOptions;
 export declare function useManualPresent(): (present: (options: PushOptions) => Promise<void> | void, options: PushOptions | ComponentWithProperties) => void | Promise<void>;
 export declare function useShow(): (options: PushOptions | ComponentWithProperties) => 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.8.2",
+    "version": "2.10.0",
     "exports": {
         ".": {
             "import": "./dist/index.js",
@@ -24,7 +24,7 @@
         "build": "vite build",
         "dev": "vite serve test --mode development",
         "build:dev": "vite build --mode development",
-        "lint": "eslint . --ext .js,.ts"
+        "lint": "eslint"
     },
     "files": [
         "dist"
@@ -32,18 +32,12 @@
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.12.7",
-        "@typescript-eslint/eslint-plugin": "^7.7.1",
-        "@typescript-eslint/parser": "^7.7.1",
         "@vitejs/plugin-vue": "^5.0.4",
-        "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/runtime-core": "^3.5.12",
-        "eslint": "^8",
-        "eslint-plugin-simple-import-sort": "^12.1.0",
-        "eslint-plugin-vue": "^9.25.0",
+        "eslint-plugin-stamhoofd": "^2.74.0",
         "sass": "^1.32.4",
-        "tslib": "^2.6.2",
+        "tslib": "^2.8.1",
         "typescript": "^5.6.2",
-        "typescript-eslint": "^7.7.1",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^3.9.0",
         "vue": "^3.5.12"