vue-loading-overlay - npm Package Compare versions

Comparing version 3.4.2 to 4.0.0

CHANGELOG.md

 # Changelog
 
+### [4.0.0](https://github.com/ankurk91/vue-loading-overlay/compare/3.4.2...4.0.0) :warning:
+
+* Drop support for Vue v2.x and add support for Vue v3.x
+* Drop IE 11 support
+
 ### [3.4.2](https://github.com/ankurk91/vue-loading-overlay/compare/3.4.1...3.4.2)
+
 * Fix: [#64](https://github.com/ankurk91/vue-loading-overlay/issues/64)
 
 ### [3.4.1](https://github.com/ankurk91/vue-loading-overlay/compare/3.4.0...3.4.1)
+
 * Add type definitions
 
 ### [3.4.0](https://github.com/ankurk91/vue-loading-overlay/compare/3.3.4...3.4.0)
+
 * Add: Lock scroll feature, [#51](https://github.com/ankurk91/vue-loading-overlay/issues/51)
@@ -14,33 +22,43 @@ * Add: `blur` prop to blur the background
 ### [3.3.4](https://github.com/ankurk91/vue-loading-overlay/compare/3.3.3...3.3.4)
+
 * Fix: restore broken IE 11 support. :warning: IE 11 support will be removed in next major version.
 
 ### [3.3.3](https://github.com/ankurk91/vue-loading-overlay/compare/3.3.2...3.3.3)
+
 * Fix: [#26](https://github.com/ankurk91/vue-loading-overlay/issues/26) by introducing `enforceFocus` prop
 
 ### [3.3.2](https://github.com/ankurk91/vue-loading-overlay/compare/3.3.1...3.3.2)
-* Fix: revert [#44](https://github.com/ankurk91/vue-loading-overlay/issues/44) 
-    to fix [#46](https://github.com/ankurk91/vue-loading-overlay/issues/46)
 
+* Fix: revert [#44](https://github.com/ankurk91/vue-loading-overlay/issues/44)
+  to fix [#46](https://github.com/ankurk91/vue-loading-overlay/issues/46)
+
 ### [3.3.1](https://github.com/ankurk91/vue-loading-overlay/compare/3.3.0...3.3.1)
-* Fix: 
-    - [#42](https://github.com/ankurk91/vue-loading-overlay/issues/42) 
-    - [#44](https://github.com/ankurk91/vue-loading-overlay/issues/44) 
 
+* Fix:
+    - [#42](https://github.com/ankurk91/vue-loading-overlay/issues/42)
+    - [#44](https://github.com/ankurk91/vue-loading-overlay/issues/44)
+
 ### [3.3.0](https://github.com/ankurk91/vue-loading-overlay/compare/3.2.0...3.3.0)
+
 * Increase `z-index` value to `9999`
 
 ### [3.2.0](https://github.com/ankurk91/vue-loading-overlay/compare/3.1.1...3.2.0)
+
 * Add: `z-index` prop
 
 ### [3.1.1](https://github.com/ankurk91/vue-loading-overlay/compare/3.1.0...3.1.1)
+
 * Fix: `onCancel` prop default value to empty function
 
 ### [3.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/3.0.1...3.1.0)
+
 * Add: `bars` loader type
 
 ### [3.0.1](https://github.com/ankurk91/vue-loading-overlay/compare/3.0.0...3.0.1)
+
 * Add: `opacity` prop
 
 ### [3.0.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.2...3.0.0) (breaking)
-* Changed: 
+
+* Changed:
     - use SVG instead of CSS animation
@@ -51,4 +69,4 @@ - rename `animation` prop to `transition`
     - use `v-show` instead of `v-if`
-    - CSS classes has been prefixed with `vld` 
-    - Output CSS file name has been renamed `dist/vue-loading.css`, removed **`.min`** from name 
+    - CSS classes has been prefixed with `vld`
+    - Output CSS file name has been renamed `dist/vue-loading.css`, removed **`.min`** from name
 * Added: see docs for usage
@@ -59,12 +77,14 @@ - add `loader` prop
     - add `before` and `after` slots
-    - add second argument to `$loading.show(props?,slots?)` method to accept slots  
-* Removed: 
+    - add second argument to `$loading.show(props?,slots?)` method to accept slots
+* Removed:
     - SCSS has been removed completely
 * Other:
-    - live example available on gh-pages    
-    
-### [2.2.2](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.1...2.2.2) 
+    - live example available on gh-pages
+
+### [2.2.2](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.1...2.2.2)
+
 * Fix: SSR issue [#18](https://github.com/ankurk91/vue-loading-overlay/pull/18)
 
-### [2.2.1](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.0...2.2.1) 
+### [2.2.1](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.0...2.2.1)
+
 * Fix: regression in trap focus feature
@@ -74,3 +94,4 @@ * Fix: regression in `z-index` issue
 
-### [2.2.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.1.0...2.2.0) 
+### [2.2.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.1.0...2.2.0)
+
 * Add: default slot to override the loading indicator
@@ -84,19 +105,25 @@ * Add: trap `focus` feature, user will not be able to tab on elements those are behind the loading overlay
 
-### [2.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.4...2.1.0) 
+### [2.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.4...2.1.0)
+
 * Add: allow loader to be restricted to a container element
 * Chore: auto pre-fixer
 
-### [2.0.4](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.3...2.0.4) 
+### [2.0.4](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.3...2.0.4)
+
 * Chore: `dist` now includes non-minified js file as well
 
-### [2.0.3](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.2...2.0.3) 
+### [2.0.3](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.2...2.0.3)
+
 * Fix: webpack build config, [#3](https://github.com/ankurk91/vue-loading-overlay/issues/3)
 
-### [2.0.2](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.1...2.0.2) 
+### [2.0.2](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.1...2.0.2)
+
 * Fix: Don't call `onCancel` callback function when loader is not active
-       
-### [2.0.1](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.0...2.0.1) 
+
+### [2.0.1](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.0...2.0.1)
+
 * Fix: was not working in non module environments
-     
+
 ### [2.0.0](https://github.com/ankurk91/vue-loading-overlay/compare/1.0.0...2.0.0) (breaking)
+
 * Fix: v1.0.0 was completely broken due to a webpack configuration
@@ -106,2 +133,3 @@ * Change: check `readme.md` file for updated usage instruction
 ### 1.0.0
+
 * Initial release

dist/vue-loading.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory();
+		module.exports = factory(require("vue"));
 	else if(typeof define === 'function' && define.amd)
-		define("VueLoading", [], factory);
+		define("VueLoading", ["vue"], factory);
 	else if(typeof exports === 'object')
-		exports["VueLoading"] = factory();
+		exports["VueLoading"] = factory(require("vue"));
 	else
-		root["VueLoading"] = factory();
-})(typeof self !== 'undefined' ? self : this, function() {
-return /******/ (function(modules) { // webpackBootstrap
+		root["VueLoading"] = factory(root["Vue"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__982__) {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 982:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__982__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
 /******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-/******/
 /******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
 /******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
 /******/ 			exports: {}
 /******/ 		};
-/******/
+/******/ 	
 /******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
-/******/ })
+/******/ 	
 /************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
 
-// extracted by mini-css-extract-plugin
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ src)
+});
 
-/***/ }),
-/* 1 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+// UNUSED EXPORTS: useLoading
 
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_ = __webpack_require__(982);
+;// CONCATENATED MODULE: ./src/js/helpers.js
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/js/Component.vue?vue&type=template&id=76669bf1&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":_vm.transition}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive),expression:"isActive"}],staticClass:"vld-overlay is-active",class:{ 'is-full-page': _vm.isFullPage },style:({ zIndex: _vm.zIndex }),attrs:{"tabindex":"0","aria-busy":_vm.isActive,"aria-label":"Loading"}},[_c('div',{staticClass:"vld-background",style:(_vm.bgStyle),on:{"click":function($event){$event.preventDefault();return _vm.cancel($event)}}}),_c('div',{staticClass:"vld-icon"},[_vm._t("before"),_vm._t("default",[_c(_vm.loader,{tag:"component",attrs:{"color":_vm.color,"width":_vm.width,"height":_vm.height}})]),_vm._t("after")],2)])])}
-var staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=76669bf1&
-
-// CONCATENATED MODULE: ./src/js/helpers.js
-var removeElement = function removeElement(el) {
+function removeElement(el) {
   if (typeof el.remove !== 'undefined') {
     el.remove();
   } else {
-    el.parentNode.removeChild(el);
+    var _el$parentNode;
+
+    (_el$parentNode = el.parentNode) === null || _el$parentNode === void 0 ? void 0 : _el$parentNode.removeChild(el);
   }
-};
+}
+function createComponent(component, props, parentContainer, slots = {}) {
+  const vNode = (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.h)(component, props, slots);
+  const container = document.createElement('div');
+  container.classList.add('vld-container');
+  parentContainer.appendChild(container);
+  (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.render)(vNode, container);
+  return vNode.component;
+}
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+const MayBeHTMLElement = hasWindow() ? window.HTMLElement : Object;
+;// 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
 
-var hasWindow = function hasWindow() {
-  return typeof window !== 'undefined';
+const _hoisted_1 = {
+  class: "vld-icon"
 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  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, {
+    ref: "root",
+    name: _ctx.transition
+  }, {
+    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", {
+      tabindex: "0",
+      class: ["vld-overlay is-active", {
+        'is-full-page': _ctx.isFullPage
+      }],
+      "aria-busy": _ctx.isActive,
+      "aria-label": "Loading",
+      style: {
+        zIndex: _ctx.zIndex
+      }
+    }, [(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("div", {
+      class: "vld-background",
+      onClick: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.withModifiers)((...args) => _ctx.cancel && _ctx.cancel(...args), ["prevent"])),
+      style: _ctx.bgStyle
+    }, 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), {
+      color: _ctx.color,
+      width: _ctx.width,
+      height: _ctx.height
+    }, 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]])]),
+    _: 3
+  }, 8, ["name"]);
+}
+;// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=fbaef6da
 
-var HTMLElement = hasWindow() ? window.HTMLElement : Object;
-
-// CONCATENATED MODULE: ./src/js/trapFocusMixin.js
-/* harmony default export */ var trapFocusMixin = ({
-  mounted: function mounted() {
+;// CONCATENATED MODULE: ./src/js/trapFocusMixin.js
+/* harmony default export */ const trapFocusMixin = ({
+  mounted() {
     if (this.enforceFocus) {
@@ -140,2 +144,3 @@ document.addEventListener('focusin', this.focusIn);
   },
+
   methods: {
@@ -147,10 +152,10 @@ /**
      */
-    focusIn: function focusIn(event) {
+    focusIn(event) {
       // Ignore when loading is not active
       if (!this.isActive) return;
       if ( // Event target is the loading div element itself
-      event.target === this.$el || // Event target is inside the loading div
-      this.$el.contains(event.target)) return; // Use container as parent when available otherwise use parent element when isFullPage is false
+      event.target === this.$refs.root || // Event target is inside the loading div
+      this.$refs.root.contains(event.target)) return; // Use container as parent when available otherwise use parent element when isFullPage is false
 
-      var parent = this.container ? this.container : this.isFullPage ? null : this.$el.parentElement;
+      let parent = this.container ? this.container : this.isFullPage ? null : this.$refs.root.parentElement;
 
@@ -162,38 +167,52 @@ if ( // Always prevent when loading is full screen
         event.preventDefault();
-        this.$el.focus();
+        this.$refs.root.focus();
       }
     }
+
   },
-  beforeDestroy: function beforeDestroy() {
+
+  beforeUnmount() {
     document.removeEventListener('focusin', this.focusIn);
   }
+
 });
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/spinner.vue?vue&type=template&id=34adbf2c&
-var spinnervue_type_template_id_34adbf2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"viewBox":"0 0 38 38","xmlns":"http://www.w3.org/2000/svg","width":_vm.width,"height":_vm.height,"stroke":_vm.color}},[_c('g',{attrs:{"fill":"none","fill-rule":"evenodd"}},[_c('g',{attrs:{"transform":"translate(1 1)","stroke-width":"2"}},[_c('circle',{attrs:{"stroke-opacity":".25","cx":"18","cy":"18","r":"18"}}),_c('path',{attrs:{"d":"M36 18c0-9.94-8.06-18-18-18"}},[_c('animateTransform',{attrs:{"attributeName":"transform","type":"rotate","from":"0 18 18","to":"360 18 18","dur":"0.8s","repeatCount":"indefinite"}})],1)])])])}
-var spinnervue_type_template_id_34adbf2c_staticRenderFns = []
+;// 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
 
 
-// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=template&id=34adbf2c&
+const spinnervue_type_template_id_1ed0a811_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("g", {
+  fill: "none",
+  "fill-rule": "evenodd"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("g", {
+  transform: "translate(1 1)",
+  "stroke-width": "2"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
+  "stroke-opacity": ".25",
+  cx: "18",
+  cy: "18",
+  r: "18"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("path", {
+  d: "M36 18c0-9.94-8.06-18-18-18"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animateTransform", {
+  attributeName: "transform",
+  type: "rotate",
+  from: "0 18 18",
+  to: "360 18 18",
+  dur: "0.8s",
+  repeatCount: "indefinite"
+})])])], -1);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/spinner.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var spinnervue_type_script_lang_js_ = ({
+function spinnervue_type_template_id_1ed0a811_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
+    viewBox: "0 0 38 38",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: _ctx.width,
+    height: _ctx.height,
+    stroke: _ctx.color
+  }, [spinnervue_type_template_id_1ed0a811_hoisted_1], 8, ["width", "height", "stroke"]);
+}
+;// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=template&id=1ed0a811
+
+;// 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
+
+/* harmony default export */ const spinnervue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
   name: 'spinner',
@@ -203,180 +222,113 @@ props: {
       type: String,
-      "default": '#000'
+      default: '#000'
     },
     height: {
       type: Number,
-      "default": 64
+      default: 64
     },
     width: {
       type: Number,
-      "default": 64
+      default: 64
     }
   }
-});
-// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=script&lang=js&
- /* harmony default export */ var loaders_spinnervue_type_script_lang_js_ = (spinnervue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
-/* globals __VUE_SSR_CONTEXT__ */
+}));
+;// CONCATENATED MODULE: ./src/loaders/spinner.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./src/loaders/spinner.vue
 
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
 
-function normalizeComponent (
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier, /* server only */
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
 
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
+spinnervue_type_script_lang_js.render = spinnervue_type_template_id_1ed0a811_render
 
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
+/* harmony default export */ const spinner = (spinnervue_type_script_lang_js);
+;// 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
 
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
 
-  var hook
-  if (moduleIdentifier) { // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () {
-        injectStyles.call(
-          this,
-          (options.functional ? this.parent : this).$root.$options.shadowRoot
-        )
-      }
-      : injectStyles
-  }
+const dotsvue_type_template_id_6ecfb4ba_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
+  cx: "15",
+  cy: "15",
+  r: "15"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "fill-opacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})], -1);
 
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functional component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
-    }
-  }
+const _hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
+  cx: "60",
+  cy: "15",
+  r: "9",
+  "fill-opacity": "0.3"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "r",
+  from: "9",
+  to: "9",
+  begin: "0s",
+  dur: "0.8s",
+  values: "9;15;9",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "fill-opacity",
+  from: "0.5",
+  to: "0.5",
+  begin: "0s",
+  dur: "0.8s",
+  values: ".5;1;.5",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})], -1);
 
