feat(vue): support autoMountComponent (#25538)

Author: liamdebeasi

packages/vue/src/vue-component-lib/overlays.ts

@@ -162,7 +162,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
         return h(
           name,
           { ...restOfProps, ref: elementRef },
-          (isOpen.value) ? slots : undefined
+          (isOpen.value || restOfProps.autoMountComponent) ? slots : undefined
         )
       }
     });

packages/vue/test-app/src/components/PopoverContent.vue

@@ -1,11 +1,16 @@
 <template>
   <ion-content class="ion-padding">
-    {{ title }}
+    <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';
@@ -16,6 +21,7 @@ export default defineComponent({
     title: { type: String, default: 'Default Title' }
   },
   components: {
+    IonButton,
     IonContent
   },
   setup() {

packages/vue/test-app/src/router/index.ts

@@ -25,6 +25,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/overlays',
     component: () => import('@/views/Overlays.vue')
   },
+  {
+    path: '/overlays-auto-mount',
+    component: () => import('@/views/OverlaysAutoMount.vue')
+  },
   {
     path: '/inputs',
     component: () => import('@/views/Inputs.vue')

packages/vue/test-app/src/views/OverlaysAutoMount.vue

@@ -0,0 +1,81 @@
+<template>
+  <ion-page data-pageid="overlays-automount">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Overlays - Auto Mount</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding" :fullscreen="true">
+      <ion-button id="open-auto-mount-modal">Open Auto Mount Modal</ion-button>
+
+      <ion-button id="open-auto-mount-popover">Open Auto Mount Popover</ion-button>
+
+      <br /><br />
+
+      <ion-modal
+        id="auto-mount-modal"
+        :auto-mount-component="true"
+        trigger="open-auto-mount-modal"
+      >
+        <ModalContent :title="overlayProps.title"></ModalContent>
+      </ion-modal>
+
+      <ion-popover
+        id="auto-mount-popover"
+        :auto-mount-component="true"
+        trigger="open-auto-mount-popover"
+      >
+        <PopoverContent :title="overlayProps.title"></PopoverContent>
+      </ion-popover>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonModal,
+  IonPopover,
+} from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
+import ModalContent from '@/components/ModalContent.vue';
+import PopoverContent from '@/components/PopoverContent.vue';
+
+export default defineComponent({
+  components: {
+    ModalContent,
+    PopoverContent,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonModal,
+    IonPopover,
+  },
+  setup() {
+    const overlayProps = {
+      title: 'Custom Title'
+    }
+
+    return {
+      overlayProps
+    }
+  }
+});
+</script>

packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js

@@ -0,0 +1,52 @@
+describe('overlays - autoMountComponent', () => {
+  beforeEach(() => {
+    cy.viewport(1000, 900);
+    cy.visit('http://localhost:8080/overlays-auto-mount')
+  })
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.get('ion-modal#default-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.get('#open-auto-mount-modal').click();
+
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+
+      cy.get('ion-modal#auto-mount-modal #dismiss').click();
+
+      cy.get('ion-modal#auto-mount-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.get('ion-popover#default-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.get('#open-auto-mount-popover').click();
+
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+
+      cy.get('ion-popover#auto-mount-popover #dismiss').click();
+
+      cy.get('ion-popover#auto-mount-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+    });
+  })
+})

packages/vue/test-app/tests/e2e/specs/overlays.js

@@ -134,7 +134,7 @@ describe('Overlays', () => {
     cy.get('ion-button#present-overlay').click();
     cy.get('ion-popover.ion-popover-controller').should('exist');
 
-    cy.get('ion-popover.ion-popover-controller ion-content').should('have.text', 'Custom Title');
+    cy.get('ion-popover.ion-popover-controller ion-content #title').should('have.text', 'Custom Title');
   });
 
   it('should pass props to popover via component', () => {
@@ -144,7 +144,7 @@ describe('Overlays', () => {
     cy.get('ion-button#present-overlay').click();
     cy.get('ion-popover').should('exist');
 
-    cy.get('ion-popover.popover-inline ion-content').should('have.text', 'Custom Title');
+    cy.get('ion-popover.popover-inline ion-content #title').should('have.text', 'Custom Title');
   });
 
   it('should only open one instance at a time when props change quickly on component', () => {