From 63aa8919824316f919e4ef5e2fa0d8f48047ade5 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Mon, 13 Apr 2020 01:04:26 +0300 Subject: [PATCH 01/18] Fix #106 (#110) --- build/release.sh | 1 + src/components/ion-vue-router.ts | 103 +++++++++++++++++++++---------- 2 files changed, 73 insertions(+), 31 deletions(-) diff --git a/build/release.sh b/build/release.sh index 32fe505..aff0482 100755 --- a/build/release.sh +++ b/build/release.sh @@ -8,6 +8,7 @@ read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r echo # (optional) move to a new line if [[ $REPLY =~ ^[Yy]$ ]] then + npm run lint.fix echo "Releasing $VERSION ..." VERSION=$VERSION npm run prod diff --git a/src/components/ion-vue-router.ts b/src/components/ion-vue-router.ts index 55cf923..e139f20 100644 --- a/src/components/ion-vue-router.ts +++ b/src/components/ion-vue-router.ts @@ -3,17 +3,18 @@ import { NavDirection } from '@ionic/core'; type TransitionDone = () => void; -interface Props { - name: string; - animated: boolean; -} - interface KeepAliveProps { include?: string | string[] | RegExp; exclude?: string | string[] | RegExp; max?: number; } +interface Props { + name?: string; + animated?: boolean; + keepAlive?: KeepAliveProps; +} + // Component entering the view let enteringEl: HTMLElement; @@ -27,18 +28,20 @@ export default { // Disable transitions animated: { default: true, type: Boolean }, // keep-alive props - keepAlive: { type: [String, Object as () => KeepAliveProps] }, + keepAlive: { type: [String, Object as () => KeepAliveProps] } }, render(h: CreateElement, { parent, props, data, children }: RenderContext) { if (!parent.$router) { - throw new Error('IonTabs requires an instance of either VueRouter or IonicVueRouter'); + throw new Error( + 'IonTabs requires an instance of either VueRouter or IonicVueRouter' + ); } const ionRouterOutletData: VNodeData = { ...data, ref: 'ionRouterOutlet', - on: { click: (event: Event) => catchIonicGoBack(parent, event) }, + on: { click: (event: Event) => catchIonicGoBack(parent, event) } }; const routerViewData: VNodeData = { props: { name: props.name } }; const transitionData: VNodeData = { @@ -53,12 +56,18 @@ export default { beforeLeave, afterLeave, enterCancelled, - leaveCancelled, + leaveCancelled } }; const routerViewNode: VNode = h('router-view', routerViewData, children); - const keepAliveNode: VNode = h('keep-alive', { props: { ...props.keepAlive } }, [routerViewNode]); - const transitionNode: VNode = h('transition', transitionData, [props.keepAlive === undefined ? routerViewNode : keepAliveNode]); + const keepAliveNode: VNode = h( + 'keep-alive', + { props: { ...props.keepAlive } }, + [routerViewNode] + ); + const transitionNode: VNode = h('transition', transitionData, [ + props.keepAlive === undefined ? routerViewNode : keepAliveNode + ]); return h('ion-router-outlet', ionRouterOutletData, [transitionNode]); } @@ -71,7 +80,9 @@ function catchIonicGoBack(parent: Vue, event: Event): void { if (!event.target) return; // We only care for the event coming from Ionic's back button - const backButton = (event.target as HTMLElement).closest('ion-back-button') as HTMLIonBackButtonElement; + const backButton = (event.target as HTMLElement).closest( + 'ion-back-button' + ) as HTMLIonBackButtonElement; if (!backButton) return; const $router = parent.$router; @@ -96,7 +107,12 @@ function catchIonicGoBack(parent: Vue, event: Event): void { } // Transition when we leave the route -function leave(parent: Vue, props: Props, el: HTMLElement, done: TransitionDone) { +function leave( + parent: Vue, + props: Props, + el: HTMLElement, + done: TransitionDone +) { const promise = transition(parent, props, el); // Skip any transition if we don't get back a Promise @@ -107,16 +123,19 @@ function leave(parent: Vue, props: Props, el: HTMLElement, done: TransitionDone) // Perform navigation once the transition was finished parent.$router.transition = new Promise(resolve => { - promise.then(() => { - resolve(); - done(); - }).catch(console.error); + promise + .then(() => { + resolve(); + done(); + }) + .catch(console.error); }); } // Trigger the ionic/core transitions function transition(parent: Vue, props: Props, leavingEl: HTMLElement) { - const ionRouterOutlet = parent.$refs.ionRouterOutlet as HTMLIonRouterOutletElement; + const ionRouterOutlet = parent.$refs + .ionRouterOutlet as HTMLIonRouterOutletElement; // The Ionic framework didn't load - skip animations if (typeof ionRouterOutlet.componentOnReady === 'undefined') { @@ -132,15 +151,27 @@ function transition(parent: Vue, props: Props, leavingEl: HTMLElement) { // Add the proper Ionic classes, important for smooth transitions enteringEl.classList.add('ion-page', 'ion-page-invisible'); + // Reset the cached styling applied by ionic/core's: + // .afterStyles({ 'display': 'none' }) + if (typeof props.keepAlive !== 'undefined') { + enteringEl.style.display = ''; + } + // Commit to the transition as soon as the Ionic Router Outlet is ready - return ionRouterOutlet.componentOnReady().then((el: HTMLIonRouterOutletElement) => { - return el.commit(enteringEl, leavingEl, { - deepWait: true, - duration: !props.animated || parent.$router.direction === 'root' ? 0 : undefined, - direction: parent.$router.direction as NavDirection, - showGoBack: parent.$router.canGoBack(), - }); - }).catch(console.error); + return ionRouterOutlet + .componentOnReady() + .then((el: HTMLIonRouterOutletElement) => { + return el.commit(enteringEl, leavingEl, { + deepWait: true, + duration: + !props.animated || parent.$router.direction === 'root' + ? 0 + : undefined, + direction: parent.$router.direction as NavDirection, + showGoBack: parent.$router.canGoBack() + }); + }) + .catch(console.error); } // Set the component to be rendered before we render the new route @@ -154,8 +185,18 @@ function enter(_el: HTMLElement, done: TransitionDone) { } // Vue transition stub functions -function afterEnter(_el: HTMLElement) { /* */ } -function afterLeave(_el: HTMLElement) { /* */ } -function beforeLeave(_el: HTMLElement) { /* */ } -function enterCancelled(_el: HTMLElement) { /* */ } -function leaveCancelled(_el: HTMLElement) { /* */ } +function afterEnter(_el: HTMLElement) { + /* */ +} +function afterLeave(_el: HTMLElement) { + /* */ +} +function beforeLeave(_el: HTMLElement) { + /* */ +} +function enterCancelled(_el: HTMLElement) { + /* */ +} +function leaveCancelled(_el: HTMLElement) { + /* */ +} From 850f7f11410893575dd55fc0b4a6a4721fdfb831 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Mon, 13 Apr 2020 01:05:15 +0300 Subject: [PATCH 02/18] [build] 1.3.6 From 7d09f4e7a1cf18186729850f2b8231609d0984d7 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Mon, 13 Apr 2020 01:05:16 +0300 Subject: [PATCH 03/18] [release] 1.3.6 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 10f06d2..3dea324 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.5", + "version": "1.3.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d49cca3..db5bfab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.5", + "version": "1.3.6", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", From 23e8a6a3dbd67444041121a6d35fd4a5b3a8eeb7 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Fri, 17 Apr 2020 16:50:53 +0300 Subject: [PATCH 04/18] Added overlay components, refactor inputs, controllers --- src/components/index.ts | 3 + src/components/inputs.ts | 122 ++++++------------- src/components/navigation/index.ts | 2 + src/components/overlays.ts | 20 +++ src/controllers/modal-controller.ts | 16 ++- src/controllers/popover-controller.ts | 11 +- src/controllers/vue-delegate.ts | 67 ++++++---- src/index.ts | 2 +- src/ionic.ts | 90 +------------- src/utils/createInputComponent.ts | 74 +++++++++++ src/utils/createOverlayComponent.ts | 100 +++++++++++++++ src/utils/index.ts | 2 + types/components/createOverlayComponent.d.ts | 12 ++ types/components/index.d.ts | 4 + types/components/inputs.d.ts | 10 +- types/components/ion-modal.d.ts | 2 + types/components/navigation/index.d.ts | 3 + types/components/overlays.d.ts | 4 + types/controllers/index.d.ts | 6 +- types/controllers/modal-controller.d.ts | 12 +- types/controllers/popover-controller.d.ts | 3 +- types/controllers/vue-delegate.d.ts | 2 - types/index.d.ts | 2 +- types/utils/createInputComponent.d.ts | 3 + types/utils/createOverlayComponent.d.ts | 18 +++ types/utils/index.d.ts | 3 + 26 files changed, 367 insertions(+), 226 deletions(-) create mode 100644 src/components/index.ts create mode 100644 src/components/navigation/index.ts create mode 100644 src/components/overlays.ts create mode 100644 src/utils/createInputComponent.ts create mode 100644 src/utils/createOverlayComponent.ts create mode 100644 src/utils/index.ts create mode 100644 types/components/createOverlayComponent.d.ts create mode 100644 types/components/index.d.ts create mode 100644 types/components/ion-modal.d.ts create mode 100644 types/components/navigation/index.d.ts create mode 100644 types/components/overlays.d.ts create mode 100644 types/utils/createInputComponent.d.ts create mode 100644 types/utils/createOverlayComponent.d.ts create mode 100644 types/utils/index.d.ts diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..1fb9cc0 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,3 @@ +export * from './overlays'; +export * from './inputs'; +export * from './navigation'; diff --git a/src/components/inputs.ts b/src/components/inputs.ts index 0b9a7ca..f2312d4 100644 --- a/src/components/inputs.ts +++ b/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' +); diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts new file mode 100644 index 0000000..b2c620e --- /dev/null +++ b/src/components/navigation/index.ts @@ -0,0 +1,2 @@ +export * from './ion-page'; +export * from './ion-tabs'; diff --git a/src/components/overlays.ts b/src/components/overlays.ts new file mode 100644 index 0000000..6db77ea --- /dev/null +++ b/src/components/overlays.ts @@ -0,0 +1,20 @@ +import { createOverlayComponent } from '../utils'; +import { + actionSheetController, + modalController, + popoverController +} from '../controllers'; + +export const IonModalVue = createOverlayComponent( + 'IonModal', + modalController +); + +export const IonActionSheetVue = createOverlayComponent< + HTMLIonActionSheetElement +>('IonActionSheet', actionSheetController); + +export const IonPopoverVue = createOverlayComponent( + 'IonPopover', + popoverController +); diff --git a/src/controllers/modal-controller.ts b/src/controllers/modal-controller.ts index bf823ba..7e76fc8 100644 --- a/src/controllers/modal-controller.ts +++ b/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; +} + +export const modalController = (): ModalController => { return { ..._modalController, create(options: ModalOptions) { return _modalController.create({ ...options, - delegate, + delegate: new VueDelegate() }); } }; diff --git a/src/controllers/popover-controller.ts b/src/controllers/popover-controller.ts index 83db272..bbdfaab 100644 --- a/src/controllers/popover-controller.ts +++ b/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() }); } }; diff --git a/src/controllers/vue-delegate.ts b/src/controllers/vue-delegate.ts index c0cc3d7..62be1c5 100644 --- a/src/controllers/vue-delegate.ts +++ b/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 { - 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 { + 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 { + async attachViewToDom( + parentElement: HTMLElement, + component: HTMLElement | WebpackFunction | object | VueConstructor, + opts?: object, + classes?: string[] + ): Promise { // 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 { + removeViewFromDom( + _parentElement: HTMLElement, + childElement: HTMLVueElement + ): Promise { // 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) { diff --git a/src/index.ts b/src/index.ts index 01179ba..9092b39 100644 --- a/src/index.ts +++ b/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({ diff --git a/src/ionic.ts b/src/ionic.ts index ff4fe61..8365d42 100644 --- a/src/ionic.ts +++ b/src/ionic.ts @@ -1,87 +1,6 @@ -import VueImport, { PluginFunction, VueConstructor } from 'vue'; -import { IonicConfig, OverlayController } from '@ionic/core'; -import { - actionSheetController, - alertController, - loadingController, - menuController, - pickerController, - toastController -} from './controllers'; -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'; -import IonPage from './components/navigation/ion-page'; -import { createInputComponents } from './components/inputs'; - -interface Controllers { - actionSheetController: OverlayController; - alertController: OverlayController; - loadingController: OverlayController; - menuController: typeof menuController; - modalController: OverlayController; - popoverController: OverlayController; - toastController: OverlayController; - pickerController: OverlayController; -} - -function createApi(vueInstance: VueConstructor) { - const cache: Partial = {}; - const vueDelegate = new VueDelegate(vueInstance); - - return { - get actionSheetController() { - if (!cache.actionSheetController) { - cache.actionSheetController = actionSheetController; - } - return cache.actionSheetController; - }, - get alertController() { - if (!cache.alertController) { - cache.alertController = alertController; - } - return cache.alertController; - }, - get loadingController() { - if (!cache.loadingController) { - cache.loadingController = loadingController; - } - return cache.loadingController; - }, - get menuController() { - if (!cache.menuController) { - cache.menuController = menuController; - } - return cache.menuController; - }, - get modalController() { - if (!cache.modalController) { - cache.modalController = modalController(vueDelegate); - } - return cache.modalController; - }, - get popoverController() { - if (!cache.popoverController) { - cache.popoverController = popoverController(vueDelegate); - } - return cache.popoverController; - }, - get toastController() { - if (!cache.toastController) { - cache.toastController = toastController; - } - return cache.toastController; - }, - get pickerController() { - if (!cache.pickerController) { - cache.pickerController = pickerController; - } - return cache.pickerController; - } - }; -} +import VueImport, { PluginFunction } from 'vue'; +import { IonicConfig } from '@ionic/core'; let Vue: typeof VueImport; @@ -96,10 +15,5 @@ export const install: PluginFunction = (_Vue, config) => { } Vue = _Vue; Vue.config.ignoredElements.push(/^ion-/); - Vue.component('IonTabs', IonTabs); - Vue.component('IonPage', IonPage); - - createInputComponents(); appInitialize(config); - createApi(Vue); }; diff --git a/src/utils/createInputComponent.ts b/src/utils/createInputComponent.ts new file mode 100644 index 0000000..a1c8132 --- /dev/null +++ b/src/utils/createInputComponent.ts @@ -0,0 +1,74 @@ +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' +]; + +export function createInputComponent( + name: string, + coreTag: string, + modelEvent = 'ionChange', + valueProperty = 'value' +) { + return Vue.extend({ + 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; +} diff --git a/src/utils/createOverlayComponent.ts b/src/utils/createOverlayComponent.ts new file mode 100644 index 0000000..7b9640d --- /dev/null +++ b/src/utils/createOverlayComponent.ts @@ -0,0 +1,100 @@ +import Vue, { CreateElement, VueConstructor } from 'vue'; + +export interface OverlayElement extends HTMLElement { + present: () => Promise; + dismiss: (data?: any, role?: string | undefined) => Promise; +} + +export interface Data { + overlay: T | null; +} + +export interface Methods { + present: () => Promise; +} + +export interface Props { + isOpen: boolean; +} + +export function createOverlayComponent( + name: string, + controller: { create: (opts: any) => Promise } +): VueConstructor & Methods & Props & Vue> { + const coreTag = name.charAt(0).toLowerCase() + name.slice(1); + const eventHandlers = Object.entries({ + [`${coreTag}WillPresent`]: 'onWillPresent', + [`${coreTag}DidPresent`]: 'onDidPresent', + [`${coreTag}WillDismiss`]: 'onWillDismiss', + [`${coreTag}DidDismiss`]: 'onDidDismiss', + }); + + return Vue.extend, Methods, {}, Props>({ + name: `${name}Vue`, + data() { + return { + overlay: null, + }; + }, + props: { + isOpen: { + type: Boolean, + required: true, + }, + }, + watch: { + async isOpen(newVal: boolean) { + console.log(newVal); + if (newVal) { + if (this.overlay) { + await this.overlay.present(); + } else { + await this.present(); + } + } else { + await this.overlay?.dismiss(); + this.overlay = null; + } + } + }, + async mounted() { + console.log(this.isOpen); + this.isOpen && await this.present(); + }, + async beforeDestroy() { + console.log('bye'); + await this.overlay?.dismiss(); + }, + render(h: CreateElement) { + for (const [eventName, handler] of eventHandlers) { + console.log(eventName, handler); + if (this.$listeners[handler]) { + this.overlay?.addEventListener(eventName, (e: Event) => { + const handlers = this.$listeners[handler]; + if (Array.isArray(handlers)) { + handlers.map(f => f(e)); + return; + } + handlers(e); + }); + } + } + return h('div', [h('div', { ref: 'overlay' }, this.overlay ? this.$slots.default : null)]); + }, + methods: { + async present() { + + // const children = this.$slots.default; + this.overlay = await controller.create({ + ...this.$attrs, + component: this.$refs.overlay, + componentProps: { parent: this }, + }); + + console.log(this.overlay); + + await this.overlay.present(); + } + } + }); +} diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..af840fd --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from "./createOverlayComponent"; +export * from "./createInputComponent"; diff --git a/types/components/createOverlayComponent.d.ts b/types/components/createOverlayComponent.d.ts new file mode 100644 index 0000000..b91faa0 --- /dev/null +++ b/types/components/createOverlayComponent.d.ts @@ -0,0 +1,12 @@ +import { VueConstructor } from 'vue'; +import { OverlayController } from '@ionic/core'; +interface OverlayElement extends HTMLElement { + present: () => Promise; + dismiss: (data?: any, role?: string | undefined) => Promise; +} +interface Controller extends OverlayController { + create: (opts: any) => Promise; +} +export declare function createOverlayComponent(name: string, controller: Controller): VueConstructor; +export {}; +//# sourceMappingURL=createOverlayComponent.d.ts.map \ No newline at end of file diff --git a/types/components/index.d.ts b/types/components/index.d.ts new file mode 100644 index 0000000..80f59ad --- /dev/null +++ b/types/components/index.d.ts @@ -0,0 +1,4 @@ +export * from './overlays'; +export * from './inputs'; +export * from './navigation'; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/components/inputs.d.ts b/types/components/inputs.d.ts index cb9e62d..79358a3 100644 --- a/types/components/inputs.d.ts +++ b/types/components/inputs.d.ts @@ -1,2 +1,10 @@ -export declare function createInputComponents(): void; +export declare const IonCheckboxVue: import("vue/types/vue").ExtendedVue>; +export declare const IonDatetimeVue: import("vue/types/vue").ExtendedVue>; +export declare const IonInputVue: import("vue/types/vue").ExtendedVue>; +export declare const IonRadioVue: import("vue/types/vue").ExtendedVue>; +export declare const IonRangeVue: import("vue/types/vue").ExtendedVue>; +export declare const IonSearchbarVue: import("vue/types/vue").ExtendedVue>; +export declare const IonSelectVue: import("vue/types/vue").ExtendedVue>; +export declare const IonTextareaVue: import("vue/types/vue").ExtendedVue>; +export declare const IonToggleVue: import("vue/types/vue").ExtendedVue>; //# sourceMappingURL=inputs.d.ts.map \ No newline at end of file diff --git a/types/components/ion-modal.d.ts b/types/components/ion-modal.d.ts new file mode 100644 index 0000000..2c813e7 --- /dev/null +++ b/types/components/ion-modal.d.ts @@ -0,0 +1,2 @@ +export declare const IonModalVue: import("vue").VueConstructor; +//# sourceMappingURL=ion-modal.d.ts.map \ No newline at end of file diff --git a/types/components/navigation/index.d.ts b/types/components/navigation/index.d.ts new file mode 100644 index 0000000..3ae1c49 --- /dev/null +++ b/types/components/navigation/index.d.ts @@ -0,0 +1,3 @@ +export * from './ion-page'; +export * from './ion-tabs'; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/components/overlays.d.ts b/types/components/overlays.d.ts new file mode 100644 index 0000000..e7e601b --- /dev/null +++ b/types/components/overlays.d.ts @@ -0,0 +1,4 @@ +export declare const IonModalVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; +export declare const IonActionSheetVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; +export declare const IonPopoverVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; +//# sourceMappingURL=overlays.d.ts.map \ No newline at end of file diff --git a/types/controllers/index.d.ts b/types/controllers/index.d.ts index 97feb28..c9c7ec8 100644 --- a/types/controllers/index.d.ts +++ b/types/controllers/index.d.ts @@ -1,9 +1,5 @@ export { actionSheetController, alertController, loadingController, menuController, toastController, pickerController, } from '@ionic/core'; -export declare const modalController: { - create(options: import("@ionic/core").ModalOptions): Promise; - dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; - getTop(): Promise; -}; +export declare const modalController: import("./modal-controller").ModalController; export declare const popoverController: { create(options: import("@ionic/core").PopoverOptions): Promise; dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; diff --git a/types/controllers/modal-controller.d.ts b/types/controllers/modal-controller.d.ts index 8e3312c..5c0a43f 100644 --- a/types/controllers/modal-controller.d.ts +++ b/types/controllers/modal-controller.d.ts @@ -1,8 +1,6 @@ -import { ModalOptions } from '@ionic/core'; -import { VueDelegate } from './vue-delegate'; -export declare const modalController: (delegate?: VueDelegate | undefined) => { - create(options: ModalOptions): Promise; - dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; - getTop(): Promise; -}; +import { ModalOptions, OverlayController } from '@ionic/core'; +export interface ModalController extends OverlayController { + create(options: ModalOptions): Promise; +} +export declare const modalController: () => ModalController; //# sourceMappingURL=modal-controller.d.ts.map \ No newline at end of file diff --git a/types/controllers/popover-controller.d.ts b/types/controllers/popover-controller.d.ts index 590ee0a..91a28a8 100644 --- a/types/controllers/popover-controller.d.ts +++ b/types/controllers/popover-controller.d.ts @@ -1,6 +1,5 @@ import { PopoverOptions } from '@ionic/core'; -import { VueDelegate } from './vue-delegate'; -export declare const popoverController: (delegate?: VueDelegate | undefined) => { +export declare const popoverController: () => { create(options: PopoverOptions): Promise; dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; getTop(): Promise; diff --git a/types/controllers/vue-delegate.d.ts b/types/controllers/vue-delegate.d.ts index da34078..aba7af3 100644 --- a/types/controllers/vue-delegate.d.ts +++ b/types/controllers/vue-delegate.d.ts @@ -2,8 +2,6 @@ import { VueConstructor } from 'vue'; import { FrameworkDelegate } from '@ionic/core'; import { HTMLVueElement, WebpackFunction } from '../interfaces'; export declare class VueDelegate implements FrameworkDelegate { - vue: VueConstructor; - constructor(vue: VueConstructor); attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | VueConstructor, opts?: object, classes?: string[]): Promise; removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLVueElement): Promise; } diff --git a/types/index.d.ts b/types/index.d.ts index 765085a..975e4c2 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -6,5 +6,5 @@ declare const _default: { export default _default; export { default as IonicVueRouter } from './router'; export * from './controllers'; -export * from './components/inputs'; +export * from './components'; //# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/utils/createInputComponent.d.ts b/types/utils/createInputComponent.d.ts new file mode 100644 index 0000000..cc306f4 --- /dev/null +++ b/types/utils/createInputComponent.d.ts @@ -0,0 +1,3 @@ +import Vue from 'vue'; +export declare function createInputComponent(name: string, coreTag: string, modelEvent?: string, valueProperty?: string): import("vue/types/vue").ExtendedVue>; +//# sourceMappingURL=createInputComponent.d.ts.map \ No newline at end of file diff --git a/types/utils/createOverlayComponent.d.ts b/types/utils/createOverlayComponent.d.ts new file mode 100644 index 0000000..93e072d --- /dev/null +++ b/types/utils/createOverlayComponent.d.ts @@ -0,0 +1,18 @@ +import Vue, { VueConstructor } from 'vue'; +export interface OverlayElement extends HTMLElement { + present: () => Promise; + dismiss: (data?: any, role?: string | undefined) => Promise; +} +export interface Data { + overlay: T | null; +} +export interface Methods { + present: () => Promise; +} +export interface Props { + isOpen: boolean; +} +export declare function createOverlayComponent(name: string, controller: { + create: (opts: any) => Promise; +}): VueConstructor & Methods & Props & Vue>; +//# sourceMappingURL=createOverlayComponent.d.ts.map \ No newline at end of file diff --git a/types/utils/index.d.ts b/types/utils/index.d.ts new file mode 100644 index 0000000..ca4d30b --- /dev/null +++ b/types/utils/index.d.ts @@ -0,0 +1,3 @@ +export * from "./createOverlayComponent"; +export * from "./createInputComponent"; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file From 7282c3fa81caf2b0f00dba93edf44f2741481c39 Mon Sep 17 00:00:00 2001 From: Grgur Grisogono Date: Fri, 24 Apr 2020 12:37:33 +0200 Subject: [PATCH 05/18] Update README.md --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index e580a17..56d896f 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,3 @@ -# Ionic-Vue becomes @ionic/vue -**Important: This project has been contributed to the Ionic core and can be used as [@ionic/vue](https://github.com/ionic-team/ionic/tree/master/vue).** - -Modus Create engineers will continue to support the community at the Ionic's official [Issue board](https://github.com/ionic-team/ionic/issues) - -However, this repository is still being actively maintained and kept in-sync with the official @ionic/vue. The main difference being the availability of pending upstream pull requests and flexibility of choosing dependency versions. - -Our goal is to allow developers to be on the bleeding-edge and freely experiment, thus we are delivering features and bug fixes as fast as possible. - -Bug fixes, features, documentation and any other changes are always contributed back to upstream @ionic/vue. - ---- ---- # Ionic-Vue @@ -26,6 +13,16 @@ Ionic integration adapters for Vue. @modus/ionic-vue

