mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 18:17:31 +08:00
feat(vue): add custom elements bundle (#23458)
This commit is contained in:
@ -1,26 +1,58 @@
|
||||
import {
|
||||
modalController,
|
||||
popoverController
|
||||
} from '@ionic/core';
|
||||
modalController as modalCtrl,
|
||||
popoverController as popoverCtrl,
|
||||
alertController as alertCtrl,
|
||||
actionSheetController as actionSheetCtrl,
|
||||
loadingController as loadingCtrl,
|
||||
pickerController as pickerCtrl,
|
||||
toastController as toastCtrl,
|
||||
} from '@ionic/core/components';
|
||||
import { defineCustomElement } from './utils';
|
||||
|
||||
import { VueDelegate } from './framework-delegate';
|
||||
|
||||
const oldModalCreate = modalController.create.bind(modalController);
|
||||
modalController.create = (options) => {
|
||||
return oldModalCreate({
|
||||
...options,
|
||||
delegate: VueDelegate()
|
||||
});
|
||||
import { IonModal } from '@ionic/core/components/ion-modal.js';
|
||||
import { IonPopover } from '@ionic/core/components/ion-popover.js'
|
||||
import { IonAlert } from '@ionic/core/components/ion-alert.js'
|
||||
import { IonActionSheet } from '@ionic/core/components/ion-action-sheet.js'
|
||||
import { IonLoading } from '@ionic/core/components/ion-loading.js'
|
||||
import { IonPicker } from '@ionic/core/components/ion-picker.js'
|
||||
import { IonToast } from '@ionic/core/components/ion-toast.js'
|
||||
|
||||
/**
|
||||
* Wrap the controllers export from @ionic/core
|
||||
* register the underlying Web Component and
|
||||
* (optionally) provide a framework delegate.
|
||||
*/
|
||||
const createController = (tagName: string, customElement: any, oldController: any, useDelegate = false) => {
|
||||
const delegate = useDelegate ? VueDelegate() : undefined;
|
||||
const oldCreate = oldController.create.bind(oldController);
|
||||
oldController.create = (options: any) => {
|
||||
defineCustomElement(tagName, customElement);
|
||||
|
||||
return oldCreate({
|
||||
...options,
|
||||
delegate
|
||||
})
|
||||
}
|
||||
|
||||
return oldController;
|
||||
}
|
||||
|
||||
const oldPopoverCreate = popoverController.create.bind(popoverController);
|
||||
popoverController.create = (options) => {
|
||||
return oldPopoverCreate({
|
||||
...options,
|
||||
delegate: VueDelegate()
|
||||
});
|
||||
}
|
||||
const modalController = /*@__PURE__*/ createController('ion-modal', IonModal, modalCtrl, true);
|
||||
const popoverController = /*@__PURE__*/ createController('ion-popover', IonPopover, popoverCtrl, true);
|
||||
const alertController = /*@__PURE__*/ createController('ion-alert', IonAlert, alertCtrl);
|
||||
const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet', IonActionSheet, actionSheetCtrl);
|
||||
const loadingController = /*@__PURE__*/ createController('ion-loading', IonLoading, loadingCtrl);
|
||||
const pickerController = /*@__PURE__*/ createController('ion-picker', IonPicker, pickerCtrl);
|
||||
const toastController = /*@__PURE__*/ createController('ion-toast', IonToast, toastCtrl);
|
||||
|
||||
export {
|
||||
modalController,
|
||||
popoverController
|
||||
popoverController,
|
||||
alertController,
|
||||
actionSheetController,
|
||||
loadingController,
|
||||
pickerController,
|
||||
toastController
|
||||
}
|
||||
|
Reference in New Issue
Block a user