vue-scroll-picker - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

lib/components/picker.d.ts

 import { PropType } from 'vue';
-declare type MouseWheelEvent = MouseEvent & {
+type MouseWheelEvent = MouseEvent & {
     deltaY: number;
@@ -9,3 +9,3 @@ };
 }
-export declare type ScrollPickerOptionable = string | number | boolean | ScrollPickerOption;
+export type ScrollPickerOptionable = string | number | boolean | ScrollPickerOption;
 declare const _default: import("vue").DefineComponent<{
@@ -52,3 +52,2 @@ modelValue: null;
     start: [scroll: number, clientY: number] | null;
-    isMouseDown: boolean;
     isDragging: boolean;
@@ -106,3 +105,3 @@ }, {
     placeholder: string;
-}>;
+}, {}>;
 export default _default;

lib/vue-scroll-picker.umd.js

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

package.json

 {
   "name": "vue-scroll-picker",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.",
@@ -26,23 +26,23 @@ "author": "Changwan Jun",
   "devDependencies": {
-    "@commitlint/cli": "13.2.1",
+    "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "13.2.0",
-    "@types/node": "14.18.32",
+    "@types/node": "18.19.14",
     "@types/simple-icons": "5.21.1",
-    "@typescript-eslint/eslint-plugin": "5.40.0",
-    "@typescript-eslint/parser": "5.40.0",
-    "@vitejs/plugin-vue": "3.1.2",
-    "@vue/compiler-sfc": "3.2.41",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "eslint": "8.25.0",
-    "eslint-config-prettier": "8.5.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@vitejs/plugin-vue": "3.2.0",
+    "@vue/compiler-sfc": "3.4.15",
+    "@vue/eslint-config-typescript": "11.0.3",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.6.0",
+    "eslint-plugin-vue": "9.21.1",
     "gh-pages": "3.2.3",
     "husky": "7.0.4",
-    "prettier": "2.7.1",
-    "simple-icons": "7.16.0",
-    "typescript": "4.8.4",
-    "vite": "3.1.8",
-    "vue": "3.2.41"
+    "prettier": "2.8.8",
+    "simple-icons": "7.21.0",
+    "typescript": "4.9.5",
+    "vite": "3.2.8",
+    "vue": "3.4.15"
   }
 }

README.md

 # Vue Scroll Picker
 
 <p>
-  <a href="https://github.com/wan2land/vue-scroll-picker/actions?query=workflow%3A%22Node.js+CI%22"><img alt="Build" src="https://img.shields.io/github/workflow/status/wan2land/vue-scroll-picker/Node.js%20CI?logo=github&style=flat-square" /></a>
-  <a href="https://npmcharts.com/compare/vue-scroll-picker?minimal=true"><img alt="Downloads" src="https://img.shields.io/npm/dt/vue-scroll-picker.svg?style=flat-square" /></a>
+  <a href="https://github.com/wan2land/vue-scroll-picker/actions/workflows/ci.yml"><img alt="Build" src="https://img.shields.io/github/actions/workflow/status/wan2land/vue-scroll-picker/ci.yml?branch=main&logo=github&style=flat-square" /></a>
+  <a href="https://npmcharts.com/compare/vue-scroll-picker?minimal=true"><img alt="Downloads" src="https://img.shields.io/npm/dm/vue-scroll-picker.svg?style=flat-square" /></a>
   <a href="https://www.npmjs.com/package/vue-scroll-picker"><img alt="Version" src="https://img.shields.io/npm/v/vue-scroll-picker.svg?style=flat-square" /></a>
@@ -12,7 +12,9 @@ <a href="https://www.npmjs.com/package/vue-scroll-picker"><img alt="License" src="https://img.shields.io/npm/l/vue-scroll-picker.svg?style=flat-square" /></a>
 
-iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
+iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also
+MouseWheel) and Touch.
 
