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

fix(vue): routing components define child components (#26107)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-10-13 12:35:15 -05:00
committed by GitHub
parent 5e4892676c
commit d60973b244
8 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vue/src/components/IonApp.ts
View File

@ -1,10 +1,9 @@
import { h, defineComponent, shallowRef, VNode } from 'vue'; import { h, defineComponent, shallowRef, VNode } from 'vue';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from '@ionic/core/components/ion-app.js';
import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
const userComponents = shallowRef([]); const userComponents = shallowRef([]);
export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => { export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
defineCustomElement('ion-app', IonAppCmp); defineCustomElement();
return () => { return () => {
return h( return h(
'ion-app', 'ion-app',

7
packages/vue/src/components/IonBackButton.ts
View File

@ -1,11 +1,8 @@
import { h, inject, defineComponent } from 'vue'; import { h, inject, defineComponent } from 'vue';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js';
import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => { export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
defineCustomElement('ion-back-button', IonBackButtonCmp); defineCustomElement();
defineCustomElement('ion-icon', IonIconCmp);
const ionRouter: any = inject('navManager'); const ionRouter: any = inject('navManager');

5
packages/vue/src/components/IonIcon.ts
View File

@ -1,7 +1,6 @@
import { h, defineComponent } from 'vue'; import { h, defineComponent } from 'vue';
import { isPlatform } from '@ionic/core/components'; import { isPlatform } from '@ionic/core/components';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from 'ionicons/components/ion-icon.js';
import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
export const IonIcon = /*@__PURE__*/ defineComponent({ export const IonIcon = /*@__PURE__*/ defineComponent({
name: 'IonIcon', name: 'IonIcon',
@ -18,7 +17,7 @@ export const IonIcon = /*@__PURE__*/ defineComponent({
src: String src: String
}, },
setup(props, { slots }) { setup(props, { slots }) {
defineCustomElement('ion-icon', IonIconCmp); defineCustomElement();
return () => { return () => {
const { icon, ios, md } = props; const { icon, ios, md } = props;

5
packages/vue/src/components/IonNav.ts
View File

@ -1,10 +1,9 @@
import { defineComponent, h, shallowRef, VNode } from 'vue'; import { defineComponent, h, shallowRef, VNode } from 'vue';
import { VueDelegate } from '../framework-delegate'; import { VueDelegate } from '../framework-delegate';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
export const IonNav = /*@__PURE__*/ defineComponent(() => { export const IonNav = /*@__PURE__*/ defineComponent(() => {
defineCustomElement('ion-nav', IonNavCmp); defineCustomElement();
const views = shallowRef([]); const views = shallowRef([]);
/** /**

6
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -12,9 +12,9 @@ import {
Ref Ref
} from 'vue'; } from 'vue';
import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components'; import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js'; import { defineCustomElement } from '@ionic/core/components/ion-router-outlet.js';
import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router'; import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
import { fireLifecycle, generateId, getConfig, defineCustomElement } from '../utils'; import { fireLifecycle, generateId, getConfig } from '../utils';
const isViewVisible = (enteringEl: HTMLElement) => { const isViewVisible = (enteringEl: HTMLElement) => {
return !enteringEl.classList.contains('ion-page-hidden') && !enteringEl.classList.contains('ion-page-invisible'); return !enteringEl.classList.contains('ion-page-hidden') && !enteringEl.classList.contains('ion-page-invisible');
@ -24,7 +24,7 @@ let viewDepthKey: InjectionKey<0> = Symbol(0);
export const IonRouterOutlet = /*@__PURE__*/ defineComponent({ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
name: 'IonRouterOutlet', name: 'IonRouterOutlet',
setup() { setup() {
defineCustomElement('ion-router-outlet', IonRouterOutletCmp); defineCustomElement();
const injectedRoute = inject(routeLocationKey)!; const injectedRoute = inject(routeLocationKey)!;
const route = useRoute(); const route = useRoute();

5
packages/vue/src/components/IonTabBar.ts
View File

@ -1,6 +1,5 @@
import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue'; import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from '@ionic/core/components/ion-tab-bar.js';
import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
interface TabState { interface TabState {
activeTab?: string; activeTab?: string;
@ -172,7 +171,7 @@ export const IonTabBar = defineComponent({
ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter)); ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
}, },
setup(_, { slots }) { setup(_, { slots }) {
defineCustomElement('ion-tab-bar', IonTabBarCmp); defineCustomElement();
return () => { return () => {
return h( return h(

5
packages/vue/src/components/IonTabButton.ts
View File

@ -1,6 +1,5 @@
import { h, defineComponent, inject } from 'vue'; import { h, defineComponent, inject } from 'vue';
import { defineCustomElement } from '../utils'; import { defineCustomElement } from '@ionic/core/components/ion-tab-button.js';
import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
export const IonTabButton = /*@__PURE__*/ defineComponent({ export const IonTabButton = /*@__PURE__*/ defineComponent({
name: 'IonTabButton', name: 'IonTabButton',
@ -16,7 +15,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
target: String target: String
}, },
setup(props, { slots }) { setup(props, { slots }) {
defineCustomElement('ion-tab-button', IonTabButtonCmp); defineCustomElement();
const ionRouter: any = inject('navManager'); const ionRouter: any = inject('navManager');
const onClick = (ev: Event) => { const onClick = (ev: Event) => {

8
packages/vue/src/utils.ts
View File

@ -57,11 +57,3 @@ export const getConfig = (): CoreConfig | null => {
} }
return null; return null;
}; };
export const defineCustomElement = (tagName: string, customElement: any) => {
if (typeof customElements === 'undefined') return;
if (!customElements.get(tagName)) {
customElements.define(tagName, customElement);
}
}