UNPKG

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