@ionic/vue 8.2.8-dev.11724886491.1c0dd39d → 8.2.8-dev.11725452518.16aa47d3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Fragment, isVNode, Teleport, onMounted } from 'vue';
+import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Teleport, onMounted } from 'vue';
 import { defineCustomElement } from '@ionic/core/components/ion-accordion.js';
 import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion-group.js';
 import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-avatar.js';
@@ -42,7 +42,7 @@ import { defineCustomElement as defineCustomElement$D } from '@ionic/core/compon
 import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-menu.js';
 import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-menu-button.js';
 import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-menu-toggle.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-nav.js';
 import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-nav-link.js';
 import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-note.js';
 import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-picker.js';
@@ -66,30 +66,28 @@ import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/compon
 import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-skeleton-text.js';
 import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-spinner.js';
 import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-split-pane.js';
-import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-tab.js';
-import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-text.js';
-import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-textarea.js';
-import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-thumbnail.js';
-import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-title.js';
-import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toggle.js';
-import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-toolbar.js';
+import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
 import { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, initialize, modalController as modalController$1, popoverController as popoverController$1, alertController as alertController$1, actionSheetController as actionSheetController$1, loadingController as loadingController$1, pickerController as pickerController$1, toastController as toastController$1 } from '@ionic/core/components';
 export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getPlatforms, getTimeGivenProgression, iosTransitionAnimation, isPlatform, mdTransitionAnimation, menuController, openURL } from '@ionic/core/components';
-import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-back-button.js';
-import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-router-outlet.js';
 import { routeLocationKey, useRoute, matchedRouteKey } from 'vue-router';
-import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-tab-button.js';
-import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-tabs.js';
-import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-tab-bar.js';
-import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1g } from 'ionicons/components/ion-icon.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-action-sheet.js';
-import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-alert.js';
-import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-loading.js';
-import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-picker-legacy.js';
-import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-toast.js';
-import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-modal.js';
-import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-popover.js';
+import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1e } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-action-sheet.js';
+import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-alert.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-loading.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-picker-legacy.js';
+import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-modal.js';
+import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-popover.js';
 
 // @ts-nocheck
 // It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
@@ -299,7 +297,10 @@ const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', d
     'ionChange',
     'ionValueChange'
 ], 'value', 'ion-change');
-const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineCustomElement$2);
+const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineCustomElement$2, [
+    'size',
+    'shape'
+]);
 const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomElement$3, [
     'visible',
     'tappable',
@@ -307,7 +308,9 @@ const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomEl
     'ionBackdropTap'
 ]);
 const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineCustomElement$4, [
-    'color'
+    'color',
+    'shape',
+    'size'
 ]);
 const IonBreadcrumb = /*@__PURE__*/ defineContainer('ion-breadcrumb', defineCustomElement$5, [
     'collapsed',
@@ -367,6 +370,7 @@ const IonCard = /*@__PURE__*/ defineContainer('ion-card', defineCustomElement$9,
     'rel',
     'routerDirection',
     'routerAnimation',
+    'shape',
     'target'
 ]);
 const IonCardContent = /*@__PURE__*/ defineContainer('ion-card-content', defineCustomElement$a);
@@ -390,6 +394,8 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'labelPlacement',
     'justify',
     'alignment',
+    'size',
+    'shape',
     'ionChange',
     'ionFocus',
     'ionBlur'
@@ -397,7 +403,9 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
 const IonChip = /*@__PURE__*/ defineContainer('ion-chip', defineCustomElement$f, [
     'color',
     'outline',
-    'disabled'
+    'disabled',
+    'shape',
+    'size'
 ]);
 const IonCol = /*@__PURE__*/ defineContainer('ion-col', defineCustomElement$g, [
     'offset',
@@ -518,6 +526,7 @@ const IonGrid = /*@__PURE__*/ defineContainer('ion-grid', defineCustomElement$o,
 ]);
 const IonHeader = /*@__PURE__*/ defineContainer('ion-header', defineCustomElement$p, [
     'collapse',
+    'divider',
     'translucent'
 ]);
 const IonImg = /*@__PURE__*/ defineContainer('ion-img', defineCustomElement$q, [
@@ -570,6 +579,7 @@ const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$
     'shape',
     'spellcheck',
     'step',
+    'size',
     'type',
     'value',
     'ionInput',
@@ -611,7 +621,8 @@ const IonItemOption = /*@__PURE__*/ defineContainer('ion-item-option', defineCus
     'href',
     'rel',
     'target',
-    'type'
+    'type',
+    'shape'
 ]);
 const IonItemOptions = /*@__PURE__*/ defineContainer('ion-item-options', defineCustomElement$z, [
     'side',
@@ -629,7 +640,8 @@ const IonLabel = /*@__PURE__*/ defineContainer('ion-label', defineCustomElement$
 ]);
 const IonList = /*@__PURE__*/ defineContainer('ion-list', defineCustomElement$C, [
     'lines',
-    'inset'
+    'inset',
+    'shape'
 ]);
 const IonListHeader = /*@__PURE__*/ defineContainer('ion-list-header', defineCustomElement$D, [
     'color',
@@ -847,7 +859,8 @@ const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineCustomElem
     'color',
     'duration',
     'name',
-    'paused'
+    'paused',
+    'size'
 ]);
 const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCustomElement$11, [
     'contentId',
@@ -855,16 +868,10 @@ const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCusto
     'when',
     'ionSplitPaneVisible'
 ]);
-const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$12, [
-    'active',
-    'delegate',
-    'tab',
-    'component'
-]);
-const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$13, [
+const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$12, [
     'color'
 ]);
-const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$14, [
+const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$13, [
     'color',
     'autocapitalize',
     'autofocus',
@@ -893,18 +900,19 @@ const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomEl
     'label',
     'labelPlacement',
     'shape',
+    'size',
     'ionChange',
     'ionInput',
     'ionBlur',
     'ionFocus'
 ], 'value', 'ion-input');
-const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$15);
-const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$16, [
+const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$14);
+const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$15, [
     'color',
     'size',
     'ionStyle'
 ]);
