@capgo/capacitor-transitions 8.0.3 → 8.1.0

package/dist/vue/index.d.mts

@@ -4,6 +4,8 @@
  */
 /** Direction of the navigation transition */
 type TransitionDirection = 'forward' | 'back' | 'root' | 'none';
+/** Navigation stack action to record independently from the animation direction */
+type NavigationAction = 'forward' | 'back' | 'root' | 'none';
 /** Platform-specific animation styles */
 type TransitionPlatform = 'ios' | 'android' | 'auto';
 /** Whether the edge swipe-back gesture is enabled, disabled, or native-detected */
@@ -20,6 +22,8 @@ interface TransitionConfig {
     easing?: TransitionEasing;
     /** Direction of transition */
     direction?: TransitionDirection;
+    /** Navigation stack action (default: follows direction, except 'none' keeps push behavior for compatibility) */
+    navigationAction?: NavigationAction;
     /** Which elements to animate (default: 'all') */
     targets?: TransitionTarget[];
     /** Custom animation keyframes for entering element */
@@ -186,6 +190,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -262,6 +267,10 @@ declare function getController(): TransitionController;
  */
 declare function getDirection(): TransitionDirection;
 declare function setDirection(direction: TransitionDirection): void;
+/**
+ * Set the navigation action and animation direction for the next router navigation.
+ */
+declare function setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
 /**
  * Set up a router outlet element
  * Call this in onMounted with a ref to the cap-router-outlet element
@@ -332,4 +341,4 @@ declare function setupPage(element: HTMLElement, callbacks?: {
  */
 declare function createTransitionNavigate(navigate: (to: string) => void): (to: string, direction?: TransitionDirection) => void;
 
-export { type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, setDirection, setupPage, setupRouterOutlet };
+export { type NavigationAction, type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, setDirection, setNavigation, setupPage, setupRouterOutlet };

package/dist/vue/index.d.ts

@@ -4,6 +4,8 @@
  */
 /** Direction of the navigation transition */
 type TransitionDirection = 'forward' | 'back' | 'root' | 'none';
+/** Navigation stack action to record independently from the animation direction */
+type NavigationAction = 'forward' | 'back' | 'root' | 'none';
 /** Platform-specific animation styles */
 type TransitionPlatform = 'ios' | 'android' | 'auto';
 /** Whether the edge swipe-back gesture is enabled, disabled, or native-detected */
@@ -20,6 +22,8 @@ interface TransitionConfig {
     easing?: TransitionEasing;
     /** Direction of transition */
     direction?: TransitionDirection;
+    /** Navigation stack action (default: follows direction, except 'none' keeps push behavior for compatibility) */
+    navigationAction?: NavigationAction;
     /** Which elements to animate (default: 'all') */
     targets?: TransitionTarget[];
     /** Custom animation keyframes for entering element */
@@ -186,6 +190,7 @@ declare class TransitionController {
      * Main navigation method
      */
     navigate(enteringEl: HTMLElement, config?: TransitionConfig): Promise<TransitionResult>;
+    private resolveNavigationAction;
     /**
      * Navigate between two known page states
      */
@@ -262,6 +267,10 @@ declare function getController(): TransitionController;
  */
 declare function getDirection(): TransitionDirection;
 declare function setDirection(direction: TransitionDirection): void;
+/**
+ * Set the navigation action and animation direction for the next router navigation.
+ */
+declare function setNavigation(action: NavigationAction, direction?: TransitionDirection): void;
 /**
  * Set up a router outlet element
  * Call this in onMounted with a ref to the cap-router-outlet element
@@ -332,4 +341,4 @@ declare function setupPage(element: HTMLElement, callbacks?: {
  */
 declare function createTransitionNavigate(navigate: (to: string) => void): (to: string, direction?: TransitionDirection) => void;
 
-export { type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, setDirection, setupPage, setupRouterOutlet };
+export { type NavigationAction, type NavigationEvent, type SwipeGestureOption, TransitionController, type TransitionDirection, type TransitionGlobalConfig, createTransitionNavigate, getController, getDirection, initTransitions, setDirection, setNavigation, setupPage, setupRouterOutlet };

package/dist/vue/index.js

@@ -26,11 +26,27 @@ __export(index_exports, {
   getDirection: () => getDirection,
   initTransitions: () => initTransitions,
   setDirection: () => setDirection,
+  setNavigation: () => setNavigation,
   setupPage: () => setupPage,
   setupRouterOutlet: () => setupRouterOutlet
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/core/navigation.ts
+function getDefaultNavigationDirection(action) {
+  return action;
+}
+function setOutletDirectionIntent(outlet, direction) {
+  const element = outlet;
+  element.dataset.direction = direction;
+  delete element.dataset.navigationAction;
+}
+function setOutletNavigationIntent(outlet, action, direction = getDefaultNavigationDirection(action)) {
+  const element = outlet;
+  element.dataset.navigationAction = action;
+  element.dataset.direction = direction;
+}
+
 // src/core/animations.ts
 var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
 var ANDROID_EASING = "cubic-bezier(0.36, 0.66, 0.04, 1)";
@@ -905,19 +921,24 @@ var TransitionController = class {
    * Replace all pages with a new root
    */
   async setRoot(enteringEl, config = {}) {
-    return this.navigate(enteringEl, { ...config, direction: "root" });
+    return this.navigate(enteringEl, {
+      ...config,
+      direction: config.direction ?? "root",
+      navigationAction: "root"
+    });
   }
   /**
    * Main navigation method
    */
   async navigate(enteringEl, config = {}) {
     const direction = config.direction || "forward";
+    const navigationAction = this.resolveNavigationAction(direction, config.navigationAction);
     const enteringState = this.createPageState(enteringEl);
     const leavingState = this.currentPage;
     return this.navigateWithStates(enteringState, leavingState, config, () => {
-      if (direction === "root") {
+      if (navigationAction === "root") {
         this.pageStack = [enteringState];
-      } else if (direction === "back" && this.pageStack.length > 0) {
+      } else if (navigationAction === "back" && this.pageStack.length > 0) {
         this.pageStack.pop();
         const staleEnteringState = this.pageStack.pop();
         if (staleEnteringState && staleEnteringState.element !== enteringState.element) {
@@ -925,11 +946,27 @@ var TransitionController = class {
           this.lifecycleCallbacks.delete(staleEnteringState.id);
         }
         this.pageStack.push(enteringState);
+      } else if (navigationAction === "none" && this.pageStack.length > 0) {
+        const staleState = this.pageStack.pop();
+        if (staleState && staleState.element !== enteringState.element) {
+          staleState.element.remove();
+          this.lifecycleCallbacks.delete(staleState.id);
+        }
+        this.pageStack.push(enteringState);
       } else {
         this.pageStack.push(enteringState);
       }
     });
   }
+  resolveNavigationAction(direction, navigationAction) {
+    if (navigationAction) {
+      return navigationAction;
+    }
+    if (direction === "root" || direction === "back") {
+      return direction;
+    }
+    return "forward";
+  }
   /**
    * Navigate between two known page states
    */
@@ -1405,20 +1442,29 @@ var CapRouterOutlet = class extends HTMLElement {
    */
   async handleNewPage(page) {
     const outletDirection = this.dataset.direction;
+    const outletNavigationAction = this.dataset.navigationAction;
     const explicitDirection = page.dataset.direction || outletDirection;
+    const explicitNavigationAction = page.dataset.navigationAction || outletNavigationAction;
     const direction = this.resolveNavigationDirection(explicitDirection);
     if (outletDirection) {
       delete this.dataset.direction;
     }
+    if (outletNavigationAction) {
+      delete this.dataset.navigationAction;
+    }
     const skipTransition = this.skipNextHistoryBackTransition && direction === "back";
     this.skipNextHistoryBackTransition = false;
     const hadPageBefore = this.controller.stack.length > 0;
     this.stylePageForTransition(page);
     this.pendingPage = page;
     try {
-      const result = await this.controller.navigate(page, { direction, duration: skipTransition ? 0 : void 0 });
+      const result = await this.controller.navigate(page, {
+        direction,
+        navigationAction: explicitNavigationAction,
+        duration: skipTransition ? 0 : void 0
+      });
       if (result.success) {
-        this.recordCompletedNavigation(direction, { hadPageBefore });
+        this.recordCompletedNavigation(explicitNavigationAction ?? direction, { hadPageBefore });
       }
     } finally {
       this.pendingPage = null;
@@ -1547,6 +1593,12 @@ var CapRouterOutlet = class extends HTMLElement {
       this.updateSwipeGestureListeners();
     }
   }
+  /**
+   * Set the navigation stack action and animation direction for the next router-driven navigation.
+   */
+  setNavigation(action, direction = getDefaultNavigationDirection(action)) {
+    setOutletNavigationIntent(this, action, direction);
+  }
   /**
    * Get the transition controller for advanced usage
    */
@@ -1945,7 +1997,7 @@ var CapRouterOutlet = class extends HTMLElement {
     }
     if (shouldUseHistory) {
       this.skipNextHistoryBackTransition = true;
-      this.dataset.direction = "back";
+      setOutletDirectionIntent(this, "back");
       window.history.back();
       return;
     }
@@ -2381,7 +2433,15 @@ function setDirection(direction) {
   globalDirection = direction;
   if (typeof document !== "undefined") {
     for (const outlet of document.querySelectorAll("cap-router-outlet")) {
-      outlet.dataset.direction = direction;
+      setOutletDirectionIntent(outlet, direction);
+    }
+  }
+}
+function setNavigation(action, direction = getDefaultNavigationDirection(action)) {
+  globalDirection = direction;
+  if (typeof document !== "undefined") {
+    for (const outlet of document.querySelectorAll("cap-router-outlet")) {
+      setOutletNavigationIntent(outlet, action, direction);
     }
   }
 }
@@ -2431,6 +2491,7 @@ function createTransitionNavigate(navigate) {
   getDirection,
   initTransitions,
   setDirection,
+  setNavigation,
   setupPage,
   setupRouterOutlet
 });