test(vue): add multi-version testing (#25785)

packages/vue/test/base/src/components/ExploreContainer.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="container">
+    <strong>{{ name }}</strong>
+    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+  </div>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: {
+    name: String
+  }
+}
+</script>
+
+<style scoped>
+#container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
+</style>

packages/vue/test/base/src/components/ModalContent.vue

@@ -0,0 +1,53 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-button @click="dismiss" id="dismiss">Dismiss</ion-button>
+        </ion-buttons>
+        <ion-title>Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      {{ title }}
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonPage,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: { type: String, default: 'Default Title' }
+  },
+  components: {
+    IonPage,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  },
+  setup() {
+    const dismiss = async () => {
+      await modalController.dismiss();
+    }
+
+    return {
+      dismiss
+    }
+  }
+})
+</script>

packages/vue/test/base/src/components/Nav.vue

@@ -0,0 +1,16 @@
+<template>
+  <ion-nav :root="NavRoot"></ion-nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonNav } from '@ionic/vue';
+import NavRoot from '@/components/NavRoot.vue';
+
+export default defineComponent({
+  components: { IonNav },
+  setup() {
+    return { NavRoot }
+  }
+});
+</script>

packages/vue/test/base/src/components/NavChild.vue

@@ -0,0 +1,39 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons>
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Nav - Child</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding" id="nav-child-content">
+    {{ title }}
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButtons,
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: { type: String, default: 'Default Title' }
+  },
+  components: {
+    IonButtons,
+    IonBackButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  }
+})
+</script>

packages/vue/test/base/src/components/NavRoot.vue

@@ -0,0 +1,47 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons>
+        <ion-button @click="dismiss">Dismiss</ion-button>
+      </ion-buttons>
+      <ion-title>Nav - Root</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import NavChild from '@/components/NavChild.vue';
+
+export default defineComponent({
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    pushPage: function() {
+      const ionNav = document.querySelector('ion-nav') as any;
+      ionNav.push(NavChild, { title: 'Custom Title' });
+    },
+    dismiss: async function() {
+      await modalController.dismiss();
+    }
+  }
+})
+</script>

packages/vue/test/base/src/components/PopoverContent.vue

@@ -0,0 +1,37 @@
+<template>
+  <ion-content class="ion-padding">
+    <ion-button id="dismiss" @click="dismiss">Dismiss</ion-button> <br />
+
+    <div id="title">
+      {{ title }}
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonContent,
+  popoverController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: { type: String, default: 'Default Title' }
+  },
+  components: {
+    IonButton,
+    IonContent
+  },
+  setup() {
+    const dismiss = async () => {
+      await popoverController.dismiss();
+    }
+
+    return {
+      dismiss
+    }
+  }
+})
+</script>