vue-scroll-picker - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

lib/components/picker.d.ts

@@ -39,2 +39,3 @@ /// <reference types="node" />
 }, unknown, {
+    resizeObserver: ResizeObserver | null;
     refItems: HTMLDivElement[];
@@ -41,0 +42,0 @@ internalOptions: ScrollPickerOption[];

lib/vue-scroll-picker.umd.js

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

package.json

 {
   "name": "vue-scroll-picker",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.",
@@ -28,3 +28,3 @@ "author": "Changwan Jun",
     "@commitlint/config-conventional": "13.2.0",
-    "@types/node": "18.19.31",
+    "@types/node": "18.19.34",
     "@types/simple-icons": "5.21.1",
@@ -34,3 +34,3 @@ "@typescript-eslint/eslint-plugin": "5.62.0",
     "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/compiler-sfc": "3.4.21",
+    "@vue/compiler-sfc": "3.4.29",
     "@vue/eslint-config-typescript": "11.0.3",
@@ -40,3 +40,3 @@ "eslint": "8.57.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.24.1",
+    "eslint-plugin-vue": "9.26.0",
     "gh-pages": "3.2.3",
@@ -48,4 +48,4 @@ "husky": "7.0.4",
     "vite": "^4.5.2",
-    "vue": "3.4.21"
+    "vue": "3.4.29"
   }
 }

src/components/picker.ts

@@ -110,2 +110,3 @@ import { defineComponent, PropType, h, renderSlot, VNode } from 'vue'
     return {
+      resizeObserver: null as ResizeObserver | null,
       refItems: [] as HTMLDivElement[],
@@ -208,2 +209,7 @@
     document.addEventListener('mouseout', this.onDocumentMouseOut)
+
+    if (typeof window.ResizeObserver !== 'undefined') {
+      const resizeObserver = this.resizeObserver = new window.ResizeObserver(() => this.resize())
+      resizeObserver.observe($el)
+    }
   },
@@ -229,2 +235,4 @@ beforeUnmount() {
     document.removeEventListener('mouseout', this.onDocumentMouseOut)
+
+    this.resizeObserver?.disconnect()
   },
@@ -231,0 +239,0 @@ methods: {

No alert changes

Improved metrics

Total package byte prevSize

116958

1.39%

Lines of code

1071

0.94%

No dependency changes