vue-loading-overlay - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Vue.js component for full screen loading indicator.",
@@ -38,3 +38,4 @@ "main": "dist/vue-loading.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"
+    "build": "cross-env NODE_ENV=production webpack --progress --mode=production",
+    "prepublishOnly": "yarn run test && yarn run build"
   },
@@ -41,0 +42,0 @@ "dependencies": {},

README.md

@@ -13,3 +13,3 @@ # Vue Loading Overlay Component
 
-## [Demo](https://ankurk91.github.io/vue-loading-overlay/) or [JSFiddle](https://jsfiddle.net/ankurk91/w8y8k5wo/)
+## [Demo](https://ankurk91.github.io/vue-loading-overlay/) or [JSFiddle](https://jsfiddle.net/ankurk91/2ou37bc8/)
 
@@ -21,5 +21,6 @@ ### Version matrix
 | 2.x            | 3.x             | [3.x](https://github.com/ankurk91/vue-loading-overlay/tree/v3.x) |
-| 3.x            | 4.x             | `next`          |
+| 3.x            | 4.x             | `master`          |
 
 ## Installation
+
 ```bash
@@ -34,11 +35,14 @@ # yarn
 ## Usage
+
 #### As component
+
 ```html
+
 <template>
     <div class="vld-parent">
-        <loading v-model:active="isLoading" 
-        :can-cancel="true" 
-        :on-cancel="onCancel"
-        :is-full-page="fullPage"></loading>
-        
+        <loading v-model:active="isLoading"
+                 :can-cancel="true"
+                 :on-cancel="onCancel"
+                 :is-full-page="fullPage"/>
+
         <label><input type="checkbox" v-model="fullPage">Full page?</label>
@@ -50,7 +54,5 @@ <button @click.prevent="doAjax">fetch Data</button>
 <script>
-    // Import component
     import Loading from 'vue-loading-overlay';
-    // Import stylesheet
     import 'vue-loading-overlay/dist/vue-loading.css';
-    
+
     export default {
@@ -71,7 +73,7 @@ data() {
                 setTimeout(() => {
-                  this.isLoading = false
-                },5000)
+                    this.isLoading = false
+                }, 5000)
             },
             onCancel() {
-              console.log('User cancelled the loader.')
+                console.log('User cancelled the loader.')
             }
@@ -84,3 +86,5 @@ }
 ### As plugin
+
 * Install the plugin in your app
+
 ```js
@@ -91,9 +95,14 @@ import {createApp} from 'vue';
 // Your app initialization logic goes here
-const app = createApp().mount('#app')
+const app = createApp({}).mount('#app')
 app.use(VueLoading);
 ```
+
 * Then use the plugin in your components
+
 ```html
+
 <template>
-    <form @submit.prevent="submit" class="vld-parent" ref="formContainer">
+    <form @submit.prevent="submit" 
+          class="vld-parent" 
+          ref="formContainer">
         <!-- your form inputs goes here-->
@@ -115,15 +124,15 @@ <label><input type="checkbox" v-model="fullPage">Full page?</label>
                 let loader = this.$loading.show({
-                  // Optional parameters
-                  container: this.fullPage ? null : this.$refs.formContainer,
-                  canCancel: true,
-                  onCancel: this.onCancel,
+                    // Optional parameters
+                    container: this.fullPage ? null : this.$refs.formContainer,
+                    canCancel: true,
+                    onCancel: this.onCancel,
                 });
                 // simulate AJAX
                 setTimeout(() => {
-                  loader.hide()
-                },5000)                 
+                    loader.hide()
+                }, 5000)
             },
             onCancel() {
-              console.log('User cancelled the loader.')
-            }                      
+                console.log('User cancelled the loader.')
+            }
         }
@@ -135,2 +144,3 @@ }
 ## Available props
+
 The component accepts these props:
@@ -156,7 +166,8 @@
 
-* ^When `is-full-page` is set to `false`, the container element should be positioned as `position: relative`. 
-You can use CSS helper class `vld-parent`.
+* ^When `is-full-page` is set to `false`, the container element should be positioned as `position: relative`. You can
+  use CSS helper class `vld-parent`.
 * *The default `height` and `width` values may be varied based on the `loader` prop value
 
 ## Available slots
+
 The component accepts these slots:
@@ -169,3 +180,5 @@
 ## API methods
+
 ### `this.$loading.show(?propsData,?slots)`
+
 ```js
