vue-scroll-picker - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/index.js

@@ -1,2 +0,2 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(0);var i="undefined"!=typeof window&&"ontouchstart"in window,o={props:{value:null,options:{type:Array,default:function(){return[]}},dragSensitivity:{type:Number,default:1.7},touchSensitivity:{type:Number,default:1.7},scrollSensitivity:{type:Number,default:1},empty:{type:String,default:"No Items"},placeholder:{type:String,default:null}},data:function(){var t=this,e=this.normalizeOptions(this.options),n=e[0]&&e[0].value,i=this.placeholder?-1:0,o=this.placeholder?null:void 0===n?null:n;return null!=this.value&&e.forEach((function(e,n){if(e.value==t.value)return i=n,o=e.value,!1})),{normalizedOptions:e,innerIndex:i,innerValue:o,top:0,pivots:null,transitioning:!1,transitionTO:null,startTop:null,isMouseDown:!1,isDragging:!1,isScrolling:!1,startY:null,scrollMax:null}},mounted:function(){i?(this.$el.addEventListener("touchstart",this.onStart),this.$el.addEventListener("touchmove",this.onTouchMove),this.$el.addEventListener("touchend",this.onEnd),this.$el.addEventListener("touchcancel",this.onCancel)):(this.$el.addEventListener("mousewheel",this.onScroll),this.$el.addEventListener("wheel",this.onScroll),this.$el.addEventListener("mousedown",this.onStart),this.$el.addEventListener("mousemove",this.onMouseMove),this.$el.addEventListener("mouseup",this.onEnd),this.$el.addEventListener("mouseleave",this.onCancel)),this.calculatePivots(),this.innerValue!==this.value&&this.$emit("input",this.innerValue)},destroyed:function(){i?(this.$el.removeEventListener("touchstart",this.onStart),this.$el.removeEventListener("touchmove",this.onTouchMove),this.$el.removeEventListener("touchend",this.onEnd),this.$el.removeEventListener("touchcancel",this.onCancel)):(this.$el.removeEventListener("mousewheel",this.onScroll),this.$el.removeEventListener("wheel",this.onScroll),this.$el.removeEventListener("mousedown",this.onStart),this.$el.removeEventListener("mousemove",this.onMouseMove),this.$el.removeEventListener("mouseup",this.onEnd),this.$el.removeEventListener("mouseleave",this.onCancel))},watch:{value:function(t){var e=this.placeholder?-1:0;this.normalizedOptions.forEach((function(n,i){if(n.value==t)return e=i,!1})),this.innerIndex!==e&&this.correction(e)},options:function(t){var e=this;this.normalizedOptions=this.normalizeOptions(t);var n=this.innerIndex>=t.length?t.length-1:0,i=this.normalizedOptions[n]&&this.normalizedOptions[n].value,o=this.placeholder?-1:n,r=this.placeholder?null:void 0===i?null:i;this.normalizedOptions.forEach((function(t,n){if(t.value==e.innerValue)return o=n,r=t.value,!1})),this.$nextTick((function(){e.calculatePivots(),e.innerIndex===o&&e.innerValue===r||(e.top=o>-1?-1*e.pivots[o]:0,e.innerIndex=o,e.innerValue=r,e.$emit("input",e.innerValue))}))}},methods:{normalizeOptions:function(t){return t.map((function(t){return t.hasOwnProperty("value")&&t.hasOwnProperty("name")?t:{value:t,name:t}}))},calculatePivots:function(){var t=this,e=this.$refs.selection.getBoundingClientRect(),n=(e.top+e.bottom)/2;this.pivots=(this.$refs.items||[]).map((function(e){var i=e.getBoundingClientRect(),o=i.top,r=i.bottom;return Math.round(10*((o+r)/2-n))/10-t.top})).sort((function(t,e){return t-e})),this.scrollMax=-1*this.pivots[this.pivots.length-1],this.innerIndex>-1&&(this.top=-1*this.pivots[this.innerIndex])},onScroll:function(t){var e=this;this.top>=0&&t.deltaY<0||this.top<=this.scrollMax&&t.deltaY>0||(t.preventDefault(),t.stopPropagation(),this.isScrolling||(this.isScrolling=!0,t.deltaY<0?this.correction(this.innerIndex-Math.floor(Math.abs(t.deltaY)/30*this.scrollSensitivity+1)):t.deltaY>0&&this.correction(this.innerIndex+Math.floor(Math.abs(t.deltaY)/30*this.scrollSensitivity+1)),setTimeout((function(){e.isScrolling=!1}),80)))},getTouchInfo:function(t){return i?t.changedTouches[0]||t.touches[0]:t},onStart:function(t){t.cancelable&&(t.preventDefault(),t.stopPropagation());var e=this.getTouchInfo(t);this.startTop=this.top,this.startY=e.pageY,i||(this.isMouseDown=!0),this.isDragging=!1},onTouchMove:function(t){if(t.preventDefault(),t.stopPropagation(),i||this.isMouseDown){var e=this.getTouchInfo(t).pageY-this.startY;Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.startTop+e*this.touchSensitivity}},onMouseMove:function(t){if(t.preventDefault(),t.stopPropagation(),i||this.isMouseDown){var e=this.getTouchInfo(t).pageY-this.startY;Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.startTop+e*this.dragSensitivity}},onEnd:function(t){if(t.preventDefault(),t.stopPropagation(),!this.isDragging)return this.isDragging=!1,this.isMouseDown=!1,void this.handleClick(t);this.isDragging=!1,this.isMouseDown=!1,this.correctionAfterDragging()},onCancel:function(t){t.preventDefault(),t.stopPropagation(),(i||this.isMouseDown)&&(this.correctionAfterDragging(),this.isMouseDown=!1,this.isDragging=!1)},handleClick:function(t){var e=this.getTouchInfo(t),n=e.clientX,i=e.clientY,o=this.$refs.top.getBoundingClientRect(),r=this.$refs.bottom.getBoundingClientRect();o.left<=n&&n<=o.right&&o.top<=i&&i<=o.bottom?this.correction(this.innerIndex-1):r.left<=n&&n<=r.right&&r.top<=i&&i<=r.bottom&&this.correction(this.innerIndex+1)},correctionAfterDragging:function(){var t=null,e=null,n=this.top;this.placeholder&&(t=-1,e=0+n),this.pivots.forEach((function(i,o){var r=i+n;(null===e||Math.abs(e)>Math.abs(r))&&(t=o,e=r)})),this.correction(t)},correction:function(t){var e=this;t=Math.min(Math.max(t,this.placeholder?-1:0),this.pivots.length-1),this.top=t>-1?-1*this.pivots[t]:0,this.transitioning=!0,this.transitionTO&&(clearTimeout(this.transitionTO),this.transitionTO=null),this.innerIndex!==t&&(this.innerIndex=t,this.innerValue=t>-1?this.normalizedOptions[t].value:null,this.$emit("input",this.innerValue)),this.transitionTO=setTimeout((function(){e.transitioning=!1,e.transitionTO=null}),100)}},render:function(t){var e=this,n=[];return 0===this.normalizedOptions.length&&null===this.placeholder&&n.push(t("div",{class:["vue-scroll-picker-item","-empty","-selected"],ref:"empty",domProps:{innerHTML:this.empty}})),this.placeholder&&n.push(t("div",{class:{"vue-scroll-picker-item":!0,"-placeholder":!0,"-selected":-1==this.innerIndex},ref:"placeholder",domProps:{innerHTML:this.placeholder}})),n=n.concat(this.normalizedOptions.map((function(n,i){return t("div",{class:{"vue-scroll-picker-item":!0,"-selected":e.innerIndex==i},key:n.value,ref:"items",refInFor:!0,domProps:{innerHTML:n.name}})}))),t("div",{class:["vue-scroll-picker"]},[t("div",{class:["vue-scroll-picker-list"]},[t("div",{class:{"vue-scroll-picker-list-rotator":!0,"-transition":this.transitioning},style:{top:"".concat(this.top,"px")}},n)]),t("div",{class:["vue-scroll-picker-layer"]},[t("div",{class:["top"],ref:"top"}),t("div",{class:["middle"],ref:"selection"}),t("div",{class:["bottom"],ref:"bottom"})])])}};n(1);function r(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var s={render:function(t){return t("div",{class:["vue-scroll-picker-group"]},r(this.$slots.default))}};function l(t){t.component("ScrollPicker",o),t.component("ScrollPickerGroup",s)}n.d(e,"install",(function(){return l})),n.d(e,"ScrollPicker",(function(){return o})),n.d(e,"ScrollPickerGroup",(function(){return s})),"undefined"!=typeof window&&window.Vue&&l(window.Vue);e.default={install:l}}])}));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){},function(t,e,n){},function(t,e,n){"use strict";n.r(e),n.d(e,"install",(function(){return a})),n.d(e,"ScrollPicker",(function(){return o})),n.d(e,"ScrollPickerGroup",(function(){return l}));n(0);var i="undefined"!=typeof window&&"ontouchstart"in window,o={props:{value:null,options:{type:Array,default:function(){return[]}},dragSensitivity:{type:Number,default:1.7},touchSensitivity:{type:Number,default:1.7},scrollSensitivity:{type:Number,default:1},empty:{type:String,default:"No Items"},placeholder:{type:String,default:null}},data:function(){var t=this,e=this.normalizeOptions(this.options),n=e[0]&&e[0].value,i=this.placeholder?-1:0,o=this.placeholder||void 0===n?null:n;return null!=this.value&&e.forEach((function(e,n){if(e.value==t.value)return i=n,o=e.value,!1})),{normalizedOptions:e,innerIndex:i,innerValue:o,top:0,pivots:null,transitioning:!1,transitionTO:null,startTop:null,isMouseDown:!1,isDragging:!1,isScrolling:!1,startY:null,scrollMax:null}},mounted:function(){i?(this.$el.addEventListener("touchstart",this.onStart),this.$el.addEventListener("touchmove",this.onTouchMove),this.$el.addEventListener("touchend",this.onEnd),this.$el.addEventListener("touchcancel",this.onCancel)):(this.$el.addEventListener("mousewheel",this.onScroll),this.$el.addEventListener("wheel",this.onScroll),this.$el.addEventListener("mousedown",this.onStart),this.$el.addEventListener("mousemove",this.onMouseMove),this.$el.addEventListener("mouseup",this.onEnd),this.$el.addEventListener("mouseleave",this.onCancel)),this.calculatePivots(0),this.innerValue!==this.value&&this.$emit("input",this.innerValue)},destroyed:function(){i?(this.$el.removeEventListener("touchstart",this.onStart),this.$el.removeEventListener("touchmove",this.onTouchMove),this.$el.removeEventListener("touchend",this.onEnd),this.$el.removeEventListener("touchcancel",this.onCancel)):(this.$el.removeEventListener("mousewheel",this.onScroll),this.$el.removeEventListener("wheel",this.onScroll),this.$el.removeEventListener("mousedown",this.onStart),this.$el.removeEventListener("mousemove",this.onMouseMove),this.$el.removeEventListener("mouseup",this.onEnd),this.$el.removeEventListener("mouseleave",this.onCancel))},watch:{value:function(t){var e=this,n=this.placeholder?-1:0;this.normalizedOptions.forEach((function(e,i){if(e.value==t)return n=i,!1})),this.innerIndex!==n&&this.$nextTick((function(){e.correction(n)}))},options:function(t){var e=this;this.normalizedOptions=this.normalizeOptions(t);var n=this.innerIndex>=t.length?t.length-1:0,i=this.normalizedOptions[n]&&this.normalizedOptions[n].value,o=this.placeholder?-1:n,r=this.placeholder||void 0===i?null:i;this.normalizedOptions.forEach((function(t,n){if(t.value==e.value)return o=n,r=t.value,!1}));var s=this.top;this.$nextTick((function(){e.calculatePivots(s),e.innerIndex===o&&e.innerValue===r||(e.top=o>-1?-1*e.pivots[o]:0,e.innerIndex=o,e.innerValue=r,e.$emit("input",e.innerValue))}))}},methods:{normalizeOptions:function(t){return t.map((function(t){return t.hasOwnProperty("value")&&t.hasOwnProperty("name")?t:{value:t,name:t}}))},calculatePivots:function(t){var e=this.$refs.selection.getBoundingClientRect(),n=(e.top+e.bottom)/2;this.pivots=(this.$refs.items||[]).map((function(e){var i=e.getBoundingClientRect(),o=i.top,r=i.bottom;return Math.round(10*((o+r)/2-n))/10-t})).sort((function(t,e){return t-e})),this.scrollMax=-1*this.pivots[this.pivots.length-1],this.innerIndex>-1&&(this.top=this.pivots[this.innerIndex]&&-1*this.pivots[this.innerIndex]||0)},onScroll:function(t){var e=this;this.top>=0&&t.deltaY<0||this.top<=this.scrollMax&&t.deltaY>0||(t.preventDefault(),this.isScrolling||(this.isScrolling=!0,t.deltaY<0?this.correction(this.innerIndex-Math.floor(Math.abs(t.deltaY)/30*this.scrollSensitivity+1),!0):t.deltaY>0&&this.correction(this.innerIndex+Math.floor(Math.abs(t.deltaY)/30*this.scrollSensitivity+1),!0),setTimeout((function(){e.isScrolling=!1}),80)))},getTouchInfo:function(t){return i?t.changedTouches[0]||t.touches[0]:t},onStart:function(t){t.cancelable&&t.preventDefault();var e=this.getTouchInfo(t);this.startTop=this.top,this.startY=e.pageY,i||(this.isMouseDown=!0),this.isDragging=!1},onTouchMove:function(t){if(t.preventDefault(),i||this.isMouseDown){var e=this.getTouchInfo(t).pageY-this.startY;Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.startTop+e*this.touchSensitivity}},onMouseMove:function(t){if(t.preventDefault(),i||this.isMouseDown){var e=this.getTouchInfo(t).pageY-this.startY;Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.startTop+e*this.dragSensitivity}},onEnd:function(t){if(t.preventDefault(),!this.isDragging)return this.isDragging=!1,this.isMouseDown=!1,void this.handleClick(t);this.isDragging=!1,this.isMouseDown=!1,this.correctionAfterDragging()},onCancel:function(t){t.preventDefault(),(i||this.isMouseDown)&&(this.correctionAfterDragging(),this.isMouseDown=!1,this.isDragging=!1)},handleClick:function(t){var e=this.getTouchInfo(t),n=e.clientX,i=e.clientY,o=this.$refs.top.getBoundingClientRect(),r=this.$refs.bottom.getBoundingClientRect();o.left<=n&&n<=o.right&&o.top<=i&&i<=o.bottom?this.correction(this.innerIndex-1):r.left<=n&&n<=r.right&&r.top<=i&&i<=r.bottom&&this.correction(this.innerIndex+1)},correctionAfterDragging:function(){var t=null,e=null,n=this.top;this.placeholder&&(t=-1,e=0+n),this.pivots.forEach((function(i,o){var r=i+n;(null===e||Math.abs(e)>Math.abs(r))&&(t=o,e=r)})),this.correction(t)},correction:function(t,e){var n=this;t=Math.min(Math.max(t,this.placeholder?-1:0),this.pivots.length-1),this.top=t>-1?-1*this.pivots[t]:0,e&&this.innerIndex!==t&&(this.innerIndex=t,this.innerValue=t>-1?this.normalizedOptions[t].value:null,this.$emit("input",this.innerValue)),this.transitioning=!0,this.transitionTO&&(clearTimeout(this.transitionTO),this.transitionTO=null),this.transitionTO=setTimeout((function(){n.transitioning=!1,n.transitionTO=null,e||n.innerIndex===t||(n.innerIndex=t,n.innerValue=t>-1?n.normalizedOptions[t].value:null,n.$emit("input",n.innerValue))}),100)}},render:function(t){var e=this,n=[];return 0===this.normalizedOptions.length&&null===this.placeholder&&n.push(t("div",{class:["vue-scroll-picker-item","-empty","-selected"],ref:"empty",domProps:{innerHTML:this.empty}})),this.placeholder&&n.push(t("div",{class:{"vue-scroll-picker-item":!0,"-placeholder":!0,"-selected":-1==this.innerIndex},ref:"placeholder",domProps:{innerHTML:this.placeholder}})),n=n.concat(this.normalizedOptions.map((function(n,i){return t("div",{class:{"vue-scroll-picker-item":!0,"-selected":e.innerIndex==i},key:n.value,ref:"items",refInFor:!0,domProps:{innerHTML:n.name}})}))),t("div",{class:["vue-scroll-picker"]},[t("div",{class:["vue-scroll-picker-list"]},[t("div",{class:{"vue-scroll-picker-list-rotator":!0,"-transition":this.transitioning},style:{top:"".concat(this.top,"px")}},n)]),t("div",{class:["vue-scroll-picker-layer"]},[t("div",{class:["top"],ref:"top"}),t("div",{class:["middle"],ref:"selection"}),t("div",{class:["bottom"],ref:"bottom"})])])}};n(1);function r(t){return function(t){if(Array.isArray(t))return s(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return s(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}var l={render:function(t){return t("div",{class:["vue-scroll-picker-group"]},r(this.$slots.default))}};function a(t){t.component("ScrollPicker",o),t.component("ScrollPickerGroup",l)}"undefined"!=typeof window&&window.Vue&&a(window.Vue);e.default={install:a}}])}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "vue-scroll-picker",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Scroll Picker Component for Vue.js.",
@@ -23,10 +23,10 @@ "author": "Changwan Jun",
   "devDependencies": {
-    "@babel/core": "7.8.6",
-    "@babel/preset-env": "7.8.6",
-    "babel-loader": "8.0.6",
-    "cross-env": "7.0.0",
-    "css-loader": "3.4.2",
-    "html-webpack-plugin": "3.2.0",
+    "@babel/core": "7.9.6",
+    "@babel/preset-env": "7.9.6",
+    "babel-loader": "8.1.0",
+    "cross-env": "7.0.2",
+    "css-loader": "3.5.3",
+    "html-webpack-plugin": "4.3.0",
     "mini-css-extract-plugin": "0.9.0",
-    "node-sass": "4.13.1",
+    "node-sass": "4.14.1",
     "push-dir": "0.4.1",
@@ -36,9 +36,9 @@ "sass-loader": "8.0.2",
     "vue-highlightjs": "1.3.3",
-    "vue-loader": "15.9.0",
+    "vue-loader": "15.9.2",
     "vue-router": "3.1.6",
     "vue-template-compiler": "2.6.11",
-    "webpack": "4.41.6",
+    "webpack": "4.43.0",
     "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.10.3"
+    "webpack-dev-server": "3.11.0"
   }
 }

