@ionic/vue 8.2.8 → 8.3.1-dev.11725619573.1107b613

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Teleport, onMounted } from 'vue';
+import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives, computed, provide, shallowRef, watch, onUnmounted, Fragment, isVNode, 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$1d } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$1f } 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,28 +66,30 @@ 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-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 { 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 { 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$18 } from '@ionic/core/components/ion-back-button.js';
-import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-router-outlet.js';
+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 { routeLocationKey, useRoute, matchedRouteKey } from 'vue-router';
-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';
+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';
 
 // @ts-nocheck
 // It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
@@ -297,7 +299,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',
@@ -305,7 +310,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',
@@ -365,6 +372,7 @@ const IonCard = /*@__PURE__*/ defineContainer('ion-card', defineCustomElement$9,
     'rel',
     'routerDirection',
     'routerAnimation',
+    'shape',
     'target'
 ]);
 const IonCardContent = /*@__PURE__*/ defineContainer('ion-card-content', defineCustomElement$a);
@@ -388,6 +396,8 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'labelPlacement',
     'justify',
     'alignment',
+    'size',
+    'shape',
     'ionChange',
     'ionFocus',
     'ionBlur'
@@ -395,7 +405,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',
@@ -516,6 +528,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, [
@@ -568,6 +581,7 @@ const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$
     'shape',
     'spellcheck',
     'step',
+    'size',
     'type',
     'value',
     'ionInput',
@@ -609,7 +623,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',
@@ -627,7 +642,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',
@@ -845,7 +861,8 @@ const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineCustomElem
     'color',
     'duration',
     'name',
-    'paused'
+    'paused',
+    'size'
 ]);
 const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCustomElement$11, [
     'contentId',
@@ -853,10 +870,16 @@ const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCusto
     'when',
     'ionSplitPaneVisible'
 ]);
-const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$12, [
+const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$12, [
+    'active',
+    'delegate',
+    'tab',
+    'component'
+]);
+const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$13, [
     'color'
 ]);
-const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$13, [
+const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$14, [
     'color',
     'autocapitalize',
     'autofocus',
@@ -885,18 +908,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$14);
-const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$15, [
+const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$15);
+const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$16, [
     'color',
     'size',
     'ionStyle'
 ]);
-const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$16, [
+const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$17, [
     'color',
     'name',
     'checked',
@@ -910,7 +934,7 @@ const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElemen
     'ionFocus',
     'ionBlur'
 ], 'checked', 'ion-change');
-const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$17, [
+const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$18, [
     'color'
 ]);
 
@@ -1088,7 +1112,7 @@ const IonicVue = {
 };
 
 const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$18();
+    defineCustomElement$19();
     // TODO(FW-2969): type
     const ionRouter = inject("navManager");
     const onClick = () => {
@@ -1134,7 +1158,7 @@ const viewDepthKey = Symbol(0);
 const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     name: "IonRouterOutlet",
     setup() {
-        defineCustomElement$19();
+        defineCustomElement$1a();
         const injectedRoute = inject(routeLocationKey);
         const route = useRoute();
         const depth = inject(viewDepthKey, 0);
@@ -1568,9 +1592,13 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
         selected: Boolean,
         tab: String,
         target: String,
+        _onClick: {
+            type: Function,
+            required: false,
+        },
     },
     setup(props, { slots }) {
-        defineCustomElement$1a();
+        defineCustomElement$1b();
         // TODO(FW-2969): type
         const ionRouter = inject("navManager");
         const onClick = (ev) => {
@@ -1585,10 +1613,25 @@ 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;
-            const currentHref = tappedTab.currentHref || 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 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
@@ -1631,47 +1674,67 @@ 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() {
-        var _a;
-        const { $slots: slots, $emit } = this;
+        const { slots, emit, props } = this;
         const slottedContent = slots.default && slots.default();
         let routerOutlet;
-        /**
-         * Developers must pass an ion-router-outlet
-         * inside of ion-tabs.
-         */
+        let hasTab = false;
         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) {
-            throw new Error("IonTabs must contain an IonRouterOutlet. See https://ionicframework.com/docs/vue/navigation#working-with-tabs for more information.");
+        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.");
         }
-        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) {
-            /**
-             * 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";
+            const slottedTabBar = slottedContent.find((child) => isTabBar(child));
             if (slottedTabBar) {
                 if (!slottedTabBar.props) {
                     slottedTabBar.props = {};
@@ -1683,16 +1746,24 @@ 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 });
-            }
-            if (hasTopSlotTabBar) {
-                childrenToRender = [...filteredContent, ...childrenToRender];
-            }
-            else {
-                childrenToRender = [...childrenToRender, ...filteredContent];
+                slottedTabBar.props._tabsWillChange = (tab) => emit(WILL_CHANGE, { tab });
+                slottedTabBar.props._tabsDidChange = (tab) => emit(DID_CHANGE, { tab });
+                slottedTabBar.props._hasRouterOutlet = !!routerOutlet;
             }
         }
+        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",
@@ -1707,7 +1778,7 @@ const IonTabs = /*@__PURE__*/ defineComponent({
                 contain: "layout size style",
                 "z-index": "0",
             },
-        }, childrenToRender);
+        }, slottedContent);
     },
 });
 