@@ -175,16 +188,16 @@ import {h} from 'vue';
 let loader = this.$loading.show({
-  // Pass props by their camelCased names
-  container: this.$refs.loadingContainer,
-  canCancel: true, // default false
-  onCancel: this.yourCallbackMethod,
-  color: '#000000',
-  loader: 'spinner',
-  width: 64,
-  height: 64,
-  backgroundColor: '#ffffff',
-  opacity: 0.5,
-  zIndex: 999,
-},{
-  // Pass slots by their names
-  default: h('your-custom-loader-component-name'),
+    // Pass props by their camelCased names
+    container: this.$refs.loadingContainer,
+    canCancel: true, // default false
+    onCancel: this.yourCallbackMethod,
+    color: '#000000',
+    loader: 'spinner',
+    width: 64,
+    height: 64,
+    backgroundColor: '#ffffff',
+    opacity: 0.5,
+    zIndex: 999,
+}, {
+    // Pass slots by their names
+    default: h('your-custom-loader-component-name'),
 });
@@ -196,17 +209,21 @@ // hide loader whenever you want
 ## Global configs
+
 You can set props and slots for all future instances when using as plugin
+
 ```js
-app.use(Loading, {
-  // props
-  color: 'red'
-},{
-  // slots
+app.use(VueLoading, {
+    // props
+    color: 'red'
+}, {
+    // slots
 })
 ```
+
 Further you can override any prop or slot when creating new instances
+
 ```js
 let loader = this.$loading.show({
- color: 'blue'
-},{
-  // slots
+    color: 'blue'
+}, {
+    // slots
 });
@@ -216,2 +233,3 @@ ```
 ## Install in non-module environments (without webpack)
+
 ```html
@@ -225,4 +243,5 @@ <!-- Vue js -->
 <script>
-app.use(VueLoading);
-app.component('loading', VueLoading)
+    const app = Vue.createApp({}).mount('#app')
+    app.use(VueLoading);
+    app.component('loading', VueLoading)
 </script>
@@ -232,5 +251,7 @@ ```
 ### Browser support
+
 * Modern browsers only
 
 ## Run examples on your localhost
+
 * Clone this repo
@@ -240,6 +261,8 @@ * Make sure you have node-js `>=12.14` and [yarn](https://yarnpkg.com) `>=1.x` pre-installed
 * Run webpack dev server - `yarn start`
-* This should open the demo page at `http://localhost:9000` in your default web browser 
+* This should open the demo page at `http://localhost:9000` in your default web browser
 
 ## 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.
+
+* 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.
@@ -249,2 +272,3 @@ * Execute tests with this command `yarn test`
 ## License
+
 [MIT](LICENSE.txt) License

types/loading.d.ts

 import {Plugin} from 'vue'
-import {ComponentInternalInstance} from "@vue/runtime-core";
 
-export interface LoaderComponent extends ComponentInternalInstance {
-  hide(): void
-}
-
 export type LoaderType = 'spinner' | 'dots' | 'bars'
@@ -36,4 +31,8 @@
 
+export interface ActiveLoader {
+  hide(): void
+}
+
 export interface PluginApi {
-  show(props?: Props, slots?: Slots): LoaderComponent
+  show(props?: Props, slots?: Slots): ActiveLoader
 }
@@ -47,6 +46,4 @@
 
-declare class LoadingPlugin {
-  static install: Plugin<Props>
-}
+declare const LoadingPlugin: Plugin
 
 export default LoadingPlugin

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

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

Improved metrics

Total package byte prevSize

59780

increased by0.02%

Number of lines in readme file

257

increased by10.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

798

decreased by-0.37%

No dependency changes