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

test(vue): improve test app (#30610)

Browse Source 
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
This commit is contained in:
Brandy Smith
2025-08-08 13:37:39 -04:00
committed by GitHub
parent a6b19f40b2
commit 2229c24bf5
45 changed files with 193 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vue/test/base/index.html
View File

@ -14,18 +14,17 @@
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/favicon.png" />
<!-- add to homescreen for ios --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" /> <meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="module" src="/src/main.ts"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

BIN
packages/vue/test/base/public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 930 B

2
packages/vue/test/base/src/components/ModalContent.vue
View File

@ -2,7 +2,7 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="end">
<ion-button @click="dismiss" id="dismiss">Dismiss</ion-button> <ion-button @click="dismiss" id="dismiss">Dismiss</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Modal</ion-title> <ion-title>Modal</ion-title>

2
packages/vue/test/base/src/components/NavChild.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Nav - Child</ion-title> <ion-title>Nav - Child</ion-title>

2
packages/vue/test/base/src/components/NavRoot.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="end">
<ion-button @click="dismiss">Dismiss</ion-button> <ion-button @click="dismiss">Dismiss</ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Nav - Root</ion-title> <ion-title>Nav - Root</ion-title>

11
packages/vue/test/base/src/main.ts
View File

@ -20,6 +20,17 @@ import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css'; import '@ionic/vue/css/display.css';
/**
* Ionic Dark Mode
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/
/* @import '@ionic/vue/css/palettes/dark.always.css'; */
/* @import '@ionic/vue/css/palettes/dark.class.css'; */
import '@ionic/vue/css/palettes/dark.system.css';
/* Theme variables */ /* Theme variables */
import './theme/variables.css'; import './theme/variables.css';

32
packages/vue/test/base/src/router/index.ts
View File

@ -70,10 +70,6 @@ const routes: Array<RouteRecordRaw> = [
path: '/navigation', path: '/navigation',
component: () => import('@/views/Navigation.vue') component: () => import('@/views/Navigation.vue')
}, },
{
path: '/components',
component: () => import('@/views/Components.vue'),
},
{ {
path: '/components/breadcrumbs', path: '/components/breadcrumbs',
component: () => import('@/views/Breadcrumbs.vue') component: () => import('@/views/Breadcrumbs.vue')
@ -92,26 +88,26 @@ const routes: Array<RouteRecordRaw> = [
}, },
{ {
path: '/nested', path: '/nested',
component: () => import('@/views/RouterOutlet.vue'), component: () => import('@/views/nested/RouterOutlet.vue'),
children: [ children: [
{ {
path: '', path: '',
component: () => import('@/views/NestedChild.vue') component: () => import('@/views/nested/NestedChild.vue')
}, },
{ {
path: 'two', path: 'two',
component: () => import('@/views/NestedChildTwo.vue') component: () => import('@/views/nested/NestedChildTwo.vue')
}, },
{ {
path: ':id', path: ':id',
component: () => import('@/views/Folder.vue'), component: () => import('@/views/nested/Folder.vue'),
props: true props: true
} }
] ]
}, },
{ {
path: '/tabs/', path: '/tabs/',
component: () => import('@/views/Tabs.vue'), component: () => import('@/views/tabs/Tabs.vue'),
children: [ children: [
{ {
path: '', path: '',
@ -119,33 +115,33 @@ const routes: Array<RouteRecordRaw> = [
}, },
{ {
path: 'tab1', path: 'tab1',
component: () => import('@/views/Tab1.vue'), component: () => import('@/views/tabs/Tab1.vue'),
}, },
{ {
path: 'tab1/:id', path: 'tab1/:id',
component: () => import('@/views/Tab1Parameter.vue'), component: () => import('@/views/tabs/Tab1Parameter.vue'),
props: true props: true
}, },
{ {
path: 'tab2', path: 'tab2',
component: () => import('@/views/Tab2.vue') component: () => import('@/views/tabs/Tab2.vue')
}, },
{ {
path: 'tab3', path: 'tab3',
beforeEnter: (to, from, next) => { beforeEnter: (to, from, next) => {
next({ path: '/tabs/tab1' }); next({ path: '/tabs/tab1' });
}, },
component: () => import('@/views/Tab3.vue') component: () => import('@/views/tabs/Tab3.vue')
}, },
{ {
path: 'tab4', path: 'tab4',
component: () => import('@/views/Tab4.vue') component: () => import('@/views/tabs/Tab4.vue')
} }
] ]
}, },
{ {
path: '/tabs-secondary/', path: '/tabs-secondary/',
component: () => import('@/views/TabsSecondary.vue'), component: () => import('@/views/tabs-secondary/TabsSecondary.vue'),
children: [ children: [
{ {
path: '', path: '',
@ -153,15 +149,15 @@ const routes: Array<RouteRecordRaw> = [
}, },
{ {
path: 'tab1', path: 'tab1',
component: () => import('@/views/Tab1Secondary.vue') component: () => import('@/views/tabs-secondary/Tab1Secondary.vue')
}, },
{ {
path: 'tab2', path: 'tab2',
component: () => import('@/views/Tab2Secondary.vue') component: () => import('@/views/tabs-secondary/Tab2Secondary.vue')
}, },
{ {
path: 'tab3', path: 'tab3',
component: () => import('@/views/Tab3Secondary.vue') component: () => import('@/views/tabs-secondary/Tab3Secondary.vue')
} }
] ]
}, },

232
packages/vue/test/base/src/theme/variables.css
View File

@ -1,232 +1,10 @@
/* Ionic Variables and Theming. For more info, please see: /* For information on how to create your own theme, please see:
http://ionicframework.com/docs/theming/ */ http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/ .list-md {
:root { background: transparent;
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
} }
@media (prefers-color-scheme: dark) { .list-ios ion-item {
/* --ion-item-background: #1c1c1e;
* Dark Colors
* -------------------------------------------
*/
body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;
--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;
--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
/*
* iOS Dark Theme
* -------------------------------------------
*/
.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-toolbar-background: #0d0d0d;
--ion-item-background: #000000;
--ion-card-background: #1c1c1d;
}
/*
* Material Design Dark Theme
* -------------------------------------------
*/
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #1f1f1f;
--ion-tab-bar-background: #1f1f1f;
--ion-card-background: #1e1e1e;
}
} }

26
packages/vue/test/base/src/views/Breadcrumbs.vue
View File

@ -2,6 +2,9 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Breadcrumbs</ion-title> <ion-title>Breadcrumbs</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -29,25 +32,16 @@
</ion-page> </ion-page>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { import {
IonPage, IonBackButton,
IonBreadcrumb,
IonBreadcrumbs,
IonButtons,
IonContent,
IonHeader, IonHeader,
IonToolbar, IonToolbar,
IonTitle, IonTitle,
IonContent, IonPage,
IonBreadcrumbs,
} from "@ionic/vue"; } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonBreadcrumbs,
},
});
</script> </script>

