vue-loading-overlay - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Vue.js component for full screen loading indicator.",
@@ -23,4 +23,3 @@ "main": "dist/vue-loading.js",
     "overlay",
-    "spinner",
-    "svg"
+    "spinner"
   ],
@@ -68,4 +67,4 @@ "author": "ankurk91",
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=12.13.0"
   }
 }

README.md

@@ -18,5 +18,5 @@ # Vue Loading Overlay Component
 | 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             | `master`          |
+| :---           |:---------------:| ---:          | 
+| 2.x            |       3.x       | [3.x](https://github.com/ankurk91/vue-loading-overlay/tree/v3.x) |
+| 3.x            |       5.x       | `master`          |
 
@@ -27,6 +27,6 @@ ## Installation
 # yarn
-yarn add vue-loading-overlay@^4.0
+yarn add vue-loading-overlay@^5.0
 
 # npm
-npm install vue-loading-overlay@^4.0 
+npm install vue-loading-overlay@^5.0 
 ```
@@ -138,2 +138,40 @@
 
+#### 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
@@ -229,4 +267,4 @@
 <!-- Lastly add this package -->
-<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">
+<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@5"></script>
+<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@5/dist/vue-loading.css" rel="stylesheet">
 <!-- Init the plugin and component-->
@@ -233,0 +271,0 @@ <script>

src/js/api.js

 import {createComponent} from './helpers';
-import LoadingVue from "./Component.vue";
+import LoadingComponent from "./Component.vue";
 
@@ -24,3 +24,3 @@ export function useLoading(globalProps = {}, globalSlots = {}) {
       const mergedSlots = Object.assign({}, globalSlots, slots);
-      const instance = createComponent(LoadingVue, propsData, container, mergedSlots);
+      const instance = createComponent(LoadingComponent, propsData, container, mergedSlots);
 
@@ -27,0 +27,0 @@ return {

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

Total package byte prevSize

57942

increased by1.43%

Number of lines in readme file

297

increased by14.67%

No dependency changes