vexip-ui/lib/components/native-scroll/native-scroll.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const l=require("vue");require("../scrollbar/index.cjs");require("../resize-observer/index.cjs");const i=require("@vexip-ui/config"),A=require("@vexip-ui/hooks"),T=require("@vexip-ui/utils"),We=require("./props.cjs"),Me=require("./hooks.cjs"),K=require("../resize-observer/resize-observer.cjs"),be=require("../scrollbar/scrollbar.vue2.cjs");function ge(y){return typeof y=="function"||Object.prototype.toString.call(y)==="[object Object]"&&!l.isVNode(y)}const De=Object.freeze(["horizontal","vertical","both"]),ye="mousemove",Ee="mouseup",$e=l.defineComponent({name:"NativeScroll",inheritAttrs:!1,props:We.nativeScrollProps,emits:[],setup(y,{attrs:Y,slots:f,expose:Ne}){const t=i.useProps("nativeScroll",y,{scrollClass:null,scrollStyle:null,scrollAttrs:null,mode:{default:"vertical",validator:e=>De.includes(e)},width:"",height:"",disabled:!1,pointer:!1,scrollX:{default:0,static:!0},scrollY:{default:0,static:!0},useXBar:!1,useYBar:!1,barFade:1500,barClass:null,autoplay:!1,playWaiting:500,appear:!1,barDuration:null,useBarTrack:!1,scrollTag:"div",observeDeep:!1,scrollOnly:!1}),_=T.createEventEmitter(),u=i.useNameHelper("native-scroll"),{isRtl:xe}=A.useRtl(),k=l.ref(!1),G=l.ref(!1),E=l.ref(),O=l.ref(),W=l.ref();let J=!1;const{contentEl:c,content:w,x:h,y:S,percentX:X,percentY:P,xScrollLimit:N,yScrollLimit:x,enableXScroll:v,enableYScroll:p,xBarLength:Q,yBarLength:Z,handleResize:M,setScrollX:D,setScrollY:$,computePercent:R,refresh:H,scrollTo:U,scrollBy:F,scrollToElement:ee,triggerUpdate:b}=Me.useScrollWrapper({mode:l.toRef(t,"mode"),disabled:l.toRef(t,"disabled"),appear:l.toRef(t,"appear"),scrollX:l.toRef(t,"scrollX"),scrollY:l.toRef(t,"scrollY"),onResize:e=>{i.emitEvent(t.onResize,e)},onAfterRefresh:()=>{B(),J||(J=!0,C())}}),j=l.shallowReadonly({getState:qe,refresh:H,scrollTo:U,scrollBy:F,scrollToElement:ee,ensureInView:he}),z=l.ref(!1),te=l.computed(()=>t.mode!=="both"&&(T.isTrue(t.autoplay)||+t.autoplay>1e3)&&(t.mode==="horizontal"&&v.value||t.mode==="vertical"&&p.value));l.watch([()=>t.autoplay,()=>t.playWaiting,c],()=>{L(),l.nextTick(C)});let le,re,oe;l.onBeforeUnmount(L);function C(){if(L(),!te.value||!c.value)return;const e=t.mode,r=e==="horizontal"?"offsetWidth":"offsetHeight",o=e==="horizontal"?N:x,a=e==="horizontal"?h:S,n=t.playWaiting<20?20:t.playWaiting,m=e==="horizontal"?D:$;let d=.5;typeof t.autoplay=="number"&&(d=c.value[r]/t.autoplay*16);const I=()=>{m(a.value+d),a.value>=o.value?(m(o.value),z.value=!1,R(),b(),B(),oe=setTimeout(()=>{U(0,0,500),re=setTimeout(()=>{z.value=!0,I()},500+n)},n)):(R(),b(),B(),z.value&&requestAnimationFrame(I))};le=setTimeout(()=>{z.value=!0,I()},n)}function L(){z.value=!1,clearTimeout(le),clearTimeout(re),clearTimeout(oe)}const ze=l.computed(()=>[u.b(),u.bm(t.mode),{[u.bm("inherit")]:t.inherit,[u.bm("scrolling")]:G.value,[u.bm("using-bar")]:k.value}]),ae=l.computed(()=>{const{width:e,height:r}=t;return{width:e?typeof e=="string"?Number.isNaN(Number(e))?e:`${Number(e)}px`:`${e}px`:void 0,height:r?typeof r=="string"?Number.isNaN(Number(r))?r:`${Number(r)}px`:`${r}px`:void 0}}),Be=l.computed(()=>{var e;return[(e=t.scrollAttrs)==null?void 0:e.class,t.scrollClass,u.be("wrapper")]}),ne=l.computed(()=>te.value?0:t.barFade),V=l.ref(!1);function Te(){V.value=!0,l.nextTick(H),requestAnimationFrame(()=>{V.value=!1})}let g;function Ye(){!T.isClient||!c.value||(g=new MutationObserver(Te),g.observe(c.value,{childList:!0}))}function we(){g==null||g.disconnect(),g=void 0}l.watch(c,()=>{we(),Ye()},{immediate:!0}),l.watch(v,e=>{i.emitEvent(t.onXEnabledChange,e)}),l.watch(p,e=>{i.emitEvent(t.onYEnabledChange,e)}),Ne({x:h,y:S,percentX:X,percentY:P,xScrollLimit:N,yScrollLimit:x,xBarLength:Q,yBarLength:Z,enableXScroll:v,enableYScroll:p,wrapper:E,content:c,xBar:O,yBar:W,refresh:H,scrollTo:U,scrollBy:F,scrollToElement:ee,ensureInView:he,getXScrollLimit:Ae,getYScrollLimit:_e,addScrollListener:ke,removeScrollListener:Oe});function s(){return{clientX:(xe.value?-1:1)*h.value,clientY:S.value,percentX:X.value,percentY:P.value}}function B(){var e,r;(e=O.value)==null||e.handleScroll(X.value),(r=W.value)==null||r.handleScroll(P.value)}function Xe(e){if(!t.pointer||e.button!==0||T.USE_TOUCH)return!1;Pe(e)}let ie=0,ce=0,ue=0,se=0;function Pe(e){if(!v.value&&!p.value)return!1;ve(),ie=h.value,ce=S.value,ue=e.clientX,se=e.clientY,document.addEventListener(ye,de),document.addEventListener(Ee,fe),i.emitEvent(t.onScrollStart,s())}function de(e){e.stopPropagation(),e.preventDefault(),G.value=!0,v.value&&D(ie-(e.clientX-ue)),p.value&&$(ce-(e.clientY-se)),R(),b(),B(),q(t.mode)}function fe(){document.removeEventListener(ye,de),document.removeEventListener(Ee,fe),i.emitEvent(t.onScrollEnd,s()),C()}function Re(e,r){const o=p.value&&r==="vertical",a=v.value&&r==="horizontal",n=e.deltaY>0?1:-1;if(i.emitEvent(t.onWheel,e,r),o||a){const m=o?x.value:N.value,d=o?S.value:h.value;if(n>0?d<m:d>0)return e.stopPropagation(),!1}}function Ce(e){var o;if(!c.value)return;e.stopPropagation();const r=((o=c.value)==null?void 0:o.scrollLeft)!==h.value?"horizontal":"vertical";S.value=c.value.scrollTop,h.value=c.value.scrollLeft,R(),b(),B(),q(r)}function ve(){L()}function pe(e){k.value=!0,ve(),i.emitEvent(t.onBarScrollStart,{...s(),type:e})}function me(e){k.value=!1,C(),i.emitEvent(t.onBarScrollEnd,{...s(),type:e})}function Le(e){X.value=e,D(e*N.value/100),b(),i.emitEvent(t.onBarScroll,{...s(),type:"horizontal"}),q("horizontal")}function Ve(e){P.value=e,$(e*x.value/100),b(),i.emitEvent(t.onBarScroll,{...s(),type:"vertical"}),q("vertical")}function q(e){i.emitEvent(t.onScroll,{...s(),type:e}),_.emit("scroll",{...s(),type:e})}function qe(){const{clientX:e,clientY:r,percentX:o,percentY:a}=s();return{scrollX:e,scrollY:r,percentX:o,percentY:a,enableXScroll:v.value,enableYScroll:p.value}}function Ae(){return[0,N.value]}function _e(){return[0,x.value]}function he(e,r,o=0){if(!E.value||(typeof e=="string"&&(e=E.value.querySelector(e)),!T.isElement(e)))return Promise.resolve();const a=E.value.getBoundingClientRect(),n=e.getBoundingClientRect();let m=0,d=0;return t.mode!=="vertical"&&(n.left<a.left+o?m=n.left-a.left-o:n.right>a.right-o&&(m=n.right-a.right+o)),t.mode!=="horizontal"&&(n.top<a.top+o?d=n.top-a.top-o:n.bottom>a.bottom-o&&(d=n.bottom-a.bottom+o)),F(m,d,r)}function ke(e){_.on("scroll",e)}function Oe(e){_.off("scroll",e)}function Se(){var o;const e=t.scrollTag||"div",r=t.observeDeep&&f.default?l.renderSlot(f,"default",j).children:[];return l.createVNode(e,l.mergeProps(t.scrollAttrs,t.scrollOnly?Y:{},{ref:c,class:Be.value,style:[(o=t.scrollAttrs)==null?void 0:o.style,t.scrollStyle,t.scrollOnly&&ae.value],onMousedown:Xe,onWheelPassive:a=>Re(a,a.shiftKey?"horizontal":"vertical"),onScroll:Ce}),{default:()=>[f.extra&&l.createVNode("div",{class:u.be("extra"),style:{width:V.value?void 0:`${w.scrollWidth}px`,height:V.value?void 0:`${w.scrollHeight}px`}},[l.createVNode("div",{class:u.be("extra-inner"),style:{width:`${w.offsetWidth}px`,height:`${w.offsetHeight}px`}},[l.renderSlot(f,"extra",j)])]),f.default&&(t.observeDeep?A.flatVNodes(r).map((a,n)=>l.createVNode(K,{key:a.key??n,"on-resize":M},{default:()=>a})):l.renderSlot(f,"default",j))]})}return()=>{var r,o;let e;if(t.scrollOnly){let a;return l.createVNode(K,{"on-resize":M},ge(a=Se())?a:{default:()=>[a]})}return l.createVNode("div",l.mergeProps(Y,{ref:E,class:[ze.value,Y.class],style:[ae.value,Y.style]}),[(r=A.createSlotRender(f,["prefix-trap","prefixTrap"]))==null?void 0:r(),l.createVNode(K,{"on-resize":M},ge(e=Se())?e:{default:()=>[e]}),t.useXBar&&l.createVNode(be,{ref:O,inherit:!0,placement:"bottom",class:[u.bem("bar","horizontal"),t.barClass],fade:ne.value,"bar-length":Q.value,disabled:!v.value,appear:t.appear,duration:t.barDuration,"use-track":t.useBarTrack,onScrollStart:()=>pe("horizontal"),onScroll:Le,onScrollEnd:()=>me("horizontal")},null),t.useYBar&&l.createVNode(be,{ref:W,inherit:!0,placement:"right",class:[u.bem("bar","vertical"),t.barClass],fade:ne.value,"bar-length":Z.value,disabled:!p.value,appear:t.appear,duration:t.barDuration,"use-track":t.useBarTrack,onScrollStart:()=>pe("vertical"),onScroll:Ve,onScrollEnd:()=>me("vertical")},null),(o=A.createSlotRender(f,["suffix-trap","suffixTrap"]))==null?void 0:o()])}}});module.exports=$e;
//# sourceMappingURL=native-scroll.cjs.map