-const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$17, [
+const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$16, [
     'color',
     'name',
     'checked',
@@ -918,7 +926,7 @@ const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElemen
     'ionFocus',
     'ionBlur'
 ], 'checked', 'ion-change');
-const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$18, [
+const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$17, [
     'color'
 ]);
 
@@ -1096,7 +1104,7 @@ const IonicVue = {
 };
 
 const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$19();
+    defineCustomElement$18();
     // TODO(FW-2969): type
     const ionRouter = inject("navManager");
     const onClick = () => {
@@ -1142,7 +1150,7 @@ const viewDepthKey = Symbol(0);
 const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     name: "IonRouterOutlet",
     setup() {
-        defineCustomElement$1a();
+        defineCustomElement$19();
         const injectedRoute = inject(routeLocationKey);
         const route = useRoute();
         const depth = inject(viewDepthKey, 0);
@@ -1576,13 +1584,9 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
         selected: Boolean,
         tab: String,
         target: String,
-        _onClick: {
-            type: Function,
-            required: false,
-        },
     },
     setup(props, { slots }) {
-        defineCustomElement$1b();
+        defineCustomElement$1a();
         // TODO(FW-2969): type
         const ionRouter = inject("navManager");
         const onClick = (ev) => {
@@ -1597,25 +1601,10 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
              */
             const { tab, href, _getTabState } = props;
             const tabState = _getTabState();
-            const hasRouterOutlet = tabState.hasRouterOutlet;
             const tappedTab = tabState.tabs[tab] || {};
             const originalHref = tappedTab.originalHref || href;
-            /**
-             * If the router outlet is not defined, then the tabs is being used
-             * as a basic tab navigation without the router. In this case, we
-             * don't want to update the href else the URL will change.
-             */
-            const currentHref = hasRouterOutlet ? tappedTab.currentHref || href : "";
+            const currentHref = tappedTab.currentHref || href;
             const prevActiveTab = tabState.activeTab;
-            if (!hasRouterOutlet && props._onClick) {
-                props._onClick(new CustomEvent("ionTabButtonClick", {
-                    detail: {
-                        href: currentHref,
-                        selected: tab === prevActiveTab,
-                        tab,
-                    },
-                }));
-            }
             /**
              * If we are still on the same
              * tab as before, but the base href
@@ -1658,67 +1647,47 @@ const isTabBar = (node) => {
     return (node.type &&
         (node.type.name === "IonTabBar" || node.type === "ion-tab-bar"));
 };
-const isTab = (node) => {
-    // The `ion-tab` component was created with the `v-for` directive.
-    if (node.type === Fragment) {
-        if (Array.isArray(node.children)) {
-            return node.children.some((child) => isVNode(child) && isTab(child));
-        }
-        return false; // In case the fragment has no children.
-    }
-    return (node.type && (node.type.name === "ion-tab" || node.type === IonTab));
-};
 const IonTabs = /*@__PURE__*/ defineComponent({
     name: "IonTabs",
     emits: [WILL_CHANGE, DID_CHANGE],
-    setup(props, { slots, emit }) {
-        return {
-            props,
-            slots,
-            emit,
-        };
-    },
-    mounted() {
-        /**
-         * `defineCustomElement` must be called in the `mounted` hook
-         * to ensure that the custom element is defined after the
-         * component has been fully rendered and initialized.
-         * This prevents issues with undefined properties, like
-         * `selectedTab` from core, which may occur if the custom
-         * element is defined too early in the component's lifecycle.
-         */
-        defineCustomElement$1c();
-    },
     render() {
-        const { slots, emit, props } = this;
+        var _a;
+        const { $slots: slots, $emit } = this;
         const slottedContent = slots.default && slots.default();
         let routerOutlet;
-        let hasTab = false;
+        /**
+         * Developers must pass an ion-router-outlet
+         * inside of ion-tabs.
+         */
         if (slottedContent && slottedContent.length > 0) {
-            /**
-             * Developers must pass an ion-router-outlet
-             * inside of ion-tabs if they want to use
-             * the history stack or URL updates associated
-             * wit the router.
-             */
             routerOutlet = slottedContent.find((child) => isRouterOutlet(child));
-            /**
-             * Developers must pass at least one ion-tab
-             * inside of ion-tabs if they want to use a
-             * basic tab-based navigation without the
-             * history stack or URL updates associated
-             * with the router.
-             */
-            hasTab = slottedContent.some((child) => isTab(child));
-        }
-        if (!routerOutlet && !hasTab) {
-            throw new Error("IonTabs must contain an IonRouterOutlet or an IonTab.");
         }
-        if (routerOutlet && hasTab) {
-            throw new Error("IonTabs cannot contain an IonRouterOutlet and IonTab at the same time.");
+        if (!routerOutlet) {
+            throw new Error("IonTabs must contain an IonRouterOutlet. See https://ionicframework.com/docs/vue/navigation#working-with-tabs for more information.");
         }
+        let childrenToRender = [
+            h("div", {
+                class: "tabs-inner",
+                style: {
+                    position: "relative",
+                    flex: "1",
+                    contain: "layout size style",
+                },
+            }, routerOutlet),
+        ];
+        /**
+         * If ion-tab-bar has slot="top" it needs to be
+         * rendered before `.tabs-inner` otherwise it will
+         * not show above the tab content.
+         */
         if (slottedContent && slottedContent.length > 0) {
-            const slottedTabBar = slottedContent.find((child) => isTabBar(child));
+            /**
+             * Render all content except for router outlet
+             * since that needs to be inside of `.tabs-inner`.
+             */
+            const filteredContent = slottedContent.filter((child) => !child.type || !isRouterOutlet(child));
+            const slottedTabBar = filteredContent.find((child) => isTabBar(child));
+            const hasTopSlotTabBar = slottedTabBar && ((_a = slottedTabBar.props) === null || _a === void 0 ? void 0 : _a.slot) === "top";
             if (slottedTabBar) {
                 if (!slottedTabBar.props) {
                     slottedTabBar.props = {};
@@ -1730,24 +1699,16 @@ const IonTabs = /*@__PURE__*/ defineComponent({
                  * TODO: We may want to move logic from the tab bar into here
                  * so we do not have code split across two components.
                  */
-                slottedTabBar.props._tabsWillChange = (tab) => emit(WILL_CHANGE, { tab });
-                slottedTabBar.props._tabsDidChange = (tab) => emit(DID_CHANGE, { tab });
-                slottedTabBar.props._hasRouterOutlet = !!routerOutlet;
+                slottedTabBar.props._tabsWillChange = (tab) => $emit(WILL_CHANGE, { tab });
+                slottedTabBar.props._tabsDidChange = (tab) => $emit(DID_CHANGE, { tab });
+            }
+            if (hasTopSlotTabBar) {
+                childrenToRender = [...filteredContent, ...childrenToRender];
+            }
+            else {
+                childrenToRender = [...childrenToRender, ...filteredContent];
             }
         }
-        if (hasTab) {
-            return h("ion-tabs", Object.assign({}, props), slottedContent);
-        }
-        /**
-         * TODO(ROU-11056)
-         *
-         * Vue handles the error case for when there is no
-         * associated page matching the tab `href`.
-         *
-         * More investigation is needed to determine if we
-         * override the error handling and provide our own
-         * error message.
-         */
         return h("ion-tabs", {
             style: {
                 display: "flex",
@@ -1762,7 +1723,7 @@ const IonTabs = /*@__PURE__*/ defineComponent({
                 contain: "layout size style",
                 "z-index": "0",
             },
-        }, slottedContent);
+        }, childrenToRender);
     },
 });
 
@@ -1786,7 +1747,6 @@ const IonTabBar = defineComponent({
         /* eslint-disable @typescript-eslint/no-empty-function */
         _tabsWillChange: { type: Function, default: () => { } },
         _tabsDidChange: { type: Function, default: () => { } },
-        _hasRouterOutlet: { type: Boolean, default: false },
         /* eslint-enable @typescript-eslint/no-empty-function */
     },
     data() {
@@ -1803,7 +1763,6 @@ const IonTabBar = defineComponent({
     },
     methods: {
         setupTabState(ionRouter) {
-            const hasRouterOutlet = this.$props._hasRouterOutlet;
             /**
              * For each tab, we need to keep track of its
              * base href as well as any child page that
@@ -1820,65 +1779,25 @@ const IonTabBar = defineComponent({
                     currentHref: child.props.href,
                     ref: child,
                 };
-                /**
-                 * Passing this prop to each tab button
-                 * lets it be aware of the presence of
-                 * the router outlet.
-                 */
-                tabState.hasRouterOutlet = hasRouterOutlet;
                 /**
                  * Passing this prop to each tab button
                  * lets it be aware of the state that
                  * ion-tab-bar is managing for it.
                  */
                 child.component.props._getTabState = () => tabState;
-                /**
-                 * If the router outlet is not defined, then the tabs are being used
-                 * as a basic tab navigation without the router. In this case, the
-                 * tabs will not emit the `ionTabsDidChange` and `ionTabsWillChange`
-                 * events through the `checkActiveTab` method. Instead, we need to
-                 * handle those events through the tab buttons.
-                 */
-                if (!hasRouterOutlet) {
-                    child.component.props._onClick = (event) => {
-                        this.handleIonTabButtonClick(event);
-                    };
-                }
             });
             this.checkActiveTab(ionRouter);
         },
-        /**
-         * This method is called upon setup and when the
-         * history changes. It checks the current route
-         * and updates the active tab accordingly.
-         *
-         * History changes only occur when the router
-         * outlet is present. Due to this, the
-         * `ionTabsDidChange` and `ionTabsWillChange`
-         * events are only emitted when the router
-         * outlet is present. A different approach must
-         * be taken for tabs without a router outlet.
-         *
-         * @param ionRouter
-         */
         checkActiveTab(ionRouter) {
-            const hasRouterOutlet = this.$props._hasRouterOutlet;
             const currentRoute = ionRouter.getCurrentRouteInfo();
             const childNodes = this.$data.tabVnodes;
             const { tabs, activeTab: prevActiveTab } = this.$data.tabState;
+            const tabState = this.$data.tabState;
             const tabKeys = Object.keys(tabs);
-            let activeTab = tabKeys.find((key) => {
+            const activeTab = tabKeys.find((key) => {
                 const href = tabs[key].originalHref;
                 return currentRoute.pathname.startsWith(href);
             });
-            /**
-             * Tabs is being used as a basic tab navigation,
-             * so we need to set the first tab as active since
-             * `checkActiveTab` will not be called after setup.
-             */
-            if (!activeTab && !hasRouterOutlet) {
-                activeTab = tabKeys[0];
-            }
             /**
              * For each tab, check to see if the
              * base href has changed. If so, update
@@ -1922,36 +1841,23 @@ const IonTabBar = defineComponent({
                     tabs[prevActiveTab] = Object.assign(Object.assign({}, tabs[prevActiveTab]), { currentHref: tabs[prevActiveTab].originalHref });
                 }
             }
-            this.tabSwitch(activeTab, ionRouter);
-        },
-        handleIonTabButtonClick(event) {
-            const activeTab = event.detail.tab;
-            this.tabSwitch(activeTab);
-        },
-        tabSwitch(activeTab, ionRouter) {
-            const hasRouterOutlet = this.$props._hasRouterOutlet;
-            const childNodes = this.$data.tabVnodes;
-            const { activeTab: prevActiveTab } = this.$data.tabState;
-            const tabState = this.$data.tabState;
             const activeChild = childNodes.find((child) => { var _a; return isTabButton(child) && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.tab) === activeTab; });
             const tabBar = this.$refs.ionTabBar;
             const tabDidChange = activeTab !== prevActiveTab;
             if (tabBar) {
                 if (activeChild) {
                     tabDidChange && this.$props._tabsWillChange(activeTab);
-                    if (hasRouterOutlet && ionRouter) {
-                        ionRouter.handleSetCurrentTab(activeTab);
-                    }
+                    ionRouter.handleSetCurrentTab(activeTab);
                     tabBar.selectedTab = tabState.activeTab = activeTab;
                     tabDidChange && this.$props._tabsDidChange(activeTab);
-                }
-                else {
                     /**
                      * When going to a tab that does
                      * not have an associated ion-tab-button
                      * we need to remove the selected state from
                      * the old tab.
                      */
+                }
+                else {
                     tabBar.selectedTab = tabState.activeTab = "";
                 }
             }
@@ -1963,7 +1869,7 @@ const IonTabBar = defineComponent({
         ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
     },
     setup(_, { slots }) {
-        defineCustomElement$1d();
+        defineCustomElement$1b();
         return () => {
             return h("ion-tab-bar", { ref: "ionTabBar" }, slots.default && slots.default());
         };
@@ -1972,7 +1878,7 @@ const IonTabBar = defineComponent({
 
 const userComponents = shallowRef([]);
 const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$1e();
+    defineCustomElement$1c();
     return () => {
         return h("ion-app", Object.assign({}, attrs), [slots.default && slots.default(), ...userComponents.value]);
     };
@@ -2024,7 +1930,7 @@ const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTelepo
 };
 
 const IonNav = /*@__PURE__*/ defineComponent((props) => {
-    defineCustomElement$1f();
+    defineCustomElement$1d();
     const views = shallowRef([]);
     /**
      * Allows us to create the component
@@ -2084,7 +1990,7 @@ const IonIcon = /*@__PURE__*/ defineComponent({
         src: String,
     },
     setup(props, { slots }) {
-        defineCustomElement$1g();
+        defineCustomElement$1e();
         return () => {
             var _a, _b;
             const { icon, ios, md, mode } = props;
@@ -2273,13 +2179,13 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
  * This is an autogenerated file created by 'scripts/copy-overlays.js'.
  * Changes made to this file will be overwritten on build.
  */
-const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1h, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
-const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1i, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
-const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1j, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
-const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1k, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
-const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1l, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
-const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1m, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
-const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1n, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
+const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1f, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
+const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1g, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
+const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1h, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'theme', 'translucent', 'trigger']);
+const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1i, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'theme', 'trigger']);
+const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1j, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'theme', 'translucent', 'trigger']);
+const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1k, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'theme', 'trigger'], true);
+const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1l, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'theme', 'translucent', 'trigger', 'triggerAction']);
 
 // TODO(FW-2969): types
 /**
@@ -2296,16 +2202,16 @@ const createController = (defineCustomElement, oldController, useDelegate = fals
     };
     return oldController;
 };
-const modalController = /*@__PURE__*/ createController(defineCustomElement$1m, modalController$1, true);
-const popoverController = /*@__PURE__*/ createController(defineCustomElement$1n, popoverController$1, true);
-const alertController = /*@__PURE__*/ createController(defineCustomElement$1i, alertController$1);
-const actionSheetController = /*@__PURE__*/ createController(defineCustomElement$1h, actionSheetController$1);
-const loadingController = /*@__PURE__*/ createController(defineCustomElement$1j, loadingController$1);
+const modalController = /*@__PURE__*/ createController(defineCustomElement$1k, modalController$1, true);
+const popoverController = /*@__PURE__*/ createController(defineCustomElement$1l, popoverController$1, true);
+const alertController = /*@__PURE__*/ createController(defineCustomElement$1g, alertController$1);
+const actionSheetController = /*@__PURE__*/ createController(defineCustomElement$1f, actionSheetController$1);
+const loadingController = /*@__PURE__*/ createController(defineCustomElement$1h, loadingController$1);
 /**
  * @deprecated Use the inline ion-picker component instead.
  */
-const pickerController = /*@__PURE__*/ createController(defineCustomElement$1k, pickerController$1);
-const toastController = /*@__PURE__*/ createController(defineCustomElement$1l, toastController$1);
+const pickerController = /*@__PURE__*/ createController(defineCustomElement$1i, pickerController$1);
+const toastController = /*@__PURE__*/ createController(defineCustomElement$1j, toastController$1);
 
-export { IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonicVue, actionSheetController, alertController, loadingController, modalController, onIonViewDidEnter, onIonViewDidLeave, onIonViewWillEnter, onIonViewWillLeave, pickerController, popoverController, toastController, useBackButton, useIonRouter, useKeyboard };
+export { IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonicVue, actionSheetController, alertController, loadingController, modalController, onIonViewDidEnter, onIonViewDidLeave, onIonViewWillEnter, onIonViewWillLeave, pickerController, popoverController, toastController, useBackButton, useIonRouter, useKeyboard };
 //# sourceMappingURL=index.js.map