vue-coe-scrollbar - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/vue-coe-scrollbar.cjs.js

@@ -124,3 +124,3 @@ 'use strict';
 
-      if (this.active) { this.$refs.content.scrollTop = -this.contentPosition; }
+      if (this.active) { this.$refs.wrapper.scrollTop = -this.contentPosition; }
     }
@@ -133,3 +133,3 @@
     this.update();
-    this.initMutationObserver(this.$refs.content);
+    this.initMutationObserver(this.$refs.wrapper);
   },
@@ -170,7 +170,4 @@
     setHeights: function setHeights() {
-      var ref = this.$refs;
-      var wrapper = ref.wrapper;
-      var content = ref.content;
-      this.height = wrapper.clientHeight;
-      this.fullHeight = content.scrollHeight;
+      this.height = this.$el.clientHeight;
+      this.fullHeight = this.$refs.wrapper.scrollHeight;
     },
@@ -245,3 +242,2 @@
       var scrollbar = ref$1.scrollbar;
-      var wrapper = ref$1.wrapper;
       var ref$2 = scrollbar.getBoundingClientRect();
@@ -411,3 +407,3 @@ var top = ref$2.top;
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
         opacity: +_vm.showScroll,
@@ -419,3 +415,3 @@ width: _vm.fullScrollbarWidth + 'px'
         height: _vm.scrollbarHeight + 'px'
-      }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"content",staticClass:"content"},_vm.$listeners),[_vm._t("default")],2)])};
+      }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"wrapper",staticClass:"wrapper"},_vm.$listeners),[_vm._t("default")],2)])};
 var __vue_staticRenderFns__ = [];
@@ -422,0 +418,0 @@

dist/vue-coe-scrollbar.es.js

@@ -122,3 +122,3 @@ // ty @vinicius73
 
-      if (this.active) { this.$refs.content.scrollTop = -this.contentPosition; }
+      if (this.active) { this.$refs.wrapper.scrollTop = -this.contentPosition; }
     }
@@ -131,3 +131,3 @@
     this.update();
-    this.initMutationObserver(this.$refs.content);
+    this.initMutationObserver(this.$refs.wrapper);
   },
@@ -168,7 +168,4 @@
     setHeights: function setHeights() {
-      var ref = this.$refs;
-      var wrapper = ref.wrapper;
-      var content = ref.content;
-      this.height = wrapper.clientHeight;
-      this.fullHeight = content.scrollHeight;
+      this.height = this.$el.clientHeight;
+      this.fullHeight = this.$refs.wrapper.scrollHeight;
     },
@@ -243,3 +240,2 @@
       var scrollbar = ref$1.scrollbar;
-      var wrapper = ref$1.wrapper;
       var ref$2 = scrollbar.getBoundingClientRect();
@@ -409,3 +405,3 @@ var top = ref$2.top;
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
         opacity: +_vm.showScroll,
@@ -417,3 +413,3 @@ width: _vm.fullScrollbarWidth + 'px'
         height: _vm.scrollbarHeight + 'px'
-      }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"content",staticClass:"content"},_vm.$listeners),[_vm._t("default")],2)])};
+      }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"wrapper",staticClass:"wrapper"},_vm.$listeners),[_vm._t("default")],2)])};
 var __vue_staticRenderFns__ = [];
@@ -420,0 +416,0 @@

dist/vue-coe-scrollbar.js

@@ -128,3 +128,3 @@ (function (global, factory) {
 
-        if (this.active) { this.$refs.content.scrollTop = -this.contentPosition; }
+        if (this.active) { this.$refs.wrapper.scrollTop = -this.contentPosition; }
       }
@@ -137,3 +137,3 @@
       this.update();
-      this.initMutationObserver(this.$refs.content);
+      this.initMutationObserver(this.$refs.wrapper);
     },
@@ -174,7 +174,4 @@
       setHeights: function setHeights() {
-        var ref = this.$refs;
-        var wrapper = ref.wrapper;
-        var content = ref.content;
-        this.height = wrapper.clientHeight;
-        this.fullHeight = content.scrollHeight;
+        this.height = this.$el.clientHeight;
+        this.fullHeight = this.$refs.wrapper.scrollHeight;
       },
@@ -249,3 +246,2 @@
         var scrollbar = ref$1.scrollbar;
