@curi/vue/dist/curi-vue.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var Vue = _interopDefault(require('vue'));

var canNavigate = function (event) {
    return (!event.defaultPrevented &&
        (event.button !== undefined && event.button === 0) &&
        !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey));
};
var Link = {
    name: "curi-link",
    props: ["to", "params", "hash", "query", "state", "click"],
    computed: {
        location: function () {
            var pathname = this.to
                ? this.$router.route.pathname(this.to, this.params)
                : this.$curi.response.location.pathname;
            return {
                hash: this.hash,
                query: this.query,
                state: this.state,
                pathname: pathname
            };
        },
        href: function () {
            return this.$router.history.toHref(this.location);
        }
    },
    data: function () {
        return {
            navigating: false
        };
    },
    methods: {
        clickHandler: function (event) {
            var _this = this;
            if (this.click) {
                this.click(event);
            }
            if (canNavigate(event)) {
                event.preventDefault();
                var cancelled = void 0, finished = void 0;
                if (this.$scopedSlots.default) {
                    cancelled = finished = function () {
                        _this.navigating = false;
                    };
                    this.navigating = true;
                }
                this.$router.navigate({
                    name: this.to,
                    params: this.params,
                    hash: this.hash,
                    query: this.query,
                    state: this.state,
                    cancelled: cancelled,
                    finished: finished
                });
            }
        }
    },
    render: function (h) {
        return h("a", {
            attrs: { href: this.href },
            on: { click: this.clickHandler }
        }, this.$scopedSlots.default
            ? this.$scopedSlots.default({
                navigating: this.navigating
            })
            : this.$slots.default);
    }
};

var Block = {
    name: 'curi-block',
    props: {
        active: {
            type: Boolean,
            default: true
        },
        confirm: {
            type: Function,
            required: true
        }
    },
    methods: {
        on: function () {
            this.$router.history.confirmWith(this.confirm);
        },
        off: function () {
            this.$router.history.removeConfirmation();
        },
        update: function () {
            this.off();
            if (this.active) {
                this.on();
            }
        }
    },
    beforeMount: function () {
        if (this.active) {
            this.on();
        }
    },
    watch: {
        active: function () {
            this.update();
        },
        confirm: function () {
            this.update();
        }
    },
    beforeDestroy: function () {
        this.off();
    },
    render: function (h) {
        return null;
    }
};

function focus(el, options) {
    var _a = options.preserve, preserve = _a === void 0 ? false : _a, _b = options.preventScroll, preventScroll = _b === void 0 ? false : _b;
    if (preserve && el.contains(document.activeElement)) {
        return;
    }
    setTimeout(function () {
        // @ts-ignore
        el.focus({ preventScroll: preventScroll });
    });
}
var focusDirection = {
    inserted: function (el, binding) {
        if (process.env.NODE_ENV !== "production") {
            if (!el.hasAttribute("tabIndex") && el.tabIndex === -1) {
                console.warn('The element that is passed the "v-curi-focus" directive must have a "tabIndex" prop or ' +
                    "be focusable by default in order to be focused. " +
                    "Otherwise, the document's <body> will be focused instead.");
            }
        }
        focus(el, binding.value);
    },
    update: function (el, binding) {
        if (binding.value.key !== binding.oldValue.key) {
            focus(el, binding.value);
        }
    }
};

var CuriPlugin = {
    install: function (_Vue, options) {
        _Vue.component(Link.name, Link);
        _Vue.component(Block.name, Block);
        _Vue.directive("curi-focus", focusDirection);
        // create a reactive object so that components will receive
        // the new response/navigation when a new response is emitted
        var reactive = new Vue({
            data: { response: null, navigation: null }
        });
        options.router.observe(function (_a) {
            var response = _a.response, navigation = _a.navigation;
            reactive.response = response;
            reactive.navigation = navigation;
        });
        _Vue.mixin({
            beforeCreate: function () {
                this.$curi = reactive;
            }
        });
        Object.defineProperty(_Vue.prototype, "$router", {
            get: function () {
                return options.router;
            }
        });
    }
};

exports.CuriPlugin = CuriPlugin;