@simonbackx/vue-app-navigation 2.5.1 → 2.5.3

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { inject, ref, reactive, markRaw, proxyRefs, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, defineComponent, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, onDeactivated, normalizeClass, normalizeStyle, TransitionGroup, Fragment, renderList, isRef } from "vue";
+import { inject, ref, reactive, markRaw, proxyRefs, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, defineComponent, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, onDeactivated, normalizeClass, normalizeStyle, isRef, TransitionGroup, Fragment, renderList } from "vue";
 const _UrlHelper = class _UrlHelper {
   constructor(url, localFixedPrefix) {
     __publicField(this, "url");
@@ -2136,7 +2136,8 @@ function useCanDismiss() {
   return computed(() => !!unref(rawDismiss));
 }
 function useFocused() {
-  return inject("reactive_navigation_focused", true);
+  const rawFocused = inject("reactive_navigation_focused", true);
+  return computed(() => !!unref(rawFocused));
 }
 function extendUrl(url) {
   const urlHelpers = useUrl();
@@ -2256,15 +2257,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const j = Object.keys(vvv).filter((p) => !!vvv[p]).join(" ");
       return j + (j ? " " : "") + (props.className ? props.className : "popup") + (props.root.animated ? " animated" : "");
     });
-    const isFocused = computed(() => {
-      var _a;
-      const popups = (_a = modalStackComponent.value.stackComponent) == null ? void 0 : _a.getFocusedComponent();
-      if (popups !== component) {
-        return false;
-      }
-      return true;
-    });
-    provide("reactive_navigation_focused", isFocused);
+    const isFocused = useFocused();
     const onKey = (event) => {
       if (event.defaultPrevented || event.repeat) {
         return;
@@ -2332,6 +2325,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function injectHooks(instanceProxy, definitions) {
+  const ctx = instanceProxy.$.ctx;
+  for (const key in definitions) {
+    if (!isRef(definitions[key])) {
+      ctx[key] = definitions[key];
+    } else {
+      const val = definitions[key];
+      Object.defineProperty(ctx, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => {
+          return val.value;
+        },
+        set: () => {
+          warn(`Cannot assign to '${key}' of navigation mixin. This is a read-only property.`);
+        }
+      });
+    }
+  }
+}
 const StackComponent$1 = defineComponent({
   name: "StackComponent",
   components: {
@@ -2346,6 +2359,12 @@ const StackComponent$1 = defineComponent({
   beforeUnmount() {
     this.components = [];
   },
+  created() {
+    const definitions = {
+      parentIsFocused: useFocused()
+    };
+    injectHooks(this, definitions);
+  },
   methods: {
     getCustomProvide(index, key) {
       return {
@@ -2357,7 +2376,8 @@ const StackComponent$1 = defineComponent({
           console.warn("Avoid calling dismiss in components on the StackComponent, since options are not supported here");
           this.removeAt(index, key);
         },
-        reactive_navigation_can_dismiss: false
+        reactive_navigation_can_dismiss: false,
+        reactive_navigation_focused: !!this.parentIsFocused && this.getFocusedComponent() === this.components[index]
       };
     },
     show(component) {
@@ -2423,26 +2443,6 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const StackComponent = /* @__PURE__ */ _export_sfc(StackComponent$1, [["render", _sfc_render$2]]);
-function injectHooks(instanceProxy, definitions) {
-  const ctx = instanceProxy.$.ctx;
-  for (const key in definitions) {
-    if (!isRef(definitions[key])) {
-      ctx[key] = definitions[key];
-    } else {
-      const val = definitions[key];
-      Object.defineProperty(ctx, key, {
-        enumerable: true,
-        configurable: true,
-        get: () => {
-          return val.value;
-        },
-        set: () => {
-          warn(`Cannot assign to '${key}' of navigation mixin. This is a read-only property.`);
-        }
-      });
-    }
-  }
-}
 function useModalStackComponent() {
   const c = inject("reactive_modalStackComponent");
   return shallowRef(c);
@@ -2483,6 +2483,13 @@ const ModalStackComponent$1 = defineComponent({
     // Can also be wrapped in modal stack component
     modalStackComponent() {
       return this;
+    },
+    isFocused() {
+      return !!this.parentIsFocused;
+    },
+    isNavigationControllerFocused() {
+      var _a;
+      return this.isFocused && !((_a = this.stackComponent) == null ? void 0 : _a.getFocusedComponent());
     }
   },
   created() {
@@ -2490,7 +2497,8 @@ const ModalStackComponent$1 = defineComponent({
       parentPresent: usePresent(),
       parentDismiss: useDismiss(),
       parentPop: usePop(),
-      parentShow: useShow()
+      parentShow: useShow(),
+      parentIsFocused: useFocused()
     };
     injectHooks(this, definitions);
   },
@@ -2555,8 +2563,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ref: "navigationController",
       "animation-type": "modal",
       root: _ctx.root,
-      "initial-components": _ctx.initialComponents
-    }, null, 8, ["root", "initial-components"]),
+      "initial-components": _ctx.initialComponents,
+      "custom-provide": {
+        reactive_navigation_focused: _ctx.isNavigationControllerFocused
+      }
+    }, null, 8, ["root", "initial-components", "custom-provide"]),
     createVNode(_component_StackComponent, {
       ref: "stackComponent",
       onReturnToHistoryIndex: _ctx.returnToHistoryIndex

package/dist/src/ModalMixin.d.ts

@@ -29,6 +29,7 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('./ComponentWithProperties').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -100,6 +101,7 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('./ComponentWithProperties').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -351,6 +353,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
             initialComponents: import('./ComponentWithProperties').ComponentWithProperties[] | null;
             initialPresents: import('./PushOptions').PushOptions[] | null;
         }>;
+        isFocused(): boolean;
+        isNavigationControllerFocused(): boolean;
     }, {
         present(options: import('./PushOptions').PushOptions): void;
         returnToHistoryIndex(): boolean;
@@ -405,6 +409,7 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('./ComponentWithProperties').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -476,6 +481,7 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('./ComponentWithProperties').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -727,6 +733,8 @@ export declare const ModalMixin: import('vue').DefineComponent<{}, {}, {}, {}, {
             initialComponents: import('./ComponentWithProperties').ComponentWithProperties[] | null;
             initialPresents: import('./PushOptions').PushOptions[] | null;
         }>;
+        isFocused(): boolean;
+        isNavigationControllerFocused(): boolean;
     }, {
         present(options: import('./PushOptions').PushOptions): void;
         returnToHistoryIndex(): boolean;

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

@@ -28,6 +28,7 @@ declare const ModalStackComponent: import('vue').DefineComponent<{
             reactive_navigation_can_pop: boolean;
             reactive_navigation_dismiss: () => void;
             reactive_navigation_can_dismiss: boolean;
+            reactive_navigation_focused: boolean;
         };
         show(component: ComponentWithProperties): void;
         getFocusedComponent(): {
@@ -99,6 +100,7 @@ declare const ModalStackComponent: import('vue').DefineComponent<{
             reactive_navigation_can_pop: boolean;
             reactive_navigation_dismiss: () => void;
             reactive_navigation_can_dismiss: boolean;
+            reactive_navigation_focused: boolean;
         };
         show(component: ComponentWithProperties): void;
         getFocusedComponent(): {
@@ -350,6 +352,8 @@ declare const ModalStackComponent: import('vue').DefineComponent<{
         initialComponents: ComponentWithProperties[] | null;
         initialPresents: PushOptions[] | null;
     }>;
+    isFocused(): boolean;
+    isNavigationControllerFocused(): boolean;
 }, {
     present(options: PushOptions): void;
     returnToHistoryIndex(): boolean;

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

@@ -8,6 +8,7 @@ declare const StackComponent: import('vue').DefineComponent<{}, {}, {
         reactive_navigation_can_pop: boolean;
         reactive_navigation_dismiss: () => void;
         reactive_navigation_can_dismiss: boolean;
+        reactive_navigation_focused: boolean;
     };
     show(component: ComponentWithProperties): void;
     getFocusedComponent(): {

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

@@ -80,7 +80,7 @@ export declare function usePresent(): (options: PushOptions | ComponentWithPrope
 export declare function useDismiss(): (options?: PopOptions) => Promise<void>;
 export declare function useCanPop(): Ref<boolean>;
 export declare function useCanDismiss(): Ref<boolean>;
-export declare function useFocused(): boolean | Ref<boolean>;
+export declare function useFocused(): import('vue').ComputedRef<boolean>;
 /**
  * Add a url 'prefix' to the current url and all its children
  */

package/dist/test/EditWebshopMixin.d.ts

@@ -92,6 +92,7 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('..').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -163,6 +164,7 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('..').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -414,6 +416,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
             initialComponents: import('..').ComponentWithProperties[] | null;
             initialPresents: import('..').PushOptions[] | null;
         }>;
+        isFocused(): boolean;
+        isNavigationControllerFocused(): boolean;
     }, {
         present(options: import('..').PushOptions): void;
         returnToHistoryIndex(): boolean;
@@ -468,6 +472,7 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('..').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -539,6 +544,7 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
                 reactive_navigation_can_pop: boolean;
                 reactive_navigation_dismiss: () => void;
                 reactive_navigation_can_dismiss: boolean;
+                reactive_navigation_focused: boolean;
             };
             show(component: import('..').ComponentWithProperties): void;
             getFocusedComponent(): {
@@ -790,6 +796,8 @@ declare const EditWebshopMixin_base: new (...args: any) => import('../src/class-
             initialComponents: import('..').ComponentWithProperties[] | null;
             initialPresents: import('..').PushOptions[] | null;
         }>;
+        isFocused(): boolean;
+        isNavigationControllerFocused(): boolean;
     }, {
         present(options: import('..').PushOptions): void;
         returnToHistoryIndex(): boolean;

package/package.json

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