@simonbackx/vue-app-navigation 2.11.1 → 2.12.0

package/dist/index.js

@@ -845,10 +845,16 @@ const _ComponentWithProperties = class _ComponentWithProperties {
       this.vnode = null;
     }
   }
+  /**
+   * @deprecated
+   */
   setDisplayStyle(style) {
     this.modalDisplayStyle = style;
     return this;
   }
+  /**
+   * @deprecated
+   */
   setAnimated(animated) {
     this.animated = animated;
     return this;
@@ -2380,7 +2386,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) {
+      if ((style === "popup" || style === "sheet" || style === "side-view") && (options.forceModalDisplay === true || ((_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$1, {
           root: component,
           className: options.modalClass ?? style,
@@ -2610,7 +2616,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       (_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)) {
+      if (mainContent.value && event.target && !mainContent.value.contains(event.target) && (event.target.isConnected && document.body.contains(event.target))) {
         dismiss().catch(console.error);
         event.preventDefault();
       }
@@ -2641,7 +2647,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               component: _ctx.root
             }, null, 8, ["component"]))
           ])
-        ], 512)
+        ], 512),
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "background" }, null, -1))
       ], 6);
     };
   }

package/dist/src/ComponentWithProperties.d.ts

@@ -63,6 +63,12 @@ export declare class ComponentWithProperties {
     componentInstance(): ComponentPublicInstance | null;
     shouldNavigateAway(): Promise<boolean>;
     destroy(vnode: VNode): void;
+    /**
+     * @deprecated
+     */
     setDisplayStyle(style: ModalDisplayStyle): ComponentWithProperties;
+    /**
+     * @deprecated
+     */
     setAnimated(animated: boolean): ComponentWithProperties;
 }

package/dist/src/PushOptions.d.ts

@@ -48,6 +48,10 @@ export interface PushOptions {
      * Reverse the animation if possible. Defaults to false
      */
     reverse?: boolean;
+    /**
+     * Ignore client width checks, always display as modal, also on mobile devices.
+     */
+    forceModalDisplay?: boolean;
     modalDisplayStyle?: ModalDisplayStyle;
     modalClass?: string;
     modalCssStyle?: string;

package/package.json

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