vue-coe-scrollbar - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/vue-coe-scrollbar.cjs.js

@@ -50,2 +50,15 @@ 'use strict';
     },
+    // default is scroll element container
+    // but you might want to see some side-effects on your page to update the scroll
+    wrapperSelector: {
+      type: String,
+      default: 'vue-coe-scroll > .wrapper'
+    },
+    // MutationObserver API triggers 'update' method for each DOM change
+    // to prevent this behavior, it is recommended that you set this delay
+    // and avoid unnecessary resources
+    initDelay: {
+      type: Number,
+      default: 0
+    },
     // Jump on click
@@ -79,7 +92,7 @@ jump: {
       type: String,
-      default: '#bbbbbb'
+      default: 'rgba(18, 30, 73, 0.2)'
     },
     background: {
       type: String,
-      default: '#fefefe'
+      default: 'transparent'
     }
@@ -131,6 +144,13 @@ },
 
-  mounted: function mounted() {
-    this.bindEvents();
-    this.update();
-    this.initMutationObserver(this.$refs.wrapper);
+  created: function created() {
+    var this$1 = this;
+
+    this.$once('hook:mounted', function () {
+      this$1.bindEvents();
+      setTimeout(this$1.initMutationObserver, this$1.initDelay);
+    });
+    this.$once('hook:beforeDestroy', function () {
+      this$1.unbindEvents();
+      setTimeout(function () { return this$1.mutation.disconnect(); }, this$1.initDelay);
+    });
   },
@@ -293,6 +313,5 @@
       this.$eventsBinded.forEach(function (unbind) { return unbind(); });
-      this.mutation.disconnect();
     },
 
-    initMutationObserver: function initMutationObserver(el) {
+    initMutationObserver: function initMutationObserver() {
       var this$1 = this;
@@ -303,2 +322,3 @@
       this.mutation = new MutationObserver(callback);
+      var el = document.querySelector(this.wrapperSelector);
       var config = {
@@ -312,8 +332,3 @@ childList: true,
 
-  },
-
-  beforeDestroy: function beforeDestroy() {
-    this.unbindEvents();
   }
-
 };
@@ -320,0 +335,0 @@

dist/vue-coe-scrollbar.es.js

@@ -48,2 +48,15 @@ // ty @vinicius73
     },
+    // default is scroll element container
+    // but you might want to see some side-effects on your page to update the scroll
+    wrapperSelector: {
+      type: String,
+      default: 'vue-coe-scroll > .wrapper'
+    },
+    // MutationObserver API triggers 'update' method for each DOM change
+    // to prevent this behavior, it is recommended that you set this delay
+    // and avoid unnecessary resources
+    initDelay: {
+      type: Number,
+      default: 0
+    },
     // Jump on click
@@ -77,7 +90,7 @@ jump: {
       type: String,
-      default: '#bbbbbb'
+      default: 'rgba(18, 30, 73, 0.2)'
     },
     background: {
       type: String,
-      default: '#fefefe'
+      default: 'transparent'
     }
@@ -129,6 +142,13 @@ },
 
-  mounted: function mounted() {
-    this.bindEvents();
-    this.update();
-    this.initMutationObserver(this.$refs.wrapper);
+  created: function created() {
+    var this$1 = this;
+
+    this.$once('hook:mounted', function () {
+      this$1.bindEvents();
+      setTimeout(this$1.initMutationObserver, this$1.initDelay);
+    });
+    this.$once('hook:beforeDestroy', function () {
+      this$1.unbindEvents();
+      setTimeout(function () { return this$1.mutation.disconnect(); }, this$1.initDelay);
+    });
   },
@@ -291,6 +311,5 @@
       this.$eventsBinded.forEach(function (unbind) { return unbind(); });
-      this.mutation.disconnect();
     },
 
-    initMutationObserver: function initMutationObserver(el) {
+    initMutationObserver: function initMutationObserver() {
       var this$1 = this;
@@ -301,2 +320,3 @@
       this.mutation = new MutationObserver(callback);
+      var el = document.querySelector(this.wrapperSelector);
       var config = {
@@ -310,8 +330,3 @@ childList: true,
 
-  },
-
-  beforeDestroy: function beforeDestroy() {
-    this.unbindEvents();
   }
-
 };
@@ -318,0 +333,0 @@

dist/vue-coe-scrollbar.js

@@ -54,2 +54,15 @@ (function (global, factory) {
       },
+      // default is scroll element container
+      // but you might want to see some side-effects on your page to update the scroll
+      wrapperSelector: {
+        type: String,
+        default: 'vue-coe-scroll > .wrapper'
+      },
+      // MutationObserver API triggers 'update' method for each DOM change
+      // to prevent this behavior, it is recommended that you set this delay
+      // and avoid unnecessary resources
+      initDelay: {
+        type: Number,
+        default: 0
+      },
       // Jump on click
@@ -83,7 +96,7 @@ jump: {
         type: String,
-        default: '#bbbbbb'
+        default: 'rgba(18, 30, 73, 0.2)'
       },
       background: {
         type: String,
-        default: '#fefefe'
+        default: 'transparent'
       }
@@ -135,6 +148,13 @@ },
 
-    mounted: function mounted() {
-      this.bindEvents();
-      this.update();
-      this.initMutationObserver(this.$refs.wrapper);
+    created: function created() {
+      var this$1 = this;
+
+      this.$once('hook:mounted', function () {
+        this$1.bindEvents();
+        setTimeout(this$1.initMutationObserver, this$1.initDelay);
+      });
+      this.$once('hook:beforeDestroy', function () {
+        this$1.unbindEvents();
+        setTimeout(function () { return this$1.mutation.disconnect(); }, this$1.initDelay);
+      });
     },
@@ -297,6 +317,5 @@
         this.$eventsBinded.forEach(function (unbind) { return unbind(); });
-        this.mutation.disconnect();
       },
 
-      initMutationObserver: function initMutationObserver(el) {
+      initMutationObserver: function initMutationObserver() {
         var this$1 = this;
@@ -307,2 +326,3 @@
         this.mutation = new MutationObserver(callback);
+        var el = document.querySelector(this.wrapperSelector);
         var config = {
@@ -316,8 +336,3 @@ childList: true,
 
-    },
-
-    beforeDestroy: function beforeDestroy() {
-      this.unbindEvents();
     }
-
   };
@@ -324,0 +339,0 @@

package.json

 {
   "name": "vue-coe-scrollbar",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
@@ -5,0 +5,0 @@ "cdn": "dist/vue-coe-scrollbar.js",

No alert changes

Improved metrics

Total package byte prevSize

1278229

increased by0.33%

Lines of code

11248

increased by0.56%

No dependency changes