javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(vue): remove auto-generated router outlet inside of ion-tabs (#23479)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-06-21 18:22:57 -04:00
committed by GitHub
parent c2eda6aee3
commit 6dfbd89cf8
8 changed files with 72 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/vue/src/components/IonTabs.ts
View File

@ -1,5 +1,4 @@
import { h, defineComponent, VNode } from 'vue';
import { IonRouterOutlet } from './IonRouterOutlet';
const WILL_CHANGE = 'ionTabsWillChange';
const DID_CHANGE = 'ionTabsDidChange';
@ -7,20 +6,21 @@ const DID_CHANGE = 'ionTabsDidChange';
export const IonTabs = /*@__PURE__*/ defineComponent({
name: 'IonTabs',
emits: [WILL_CHANGE, DID_CHANGE],
data() {
return { didWarn: false }
},
render() {
const { $slots: slots, $emit, $data } = this;
const { $slots: slots, $emit } = this;
const slottedContent = slots.default && slots.default();
let userProvidedRouterOutlet;
let routerOutlet;
/**
* Developers must pass an ion-router-outlet
* inside of ion-tabs.
*/
if (slottedContent && slottedContent.length > 0) {
/**
* If developer passed in their own ion-router-outlet
* instance, then we should not init a default one
*/
userProvidedRouterOutlet = slottedContent.find((child: VNode) => child.type && (child.type as any).name === 'IonRouterOutlet');
routerOutlet = slottedContent.find((child: VNode) => child.type && (child.type as any).name === 'IonRouterOutlet');
}
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 = [
@ -31,42 +31,15 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
'flex': '1',
'contain': 'layout size style'
}
}, (userProvidedRouterOutlet) ? userProvidedRouterOutlet : [h(IonRouterOutlet)])
}, routerOutlet)
];
if (userProvidedRouterOutlet && !$data.didWarn) {
console.warn(`[@ionic/vue Deprecation] Starting in Ionic Vue v6.0, developers must add an 'ion-router-outlet' instance inside of 'ion-tabs'.
Before:
<ion-tabs>
<ion-tab-bar slot="bottom">
...
</ion-tab-bar>
</ion-tabs>
After:
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
...
</ion-tab-bar>
</ion-tabs>
Be sure to import 'IonRouterOutlet' from '@ionic/vue' and provide that import to your Vue component. See https://ionicframework.com/docs/vue/navigation#working-with-tabs for more information.
`);
$data.didWarn = true;
}
/**
* 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`.