vue-loading-overlay - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

dist/vue-loading.js

@@ -66,2 +66,13 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /************************************************************************/
@@ -71,10 +82,11 @@ var __webpack_exports__ = {};
 (() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ src)
+  "default": () => (/* binding */ src),
+  "useLoading": () => (/* reexport */ useLoading)
 });
 
-// UNUSED EXPORTS: useLoading
-
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"}
@@ -81,0 +93,0 @@ var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_ = __webpack_require__(982);

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)}(this,(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(t,i);e.config.globalProperties.$loading=o,e.provide("$loading",o)};const k=N})(),r=r.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)}(this,(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),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{o.r(r),o.d(r,{default:()=>k,useLoading:()=>w});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 l=(0,e.defineComponent)({name:"spinner",props:{color:{type:String,default:"#000"},height:{type:Number,default:64},width:{type:Number,default:64}}});l.render=function(t,i,o,r,n,l){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 c=l,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 b=(0,e.defineComponent)({name:"bars",props:{color:{type:String,default:"#000"},height:{type:Number,default:40},width:{type:Number,default:40}}});b.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 v={Spinner:c,Dots:p,Bars:b},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:v,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,l){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 l=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,l).ctx.hide}}}}N.install=(e,t={},i={})=>{const o=w(t,i);e.config.globalProperties.$loading=o,e.provide("$loading",o)};const k=N})(),r=r.default})()}));

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Vue.js component for full screen loading indicator.",
@@ -43,22 +43,21 @@ "main": "dist/vue-loading.js",
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
-    "@vue/compiler-sfc": "^3.0.11",
-    "@vue/test-utils": "^2.0.0-rc.6",
-    "babel-jest": "^26.6.3",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@vue/compiler-sfc": "^3.1.5",
+    "@vue/test-utils": "^2.0.0-rc.10",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "bootstrap": "^4.6.0",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.6",
+    "css-loader": "^6.1.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.6.0",
-    "style-loader": "^2.0.0",
-    "vue": "^3.0",
-    "vue-jest": "^5.0.0-alpha.8",
-    "vue-loader": "^16.0",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.6",
+    "mini-css-extract-plugin": "^2.1.0",
+    "style-loader": "^3.1.0",
+    "vue": "^3.1",
+    "vue-loader": "^16.3.1",
+    "vue3-jest": "^27.0.0-alpha.1",
+    "webpack": "^5.45.1",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.0.0-beta.3"
@@ -71,22 +70,3 @@ },
     "node": ">=10.13.0"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "jsx",
-      "node",
-      "vue",
-      "css"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      ".*\\.(vue)$": "vue-jest"
-    },
-    "moduleNameMapper": {
-      "\\.(css|less|scss)$": "<rootDir>/__test__/__mocks__/styleMock.js"
-    },
-    "collectCoverage": false,
-    "testURL": "http://localhost"
   }
 }

README.md

@@ -9,3 +9,3 @@ # Vue Loading Overlay Component
 [![license](https://badgen.net/github/license/ankurk91/vue-loading-overlay)](https://yarnpkg.com/en/package/vue-loading-overlay)
-![ts](https://badgen.net/badge/ready/TypeScript/blue)
+![TypeScript](https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
 
@@ -83,3 +83,3 @@ Vue.js component for full screen loading indicator
 
-* Install the plugin in your app
+Install the plugin in your app
 
@@ -91,7 +91,8 @@ ```js
 // Your app initialization logic goes here
-const app = createApp({}).mount('#app')
+const app = createApp({});
 app.use(VueLoading);
+app.mount('#app');
 ```
 
-* Then use the plugin in your components
+Then use the plugin in your components
 
@@ -101,4 +102,4 @@ ```html
 <template>
-    <form @submit.prevent="submit" 
-          class="vld-parent" 
+    <form @submit.prevent="submit"
+          class="vld-parent"
           ref="formContainer">
@@ -139,2 +140,41 @@ <!-- your form inputs goes here-->
 
+or same with Composition API
+
+```html
+
+<script>
+import {defineComponent, ref, inject} from 'vue'
+import {useLoading} from 'vue-loading-overlay'
+
+export default defineComponent({
+    setup() {
+        const $loading = useLoading()
+        // or use inject without importing useLoading
+        // const $loading =  inject('$loading')
+
+        const fullPage = ref(false)
+
+        const submit = () => {
+            const loader = $loading.show({
+                // Optional parameters
+            });
+            // simulate AJAX
+            setTimeout(() => {
+                loader.hide()
+            }, 5000)
+        }
+
+        const onCancel = () => console.log('User cancelled the loader.')
+
+        return {
+            fullPage,
+            submit,
+            onCancel
+        }
+
+    }
+})
+</script>
+```
+
 ## Available props
@@ -220,3 +260,3 @@
 }, {
-    // slots
+    // override slots
 });
@@ -235,5 +275,6 @@ ```
 <script>
-    const app = Vue.createApp({}).mount('#app')
+    const app = Vue.createApp({});
     app.use(VueLoading);
     app.component('loading', VueLoading)
+    app.mount('#app')
 </script>
@@ -249,3 +290,3 @@ ```
 * Clone this repo
-* Make sure you have node-js `>=12.14` and [yarn](https://yarnpkg.com) `>=1.x` pre-installed
+* Make sure you have node-js `>=14.15` and [yarn](https://yarnpkg.com) `>=1.22` pre-installed
 * Install dependencies - `yarn install`
@@ -252,0 +293,0 @@ * Run webpack dev server - `yarn start`

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

Improved metrics

Dev dependency count

20

decreased by-4.76%

Lines of code

811

increased by1.63%

Number of lines in readme file

298

increased by15.95%

Worsened metrics

Total package byte prevSize

56205

decreased by-6.38%

Number of package files

17

decreased by-5.56%

No dependency changes