vue-loading-overlay - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

 # Changelog
 
+### [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
+* Add: trap `focus` feature, user will not be able to tab on elements those are behind the loading overlay
+* a11y: use `aria-live`
+* Fix: detecting `window` object
+* Fix: `z-index` issue on loading element
+* Test: add tests
+* docs: update readme with better examples
+
 ### [2.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.4...2.1.0) 
@@ -8,18 +17,18 @@ * Add: allow loader to be restricted to a container element
 ### [2.0.4](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.3...2.0.4) 
-* Build: `dist` now includes non-minified js file as well
+* 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) 
-* Fix: Webpack build config, [#3](https://github.com/ankurk91/vue-loading-overlay/issues/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) 
-* Fix: Don't call `onCancel` prop functions when loader is not active
+* 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) 
-* Fix: Was not working in non module environments
+* 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 webpack configuration
-* Change: check readme.md file for updated usage instruction
+* Fix: v1.0.0 was completely broken due to a webpack configuration
+* Change: check `readme.md` file for updated usage instruction
 
 ### 1.0.0
 * Initial release

dist/vue-loading.js

@@ -110,8 +110,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-// 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=48345599
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"loading-overlay is-active",class:{'is-full-page': _vm.isFullPage },attrs:{"aria-busy":_vm.isActive}},[_c('div',{staticClass:"loading-background",on:{"click":function($event){$event.preventDefault();return _vm.cancel($event)}}}),_vm._v(" "),_c('div',{staticClass:"loading-icon"})]):_vm._e()])}
+// 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=e8f1fc84&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"loading-overlay is-active",class:{'is-full-page': _vm.isFullPage },attrs:{"tabindex":"0","aria-live":"polite","aria-label":"Loading"}},[_c('div',{staticClass:"loading-background",on:{"click":function($event){$event.preventDefault();return _vm.cancel($event)}}}),_vm._v(" "),_vm._t("default",[_c('div',{staticClass:"loading-icon"})])],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=48345599
+// CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=e8f1fc84&
 
@@ -134,3 +134,41 @@ // CONCATENATED MODULE: ./src/js/util.js
 
-// 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: ./src/js/trapFocusMixin.js
+
+
+/* harmony default export */ var trapFocusMixin = ({
+  mounted: function mounted() {
+    hasWindow() && document.addEventListener('focusin', this.focusIn);
+  },
+
+  methods: {
+    /**
+     * Trap focus event
+     *
+     * @param event
+     */
+    focusIn: function 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;
+
+      if (
+      // When loading is full screen
+      !this.container ||
+      // When loading is NOT full screen and event target is inside the given container
+      this.container && this.container.contains(event.target)) {
+        event.preventDefault();
+        this.$el.focus();
+      }
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    hasWindow() && document.removeEventListener('focusin', this.focusIn);
+  }
+});
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/js/Component.vue?vue&type=script&lang=js&
 //
@@ -148,7 +186,13 @@ //
 //
+//
+//
+//
+//
 
 
 
