vue-router-view-transition/dist/index.esm.js

A transition wrapper for router-view that is compatible with scrollBehavior

/*!
  * vue-router-view-transition v0.0.1
  * (c) 2019 Eduardo San Martin Morote
  * @license MIT
  */
const scrollWaiter = {
    resolve: null,
    promise: null,
    add() {
        this.promise = new Promise(resolve => {
            this.resolve = resolve;
        });
    },
    flush() {
        this.resolve && this.resolve();
        this.resolve = null;
        this.promise = null;
    },
    async wait() {
        await this.promise;
    },
};
/**
 * Wraps a scrollBehavior method to asynchronously await for the entering view to be visible. It requires you to use the `router-view-transition` component
 * @param guard
 */
function waitForTransition(scrollBehavior) {
    return async (...args) => {
        await scrollWaiter.wait();
        scrollBehavior(...args);
    };
}

const events = {
    '': {},
    'out-in': {
        beforeEnter: () => scrollWaiter.flush(),
        beforeLeave: () => scrollWaiter.add(),
    },
    'in-out': {},
};
const RouterViewTransition = {
    functional: true,
    props: {
        transition: String,
        view: String,
        name: {
            type: String,
            default: 'default',
        },
    },
    render: (h, { data, props }) => {
        // TODO: merge on events passed from data that can be added to transition
        const { attrs } = data;
        delete data.attrs;
        const mode = attrs ? attrs.mode : '';
        return h('transition', {
            props: {
                name: props.transition,
            },
            on: events[mode],
            attrs,
        }, [h('router-view', data)]);
    },
};

export { RouterViewTransition, waitForTransition };