UNPKG

5.47 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
3 typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
4 (global = global || self, factory(global.CuriVue = {}, global.Vue));
5}(this, function (exports, Vue) { 'use strict';
6
7 Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
8
9 function canNavigate(event, target) {
10 return (!event.defaultPrevented &&
11 !target &&
12 (event.button !== undefined && event.button === 0) &&
13 !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey));
14 }
15
16 var Link = {
17 name: "curi-link",
18 props: ["name", "params", "hash", "query", "state", "click"],
19 computed: {
20 url: function () {
21 return this.$router.url({
22 name: this.name,
23 params: this.params,
24 hash: this.hash,
25 query: this.query
26 });
27 }
28 },
29 methods: {
30 clickHandler: function (event) {
31 if (this.click) {
32 this.click(event);
33 }
34 // @ts-ignore
35 if (canNavigate(event)) {
36 event.preventDefault();
37 this.$router.navigate({
38 url: this.url,
39 state: this.state
40 });
41 }
42 }
43 },
44 render: function (h) {
45 return h("a", {
46 attrs: { href: this.url },
47 on: { click: this.clickHandler }
48 }, this.$slots.default);
49 }
50 };
51
52 var Link$1 = {
53 name: "curi-async-link",
54 props: ["name", "params", "hash", "query", "state", "click"],
55 computed: {
56 url: function () {
57 return this.$router.url({
58 name: this.name,
59 params: this.params,
60 hash: this.hash,
61 query: this.query
62 });
63 }
64 },
65 data: function () {
66 return {
67 navigating: false
68 };
69 },
70 methods: {
71 clickHandler: function (event) {
72 var _this = this;
73 if (this.click) {
74 this.click(event);
75 }
76 // @ts-ignore
77 if (canNavigate(event)) {
78 event.preventDefault();
79 var cancelled = void 0, finished = void 0;
80 cancelled = finished = function () {
81 _this.navigating = false;
82 };
83 this.navigating = true;
84 this.$router.navigate({
85 url: this.url,
86 state: this.state,
87 cancelled: cancelled,
88 finished: finished
89 });
90 }
91 }
92 },
93 render: function (h) {
94 return h("a", {
95 attrs: { href: this.url },
96 on: { click: this.clickHandler }
97 }, this.$scopedSlots.default({
98 navigating: this.navigating
99 }));
100 }
101 };
102
103 function focus(el, options) {
104 var _a = options.preserve, preserve = _a === void 0 ? false : _a, _b = options.preventScroll, preventScroll = _b === void 0 ? false : _b;
105 if (preserve && el.contains(document.activeElement)) {
106 return;
107 }
108 setTimeout(function () {
109 // @ts-ignore
110 el.focus({ preventScroll: preventScroll });
111 });
112 }
113 var focusDirective = {
114 inserted: function (el, binding) {
115 {
116 if (!el.hasAttribute("tabIndex") && el.tabIndex === -1) {
117 console.warn('The element that is passed the "v-curi-focus" directive must have a "tabIndex" prop or ' +
118 "be focusable by default in order to be focused. " +
119 "Otherwise, the document's <body> will be focused instead.");
120 }
121 }
122 focus(el, binding.value);
123 },
124 update: function (el, binding) {
125 if (binding.value.key !== binding.oldValue.key) {
126 focus(el, binding.value);
127 }
128 }
129 };
130
131 var CuriPlugin = {
132 install: function (_Vue, options) {
133 _Vue.component(Link.name, Link);
134 _Vue.component(Link$1.name, Link$1);
135 _Vue.directive("curi-focus", focusDirective);
136 // create a reactive object so that components will receive
137 // the new response/navigation when a new response is emitted
138 var reactive = new Vue({
139 data: options.router.current()
140 });
141 options.router.observe(function (_a) {
142 var response = _a.response, navigation = _a.navigation;
143 reactive.response = response;
144 reactive.navigation = navigation;
145 });
146 _Vue.mixin({
147 beforeCreate: function () {
148 this.$curi = reactive;
149 }
150 });
151 Object.defineProperty(_Vue.prototype, "$router", {
152 get: function () {
153 return options.router;
154 }
155 });
156 }
157 };
158
159 exports.CuriPlugin = CuriPlugin;
160
161 Object.defineProperty(exports, '__esModule', { value: true });
162
163}));