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

Merge remote-tracking branch 'origin/master' into sync-master

Browse Source 
# Conflicts:
#	packages/vue/src/components/IonTabs.ts
#	packages/vue/test-app/src/router/index.ts
This commit is contained in:
Liam DeBeasi
2021-06-21 21:26:49 +00:00
parent 29d756f1fb a2a4cff3d0
commit 09da99b176
3 changed files with 113 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,9 +7,22 @@ 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 } = this;
const { $slots: slots, $emit, $data } = this;
const slottedContent = slots.default && slots.default();
let userProvidedRouterOutlet;
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');
}
let childrenToRender = [
h('div', {
class: 'tabs-inner',
@ -18,18 +31,52 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
'flex': '1',
'contain': 'layout size style'
}
}, [
h(IonRouterOutlet)
])
}, (userProvidedRouterOutlet) ? userProvidedRouterOutlet : [h(IonRouterOutlet)])
];
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) {
const slottedTabBar = slottedContent.find((child: VNode) => child.type && (child.type as any).name === 'IonTabBar');
/**
* Render all content except for router outlet
* since that needs to be inside of `.tabs-inner`.
*/
const filteredContent = slottedContent.filter((child: VNode) => (
!child.type ||
(child.type && (child.type as any).name !== 'IonRouterOutlet')
));
const slottedTabBar = filteredContent.find((child: VNode) => child.type && (child.type as any).name === 'IonTabBar');
const hasTopSlotTabBar = slottedTabBar && slottedTabBar.props?.slot === 'top';
if (slottedTabBar) {
@ -49,13 +96,13 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
if (hasTopSlotTabBar) {
childrenToRender = [
...slottedContent,
...filteredContent,
...childrenToRender
];
} else {
childrenToRender = [
...childrenToRender,
...slottedContent
...filteredContent
]
}
}