Added overlay components, refactor inputs, controllers

Author: michaeltintiuc

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './overlays';
+export * from './inputs';
+export * from './navigation';

src/components/inputs.ts

@@ -1,83 +1,39 @@
-import Vue, { CreateElement, RenderContext } from 'vue';
-
-interface EventHandler {
-  [key: string]: (e: Event) => void;
-}
-
-type Callback = (value: Event | string) => void;
-
-// Events to register handlers for
-const events: string[] = ['ionChange', 'ionInput', 'ionBlur', 'ionFocus', 'ionCancel', 'ionSelect'];
-
-// Arguments to be passed to the factory function
-const inputComponentsToBeCreated = [
-  ['IonCheckboxVue', 'ion-checkbox', 'ionChange', 'checked'],
-  ['IonDatetimeVue', 'ion-datetime'],
-  ['IonInputVue', 'ion-input', 'ionInput'],
-  ['IonRadioVue', 'ion-radio', 'ionSelect'],
-  ['IonRangeVue', 'ion-range'],
-  ['IonSearchbarVue', 'ion-searchbar', 'ionInput'],
-  ['IonSelectVue', 'ion-select'],
-  ['IonTextareaVue', 'ion-textarea'],
-  ['IonToggleVue', 'ion-toggle', 'ionChange', 'checked'],
-];
-
-// Factory function for creation of input components
-export function createInputComponents() {
-  inputComponentsToBeCreated.map(args => (createInputComponent as any)(...args));
-}
-
-/**
- * Create a wrapped input component that captures typical ionic input events
- * and emits core ones so v-model works.
- * @param name the vue name of the component
- * @param coreTag the actual tag to render (such as ion-datetime)
- * @param modelEvent to be used for v-model
- * @param valueProperty to be used for v-model
- */
-function createInputComponent(name: string, coreTag: string, modelEvent = 'ionChange', valueProperty = 'value') {
-  Vue.component(name, {
-    name,
-    functional: true,
-    model: {
-      event: modelEvent,
-      prop: valueProperty,
-    },
-    render(h: CreateElement, { data, listeners, slots }: RenderContext) {
-      return h(coreTag, {
-        ...data,
-        on: buildEventHandlers(listeners, modelEvent, valueProperty),
-      }, slots().default);
-    },
-  });
-}
-
-function buildEventHandlers(listeners: RenderContext['listeners'], modelEvent: string, valueProperty: string) {
-  const handlers: EventHandler = {};
-
-  // Loop through all the events
-  events.map((eventName: string) => {
-    if (!listeners[eventName]) {
-      return;
-    }
-
-    // Normalize listeners coming from context as Function | Function[]
-    const callbacks: Callback[] = Array.isArray(listeners[eventName])
-      ? listeners[eventName] as Callback[]
-      : [listeners[eventName] as Callback];
-
-    // Assign handlers
-    handlers[eventName] = (e: Event) => {
-      callbacks.map(f => {
-        if (e) {
-          f(modelEvent === eventName
-            ? (e.target as any)[valueProperty]
-            : e
-          );
-        }
-      });
-    };
-  });
-
-  return handlers;
-}
+import { createInputComponent } from '../utils';
+
+export const IonCheckboxVue = createInputComponent(
+  'IonCheckboxVue',
+  'ion-checkbox',
+  'ionChange',
+  'checked'
+);
+export const IonDatetimeVue = createInputComponent(
+  'IonDatetimeVue',
+  'ion-datetime'
+);
+export const IonInputVue = createInputComponent(
+  'IonInputVue',
+  'ion-input',
+  'ionInput'
+);
+export const IonRadioVue = createInputComponent(
+  'IonRadioVue',
+  'ion-radio',
+  'ionSelect'
+);
+export const IonRangeVue = createInputComponent('IonRangeVue', 'ion-range');
+export const IonSearchbarVue = createInputComponent(
+  'IonSearchbarVue',
+  'ion-searchbar',
+  'ionInput'
+);
+export const IonSelectVue = createInputComponent('IonSelectVue', 'ion-select');
+export const IonTextareaVue = createInputComponent(
+  'IonTextareaVue',
+  'ion-textarea'
+);
+export const IonToggleVue = createInputComponent(
+  'IonToggleVue',
+  'ion-toggle',
+  'ionChange',
+  'checked'
+);

src/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './ion-page';
+export * from './ion-tabs';

src/components/overlays.ts

@@ -0,0 +1,20 @@
+import { createOverlayComponent } from '../utils';
+import {
+  actionSheetController,
+  modalController,
+  popoverController
+} from '../controllers';
+
+export const IonModalVue = createOverlayComponent<HTMLIonModalElement>(
+  'IonModal',
+  modalController
+);
+
+export const IonActionSheetVue = createOverlayComponent<
+  HTMLIonActionSheetElement
+>('IonActionSheet', actionSheetController);
+
+export const IonPopoverVue = createOverlayComponent<HTMLIonPopoverElement>(
+  'IonPopover',
+  popoverController
+);

src/controllers/modal-controller.ts

@@ -1,15 +1,21 @@
-import Vue from 'vue';
-import { ModalOptions, modalController as _modalController } from '@ionic/core';
+import {
+  ModalOptions,
+  OverlayController,
+  modalController as _modalController
+} from '@ionic/core';
 import { VueDelegate } from './vue-delegate';
 