README.md

@@ -70,4 +70,4 @@ # Vue Scroll Picker
 
-  <script src="path/to/vue.js"></script>
-  <script src="path/to/vue-scroll-picker.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/vue-scroll-picker/dist/index.js"></script>
   <script>
@@ -74,0 +74,0 @@ new Vue({ el: "#app", })

src/picker/picker.js

@@ -79,3 +79,3 @@ import "./picker.scss"
     }
-    this.calculatePivots()
+    this.calculatePivots(0)
     if (this.innerValue !== this.value) {
@@ -110,3 +110,5 @@ this.$emit('input', this.innerValue)
       if (this.innerIndex !== foundIndex) {
-        this.correction(foundIndex)
+        this.$nextTick(() => {
+          this.correction(foundIndex)
+        })
       }
@@ -122,3 +124,3 @@ },
       this.normalizedOptions.forEach((option, index) => {
-        if (option.value == this.innerValue) {
+        if (option.value == this.value) {
           foundIndex = index
@@ -129,4 +131,5 @@ foundValue = option.value
       })
+      const lastTop = this.top;
       this.$nextTick(() => {
-        this.calculatePivots()
+        this.calculatePivots(lastTop)
         if (this.innerIndex !== foundIndex || this.innerValue !== foundValue) {
@@ -145,3 +148,3 @@ this.top = foundIndex > -1 ? this.pivots[foundIndex] * (-1) : 0
     },
-    calculatePivots(){
+    calculatePivots(lastTop){
       const rect = this.$refs.selection.getBoundingClientRect()
@@ -152,3 +155,3 @@ const med = (rect.top + rect.bottom) / 2
         const { top, bottom } = item.getBoundingClientRect()
-        return Math.round(((top + bottom) / 2 - med) * 10) / 10 - this.top
+        return Math.round(((top + bottom) / 2 - med) * 10) / 10 - lastTop
       }).sort((a, b) => a - b)
@@ -158,3 +161,3 @@
       if (this.innerIndex > -1) {
-        this.top = this.pivots[this.innerIndex] * (-1)
+        this.top = this.pivots[this.innerIndex] && this.pivots[this.innerIndex] * (-1) || 0
       }
@@ -167,3 +170,2 @@ },
       e.preventDefault()
-      e.stopPropagation()
 
@@ -174,5 +176,5 @@ if (this.isScrolling) return
       if (e.deltaY < 0) {
-        this.correction(this.innerIndex - Math.floor(Math.abs(e.deltaY) / 30 * this.scrollSensitivity + 1))
+        this.correction(this.innerIndex - Math.floor(Math.abs(e.deltaY) / 30 * this.scrollSensitivity + 1), true)
       } else if (e.deltaY > 0) {
-        this.correction(this.innerIndex + Math.floor(Math.abs(e.deltaY) / 30 * this.scrollSensitivity + 1))
+        this.correction(this.innerIndex + Math.floor(Math.abs(e.deltaY) / 30 * this.scrollSensitivity + 1), true)
       }
@@ -189,3 +191,2 @@ setTimeout(() => {
         e.preventDefault()
-        e.stopPropagation()
       }
@@ -202,3 +203,2 @@ const touchInfo = this.getTouchInfo(e)
       e.preventDefault()
-      e.stopPropagation()
       if (isTouchable || this.isMouseDown) {
@@ -215,3 +215,2 @@ const touchInfo = this.getTouchInfo(e)
       e.preventDefault()
-      e.stopPropagation()
       if (isTouchable || this.isMouseDown) {
@@ -228,3 +227,2 @@ const touchInfo = this.getTouchInfo(e)
       e.preventDefault()
-      e.stopPropagation()
       if (!this.isDragging) {
@@ -242,3 +240,2 @@ this.isDragging = false
       e.preventDefault()
-      e.stopPropagation()
       if (isTouchable || this.isMouseDown) {
@@ -279,6 +276,12 @@ this.correctionAfterDragging()
     },
-    correction(index) {
+    correction(index, isImmediatly) {
       index = Math.min(Math.max(index, this.placeholder ? -1 : 0), this.pivots.length - 1)
       this.top = index > -1 ? this.pivots[index] * (-1) : 0
 
+      if (isImmediatly && this.innerIndex !== index) {
+        this.innerIndex = index
+        this.innerValue = index > -1 ? this.normalizedOptions[index].value : null
+        this.$emit('input', this.innerValue)
+      }
+
       this.transitioning = true
@@ -289,7 +292,2 @@ if (this.transitionTO) {
       }
-      if (this.innerIndex !== index) {
-        this.innerIndex = index
-        this.innerValue = index > -1 ? this.normalizedOptions[index].value : null
-        this.$emit('input', this.innerValue)
-      }
 
@@ -299,2 +297,8 @@ this.transitionTO = setTimeout(() => {
         this.transitionTO = null
+
+        if (!isImmediatly && this.innerIndex !== index) {
+          this.innerIndex = index
+          this.innerValue = index > -1 ? this.normalizedOptions[index].value : null
+          this.$emit('input', this.innerValue)
+        }
       }, 100)
@@ -301,0 +305,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

75381

1.57%

Lines of code

542

0.74%

No dependency changes