1 | import Vue from 'vue';
|
2 |
|
3 | function 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 |
|
10 | var 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 |
|
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 |
|
46 | var 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 |
|
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 |
|
97 | function 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 |
|
104 | el.focus({ preventScroll: preventScroll });
|
105 | });
|
106 | }
|
107 | var 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 |
|
125 | var 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 |
|
131 |
|
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 |
|
153 | export { CuriPlugin };
|