-/* harmony default export */ var Componentvue_type_script_lang_js = ({
+
+/* harmony default export */ var Componentvue_type_script_lang_js_ = ({
   name: 'vue-loading',
+  mixins: [trapFocusMixin],
   props: {
@@ -162,2 +206,3 @@ active: Boolean,
     },
+    //todo rename this to `transition`
     animation: {
@@ -170,6 +215,3 @@ type: String,
      */
-    canCancel: {
-      type: Boolean,
-      default: false
-    },
+    canCancel: Boolean,
     /**
@@ -185,3 +227,3 @@ * Do something on cancel
     return {
-      // Mutable property
+      // Don't mutate the prop
       isActive: this.active || false
@@ -191,11 +233,12 @@ };
   created: function created() {
-    hasWindow && document.addEventListener('keyup', this.escape);
+    hasWindow() && document.addEventListener('keyup', this.keyPress);
   },
   beforeMount: function beforeMount() {
-    if (hasWindow && this.programmatic) {
-      if (!this.container) {
-        document.body.appendChild(this.$el);
-      } else {
+    // Insert the component in DOM when called programmatically
+    if (hasWindow() && this.programmatic) {
+      if (this.container) {
         this.isFullPage = false;
         this.container.appendChild(this.$el);
+      } else {
+        document.body.appendChild(this.$el);
       }
@@ -205,3 +248,6 @@ }
   mounted: function mounted() {
-    if (this.programmatic) this.isActive = true;
+    // Activate immediately when called programmatically
+    if (this.programmatic) {
+      this.isActive = true;
+    }
   },
@@ -211,8 +257,7 @@
     /**
-     * Hide the Loader if canCancel is set to true.
+     * Proxy to hide() method.
+     * Gets called by ESC button or when click outside
      */
     cancel: function cancel() {
-      if (!this.canCancel) return;
-      if (!this.isActive) return;
-
+      if (!this.canCancel || !this.isActive) return;
       this.hide();
@@ -222,3 +267,3 @@ },
     /**
-     * Emit events, and destroy component if it's programmatic.
+     * Hide and destroy component if it's programmatic.
      */
@@ -228,5 +273,8 @@ hide: function hide() {
 
-      this.onCancel.apply(null, arguments);
+      //todo rename this event to `hide`
       this.$emit('close');
       this.$emit('update:active', false);
+      //todo onCancel should be called only when cancelled by user
+      //todo move next line inside cancel() method
+      this.onCancel.apply(null, arguments);
 
@@ -244,6 +292,9 @@ // Timeout for the animation complete before destroying
     /**
-     * Keypress event that is bound to the document.
+     * Key press event to hide on ESC.
+     *
+     * @param event
      */
-    escape: function escape(event) {
+    keyPress: function keyPress(event) {
       // Esc key
+      // todo keyCode is deprecated
       if (event.keyCode === 27) this.cancel();
@@ -258,7 +309,7 @@ }
   beforeDestroy: function beforeDestroy() {
-    hasWindow && document.removeEventListener('keyup', this.escape);
+    hasWindow() && 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?vue&type=script&lang=js&
+ /* harmony default export */ var js_Componentvue_type_script_lang_js_ = (Componentvue_type_script_lang_js_); 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
@@ -368,3 +419,3 @@ /* globals __VUE_SSR_CONTEXT__ */
 var component = normalizeComponent(
-  js_Componentvue_type_script_lang_js,
+  js_Componentvue_type_script_lang_js_,
   render,
@@ -371,0 +422,0 @@ staticRenderFns,

dist/vue-loading.min.js

@@ -1,1 +0,1 @@
-!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)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var i=function(){return"undefined"!=typeof window},o=i?window.HTMLElement:Object,r=function(e,t,n,i,o,r,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),u)if(s.functional){s._injectStyles=u;var l=s.render;s.render=function(e,t){return u.call(t),l(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:s}}({name:"vue-loading",props:{active:Boolean,programmatic:Boolean,container:[Object,Function,o],isFullPage:{type:Boolean,default:!0},animation:{type:String,default:"fade"},canCancel:{type:Boolean,default:!1},onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i&&document.addEventListener("keyup",this.escape)},beforeMount:function(){i&&this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0)},methods:{cancel:function(){this.canCancel&&this.isActive&&this.hide()},hide:function(){var e=this;this.onCancel.apply(null,arguments),this.$emit("close"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout(function(){var t;e.$destroy(),void 0!==(t=e.$el).remove?t.remove():t.parentNode.removeChild(t)},150))},escape:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i&&document.removeEventListener("keyup",this.escape)}},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:e.animation}},[e.isActive?n("div",{staticClass:"loading-overlay is-active",class:{"is-full-page":e.isFullPage},attrs:{"aria-busy":e.isActive}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),n("div",{staticClass:"loading-icon"})]):e._e()])}).exports,a=n(0),c=n.n(a),u={show:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({programmatic:!0},e);return new(c.a.extend(r))({el:document.createElement("div"),propsData:t})}};n(3),r.install=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.$loading=u,e.prototype.$loading=u},t.default=r},,function(e,t,n){}]).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)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var i=function(){return"undefined"!=typeof window},o=i?window.HTMLElement:Object,r=function(e,t,n,i,o,r,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),u)if(s.functional){s._injectStyles=u;var l=s.render;s.render=function(e,t){return u.call(t),l(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:s}}({name:"vue-loading",mixins:[{mounted:function(){i()&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn:function(e){this.isActive&&(e.target===this.$el||this.$el.contains(e.target)||(!this.container||this.container&&this.container.contains(e.target))&&(e.preventDefault(),this.$el.focus()))}},beforeDestroy:function(){i()&&document.removeEventListener("focusin",this.focusIn)}}],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,o],isFullPage:{type:Boolean,default:!0},animation:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i()&&document.addEventListener("keyup",this.keyPress)},beforeMount:function(){i()&&this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0)},methods:{cancel:function(){this.canCancel&&this.isActive&&this.hide()},hide:function(){var e=this;this.$emit("close"),this.$emit("update:active",!1),this.onCancel.apply(null,arguments),this.programmatic&&(this.isActive=!1,setTimeout(function(){var t;e.$destroy(),void 0!==(t=e.$el).remove?t.remove():t.parentNode.removeChild(t)},150))},keyPress:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i()&&document.removeEventListener("keyup",this.keyPress)}},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:e.animation}},[e.isActive?n("div",{staticClass:"loading-overlay is-active",class:{"is-full-page":e.isFullPage},attrs:{tabindex:"0","aria-live":"polite","aria-label":"Loading"}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),e._t("default",[n("div",{staticClass:"loading-icon"})])],2):e._e()])}).exports,a=n(0),c=n.n(a),u={show:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({programmatic:!0},e);return new(c.a.extend(r))({el:document.createElement("div"),propsData:t})}};n(3),r.install=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.$loading=u,e.prototype.$loading=u},t.default=r},,function(e,t,n){}]).default});

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vue.js v2.x component for full screen loading indicator",
   "main": "dist/vue-loading.js",
