@aplus-frontend/ui/lib/src/scroll-view/index.vue.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../config-provider/index.js");require("../scroll-bar/index.js");const c=require("../utils/index.js"),l=require("../scroll-bar/utils/index.js"),ee=require("./hooks/use-scroll-wrapper.js"),W=require("lodash-unified"),B=require("@vueuse/core"),b=require("@aplus-frontend/utils"),te=require("./hooks/use-scroll-back.js"),re=require("./hooks/use-scroll-smooth.js"),ae=require("./utils/index.js"),ne=require("./style/index.js"),oe=require("../config-provider/hooks/use-namespace.js"),$=require("../scroll-bar/internal.vue.js"),le=e.defineComponent({name:"ScrollView",__name:"index",props:{width:{},heigth:{},showXBar:{type:Boolean,default:!0},showYBar:{type:Boolean,default:!0},autoPlay:{type:[Boolean,Object]},xBarProps:{default:()=>({})},yBarProps:{default:()=>({})},onWheel:{}},setup(D,{expose:C}){const n=D,M={direction:"vertical",rate:1,repeat:!0},{b:X,e:g,em:z}=oe.useNamespace("scroll-view"),Y=ne.default("scroll-view"),f=e.ref(),u=e.reactive({x:30,y:30});let m=!1;const{scrollOffset:a,maxScrollDistance:i,xBarRef:O,yBarRef:A,containerRef:s,scrollYBar:h,scrollXBar:d,updateMaxScrollDistance:L}=ee.default(),{width:T,height:j}=B.useElementSize(f),{width:I,height:F}=B.useElementSize(s),{start:P}=te.useScrollBack({scrollOffset:a,maxScrollDistance:i,onScroll:t=>{t==="horizontal"?d():h()},async onScrollEnd(){await b.wait(200),S()}}),{start:R}=re.useScrollSmooth({scrollOffset:a,maxScrollDistance:i,onScroll(t,r){V.value&&(p(),m=!0),t&&d(),r&&h()},async onScrollEnd(){m&&(await b.wait(200),S(),m=!1)}}),{resume:S,pause:p,isActive:V}=B.useRafFn(()=>{if(!n.autoPlay){p();return}const t=n.autoPlay===!0?{}:n.autoPlay,r={...M,...t};if(r.direction==="horizontal"){if(a.x===i.x){p(),r.repeat&&P("horizontal");return}a.x=l.ensureRangeValue(a.x+r.rate,0,i.x),d()}else{if(a.y===i.y){p(),r.repeat&&P("vertical");return}a.y=l.ensureRangeValue(a.y+r.rate,0,i.y),h()}},{immediate:!0}),y=e.computed(()=>n.showXBar&&u.x!==100),x=e.computed(()=>n.showYBar&&u.y!==100),H=e.computed(()=>({width:c.isDef(n.width)?W.isString(n.width)?n.width:Number.isNaN(n.width)?void 0:`${n.width}px`:void 0,height:c.isDef(n.heigth)?W.isString(n.heigth)?n.heigth:Number.isNaN(n.heigth)?void 0:`${n.heigth}px`:void 0,padding:`${n.xBarProps.trackWidth||10}px ${n.yBarProps.trackWidth||10}px`}));async function w(){V.value&&(p(),await b.wait(500),S())}async function U(t){if(e.unref(x))t.preventDefault(),t.stopPropagation();else return;a.y=l.ensureRangeValue(a.y+t.deltaY,0,i.y),h(),n.onWheel?.("vertical",a.y),w()}function G(t){if(e.unref(y))t.preventDefault(),t.stopPropagation();else return;a.x=l.ensureRangeValue(a.x+t.deltaX,0,i.x),d(),n.onWheel?.("horizontal",a.x),w()}function k(){if(n.showYBar){const{visibleSize:t,totalSize:r}=l.getScrollable(s.value,"vertical");u.y=l.ensureRangeValue(Math.min(t/(r||1)*100))}if(n.showXBar){const{visibleSize:t,totalSize:r}=l.getScrollable(s.value,"horizontal");u.x=l.ensureRangeValue(Math.min(t/(r||1)*100))}}function q(t,r){const o=e.unref(s),v=e.unref(f);if(!o||!v)return;const{visibleSize:N,totalSize:_}=l.getScrollable(o,r);if(_<=N)return;const E=(_-N)*t/100,Z=r==="vertical";if(w(),Z){a.y=E;return}a.x=E}e.watchEffect(()=>{e.unref(s.value)&&k()},{flush:"post"}),e.watch(()=>[T.value,j.value,I.value,F.value],()=>{k(),L()}),e.watchEffect(()=>{f.value&&(f.value.style.transform=`translate3d(-${a.x}px, -${a.y}px, 0px)`)});function J(t,r){c.isDef(t)&&y.value&&(a.x=l.ensureRangeValue(t,0,i.x),d()),c.isDef(r)&&x.value&&(a.y=l.ensureRangeValue(r,0,i.y),h())}function K({smooth:t,left:r,top:o}){t?R({x:r,y:o}):(c.isDef(r)&&(a.x=r),c.isDef(o)&&(a.y=o))}function Q(t,r="start"){const o=ae.getElementScrollOffset(s.value,t,r),v={};y.value&&(v.x=l.ensureRangeValue(a.x+o.x,0,i.x)),x.value&&(v.y=l.ensureRangeValue(a.y+o.y,0,i.y)),R(v)}return C({scrollTop:e.computed(()=>a.y),scrollLeft:e.computed(()=>a.x),scroll:J,scrollTo:K,scrollIntoView:Q}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:s,class:e.normalizeClass([e.unref(X)(),e.unref(Y)]),style:e.normalizeStyle(H.value),onWheel:[e.withModifiers(U,["exact"]),e.withModifiers(G,["shift"])]},[e.createElementVNode("div",{ref_key:"contentRef",ref:f,class:e.normalizeClass(e.unref(g)("content"))},[e.renderSlot(t.$slots,"default")],2),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","vertical")]),style:e.normalizeStyle(`height: calc(100% - ${y.value?t.xBarProps.trackWidth||10:0}px)`)},[x.value?(e.openBlock(),e.createBlock(e.unref($.default),e.mergeProps({key:0,ref_key:"yBarRef",ref:A},t.yBarProps,{"bar-length":u.y,onScroll:r[0]||(r[0]=o=>q(o,"vertical"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(g)("bar-wrapper"),e.unref(z)("bar-wrapper","horizontal")])},[y.value?(e.openBlock(),e.createBlock(e.unref($.default),e.mergeProps({key:0,ref_key:"xBarRef",ref:O},t.xBarProps,{direction:"horizontal","bar-length":u.x,onScroll:r[1]||(r[1]=o=>q(o,"horizontal"))}),null,16,["bar-length"])):e.createCommentVNode("",!0)],2)],38))}});exports.default=le;