import{defineComponent as b,createVNode as c,reactive as d}from"vue";import u from"../_util/classNames.mjs";import p from"../_util/createRef.mjs";import l from"../_util/raf.mjs";import s from"../_util/supportsPassive.mjs";const M=20;function g(e){return"touches"in e?e.touches[0].pageY:e.pageY}const H=b({compatConfig:{MODE:3},name:"ScrollBar",inheritAttrs:!1,props:{prefixCls:String,scrollTop:Number,scrollHeight:Number,height:Number,count:Number,onScroll:{type:Function},onStartMove:{type:Function},onStopMove:{type:Function}},setup(){return{moveRaf:null,scrollbarRef:p(),thumbRef:p(),visibleTimeout:null,state:d({dragging:!1,pageY:null,startTop:null,visible:!1})}},watch:{scrollTop:{handler(){this.delayHidden()},flush:"post"}},mounted(){this.scrollbarRef.current?.addEventListener("touchstart",this.onScrollbarTouchStart,s?{passive:!1}:!1),this.thumbRef.current?.addEventListener("touchstart",this.onMouseDown,s?{passive:!1}:!1)},beforeUnmount(){this.removeEvents(),clearTimeout(this.visibleTimeout)},methods:{delayHidden(){clearTimeout(this.visibleTimeout),this.state.visible=!0,this.visibleTimeout=setTimeout(()=>{this.state.visible=!1},2e3)},onScrollbarTouchStart(e){e.preventDefault()},onContainerMouseDown(e){e.stopPropagation(),e.preventDefault()},patchEvents(){window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp),this.thumbRef.current.addEventListener("touchmove",this.onMouseMove,s?{passive:!1}:!1),this.thumbRef.current.addEventListener("touchend",this.onMouseUp)},removeEvents(){window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),this.scrollbarRef.current.removeEventListener("touchstart",this.onScrollbarTouchStart,s?{passive:!1}:!1),this.thumbRef.current&&(this.thumbRef.current.removeEventListener("touchstart",this.onMouseDown,s?{passive:!1}:!1),this.thumbRef.current.removeEventListener("touchmove",this.onMouseMove,s?{passive:!1}:!1),this.thumbRef.current.removeEventListener("touchend",this.onMouseUp)),l.cancel(this.moveRaf)},onMouseDown(e){const{onStartMove:t}=this.$props;Object.assign(this.state,{dragging:!0,pageY:g(e),startTop:this.getTop()}),t(),this.patchEvents(),e.stopPropagation(),e.preventDefault()},onMouseMove(e){const{dragging:t,pageY:o,startTop:n}=this.state,{onScroll:r}=this.$props;if(l.cancel(this.moveRaf),t){const i=g(e)-o,a=n+i,m=this.getEnableScrollRange(),h=this.getEnableHeightRange(),v=h?a/h:0,f=Math.ceil(v*m);this.moveRaf=l(()=>{r(f)})}},onMouseUp(){const{onStopMove:e}=this.$props;this.state.dragging=!1,e(),this.removeEvents()},getSpinHeight(){const{height:e,scrollHeight:t}=this.$props;let o=e/t*100;return o=Math.max(o,M),o=Math.min(o,e/2),Math.floor(o)},getEnableScrollRange(){const{scrollHeight:e,height:t}=this.$props;return e-t||0},getEnableHeightRange(){const{height:e}=this.$props,t=this.getSpinHeight();return e-t||0},getTop(){const{scrollTop:e}=this.$props,t=this.getEnableScrollRange(),o=this.getEnableHeightRange();return e===0||t===0?0:e/t*o},showScroll(){const{height:e,scrollHeight:t}=this.$props;return t>e}},render(){const{dragging:e,visible:t}=this.state,{prefixCls:o}=this.$props,n=`${this.getSpinHeight()}px`,r=`${this.getTop()}px`,i=this.showScroll(),a=i&&t;return c("div",{ref:this.scrollbarRef,class:u(`${o}-scrollbar`,{[`${o}-scrollbar-show`]:i}),style:{width:"8px",top:0,bottom:0,right:0,position:"absolute",display:a?void 0:"none"},onMousedown:this.onContainerMouseDown,onMousemove:this.delayHidden},[c("div",{ref:this.thumbRef,class:u(`${o}-scrollbar-thumb`,{[`${o}-scrollbar-thumb-moving`]:e}),style:{width:"100%",height:n,top:r,left:0,position:"absolute",background:"rgba(0, 0, 0, 0.5)",borderRadius:"99px",cursor:"pointer",userSelect:"none"},onMousedown:this.onMouseDown},null)])}});export{H as default};