-export const modalController = (delegate?: VueDelegate) => {
-  delegate = delegate || new VueDelegate(Vue);
+export interface ModalController extends OverlayController {
+  create(options: ModalOptions): Promise<HTMLIonModalElement>;
+}
+
+export const modalController = (): ModalController => {
   return {
     ..._modalController,
     create(options: ModalOptions) {
       return _modalController.create({
         ...options,
-        delegate,
+        delegate: new VueDelegate()
       });
     }
   };

src/controllers/popover-controller.ts

@@ -1,15 +1,16 @@
-import Vue from 'vue';
-import { PopoverOptions, popoverController as _popoverController } from '@ionic/core';
+import {
+  PopoverOptions,
+  popoverController as _popoverController
+} from '@ionic/core';
 import { VueDelegate } from './vue-delegate';
 
-export const popoverController = (delegate?: VueDelegate) => {
-  delegate = delegate || new VueDelegate(Vue);
+export const popoverController = () => {
   return {
     ..._popoverController,
     create(options: PopoverOptions) {
       return _popoverController.create({
         ...options,
-        delegate,
+        delegate: new VueDelegate()
       });
     }
   };

src/controllers/vue-delegate.ts

@@ -1,24 +1,36 @@
-import { VueConstructor } from 'vue';
-import { FrameworkDelegate, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from '@ionic/core';
+import Vue, { VueConstructor } from 'vue';
+import {
+  FrameworkDelegate,
+  LIFECYCLE_DID_ENTER,
+  LIFECYCLE_DID_LEAVE,
+  LIFECYCLE_WILL_ENTER,
+  LIFECYCLE_WILL_LEAVE,
+  LIFECYCLE_WILL_UNLOAD
+} from '@ionic/core';
 import { EsModule, HTMLVueElement, WebpackFunction } from '../interfaces';
 
-
 // Handle creation of sync and async components
-function createVueComponent(vue: VueConstructor, component: WebpackFunction | object | VueConstructor): Promise<VueConstructor> {
-  return Promise.resolve(
-    typeof component === 'function' && (component as WebpackFunction).cid === undefined
-      ? (component as WebpackFunction)().then((cmp: any) => vue.extend(isESModule(cmp) ? cmp.default : cmp))
-      : vue.extend(component)
-  );
+async function createVueComponent(
+  component: WebpackFunction | object | VueConstructor
+): Promise<VueConstructor> {
+  if (
+    typeof component === 'function' &&
+    (component as WebpackFunction).cid === undefined
+  ) {
+    const cmp = await (component as WebpackFunction)();
+    return Vue.extend(isESModule(cmp) ? cmp.default : cmp);
+  }
+  return Vue.extend(component);
 }
 
 export class VueDelegate implements FrameworkDelegate {
-  constructor(
-    public vue: VueConstructor,
-  ) {}
-
   // Attach the passed Vue component to DOM
-  attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | VueConstructor, opts?: object, classes?: string[]): Promise<HTMLElement> {
+  async attachViewToDom(
+    parentElement: HTMLElement,
+    component: HTMLElement | WebpackFunction | object | VueConstructor,
+    opts?: object,
+    classes?: string[]
+  ): Promise<HTMLElement> {
     // Handle HTML elements
     if (isElement(component)) {
       // Add any classes to the element
@@ -30,22 +42,24 @@ export class VueDelegate implements FrameworkDelegate {
       return Promise.resolve(component as HTMLElement);
     }
 
-    // Get the Vue controller
-    return createVueComponent(this.vue, component).then((Component: VueConstructor) => {
-      const componentInstance = new Component(opts);
-      componentInstance.$mount();
+    // Get the Vue constructor
+    const constructor = await createVueComponent(component);
+    const componentInstance = new constructor(opts);
+    componentInstance.$mount();
 
-      // Add any classes to the Vue component's root element
-      addClasses(componentInstance.$el as HTMLElement, classes);
+    // Add any classes to the Vue component's root element
+    addClasses(componentInstance.$el as HTMLElement, classes);
 
-      // Append the Vue component to DOM
-      parentElement.appendChild(componentInstance.$el);
-      return componentInstance.$el as HTMLElement;
-    });
+    // Append the Vue component to DOM
+    parentElement.appendChild(componentInstance.$el);
+    return componentInstance.$el as HTMLElement;
   }
 
   // Remove the earlier created Vue component from DOM
-  removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLVueElement): Promise<void> {
+  removeViewFromDom(
+    _parentElement: HTMLElement,
+    childElement: HTMLVueElement
+  ): Promise<void> {
     // Destroy the Vue component instance
     if (childElement.__vue__) {
       childElement.__vue__.$destroy();
@@ -74,7 +88,8 @@ export function bindLifecycleEvents(instance: any, element: HTMLElement) {
 }
 
 // Check Symbol support
-const hasSymbol = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
+const hasSymbol =
+  typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
 
 // Check if object is an ES module
 function isESModule(obj: EsModule) {

src/index.ts

@@ -36,7 +36,7 @@ export default {
 export { default as IonicVueRouter } from './router';
 
 export * from './controllers';
-export * from './components/inputs';
+export * from './components';
 
 // Icons that are used by internal components
 addIcons({