vue-scroll-picker - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

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 r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.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 r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));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 m})),n.d(e,"ScrollPicker",(function(){return f})),n.d(e,"ScrollPickerGroup",(function(){return v}));n(0);function i(t){return function(t){if(Array.isArray(t))return r(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 r(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 r(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 r(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}function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return t.map((function(t){switch(o(t)){case"string":return{value:t,name:t};case"number":case"boolean":return{value:t,name:"".concat(t)}}return t}))}function l(t){return t.changedTouches||t.touches}function a(t){return l(t)?t.changedTouches[0]||t.touches[0]:t}var u,c,h,f={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=s(this.options),n=e.findIndex((function(e){return e.value==t.value}));return-1===n&&!this.placeholder&&this.options.length>0&&(n=0),{normalizedOptions:e,innerIndex:n,innerValue:e[n]&&e[n].value||null,top:null,pivots:[],pivotMin:0,transitioning:!1,transitionTO:null,start:null,isMouseDown:!1,isDragging:!1,scrollOffsetTop:0,scrollMin:0,scrollMax:0}},mounted:function(){this.calculatePivots(),this.top=this.findScrollByIndex(this.innerIndex),this.innerValue!==this.value&&this.$emit("input",this.innerValue),this.$el.addEventListener("touchstart",this.onStart),this.$el.addEventListener("touchmove",this.onMove),this.$el.addEventListener("touchend",this.onEnd),this.$el.addEventListener("touchcancel",this.onCancel),this.$el.addEventListener("mousewheel",this.onScroll),this.$el.addEventListener("DOMMouseScroll",this.onScroll),this.$el.addEventListener("wheel",this.onScroll),this.$el.addEventListener("mousedown",this.onStart),this.$el.addEventListener("mousemove",this.onMove),this.$el.addEventListener("mouseup",this.onEnd),this.$el.addEventListener("mouseleave",this.onCancel)},destroyed:function(){this.$el.removeEventListener("touchstart",this.onStart),this.$el.removeEventListener("touchmove",this.onMove),this.$el.removeEventListener("touchend",this.onEnd),this.$el.removeEventListener("touchcancel",this.onCancel),this.$el.removeEventListener("mousewheel",this.onScroll),this.$el.removeEventListener("DOMMouseScroll",this.onScroll),this.$el.removeEventListener("wheel",this.onScroll),this.$el.removeEventListener("mousedown",this.onStart),this.$el.removeEventListener("mousemove",this.onMove),this.$el.removeEventListener("mouseup",this.onEnd),this.$el.removeEventListener("mouseleave",this.onCancel)},watch:{value:function(t){if(null==t&&this.placeholder)this.correction(-1);else{var e=this.normalizedOptions.findIndex((function(e){return e.value==t}));-1!==e?this.innerIndex!==e&&this.correction(e):this.$emit("input",this.innerValue)}},options:function(t){var e=this,n=this.normalizedOptions=s(t),i=n.findIndex((function(t){return t.value==e.value}));-1===i&&!this.placeholder&&this.options.length>0&&(i=0);var r=n[i]&&n[i].value||null;this.$nextTick((function(){e.calculatePivots(),e.top=e.findScrollByIndex(i),e.innerIndex=i,e.innerValue!==r&&e.$emit("input",e.innerValue=r)}))}},methods:{calculatePivots:function(){var t=this.$refs.list.getBoundingClientRect().top;this.pivots=(this.$refs.items||[]).map((function(e){return((n=e.getBoundingClientRect()).top+n.bottom)/2-t;var n})).sort((function(t,e){return t-e})),this.pivotMin=Math.min.apply(Math,i(this.pivots));var e=Math.max.apply(Math,i(this.pivots));this.scrollOffsetTop=this.$refs.selection.offsetTop+this.$refs.selection.offsetHeight/2,this.scrollMin=this.scrollOffsetTop-this.pivotMin,this.scrollMax=this.scrollOffsetTop-e},sanitizeInternalIndex:function(t){return Math.min(Math.max(t,this.placeholder?-1:0),this.normalizedOptions.length-1)},findIndexFromScroll:function(t){var e=this,n=null,i=0;return this.pivots.forEach((function(r,o){var s=r+t-e.scrollOffsetTop;(null===n||Math.abs(n)>Math.abs(s))&&(i=o,n=s)})),this.placeholder||0===this.options.length?i-1:i},findScrollByIndex:function(t){var e=t;return(this.placeholder||0===this.options.length)&&e++,t>-1&&e in this.pivots?this.scrollOffsetTop-this.pivots[e]:this.scrollOffsetTop-this.pivotMin},onScroll:function(t){if(!(this.top>=this.scrollMin&&t.deltaY<0||this.top<=this.scrollMax&&t.deltaY>0)){t.preventDefault(),this.top=Math.min(Math.max(this.top-t.deltaY*this.scrollSensitivity,this.scrollMax),this.scrollMin);var e=this.sanitizeInternalIndex(this.findIndexFromScroll(this.top)),n=this.normalizedOptions[e]&&this.normalizedOptions[e].value||null;this.innerIndex=e,this.innerValue!==n&&this.$emit("input",this.innerValue=n),this.onAfterWheel()}},onAfterWheel:(u=function(){this.correction(this.findIndexFromScroll(this.top))},c=200,h=null,function(){h&&(clearTimeout(h),h=null);var t=this,e=arguments;h=setTimeout((function(){return u.apply(t,e)}),c)}),onStart:function(t){t.cancelable&&t.preventDefault();var e=a(t).clientY;this.start=[this.top,e],l(t)||(this.isMouseDown=!0),this.isDragging=!1},onMove:function(t){if(t.cancelable&&t.preventDefault(),this.start){var e=a(t).clientY-this.start[1];Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.start[0]+e*(l(t)?this.touchSensitivity:this.dragSensitivity)}},onEnd:function(t){t.cancelable&&t.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.top)):this.handleClick(t),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel:function(t){t.cancelable&&t.preventDefault(),this.correction(this.findIndexFromScroll(this.top)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},handleClick:function(t){var e=a(t),n=e.clientX,i=e.clientY,r=this.$refs.top.getBoundingClientRect(),o=this.$refs.bottom.getBoundingClientRect();r.left<=n&&n<=r.right&&r.top<=i&&i<=r.bottom?this.correction(this.innerIndex-1):o.left<=n&&n<=o.right&&o.top<=i&&i<=o.bottom&&this.correction(this.innerIndex+1)},correction:function(t){var e=this,n=this.sanitizeInternalIndex(t),i=this.normalizedOptions[n]&&this.normalizedOptions[n].value||null;this.top=this.findScrollByIndex(n),this.transitioning=!0,this.transitionTO&&(clearTimeout(this.transitionTO),this.transitionTO=null),this.transitionTO=setTimeout((function(){e.transitioning=!1,e.transitionTO=null,e.innerIndex=n,e.innerValue!==i&&(e.innerValue=i,e.$emit("input",e.innerValue))}),100)}},render:function(t){var e=this,n=[];return this.placeholder?n.push(t("div",{class:{"vue-scroll-picker-item":!0,"-placeholder":!0,"-selected":-1==this.innerIndex},ref:"items",refInFor:!0,domProps:{innerHTML:this.placeholder}})):0===this.normalizedOptions.length&&null===this.placeholder&&n.push(t("div",{class:["vue-scroll-picker-item","-empty","-selected"],ref:"items",refInFor:!0,domProps:{innerHTML:this.empty}})),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",{ref:"list",class:{"vue-scroll-picker-list-rotator":!0,"-transition":this.transitioning},style:null!==this.top?{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 d(t){return function(t){if(Array.isArray(t))return p(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 p(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 p(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 p(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 v={render:function(t){return t("div",{class:["vue-scroll-picker-group"]},d(this.$slots.default))}};function m(t){t.component("ScrollPicker",f),t.component("ScrollPickerGroup",v)}"undefined"!=typeof window&&window.Vue&&m(window.Vue);e.default={install:m}}])}));
+!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 m})),n.d(e,"ScrollPicker",(function(){return f})),n.d(e,"ScrollPickerGroup",(function(){return v}));n(0);function i(t){return function(t){if(Array.isArray(t))return o(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 o(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 o(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 o(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}function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return t.map((function(t){switch(r(t)){case"string":return{value:t,name:t};case"number":case"boolean":return{value:t,name:"".concat(t)}}return t}))}function l(t){return t.changedTouches||t.touches}function a(t){return l(t)?t.changedTouches[0]||t.touches[0]:t}var c,u,h,f={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=s(this.options),n=e.findIndex((function(e){return e.value==t.value}));return-1===n&&!this.placeholder&&this.options.length>0&&(n=0),{normalizedOptions:e,innerIndex:n,innerValue:e[n]&&e[n].value||null,top:null,pivots:[],pivotMin:0,pivotMax:0,transitioning:!1,transitionTO:null,start:null,isMouseDown:!1,isDragging:!1,scrollOffsetTop:0,scrollMin:0,scrollMax:0}},mounted:function(){this.calculatePivots(),this.top=this.findScrollByIndex(this.innerIndex),this.innerValue!==this.value&&this.$emit("input",this.innerValue),this.$el.addEventListener("touchstart",this.onStart),this.$el.addEventListener("touchmove",this.onMove),this.$el.addEventListener("touchend",this.onEnd),this.$el.addEventListener("touchcancel",this.onCancel),this.$el.addEventListener("mousewheel",this.onScroll),this.$el.addEventListener("DOMMouseScroll",this.onScroll),this.$el.addEventListener("wheel",this.onScroll),this.$el.addEventListener("mousedown",this.onStart),this.$el.addEventListener("mousemove",this.onMove),this.$el.addEventListener("mouseup",this.onEnd),this.$el.addEventListener("mouseleave",this.onCancel)},destroyed:function(){this.$el.removeEventListener("touchstart",this.onStart),this.$el.removeEventListener("touchmove",this.onMove),this.$el.removeEventListener("touchend",this.onEnd),this.$el.removeEventListener("touchcancel",this.onCancel),this.$el.removeEventListener("mousewheel",this.onScroll),this.$el.removeEventListener("DOMMouseScroll",this.onScroll),this.$el.removeEventListener("wheel",this.onScroll),this.$el.removeEventListener("mousedown",this.onStart),this.$el.removeEventListener("mousemove",this.onMove),this.$el.removeEventListener("mouseup",this.onEnd),this.$el.removeEventListener("mouseleave",this.onCancel)},watch:{value:function(t){if(null==t&&this.placeholder)this.correction(-1);else{var e=this.normalizedOptions.findIndex((function(e){return e.value==t}));-1!==e?this.innerIndex!==e&&this.correction(e):this.$emit("input",this.innerValue)}},options:function(t){var e=this,n=this.normalizedOptions=s(t),i=n.findIndex((function(t){return t.value==e.value}));-1===i&&!this.placeholder&&this.options.length>0&&(i=0);var o=n[i]&&n[i].value||null;this.$nextTick((function(){e.calculatePivots(),e.top=e.findScrollByIndex(i),e.innerIndex=i,e.innerValue!==o&&e.$emit("input",e.innerValue=o)}))}},methods:{calculatePivots:function(){var t=this.$refs.list.getBoundingClientRect().top;this.pivots=(this.$refs.items||[]).map((function(e){return((n=e.getBoundingClientRect()).top+n.bottom)/2-t;var n})).sort((function(t,e){return t-e})),this.pivotMin=Math.min.apply(Math,i(this.pivots)),this.pivotMax=Math.max.apply(Math,i(this.pivots)),this.scrollOffsetTop=this.$refs.selection.offsetTop+this.$refs.selection.offsetHeight/2,this.scrollMin=this.scrollOffsetTop-this.pivotMin,this.scrollMax=this.scrollOffsetTop-this.pivotMax},sanitizeInternalIndex:function(t){return Math.min(Math.max(t,this.placeholder?-1:0),this.normalizedOptions.length-1)},findIndexFromScroll:function(t){var e=this,n=null,i=0;return this.pivots.forEach((function(o,r){var s=o+t-e.scrollOffsetTop;(null===n||Math.abs(n)>Math.abs(s))&&(i=r,n=s)})),this.placeholder||0===this.options.length?i-1:i},findScrollByIndex:function(t){var e=t;return(this.placeholder||0===this.options.length)&&e++,t>-1&&e in this.pivots?this.scrollOffsetTop-this.pivots[e]:t>=this.pivots.length?this.scrollOffsetTop-this.pivotMax:this.scrollOffsetTop-this.pivotMin},onScroll:function(t){if(!(this.top>=this.scrollMin&&t.deltaY<0||this.top<=this.scrollMax&&t.deltaY>0||1===this.pivots.length)){t.preventDefault();var e=this.sanitizeInternalIndex(this.innerIndex+(t.deltaY>0?1:-1)),n=t.deltaY>0?this.findScrollByIndex(e-1)-this.findScrollByIndex(e):this.findScrollByIndex(e)-this.findScrollByIndex(e+1),i=Math.max(Math.min(t.deltaY,n),-1*n);this.top=Math.min(Math.max(this.top-i*this.scrollSensitivity,this.scrollMax),this.scrollMin);var o=this.sanitizeInternalIndex(this.findIndexFromScroll(this.top)),r=this.normalizedOptions[o]&&this.normalizedOptions[o].value||null;this.innerIndex=o,this.innerValue!==r&&this.$emit("input",this.innerValue=r),this.onAfterWheel()}},onAfterWheel:(c=function(){this.correction(this.findIndexFromScroll(this.top))},u=200,h=null,function(){h&&(clearTimeout(h),h=null);var t=this,e=arguments;h=setTimeout((function(){return c.apply(t,e)}),u)}),onStart:function(t){t.cancelable&&t.preventDefault();var e=a(t).clientY;this.start=[this.top,e],l(t)||(this.isMouseDown=!0),this.isDragging=!1},onMove:function(t){if(t.cancelable&&t.preventDefault(),this.start){var e=a(t).clientY-this.start[1];Math.abs(e)>1.5&&(this.isDragging=!0),this.top=this.start[0]+e*(l(t)?this.touchSensitivity:this.dragSensitivity)}},onEnd:function(t){t.cancelable&&t.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.top)):this.handleClick(t),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel:function(t){t.cancelable&&t.preventDefault(),this.correction(this.findIndexFromScroll(this.top)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},handleClick:function(t){var e=a(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)},correction:function(t){var e=this,n=this.sanitizeInternalIndex(t),i=this.normalizedOptions[n]&&this.normalizedOptions[n].value||null;this.top=this.findScrollByIndex(n),this.transitioning=!0,this.transitionTO&&(clearTimeout(this.transitionTO),this.transitionTO=null),this.transitionTO=setTimeout((function(){e.transitioning=!1,e.transitionTO=null,e.innerIndex=n,e.innerValue!==i&&(e.innerValue=i,e.$emit("input",e.innerValue))}),100)}},render:function(t){var e=this,n=[];return this.placeholder?n.push(t("div",{class:{"vue-scroll-picker-item":!0,"-placeholder":!0,"-selected":-1==this.innerIndex},ref:"items",refInFor:!0,domProps:{innerHTML:this.placeholder}})):0===this.normalizedOptions.length&&null===this.placeholder&&n.push(t("div",{class:["vue-scroll-picker-item","-empty","-selected"],ref:"items",refInFor:!0,domProps:{innerHTML:this.empty}})),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",{ref:"list",class:{"vue-scroll-picker-list-rotator":!0,"-transition":this.transitioning},style:null!==this.top?{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 d(t){return function(t){if(Array.isArray(t))return p(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 p(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 p(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 p(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 v={render:function(t){return t("div",{class:["vue-scroll-picker-group"]},d(this.$slots.default))}};function m(t){t.component("ScrollPicker",f),t.component("ScrollPickerGroup",v)}"undefined"!=typeof window&&window.Vue&&m(window.Vue);e.default={install:m}}])}));
 //# sourceMappingURL=index.js.map

lib/vue-scroll-picker.es.js

@@ -1,2 +0,2 @@
-import{defineComponent as t,h as e,renderSlot as i}from"vue";function s(t){return t.map((t=>{switch(typeof t){case"string":return{value:t,name:t};case"number":case"boolean":return{value:t,name:`${t}`}}return t}))}function n(t){return t.changedTouches||t.touches}function l(t){return n(t)?t.changedTouches[0]||t.touches[0]:t}var o=t({props:{modelValue:null,options:{type:Array,default:()=>[]},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(){var t,e;const i=s(this.options);let n=i.findIndex((t=>t.value==this.modelValue));-1===n&&!this.placeholder&&!this.$slots.placeholder&&this.options.length>0&&(n=0);return{refItems:[],internalOptions:i,internalIndex:n,internalValue:null!=(e=null==(t=i[n])?void 0:t.value)?e:null,pivots:[],pivotsMin:0,pivotsMax:0,scroll:null,scrollOffsetTop:0,scrollMin:0,scrollMax:0,transitioning:!1,transitionTimer:null,start:null,isMouseDown:!1,isDragging:!1}},beforeUpdate(){this.refItems=[]},mounted(){this.calculatePivots(),this.scroll=this.findScrollByIndex(this.internalIndex),this.internalValue!==this.modelValue&&this.$emit("update:modelValue",this.internalValue);const t=this.$el;t.addEventListener("touchstart",this.onStart),t.addEventListener("touchmove",this.onMove),t.addEventListener("touchend",this.onEnd),t.addEventListener("touchcancel",this.onCancel),t.addEventListener("mousewheel",this.onWheel),t.addEventListener("DOMMouseScroll",this.onWheel),t.addEventListener("wheel",this.onWheel),t.addEventListener("mousedown",this.onStart),t.addEventListener("mousemove",this.onMove),t.addEventListener("mouseup",this.onEnd),t.addEventListener("mouseleave",this.onCancel)},beforeUnmount(){const t=this.$el;t.removeEventListener("touchstart",this.onStart),t.removeEventListener("touchmove",this.onMove),t.removeEventListener("touchend",this.onEnd),t.removeEventListener("touchcancel",this.onCancel),t.removeEventListener("mousewheel",this.onWheel),t.removeEventListener("DOMMouseScroll",this.onWheel),t.removeEventListener("wheel",this.onWheel),t.removeEventListener("mousedown",this.onStart),t.removeEventListener("mousemove",this.onMove),t.removeEventListener("mouseup",this.onEnd),t.removeEventListener("mouseleave",this.onCancel)},watch:{modelValue(t){if(null==t&&this.hasPlaceholder)return void this.correction(-1);const e=this.internalOptions.findIndex((e=>e.value==t));-1!==e?this.internalIndex!==e&&this.correction(e):this.$emit("update:modelValue",this.internalValue)},options:{handler(t){var e,i;const n=this.internalOptions=s(t);let l=n.findIndex((t=>t.value==this.modelValue));-1===l&&!this.hasPlaceholder&&this.options.length>0&&(l=0);const o=null!=(i=null==(e=n[l])?void 0:e.value)?i:null;this.$nextTick((()=>{this.calculatePivots(),this.scroll=this.findScrollByIndex(l),this.internalIndex=l,this.internalValue!==o&&this.$emit("update:modelValue",this.internalValue=o)}))},deep:!0}},computed:{hasPlaceholder(){return!(!this.placeholder&&!this.$slots.placeholder)}},methods:{setRefItem(t){this.refItems.push(t)},calculatePivots(){const t=this.$refs.rotator,e=this.$refs.layerSelection,i=t.getBoundingClientRect().top,s=this.pivots=this.refItems.map((t=>function(t){const{top:e,bottom:i}=t.getBoundingClientRect();return(e+i)/2}(t)-i)).sort(((t,e)=>t-e)),n=this.pivotsMin=Math.min(...s),l=this.pivotsMax=Math.max(...s),o=this.scrollOffsetTop=e.offsetTop+e.offsetHeight/2;this.scrollMin=o-n,this.scrollMax=o-l},sanitizeInternalIndex(t){return Math.min(Math.max(t,this.hasPlaceholder?-1:0),this.internalOptions.length-1)},findIndexFromScroll(t){let e=null,i=0;return this.pivots.forEach(((s,n)=>{const l=s+t-this.scrollOffsetTop;(null===e||Math.abs(e)>Math.abs(l))&&(i=n,e=l)})),this.hasPlaceholder||0===this.options.length?i-1:i},findScrollByIndex(t){let e=t;return(this.hasPlaceholder||0===this.options.length)&&e++,t>-1&&e in this.pivots?this.scrollOffsetTop-this.pivots[e]:this.scrollOffsetTop-this.pivotsMin},onWheel(t){var e,i;if(this.scroll>=this.scrollMin&&t.deltaY<0)return;if(this.scroll<=this.scrollMax&&t.deltaY>0)return;t.preventDefault(),this.scroll=Math.min(Math.max(this.scroll-t.deltaY*this.scrollSensitivity,this.scrollMax),this.scrollMin);const s=this.sanitizeInternalIndex(this.findIndexFromScroll(this.scroll)),n=null!=(i=null==(e=this.internalOptions[s])?void 0:e.value)?i:null;this.internalIndex=s,this.internalValue!==n&&this.$emit("update:modelValue",this.internalValue=n),this.onAfterWheel((()=>{this.correction(this.findIndexFromScroll(this.scroll))}))},onAfterWheel:function(t,e=83){let i=null;return function(){i&&(clearTimeout(i),i=null);const s=this,n=arguments;i=setTimeout((()=>t.apply(s,n)),e)}}((t=>{t()}),200),onStart(t){t.cancelable&&t.preventDefault();const{clientY:e}=l(t);this.start=[this.scroll,e],n(t)||(this.isMouseDown=!0),this.isDragging=!1},onMove(t){if(t.cancelable&&t.preventDefault(),!this.start)return;const{clientY:e}=l(t),i=e-this.start[1];Math.abs(i)>1.5&&(this.isDragging=!0),this.scroll=this.start[0]+i*(n(t)?this.touchSensitivity:this.dragSensitivity)},onEnd(t){t.cancelable&&t.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.scroll)):this.onClick(t),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel(t){t.cancelable&&t.preventDefault(),this.correction(this.findIndexFromScroll(this.scroll)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},onClick(t){const e=this.$refs.layerTop,i=this.$refs.layerBottom,s=l(t),n=s.clientX,o=s.clientY,r=e.getBoundingClientRect(),a=i.getBoundingClientRect();r.left<=n&&n<=r.right&&r.top<=o&&o<=r.bottom?this.correction(this.internalIndex-1):a.left<=n&&n<=a.right&&a.top<=o&&o<=a.bottom&&this.correction(this.internalIndex+1)},correction(t){var e,i;const s=this.sanitizeInternalIndex(t),n=null!=(i=null==(e=this.internalOptions[s])?void 0:e.value)?i:null;this.scroll=this.findScrollByIndex(s),this.transitioning=!0,this.transitionTimer&&(clearTimeout(this.transitionTimer),this.transitionTimer=null),this.transitionTimer=setTimeout((()=>{this.transitioning=!1,this.transitionTimer=null,this.internalIndex=s,this.internalValue!==n&&this.$emit("update:modelValue",this.internalValue=n)}),100)}},render(){let t=[];return this.hasPlaceholder?t.push(e("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-placeholder",{"vue-scroll-picker-item-selected":-1===this.internalIndex}],ref:t=>t&&this.setRefItem(t)},i(this.$slots,"placeholder",{text:this.placeholder},(()=>[this.placeholder])))):0===this.internalOptions.length&&t.push(e("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-empty","vue-scroll-picker-item-selected"],ref:t=>t&&this.setRefItem(t)},i(this.$slots,"empty",{text:this.empty},(()=>[this.empty])))),t=t.concat(this.internalOptions.map(((t,s)=>e("div",{class:["vue-scroll-picker-item",{"vue-scroll-picker-item-selected":this.internalIndex===s}],key:t.value,ref:t=>t&&this.setRefItem(t)},i(this.$slots,"default",{option:t},(()=>[t.name])))))),e("div",{class:["vue-scroll-picker"]},[e("div",{ref:"rotator",class:["vue-scroll-picker-rotator",{"vue-scroll-picker-rotator-transition":this.transitioning}],style:"number"==typeof this.scroll?{top:`${this.scroll}px`}:{}},t),e("div",{class:["vue-scroll-picker-layer"]},[e("div",{class:["vue-scroll-picker-layer-top"],ref:"layerTop"}),e("div",{class:["vue-scroll-picker-layer-selection"],ref:"layerSelection"}),e("div",{class:["vue-scroll-picker-layer-bottom"],ref:"layerBottom"})])])}});function r(t){t.component("VueScrollPicker",o)}"undefined"!=typeof window&&window.Vue&&r(window.Vue);const a={install:r};export default a;export{o as VueScrollPicker,r as install};
+import{defineComponent as t,h as e,renderSlot as i}from"vue";function s(t){return t.map((t=>{switch(typeof t){case"string":return{value:t,name:t};case"number":case"boolean":return{value:t,name:`${t}`}}return t}))}function n(t){return t.changedTouches||t.touches}function l(t){return n(t)?t.changedTouches[0]||t.touches[0]:t}var o=t({props:{modelValue:null,options:{type:Array,default:()=>[]},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(){var t,e;const i=s(this.options);let n=i.findIndex((t=>t.value==this.modelValue));-1===n&&!this.placeholder&&!this.$slots.placeholder&&this.options.length>0&&(n=0);return{refItems:[],internalOptions:i,internalIndex:n,internalValue:null!=(e=null==(t=i[n])?void 0:t.value)?e:null,pivots:[],pivotsMin:0,pivotsMax:0,scroll:null,scrollOffsetTop:0,scrollMin:0,scrollMax:0,transitioning:!1,transitionTimer:null,start:null,isMouseDown:!1,isDragging:!1}},beforeUpdate(){this.refItems=[]},mounted(){this.calculatePivots(),this.scroll=this.findScrollByIndex(this.internalIndex),this.internalValue!==this.modelValue&&this.$emit("update:modelValue",this.internalValue);const t=this.$el;t.addEventListener("touchstart",this.onStart),t.addEventListener("touchmove",this.onMove),t.addEventListener("touchend",this.onEnd),t.addEventListener("touchcancel",this.onCancel),t.addEventListener("mousewheel",this.onWheel),t.addEventListener("DOMMouseScroll",this.onWheel),t.addEventListener("wheel",this.onWheel),t.addEventListener("mousedown",this.onStart),t.addEventListener("mousemove",this.onMove),t.addEventListener("mouseup",this.onEnd),t.addEventListener("mouseleave",this.onCancel)},beforeUnmount(){const t=this.$el;t.removeEventListener("touchstart",this.onStart),t.removeEventListener("touchmove",this.onMove),t.removeEventListener("touchend",this.onEnd),t.removeEventListener("touchcancel",this.onCancel),t.removeEventListener("mousewheel",this.onWheel),t.removeEventListener("DOMMouseScroll",this.onWheel),t.removeEventListener("wheel",this.onWheel),t.removeEventListener("mousedown",this.onStart),t.removeEventListener("mousemove",this.onMove),t.removeEventListener("mouseup",this.onEnd),t.removeEventListener("mouseleave",this.onCancel)},watch:{modelValue(t){if(null==t&&this.hasPlaceholder)return void this.correction(-1);const e=this.internalOptions.findIndex((e=>e.value==t));-1!==e?this.internalIndex!==e&&this.correction(e):this.$emit("update:modelValue",this.internalValue)},options:{handler(t){var e,i;const n=this.internalOptions=s(t);let l=n.findIndex((t=>t.value==this.modelValue));-1===l&&!this.hasPlaceholder&&this.options.length>0&&(l=0);const o=null!=(i=null==(e=n[l])?void 0:e.value)?i:null;this.$nextTick((()=>{this.calculatePivots(),this.scroll=this.findScrollByIndex(l),this.internalIndex=l,this.internalValue!==o&&this.$emit("update:modelValue",this.internalValue=o)}))},deep:!0}},computed:{hasPlaceholder(){return!(!this.placeholder&&!this.$slots.placeholder)}},methods:{setRefItem(t){this.refItems.push(t)},calculatePivots(){const t=this.$refs.rotator,e=this.$refs.layerSelection,i=t.getBoundingClientRect().top,s=this.pivots=this.refItems.map((t=>function(t){const{top:e,bottom:i}=t.getBoundingClientRect();return(e+i)/2}(t)-i)).sort(((t,e)=>t-e)),n=this.pivotsMin=Math.min(...s),l=this.pivotsMax=Math.max(...s),o=this.scrollOffsetTop=e.offsetTop+e.offsetHeight/2;this.scrollMin=o-n,this.scrollMax=o-l},sanitizeInternalIndex(t){return Math.min(Math.max(t,this.hasPlaceholder?-1:0),this.internalOptions.length-1)},findIndexFromScroll(t){let e=null,i=0;return this.pivots.forEach(((s,n)=>{const l=s+t-this.scrollOffsetTop;(null===e||Math.abs(e)>Math.abs(l))&&(i=n,e=l)})),this.hasPlaceholder||0===this.options.length?i-1:i},findScrollByIndex(t){let e=t;return(this.hasPlaceholder||0===this.options.length)&&e++,t>-1&&e in this.pivots?this.scrollOffsetTop-this.pivots[e]:t>=this.pivots.length?this.scrollOffsetTop-this.pivotsMax:this.scrollOffsetTop-this.pivotsMin},onWheel(t){var e,i;if(this.scroll>=this.scrollMin&&t.deltaY<0)return;if(this.scroll<=this.scrollMax&&t.deltaY>0)return;if(1===this.pivots.length)return;t.preventDefault();const s=this.sanitizeInternalIndex(this.internalIndex+(t.deltaY>0?1:-1)),n=t.deltaY>0?this.findScrollByIndex(s-1)-this.findScrollByIndex(s):this.findScrollByIndex(s)-this.findScrollByIndex(s+1),l=Math.max(Math.min(t.deltaY,n),-1*n);this.scroll=Math.min(Math.max(this.scroll-l*this.scrollSensitivity,this.scrollMax),this.scrollMin);const o=this.sanitizeInternalIndex(this.findIndexFromScroll(this.scroll)),r=null!=(i=null==(e=this.internalOptions[o])?void 0:e.value)?i:null;this.internalIndex=o,this.internalValue!==r&&this.$emit("update:modelValue",this.internalValue=r),this.onAfterWheel((()=>{this.correction(this.findIndexFromScroll(this.scroll))}))},onAfterWheel:function(t,e=83){let i=null;return function(){i&&(clearTimeout(i),i=null);const s=this,n=arguments;i=setTimeout((()=>t.apply(s,n)),e)}}((t=>{t()}),200),onStart(t){t.cancelable&&t.preventDefault();const{clientY:e}=l(t);this.start=[this.scroll,e],n(t)||(this.isMouseDown=!0),this.isDragging=!1},onMove(t){if(t.cancelable&&t.preventDefault(),!this.start)return;const{clientY:e}=l(t),i=e-this.start[1];Math.abs(i)>1.5&&(this.isDragging=!0),this.scroll=this.start[0]+i*(n(t)?this.touchSensitivity:this.dragSensitivity)},onEnd(t){t.cancelable&&t.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.scroll)):this.onClick(t),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel(t){t.cancelable&&t.preventDefault(),this.correction(this.findIndexFromScroll(this.scroll)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},onClick(t){const e=this.$refs.layerTop,i=this.$refs.layerBottom,s=l(t),n=s.clientX,o=s.clientY,r=e.getBoundingClientRect(),h=i.getBoundingClientRect();r.left<=n&&n<=r.right&&r.top<=o&&o<=r.bottom?this.correction(this.internalIndex-1):h.left<=n&&n<=h.right&&h.top<=o&&o<=h.bottom&&this.correction(this.internalIndex+1)},correction(t){var e,i;const s=this.sanitizeInternalIndex(t),n=null!=(i=null==(e=this.internalOptions[s])?void 0:e.value)?i:null;this.scroll=this.findScrollByIndex(s),this.transitioning=!0,this.transitionTimer&&(clearTimeout(this.transitionTimer),this.transitionTimer=null),this.transitionTimer=setTimeout((()=>{this.transitioning=!1,this.transitionTimer=null,this.internalIndex=s,this.internalValue!==n&&this.$emit("update:modelValue",this.internalValue=n)}),100)}},render(){let t=[];return this.hasPlaceholder?t.push(e("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-placeholder",{"vue-scroll-picker-item-selected":-1===this.internalIndex}],ref:t=>t&&this.setRefItem(t)},i(this.$slots,"placeholder",{text:this.placeholder},(()=>[this.placeholder])))):0===this.internalOptions.length&&t.push(e("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-empty","vue-scroll-picker-item-selected"],ref:t=>t&&this.setRefItem(t)},i(this.$slots,"empty",{text:this.empty},(()=>[this.empty])))),t=t.concat(this.internalOptions.map(((t,s)=>e("div",{class:["vue-scroll-picker-item",{"vue-scroll-picker-item-selected":this.internalIndex===s}],key:t.value,ref:t=>t&&this.setRefItem(t)},i(this.$slots,"default",{option:t},(()=>[t.name])))))),e("div",{class:["vue-scroll-picker"]},[e("div",{ref:"rotator",class:["vue-scroll-picker-rotator",{"vue-scroll-picker-rotator-transition":this.transitioning}],style:"number"==typeof this.scroll?{top:`${this.scroll}px`}:{}},t),e("div",{class:["vue-scroll-picker-layer"]},[e("div",{class:["vue-scroll-picker-layer-top"],ref:"layerTop"}),e("div",{class:["vue-scroll-picker-layer-selection"],ref:"layerSelection"}),e("div",{class:["vue-scroll-picker-layer-bottom"],ref:"layerBottom"})])])}});function r(t){t.component("VueScrollPicker",o)}"undefined"!=typeof window&&window.Vue&&r(window.Vue);const h={install:r};export default h;export{o as VueScrollPicker,r as install};
 //# sourceMappingURL=vue-scroll-picker.es.js.map

lib/vue-scroll-picker.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueScrollPicker={},e.Vue)}(this,(function(e,t){"use strict";function i(e){return e.map((e=>{switch(typeof e){case"string":return{value:e,name:e};case"number":case"boolean":return{value:e,name:`${e}`}}return e}))}function s(e){return e.changedTouches||e.touches}function n(e){return s(e)?e.changedTouches[0]||e.touches[0]:e}var l=t.defineComponent({props:{modelValue:null,options:{type:Array,default:()=>[]},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(){var e,t;const s=i(this.options);let n=s.findIndex((e=>e.value==this.modelValue));-1===n&&!this.placeholder&&!this.$slots.placeholder&&this.options.length>0&&(n=0);return{refItems:[],internalOptions:s,internalIndex:n,internalValue:null!=(t=null==(e=s[n])?void 0:e.value)?t:null,pivots:[],pivotsMin:0,pivotsMax:0,scroll:null,scrollOffsetTop:0,scrollMin:0,scrollMax:0,transitioning:!1,transitionTimer:null,start:null,isMouseDown:!1,isDragging:!1}},beforeUpdate(){this.refItems=[]},mounted(){this.calculatePivots(),this.scroll=this.findScrollByIndex(this.internalIndex),this.internalValue!==this.modelValue&&this.$emit("update:modelValue",this.internalValue);const e=this.$el;e.addEventListener("touchstart",this.onStart),e.addEventListener("touchmove",this.onMove),e.addEventListener("touchend",this.onEnd),e.addEventListener("touchcancel",this.onCancel),e.addEventListener("mousewheel",this.onWheel),e.addEventListener("DOMMouseScroll",this.onWheel),e.addEventListener("wheel",this.onWheel),e.addEventListener("mousedown",this.onStart),e.addEventListener("mousemove",this.onMove),e.addEventListener("mouseup",this.onEnd),e.addEventListener("mouseleave",this.onCancel)},beforeUnmount(){const e=this.$el;e.removeEventListener("touchstart",this.onStart),e.removeEventListener("touchmove",this.onMove),e.removeEventListener("touchend",this.onEnd),e.removeEventListener("touchcancel",this.onCancel),e.removeEventListener("mousewheel",this.onWheel),e.removeEventListener("DOMMouseScroll",this.onWheel),e.removeEventListener("wheel",this.onWheel),e.removeEventListener("mousedown",this.onStart),e.removeEventListener("mousemove",this.onMove),e.removeEventListener("mouseup",this.onEnd),e.removeEventListener("mouseleave",this.onCancel)},watch:{modelValue(e){if(null==e&&this.hasPlaceholder)return void this.correction(-1);const t=this.internalOptions.findIndex((t=>t.value==e));-1!==t?this.internalIndex!==t&&this.correction(t):this.$emit("update:modelValue",this.internalValue)},options:{handler(e){var t,s;const n=this.internalOptions=i(e);let l=n.findIndex((e=>e.value==this.modelValue));-1===l&&!this.hasPlaceholder&&this.options.length>0&&(l=0);const o=null!=(s=null==(t=n[l])?void 0:t.value)?s:null;this.$nextTick((()=>{this.calculatePivots(),this.scroll=this.findScrollByIndex(l),this.internalIndex=l,this.internalValue!==o&&this.$emit("update:modelValue",this.internalValue=o)}))},deep:!0}},computed:{hasPlaceholder(){return!(!this.placeholder&&!this.$slots.placeholder)}},methods:{setRefItem(e){this.refItems.push(e)},calculatePivots(){const e=this.$refs.rotator,t=this.$refs.layerSelection,i=e.getBoundingClientRect().top,s=this.pivots=this.refItems.map((e=>function(e){const{top:t,bottom:i}=e.getBoundingClientRect();return(t+i)/2}(e)-i)).sort(((e,t)=>e-t)),n=this.pivotsMin=Math.min(...s),l=this.pivotsMax=Math.max(...s),o=this.scrollOffsetTop=t.offsetTop+t.offsetHeight/2;this.scrollMin=o-n,this.scrollMax=o-l},sanitizeInternalIndex(e){return Math.min(Math.max(e,this.hasPlaceholder?-1:0),this.internalOptions.length-1)},findIndexFromScroll(e){let t=null,i=0;return this.pivots.forEach(((s,n)=>{const l=s+e-this.scrollOffsetTop;(null===t||Math.abs(t)>Math.abs(l))&&(i=n,t=l)})),this.hasPlaceholder||0===this.options.length?i-1:i},findScrollByIndex(e){let t=e;return(this.hasPlaceholder||0===this.options.length)&&t++,e>-1&&t in this.pivots?this.scrollOffsetTop-this.pivots[t]:this.scrollOffsetTop-this.pivotsMin},onWheel(e){var t,i;if(this.scroll>=this.scrollMin&&e.deltaY<0)return;if(this.scroll<=this.scrollMax&&e.deltaY>0)return;e.preventDefault(),this.scroll=Math.min(Math.max(this.scroll-e.deltaY*this.scrollSensitivity,this.scrollMax),this.scrollMin);const s=this.sanitizeInternalIndex(this.findIndexFromScroll(this.scroll)),n=null!=(i=null==(t=this.internalOptions[s])?void 0:t.value)?i:null;this.internalIndex=s,this.internalValue!==n&&this.$emit("update:modelValue",this.internalValue=n),this.onAfterWheel((()=>{this.correction(this.findIndexFromScroll(this.scroll))}))},onAfterWheel:function(e,t=83){let i=null;return function(){i&&(clearTimeout(i),i=null);const s=this,n=arguments;i=setTimeout((()=>e.apply(s,n)),t)}}((e=>{e()}),200),onStart(e){e.cancelable&&e.preventDefault();const{clientY:t}=n(e);this.start=[this.scroll,t],s(e)||(this.isMouseDown=!0),this.isDragging=!1},onMove(e){if(e.cancelable&&e.preventDefault(),!this.start)return;const{clientY:t}=n(e),i=t-this.start[1];Math.abs(i)>1.5&&(this.isDragging=!0),this.scroll=this.start[0]+i*(s(e)?this.touchSensitivity:this.dragSensitivity)},onEnd(e){e.cancelable&&e.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.scroll)):this.onClick(e),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel(e){e.cancelable&&e.preventDefault(),this.correction(this.findIndexFromScroll(this.scroll)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},onClick(e){const t=this.$refs.layerTop,i=this.$refs.layerBottom,s=n(e),l=s.clientX,o=s.clientY,r=t.getBoundingClientRect(),h=i.getBoundingClientRect();r.left<=l&&l<=r.right&&r.top<=o&&o<=r.bottom?this.correction(this.internalIndex-1):h.left<=l&&l<=h.right&&h.top<=o&&o<=h.bottom&&this.correction(this.internalIndex+1)},correction(e){var t,i;const s=this.sanitizeInternalIndex(e),n=null!=(i=null==(t=this.internalOptions[s])?void 0:t.value)?i:null;this.scroll=this.findScrollByIndex(s),this.transitioning=!0,this.transitionTimer&&(clearTimeout(this.transitionTimer),this.transitionTimer=null),this.transitionTimer=setTimeout((()=>{this.transitioning=!1,this.transitionTimer=null,this.internalIndex=s,this.internalValue!==n&&this.$emit("update:modelValue",this.internalValue=n)}),100)}},render(){let e=[];return this.hasPlaceholder?e.push(t.h("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-placeholder",{"vue-scroll-picker-item-selected":-1===this.internalIndex}],ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"placeholder",{text:this.placeholder},(()=>[this.placeholder])))):0===this.internalOptions.length&&e.push(t.h("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-empty","vue-scroll-picker-item-selected"],ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"empty",{text:this.empty},(()=>[this.empty])))),e=e.concat(this.internalOptions.map(((e,i)=>t.h("div",{class:["vue-scroll-picker-item",{"vue-scroll-picker-item-selected":this.internalIndex===i}],key:e.value,ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"default",{option:e},(()=>[e.name])))))),t.h("div",{class:["vue-scroll-picker"]},[t.h("div",{ref:"rotator",class:["vue-scroll-picker-rotator",{"vue-scroll-picker-rotator-transition":this.transitioning}],style:"number"==typeof this.scroll?{top:`${this.scroll}px`}:{}},e),t.h("div",{class:["vue-scroll-picker-layer"]},[t.h("div",{class:["vue-scroll-picker-layer-top"],ref:"layerTop"}),t.h("div",{class:["vue-scroll-picker-layer-selection"],ref:"layerSelection"}),t.h("div",{class:["vue-scroll-picker-layer-bottom"],ref:"layerBottom"})])])}});function o(e){e.component("VueScrollPicker",l)}"undefined"!=typeof window&&window.Vue&&o(window.Vue);const r={install:o};e.VueScrollPicker=l,e.default=r,e.install=o,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueScrollPicker={},e.Vue)}(this,(function(e,t){"use strict";function i(e){return e.map((e=>{switch(typeof e){case"string":return{value:e,name:e};case"number":case"boolean":return{value:e,name:`${e}`}}return e}))}function n(e){return e.changedTouches||e.touches}function s(e){return n(e)?e.changedTouches[0]||e.touches[0]:e}var l=t.defineComponent({props:{modelValue:null,options:{type:Array,default:()=>[]},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(){var e,t;const n=i(this.options);let s=n.findIndex((e=>e.value==this.modelValue));-1===s&&!this.placeholder&&!this.$slots.placeholder&&this.options.length>0&&(s=0);return{refItems:[],internalOptions:n,internalIndex:s,internalValue:null!=(t=null==(e=n[s])?void 0:e.value)?t:null,pivots:[],pivotsMin:0,pivotsMax:0,scroll:null,scrollOffsetTop:0,scrollMin:0,scrollMax:0,transitioning:!1,transitionTimer:null,start:null,isMouseDown:!1,isDragging:!1}},beforeUpdate(){this.refItems=[]},mounted(){this.calculatePivots(),this.scroll=this.findScrollByIndex(this.internalIndex),this.internalValue!==this.modelValue&&this.$emit("update:modelValue",this.internalValue);const e=this.$el;e.addEventListener("touchstart",this.onStart),e.addEventListener("touchmove",this.onMove),e.addEventListener("touchend",this.onEnd),e.addEventListener("touchcancel",this.onCancel),e.addEventListener("mousewheel",this.onWheel),e.addEventListener("DOMMouseScroll",this.onWheel),e.addEventListener("wheel",this.onWheel),e.addEventListener("mousedown",this.onStart),e.addEventListener("mousemove",this.onMove),e.addEventListener("mouseup",this.onEnd),e.addEventListener("mouseleave",this.onCancel)},beforeUnmount(){const e=this.$el;e.removeEventListener("touchstart",this.onStart),e.removeEventListener("touchmove",this.onMove),e.removeEventListener("touchend",this.onEnd),e.removeEventListener("touchcancel",this.onCancel),e.removeEventListener("mousewheel",this.onWheel),e.removeEventListener("DOMMouseScroll",this.onWheel),e.removeEventListener("wheel",this.onWheel),e.removeEventListener("mousedown",this.onStart),e.removeEventListener("mousemove",this.onMove),e.removeEventListener("mouseup",this.onEnd),e.removeEventListener("mouseleave",this.onCancel)},watch:{modelValue(e){if(null==e&&this.hasPlaceholder)return void this.correction(-1);const t=this.internalOptions.findIndex((t=>t.value==e));-1!==t?this.internalIndex!==t&&this.correction(t):this.$emit("update:modelValue",this.internalValue)},options:{handler(e){var t,n;const s=this.internalOptions=i(e);let l=s.findIndex((e=>e.value==this.modelValue));-1===l&&!this.hasPlaceholder&&this.options.length>0&&(l=0);const o=null!=(n=null==(t=s[l])?void 0:t.value)?n:null;this.$nextTick((()=>{this.calculatePivots(),this.scroll=this.findScrollByIndex(l),this.internalIndex=l,this.internalValue!==o&&this.$emit("update:modelValue",this.internalValue=o)}))},deep:!0}},computed:{hasPlaceholder(){return!(!this.placeholder&&!this.$slots.placeholder)}},methods:{setRefItem(e){this.refItems.push(e)},calculatePivots(){const e=this.$refs.rotator,t=this.$refs.layerSelection,i=e.getBoundingClientRect().top,n=this.pivots=this.refItems.map((e=>function(e){const{top:t,bottom:i}=e.getBoundingClientRect();return(t+i)/2}(e)-i)).sort(((e,t)=>e-t)),s=this.pivotsMin=Math.min(...n),l=this.pivotsMax=Math.max(...n),o=this.scrollOffsetTop=t.offsetTop+t.offsetHeight/2;this.scrollMin=o-s,this.scrollMax=o-l},sanitizeInternalIndex(e){return Math.min(Math.max(e,this.hasPlaceholder?-1:0),this.internalOptions.length-1)},findIndexFromScroll(e){let t=null,i=0;return this.pivots.forEach(((n,s)=>{const l=n+e-this.scrollOffsetTop;(null===t||Math.abs(t)>Math.abs(l))&&(i=s,t=l)})),this.hasPlaceholder||0===this.options.length?i-1:i},findScrollByIndex(e){let t=e;return(this.hasPlaceholder||0===this.options.length)&&t++,e>-1&&t in this.pivots?this.scrollOffsetTop-this.pivots[t]:e>=this.pivots.length?this.scrollOffsetTop-this.pivotsMax:this.scrollOffsetTop-this.pivotsMin},onWheel(e){var t,i;if(this.scroll>=this.scrollMin&&e.deltaY<0)return;if(this.scroll<=this.scrollMax&&e.deltaY>0)return;if(1===this.pivots.length)return;e.preventDefault();const n=this.sanitizeInternalIndex(this.internalIndex+(e.deltaY>0?1:-1)),s=e.deltaY>0?this.findScrollByIndex(n-1)-this.findScrollByIndex(n):this.findScrollByIndex(n)-this.findScrollByIndex(n+1),l=Math.max(Math.min(e.deltaY,s),-1*s);this.scroll=Math.min(Math.max(this.scroll-l*this.scrollSensitivity,this.scrollMax),this.scrollMin);const o=this.sanitizeInternalIndex(this.findIndexFromScroll(this.scroll)),r=null!=(i=null==(t=this.internalOptions[o])?void 0:t.value)?i:null;this.internalIndex=o,this.internalValue!==r&&this.$emit("update:modelValue",this.internalValue=r),this.onAfterWheel((()=>{this.correction(this.findIndexFromScroll(this.scroll))}))},onAfterWheel:function(e,t=83){let i=null;return function(){i&&(clearTimeout(i),i=null);const n=this,s=arguments;i=setTimeout((()=>e.apply(n,s)),t)}}((e=>{e()}),200),onStart(e){e.cancelable&&e.preventDefault();const{clientY:t}=s(e);this.start=[this.scroll,t],n(e)||(this.isMouseDown=!0),this.isDragging=!1},onMove(e){if(e.cancelable&&e.preventDefault(),!this.start)return;const{clientY:t}=s(e),i=t-this.start[1];Math.abs(i)>1.5&&(this.isDragging=!0),this.scroll=this.start[0]+i*(n(e)?this.touchSensitivity:this.dragSensitivity)},onEnd(e){e.cancelable&&e.preventDefault(),this.isDragging?this.correction(this.findIndexFromScroll(this.scroll)):this.onClick(e),this.start=null,this.isDragging=!1,this.isMouseDown=!1},onCancel(e){e.cancelable&&e.preventDefault(),this.correction(this.findIndexFromScroll(this.scroll)),this.start=null,this.isMouseDown=!1,this.isDragging=!1},onClick(e){const t=this.$refs.layerTop,i=this.$refs.layerBottom,n=s(e),l=n.clientX,o=n.clientY,r=t.getBoundingClientRect(),h=i.getBoundingClientRect();r.left<=l&&l<=r.right&&r.top<=o&&o<=r.bottom?this.correction(this.internalIndex-1):h.left<=l&&l<=h.right&&h.top<=o&&o<=h.bottom&&this.correction(this.internalIndex+1)},correction(e){var t,i;const n=this.sanitizeInternalIndex(e),s=null!=(i=null==(t=this.internalOptions[n])?void 0:t.value)?i:null;this.scroll=this.findScrollByIndex(n),this.transitioning=!0,this.transitionTimer&&(clearTimeout(this.transitionTimer),this.transitionTimer=null),this.transitionTimer=setTimeout((()=>{this.transitioning=!1,this.transitionTimer=null,this.internalIndex=n,this.internalValue!==s&&this.$emit("update:modelValue",this.internalValue=s)}),100)}},render(){let e=[];return this.hasPlaceholder?e.push(t.h("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-placeholder",{"vue-scroll-picker-item-selected":-1===this.internalIndex}],ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"placeholder",{text:this.placeholder},(()=>[this.placeholder])))):0===this.internalOptions.length&&e.push(t.h("div",{class:["vue-scroll-picker-item","vue-scroll-picker-item-empty","vue-scroll-picker-item-selected"],ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"empty",{text:this.empty},(()=>[this.empty])))),e=e.concat(this.internalOptions.map(((e,i)=>t.h("div",{class:["vue-scroll-picker-item",{"vue-scroll-picker-item-selected":this.internalIndex===i}],key:e.value,ref:e=>e&&this.setRefItem(e)},t.renderSlot(this.$slots,"default",{option:e},(()=>[e.name])))))),t.h("div",{class:["vue-scroll-picker"]},[t.h("div",{ref:"rotator",class:["vue-scroll-picker-rotator",{"vue-scroll-picker-rotator-transition":this.transitioning}],style:"number"==typeof this.scroll?{top:`${this.scroll}px`}:{}},e),t.h("div",{class:["vue-scroll-picker-layer"]},[t.h("div",{class:["vue-scroll-picker-layer-top"],ref:"layerTop"}),t.h("div",{class:["vue-scroll-picker-layer-selection"],ref:"layerSelection"}),t.h("div",{class:["vue-scroll-picker-layer-bottom"],ref:"layerBottom"})])])}});function o(e){e.component("VueScrollPicker",l)}"undefined"!=typeof window&&window.Vue&&o(window.Vue);const r={install:o};e.VueScrollPicker=l,e.default=r,e.install=o,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
 //# sourceMappingURL=vue-scroll-picker.umd.js.map

package.json

 {
   "name": "vue-scroll-picker",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Scroll Picker Component for Vue.js.",
@@ -13,3 +13,3 @@ "author": "Changwan Jun",
     "prepack": "npm run build",
-    "dev:example": "webpack-dev-server --config example/webpack.config.js --content-base example/ --mode development",
+    "dev:example": "webpack-dev-server --config example/webpack.config.js --content-base example/ --mode development --host 0.0.0.0",
     "build": "npm run build:production && npm run build:example",
@@ -16,0 +16,0 @@ "build:production": "cross-env NODE_ENV=production webpack --config webpack.config.js",

src/picker/picker.js

@@ -94,2 +94,3 @@ import "./picker.scss"
       pivotMin: 0,
+      pivotMax: 0,
 
@@ -184,3 +185,3 @@ transitioning: false,
       this.pivotMin = Math.min(...this.pivots)
-      const pivotMax = Math.max(...this.pivots)
+      this.pivotMax = Math.max(...this.pivots)
 
@@ -190,3 +191,3 @@ this.scrollOffsetTop = this.$refs.selection.offsetTop + this.$refs.selection.offsetHeight / 2
       this.scrollMin = this.scrollOffsetTop - this.pivotMin
-      this.scrollMax = this.scrollOffsetTop - pivotMax
+      this.scrollMax = this.scrollOffsetTop - this.pivotMax
     },
@@ -219,2 +220,6 @@ sanitizeInternalIndex(index) {
       }
+      if (index >= this.pivots.length) {
+        return this.scrollOffsetTop - this.pivotMax
+      }
+
       return this.scrollOffsetTop - this.pivotMin
@@ -225,7 +230,15 @@ },
       if (this.top <= this.scrollMax && e.deltaY > 0) return
+      if (this.pivots.length === 1) return
 
       e.preventDefault()
 
-      this.top = Math.min(Math.max(this.top - e.deltaY * this.scrollSensitivity, this.scrollMax), this.scrollMin)
+      const nextDirInnerIndex = this.sanitizeInternalIndex(this.innerIndex + (e.deltaY > 0 ? 1 : -1))
+      const deltaMax = e.deltaY > 0
+        ? this.findScrollByIndex(nextDirInnerIndex - 1) - this.findScrollByIndex(nextDirInnerIndex)
+        : this.findScrollByIndex(nextDirInnerIndex) - this.findScrollByIndex(nextDirInnerIndex + 1)
 
+      const deltaY = Math.max(Math.min(e.deltaY, deltaMax), deltaMax * -1)
+
+      this.top = Math.min(Math.max(this.top - deltaY * this.scrollSensitivity, this.scrollMax), this.scrollMin)
+
       const nextInnerIndex = this.sanitizeInternalIndex(this.findIndexFromScroll(this.top))
@@ -232,0 +245,0 @@ const nextInnerValue = this.normalizedOptions[nextInnerIndex] && this.normalizedOptions[nextInnerIndex].value || null

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148730

3.09%

Lines of code

734

1.94%

Number of medium maintenance alerts

0

-100%

No dependency changes