-  return {
-    exports: scriptExports,
-    options: options
-  }
+const _hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("circle", {
+  cx: "105",
+  cy: "15",
+  r: "15"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "fill-opacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})], -1);
+
+function dotsvue_type_template_id_6ecfb4ba_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
+    viewBox: "0 0 120 30",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: _ctx.color,
+    width: _ctx.width,
+    height: _ctx.height
+  }, [dotsvue_type_template_id_6ecfb4ba_hoisted_1, _hoisted_2, _hoisted_3], 8, ["fill", "width", "height"]);
 }
+;// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=template&id=6ecfb4ba
 
-// CONCATENATED MODULE: ./src/loaders/spinner.vue
+;// 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
 
-
-
-
-
-/* normalize component */
-
-var component = normalizeComponent(
-  loaders_spinnervue_type_script_lang_js_,
-  spinnervue_type_template_id_34adbf2c_render,
-  spinnervue_type_template_id_34adbf2c_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ var spinner = (component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/dots.vue?vue&type=template&id=3a9b75c1&
-var dotsvue_type_template_id_3a9b75c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"viewBox":"0 0 120 30","xmlns":"http://www.w3.org/2000/svg","fill":_vm.color,"width":_vm.width,"height":_vm.height}},[_c('circle',{attrs:{"cx":"15","cy":"15","r":"15"}},[_c('animate',{attrs:{"attributeName":"r","from":"15","to":"15","begin":"0s","dur":"0.8s","values":"15;9;15","calcMode":"linear","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"fill-opacity","from":"1","to":"1","begin":"0s","dur":"0.8s","values":"1;.5;1","calcMode":"linear","repeatCount":"indefinite"}})]),_c('circle',{attrs:{"cx":"60","cy":"15","r":"9","fill-opacity":"0.3"}},[_c('animate',{attrs:{"attributeName":"r","from":"9","to":"9","begin":"0s","dur":"0.8s","values":"9;15;9","calcMode":"linear","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"fill-opacity","from":"0.5","to":"0.5","begin":"0s","dur":"0.8s","values":".5;1;.5","calcMode":"linear","repeatCount":"indefinite"}})]),_c('circle',{attrs:{"cx":"105","cy":"15","r":"15"}},[_c('animate',{attrs:{"attributeName":"r","from":"15","to":"15","begin":"0s","dur":"0.8s","values":"15;9;15","calcMode":"linear","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"fill-opacity","from":"1","to":"1","begin":"0s","dur":"0.8s","values":"1;.5;1","calcMode":"linear","repeatCount":"indefinite"}})])])}
-var dotsvue_type_template_id_3a9b75c1_staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=template&id=3a9b75c1&
-
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/dots.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var dotsvue_type_script_lang_js_ = ({
+/* harmony default export */ const dotsvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
   name: 'dots',
@@ -386,74 +338,103 @@ props: {
       type: String,
-      "default": '#000'
+      default: '#000'
     },
     height: {
       type: Number,
-      "default": 240
+      default: 240
     },
     width: {
       type: Number,
-      "default": 60
+      default: 60
     }
   }
-});
-// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=script&lang=js&
- /* harmony default export */ var loaders_dotsvue_type_script_lang_js_ = (dotsvue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./src/loaders/dots.vue
+}));
+;// CONCATENATED MODULE: ./src/loaders/dots.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./src/loaders/dots.vue
 
 
 
+dotsvue_type_script_lang_js.render = dotsvue_type_template_id_6ecfb4ba_render
 
+/* harmony default export */ const dots = (dotsvue_type_script_lang_js);
+;// 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
 
-/* normalize component */
 
-var dots_component = normalizeComponent(
-  loaders_dotsvue_type_script_lang_js_,
-  dotsvue_type_template_id_3a9b75c1_render,
-  dotsvue_type_template_id_3a9b75c1_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
+const barsvue_type_template_id_f81ac1c0_hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
+  x: "0",
+  y: "13",
+  width: "4",
+  height: "5"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "height",
+  attributeType: "XML",
+  values: "5;21;5",
+  begin: "0s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "y",
+  attributeType: "XML",
+  values: "13; 5; 13",
+  begin: "0s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+})], -1);
 
-/* harmony default export */ var dots = (dots_component.exports);
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/bars.vue?vue&type=template&id=db670f7e&
-var barsvue_type_template_id_db670f7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 30 30","height":_vm.height,"width":_vm.width,"fill":_vm.color}},[_c('rect',{attrs:{"x":"0","y":"13","width":"4","height":"5"}},[_c('animate',{attrs:{"attributeName":"height","attributeType":"XML","values":"5;21;5","begin":"0s","dur":"0.6s","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"y","attributeType":"XML","values":"13; 5; 13","begin":"0s","dur":"0.6s","repeatCount":"indefinite"}})]),_c('rect',{attrs:{"x":"10","y":"13","width":"4","height":"5"}},[_c('animate',{attrs:{"attributeName":"height","attributeType":"XML","values":"5;21;5","begin":"0.15s","dur":"0.6s","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"y","attributeType":"XML","values":"13; 5; 13","begin":"0.15s","dur":"0.6s","repeatCount":"indefinite"}})]),_c('rect',{attrs:{"x":"20","y":"13","width":"4","height":"5"}},[_c('animate',{attrs:{"attributeName":"height","attributeType":"XML","values":"5;21;5","begin":"0.3s","dur":"0.6s","repeatCount":"indefinite"}}),_c('animate',{attrs:{"attributeName":"y","attributeType":"XML","values":"13; 5; 13","begin":"0.3s","dur":"0.6s","repeatCount":"indefinite"}})])])}
-var barsvue_type_template_id_db670f7e_staticRenderFns = []
+const barsvue_type_template_id_f81ac1c0_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
+  x: "10",
+  y: "13",
+  width: "4",
+  height: "5"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "height",
+  attributeType: "XML",
+  values: "5;21;5",
+  begin: "0.15s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "y",
+  attributeType: "XML",
+  values: "13; 5; 13",
+  begin: "0.15s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+})], -1);
 
+const barsvue_type_template_id_f81ac1c0_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("rect", {
+  x: "20",
+  y: "13",
+  width: "4",
+  height: "5"
+}, [/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "height",
+  attributeType: "XML",
+  values: "5;21;5",
+  begin: "0.3s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createVNode)("animate", {
+  attributeName: "y",
+  attributeType: "XML",
+  values: "13; 5; 13",
+  begin: "0.3s",
+  dur: "0.6s",
+  repeatCount: "indefinite"
+})], -1);
 
-// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=template&id=db670f7e&
+function barsvue_type_template_id_f81ac1c0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createBlock)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 30 30",
+    height: _ctx.height,
+    width: _ctx.width,
+    fill: _ctx.color
+  }, [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"]);
+}
+;// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=template&id=f81ac1c0
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/loaders/bars.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var barsvue_type_script_lang_js_ = ({
+;// 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
+
+/* harmony default export */ const barsvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
   name: 'bars',
@@ -463,41 +444,28 @@ props: {
       type: String,
-      "default": '#000'
+      default: '#000'
     },
     height: {
       type: Number,
-      "default": 40
+      default: 40
     },
     width: {
       type: Number,
-      "default": 40
+      default: 40
     }
   }
-});
-// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=script&lang=js&
- /* harmony default export */ var loaders_barsvue_type_script_lang_js_ = (barsvue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./src/loaders/bars.vue
+}));
+;// CONCATENATED MODULE: ./src/loaders/bars.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./src/loaders/bars.vue
 
 
 