-  "unpkg": "dist/vue-loading.min.js",
+  "browser": "dist/vue-loading.min.js",
   "style": "dist/vue-loading.min.css",
@@ -29,30 +29,35 @@ "files": [
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch --onlyChanged --notify",
     "start": "npm run dev",
     "dev": "cross-env NODE_ENV=development webpack-serve --config=webpack.config.dev.js",
-    "build": "cross-env NODE_ENV=production webpack --mode production",
-    "prepublishOnly": "npm run build"
+    "build": "cross-env NODE_ENV=production webpack --progress --mode production",
+    "prepublishOnly": "npm run test && npm run build"
   },
   "dependencies": {},
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.23",
+    "autoprefixer": "^9.0.2",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.0",
+    "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
     "clean-webpack-plugin": "^0.1.18",
-    "cross-env": "^5.1.6",
-    "css-loader": "^0.28.9",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
     "file-loader": "^1.1.6",
     "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.4.0",
-    "node-sass": "^4.9.0",
-    "postcss-loader": "^2.1.5",
-    "sass-loader": "^7.0.1",
+    "jest": "^23.4.2",
+    "mini-css-extract-plugin": "^0.4.1",
+    "node-sass": "^4.9.2",
+    "postcss-loader": "^2.1.6",
+    "sass-loader": "^7.1.0",
     "style-loader": "^0.21.0",
     "unminified-webpack-plugin": "^2.0.0",
-    "vue": "^2.5.13",
-    "vue-loader": "^15.2.4",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^4.10.2",
-    "webpack-command": "^0.2.0",
-    "webpack-serve": "^1.0.2"
+    "vue": "^2.5.17",
+    "vue-jest": "^2.6.0",
+    "vue-loader": "^15.2.6",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.16.3",
+    "webpack-command": "^0.4.1",
+    "webpack-serve": "^2.0.2"
   },
@@ -65,3 +70,18 @@ "peerDependencies": {
     "npm": ">=3.10.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "jsx",
+      "node",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "collectCoverage": false,
+    "testURL": "http://localhost"
   }
 }

README.md

