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

feat(modal): modals can now be used inline (#23341)

Browse Source 
resolves #20117, resolves #20263
This commit is contained in:
Liam DeBeasi
2021-06-01 11:09:40 -04:00
committed by GitHub
parent 8c6163c5b6
commit 3be1c3dcd7
41 changed files with 860 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/vue/src/components/IonModal.ts Normal file
View File

@ -0,0 +1,22 @@
import { defineComponent, h, ref, onMounted } from 'vue';
export const IonModal = defineComponent({
name: 'IonModal',
setup(_, { attrs, slots }) {
const isOpen = ref(false);
const elementRef = ref();
onMounted(() => {
elementRef.value.addEventListener('will-present', () => isOpen.value = true);
elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
});
return () => {
return h(
'ion-modal',
{ ...attrs, ref: elementRef },
(isOpen.value) ? slots : undefined
)
}
}
});

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

@ -5,7 +5,6 @@ import {
actionSheetController,
alertController,
loadingController,
modalController,
pickerController,
toastController
} from '@ionic/core';
@ -18,8 +17,6 @@ export const IonAlert = /*@__PURE__*/defineOverlayContainer<JSX.IonAlert>('ion-a
export const IonLoading = /*@__PURE__*/defineOverlayContainer<JSX.IonLoading>('ion-loading', ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController);
export const IonModal = /*@__PURE__*/defineOverlayContainer<JSX.IonModal>('ion-modal', ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose'], modalController);
export const IonPicker = /*@__PURE__*/defineOverlayContainer<JSX.IonPicker>('ion-picker', ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
export const IonToast = /*@__PURE__*/defineOverlayContainer<JSX.IonToast>('ion-toast', ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);

1
packages/vue/src/index.ts
View File

@ -14,6 +14,7 @@ export { IonNav } from './components/IonNav';
export { IonIcon } from './components/IonIcon';
export { IonApp } from './components/IonApp';
export { IonPopover } from './components/IonPopover';
export { IonModal } from './components/IonModal';
export * from './components/Overlays';