+barsvue_type_script_lang_js.render = barsvue_type_template_id_f81ac1c0_render
 
+/* harmony default export */ const bars = (barsvue_type_script_lang_js);
+;// CONCATENATED MODULE: ./src/loaders/index.js
 
-/* normalize component */
 
-var bars_component = normalizeComponent(
-  loaders_barsvue_type_script_lang_js_,
-  barsvue_type_template_id_db670f7e_render,
-  barsvue_type_template_id_db670f7e_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
 
-/* harmony default export */ var bars = (bars_component.exports);
-// CONCATENATED MODULE: ./src/loaders/index.js
-
-
-
-/* harmony default export */ var loaders = ({
+/* harmony default export */ const loaders = ({
   Spinner: spinner,
@@ -507,31 +475,8 @@ Dots: dots,
 });
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/js/Component.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
+;// 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
 
 
 
-/* harmony default export */ var Componentvue_type_script_lang_js_ = ({
+
+/* harmony default export */ const Componentvue_type_script_lang_js = ((0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.defineComponent)({
   name: 'vue-loading',
@@ -542,18 +487,18 @@ mixins: [trapFocusMixin],
     programmatic: Boolean,
-    container: [Object, Function, HTMLElement],
+    container: [Object, Function, MayBeHTMLElement],
     isFullPage: {
       type: Boolean,
-      "default": true
+      default: true
     },
     enforceFocus: {
       type: Boolean,
-      "default": true
+      default: true
     },
     lockScroll: {
       type: Boolean,
-      "default": false
+      default: false
     },
     transition: {
       type: String,
-      "default": 'fade'
+      default: 'fade'
     },
@@ -571,3 +516,3 @@
       type: Function,
-      "default": function _default() {}
+      default: () => {}
     },
@@ -578,3 +523,3 @@ color: String,
       type: String,
-      "default": '2px'
+      default: '2px'
     },
@@ -587,6 +532,8 @@ opacity: Number,
       type: String,
-      "default": 'spinner'
+      default: 'spinner'
     }
   },
-  data: function data() {
+  emits: ['hide', 'update:active'],
+
+  data() {
     return {
@@ -597,22 +544,9 @@ // Don't mutate the prop
   },
+
   components: loaders,
-  beforeMount: function beforeMount() {
-    // Insert the component in DOM when called programmatically
-    if (this.programmatic) {
-      if (this.container) {
-        this.isFullPage = false;
-        this.container.appendChild(this.$el);
-      } else {
-        document.body.appendChild(this.$el);
-      }
-    }
-  },
-  mounted: function mounted() {
-    // Activate immediately when called programmatically
-    if (this.programmatic) {
-      this.isActive = true;
-    }
 
+  mounted() {
     document.addEventListener('keyup', this.keyPress);
   },
+
   methods: {
@@ -623,3 +557,3 @@ /**
      */
-    cancel: function cancel() {
+    cancel() {
       if (!this.canCancel || !this.isActive) return;
@@ -633,18 +567,19 @@ this.hide();
      */
-    hide: function hide() {
-      var _this = this;
-
+    hide() {
       this.$emit('hide');
-      this.$emit('update:active', false); // Timeout for the animation complete before destroying
+      this.$emit('update:active', false);
 
       if (this.programmatic) {
-        this.isActive = false;
-        setTimeout(function () {
-          _this.$destroy();
+        this.isActive = false; // Timeout for the animation complete before destroying
 
-          removeElement(_this.$el);
+        setTimeout(() => {
+          const parent = this.$refs.root.parentElement; // unmount the component
+
+          (0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.render)(null, parent);
+          removeElement(parent);
         }, 150);
       }
     },
-    disableScroll: function disableScroll() {
+
+    disableScroll() {
       if (this.isFullPage && this.lockScroll) {
@@ -654,3 +589,4 @@ document.body.classList.add('vld-shown');
     },
-    enableScroll: function enableScroll() {
+
+    enableScroll() {
       if (this.isFullPage && this.lockScroll) {
@@ -666,12 +602,14 @@ document.body.classList.remove('vld-shown');
      */
-    keyPress: function keyPress(event) {
+    keyPress(event) {
       // todo keyCode is deprecated
       if (event.keyCode === 27) this.cancel();
     }
+
   },
   watch: {
-    active: function active(value) {
+    active(value) {
       this.isActive = value;
     },
-    isActive: function isActive(value) {
+
+    isActive(value) {
       if (value) {
@@ -683,87 +621,78 @@ this.disableScroll();
     }
+
   },
   computed: {
-    bgStyle: function bgStyle() {
+    bgStyle() {
       return {
         background: this.backgroundColor,
         opacity: this.opacity,
-        backdropFilter: "blur(".concat(this.blur, ")")
+        backdropFilter: `blur(${this.blur})`
       };
     }
+
   },
-  beforeDestroy: function beforeDestroy() {
+
+  beforeUnmount() {
     document.removeEventListener('keyup', this.keyPress);
   }
-});
-// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=script&lang=js&
- /* harmony default export */ var js_Componentvue_type_script_lang_js_ = (Componentvue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./src/js/Component.vue
 
+}));
+;// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./src/js/Component.vue
 
 
 
+Componentvue_type_script_lang_js.render = render
 
-/* normalize component */
+/* harmony default export */ const Component = (Componentvue_type_script_lang_js);
+;// CONCATENATED MODULE: ./src/js/api.js
 
-var Component_component = normalizeComponent(
-  js_Componentvue_type_script_lang_js_,
-  render,
-  staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
 
-/* harmony default export */ var Component = (Component_component.exports);
-// CONCATENATED MODULE: ./src/js/api.js
+function useLoading(globalProps = {}, globalSlots = {}) {
+  return {
+    show(props = globalProps, slots = globalSlots) {
+      const forceProps = {
+        programmatic: true,
+        lockScroll: true,
+        isFullPage: false,
+        active: true
+      };
+      const propsData = Object.assign({}, globalProps, props, forceProps);
+      let container = propsData.container;
 
+      if (!propsData.container) {
+        container = document.body;
+        propsData.isFullPage = true;
+      }
 
-var api_Api = function Api(Vue) {
-  var globalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var globalSlots = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  return {
-    show: function show() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalProps;
-      var slots = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : globalSlots;
-      var forceProps = {
-        programmatic: true
+      const mergedSlots = Object.assign({}, globalSlots, slots);
+      const instance = createComponent(Component, propsData, container, mergedSlots);
+      return {
+        hide: instance.ctx.hide
       };
-      var propsData = Object.assign({}, globalProps, props, forceProps);
-      var instance = new (Vue.extend(Component))({
-        el: document.createElement('div'),
-        propsData: propsData
-      });
-      var mergedSlots = Object.assign({}, globalSlots, slots);
-      Object.keys(mergedSlots).map(function (name) {
-        instance.$slots[name] = mergedSlots[name];
-      });
-      return instance;
     }
+
   };
-};
+}
+;// CONCATENATED MODULE: ./src/index.js
 
-/* harmony default export */ var js_api = (api_Api);
-// EXTERNAL MODULE: ./src/css/index.css
-var css = __webpack_require__(0);
 
-// CONCATENATED MODULE: ./src/index.js
 
 
+const Plugin = (app, props = {}, slots = {}) => {
+  const instance = useLoading(app, props, slots);
+  app.config.globalProperties.$loading = instance;
+  app.provide('$loading', instance);
+};
 
+Component.install = Plugin;
+/* harmony default export */ const src = (Component);
 
-var src_Plugin = function Plugin(Vue) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var slots = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var api = js_api(Vue, props, slots);
-  Vue.$loading = api;
-  Vue.prototype.$loading = api;
-};
+})();
 
-Component.install = src_Plugin;
-/* harmony default export */ var src = __webpack_exports__["default"] = (Component);
-
-/***/ })
-/******/ ])["default"];
+__webpack_exports__ = __webpack_exports__.default;
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
 });

dist/vue-loading.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueLoading",[],e):"object"==typeof exports?exports.VueLoading=e():t.VueLoading=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e,i){},function(t,e,i){"use strict";i.r(e);var n="undefined"!=typeof window?window.HTMLElement:Object,r={mounted:function(){this.enforceFocus&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn:function(t){if(this.isActive&&t.target!==this.$el&&!this.$el.contains(t.target)){var e=this.container?this.container:this.isFullPage?null:this.$el.parentElement;(this.isFullPage||e&&e.contains(t.target))&&(t.preventDefault(),this.$el.focus())}}},beforeDestroy:function(){document.removeEventListener("focusin",this.focusIn)}};function a(t,e,i,n,r,a,o,s){var l,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),a&&(u._scopeId="data-v-"+a),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):r&&(l=s?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(t,e){return l.call(e),c(t,e)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:u}}var o=a({name:"spinner",props:{color:{type:String,default:"#000"},height:{type:Number,default:64},width:{type:Number,default:64}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,stroke:this.color}},[e("g",{attrs:{fill:"none","fill-rule":"evenodd"}},[e("g",{attrs:{transform:"translate(1 1)","stroke-width":"2"}},[e("circle",{attrs:{"stroke-opacity":".25",cx:"18",cy:"18",r:"18"}}),e("path",{attrs:{d:"M36 18c0-9.94-8.06-18-18-18"}},[e("animateTransform",{attrs:{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.8s",repeatCount:"indefinite"}})],1)])])])}),[],!1,null,null,null).exports,s=a({name:"dots",props:{color:{type:String,default:"#000"},height:{type:Number,default:240},width:{type:Number,default:60}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:this.color,width:this.width,height:this.height}},[e("circle",{attrs:{cx:"15",cy:"15",r:"15"}},[e("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})]),e("circle",{attrs:{cx:"60",cy:"15",r:"9","fill-opacity":"0.3"}},[e("animate",{attrs:{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"}})]),e("circle",{attrs:{cx:"105",cy:"15",r:"15"}},[e("animate",{attrs:{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"}})])])}),[],!1,null,null,null).exports,l=a({name:"bars",props:{color:{type:String,default:"#000"},height:{type:Number,default:40},width:{type:Number,default:40}}},(function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 30",height:this.height,width:this.width,fill:this.color}},[e("rect",{attrs:{x:"0",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0s",dur:"0.6s",repeatCount:"indefinite"}})]),e("rect",{attrs:{x:"10",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"}})]),e("rect",{attrs:{x:"20",y:"13",width:"4",height:"5"}},[e("animate",{attrs:{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"}}),e("animate",{attrs:{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"}})])])}),[],!1,null,null,null).exports,u=a({name:"vue-loading",mixins:[r],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,n],isFullPage:{type:Boolean,default:!0},enforceFocus:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!1},transition:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:function(){}},color:String,backgroundColor:String,blur:{type:String,default:"2px"},opacity:Number,width:Number,height:Number,zIndex:Number,loader:{type:String,default:"spinner"}},data:function(){return{isActive:this.active}},components:{Spinner:o,Dots:s,Bars:l},beforeMount:function(){this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0),document.addEventListener("keyup",this.keyPress)},methods:{cancel:function(){this.canCancel&&this.isActive&&(this.hide(),this.onCancel.apply(null,arguments))},hide:function(){var t=this;this.$emit("hide"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout((function(){var e;t.$destroy(),void 0!==(e=t.$el).remove?e.remove():e.parentNode.removeChild(e)}),150))},disableScroll:function(){this.isFullPage&&this.lockScroll&&document.body.classList.add("vld-shown")},enableScroll:function(){this.isFullPage&&this.lockScroll&&document.body.classList.remove("vld-shown")},keyPress:function(t){27===t.keyCode&&this.cancel()}},watch:{active:function(t){this.isActive=t},isActive:function(t){t?this.disableScroll():this.enableScroll()}},computed:{bgStyle:function(){return{background:this.backgroundColor,opacity:this.opacity,backdropFilter:"blur(".concat(this.blur,")")}}},beforeDestroy:function(){document.removeEventListener("keyup",this.keyPress)}},(function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("transition",{attrs:{name:t.transition}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.isActive,expression:"isActive"}],staticClass:"vld-overlay is-active",class:{"is-full-page":t.isFullPage},style:{zIndex:t.zIndex},attrs:{tabindex:"0","aria-busy":t.isActive,"aria-label":"Loading"}},[i("div",{staticClass:"vld-background",style:t.bgStyle,on:{click:function(e){return e.preventDefault(),t.cancel(e)}}}),i("div",{staticClass:"vld-icon"},[t._t("before"),t._t("default",[i(t.loader,{tag:"component",attrs:{color:t.color,width:t.width,height:t.height}})]),t._t("after")],2)])])}),[],!1,null,null,null).exports,c=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return{show:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i,a={programmatic:!0},o=Object.assign({},e,n,a),s=new(t.extend(u))({el:document.createElement("div"),propsData:o}),l=Object.assign({},i,r);return Object.keys(l).map((function(t){s.$slots[t]=l[t]})),s}}};i(0);u.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=c(t,e,i);t.$loading=n,t.prototype.$loading=n};e.default=u}]).default}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VueLoading",["vue"],t):"object"==typeof exports?exports.VueLoading=t(require("vue")):e.VueLoading=t(e.Vue)}(self,(function(e){return(()=>{"use strict";var t={982:t=>{t.exports=e}},i={};function o(e){var r=i[e];if(void 0!==r)return r.exports;var n=i[e]={exports:{}};return t[e](n,n.exports,o),n.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{o.d(r,{default:()=>k});var e=o(982);const t="undefined"!=typeof window?window.HTMLElement:Object,i={class:"vld-icon"};const n={mounted(){this.enforceFocus&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn(e){if(!this.isActive)return;if(e.target===this.$refs.root||this.$refs.root.contains(e.target))return;let t=this.container?this.container:this.isFullPage?null:this.$refs.root.parentElement;(this.isFullPage||t&&t.contains(e.target))&&(e.preventDefault(),this.$refs.root.focus())}},beforeUnmount(){document.removeEventListener("focusin",this.focusIn)}},a=(0,e.createVNode)("g",{fill:"none","fill-rule":"evenodd"},[(0,e.createVNode)("g",{transform:"translate(1 1)","stroke-width":"2"},[(0,e.createVNode)("circle",{"stroke-opacity":".25",cx:"18",cy:"18",r:"18"}),(0,e.createVNode)("path",{d:"M36 18c0-9.94-8.06-18-18-18"},[(0,e.createVNode)("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.8s",repeatCount:"indefinite"})])])],-1);const c=(0,e.defineComponent)({name:"spinner",props:{color:{type:String,default:"#000"},height:{type:Number,default:64},width:{type:Number,default:64}}});c.render=function(t,i,o,r,n,c){return(0,e.openBlock)(),(0,e.createBlock)("svg",{viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:t.width,height:t.height,stroke:t.color},[a],8,["width","height","stroke"])};const l=c,s=(0,e.createVNode)("circle",{cx:"15",cy:"15",r:"15"},[(0,e.createVNode)("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})],-1),d=(0,e.createVNode)("circle",{cx:"60",cy:"15",r:"9","fill-opacity":"0.3"},[(0,e.createVNode)("animate",{attributeName:"r",from:"9",to:"9",begin:"0s",dur:"0.8s",values:"9;15;9",calcMode:"linear",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"fill-opacity",from:"0.5",to:"0.5",begin:"0s",dur:"0.8s",values:".5;1;.5",calcMode:"linear",repeatCount:"indefinite"})],-1),u=(0,e.createVNode)("circle",{cx:"105",cy:"15",r:"15"},[(0,e.createVNode)("animate",{attributeName:"r",from:"15",to:"15",begin:"0s",dur:"0.8s",values:"15;9;15",calcMode:"linear",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"fill-opacity",from:"1",to:"1",begin:"0s",dur:"0.8s",values:"1;.5;1",calcMode:"linear",repeatCount:"indefinite"})],-1);const h=(0,e.defineComponent)({name:"dots",props:{color:{type:String,default:"#000"},height:{type:Number,default:240},width:{type:Number,default:60}}});h.render=function(t,i,o,r,n,a){return(0,e.openBlock)(),(0,e.createBlock)("svg",{viewBox:"0 0 120 30",xmlns:"http://www.w3.org/2000/svg",fill:t.color,width:t.width,height:t.height},[s,d,u],8,["fill","width","height"])};const p=h,f=(0,e.createVNode)("rect",{x:"0",y:"13",width:"4",height:"5"},[(0,e.createVNode)("animate",{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0s",dur:"0.6s",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0s",dur:"0.6s",repeatCount:"indefinite"})],-1),m=(0,e.createVNode)("rect",{x:"10",y:"13",width:"4",height:"5"},[(0,e.createVNode)("animate",{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.15s",dur:"0.6s",repeatCount:"indefinite"})],-1),g=(0,e.createVNode)("rect",{x:"20",y:"13",width:"4",height:"5"},[(0,e.createVNode)("animate",{attributeName:"height",attributeType:"XML",values:"5;21;5",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"}),(0,e.createVNode)("animate",{attributeName:"y",attributeType:"XML",values:"13; 5; 13",begin:"0.3s",dur:"0.6s",repeatCount:"indefinite"})],-1);const v=(0,e.defineComponent)({name:"bars",props:{color:{type:String,default:"#000"},height:{type:Number,default:40},width:{type:Number,default:40}}});v.render=function(t,i,o,r,n,a){return(0,e.openBlock)(),(0,e.createBlock)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 30 30",height:t.height,width:t.width,fill:t.color},[f,m,g],8,["height","width","fill"])};const b={Spinner:l,Dots:p,Bars:v},y=(0,e.defineComponent)({name:"vue-loading",mixins:[n],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,t],isFullPage:{type:Boolean,default:!0},enforceFocus:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!1},transition:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:()=>{}},color:String,backgroundColor:String,blur:{type:String,default:"2px"},opacity:Number,width:Number,height:Number,zIndex:Number,loader:{type:String,default:"spinner"}},emits:["hide","update:active"],data(){return{isActive:this.active}},components:b,mounted(){document.addEventListener("keyup",this.keyPress)},methods:{cancel(){this.canCancel&&this.isActive&&(this.hide(),this.onCancel.apply(null,arguments))},hide(){this.$emit("hide"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout((()=>{const t=this.$refs.root.parentElement;var i,o;(0,e.render)(null,t),void 0!==(i=t).remove?i.remove():null===(o=i.parentNode)||void 0===o||o.removeChild(i)}),150))},disableScroll(){this.isFullPage&&this.lockScroll&&document.body.classList.add("vld-shown")},enableScroll(){this.isFullPage&&this.lockScroll&&document.body.classList.remove("vld-shown")},keyPress(e){27===e.keyCode&&this.cancel()}},watch:{active(e){this.isActive=e},isActive(e){e?this.disableScroll():this.enableScroll()}},computed:{bgStyle(){return{background:this.backgroundColor,opacity:this.opacity,backdropFilter:`blur(${this.blur})`}}},beforeUnmount(){document.removeEventListener("keyup",this.keyPress)}});y.render=function(t,o,r,n,a,c){return(0,e.openBlock)(),(0,e.createBlock)(e.Transition,{ref:"root",name:t.transition},{default:(0,e.withCtx)((()=>[(0,e.withDirectives)((0,e.createVNode)("div",{tabindex:"0",class:["vld-overlay is-active",{"is-full-page":t.isFullPage}],"aria-busy":t.isActive,"aria-label":"Loading",style:{zIndex:t.zIndex}},[(0,e.createVNode)("div",{class:"vld-background",onClick:o[1]||(o[1]=(0,e.withModifiers)(((...e)=>t.cancel&&t.cancel(...e)),["prevent"])),style:t.bgStyle},null,4),(0,e.createVNode)("div",i,[(0,e.renderSlot)(t.$slots,"before"),(0,e.renderSlot)(t.$slots,"default",{},(()=>[((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.loader),{color:t.color,width:t.width,height:t.height},null,8,["color","width","height"]))])),(0,e.renderSlot)(t.$slots,"after")])],14,["aria-busy"]),[[e.vShow,t.isActive]])])),_:3},8,["name"])};const N=y;function w(t={},i={}){return{show(o=t,r=i){const n=Object.assign({},t,o,{programmatic:!0,lockScroll:!0,isFullPage:!1,active:!0});let a=n.container;n.container||(a=document.body,n.isFullPage=!0);const c=Object.assign({},i,r);return{hide:function(t,i,o,r={}){const n=(0,e.h)(t,i,r),a=document.createElement("div");return a.classList.add("vld-container"),o.appendChild(a),(0,e.render)(n,a),n.component}(N,n,a,c).ctx.hide}}}}N.install=(e,t={},i={})=>{const o=w(e,t);e.config.globalProperties.$loading=o,e.provide("$loading",o)};const k=N})(),r=r.default})()}));

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "3.4.2",
+  "version": "4.0.0",
   "description": "Vue.js component for full screen loading indicator.",
@@ -36,39 +36,35 @@ "main": "dist/vue-loading.js",
     "start": "yarn run dev",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --config=webpack.config.dev.js",
-    "docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode production",
-    "build": "cross-env NODE_ENV=production webpack --progress --mode production",
-    "prepublishOnly": "yarn run test && yarn run build"
+    "dev": "cross-env NODE_ENV=development webpack serve --progress --hot --config=webpack.config.dev.js",
+    "docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode=production",
+    "build": "cross-env NODE_ENV=production webpack --progress --mode=production"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.11.4",
-    "@babel/preset-env": "^7.11.0",
-    "@vue/test-utils": "^1.0.5",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
-    "bootstrap": "^4.5.2",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/test-utils": "^2.0.0-rc.6",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^4.6.0",
     "clean-webpack-plugin": "^3.0.0",
-    "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
-    "jest": "^26.4.2",
-    "mini-css-extract-plugin": "^0.11.0",
-    "style-loader": "^1.2.1",
-    "unminified-webpack-plugin": "^2.0.0",
-    "vue": "^2.6.12",
-    "vue-jest": "^3.0.6",
-    "vue-loader": "^15.9.3",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.4",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^2.0.0",
+    "vue": "^3.0",
+    "vue-jest": "^5.0.0-alpha.8",
+    "vue-loader": "^16.0",
+    "webpack": "^5.34.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.0.0-beta.2"
   },
   "peerDependencies": {
-    "vue": "^2.0.0"
+    "vue": "^3.0.0"
   },
   "engines": {
-    "node": ">=6.9.0",
-    "npm": ">=3.10.0"
+    "node": ">=10.13.0"
   },
@@ -84,5 +80,2 @@ "jest": {
     ],
-    "setupFiles": [
-      "<rootDir>/__test__/setup.js"
-    ],
     "transform": {
@@ -89,0 +82,0 @@ "^.+\\.js$": "babel-jest",

README.md

 # Vue Loading Overlay Component
 
-[![downloads](https://badgen.net/npm/dt/vue-loading-overlay)](http://npm-stats.com/~packages/vue-loading-overlay)
+[![downloads](https://badgen.net/npm/dt/vue-loading-overlay)](https://npm-stat.com/charts.html?package=vue-loading-overlay&from=2018-01-01)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-loading-overlay/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-loading-overlay)
@@ -15,9 +15,16 @@ [![npm-version](https://badgen.net/npm/v/vue-loading-overlay)](https://www.npmjs.com/package/vue-loading-overlay)
 
+### Version matrix
+
+| Vue.js version | Package version | Branch        |
+| :---           | :---:           | ---:          | 
+| 2.x            | 3.x             | [3.x](https://github.com/ankurk91/vue-loading-overlay/tree/v3.x) |
+| 3.x            | 4.x             | `next`          |
+
 ## Installation
 ```bash
 # yarn
-yarn add vue-loading-overlay
+yarn add vue-loading-overlay@^4.0
 
 # npm
-npm install vue-loading-overlay 
+npm install vue-loading-overlay@^4.0 
 ```
@@ -30,3 +37,3 @@
     <div class="vld-parent">
-        <loading :active.sync="isLoading" 
+        <loading v-model:active="isLoading" 
         :can-cancel="true" 
@@ -74,2 +81,12 @@ :on-cancel="onCancel"
 ### As plugin
+* Install the plugin in your app
+```js
+import {createApp} from 'vue';
+import VueLoading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
+// Your app initialization logic goes here
+const app = createApp().mount('#app')
+app.use(VueLoading);
+```
+* Then use the plugin in your components
 ```html
@@ -85,10 +102,2 @@ <template>
 <script>
-    import Vue from 'vue';
-    // Import component
-    import Loading from 'vue-loading-overlay';
-    // Import stylesheet
-    import 'vue-loading-overlay/dist/vue-loading.css';
-    // Init plugin
-    Vue.use(Loading);
-
     export default {
@@ -126,7 +135,7 @@ data() {
 | :---             | :---:               | :---:                | :---             |
-| active           | Boolean             | `false`              | Show loading by default when `true`, use the `.sync` modifier to make it two-way binding |
+| active           | Boolean             | `false`              | Show loading by default when `true`, use it as `v-model:active` |
 | can-cancel       | Boolean             | `false`              | Allow user to cancel by pressing ESC or clicking outside |
 | on-cancel        | Function            | `()=>{}`             | Do something upon cancel, works in conjunction with `can-cancel`  |
 | is-full-page     | Boolean             | `true`               | When `false`; limit loader to its container^ |
-| transition       | String              | `fade`               | [Transition](https://vuejs.org/v2/guide/transitions.html) name |
+| transition       | String              | `fade`               | Transition name |
 | color            | String              | `#000`               | Customize the color of loading icon |
@@ -150,10 +159,12 @@ | height           | Number              | *                    | Customize the height of loading icon |
 
-* `default` : Replace the animated icon with yours
-* `before` : Place anything before the animated icon, you may need to style this.
-* `after` : Place anything after the animated icon, you may need to style this.
+* `default` - Replace the animated icon with yours
+* `before` - Place anything before the animated icon, you may need to style this.
+* `after` - Place anything after the animated icon, you may need to style this.
 
 ## API methods
-### `Vue.$loading.show(?propsData,?slots)`
+### `this.$loading.show(?propsData,?slots)`
 ```js
-let loader = Vue.$loading.show({
+import {h} from 'vue';
+
+let loader = this.$loading.show({
   // Pass props by their camelCased names
@@ -172,3 +183,3 @@ container: this.$refs.loadingContainer,
   // Pass slots by their names
-  default: this.$createElement('your-custom-loader-component-name'),
+  default: h('your-custom-loader-component-name'),
 });
@@ -182,3 +193,3 @@ // hide loader whenever you want
 ```js
-Vue.use(Loading, {
+app.use(Loading, {
   // props
@@ -192,3 +203,3 @@ color: 'red'
 ```js
-let loader = Vue.$loading.show({
+let loader = this.$loading.show({
  color: 'blue'
@@ -203,10 +214,10 @@ },{
 <!-- Vue js -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
 <!-- Lastly add this package -->
-<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
-<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@4"></script>
+<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@4/dist/vue-loading.css" rel="stylesheet">
 <!-- Init the plugin and component-->
 <script>
-Vue.use(VueLoading);
-Vue.component('loading', VueLoading)
+app.use(VueLoading);
+app.component('loading', VueLoading)
 </script>
@@ -226,3 +237,3 @@ ```
 ## Testing
-* This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils) for testing.
+* This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils-next) for testing.
 * Tests can be found in `__test__` folder.
@@ -229,0 +240,0 @@ * Execute tests with this command `yarn test`

src/index.js

@@ -0,9 +1,9 @@
+import {useLoading} from './js/api';
 import Component from './js/Component.vue';
-import LoadingApi from './js/api';
 import './css/index.css';
 
-const Plugin = (Vue, props = {}, slots = {}) => {
-  let api = LoadingApi(Vue, props, slots);
-  Vue.$loading = api;
-  Vue.prototype.$loading = api;
+const Plugin = (app, props = {}, slots = {}) => {
+  const instance = useLoading(app, props, slots);
+  app.config.globalProperties.$loading = instance;
+  app.provide('$loading', instance)
 };
@@ -14,1 +14,3 @@
 export default Component;
+export {useLoading}
+

src/js/api.js

@@ -1,26 +0,31 @@
-import Component from './Component.vue'
+import {createComponent} from './helpers';
+import LoadingVue from "./Component.vue";
 
-const Api = (Vue, globalProps = {}, globalSlots = {}) => {
+export function useLoading(globalProps = {}, globalSlots = {}) {
+
   return {
     show(props = globalProps, slots = globalSlots) {
       const forceProps = {
-        programmatic: true
-      };
+        programmatic: true,
+        lockScroll: true,
+        isFullPage: false,
+        active: true,
+      }
+
       const propsData = Object.assign({}, globalProps, props, forceProps);
+      let container = propsData.container;
 
-      const instance = new (Vue.extend(Component))({
-        el: document.createElement('div'),
-        propsData
-      });
+      if (!propsData.container) {
+        container = document.body;
+        propsData.isFullPage = true;
+      }
 
       const mergedSlots = Object.assign({}, globalSlots, slots);
-      Object.keys(mergedSlots).map((name) => {
-        instance.$slots[name] = mergedSlots[name]
-      });
+      const instance = createComponent(LoadingVue, propsData, container, mergedSlots);
 
-      return instance;
-    }
+      return {
+        hide: instance.ctx.hide
+      }
+    },
   }
-};
-
-export default Api;
+}

src/js/helpers.js

@@ -1,15 +0,25 @@
-const removeElement = (el) => {
+import {h, render} from 'vue';
+
+export function removeElement(el) {
   if (typeof el.remove !== 'undefined') {
     el.remove()
   } else {
-    el.parentNode.removeChild(el)
+    el.parentNode?.removeChild(el)
   }
-};
+}
 
-const hasWindow = () => {
+export function createComponent(component, props, parentContainer, slots = {}) {
+  const vNode = h(component, props, slots)
+  const container = document.createElement('div');
+  container.classList.add('vld-container')
+  parentContainer.appendChild(container);
+  render(vNode, container);
+
+  return vNode.component
+}
+
+export function hasWindow() {
   return typeof window !== 'undefined';
-};
+}
 
-const HTMLElement = hasWindow() ? window.HTMLElement : Object;
-
-export {removeElement, hasWindow, HTMLElement}
+export const MayBeHTMLElement = hasWindow() ? window.HTMLElement : Object;

src/js/trapFocusMixin.js

@@ -19,9 +19,9 @@ export default {
         // Event target is the loading div element itself
-        event.target === this.$el ||
+        event.target === this.$refs.root ||
         // Event target is inside the loading div
-        this.$el.contains(event.target)
+        this.$refs.root.contains(event.target)
       ) return;
 
       // Use container as parent when available otherwise use parent element when isFullPage is false
-      let parent = this.container ? this.container : (this.isFullPage ? null : this.$el.parentElement);
+      let parent = this.container ? this.container : (this.isFullPage ? null : this.$refs.root.parentElement);
 
@@ -36,9 +36,9 @@ if (
         event.preventDefault();
-        this.$el.focus()
+        this.$refs.root.focus()
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('focusin', this.focusIn)
   }
 }

types/loading.d.ts

@@ -1,5 +0,5 @@
-import {Vue, VueConstructor, ExtendedVue} from 'vue/types/vue'
-import {PluginFunction} from 'vue'
+import {Plugin} from 'vue'
+import {ComponentInternalInstance} from "@vue/runtime-core";
 
-export interface LoaderComponent extends ExtendedVue<any, any, any, any, any> {
+export interface LoaderComponent extends ComponentInternalInstance {
   hide(): void
@@ -10,3 +10,3 @@ }
 
-export interface PluginOptions {
+export interface Props {
   active?: boolean,
@@ -38,19 +38,15 @@ canCancel?: boolean,
 export interface PluginApi {
-  show(options?: PluginOptions, slots?: Slots): LoaderComponent
+  show(props?: Props, slots?: Slots): LoaderComponent
 }
 
-declare class LoadingPlugin {
-  static install: PluginFunction<PluginOptions>
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly $loading: PluginApi;
+  }
 }
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    readonly $loading: PluginApi
-  }
-
-  interface VueConstructor {
-    readonly $loading: PluginApi
-  }
+declare class LoadingPlugin {
+  static install: Plugin<Props>
 }
 
 export default LoadingPlugin

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

21

decreased by-8.7%

Number of downloads

57307

increased by5.17%

Number of lines in readme file

233

increased by4.95%

Worsened metrics

Total package byte prevSize

59769

decreased by-11.6%

Number of package files

18

decreased by-5.26%

Lines of code

801

decreased by-9.18%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes