UNPKG

22.6 kBJavaScriptView Raw
1(function webpackUniversalModuleDefinition(root, factory) {
2 if(typeof exports === 'object' && typeof module === 'object')
3 module.exports = factory(require("vue"));
4 else if(typeof define === 'function' && define.amd)
5 define("VueLoading", ["vue"], factory);
6 else if(typeof exports === 'object')
7 exports["VueLoading"] = factory(require("vue"));
8 else
9 root["VueLoading"] = factory(root["Vue"]);
10})(this, function(__WEBPACK_EXTERNAL_MODULE__982__) {
11return /******/ (() => { // webpackBootstrap
12/******/ "use strict";
13/******/ var __webpack_modules__ = ({
14
15/***/ 982:
16/***/ ((module) => {
17
18module.exports = __WEBPACK_EXTERNAL_MODULE__982__;
19
20/***/ })
21
22/******/ });
23/************************************************************************/
24/******/ // The module cache
25/******/ var __webpack_module_cache__ = {};
26/******/
27/******/ // The require function
28/******/ function __webpack_require__(moduleId) {
29/******/ // Check if module is in cache
30/******/ var cachedModule = __webpack_module_cache__[moduleId];
31/******/ if (cachedModule !== undefined) {
32/******/ return cachedModule.exports;
33/******/ }
34/******/ // Create a new module (and put it into the cache)
35/******/ var module = __webpack_module_cache__[moduleId] = {
36/******/ // no module.id needed
37/******/ // no module.loaded needed
38/******/ exports: {}
39/******/ };
40/******/
41/******/ // Execute the module function
42/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
43/******/
44/******/ // Return the exports of the module
45/******/ return module.exports;
46/******/ }
47/******/
48/************************************************************************/
49/******/ /* webpack/runtime/define property getters */
50/******/ (() => {
51/******/ // define getter functions for harmony exports
52/******/ __webpack_require__.d = (exports, definition) => {
53/******/ for(var key in definition) {
54/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
55/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
56/******/ }
57/******/ }
58/******/ };
59/******/ })();
60/******/
61/******/ /* webpack/runtime/hasOwnProperty shorthand */
62/******/ (() => {
63/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
64/******/ })();
65/******/
66/******/ /* webpack/runtime/make namespace object */
67/******/ (() => {
68/******/ // define __esModule on exports
69/******/ __webpack_require__.r = (exports) => {
70/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
71/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
72/******/ }
73/******/ Object.defineProperty(exports, '__esModule', { value: true });
74/******/ };
75/******/ })();
76/******/
77/************************************************************************/
78var __webpack_exports__ = {};
79// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
80(() => {
81// ESM COMPAT FLAG
82__webpack_require__.r(__webpack_exports__);
83
84// EXPORTS
85__webpack_require__.d(__webpack_exports__, {
86 "default": () => (/* binding */ src),
87 "useLoading": () => (/* reexport */ useLoading)
88});
89
90// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"}
91var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_ = __webpack_require__(982);
92;// CONCATENATED MODULE: ./src/js/helpers.js
93
94function removeElement(el) {
95 if (typeof el.remove !== 'undefined') {
96 el.remove();
97 } else {
98 var _el$parentNode;
99
100 (_el$parentNode = el.parentNode) === null || _el$parentNode === void 0 ? void 0 : _el$parentNode.removeChild(el);
101 }
102}
103function createComponent(component, props, parentContainer, slots = {}) {
104 const vNode = (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.h)(component, props, slots);
105 const container = document.createElement('div');
106 container.classList.add('vld-container');
107 parentContainer.appendChild(container);
108 (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.render)(vNode, container);
109 return vNode.component;
110}
111function hasWindow() {
112 return typeof window !== 'undefined';
113}
114const MayBeHTMLElement = hasWindow() ? window.HTMLElement : Object;
115;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/js/Component.vue?vue&type=template&id=fbaef6da
116
117const _hoisted_1 = {
118 class: "vld-icon"
119};
120function render(_ctx, _cache, $props, $setup, $data, $options) {
121 return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)(external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.Transition, {
122 ref: "root",
123 name: _ctx.transition
124 }, {
125 default: (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.withDirectives)((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("div", {
126 tabindex: "0",
127 class: ["vld-overlay is-active", {
128 'is-full-page': _ctx.isFullPage
129 }],
130 "aria-busy": _ctx.isActive,
131 "aria-label": "Loading",
132 style: {
133 zIndex: _ctx.zIndex
134 }
135 }, [(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("div", {
136 class: "vld-background",
137 onClick: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.withModifiers)((...args) => _ctx.cancel && _ctx.cancel(...args), ["prevent"])),
138 style: _ctx.bgStyle
139 }, null, 4), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("div", _hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.renderSlot)(_ctx.$slots, "before"), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {}, () => [((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.resolveDynamicComponent)(_ctx.loader), {
140 color: _ctx.color,
141 width: _ctx.width,
142 height: _ctx.height
143 }, null, 8, ["color", "width", "height"]))]), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.renderSlot)(_ctx.$slots, "after")])], 14, ["aria-busy"]), [[external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.vShow, _ctx.isActive]])]),
144 _: 3
145 }, 8, ["name"]);
146}
147;// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=fbaef6da
148
149;// CONCATENATED MODULE: ./src/js/trapFocusMixin.js
150/* harmony default export */ const trapFocusMixin = ({
151 mounted() {
152 if (this.enforceFocus) {
153 document.addEventListener('focusin', this.focusIn);
154 }
155 },
156
157 methods: {
158 /**
159 * Trap focus event
160 *
161 * @param event
162 */
163 focusIn(event) {
164 // Ignore when loading is not active
165 if (!this.isActive) return;
166 if ( // Event target is the loading div element itself
167 event.target === this.$refs.root || // Event target is inside the loading div
168 this.$refs.root.contains(event.target)) return; // Use container as parent when available otherwise use parent element when isFullPage is false
169
170 let parent = this.container ? this.container : this.isFullPage ? null : this.$refs.root.parentElement;
171
172 if ( // Always prevent when loading is full screen
173 this.isFullPage || // When a parent exist means loader is running inside a container
174 // When loading is NOT full screen and event target is inside the given container
175 parent && parent.contains(event.target)) {
176 event.preventDefault();
177 this.$refs.root.focus();
178 }
179 }
180
181 },
182
183 beforeUnmount() {
184 document.removeEventListener('focusin', this.focusIn);
185 }
186
187});
188;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/spinner.vue?vue&type=template&id=1ed0a811
189
190
191const spinnervue_type_template_id_1ed0a811_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("g", {
192 fill: "none",
193 "fill-rule": "evenodd"
194}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("g", {
195 transform: "translate(1 1)",
196 "stroke-width": "2"
197}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
198 "stroke-opacity": ".25",
199 cx: "18",
200 cy: "18",
201 r: "18"
202}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("path", {
203 d: "M36 18c0-9.94-8.06-18-18-18"
204}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animateTransform", {
205 attributeName: "transform",
206 type: "rotate",
207 from: "0 18 18",
208 to: "360 18 18",
209 dur: "0.8s",
210 repeatCount: "indefinite"
211})])])], -1);
212
213function spinnervue_type_template_id_1ed0a811_render(_ctx, _cache, $props, $setup, $data, $options) {
214 return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
215 viewBox: "0 0 38 38",
216 xmlns: "http://www.w3.org/2000/svg",
217 width: _ctx.width,
218 height: _ctx.height,
219 stroke: _ctx.color
220 }, [spinnervue_type_template_id_1ed0a811_hoisted_1], 8, ["width", "height", "stroke"]);
221}
222;// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=template&id=1ed0a811
223
224;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/spinner.vue?vue&type=script&lang=js
225
226/* harmony default export */ const spinnervue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
227 name: 'spinner',
228 props: {
229 color: {
230 type: String,
231 default: '#000'
232 },
233 height: {
234 type: Number,
235 default: 64
236 },
237 width: {
238 type: Number,
239 default: 64
240 }
241 }
242}));
243;// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=script&lang=js
244
245;// CONCATENATED MODULE: ./src/loaders/spinner.vue
246
247
248
249spinnervue_type_script_lang_js.render = spinnervue_type_template_id_1ed0a811_render
250
251/* harmony default export */ const spinner = (spinnervue_type_script_lang_js);
252;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/dots.vue?vue&type=template&id=6ecfb4ba
253
254
255const dotsvue_type_template_id_6ecfb4ba_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
256 cx: "15",
257 cy: "15",
258 r: "15"
259}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
260 attributeName: "r",
261 from: "15",
262 to: "15",
263 begin: "0s",
264 dur: "0.8s",
265 values: "15;9;15",
266 calcMode: "linear",
267 repeatCount: "indefinite"
268}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
269 attributeName: "fill-opacity",
270 from: "1",
271 to: "1",
272 begin: "0s",
273 dur: "0.8s",
274 values: "1;.5;1",
275 calcMode: "linear",
276 repeatCount: "indefinite"
277})], -1);
278
279const _hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
280 cx: "60",
281 cy: "15",
282 r: "9",
283 "fill-opacity": "0.3"
284}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
285 attributeName: "r",
286 from: "9",
287 to: "9",
288 begin: "0s",
289 dur: "0.8s",
290 values: "9;15;9",
291 calcMode: "linear",
292 repeatCount: "indefinite"
293}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
294 attributeName: "fill-opacity",
295 from: "0.5",
296 to: "0.5",
297 begin: "0s",
298 dur: "0.8s",
299 values: ".5;1;.5",
300 calcMode: "linear",
301 repeatCount: "indefinite"
302})], -1);
303
304const _hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
305 cx: "105",
306 cy: "15",
307 r: "15"
308}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
309 attributeName: "r",
310 from: "15",
311 to: "15",
312 begin: "0s",
313 dur: "0.8s",
314 values: "15;9;15",
315 calcMode: "linear",
316 repeatCount: "indefinite"
317}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
318 attributeName: "fill-opacity",
319 from: "1",
320 to: "1",
321 begin: "0s",
322 dur: "0.8s",
323 values: "1;.5;1",
324 calcMode: "linear",
325 repeatCount: "indefinite"
326})], -1);
327
328function dotsvue_type_template_id_6ecfb4ba_render(_ctx, _cache, $props, $setup, $data, $options) {
329 return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
330 viewBox: "0 0 120 30",
331 xmlns: "http://www.w3.org/2000/svg",
332 fill: _ctx.color,
333 width: _ctx.width,
334 height: _ctx.height
335 }, [dotsvue_type_template_id_6ecfb4ba_hoisted_1, _hoisted_2, _hoisted_3], 8, ["fill", "width", "height"]);
336}
337;// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=template&id=6ecfb4ba
338
339;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/dots.vue?vue&type=script&lang=js
340
341/* harmony default export */ const dotsvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
342 name: 'dots',
343 props: {
344 color: {
345 type: String,
346 default: '#000'
347 },
348 height: {
349 type: Number,
350 default: 240
351 },
352 width: {
353 type: Number,
354 default: 60
355 }
356 }
357}));
358;// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=script&lang=js
359
360;// CONCATENATED MODULE: ./src/loaders/dots.vue
361
362
363
364dotsvue_type_script_lang_js.render = dotsvue_type_template_id_6ecfb4ba_render
365
366/* harmony default export */ const dots = (dotsvue_type_script_lang_js);
367;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/bars.vue?vue&type=template&id=f81ac1c0
368
369
370const barsvue_type_template_id_f81ac1c0_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
371 x: "0",
372 y: "13",
373 width: "4",
374 height: "5"
375}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
376 attributeName: "height",
377 attributeType: "XML",
378 values: "5;21;5",
379 begin: "0s",
380 dur: "0.6s",
381 repeatCount: "indefinite"
382}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
383 attributeName: "y",
384 attributeType: "XML",
385 values: "13; 5; 13",
386 begin: "0s",
387 dur: "0.6s",
388 repeatCount: "indefinite"
389})], -1);
390
391const barsvue_type_template_id_f81ac1c0_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
392 x: "10",
393 y: "13",
394 width: "4",
395 height: "5"
396}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
397 attributeName: "height",
398 attributeType: "XML",
399 values: "5;21;5",
400 begin: "0.15s",
401 dur: "0.6s",
402 repeatCount: "indefinite"
403}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
404 attributeName: "y",
405 attributeType: "XML",
406 values: "13; 5; 13",
407 begin: "0.15s",
408 dur: "0.6s",
409 repeatCount: "indefinite"
410})], -1);
411
412const barsvue_type_template_id_f81ac1c0_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
413 x: "20",
414 y: "13",
415 width: "4",
416 height: "5"
417}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
418 attributeName: "height",
419 attributeType: "XML",
420 values: "5;21;5",
421 begin: "0.3s",
422 dur: "0.6s",
423 repeatCount: "indefinite"
424}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
425 attributeName: "y",
426 attributeType: "XML",
427 values: "13; 5; 13",
428 begin: "0.3s",
429 dur: "0.6s",
430 repeatCount: "indefinite"
431})], -1);
432
433function barsvue_type_template_id_f81ac1c0_render(_ctx, _cache, $props, $setup, $data, $options) {
434 return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
435 xmlns: "http://www.w3.org/2000/svg",
436 viewBox: "0 0 30 30",
437 height: _ctx.height,
438 width: _ctx.width,
439 fill: _ctx.color
440 }, [barsvue_type_template_id_f81ac1c0_hoisted_1, barsvue_type_template_id_f81ac1c0_hoisted_2, barsvue_type_template_id_f81ac1c0_hoisted_3], 8, ["height", "width", "fill"]);
441}
442;// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=template&id=f81ac1c0
443
444;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/loaders/bars.vue?vue&type=script&lang=js
445
446/* harmony default export */ const barsvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
447 name: 'bars',
448 props: {
449 color: {
450 type: String,
451 default: '#000'
452 },
453 height: {
454 type: Number,
455 default: 40
456 },
457 width: {
458 type: Number,
459 default: 40
460 }
461 }
462}));
463;// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=script&lang=js
464
465;// CONCATENATED MODULE: ./src/loaders/bars.vue
466
467
468
469barsvue_type_script_lang_js.render = barsvue_type_template_id_f81ac1c0_render
470
471/* harmony default export */ const bars = (barsvue_type_script_lang_js);
472;// CONCATENATED MODULE: ./src/loaders/index.js
473
474
475
476/* harmony default export */ const loaders = ({
477 Spinner: spinner,
478 Dots: dots,
479 Bars: bars
480});
481;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/js/Component.vue?vue&type=script&lang=js
482
483
484
485
486/* harmony default export */ const Componentvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
487 name: 'vue-loading',
488 mixins: [trapFocusMixin],
489 props: {
490 active: Boolean,
491 programmatic: Boolean,
492 container: [Object, Function, MayBeHTMLElement],
493 isFullPage: {
494 type: Boolean,
495 default: true
496 },
497 enforceFocus: {
498 type: Boolean,
499 default: true
500 },
501 lockScroll: {
502 type: Boolean,
503 default: false
504 },
505 transition: {
506 type: String,
507 default: 'fade'
508 },
509
510 /**
511 * Allow user to hide the loader
512 */
513 canCancel: Boolean,
514
515 /**
516 * Do something on cancel
517 */
518 onCancel: {
519 type: Function,
520 default: () => {}
521 },
522 color: String,
523 backgroundColor: String,
524 blur: {
525 type: String,
526 default: '2px'
527 },
528 opacity: Number,
529 width: Number,
530 height: Number,
531 zIndex: Number,
532 loader: {
533 type: String,
534 default: 'spinner'
535 }
536 },
537 emits: ['hide', 'update:active'],
538
539 data() {
540 return {
541 // Don't mutate the prop
542 isActive: this.active
543 };
544 },
545
546 components: loaders,
547
548 mounted() {
549 document.addEventListener('keyup', this.keyPress);
550 },
551
552 methods: {
553 /**
554 * Proxy to hide() method.
555 * Gets called by ESC button or when click outside
556 */
557 cancel() {
558 if (!this.canCancel || !this.isActive) return;
559 this.hide();
560 this.onCancel.apply(null, arguments);
561 },
562
563 /**
564 * Hide and destroy component if it's programmatic.
565 */
566 hide() {
567 this.$emit('hide');
568 this.$emit('update:active', false);
569
570 if (this.programmatic) {
571 this.isActive = false; // Timeout for the animation complete before destroying
572
573 setTimeout(() => {
574 const parent = this.$refs.root.parentElement; // unmount the component
575
576 (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.render)(null, parent);
577 removeElement(parent);
578 }, 150);
579 }
580 },
581
582 disableScroll() {
583 if (this.isFullPage && this.lockScroll) {
584 document.body.classList.add('vld-shown');
585 }
586 },
587
588 enableScroll() {
589 if (this.isFullPage && this.lockScroll) {
590 document.body.classList.remove('vld-shown');
591 }
592 },
593
594 /**
595 * Key press event to hide on ESC.
596 *
597 * @param event
598 */
599 keyPress(event) {
600 // todo keyCode is deprecated
601 if (event.keyCode === 27) this.cancel();
602 }
603
604 },
605 watch: {
606 active(value) {
607 this.isActive = value;
608 },
609
610 isActive(value) {
611 if (value) {
612 this.disableScroll();
613 } else {
614 this.enableScroll();
615 }
616 }
617
618 },
619 computed: {
620 bgStyle() {
621 return {
622 background: this.backgroundColor,
623 opacity: this.opacity,
624 backdropFilter: `blur(${this.blur})`
625 };
626 }
627
628 },
629
630 beforeUnmount() {
631 document.removeEventListener('keyup', this.keyPress);
632 }
633
634}));
635;// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=script&lang=js
636
637;// CONCATENATED MODULE: ./src/js/Component.vue
638
639
640
641Componentvue_type_script_lang_js.render = render
642
643/* harmony default export */ const Component = (Componentvue_type_script_lang_js);
644;// CONCATENATED MODULE: ./src/js/api.js
645
646
647function useLoading(globalProps = {}, globalSlots = {}) {
648 return {
649 show(props = globalProps, slots = globalSlots) {
650 const forceProps = {
651 programmatic: true,
652 lockScroll: true,
653 isFullPage: false,
654 active: true
655 };
656 const propsData = Object.assign({}, globalProps, props, forceProps);
657 let container = propsData.container;
658
659 if (!propsData.container) {
660 container = document.body;
661 propsData.isFullPage = true;
662 }
663
664 const mergedSlots = Object.assign({}, globalSlots, slots);
665 const instance = createComponent(Component, propsData, container, mergedSlots);
666 return {
667 hide: instance.ctx.hide
668 };
669 }
670
671 };
672}
673;// CONCATENATED MODULE: ./src/index.js
674
675
676
677
678const Plugin = (app, props = {}, slots = {}) => {
679 const instance = useLoading(props, slots);
680 app.config.globalProperties.$loading = instance;
681 app.provide('$loading', instance);
682};
683
684Component.install = Plugin;
685/* harmony default export */ const src = (Component);
686
687})();
688
689__webpack_exports__ = __webpack_exports__.default;
690/******/ return __webpack_exports__;
691/******/ })()
692;
693});
\No newline at end of file