-        var wrapper = ref$1.wrapper;
         var ref$2 = scrollbar.getBoundingClientRect();
@@ -415,3 +411,3 @@ var top = ref$2.top;
   /* template */
-  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
+  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-coe-scroll",style:(_vm.styles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.hasScroll && _vm.active),expression:"hasScroll && active"}],staticClass:"scrollbar-wrapper"},[_c('div',{staticClass:"full-scrollbar",style:({
           opacity: +_vm.showScroll,
@@ -423,3 +419,3 @@ width: _vm.fullScrollbarWidth + 'px'
           height: _vm.scrollbarHeight + 'px'
-        }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"content",staticClass:"content"},_vm.$listeners),[_vm._t("default")],2)])};
+        }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}})]),_vm._v(" "),_c('div',_vm._g({ref:"wrapper",staticClass:"wrapper"},_vm.$listeners),[_vm._t("default")],2)])};
   var __vue_staticRenderFns__ = [];
@@ -426,0 +422,0 @@

package.json

 {
   "name": "vue-coe-scrollbar",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
@@ -15,3 +15,3 @@ "cdn": "dist/vue-coe-scrollbar.js",
     "build": "bili",
-    "postbuild": "poi examples/main.js -d docs --public-url ./"
+    "postbuild": "poi"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

README.md

@@ -10,3 +10,3 @@ <h1 align="center">vue-coe-scrollbar ✅</h1>
 <p align="center">
-  ✨ <a href="#">Example</a>✨
+  ✨ <a href="https://viniazvd.github.io/vue-coe-scrollbar/">Example</a>✨
 </p>
@@ -16,8 +16,73 @@
 
-**Install** <br>
-`yarn add vue-coe-scrollbar` 
-<br>or<br> 
-`npm i add vue-coe-scrollbar`
+## Competitive Diferentials
+<ul style='margin: 0; padding: 0; color: red; list-style-type: none;'>
+  <li>keyboard support</li>
+  <li>bundle size: 2.2kB</li>
+  <li>built with poi and bili</li>
+  <li>native style and behavior</li>
+  <li>clean and documented code</li>
+  <li>compatibility SSR -ty @vinicius73</li>
+  <li>state-based, preventing re-paint -ty @vinicius73</li>
+  <li>based on transform, property calculated on GPU: ty, @VitorLuizC</li>
+  <li>use requestAnimationFrame to improve scrolling animation performance</li>
+</ul>
 
-**Bundle size**
-- 2.2 kB
+## Install
+`yarn add vue-coe-scrollbar` or `npm install vue-coe-scrollbar`
+
+**Example**
+```vue
+<template>
+  <vue-coe-scrollbar @scroll="scroll">
+    <div class="list">
+      <div v-for="x in content" :key="x" class="list__item">
+        {{ x }}
+      </div>
+    </div>
+  </vue-coe-scroll>
+</template>
+
+<script>
+import VueCoeScrollbar from 'vue-coe-scrollbar'
+
+export default {
+  components: { VueCoeScrollbar },
+
+  data () {
+    return {
+      content: Array.from(({ length: 12 }), (x, i) => i)
+    }
+  },
+
+  methods: {
+    scroll (e) { // ... }
+  }
+}
+</script>
+```
+
+## Props
+
+Name                |   type   | default    | About
+-----               | -------  | ---------- | ------
+active              |  Boolean |  `true`    | Disable scroll if false
+jump                |  Number  |  `700`     | Jump on click
+disappear           |  Number  |  `1500`    | The delay before scrollbar hides
+scrollDuration      |  Number  |  `300`     | The transition time on click/keydown (ms)
+speed               |  Number  |  `0.1`     | The scroll wheel speed ratio
+width               |  Number  |  `10`      | scrollbar width base
+color               |  String  |  `#bbbbbb` | scrollbar color
+background          |  String  |  `#fefefe` | scrollbar background
+
+## Event
+
+Name       | About
+-----      | -----
+scroll     | Emit event on scroll
+
+## Contributors
+- https://github.com/Giseudo
+- https://github.com/stephaniebang
+- https://github.com/guibarscevicius
+
+**Made in:** @convenia

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1273993

increased by52.15%

Number of package files

21

increased by10.53%

Number of lines in readme file

87

increased by295.45%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

11185

decreased by-0.13%

No dependency changes