@simonbackx/vue-app-navigation 2.17.3 → 2.18.0

package/dist/classes.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import "vue";
 class VueComponent {
   // This will allow us to pass the vue proxy inside the component

package/dist/index.js

@@ -1,10 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { inject, proxyRefs, markRaw, ref, reactive, defineComponent, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, mergeProps, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeClass, normalizeStyle } from "vue";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { ref, reactive, markRaw, proxyRefs, inject, defineComponent, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, shallowRef, callWithAsyncErrorHandling, ErrorCodes, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, mergeProps, Transition, withCtx, createBlock, createCommentVNode, onScopeDispose, customRef, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeStyle, normalizeClass } from "vue";
 const _UrlHelper = class _UrlHelper {
   constructor(url, localFixedPrefix) {
     __publicField(this, "url");
@@ -266,8 +263,7 @@ class HistoryManagerStatic {
         let timer = void 0;
         let called = false;
         const listener = () => {
-          if (called)
-            return;
+          if (called) return;
           called = true;
           clearTimeout(timer);
           window.removeEventListener("popstate", listener);
@@ -733,18 +729,15 @@ const _ComponentWithProperties = class _ComponentWithProperties {
       if (this.isKeptAlive) {
         this.isKeptAlive = false;
         _ComponentWithProperties.keepAliveCounter--;
-        if (_ComponentWithProperties.debug)
-          console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+        if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
       } else {
-        if (_ComponentWithProperties.debug)
-          console.warn("About to mount a component that was not destroyed properly " + this.component.name);
+        if (_ComponentWithProperties.debug) console.warn("About to mount a component that was not destroyed properly " + this.component.name);
         this.destroy(this.vnode);
       }
     }
   }
   getHistoryIndex() {
-    if (this.component)
-      return this.historyIndex;
+    if (this.component) return this.historyIndex;
   }
   deleteHistoryIndex() {
     this.historyIndex = null;
@@ -784,8 +777,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
   }
   setUrl(url, title) {
     if (this.historyIndex === null) {
-      if (_ComponentWithProperties.debug)
-        console.warn("Tried calling .setUrl on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
+      if (_ComponentWithProperties.debug) console.warn("Tried calling .setUrl on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
       return;
     }
     if (!HistoryManager.active) {
@@ -801,8 +793,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
       return;
     }
     if (this.historyIndex === null) {
-      if (_ComponentWithProperties.debug)
-        console.warn("Tried calling .setTitle on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
+      if (_ComponentWithProperties.debug) console.warn("Tried calling .setTitle on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
       return;
     }
     if (!HistoryManager.active) {
@@ -820,15 +811,13 @@ const _ComponentWithProperties = class _ComponentWithProperties {
     const instance = this.componentInstance();
     if (instance == null ? void 0 : instance.returnToHistoryIndex) {
       const worked = instance == null ? void 0 : instance.returnToHistoryIndex();
-      if (_ComponentWithProperties.debug)
-        console.log("returning to instance that has an instance with custom returnToHistoryIndex method", this.component.name, worked);
+      if (_ComponentWithProperties.debug) console.log("returning to instance that has an instance with custom returnToHistoryIndex method", this.component.name, worked);
       if (worked === true) {
         return true;
       }
     }
     if (this.historyIndex === null) {
-      if (_ComponentWithProperties.debug)
-        console.warn("Returning to a component that has no history index assigned. Has this component been pushed to a navigation controller properly before returning to it?", this.component.name);
+      if (_ComponentWithProperties.debug) console.warn("Returning to a component that has no history index assigned. Has this component been pushed to a navigation controller properly before returning to it?", this.component.name);
       return false;
     }
     HistoryManager.returnToHistoryIndex(this.historyIndex);
@@ -861,8 +850,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
   destroy(vnode) {
     if (this.vnode) {
       if (vnode !== this.vnode) {
-        if (_ComponentWithProperties.debug)
-          console.warn("Received destroy event from old/different vnode", this.vnode, vnode);
+        if (_ComponentWithProperties.debug) console.warn("Received destroy event from old/different vnode", this.vnode, vnode);
         return;
       }
       if (this.keepAlive) {
@@ -870,23 +858,18 @@ const _ComponentWithProperties = class _ComponentWithProperties {
         if (!this.isKeptAlive) {
           this.isKeptAlive = true;
           _ComponentWithProperties.keepAliveCounter++;
-          if (_ComponentWithProperties.debug)
-            console.log("Kept component alive " + this.component.name);
-          if (_ComponentWithProperties.debug)
-            console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+          if (_ComponentWithProperties.debug) console.log("Kept component alive " + this.component.name);
+          if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
         }
         return;
       }
       if (this.isKeptAlive) {
         this.isKeptAlive = false;
         _ComponentWithProperties.keepAliveCounter--;
-        if (_ComponentWithProperties.debug)
-          console.log("Freed component from alive stack " + this.component.name);
-        if (_ComponentWithProperties.debug)
-          console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+        if (_ComponentWithProperties.debug) console.log("Freed component from alive stack " + this.component.name);
+        if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
       }
-      if (_ComponentWithProperties.debug)
-        console.log("Destroyed component " + this.component.name, this.vnode);
+      if (_ComponentWithProperties.debug) console.log("Destroyed component " + this.component.name, this.vnode);
       if (this.unmount) {
         this.unmount(this.vnode);
         this.unmount = null;
@@ -919,7 +902,7 @@ __publicField(_ComponentWithProperties, "debug", false);
 __publicField(_ComponentWithProperties, "historyIndexOwners", /* @__PURE__ */ new Map());
 let ComponentWithProperties = _ComponentWithProperties;
 /**
-* @vue/shared v3.5.16
+* @vue/shared v3.5.30
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -931,28 +914,9 @@ const invokeArrayFns = (fns, ...arg) => {
   }
 };
 const ShapeFlags = {
-  "ELEMENT": 1,
-  "1": "ELEMENT",
-  "FUNCTIONAL_COMPONENT": 2,
-  "2": "FUNCTIONAL_COMPONENT",
-  "STATEFUL_COMPONENT": 4,
-  "4": "STATEFUL_COMPONENT",
-  "TEXT_CHILDREN": 8,
-  "8": "TEXT_CHILDREN",
-  "ARRAY_CHILDREN": 16,
-  "16": "ARRAY_CHILDREN",
-  "SLOTS_CHILDREN": 32,
-  "32": "SLOTS_CHILDREN",
-  "TELEPORT": 64,
-  "64": "TELEPORT",
   "SUSPENSE": 128,
-  "128": "SUSPENSE",
   "COMPONENT_SHOULD_KEEP_ALIVE": 256,
-  "256": "COMPONENT_SHOULD_KEEP_ALIVE",
-  "COMPONENT_KEPT_ALIVE": 512,
-  "512": "COMPONENT_KEPT_ALIVE",
-  "COMPONENT": 6,
-  "6": "COMPONENT"
+  "COMPONENT_KEPT_ALIVE": 512
 };
 function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
   callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
@@ -964,8 +928,8 @@ function getInnerChild(vnode) {
   return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent : vnode;
 }
 function resetShapeFlag(vnode) {
-  vnode.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
-  vnode.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE;
+  vnode.shapeFlag &= -257;
+  vnode.shapeFlag &= -513;
 }
 function makeProvidesParentReactive(instance) {
   var _a;
@@ -986,7 +950,7 @@ function makeProvidesParentReactive(instance) {
       });
     },
     // Vue valides keys using 'a' in obj, so we need to handle this correctly
-    has(target, key) {
+    has() {
       return true;
     }
   });
@@ -1405,7 +1369,7 @@ const _sfc_main$4 = defineComponent({
       const mightBe = (_a = element ?? this.$el) == null ? void 0 : _a.querySelector("main");
       return mightBe ? mightBe : null;
     },
-    getScrollElement(element = null) {
+    getScrollElement(_ = null) {
       return document.documentElement;
     },
     shouldAnimate() {
@@ -1435,8 +1399,7 @@ const _sfc_main$4 = defineComponent({
         if (replace > this.components.length) {
           replace = this.components.length;
         }
-        if (ComponentWithProperties.debug)
-          console.log("Pushing new component on navigation controller: " + component.component.name);
+        if (ComponentWithProperties.debug) console.log("Pushing new component on navigation controller: " + component.component.name);
         if (replace > 0) {
           if (destroy && !force) {
             for (let index = this.components.length - 1; index >= this.components.length - replace; index--) {
@@ -1826,7 +1789,7 @@ function useNavigate() {
         url,
         adjustHistory: (options == null ? void 0 : options.adjustHistory) ?? true,
         animated: (options == null ? void 0 : options.animated) ?? true,
-        modalDisplayStyle: "present" in route && typeof route.present === "string" ? route.present : void 0,
+        modalDisplayStyle: route.present && typeof route.present === "string" ? route.present : void 0,
         checkRoutes: (options == null ? void 0 : options.checkRoutes) ?? false,
         componentProperties: await componentProperties
       });
@@ -2512,8 +2475,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ref_key: "navigationController",
           ref: navigationController,
           "animation-type": "modal",
-          root: _ctx.root,
-          "initial-components": _ctx.initialComponents,
+          root: __props.root,
+          "initial-components": __props.initialComponents,
           "custom-provide": customProvide.value
         }, null, 8, ["root", "initial-components", "custom-provide"]),
         createVNode(_sfc_main$3, {
@@ -2578,8 +2541,7 @@ const navigationMethods = {
   setTitle() {
     var _a;
     const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
-    if (!navigationOptions)
-      return;
+    if (!navigationOptions) return;
     const title = navigationOptions.title;
     if (typeof title === "function") {
       this.$url.setTitle(title.call(this));
@@ -2719,7 +2681,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(buildClass.value),
-        style: normalizeStyle(_ctx.style),
+        style: normalizeStyle(__props.style),
         onClick
       }, [
         createElementVNode("div", {
@@ -2728,8 +2690,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("div", _hoisted_1$1, [
             (openBlock(), createBlock(unref(ComponentWithPropertiesInstance), {
-              key: _ctx.root.key,
-              component: _ctx.root
+              key: __props.root.key,
+              component: __props.root
             }, null, 8, ["component"]))
           ])
         ], 512),

package/dist/main.css

@@ -59,11 +59,6 @@
 .navigation-controller > .modal-pop-leave-to > div {
   transform: translateY(100vh);
 }
-.navigation-controller > .push {
-  /*&-enter-from, &-leave-to {
-      opacity: 0;
-  }*/
-}
 .navigation-controller > .push-enter-active {
   user-select: none;
 }
@@ -103,6 +98,11 @@
 .navigation-controller > .push-leave-to {
   filter: brightness(80%);
 }
+.navigation-controller > .push {
+  /*&-enter-from, &-leave-to {
+      opacity: 0;
+  }*/
+}
 .navigation-controller > .push-enter-from > div {
   transform: translateX(100%);
   transform: translateX(calc(100% * var(--direction-scale-x, 1)));
@@ -160,8 +160,6 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  min-height: 100vh;
-  min-height: calc(var(--vh, 1vh) * 100);
 }
 .split-view-controller > .master {
   flex-shrink: 0;
@@ -187,6 +185,10 @@
   border-top-left-radius: $border-radius;
   border-bottom-left-radius: $border-radius;*/
 }
+.split-view-controller {
+  min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
+}
 .split-view-controller[data-has-detail=true] {
   display: grid;
   grid-template-columns: 320px 1fr;

package/dist/src/ComponentWithProperties.d.ts

@@ -1,5 +1,5 @@
-import { HistoryUrl } from './HistoryManager';
 import { ComponentInternalInstance, ComponentPublicInstance, Raw, VNode } from 'vue';
+import { HistoryUrl } from './HistoryManager';
 
 export type ModalDisplayStyle = 'cover' | 'popup' | 'overlay' | 'sheet' | 'side-view';
 export declare function useCurrentComponent(): ComponentWithPropertiesType | null;

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

@@ -1,5 +1,5 @@
-import { PushOptions } from './PushOptions';
 import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
+import { PushOptions } from './PushOptions';
 
 declare function present(options: PushOptions): Promise<void>;
 declare function replace(component: ComponentWithPropertiesType, animated?: boolean): void;

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

@@ -1,7 +1,7 @@
-import { PushOptions } from './PushOptions';
-import { PopOptions } from './PopOptions';
-import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
 import { PropType } from 'vue';
+import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
+import { PopOptions } from './PopOptions';
+import { PushOptions } from './PushOptions';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     root: {
@@ -38,7 +38,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     growSize(width: number, height: number): void;
     unfreezeSize(): void;
     getInternalScrollElement(element?: Element | null): HTMLElement | null;
-    getScrollElement(element?: HTMLElement | null): HTMLElement;
+    getScrollElement(_?: HTMLElement | null): HTMLElement;
     shouldAnimate(): any;
     returnToHistoryIndex(): boolean;
     push(options: PushOptions): Promise<void>;
@@ -144,7 +144,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         growSize(width: number, height: number): void;
         unfreezeSize(): void;
         getInternalScrollElement(element?: Element | null): HTMLElement | null;
-        getScrollElement(element?: HTMLElement | null): HTMLElement;
+        getScrollElement(_?: HTMLElement | null): HTMLElement;
         shouldAnimate(): any;
         returnToHistoryIndex(): boolean;
         push(options: PushOptions): Promise<void>;
@@ -244,7 +244,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         growSize(width: number, height: number): void;
         unfreezeSize(): void;
         getInternalScrollElement(element?: Element | null): HTMLElement | null;
-        getScrollElement(element?: HTMLElement | null): HTMLElement;
+        getScrollElement(_?: HTMLElement | null): HTMLElement;
         shouldAnimate(): any;
         returnToHistoryIndex(): boolean;
         push(options: PushOptions): Promise<void>;

package/dist/src/NavigationMixin.d.ts

@@ -1,10 +1,10 @@
-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 './useSplitViewController';
-import { default as Popup } from './Popup.vue';
-import { default as NavigationController } from './NavigationController.vue';
 import { DefineComponent, Ref } from 'vue';
+import { default as NavigationController } from './NavigationController.vue';
+import { default as Popup } from './Popup.vue';
+import { useSplitViewController } from './useSplitViewController';
+import { NavigationOptions, useCanDismiss, useCanPop, useDismiss, useFocused, useNavigate, usePop, usePresent, useShow, useShowDetail, useUrl } from './utils/navigationHooks';
+import { useModalStackComponent } from './utils/useModalStackComponent';
+import { useNavigationController } from './useNavigationController';
 
 /**
  * @returns To detect whether you are in a popup

package/dist/src/Plugin.d.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue';
 
 export declare const VueAppNavigationPlugin: {
-    install(app: App): void;
+    install(_: App): void;
 };

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

@@ -1,5 +1,5 @@
-import { PopOptions } from './PopOptions';
 import { ComponentWithProperties } from './ComponentWithProperties';
+import { PopOptions } from './PopOptions';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     root: ComponentWithProperties;

package/dist/src/PushOptions.d.ts

@@ -9,50 +9,50 @@ export interface PushOptions {
      * The url for this new route.
      * Set to null to specifically ignore or extending url (displayed view will copy the previous url - which is not the same as the url of the previous view)
      */
-    url?: string | null;
+    url?: string | null | undefined;
     /**
      * Whether we should push a new real state in the browser history
      */
-    adjustHistory?: boolean;
+    adjustHistory?: boolean | undefined;
     /**
      * When the user will click back, the page will reload if this set is true, instead of doing js based navigation
      */
-    invalidHistory?: boolean;
+    invalidHistory?: boolean | undefined;
     /**
      * Whether this component was pushed as result of a url reconstruction.
      * Setting this will allow the component to build further on the url reconstruction
      */
-    checkRoutes?: boolean;
+    checkRoutes?: boolean | undefined;
     /**
      * Use animations if possible. Default value is the animated property of ComponentWithProperties.
      * In the future, we might remove the animated property of ComponentWithProperties and enable animations by default here.
      */
-    animated?: boolean;
+    animated?: boolean | undefined;
     /**
      * Whether the "shouldNavigateAway" popped components will get called and respected. Set force to true to ignore
      * shouldNavigateAway. Most of the time you'll need to set this to true for programmatic navigation (e.g. as a result of an API call).
      * Set to false (= default) for user interaction (e.g. when he pressed the close button, when he tapped outside a popup, pressed the ESC key)
      */
-    force?: boolean;
+    force?: boolean | undefined;
     /**
      * Default behaviour should be 'true'. Set to true to indicate that the popped component(s) should get removed from the
      * vdom. If you set this to false, they will be kept in memory. This will set keepAlive to 'true' for the removed
      * components, making it possible to move them around in the DOM.
      */
-    destroy?: boolean;
+    destroy?: boolean | undefined;
     /**
      * How many components that need to be popped first (in the same animations, so the pop is invisible). Defaults to 0
      */
-    replace?: number;
+    replace?: number | undefined;
     /**
      * Reverse the animation if possible. Defaults to false
      */
-    reverse?: boolean;
+    reverse?: boolean | undefined;
     /**
      * Ignore client width checks, always display as modal, also on mobile devices.
      */
-    forceModalDisplay?: boolean;
-    modalDisplayStyle?: ModalDisplayStyle;
-    modalClass?: string;
-    modalCssStyle?: string;
+    forceModalDisplay?: boolean | undefined;
+    modalDisplayStyle?: ModalDisplayStyle | undefined;
+    modalClass?: string | undefined;
+    modalCssStyle?: string | undefined;
 }

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

@@ -1,8 +1,8 @@
-import { DefaultRouteHandler } from './utils/navigationHooks';
-import { PushOptions } from './PushOptions';
-import { default as NavigationController } from './NavigationController.vue';
-import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
 import { PropType } from 'vue';
+import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
+import { default as NavigationController } from './NavigationController.vue';
+import { PushOptions } from './PushOptions';
+import { DefaultRouteHandler } from './utils/navigationHooks';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     root: {
@@ -83,7 +83,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         growSize(width: number, height: number): void;
         unfreezeSize(): void;
         getInternalScrollElement(element?: Element | null): HTMLElement | null;
-        getScrollElement(element?: HTMLElement | null): HTMLElement;
+        getScrollElement(_?: HTMLElement | null): HTMLElement;
         shouldAnimate(): any;
         returnToHistoryIndex(): boolean;
         push(options: PushOptions): Promise<void>;
@@ -189,7 +189,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             growSize(width: number, height: number): void;
             unfreezeSize(): void;
             getInternalScrollElement(element?: Element | null): HTMLElement | null;
-            getScrollElement(element?: HTMLElement | null): HTMLElement;
+            getScrollElement(_?: HTMLElement | null): HTMLElement;
             shouldAnimate(): any;
             returnToHistoryIndex(): boolean;
             push(options: PushOptions): Promise<void>;
@@ -289,7 +289,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             growSize(width: number, height: number): void;
             unfreezeSize(): void;
             getInternalScrollElement(element?: Element | null): HTMLElement | null;
-            getScrollElement(element?: HTMLElement | null): HTMLElement;
+            getScrollElement(_?: HTMLElement | null): HTMLElement;
             shouldAnimate(): any;
             returnToHistoryIndex(): boolean;
             push(options: PushOptions): Promise<void>;
@@ -409,7 +409,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             growSize(width: number, height: number): void;
             unfreezeSize(): void;
             getInternalScrollElement(element?: Element | null): HTMLElement | null;
-            getScrollElement(element?: HTMLElement | null): HTMLElement;
+            getScrollElement(_?: HTMLElement | null): HTMLElement;
             shouldAnimate(): any;
             returnToHistoryIndex(): boolean;
             push(options: PushOptions): Promise<void>;
@@ -515,7 +515,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 growSize(width: number, height: number): void;
                 unfreezeSize(): void;
                 getInternalScrollElement(element?: Element | null): HTMLElement | null;
-                getScrollElement(element?: HTMLElement | null): HTMLElement;
+                getScrollElement(_?: HTMLElement | null): HTMLElement;
                 shouldAnimate(): any;
                 returnToHistoryIndex(): boolean;
                 push(options: PushOptions): Promise<void>;
@@ -615,7 +615,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 growSize(width: number, height: number): void;
                 unfreezeSize(): void;
                 getInternalScrollElement(element?: Element | null): HTMLElement | null;
-                getScrollElement(element?: HTMLElement | null): HTMLElement;
+                getScrollElement(_?: HTMLElement | null): HTMLElement;
                 shouldAnimate(): any;
                 returnToHistoryIndex(): boolean;
                 push(options: PushOptions): Promise<void>;

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

@@ -1,5 +1,5 @@
-import { ComponentWithProperties } from './ComponentWithProperties';
 import { Ref } from 'vue';
+import { ComponentWithProperties } from './ComponentWithProperties';
 
 declare function removeAt(index: number, key: number): void;
 declare function getFocusedComponent(): ComponentWithProperties | null;

package/dist/src/useNavigationController.d.ts

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

package/dist/src/useSplitViewController.d.ts

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

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

@@ -1,9 +1,9 @@
-import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
-import { PushOptions } from '../PushOptions';
-import { PopOptions } from '../PopOptions';
-import { HistoryUrl } from '../HistoryManager';
-import { ComponentWithProperties } from '../ComponentWithProperties';
 import { Component, Ref } from 'vue';
+import { ComponentWithProperties, ModalDisplayStyle } from '../ComponentWithProperties';
+import { HistoryUrl } from '../HistoryManager';
+import { PopOptions } from '../PopOptions';
+import { PushOptions } from '../PushOptions';
+import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
 
 export type Route<Params> = {
     name?: string;
@@ -11,7 +11,7 @@ export type Route<Params> = {
     params?: UrlParamsConstructors<Params>;
     query?: UrlParamsConstructors<unknown>;
     component: Component | (() => Promise<Component>) | 'self';
-    present?: 'popup' | 'sheet' | true;
+    present?: ModalDisplayStyle | true;
     show?: true | 'detail';
     isDefault?: RouteNavigationOptions<Params>;
     paramsToProps?: (params: Params, query?: URLSearchParams) => Promise<Record<string, unknown>> | Record<string, unknown>;
@@ -27,11 +27,12 @@ export type Route<Params> = {
     url: string;
     params?: UrlParamsConstructors<Params>;
     query?: UrlParamsConstructors<unknown>;
+    present?: ModalDisplayStyle | true;
     handler: (options: {
         url: string;
         adjustHistory: boolean;
         animated: boolean;
-        modalDisplayStyle: string | undefined;
+        modalDisplayStyle: ModalDisplayStyle | undefined;
         checkRoutes: boolean;
         componentProperties: Record<string, unknown>;
     }) => Promise<void>;

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

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

package/package.json

@@ -1,51 +1,54 @@
 {
-    "name": "@simonbackx/vue-app-navigation",
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "version": "2.17.3",
-    "exports": {
-        ".": {
-            "import": "./dist/index.js",
-            "types": "./dist/index.d.ts"
-        },
-        "./classes": {
-            "import": "./dist/classes.js",
-            "types": "./dist/src/classes.d.ts"
-        },
-        "./dist/main.css": {
-            "import": "./dist/main.css"
-        }
+  "name": "@simonbackx/vue-app-navigation",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "version": "2.18.0",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "sideEffects": [
-        "*.vue",
-        "*.css"
-    ],
-    "scripts": {
-        "build": "vite build",
-        "dev": "vite serve test --mode development",
-        "build:dev": "vite build --mode development",
-        "lint": "eslint"
+    "./classes": {
+      "import": "./dist/classes.js",
+      "types": "./dist/src/classes.d.ts"
     },
-    "files": [
-        "dist"
-    ],
-    "type": "module",
-    "devDependencies": {
-        "@types/node": "^20.12.7",
-        "@vitejs/plugin-vue": "^5.0.4",
-        "@vue/runtime-core": "^3.5.12",
-        "eslint-plugin-stamhoofd": "^2.74.0",
-        "sass": "^1.32.4",
-        "tslib": "^2.8.1",
-        "typescript": "^5.6.2",
-        "vite": "^5.2.10",
-        "vite-plugin-dts": "^3.9.0",
-        "vue": "^3.5.12"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.12"
-    },
-    "dependencies": {
-        "@vue/shared": "^3.5.12"
+    "./dist/main.css": {
+      "import": "./dist/main.css"
     }
-}
+  },
+  "sideEffects": [
+    "*.vue",
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/runtime-core": "^3.5.12",
+    "eslint-plugin-stamhoofd": "^2.74.0",
+    "sass": "^1.32.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vue": "^3.5.12",
+    "vue-tsc": "^3.2.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.12",
+    "tslib": "^2.8.1"
+  },
+  "dependencies": {
+    "@vue/shared": "^3.5.12"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite serve test --mode development",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}