vue-offline - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

index.js

 module.exports = {
     install (Vue) {
+        
+        // Legacy, doesn't work as intended
         const onlineOnlyDirective = {
@@ -23,4 +25,6 @@ bind: function (el) {
 
+        // Legacy, doesn't work as intended
         const offlineOnlyDirective = {
             bind: function (el) {
+                console.log('binded')
                 prevDisplay = el.style.display
@@ -44,9 +48,24 @@
         const offlineHooksMixin = {
+            data () {
+                return {
+                    OfflineOnly: false,
+                    OnlineOnly: false
+                }
+            },
             mounted () {
                 if (window) {
+                    if (navigator.onLine) {
+                        this.OnlineOnly = true
+                    } else {
+                        this.OfflineOnly = true
+                    }
                     window.addEventListener('online',  () => {
                         this.$emit('online')
+                        this.OnlineOnly = true
+                        this.OfflineOnly = false
                     })
                     window.addEventListener('offline',  () => {
                         this.$emit('offline')
+                        this.OfflineOnly = true
+                        this.OnlineOnly = false
                     })
@@ -53,0 +72,0 @@ }

package.json

 {
   "name": "vue-offline",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Online/Offline events and directives for vue application",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -22,4 +22,4 @@ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-* `v-online` directive - shows component only when online
-* `v-offline` directive - shows component only when offline
+* `OnlineOnly` data property available for each component - shows component only when online
+* `OfflineOnly` data property available for each component - shows component only when offline
 * `online` event - available in every component, emitted when user changes from offline to online
@@ -33,4 +33,4 @@ * `offline` event - available in every component, emitted when user changes from online to offline
   <div id="app">
-    <div v-online>This part is visible only when user is online</div>
-    <div v-offline>This part is visible only if user is offline</div>
+    <div v-show="OnlineOnly">This part is visible only when user is online</div>
+    <div v-offline="OfflineOnly">This part is visible only if user is offline</div>
     <div> {{ onlineState }} </div>
@@ -37,0 +37,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

4634

20.52%

Lines of code

71

33.96%

No dependency changes