@@ -8,2 +8,3 @@ # Vue Loading Overlay Component
 [![license](https://img.shields.io/github/license/ankurk91/vue-loading-overlay.svg?maxAge=1800)](https://yarnpkg.com/en/package/vue-loading-overlay)
+[![build-status](https://travis-ci.org/ankurk91/vue-loading-overlay.svg?branch=master)](https://travis-ci.org/ankurk91/vue-loading-overlay)
 
@@ -27,7 +28,9 @@ Vue.js v2.x component for full screen loading indicator
 <template>
-    <div>
+    <div class="loading-parent">
         <loading :active.sync="isLoading" 
         :can-cancel="true" 
         :on-cancel="whenCancelled"
-        :is-full-page="true"></loading>
+        :is-full-page="fullPage"></loading>
+        
+        <label><input type="checkbox" v-model="fullPage">Full page?</label>
         <button @click.prevent="doAjax">fetch Data</button>
@@ -42,3 +45,5 @@ </div>
     import 'vue-loading-overlay/dist/vue-loading.min.css';
-
+    // Using axios for the demo only
+    import axios from 'axios';
+    
     export default {
@@ -48,2 +53,3 @@ data() {
                 isLoading: false,
+                fullPage: true
             }
@@ -68,2 +74,7 @@ },
 </script>
+<style>
+.loading-parent {
+  position: relative;
+}
+</style>
 ```
@@ -74,5 +85,6 @@
 <template>
-    <form @submit.prevent="submit">
+    <form @submit.prevent="submit" class="loading-parent" ref="formContainer">
         <!-- your form inputs goes here-->
-        <button type="submit">Save</button>
+        <label><input type="checkbox" v-model="fullPage">Full page?</label>
+        <button type="submit">Login</button>
     </form>
@@ -89,9 +101,18 @@ </template>
     Vue.use(Loading);
+    // Using axios for the demo only
+    import axios from 'axios';
 
     export default {
+        data() {
+            return {
+                fullPage: false
+            }
+        },
         methods: {
             submit() {
-                let loader = this.$loading.show();
+                let loader = this.$loading.show({
+                  container: this.fullPage ? null : this.$refs.formContainer
+                });
                 // AJAX example with axios
-                axios.post('/api').then((response)=>{
+                axios.post('/api/login').then((response)=>{
                   loader.hide()
@@ -103,2 +124,8 @@ })
 </script>
+
+<style>
+.loading-parent {
+  position: relative;
+}
+</style>
 ```
@@ -111,4 +138,6 @@
 | :---             | :---:               | :---:                | :---             |
-| can-cancel       | Boolean             | `false`              | Allow user to cancel? |
-| on-cancel        | Function            | `()=>{}`             | Do something upon cancel |
+| active           | Boolean             | `false`              | Show loading by default when `true`, use the .sync modifier to make it two-way binding |
+| can-cancel       | Boolean             | `false`              | Allow user to cancel by pressing escape or clicking outside |
+| on-cancel        | Function            | `()=>{}`             | Do something upon cancel, works in conjunction with `can-cancel`  |
+| animation        | String              | `fade`               | [Transition](https://vuejs.org/v2/guide/transitions.html) name |
 | is-full-page     | Boolean             | `true`               | When `false`; limit loader to its container* |
@@ -122,5 +151,11 @@
 // pass propsData to component
-this.$loading.show({
-  container: this.$refs.loadingContainer
-})
+let loader = this.$loading.show({
+  // Optional parent container reference
+  container: this.$refs.loadingContainer,
+  // Can also pass available props here
+  canCancel: true,
+  onCancel: this.yourMethodName
+});
+// hide loader whenever you want
+loader.hide();
 ```
@@ -131,6 +166,6 @@
 <!-- Vue js -->
-<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
 <!-- Lastly add this package -->
-<script src="https://unpkg.com/vue-loading-overlay@2"></script>
-<link href="https://unpkg.com/vue-loading-overlay@latest/dist/vue-loading.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@2"></script>
+<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@2/dist/vue-loading.min.css" rel="stylesheet">
 <!-- Init the plugin -->
@@ -142,2 +177,5 @@ <script>
 
+### Browser support
+* [Modern](http://browserl.ist/) browsers only
+
 ## Run examples on your localhost
@@ -150,3 +188,8 @@ * Clone this repo
 
-## Credits
+## Testing
+* This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils) for testing.
+* Tests can be found in `__test__` folder.
+* Execute tests with this command `yarn test`
+
+## Inspired by
 * [Buefy](https://buefy.github.io/#/documentation/loading) loading component
@@ -153,0 +196,0 @@

src/js/api.js

 import Vue from 'vue';
 import Component from './Component.vue'
 
-
 const LoadingProgrammatic = {
@@ -20,3 +19,2 @@ show(params = {}) {
 
-
 export default LoadingProgrammatic;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37186

increased by22.13%

Number of package files

17

increased by6.25%

Lines of code

546

increased by34.48%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

186

increased by30.07%

Worsened metrics

Dev dependency count

24

increased by20%

No dependency changes