fix(vue): inherit class attribute on ion-page

packages/vue/src/components/IonPage.ts

@@ -11,12 +11,13 @@ export const IonPage = /*@__PURE__*/ defineComponent({
   },
   setup(props, { attrs, slots }) {
     const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
+    const pageClass = attrs.class || '';
     return () => {
       return h(
         'div',
         {
-          ['class']: `ion-page ${hidePageClass}`,
           ...attrs,
+          ['class']: `ion-page ${hidePageClass} ${pageClass}`,
           ref: 'ionPage'
         },
         slots.default && slots.default()

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

@@ -13,6 +13,18 @@ const routes: Array<RouteRecordRaw> = [
     beforeEnter: DelayGuard,
     component: Home
   },
+  {
+    path: '/ion-page-class-object',
+    component: () => import('@/views/IonPageClass/Object.vue')
+  },
+  {
+    path: '/ion-page-class-string',
+    component: () => import('@/views/IonPageClass/String.vue')
+  },
+  {
+    path: '/ion-page-class-undefined',
+    component: () => import('@/views/IonPageClass/Undefined.vue')
+  },
   {
     path: '/lifecycle',
     component: () => import('@/views/Lifecycle.vue')

packages/vue/test-app/src/views/IonPageClass/Object.vue

@@ -0,0 +1,26 @@
+<template>
+  <ion-page :class="{
+    'ion-page-additional-class': true
+  }" data-pageid="ion-page-class">
+    <ion-content>
+      Some content
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-button router-link="/navigation" id="navigation">
+          Button
+        </ion-button>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonButton, IonContent, IonFooter, IonPage, IonToolbar } from '@ionic/vue';
+
+export default defineComponent({
+  name: 'IonPageClassObject',
+  components: { IonButton, IonContent, IonFooter, IonPage, IonToolbar },
+})
+</script>

packages/vue/test-app/src/views/IonPageClass/String.vue

@@ -0,0 +1,24 @@
+<template>
+  <ion-page class="ion-page-additional-class" data-pageid="ion-page-class">
+    <ion-content>
+      Some content
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-button router-link="/navigation" id="navigation">
+          Button
+        </ion-button>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonButton, IonContent, IonFooter, IonPage, IonToolbar } from '@ionic/vue';
+
+export default defineComponent({
+  name: 'IonPageClassString',
+  components: { IonButton, IonContent, IonFooter, IonPage, IonToolbar },
+})
+</script>

packages/vue/test-app/src/views/IonPageClass/Undefined.vue

@@ -0,0 +1,24 @@
+<template>
+  <ion-page data-pageid="ion-page-class">
+    <ion-content>
+      Some content
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-button router-link="/navigation" id="navigation">
+          Button
+        </ion-button>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonButton, IonContent, IonFooter, IonPage, IonToolbar } from '@ionic/vue';
+
+export default defineComponent({
+  name: 'IonPageClassUndefined',
+  components: { IonButton, IonContent, IonFooter, IonPage, IonToolbar },
+})
+</script>

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

@@ -0,0 +1,27 @@
+describe('IonPage', () => {
+  it('Inherits object attribute while retaining ionic critical classes', () => {
+    cy.visit('http://localhost:8080/ion-page-class-object');
+
+    cy.get('.ion-page-additional-class').should('have.class', 'ion-page');
+
+    cy.get('#navigation').click();
+
+    cy.get('.ion-page-additional-class').should('have.class', 'ion-page-hidden');
+  });
+
+  it('Inherits string class attribute while retaining ionic critical classes', () => {
+    cy.visit('http://localhost:8080/ion-page-class-string');
+
+    cy.get('.ion-page-additional-class').should('have.class', 'ion-page');
+
+    cy.get('#navigation').click();
+
+    cy.get('.ion-page-additional-class').should('have.class', 'ion-page-hidden');
+  });
+
+  it('Correctly renders class attribute when no class attribute is set', () => {
+    cy.visit('http://localhost:8080/ion-page-class-undefined');
+
+    cy.get('.ion-page').should('not.have.class', 'undefined');
+  });
+});