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

fix(vue): loading is created as an inline component (#26191)

Browse Source
This commit is contained in:
Sean Perkins
2022-11-02 13:59:31 -04:00
committed by GitHub
parent 30e3a1485d
commit 84990cec88
3 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vue/scripts/copy-overlays.js
View File

@ -15,7 +15,6 @@ function generateOverlays() {
}, },
{ {
tag: 'ion-loading', tag: 'ion-loading',
controller: 'loadingController',
name: 'IonLoading' name: 'IonLoading'
}, },
{ {
@ -61,7 +60,10 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
`); `);
}); });
const template = `/* auto-generated vue overlay proxies */ const template = `/**
* This is an autogenerated file created by 'scripts/copy-overlays.js'.
* Changes made to this file will be overwritten on build.
*/
import { import {
JSX, JSX,

8
packages/vue/src/components/Overlays.ts
View File

@ -1,10 +1,12 @@
/* auto-generated vue overlay proxies */ /**
* This is an autogenerated file created by 'scripts/copy-overlays.js'.
* Changes made to this file will be overwritten on build.
*/
import { import {
JSX, JSX,
actionSheetController, actionSheetController,
alertController, alertController,
loadingController,
pickerController, pickerController,
toastController, toastController,
} from '@ionic/core/components'; } from '@ionic/core/components';
@ -23,7 +25,7 @@ export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonAction
export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController); export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'], loadingController); export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController); export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);

20
packages/vue/test/base/tests/e2e/specs/overlays.cy.js
View File

@ -32,11 +32,29 @@ const testComponent = (overlay, shadow = false) => {
* so they should not be removed from the DOM. This test * so they should not be removed from the DOM. This test
* might need to be revisited if other overlay components * might need to be revisited if other overlay components
* are converted to shadow as well. * are converted to shadow as well.
*
* Migrate these overlays to use `testInlineOverlay` instead.
*/ */
cy.get(overlay).should('not.exist'); cy.get(overlay).should('not.exist');
} }
} }
const testInlineOverlay = (overlay, shadow = false) => {
cy.get(`ion-radio#${overlay}`).click();
cy.get('ion-radio#component').click();
cy.get('ion-button#present-overlay').click();
cy.get(overlay).should('exist').should('be.visible');
if (shadow) {
cy.get(overlay).shadow().find('ion-backdrop').click({ force: true });
} else {
cy.get(`${overlay} ion-backdrop`).click({ force: true });
cy.get(overlay).should('not.be.visible');
}
}
describe('Overlays', () => { describe('Overlays', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(1000, 900); cy.viewport(1000, 900);
@ -84,7 +102,7 @@ describe('Overlays', () => {
}); });
it(`should open and close ion-loading via component`, () => { it(`should open and close ion-loading via component`, () => {
testComponent('ion-loading'); testInlineOverlay('ion-loading');
}); });
it(`should open and close ion-modal via component`, () => { it(`should open and close ion-modal via component`, () => {