diff --git a/vue/package.json b/vue/package.json index ae230f88dd3..a57c980c7b0 100644 --- a/vue/package.json +++ b/vue/package.json @@ -58,7 +58,7 @@ "vue-router": "^3.0.1" }, "dependencies": { - "@ionic/core": "^4.6.0" + "@ionic/core": "^4.10.0" }, "peerDependencies": { "vue": "^2.5.17", diff --git a/vue/src/controllers/action-sheet-controller.ts b/vue/src/controllers/action-sheet-controller.ts deleted file mode 100644 index f4d8f64706c..00000000000 --- a/vue/src/controllers/action-sheet-controller.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ActionSheetOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; - -export const CTRL = 'ion-action-sheet-controller'; -export class ActionSheetController extends OverlayBaseController { - constructor() { - super(CTRL); - } -} diff --git a/vue/src/controllers/alert-controller.ts b/vue/src/controllers/alert-controller.ts deleted file mode 100644 index 755a161eb15..00000000000 --- a/vue/src/controllers/alert-controller.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { AlertOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; - -export const CTRL = 'ion-alert-controller'; -export class AlertController extends OverlayBaseController { - constructor() { - super(CTRL); - } -} diff --git a/vue/src/controllers/index.ts b/vue/src/controllers/index.ts index f5101cf8a87..bed8d6f1d75 100644 --- a/vue/src/controllers/index.ts +++ b/vue/src/controllers/index.ts @@ -1,7 +1,13 @@ -export { ActionSheetController } from './action-sheet-controller'; -export { AlertController } from './alert-controller'; -export { LoadingController } from './loading-controller'; -export { MenuController } from './menu-controller'; -export { ModalController } from './modal-controller'; -export { PopoverController } from './popover-controller'; -export { ToastController } from './toast-controller'; +export { + actionSheetController, + alertController, + loadingController, + menuController, + toastController, + pickerController, +} from '@ionic/core'; +import { modalController as _modalController } from './modal-controller'; +import { popoverController as _popoverController } from './popover-controller'; + +export const modalController = _modalController(); +export const popoverController = _popoverController(); diff --git a/vue/src/controllers/loading-controller.ts b/vue/src/controllers/loading-controller.ts deleted file mode 100644 index a9f21414ecb..00000000000 --- a/vue/src/controllers/loading-controller.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { LoadingOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; - -export class LoadingController extends OverlayBaseController { - constructor() { - super('ion-loading-controller'); - } -} diff --git a/vue/src/controllers/menu-controller.ts b/vue/src/controllers/menu-controller.ts deleted file mode 100644 index 8d5096f1e35..00000000000 --- a/vue/src/controllers/menu-controller.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { proxyMethod } from '../util'; - -export const CTRL = 'ion-menu-controller'; -export class MenuController { - - /** - * Programmatically open the Menu. - * @param [menuId] Optionally get the menu by its id, or side. - * @return returns a promise when the menu is fully opened - */ - open(menuId?: string): Promise { - return proxyMethod(CTRL, 'open', menuId); - } - - /** - * Programmatically close the Menu. If no `menuId` is given as the first - * argument then it'll close any menu which is open. If a `menuId` - * is given then it'll close that exact menu. - * @param [menuId] Optionally get the menu by its id, or side. - * @return returns a promise when the menu is fully closed - */ - close(menuId?: string): Promise { - return proxyMethod(CTRL, 'close', menuId); - } - - /** - * Toggle the menu. If it's closed, it will open, and if opened, it - * will close. - * @param [menuId] Optionally get the menu by its id, or side. - * @return returns a promise when the menu has been toggled - */ - toggle(menuId?: string): Promise { - return proxyMethod(CTRL, 'toggle', menuId); - } - - /** - * Used to enable or disable a menu. For example, there could be multiple - * left menus, but only one of them should be able to be opened at the same - * time. If there are multiple menus on the same side, then enabling one menu - * will also automatically disable all the others that are on the same side. - * @param [menuId] Optionally get the menu by its id, or side. - * @return Returns the instance of the menu, which is useful for chaining. - */ - enable(shouldEnable: boolean, menuId?: string): Promise { - return proxyMethod(CTRL, 'enable', shouldEnable, menuId); - } - - /** - * Used to enable or disable the ability to swipe open the menu. - * @param shouldEnable True if it should be swipe-able, false if not. - * @param [menuId] Optionally get the menu by its id, or side. - * @return Returns the instance of the menu, which is useful for chaining. - */ - swipeGesture(shouldEnable: boolean, menuId?: string): Promise { - return proxyMethod(CTRL, 'swipeGesture', shouldEnable, menuId); - } - - /** - * @param [menuId] Optionally get the menu by its id, or side. - * @return Returns true if the specified menu is currently open, otherwise false. - * If the menuId is not specified, it returns true if ANY menu is currenly open. - */ - isOpen(menuId?: string): Promise { - return proxyMethod(CTRL, 'isOpen', menuId); - } - - /** - * @param [menuId] Optionally get the menu by its id, or side. - * @return Returns true if the menu is currently enabled, otherwise false. - */ - isEnabled(menuId?: string): Promise { - return proxyMethod(CTRL, 'isEnabled', menuId); - } - - /** - * Used to get a menu instance. If a `menuId` is not provided then it'll - * return the first menu found. If a `menuId` is `left` or `right`, then - * it'll return the enabled menu on that side. Otherwise, if a `menuId` is - * provided, then it'll try to find the menu using the menu's `id` - * property. If a menu is not found then it'll return `null`. - * @param [menuId] Optionally get the menu by its id, or side. - * @return Returns the instance of the menu if found, otherwise `null`. - */ - get(menuId?: string): Promise { - return proxyMethod(CTRL, 'get', menuId); - } - - /** - * @return Returns the instance of the menu already opened, otherwise `null`. - */ - getOpen(): Promise { - return proxyMethod(CTRL, 'getOpen'); - } - - /** - * @return Returns an array of all menu instances. - */ - getMenus(): Promise { - return proxyMethod(CTRL, 'getMenus'); - } -} diff --git a/vue/src/controllers/modal-controller.ts b/vue/src/controllers/modal-controller.ts index 275f14fd5d8..bf823ba64e4 100644 --- a/vue/src/controllers/modal-controller.ts +++ b/vue/src/controllers/modal-controller.ts @@ -1,20 +1,16 @@ -import { ModalOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; +import Vue from 'vue'; +import { ModalOptions, modalController as _modalController } from '@ionic/core'; import { VueDelegate } from './vue-delegate'; -export const CTRL = 'ion-modal-controller'; -export class ModalController extends OverlayBaseController { - - constructor( - private delegate: VueDelegate - ) { - super(CTRL); - } - - create(opts: ModalOptions): Promise { - return super.create({ - ...opts, - delegate: this.delegate - }); - } -} +export const modalController = (delegate?: VueDelegate) => { + delegate = delegate || new VueDelegate(Vue); + return { + ..._modalController, + create(options: ModalOptions) { + return _modalController.create({ + ...options, + delegate, + }); + } + }; +}; diff --git a/vue/src/controllers/picker-controller.ts b/vue/src/controllers/picker-controller.ts deleted file mode 100644 index 424ff4996cf..00000000000 --- a/vue/src/controllers/picker-controller.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { PickerOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; - -export const CTRL = 'ion-picker-controller'; -export class PickerController extends OverlayBaseController { - constructor() { - super(CTRL); - } -} diff --git a/vue/src/controllers/popover-controller.ts b/vue/src/controllers/popover-controller.ts index d5f549ae696..83db272e891 100644 --- a/vue/src/controllers/popover-controller.ts +++ b/vue/src/controllers/popover-controller.ts @@ -1,20 +1,16 @@ -import { PopoverOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; +import Vue from 'vue'; +import { PopoverOptions, popoverController as _popoverController } from '@ionic/core'; import { VueDelegate } from './vue-delegate'; -export const CTRL = 'ion-popover-controller'; -export class PopoverController extends OverlayBaseController { - - constructor( - private delegate: VueDelegate - ) { - super(CTRL); - } - - create(opts: PopoverOptions): Promise { - return super.create({ - ...opts, - delegate: this.delegate - }); - } -} +export const popoverController = (delegate?: VueDelegate) => { + delegate = delegate || new VueDelegate(Vue); + return { + ..._popoverController, + create(options: PopoverOptions) { + return _popoverController.create({ + ...options, + delegate, + }); + } + }; +}; diff --git a/vue/src/controllers/toast-controller.ts b/vue/src/controllers/toast-controller.ts deleted file mode 100644 index 2227b24e860..00000000000 --- a/vue/src/controllers/toast-controller.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ToastOptions } from '@ionic/core'; -import { OverlayBaseController } from '../util'; - -export class ToastController extends OverlayBaseController { - constructor() { - super('ion-toast-controller'); - } -} diff --git a/vue/src/index.ts b/vue/src/index.ts index 27bcb531177..61fe5a2b637 100644 --- a/vue/src/index.ts +++ b/vue/src/index.ts @@ -5,7 +5,9 @@ export default { version: '__VERSION__' }; +// To be removed once Vue.$ionic is fully deprecated export { Controllers } from './ionic'; -export { default as IonicVueRouter } from './router'; +export { default as IonicVueRouter } from './router'; +export* from './controllers'; export * from './components/inputs'; diff --git a/vue/src/ionic.ts b/vue/src/ionic.ts index d83929d3aba..f6598428fbf 100644 --- a/vue/src/ionic.ts +++ b/vue/src/ionic.ts @@ -1,14 +1,18 @@ import { PluginFunction, VueConstructor, default as VueImport } from 'vue'; import { - ActionSheetController, - AlertController, - LoadingController, - MenuController, - ModalController, - PopoverController, - ToastController + IonicConfig, + OverlayController +} from '@ionic/core'; +import { + actionSheetController, + alertController, + loadingController, + menuController, + pickerController, + toastController, } from './controllers'; -import { IonicConfig } from '@ionic/core'; +import { modalController } from './controllers/modal-controller'; +import { popoverController } from './controllers/popover-controller'; import { appInitialize } from './app-initialize'; import { VueDelegate } from './controllers/vue-delegate'; import IonTabs from './components/navigation/ion-tabs'; @@ -16,13 +20,14 @@ import IonPage from './components/navigation/ion-page'; import { createInputComponent } from './components/inputs'; export interface Controllers { - actionSheetController: ActionSheetController; - alertController: AlertController; - loadingController: LoadingController; - menuController: MenuController; - modalController: ModalController; - popoverController: PopoverController; - toastController: ToastController; + actionSheetController: OverlayController; + alertController: OverlayController; + loadingController: OverlayController; + menuController: typeof menuController; + modalController: OverlayController; + popoverController: OverlayController; + toastController: OverlayController; + pickerController: OverlayController; } declare module 'vue/types/vue' { @@ -31,7 +36,6 @@ declare module 'vue/types/vue' { } } - function createApi(vueInstance: VueConstructor) { const cache: Partial = {}; const vueDelegate = new VueDelegate(vueInstance); @@ -39,45 +43,51 @@ function createApi(vueInstance: VueConstructor) { return { get actionSheetController() { if (!cache.actionSheetController) { - cache.actionSheetController = new ActionSheetController(); + cache.actionSheetController = actionSheetController; } return cache.actionSheetController; }, get alertController() { if (!cache.alertController) { - cache.alertController = new AlertController(); + cache.alertController = alertController; } return cache.alertController; }, get loadingController() { if (!cache.loadingController) { - cache.loadingController = new LoadingController(); + cache.loadingController = loadingController; } return cache.loadingController; }, get menuController() { if (!cache.menuController) { - cache.menuController = new MenuController(); + cache.menuController = menuController; } return cache.menuController; }, get modalController() { if (!cache.modalController) { - cache.modalController = new ModalController(vueDelegate); + cache.modalController = modalController(vueDelegate); } return cache.modalController; }, get popoverController() { if (!cache.popoverController) { - cache.popoverController = new PopoverController(vueDelegate); + cache.popoverController = popoverController(vueDelegate); } return cache.popoverController; }, get toastController() { if (!cache.toastController) { - cache.toastController = new ToastController(); + cache.toastController = toastController; } return cache.toastController; + }, + get pickerController() { + if (!cache.pickerController) { + cache.pickerController = pickerController; + } + return cache.pickerController; } }; } @@ -113,6 +123,9 @@ export const install: PluginFunction = (_Vue, config) => { const api = createApi(Vue); Object.defineProperty(Vue.prototype, '$ionic', { - get() { return api; } + get() { + console.warn('[Ionic] The usage of the global $ionic Vue property is deprecated and will be removed in the future versions.\nInstead import controllers directly with "import { alertController } from \'@ionic/vue\'"'); + return api; + } }); }; diff --git a/vue/src/util.ts b/vue/src/util.ts deleted file mode 100644 index 05f1a7e6d98..00000000000 --- a/vue/src/util.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { HTMLStencilElement } from '@ionic/core'; - -export class OverlayBaseController { - constructor(private ctrl: string) {} - - create(opts?: Opts): Promise { - return proxyMethod(this.ctrl, 'create', opts); - } - - dismiss(data?: any, role?: string, id?: string): Promise { - return proxyMethod(this.ctrl, 'dismiss', data, role, id); - } - - getTop(): Promise { - return proxyMethod(this.ctrl, 'getTop'); - } -} - -export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) { - const controller = ensureElementInBody(ctrlName); - return controller.componentOnReady() - .then(() => (controller as any)[methodName].apply(controller, args)); -} - -export function ensureElementInBody(elementName: string) { - let element = document.querySelector(elementName); - if (!element) { - element = document.createElement(elementName); - document.body.appendChild(element); - } - return element as HTMLStencilElement; -}