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

feat(popover): popover can now be used inline (#23231)

Browse Source 
BREAKING CHANGE: Converted `ion-popover` to use the Shadow DOM.
This commit is contained in:
Liam DeBeasi
2021-05-03 12:02:22 -04:00
committed by GitHub
parent 6fcb3a62b1
commit 308fa1c0dd
29 changed files with 826 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,22 @@
import { defineComponent, h, ref, onMounted } from 'vue';
export const IonPopover = defineComponent({
name: 'IonPopover',
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-popover',
{ ...attrs, ref: elementRef },
(isOpen.value) ? slots : undefined
)
}
}
});

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

@ -7,7 +7,6 @@ import {
loadingController,
modalController,
pickerController,
popoverController,
toastController
} from '@ionic/core';
@ -23,7 +22,5 @@ export const IonModal = /*@__PURE__*/defineOverlayContainer<JSX.IonModal>('ion-m
export const IonPicker = /*@__PURE__*/defineOverlayContainer<JSX.IonPicker>('ion-picker', ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
export const IonPopover = /*@__PURE__*/defineOverlayContainer<JSX.IonPopover>('ion-popover', ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'enterAnimation', 'event', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'translucent'], popoverController);
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

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