26
packages/vue/test/base/src/views/Components.vue
View File

@ -1,26 +0,0 @@
<template>
<ion-page>
<ion-content>
<ion-list>
<ion-item router-link="/components/breadcrumbs">
<ion-label>Breadcrumbs</ion-label>
</ion-item>
<ion-item router-link="/components/select">
<ion-label>Select</ion-label>
</ion-item>
<ion-item router-link="/components/range">
<ion-label>Range</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { IonPage, IonContent, IonList, IonItem, IonLabel } from "@ionic/vue";
export default defineComponent({
components: { IonPage, IonContent, IonList, IonItem, IonLabel },
});
</script>

2
packages/vue/test/base/src/views/DefaultHref.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="defaulthref"> <ion-page data-pageid="defaulthref">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>DefaultHref</ion-title> <ion-title>DefaultHref</ion-title>

60
packages/vue/test/base/src/views/Home.vue
View File

@ -17,21 +17,21 @@
</ion-header> </ion-header>
<ion-list> <ion-list>
<ion-list-header>
<ion-label>Overlays</ion-label>
</ion-list-header>
<ion-item router-link="/overlays"> <ion-item router-link="/overlays">
<ion-label>Overlays</ion-label> <ion-label>Overlays</ion-label>
</ion-item> </ion-item>
<ion-item router-link="/icons"> </ion-list>
<ion-label>Icons</ion-label>
</ion-item> <ion-list>
<ion-item router-link="/inputs"> <ion-list-header>
<ion-label>Inputs</ion-label> <ion-label>Navigation</ion-label>
</ion-item> </ion-list-header>
<ion-item router-link="/navigation" id="navigation"> <ion-item router-link="/navigation" id="navigation">
<ion-label>Navigation</ion-label> <ion-label>Navigation</ion-label>
</ion-item> </ion-item>
<ion-item router-link="/reorder-group">
<ion-label>Reorder Group</ion-label>
</ion-item>
<ion-item router-link="/routing" id="routing"> <ion-item router-link="/routing" id="routing">
<ion-label>Routing</ion-label> <ion-label>Routing</ion-label>
</ion-item> </ion-item>
@ -59,15 +59,36 @@
<ion-item router-link="/delayed-redirect" id="delayed-redirect"> <ion-item router-link="/delayed-redirect" id="delayed-redirect">
<ion-label>Delayed Redirect</ion-label> <ion-label>Delayed Redirect</ion-label>
</ion-item> </ion-item>
<ion-item router-link="/components"> </ion-list>
<ion-list>
<ion-list-header>
<ion-label>Components</ion-label> <ion-label>Components</ion-label>
</ion-list-header>
<ion-item router-link="/components/breadcrumbs">
<ion-label>Breadcrumbs</ion-label>
</ion-item>
<ion-item router-link="/icons">
<ion-label>Icons</ion-label>
</ion-item>
<ion-item router-link="/inputs">
<ion-label>Inputs</ion-label>
</ion-item>
<ion-item router-link="/components/range">
<ion-label>Range</ion-label>
</ion-item>
<ion-item router-link="/reorder-group">
<ion-label>Reorder Group</ion-label>
</ion-item>
<ion-item router-link="/components/select">
<ion-label>Select</ion-label>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page> </ion-page>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { import {
IonButtons, IonButtons,
IonBackButton, IonBackButton,
@ -76,24 +97,9 @@ import {
IonItem, IonItem,
IonLabel, IonLabel,
IonList, IonList,
IonListHeader,
IonPage, IonPage,
IonTitle, IonTitle,
IonToolbar, IonToolbar,
} from "@ionic/vue"; } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
components: {
IonButtons,
IonBackButton,
IonContent,
IonHeader,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
},
});
</script> </script>