+## `Ionic-Vue` vs `@ionic/vue` +`Ionic-Vue` codebase has been contributed to the Ionic core and as [@ionic/vue](https://github.com/ionic-team/ionic/tree/master/vue). However, `@ionic/vue` provides limited support to Ionic v4. + +The amazing Ionic team is always looking to bring the most modern of browser capabilities to their framework. The official Vue support will land after Vue 3 has stabilized. + +Modus Create engineers continue to maintain this library to support the community that wants to create beautiful mobile apps with Vue and Ionic. + +Our goal is to allow developers to be up to date with the latest advances of Ionic and Vue. Thus we are delivering features and bug fixes as fast as possible. + + ## Roadmap Overview: all of the controllers and major features such as transitions and router have been implemented and tested for several months now. @@ -47,6 +44,9 @@ Apart from minor improvements and further testing of various mixes of Ionic comp ## Ionic versions 4 and 5 :warning: Moving forward all versions of `ionic-vue` will be supporting Ionic 5 only, if you'd like to continue using Ionic 4 please use `ionic-vue` version `1.3.4` +## Vue 3 +:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc. + ## Installing / Getting started A quick introduction of the minimal setup you need to get a hello world up and running. From aaf49ee291dcbc7e3950f562c32010268e830dd2 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 5 May 2020 02:45:34 +0300 Subject: [PATCH 06/18] [release] 1.3.7 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3dea324..b5b0fd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.6", + "version": "1.3.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index db5bfab..17cc23f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.6", + "version": "1.3.7", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", From 5c8ca282cea87a956af4d814df31ce9877b5d524 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Sun, 10 May 2020 19:42:59 +0300 Subject: [PATCH 07/18] [build] 1.3.8 --- .prettierrc | 5 +++++ README.md | 3 ++- build/release.sh | 12 +++++------ package-lock.json | 2 +- package.json | 7 +++---- src/components/ion-vue-router.ts | 35 +++++++++++++++---------------- src/interfaces.ts | 20 +++++++++++++++--- src/router.ts | 36 ++++++++++++++++++++++++++++---- src/utils/index.ts | 4 ++-- types/interfaces.d.ts | 2 ++ types/router.d.ts | 8 +++++++ types/utils/index.d.ts | 4 ++-- 12 files changed, 97 insertions(+), 41 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..2c2c282 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "printWidth": 80 +} diff --git a/README.md b/README.md index 56d896f..02811a4 100644 --- a/README.md +++ b/README.md @@ -39,13 +39,14 @@ Apart from minor improvements and further testing of various mixes of Ionic comp | Router keep-alive | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/18561) | - | | Functional Inputs | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/19087) | - | | Import controllers directly | :heavy_check_mark: | [Pending](https://github.com/ionic-team/ionic/pull/19573) | Improve treeshaking and sync with react and angular implementations | +| Restore scroll on navigation | :heavy_check_mark: | - | When going back through history restore the scroll position | | Unit tests | :x: | :x: | Outdated as were originally written in plain JS, need to be updated for TS | ## Ionic versions 4 and 5 :warning: Moving forward all versions of `ionic-vue` will be supporting Ionic 5 only, if you'd like to continue using Ionic 4 please use `ionic-vue` version `1.3.4` ## Vue 3 -:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc. +:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc. ## Installing / Getting started diff --git a/build/release.sh b/build/release.sh index aff0482..da46e53 100755 --- a/build/release.sh +++ b/build/release.sh @@ -5,20 +5,20 @@ echo "Enter release version: " read VERSION read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r -echo # (optional) move to a new line +echo # move to new line + if [[ $REPLY =~ ^[Yy]$ ]] then - npm run lint.fix echo "Releasing $VERSION ..." VERSION=$VERSION npm run prod # commit + npm version $VERSION --no-git-tag-version git add -A - git commit --allow-empty -m "[build] $VERSION" - npm version $VERSION --message "[release] $VERSION" + git commit -m "[build] $VERSION" + git tag v$VERSION # publish - git push origin refs/tags/v$VERSION - git push + git push --tags npm publish fi diff --git a/package-lock.json b/package-lock.json index b5b0fd9..26c52d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.7", + "version": "1.3.8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 17cc23f..69e2259 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.7", + "version": "1.3.8", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", @@ -49,9 +49,8 @@ "scripts": { "dev": "rollup -c ./build/rollup.config.js", "watch": "rollup -w -c ./build/rollup.config.js", - "prod": "npm run clean && NODE_ENV=production rollup -c ./build/rollup.config.js --configProd", - "lint": "tslint --project .", - "lint.fix": "tslint --project . --fix", + "prod": "npm run lint && npm run clean && NODE_ENV=production rollup -c ./build/rollup.config.js --configProd", + "lint": "tslint --project . --fix", "test": "jest --coverage --verbose", "install.peer": "npm i --no-save vue vue-template-compiler vue-router @ionic/core", "clean": "node ./scripts/clean.js" diff --git a/src/components/ion-vue-router.ts b/src/components/ion-vue-router.ts index e139f20..d1a589d 100644 --- a/src/components/ion-vue-router.ts +++ b/src/components/ion-vue-router.ts @@ -50,8 +50,10 @@ export default { leave: (el: HTMLElement, done: TransitionDone) => { leave(parent, props as Props, el, done); }, + enter: (el: HTMLElement, done: TransitionDone) => { + enter(parent, el, done); + }, beforeEnter, - enter, afterEnter, beforeLeave, afterLeave, @@ -107,28 +109,19 @@ function catchIonicGoBack(parent: Vue, event: Event): void { } // Transition when we leave the route -function leave( +async function leave( parent: Vue, props: Props, el: HTMLElement, done: TransitionDone ) { - const promise = transition(parent, props, el); - - // Skip any transition if we don't get back a Promise - if (!promise) { - done(); - return; - } + await parent.$router.saveScroll(el); // Perform navigation once the transition was finished - parent.$router.transition = new Promise(resolve => { - promise - .then(() => { - resolve(); - done(); - }) - .catch(console.error); + parent.$router.transition = new Promise(async resolve => { + await transition(parent, props, el); + done(); + resolve(); }); } @@ -180,8 +173,14 @@ function beforeEnter(el: HTMLElement) { } // Enter the new route -function enter(_el: HTMLElement, done: TransitionDone) { - done(); +function enter(parent: Vue, el: HTMLElement, done: TransitionDone) { + if (parent.$router.direction === 'back') { + parent.$router + .restoreScroll(el, parent.$router.currentRoute.fullPath) + .then(done); + } else { + done(); + } } // Vue transition stub functions diff --git a/src/interfaces.ts b/src/interfaces.ts index cbd3d42..dd9a6b2 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -8,6 +8,8 @@ declare module 'vue-router/types/router' { direction: RouterDirection; directionOverride: RouterDirection | null; transition: Promise; + saveScroll(el: HTMLElement): Promise; + restoreScroll(el: HTMLElement, key: string): Promise; canGoBack(): boolean; } } @@ -42,8 +44,16 @@ export interface IonicWindow extends Window { } export interface FrameworkDelegate { - attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | Vue, opts?: object, classes?: string[]): Promise; - removeViewFromDom(parentElement: HTMLElement, childElement: HTMLVueElement): Promise; + attachViewToDom( + parentElement: HTMLElement, + component: HTMLElement | WebpackFunction | object | Vue, + opts?: object, + classes?: string[] + ): Promise; + removeViewFromDom( + parentElement: HTMLElement, + childElement: HTMLVueElement + ): Promise; } export interface IonBackButton extends HTMLStencilElement { @@ -51,7 +61,11 @@ export interface IonBackButton extends HTMLStencilElement { } export interface IonRouterOutlet extends HTMLStencilElement { - commit(enterinEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: object | undefined): Promise; + commit( + enterinEl: HTMLElement, + leavingEl: HTMLElement | undefined, + opts?: object | undefined + ): Promise; } export interface ApiCache { diff --git a/src/router.ts b/src/router.ts index 588b831..7f53fec 100644 --- a/src/router.ts +++ b/src/router.ts @@ -10,13 +10,18 @@ export default class Router extends VueRouter { directionOverride: RouterDirection | null; viewCount: number; prevRouteStack: Route[]; + cachedPrevRoute: Route; history: any; + scroll: Map; static installed: boolean; static install: PluginFunction; constructor(args: RouterArgs = {} as RouterArgs) { super(args); + // Set default scroll stack + this.scroll = new Map(); + // The direction user navigates in this.direction = args.direction || 'forward'; @@ -41,6 +46,10 @@ export default class Router extends VueRouter { }); } + get prevRoute(): Route | undefined { + return this.prevRouteStack[this.prevRouteStack.length - 1]; + } + extendTransitionConfirmation() { this.history._confirmTransition = this.history.confirmTransition; this.history.confirmTransition = async (...opts: any) => { @@ -82,13 +91,13 @@ export default class Router extends VueRouter { } guessDirection(nextRoute: Route): RouterDirection { - if (this.prevRouteStack.length !== 0) { - const prevRoute: Route = this.prevRouteStack[this.prevRouteStack.length - 1]; + this.cachedPrevRoute = this.history.current; + if (this.prevRoute) { // Last route is the same as the next one - go back // If we're going to / reset the stack otherwise pop a route - if (prevRoute.fullPath === nextRoute.fullPath) { - if (prevRoute.fullPath.length === 1) { + if (this.prevRoute.fullPath === nextRoute.fullPath) { + if (this.prevRoute.fullPath.length === 1) { this.prevRouteStack = []; } else { this.prevRouteStack.pop(); @@ -101,8 +110,27 @@ export default class Router extends VueRouter { if (this.history.current.fullPath !== nextRoute.fullPath) { this.prevRouteStack.push(this.history.current); } + return 'forward'; } + + async saveScroll(el: HTMLElement): Promise { + const ionContent = el.querySelector('ion-content'); + const scrollElement = ionContent && (await ionContent.getScrollElement()); + + if (scrollElement) { + this.scroll.set(this.cachedPrevRoute.fullPath, { + top: scrollElement?.scrollTop || 0, + left: scrollElement?.scrollLeft || 0, + }); + } + } + + async restoreScroll(el: HTMLElement, key: string): Promise { + const ionContent = el.querySelector('ion-content'); + const scrollElement = ionContent && (await ionContent.getScrollElement()); + scrollElement?.scrollTo(this.scroll.get(key) || { top: 0, left: 0 }); + } } Router.install = (Vue) => { diff --git a/src/utils/index.ts b/src/utils/index.ts index af840fd..4fa8db2 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1,2 @@ -export * from "./createOverlayComponent"; -export * from "./createInputComponent"; +export * from './createOverlayComponent'; +export * from './createInputComponent'; diff --git a/types/interfaces.d.ts b/types/interfaces.d.ts index 24ae769..e6a8eed 100644 --- a/types/interfaces.d.ts +++ b/types/interfaces.d.ts @@ -7,6 +7,8 @@ declare module 'vue-router/types/router' { direction: RouterDirection; directionOverride: RouterDirection | null; transition: Promise; + saveScroll(el: HTMLElement): Promise; + restoreScroll(el: HTMLElement, key: string): Promise; canGoBack(): boolean; } } diff --git a/types/router.d.ts b/types/router.d.ts index 66330a2..dfc1542 100644 --- a/types/router.d.ts +++ b/types/router.d.ts @@ -7,13 +7,21 @@ export default class Router extends VueRouter { directionOverride: RouterDirection | null; viewCount: number; prevRouteStack: Route[]; + cachedPrevRoute: Route; history: any; + scroll: Map; static installed: boolean; static install: PluginFunction; constructor(args?: RouterArgs); + get prevRoute(): Route | undefined; extendTransitionConfirmation(): void; extendHistory(): void; canGoBack(): boolean; guessDirection(nextRoute: Route): RouterDirection; + saveScroll(el: HTMLElement): Promise; + restoreScroll(el: HTMLElement, key: string): Promise; } //# sourceMappingURL=router.d.ts.map \ No newline at end of file diff --git a/types/utils/index.d.ts b/types/utils/index.d.ts index ca4d30b..91bf847 100644 --- a/types/utils/index.d.ts +++ b/types/utils/index.d.ts @@ -1,3 +1,3 @@ -export * from "./createOverlayComponent"; -export * from "./createInputComponent"; +export * from './createOverlayComponent'; +export * from './createInputComponent'; //# sourceMappingURL=index.d.ts.map \ No newline at end of file From c935ad5842d0b62c9e11a8dcb184fdcd9e2f75b9 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Sun, 10 May 2020 19:45:01 +0300 Subject: [PATCH 08/18] Push commits too --- build/release.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/build/release.sh b/build/release.sh index da46e53..3fa2b89 100755 --- a/build/release.sh +++ b/build/release.sh @@ -19,6 +19,7 @@ then git tag v$VERSION # publish + git push git push --tags npm publish fi From f11735903fb523d9a301dfb68751c34fbda93c1f Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 16 Jun 2020 16:25:08 +0300 Subject: [PATCH 09/18] Remove types --- .gitignore | 2 +- types/app-initialize.d.ts | 3 - types/components/createOverlayComponent.d.ts | 12 ---- types/components/index.d.ts | 4 -- types/components/inputs.d.ts | 10 --- types/components/ion-modal.d.ts | 2 - types/components/ion-vue-router.d.ts | 26 ------- types/components/navigation/index.d.ts | 3 - types/components/navigation/ion-page.d.ts | 8 --- types/components/navigation/ion-tabs.d.ts | 8 --- types/components/overlays.d.ts | 4 -- types/controllers/index.d.ts | 8 --- types/controllers/modal-controller.d.ts | 6 -- types/controllers/popover-controller.d.ts | 7 -- types/controllers/vue-delegate.d.ts | 9 --- types/index.d.ts | 10 --- types/interfaces.d.ts | 76 -------------------- types/ionic.d.ts | 4 -- types/router.d.ts | 27 ------- types/utils/createInputComponent.d.ts | 3 - types/utils/createOverlayComponent.d.ts | 18 ----- types/utils/index.d.ts | 3 - 22 files changed, 1 insertion(+), 252 deletions(-) delete mode 100644 types/app-initialize.d.ts delete mode 100644 types/components/createOverlayComponent.d.ts delete mode 100644 types/components/index.d.ts delete mode 100644 types/components/inputs.d.ts delete mode 100644 types/components/ion-modal.d.ts delete mode 100644 types/components/ion-vue-router.d.ts delete mode 100644 types/components/navigation/index.d.ts delete mode 100644 types/components/navigation/ion-page.d.ts delete mode 100644 types/components/navigation/ion-tabs.d.ts delete mode 100644 types/components/overlays.d.ts delete mode 100644 types/controllers/index.d.ts delete mode 100644 types/controllers/modal-controller.d.ts delete mode 100644 types/controllers/popover-controller.d.ts delete mode 100644 types/controllers/vue-delegate.d.ts delete mode 100644 types/index.d.ts delete mode 100644 types/interfaces.d.ts delete mode 100644 types/ionic.d.ts delete mode 100644 types/router.d.ts delete mode 100644 types/utils/createInputComponent.d.ts delete mode 100644 types/utils/createOverlayComponent.d.ts delete mode 100644 types/utils/index.d.ts diff --git a/.gitignore b/.gitignore index da38761..17dd3b5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,11 +2,11 @@ ~* dist/ +types/ node_modules/ coverage/ reports/ src/**/*.js -types/**/*.map # ignore log files *.log diff --git a/types/app-initialize.d.ts b/types/app-initialize.d.ts deleted file mode 100644 index e13c240..0000000 --- a/types/app-initialize.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { IonicConfig } from '@ionic/core'; -export declare function appInitialize(config?: IonicConfig): Promise; -//# sourceMappingURL=app-initialize.d.ts.map \ No newline at end of file diff --git a/types/components/createOverlayComponent.d.ts b/types/components/createOverlayComponent.d.ts deleted file mode 100644 index b91faa0..0000000 --- a/types/components/createOverlayComponent.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { VueConstructor } from 'vue'; -import { OverlayController } from '@ionic/core'; -interface OverlayElement extends HTMLElement { - present: () => Promise; - dismiss: (data?: any, role?: string | undefined) => Promise; -} -interface Controller extends OverlayController { - create: (opts: any) => Promise; -} -export declare function createOverlayComponent(name: string, controller: Controller): VueConstructor; -export {}; -//# sourceMappingURL=createOverlayComponent.d.ts.map \ No newline at end of file diff --git a/types/components/index.d.ts b/types/components/index.d.ts deleted file mode 100644 index 80f59ad..0000000 --- a/types/components/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './overlays'; -export * from './inputs'; -export * from './navigation'; -//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/components/inputs.d.ts b/types/components/inputs.d.ts deleted file mode 100644 index 79358a3..0000000 --- a/types/components/inputs.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export declare const IonCheckboxVue: import("vue/types/vue").ExtendedVue>; -export declare const IonDatetimeVue: import("vue/types/vue").ExtendedVue>; -export declare const IonInputVue: import("vue/types/vue").ExtendedVue>; -export declare const IonRadioVue: import("vue/types/vue").ExtendedVue>; -export declare const IonRangeVue: import("vue/types/vue").ExtendedVue>; -export declare const IonSearchbarVue: import("vue/types/vue").ExtendedVue>; -export declare const IonSelectVue: import("vue/types/vue").ExtendedVue>; -export declare const IonTextareaVue: import("vue/types/vue").ExtendedVue>; -export declare const IonToggleVue: import("vue/types/vue").ExtendedVue>; -//# sourceMappingURL=inputs.d.ts.map \ No newline at end of file diff --git a/types/components/ion-modal.d.ts b/types/components/ion-modal.d.ts deleted file mode 100644 index 2c813e7..0000000 --- a/types/components/ion-modal.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export declare const IonModalVue: import("vue").VueConstructor; -//# sourceMappingURL=ion-modal.d.ts.map \ No newline at end of file diff --git a/types/components/ion-vue-router.d.ts b/types/components/ion-vue-router.d.ts deleted file mode 100644 index 37cdec2..0000000 --- a/types/components/ion-vue-router.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CreateElement, RenderContext, VNode } from 'vue'; -interface KeepAliveProps { - include?: string | string[] | RegExp; - exclude?: string | string[] | RegExp; - max?: number; -} -declare const _default: { - name: string; - functional: boolean; - props: { - name: { - default: string; - type: StringConstructor; - }; - animated: { - default: boolean; - type: BooleanConstructor; - }; - keepAlive: { - type: (StringConstructor | (() => KeepAliveProps))[]; - }; - }; - render(h: CreateElement, { parent, props, data, children }: RenderContext>): VNode; -}; -export default _default; -//# sourceMappingURL=ion-vue-router.d.ts.map \ No newline at end of file diff --git a/types/components/navigation/index.d.ts b/types/components/navigation/index.d.ts deleted file mode 100644 index 3ae1c49..0000000 --- a/types/components/navigation/index.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ion-page'; -export * from './ion-tabs'; -//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/components/navigation/ion-page.d.ts b/types/components/navigation/ion-page.d.ts deleted file mode 100644 index 3afb446..0000000 --- a/types/components/navigation/ion-page.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { CreateElement, RenderContext } from 'vue'; -declare const _default: { - name: string; - functional: boolean; - render(h: CreateElement, { children }: RenderContext>): import("vue").VNode; -}; -export default _default; -//# sourceMappingURL=ion-page.d.ts.map \ No newline at end of file diff --git a/types/components/navigation/ion-tabs.d.ts b/types/components/navigation/ion-tabs.d.ts deleted file mode 100644 index e99dec9..0000000 --- a/types/components/navigation/ion-tabs.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { CreateElement, RenderContext, VNode } from 'vue'; -declare const _default: { - name: string; - functional: boolean; - render(h: CreateElement, { parent, data, slots, listeners }: RenderContext>): VNode; -}; -export default _default; -//# sourceMappingURL=ion-tabs.d.ts.map \ No newline at end of file diff --git a/types/components/overlays.d.ts b/types/components/overlays.d.ts deleted file mode 100644 index e7e601b..0000000 --- a/types/components/overlays.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export declare const IonModalVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; -export declare const IonActionSheetVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; -export declare const IonPopoverVue: import("vue").VueConstructor & import("../utils").Methods & import("../utils").Props & import("vue").default>; -//# sourceMappingURL=overlays.d.ts.map \ No newline at end of file diff --git a/types/controllers/index.d.ts b/types/controllers/index.d.ts deleted file mode 100644 index c9c7ec8..0000000 --- a/types/controllers/index.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { actionSheetController, alertController, loadingController, menuController, toastController, pickerController, } from '@ionic/core'; -export declare const modalController: import("./modal-controller").ModalController; -export declare const popoverController: { - create(options: import("@ionic/core").PopoverOptions): Promise; - dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; - getTop(): Promise; -}; -//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/controllers/modal-controller.d.ts b/types/controllers/modal-controller.d.ts deleted file mode 100644 index 5c0a43f..0000000 --- a/types/controllers/modal-controller.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ModalOptions, OverlayController } from '@ionic/core'; -export interface ModalController extends OverlayController { - create(options: ModalOptions): Promise; -} -export declare const modalController: () => ModalController; -//# sourceMappingURL=modal-controller.d.ts.map \ No newline at end of file diff --git a/types/controllers/popover-controller.d.ts b/types/controllers/popover-controller.d.ts deleted file mode 100644 index 91a28a8..0000000 --- a/types/controllers/popover-controller.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { PopoverOptions } from '@ionic/core'; -export declare const popoverController: () => { - create(options: PopoverOptions): Promise; - dismiss(data?: any, role?: string | undefined, id?: string | undefined): Promise; - getTop(): Promise; -}; -//# sourceMappingURL=popover-controller.d.ts.map \ No newline at end of file diff --git a/types/controllers/vue-delegate.d.ts b/types/controllers/vue-delegate.d.ts deleted file mode 100644 index aba7af3..0000000 --- a/types/controllers/vue-delegate.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { VueConstructor } from 'vue'; -import { FrameworkDelegate } from '@ionic/core'; -import { HTMLVueElement, WebpackFunction } from '../interfaces'; -export declare class VueDelegate implements FrameworkDelegate { - attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | VueConstructor, opts?: object, classes?: string[]): Promise; - removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLVueElement): Promise; -} -export declare function bindLifecycleEvents(instance: any, element: HTMLElement): void; -//# sourceMappingURL=vue-delegate.d.ts.map \ No newline at end of file diff --git a/types/index.d.ts b/types/index.d.ts deleted file mode 100644 index 975e4c2..0000000 --- a/types/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { createAnimation, createGesture, AlertButton, AlertInput, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, setupConfig } from '@ionic/core'; -declare const _default: { - install: import("vue").PluginFunction; - version: string; -}; -export default _default; -export { default as IonicVueRouter } from './router'; -export * from './controllers'; -export * from './components'; -//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/types/interfaces.d.ts b/types/interfaces.d.ts deleted file mode 100644 index e6a8eed..0000000 --- a/types/interfaces.d.ts +++ /dev/null @@ -1,76 +0,0 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import { HTMLStencilElement, IonicConfig, RouterDirection } from '@ionic/core'; -import { RouterOptions } from 'vue-router/types/router'; -declare module 'vue-router/types/router' { - interface VueRouter { - direction: RouterDirection; - directionOverride: RouterDirection | null; - transition: Promise; - saveScroll(el: HTMLElement): Promise; - restoreScroll(el: HTMLElement, key: string): Promise; - canGoBack(): boolean; - } -} -export interface HTMLVueElement extends HTMLElement { - __vue__: Vue; -} -export interface VueWindow extends Window { - Vue: typeof Vue; - VueRouter: typeof VueRouter; - disableIonicTransitions: boolean; -} -export interface WebpackFunction extends Function { - cid: number; -} -export interface EsModule extends Object { - __esModule?: boolean; - [Symbol.toStringTag]: string; -} -export interface IonicGlobal { - config?: IonicConfig; - asyncQueue?: boolean; -} -export interface IonicWindow extends Window { - Ionic: IonicGlobal; - __zone_symbol__requestAnimationFrame?: (ts: FrameRequestCallback) => number; -} -export interface FrameworkDelegate { - attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | Vue, opts?: object, classes?: string[]): Promise; - removeViewFromDom(parentElement: HTMLElement, childElement: HTMLVueElement): Promise; -} -export interface IonBackButton extends HTMLStencilElement { - defaultHref?: string; -} -export interface IonRouterOutlet extends HTMLStencilElement { - commit(enterinEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: object | undefined): Promise; -} -export interface ApiCache { - [key: string]: any; -} -export interface RouterArgs extends RouterOptions { - direction?: RouterDirection; - viewCount?: number; -} -export interface ProxyControllerInterface { - create(opts: object): Promise; - dismiss(): Promise; - getTop(): Promise; -} -export interface ProxyDelegateOptions extends Object { - [key: string]: any; - delegate?: FrameworkDelegate; -} -export interface ProxyMenuControllerInterface { - open(menuId?: string): Promise; - close(menuId?: string): Promise; - toggle(menuId?: string): Promise; - enable(shouldEnable: boolean, menuId?: string): Promise; - swipeEnable(shouldEnable: boolean, menuId?: string): Promise; - isOpen(menuId?: string): Promise; - isEnabled(menuId?: string): Promise; - get(menuId?: string): Promise; - getOpen(): Promise; - getMenus(): Promise; -} -//# sourceMappingURL=interfaces.d.ts.map \ No newline at end of file diff --git a/types/ionic.d.ts b/types/ionic.d.ts deleted file mode 100644 index 8ce9959..0000000 --- a/types/ionic.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { PluginFunction } from 'vue'; -import { IonicConfig } from '@ionic/core'; -export declare const install: PluginFunction; -//# sourceMappingURL=ionic.d.ts.map \ No newline at end of file diff --git a/types/router.d.ts b/types/router.d.ts deleted file mode 100644 index dfc1542..0000000 --- a/types/router.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import VueRouter, { Route } from 'vue-router'; -import { PluginFunction } from 'vue'; -import { RouterArgs } from './interfaces'; -import { RouterDirection } from '@ionic/core'; -export default class Router extends VueRouter { - direction: RouterDirection; - directionOverride: RouterDirection | null; - viewCount: number; - prevRouteStack: Route[]; - cachedPrevRoute: Route; - history: any; - scroll: Map; - static installed: boolean; - static install: PluginFunction; - constructor(args?: RouterArgs); - get prevRoute(): Route | undefined; - extendTransitionConfirmation(): void; - extendHistory(): void; - canGoBack(): boolean; - guessDirection(nextRoute: Route): RouterDirection; - saveScroll(el: HTMLElement): Promise; - restoreScroll(el: HTMLElement, key: string): Promise; -} -//# sourceMappingURL=router.d.ts.map \ No newline at end of file diff --git a/types/utils/createInputComponent.d.ts b/types/utils/createInputComponent.d.ts deleted file mode 100644 index cc306f4..0000000 --- a/types/utils/createInputComponent.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Vue from 'vue'; -export declare function createInputComponent(name: string, coreTag: string, modelEvent?: string, valueProperty?: string): import("vue/types/vue").ExtendedVue>; -//# sourceMappingURL=createInputComponent.d.ts.map \ No newline at end of file diff --git a/types/utils/createOverlayComponent.d.ts b/types/utils/createOverlayComponent.d.ts deleted file mode 100644 index 93e072d..0000000 --- a/types/utils/createOverlayComponent.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import Vue, { VueConstructor } from 'vue'; -export interface OverlayElement extends HTMLElement { - present: () => Promise; - dismiss: (data?: any, role?: string | undefined) => Promise; -} -export interface Data { - overlay: T | null; -} -export interface Methods { - present: () => Promise; -} -export interface Props { - isOpen: boolean; -} -export declare function createOverlayComponent(name: string, controller: { - create: (opts: any) => Promise; -}): VueConstructor & Methods & Props & Vue>; -//# sourceMappingURL=createOverlayComponent.d.ts.map \ No newline at end of file diff --git a/types/utils/index.d.ts b/types/utils/index.d.ts deleted file mode 100644 index 91bf847..0000000 --- a/types/utils/index.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './createOverlayComponent'; -export * from './createInputComponent'; -//# sourceMappingURL=index.d.ts.map \ No newline at end of file From 4b696c656d6dfd6057be108676ebafa62cfe10c3 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 16 Jun 2020 16:25:55 +0300 Subject: [PATCH 10/18] Fixes #129 Ionic config setup --- src/app-initialize.ts | 13 ------------- src/interfaces.ts | 5 ----- src/ionic.ts | 11 +++++++---- 3 files changed, 7 insertions(+), 22 deletions(-) delete mode 100644 src/app-initialize.ts diff --git a/src/app-initialize.ts b/src/app-initialize.ts deleted file mode 100644 index d6b7dbb..0000000 --- a/src/app-initialize.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { IonicConfig } from '@ionic/core'; -import { applyPolyfills, defineCustomElements } from '@ionic/core/loader'; -import { IonicWindow } from './interfaces'; - -export async function appInitialize(config?: IonicConfig) { - const win: IonicWindow = window as any; - const Ionic = win?.Ionic || {}; - - Ionic.config = config; - - await applyPolyfills(); - defineCustomElements(win); -} diff --git a/src/interfaces.ts b/src/interfaces.ts index dd9a6b2..8c97cd6 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -38,11 +38,6 @@ export interface IonicGlobal { asyncQueue?: boolean; } -export interface IonicWindow extends Window { - Ionic: IonicGlobal; - __zone_symbol__requestAnimationFrame?: (ts: FrameRequestCallback) => number; -} - export interface FrameworkDelegate { attachViewToDom( parentElement: HTMLElement, diff --git a/src/ionic.ts b/src/ionic.ts index 8365d42..0433ee7 100644 --- a/src/ionic.ts +++ b/src/ionic.ts @@ -1,10 +1,10 @@ -import { appInitialize } from './app-initialize'; import VueImport, { PluginFunction } from 'vue'; -import { IonicConfig } from '@ionic/core'; +import { IonicConfig, setupConfig } from '@ionic/core'; +import { applyPolyfills, defineCustomElements } from '@ionic/core/loader'; let Vue: typeof VueImport; -export const install: PluginFunction = (_Vue, config) => { +export const install: PluginFunction = async (_Vue, config) => { if (Vue && _Vue === Vue) { if (process.env.NODE_ENV !== 'production') { console.error( @@ -15,5 +15,8 @@ export const install: PluginFunction = (_Vue, config) => { } Vue = _Vue; Vue.config.ignoredElements.push(/^ion-/); - appInitialize(config); + + config && setupConfig(config); + await applyPolyfills(); + defineCustomElements(window); }; From 87d74161aedb5243593189b4f5edb28878d9c546 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 16 Jun 2020 16:26:40 +0300 Subject: [PATCH 11/18] [build] 1.3.9 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26c52d0..2378286 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.8", + "version": "1.3.9", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 69e2259..66e591e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.8", + "version": "1.3.9", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", From f5e4e18e8f857861aa8c47dfbf23e7b9b49afcda Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 7 Jul 2020 20:49:20 +0300 Subject: [PATCH 12/18] Fixes #132 --- src/router.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/router.ts b/src/router.ts index 7f53fec..f2d7538 100644 --- a/src/router.ts +++ b/src/router.ts @@ -128,7 +128,7 @@ export default class Router extends VueRouter { async restoreScroll(el: HTMLElement, key: string): Promise { const ionContent = el.querySelector('ion-content'); - const scrollElement = ionContent && (await ionContent.getScrollElement()); + const scrollElement = ionContent && (await ionContent.getScrollElement()) || undefined; scrollElement?.scrollTo(this.scroll.get(key) || { top: 0, left: 0 }); } } From bdca2d15dce6fc4d26ecd67491536105b3f90f13 Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Tue, 7 Jul 2020 20:49:45 +0300 Subject: [PATCH 13/18] [build] 1.3.10 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2378286..ef34959 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.9", + "version": "1.3.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 66e591e..009a900 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.9", + "version": "1.3.10", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", From 2487586da5faf060ca23557d626303a875600d80 Mon Sep 17 00:00:00 2001 From: Grgur Grisogono Date: Fri, 10 Jul 2020 13:13:07 +0200 Subject: [PATCH 14/18] Link to ionic-vue 3 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 02811a4..6ce8bde 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Apart from minor improvements and further testing of various mixes of Ionic comp :warning: Moving forward all versions of `ionic-vue` will be supporting Ionic 5 only, if you'd like to continue using Ionic 4 please use `ionic-vue` version `1.3.4` ## Vue 3 -:construction: We are actively developing the next major version of this library. It will support Vue 3 and all of the new APIs like Composition, new transition features, etc. +:construction: We are actively developing the next major version of this library. It supports Vue 3 and all of the new APIs like Composition, new transition features, etc. You can [track the progress in the dev branch](https://github.com/ModusCreateOrg/ionic-vue/tree/dev). ## Installing / Getting started From 514ab2654549278013ecf252d20d5a221e8760eb Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Mon, 10 Aug 2020 19:30:08 +0300 Subject: [PATCH 15/18] [build] 1.3.11 --- package-lock.json | 2 +- package.json | 2 +- src/components/navigation/index.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index ef34959..99c855e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.10", + "version": "1.3.11", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 009a900..1bb6eca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.10", + "version": "1.3.11", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts index b2c620e..61f0362 100644 --- a/src/components/navigation/index.ts +++ b/src/components/navigation/index.ts @@ -1,2 +1,2 @@ -export * from './ion-page'; -export * from './ion-tabs'; +export * as IonPage from './ion-page'; +export * as IonTabs from './ion-tabs'; From a63b13d2bd248614b1dfbd3eb394f9884738fb7b Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Wed, 12 Aug 2020 18:44:24 +0300 Subject: [PATCH 16/18] Fixes #137 --- src/components/ion-vue-router.ts | 2 +- src/components/navigation/index.ts | 4 ++-- src/components/navigation/ion-page.ts | 4 ++-- src/components/navigation/ion-tabs.ts | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/ion-vue-router.ts b/src/components/ion-vue-router.ts index d1a589d..b3e85fe 100644 --- a/src/components/ion-vue-router.ts +++ b/src/components/ion-vue-router.ts @@ -34,7 +34,7 @@ export default { render(h: CreateElement, { parent, props, data, children }: RenderContext) { if (!parent.$router) { throw new Error( - 'IonTabs requires an instance of either VueRouter or IonicVueRouter' + 'IonVueRouter requires an instance of either VueRouter or IonicVueRouter' ); } diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts index 61f0362..b2c620e 100644 --- a/src/components/navigation/index.ts +++ b/src/components/navigation/index.ts @@ -1,2 +1,2 @@ -export * as IonPage from './ion-page'; -export * as IonTabs from './ion-tabs'; +export * from './ion-page'; +export * from './ion-tabs'; diff --git a/src/components/navigation/ion-page.ts b/src/components/navigation/ion-page.ts index 6230e7a..39d0e79 100644 --- a/src/components/navigation/ion-page.ts +++ b/src/components/navigation/ion-page.ts @@ -1,7 +1,7 @@ import { CreateElement, RenderContext } from 'vue'; -export default { - name: 'IonPage', +export const IonPageVue = { + name: 'IonPageVue', functional: true, render(h: CreateElement, { children }: RenderContext) { return h('div', { class: { 'ion-page': true } }, children); diff --git a/src/components/navigation/ion-tabs.ts b/src/components/navigation/ion-tabs.ts index 2909ac0..817e0bf 100644 --- a/src/components/navigation/ion-tabs.ts +++ b/src/components/navigation/ion-tabs.ts @@ -10,8 +10,8 @@ interface EventListeners { const tabBars = [] as VNode[]; const cachedTabs = [] as VNode[]; -export default { - name: 'IonTabs', +export const IonTabsVue = { + name: 'IonTabsVue', functional: true, render(h: CreateElement, { parent, data, slots, listeners }: RenderContext) { const renderQueue = [] as VNode[]; @@ -20,7 +20,7 @@ export default { let selectedTab = ''; if (!parent.$router) { - throw new Error('IonTabs requires an instance of either VueRouter or IonicVueRouter'); + throw new Error('IonTabsVue requires an instance of either VueRouter or IonicVueRouter'); } // Loop through all of the children in the default slot From 9fdd9c0d19a0fa53b97864cae20e26e24e0ccbec Mon Sep 17 00:00:00 2001 From: Michael Tintiuc Date: Wed, 12 Aug 2020 18:44:55 +0300 Subject: [PATCH 17/18] [build] 1.3.12 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 99c855e..c227477 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.11", + "version": "1.3.12", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1bb6eca..06659f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@modus/ionic-vue", - "version": "1.3.11", + "version": "1.3.12", "description": "Ionic integration adapters for Vue", "homepage": "https://moduscreate.com", "author": "Michael Tintiuc ", From 4cb62c2ffc0e625e9fc10f1f816591ac0ff24ee9 Mon Sep 17 00:00:00 2001 From: Devin Date: Tue, 25 Aug 2020 17:23:35 +0200 Subject: [PATCH 18/18] Updated broken links (#148) The links to the ionic components was broken. they seem to have renamed them without -controller at the end of the name --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 6ce8bde..9ea438d 100644 --- a/README.md +++ b/README.md @@ -120,14 +120,14 @@ Vue.component('Foo', { IonicVue supports all of the Ionic controllers: -- [Action Sheet](https://github.com/ionic-team/ionic/tree/master/core/src/components/action-sheet-controller) -- [Alert](https://github.com/ionic-team/ionic/tree/master/core/src/components/alert-controller) -- [Loading](https://github.com/ionic-team/ionic/tree/master/core/src/components/loading-controller) -- [Menu](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-controller) -- [Modal](https://github.com/ionic-team/ionic/tree/master/core/src/components/modal-controller) -- [Picker](https://github.com/ionic-team/ionic/tree/master/core/src/components/picker-controller) -- [Popover](https://github.com/ionic-team/ionic/tree/master/core/src/components/popover-controller) -- [Toast](https://github.com/ionic-team/ionic/tree/master/core/src/components/toast-controller) +- [Action Sheet](https://github.com/ionic-team/ionic/tree/master/core/src/components/action-sheet) +- [Alert](https://github.com/ionic-team/ionic/tree/master/core/src/components/alert) +- [Loading](https://github.com/ionic-team/ionic/tree/master/core/src/components/loading) +- [Menu](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu) +- [Modal](https://github.com/ionic-team/ionic/tree/master/core/src/components/modal) +- [Picker](https://github.com/ionic-team/ionic/tree/master/core/src/components/picker) +- [Popover](https://github.com/ionic-team/ionic/tree/master/core/src/components/popover) +- [Toast](https://github.com/ionic-team/ionic/tree/master/core/src/components/toast) ### IonicVueRouter