@@ -1731,6 +1802,7 @@ 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() {
@@ -1747,6 +1819,7 @@ 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
@@ -1763,25 +1836,65 @@ 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);
-            const activeTab = tabKeys.find((key) => {
+            let 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
@@ -1825,23 +1938,36 @@ 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);
-                    ionRouter.handleSetCurrentTab(activeTab);
+                    if (hasRouterOutlet && ionRouter) {
+                        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 = "";
                 }
             }
@@ -1853,7 +1979,7 @@ const IonTabBar = defineComponent({
         ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
     },
     setup(_, { slots }) {
-        defineCustomElement$1b();
+        defineCustomElement$1d();
         return () => {
             return h("ion-tab-bar", { ref: "ionTabBar" }, slots.default && slots.default());
         };
@@ -1862,7 +1988,7 @@ const IonTabBar = defineComponent({
 
 const userComponents = shallowRef([]);
 const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$1c();
+    defineCustomElement$1e();
     return () => {
         return h("ion-app", Object.assign({}, attrs), [slots.default && slots.default(), ...userComponents.value]);
     };
@@ -1914,7 +2040,7 @@ const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTelepo
 };
 
 const IonNav = /*@__PURE__*/ defineComponent((props) => {
-    defineCustomElement$1d();
+    defineCustomElement$1f();
     const views = shallowRef([]);
     /**
      * Allows us to create the component
@@ -1974,7 +2100,7 @@ const IonIcon = /*@__PURE__*/ defineComponent({
         src: String,
     },
     setup(props, { slots }) {
-        defineCustomElement$1e();
+        defineCustomElement$1g();
         return () => {
             var _a, _b;
             const { icon, ios, md, mode } = props;
@@ -2163,13 +2289,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$1f, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
-const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1g, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
-const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1h, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
-const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1i, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', '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', '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', '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', 'translucent', 'trigger', 'triggerAction']);
+const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1h, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
+const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1i, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
+const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1j, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'theme', 'translucent', 'trigger']);
+const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1k, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'theme', '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', 'theme', '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', 'theme', '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', 'theme', 'translucent', 'trigger', 'triggerAction']);
 
 // TODO(FW-2969): types
 /**
@@ -2186,16 +2312,16 @@ const createController = (defineCustomElement, oldController, useDelegate = fals
     };
     return oldController;
 };
-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);
+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);
 /**
  * @deprecated Use the inline ion-picker component instead.
  */
-const pickerController = /*@__PURE__*/ createController(defineCustomElement$1i, pickerController$1);
-const toastController = /*@__PURE__*/ createController(defineCustomElement$1j, toastController$1);
+const pickerController = /*@__PURE__*/ createController(defineCustomElement$1k, pickerController$1);
+const toastController = /*@__PURE__*/ createController(defineCustomElement$1l, 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, 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, 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 };
 //# sourceMappingURL=index.js.map