4
packages/vue/test/base/src/views/Icons.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="icons"> <ion-page data-pageid="icons">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Icons</ion-title> <ion-title>Icons</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/Inputs.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="inputs"> <ion-page data-pageid="inputs">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Inputs</ion-title> <ion-title>Inputs</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/Lifecycle.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="lifecycle"> <ion-page data-pageid="lifecycle">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Lifecycle</ion-title> <ion-title>Lifecycle</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/LifecycleSetup.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="lifecycle-setup"> <ion-page data-pageid="lifecycle-setup">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Lifecycle (Setup)</ion-title> <ion-title>Lifecycle (Setup)</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/Navigation.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="navigation"> <ion-page data-pageid="navigation">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Navigation</ion-title> <ion-title>Navigation</ion-title>
</ion-toolbar> </ion-toolbar>

19
packages/vue/test/base/src/views/Overlays.vue
View File

@ -2,14 +2,15 @@
<ion-page data-pageid="overlays"> <ion-page data-pageid="overlays">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Overlays</ion-title> <ion-title>Overlays</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding" :fullscreen="true"> <ion-content :fullscreen="true">
<ion-list>
<ion-radio-group v-model="componentType"> <ion-radio-group v-model="componentType">
<ion-list-header> <ion-list-header>
<ion-label> <ion-label>
@ -51,19 +52,19 @@
<ion-radio value="component" id="component">Component</ion-radio> <ion-radio value="component" id="component">Component</ion-radio>
</ion-item> </ion-item>
</ion-radio-group> </ion-radio-group>
</ion-list>
<br /> <div class="ion-display-flex ion-justify-content-center ion-flex-wrap ion-margin">
<ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button> <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
<ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button> <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
</div>
<br /><br /> <div class="ion-padding">
Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br /> Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br />
Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br /> Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br />
Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br /> Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br />
Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br /> Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br />
</div>
<ion-action-sheet <ion-action-sheet
:is-open="isActionSheetOpen" :is-open="isActionSheetOpen"
@ -131,6 +132,7 @@ import {
IonHeader, IonHeader,
IonItem, IonItem,
IonLabel, IonLabel,
IonList,
IonListHeader, IonListHeader,
IonPage, IonPage,
IonRadio, IonRadio,
@ -166,6 +168,7 @@ export default defineComponent({
IonHeader, IonHeader,
IonItem, IonItem,
IonLabel, IonLabel,
IonList,
IonListHeader, IonListHeader,
IonPage, IonPage,
IonRadio, IonRadio,

2
packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="overlays-automount"> <ion-page data-pageid="overlays-automount">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Overlays - Auto Mount</ion-title> <ion-title>Overlays - Auto Mount</ion-title>

7
packages/vue/test/base/src/views/Range.vue
View File

@ -2,6 +2,9 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Range</ion-title> <ion-title>Range</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -23,6 +26,8 @@
<script lang="ts"> <script lang="ts">
import { import {
IonPage, IonPage,
IonBackButton,
IonButtons,
IonHeader, IonHeader,
IonToolbar, IonToolbar,
IonTitle, IonTitle,
@ -36,6 +41,8 @@ import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {
IonPage, IonPage,
IonBackButton,
IonButtons,
IonHeader, IonHeader,
IonToolbar, IonToolbar,
IonTitle, IonTitle,

2
packages/vue/test/base/src/views/ReorderGroup.vue
View File

@ -3,7 +3,7 @@
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Reorder Group</ion-title> <ion-title>Reorder Group</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/Routing.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="routing"> <ion-page data-pageid="routing">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Routing</ion-title> <ion-title>Routing</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/RoutingChild.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="routingchild"> <ion-page data-pageid="routingchild">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/routing"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Routing Child</ion-title> <ion-title>Routing Child</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/RoutingParameter.vue
View File

@ -2,8 +2,8 @@
<ion-page :data-pageid="'routingparameter-' + $props.id"> <ion-page :data-pageid="'routingparameter-' + $props.id">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/routing"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Routing Parameter</ion-title> <ion-title>Routing Parameter</ion-title>
</ion-toolbar> </ion-toolbar>

4
packages/vue/test/base/src/views/RoutingParameterView.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="routingparameterview"> <ion-page data-pageid="routingparameterview">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/routing"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Routing Parameter View</ion-title> <ion-title>Routing Parameter View</ion-title>
</ion-toolbar> </ion-toolbar>

7
packages/vue/test/base/src/views/Select.vue
View File

@ -2,6 +2,9 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Select</ion-title> <ion-title>Select</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -25,6 +28,8 @@
<script lang="ts"> <script lang="ts">
import { import {
IonPage, IonPage,
IonBackButton,
IonButtons,
IonHeader, IonHeader,
IonToolbar, IonToolbar,
IonTitle, IonTitle,
@ -38,6 +43,8 @@ import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
components: { components: {
IonPage, IonPage,
IonBackButton,
IonButtons,
IonHeader, IonHeader,
IonToolbar, IonToolbar,
IonTitle, IonTitle,

2
packages/vue/test/base/src/views/Template.vue
View File

@ -2,7 +2,7 @@
<ion-page> <ion-page>
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Template</ion-title> <ion-title>Template</ion-title>

4
packages/vue/test/base/src/views/VersionTest.vue
View File

@ -2,8 +2,8 @@
<ion-page data-pageid="version-test"> <ion-page data-pageid="version-test">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>VersionTest</ion-title> <ion-title>VersionTest</ion-title>
</ion-toolbar> </ion-toolbar>

0
packages/vue/test/base/src/views/Folder.vue → packages/vue/test/base/src/views/nested/Folder.vue
View File

2
packages/vue/test/base/src/views/NestedChild.vue → packages/vue/test/base/src/views/nested/NestedChild.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="nestedchild"> <ion-page data-pageid="nestedchild">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Nested Child</ion-title> <ion-title>Nested Child</ion-title>

2
packages/vue/test/base/src/views/NestedChildTwo.vue → packages/vue/test/base/src/views/nested/NestedChildTwo.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="nestedchildtwo"> <ion-page data-pageid="nestedchildtwo">
<ion-header :translucent="true"> <ion-header :translucent="true">
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Nested Child Two</ion-title> <ion-title>Nested Child Two</ion-title>

2
packages/vue/test/base/src/views/RouterOutlet.vue → packages/vue/test/base/src/views/nested/RouterOutlet.vue
View File

@ -3,7 +3,7 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button id="routeroutlet-back-button" text="Back to main outlet"></ion-back-button> <ion-back-button id="routeroutlet-back-button" text="Back to main outlet" default-href="/"></ion-back-button>
<ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button> <ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button>
<ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button> <ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button>
<ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button> <ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button>

2
packages/vue/test/base/src/views/Tab1Secondary.vue → packages/vue/test/base/src/views/tabs-secondary/Tab1Secondary.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="tab1-secondary"> <ion-page data-pageid="tab1-secondary">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Tab 1 - Secondary</ion-title> <ion-title>Tab 1 - Secondary</ion-title>

0
packages/vue/test/base/src/views/Tab2Secondary.vue → packages/vue/test/base/src/views/tabs-secondary/Tab2Secondary.vue
View File

0
packages/vue/test/base/src/views/Tab3Secondary.vue → packages/vue/test/base/src/views/tabs-secondary/Tab3Secondary.vue
View File

0
packages/vue/test/base/src/views/TabsSecondary.vue → packages/vue/test/base/src/views/tabs-secondary/TabsSecondary.vue
View File

2
packages/vue/test/base/src/views/Tab1.vue → packages/vue/test/base/src/views/tabs/Tab1.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="tab1"> <ion-page data-pageid="tab1">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Tab 1</ion-title> <ion-title>Tab 1</ion-title>

2
packages/vue/test/base/src/views/Tab1Parameter.vue → packages/vue/test/base/src/views/tabs/Tab1Parameter.vue
View File

@ -2,7 +2,7 @@
<ion-page :data-pageid="'tab1' + $props.id"> <ion-page :data-pageid="'tab1' + $props.id">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button></ion-back-button> <ion-back-button></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Tab 1 Child {{ $props.id }}</ion-title> <ion-title>Tab 1 Child {{ $props.id }}</ion-title>

2
packages/vue/test/base/src/views/Tab2.vue → packages/vue/test/base/src/views/tabs/Tab2.vue
View File

@ -2,7 +2,7 @@
<ion-page data-pageid="tab2"> <ion-page data-pageid="tab2">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons> <ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
<ion-title>Tab 2</ion-title> <ion-title>Tab 2</ion-title>

0
packages/vue/test/base/src/views/Tab3.vue → packages/vue/test/base/src/views/tabs/Tab3.vue
View File

0
packages/vue/test/base/src/views/Tab4.vue → packages/vue/test/base/src/views/tabs/Tab4.vue
View File

2
packages/vue/test/base/src/views/Tabs.vue → packages/vue/test/base/src/views/tabs/Tabs.vue
View File

@ -37,7 +37,7 @@ export default defineComponent({
]) ])
const router = useRouter(); const router = useRouter();
const addTab = () => { const addTab = () => {
router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/Tab4.vue') }); router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/tabs/Tab4.vue') });
tabs.value = [ tabs.value = [
...tabs.value, ...tabs.value,
{ {

8
packages/vue/test/base/tests/e2e/specs/routing.cy.js
View File

@ -2,7 +2,7 @@ describe('Routing', () => {
it('should go to sibling page', () => { it('should go to sibling page', () => {
cy.visit('/'); cy.visit('/');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('ion-item#routing').click(); cy.get('ion-item#routing').click({ force: true });
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
cy.ionPageHidden('home'); cy.ionPageHidden('home');
@ -18,7 +18,7 @@ describe('Routing', () => {
it('should go back home', () => { it('should go back home', () => {
cy.visit('/'); cy.visit('/');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('ion-item#routing').click(); cy.get('ion-item#routing').click({ force: true });
cy.ionBackClick('routing'); cy.ionBackClick('routing');
@ -40,7 +40,7 @@ describe('Routing', () => {
cy.visit('/'); cy.visit('/');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#routing').click(); cy.get('#routing').click({ force: true });
cy.get('#child').click(); cy.get('#child').click();
cy.ionBackClick('routingchild'); cy.ionBackClick('routingchild');
@ -539,7 +539,7 @@ describe('Routing - Swipe to Go Back', () => {
cy.viewport(320, 568); cy.viewport(320, 568);
cy.visit('?ionic:mode=ios'); cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#routing').click(); cy.get('#routing').click({ force: true });
cy.ionPageHidden('home'); cy.ionPageHidden('home');
cy.ionPageVisible('routing') cy.ionPageVisible('routing')
}); });

12
packages/vue/test/base/tests/e2e/specs/tabs.cy.js
View File

@ -125,14 +125,14 @@ describe('Tabs', () => {
cy.visit('/') cy.visit('/')
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.ionPageHidden('home'); cy.ionPageHidden('home');
cy.ionBackClick('tab1'); cy.ionBackClick('tab1');
cy.ionPageDoesNotExist('tabs'); cy.ionPageDoesNotExist('tabs');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.ionPageHidden('home'); cy.ionPageHidden('home');
@ -144,7 +144,7 @@ describe('Tabs', () => {
cy.visit('/'); cy.visit('/');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click(); cy.get('ion-tab-button#tab-button-tab2').click();
@ -159,7 +159,7 @@ describe('Tabs', () => {
cy.visit('/'); cy.visit('/');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click(); cy.get('ion-tab-button#tab-button-tab2').click();
@ -169,7 +169,7 @@ describe('Tabs', () => {
cy.ionPageVisible('home') cy.ionPageVisible('home')
cy.ionPageDoesNotExist('tabs'); cy.ionPageDoesNotExist('tabs');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click(); cy.get('ion-tab-button#tab-button-tab2').click();
@ -639,7 +639,7 @@ describe('Tabs', () => {
cy.viewport(320, 568); cy.viewport(320, 568);
cy.visit('?ionic:mode=ios'); cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home'); cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click({ force: true });
cy.ionPageHidden('home'); cy.ionPageHidden('home');
cy.ionPageVisible('tab1') cy.ionPageVisible('tab1')
}); });

3
packages/vue/test/base/vite.config.js
View File

@ -20,5 +20,8 @@ export default defineConfig({
// Preview applies to "vite preview" command // Preview applies to "vite preview" command
preview: { preview: {
port: 8080 port: 8080
},
define: {
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
} }
}) })