!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"}));
|