-If you are using vue 2, please refer to the [v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
+If you are using vue 2, please refer to the
+[v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
 
- [See Example](http://vue-scroll-picker.dist.be) ([sources](./example))
+[See Example](http://vue-scroll-picker.dist.be) ([sources](./example))
 
@@ -32,12 +34,10 @@ ## Installation
 ```js
-import { createApp } from 'vue'
-import VueScrollPicker from 'vue-scroll-picker'
+import { createApp } from "vue";
+import VueScrollPicker from "vue-scroll-picker";
 
-import 'vue-scroll-picker/lib/style.css'
+import "vue-scroll-picker/lib/style.css";
 
+const app = createApp(); /* */
 
-const app = createApp(/* */)
-
-app.use(VueScrollPicker) // export default is plugin
-
+app.use(VueScrollPicker); // export default is plugin
 ```
@@ -69,24 +69,24 @@
 
-| Name              | Type      | Default  | Example  |
-| ----------------- |:--------- | -------- | -------- |
-| modelValue        | `any`     | `null`   |          |
-| placeholder       | `string`  | `null`   |          |
-| empty             | `string`  | `'No Items'`  |     |
-| options           | `string[]`<br />`{ name: string, value: any }[]` | `[]`  | `["10KG", "20KG", "30KG"]`<br />`[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]` |
-| dragSensitivity   | `number`  | `1.7`    |          |
-| touchSensitivity  | `number`  | `1.7`    |          |
-| scrollSensitivity | `number`  | `1`      |          |
+| Name              | Type                                              | Default      | Example                                                                                   |
+| ----------------- | :------------------------------------------------ | ------------ | ----------------------------------------------------------------------------------------- |
+| modelValue        | `any`                                             | `null`       |                                                                                           |
+| placeholder       | `string`                                          | `null`       |                                                                                           |
+| empty             | `string`                                          | `'No Items'` |                                                                                           |
+| options           | `string[]`<br /> `{ name: string, value: any }[]` | `[]`         | `["10KG", "20KG", "30KG"]`<br /> `[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]` |
+| dragSensitivity   | `number`                                          | `1.7`        |                                                                                           |
+| touchSensitivity  | `number`                                          | `1.7`        |                                                                                           |
+| scrollSensitivity | `number`                                          | `1`          |                                                                                           |
 
 ### Events
 
-| Name             | Type      |
-| ----------------- |:--------- |
-| update:modelValue | `any`     |
+| Name              | Type  |
+| ----------------- | :---- |
+| update:modelValue | `any` |
 
 ### Slots
 
-| Name            | Prop      | Default  |
-| --------------- |:--------- | -------- |
-| default         | `{ option: { name: string, value: any } }` | `{{ option.name }}`  |
-| placeholder     | `{ text: string }`  | `{{ placeholder }}` |
-| empty           | `{ text: string }`  | `No Items`          |
+| Name        | Prop                                       | Default             |
+| ----------- | :----------------------------------------- | ------------------- |
+| default     | `{ option: { name: string, value: any } }` | `{{ option.name }}` |
+| placeholder | `{ text: string }`                         | `{{ placeholder }}` |
+| empty       | `{ text: string }`                         | `No Items`          |

src/components/picker.ts

@@ -115,3 +115,2 @@ import { defineComponent, PropType, h, renderSlot, VNode } from 'vue'
 
-      isMouseDown: false,
       isDragging: false,
@@ -185,6 +184,6 @@ }
       // https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event
-      $el.addEventListener('mousewheel', this.onWheel as any)
+      ($el as HTMLDivElement).addEventListener('mousewheel', this.onWheel as any)
     } else if ('onDOMMouseScroll' in $el) {
       // https://developer.mozilla.org/en-US/docs/Web/API/Element/DOMMouseScroll_event
-      $el.addEventListener('DOMMouseScroll', this.onWheel as any)
+      ($el as HTMLDivElement).addEventListener('DOMMouseScroll', this.onWheel as any)
     }
@@ -207,5 +206,5 @@ $el.addEventListener('mousedown', this.onStart)
     } else if ('onmousewheel' in $el) {
-      $el.removeEventListener('mousewheel', this.onWheel as any)
+      ($el as HTMLDivElement).removeEventListener('mousewheel', this.onWheel as any)
     } else if ('onDOMMouseScroll' in $el) {
-      $el.removeEventListener('DOMMouseScroll', this.onWheel as any)
+      ($el as HTMLDivElement).removeEventListener('DOMMouseScroll', this.onWheel as any)
     }
@@ -311,14 +310,11 @@ $el.removeEventListener('mousedown', this.onStart)
       this.start = [this.scroll!, clientY]
-      if (!isTouchEvent(event)) {
-        this.isMouseDown = true
-      }
       this.isDragging = false
     },
     onMove(event: TouchEvent | MouseEvent) {
+      if (!this.start) {
+        return
+      }
       if (event.cancelable) {
         event.preventDefault()
       }
-      if (!this.start) {
-        return
-      }
       const { clientY } = getEventXY(event)
@@ -332,2 +328,5 @@ const diff = clientY - this.start[1]
     onEnd(event: TouchEvent | MouseEvent) {
+      if (!this.start) {
+        return
+      }
       if (event.cancelable) {
@@ -338,3 +337,3 @@ event.preventDefault()
         this.correction(this.findIndexFromScroll(this.scroll!))
-      } else if (this.isMouseDown) {
+      } else {
         this.onClick(event)
@@ -344,3 +343,2 @@ }
       this.isDragging = false
-      this.isMouseDown = false
     },
@@ -358,3 +356,2 @@ onDocumentMouseOut(event: MouseEvent) {
       this.start = null
-      this.isMouseDown = false
       this.isDragging = false
@@ -365,5 +362,3 @@ },
       const $layerBottom = this.$refs.layerBottom as HTMLDivElement
-      const touchInfo = getEventXY(event)
-      const x = touchInfo.clientX
-      const y = touchInfo.clientY
+      const { clientX: x, clientY: y } = getEventXY(event)
       const topRect = $layerTop.getBoundingClientRect()
@@ -370,0 +365,0 @@ const bottomRect = $layerBottom.getBoundingClientRect()

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97686

0.38%

Number of low quality alerts

2

-33.33%

Worsened metrics

Lines of code

921

-0.65%

No dependency changes