vxe-pc-ui/lib/list/src/list.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{scrollYLoad:!1,bodyHeight:0,customHeight:0,customMaxHeight:0,parentHeight:0,topSpaceHeight:0,items:[]}}function createInternalData(){return{resizeObserver:void 0,fullData:[],lastScrollLeft:0,lastScrollTop:0,scrollYStore:{startIndex:0,endIndex:0,visibleSize:0,offsetSize:0,rowHeight:0}}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeList",props:{data:Array,height:[Number,String],maxHeight:[Number,String],loading:Boolean,className:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().list.size||(0,_ui.getConfig)().size},autoResize:{type:Boolean,default:()=>(0,_ui.getConfig)().list.autoResize},syncResize:[Boolean,String,Number],virtualYConfig:Object,scrollY:Object},emits:["scroll"],setup(u,e){let{slots:n,emit:a}=e;var t=_xeUtils.default.uniqueId();let o=_xeUtils.default.browse(),c=(0,_ui.useSize)(u).computeSize,d=(0,_vue.reactive)(createReactData()),s=createInternalData(),v=(0,_vue.ref)(),g=(0,_vue.ref)(),h=(0,_vue.ref)(),l={refElem:v},f={xID:t,props:u,context:e,reactData:d,internalData:s,getRefMaps:()=>l},_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().list.virtualYConfig||(0,_ui.getConfig)().list.scrollY,u.virtualYConfig||u.scrollY)),x=(0,_vue.computed)(()=>{var{height:e,maxHeight:t}=u,{customHeight:l,customMaxHeight:a}=d,r={};return e?r.height=l+"px":t&&(r.height="auto",r.maxHeight=a+"px"),r}),i=(e,t,l)=>{a(e,(0,_ui.createEvent)(l,{$list:f},t))},r=e=>{var t=d.parentHeight,e=u[e];let l=0;return l=e?"100%"===e||"auto"===e?t:(l=(0,_dom.isScale)(e)?Math.floor((_xeUtils.default.toInteger(e)||1)/100*t):_xeUtils.default.toNumber(e),Math.max(40,l)):l},m=()=>{var e=d.scrollYLoad,{scrollYStore:t,fullData:l}=s;d.bodyHeight=e?l.length*t.rowHeight:0,d.topSpaceHeight=e?Math.max(t.startIndex*t.rowHeight,0):0},p=()=>{var e=d.scrollYLoad,{fullData:t,scrollYStore:l}=s;return d.items=e?t.slice(l.startIndex,l.endIndex):t.slice(0),(0,_vue.nextTick)()},S=()=>{p(),m()},b=()=>(0,_vue.nextTick)().then(()=>{var e=d.scrollYLoad,t=s.scrollYStore,l=h.value,a=_.value;let r=0,i;(i=l?(i=a.sItem?l.querySelector(a.sItem):i)||l.children[0]:i)&&(r=i.offsetHeight),r=Math.max(12,r),t.rowHeight=r,(e?(l=g.value,e=Math.max(8,Math.ceil(l.clientHeight/r)),l=a.oSize?_xeUtils.default.toNumber(a.oSize):o.edge?10:0,t.offsetSize=l,t.visibleSize=e,t.endIndex=Math.max(t.startIndex+e+l,t.endIndex),S):m)()}),H=()=>{var e=g.value;return e&&(e.scrollTop=0),(0,_vue.nextTick)()},z=(e,t)=>{var l=g.value;return e&&!_xeUtils.default.isNumber(e)&&(t=e.top,e=e.left),_xeUtils.default.isNumber(e)&&(l.scrollLeft=e),_xeUtils.default.isNumber(t)&&(l.scrollTop=t),d.scrollYLoad?new Promise(e=>{setTimeout(()=>{(0,_vue.nextTick)(()=>{e()})},50)}):(0,_vue.nextTick)()},I=()=>{let{lastScrollLeft:e,lastScrollTop:t}=s;return H().then(()=>{if(e||t)return s.lastScrollLeft=0,s.lastScrollTop=0,z(e,t)})},T=()=>{var e=v.value;if(e){var t=e.parentElement;if(d.parentHeight=t?t.clientHeight:0,d.customHeight=r("height"),d.customMaxHeight=r("maxHeight"),e.clientWidth&&e.clientHeight)return b()}return(0,_vue.nextTick)()},Y=e=>{var t=s.scrollYStore,{startIndex:l,endIndex:a,visibleSize:r,offsetSize:i,rowHeight:o}=t,e=e.target.scrollTop,e=Math.floor(e/o),o=Math.max(0,e-1-i),i=e+r+i;!(e<=l||a-r-1<=e)||l===o&&a===i||(t.startIndex=o,t.endIndex=i,S())},D=e=>{var t=e.target,l=t.scrollTop,t=t.scrollLeft,a=t!==s.lastScrollLeft,r=l!==s.lastScrollTop;s.lastScrollTop=l,s.lastScrollLeft=t,d.scrollYLoad&&Y(e),i("scroll",{scrollLeft:t,scrollTop:l,isX:a,isY:r},e)},L=e=>{var t=s.scrollYStore,l=_.value,e=e||[];return Object.assign(t,{startIndex:0,endIndex:1,visibleSize:0}),s.fullData=e,d.scrollYLoad=!!l.enabled&&-1<l.gt&&(0===l.gt||l.gt<=e.length),p(),b().then(()=>{I()})};t={dispatchEvent:i,loadData:L,reloadData(e){return H(),L(e)},recalculate:T,scrollTo:z,refreshScroll:I,clearScroll:H};Object.assign(f,t);let M=(0,_vue.ref)(0);return(0,_vue.watch)(()=>u.data?u.data.length:-1,()=>{M.value++}),(0,_vue.watch)(()=>u.data,()=>{M.value++}),(0,_vue.watch)(M,()=>{L(u.data||[])}),(0,_vue.watch)(()=>u.height,()=>{T()}),(0,_vue.watch)(()=>u.maxHeight,()=>{T()}),(0,_vue.watch)(()=>u.syncResize,e=>{e&&(T(),(0,_vue.nextTick)(()=>setTimeout(()=>T())))}),(0,_vue.onActivated)(()=>{T().then(()=>I())}),(0,_vue.nextTick)(()=>{L(u.data||[])}),(0,_vue.onMounted)(()=>{var e,t;T(),u.autoResize&&(e=v.value,(t=_ui.globalResize.create(()=>T())).observe(e),e&&t.observe(e.parentElement),s.resizeObserver=t),_ui.globalEvents.on(f,"resize",T)}),(0,_vue.onBeforeUnmount)(()=>{var e=s.resizeObserver;e&&e.disconnect(),_ui.globalEvents.off(f,"resize"),_xeUtils.default.assign(d,createReactData()),_xeUtils.default.assign(s,createInternalData())}),f.renderVN=()=>{var{className:e,loading:t}=u,{bodyHeight:l,topSpaceHeight:a,items:r}=d,i=n.default,o=c.value,s=x.value;return(0,_vue.h)("div",{ref:v,class:["vxe-list",e?_xeUtils.default.isFunction(e)?e({$list:f}):e:"",{["size--"+o]:o,"is--loading":t}]},[(0,_vue.h)("div",{ref:g,class:"vxe-list--virtual-wrapper",style:s,onScroll:D},[(0,_vue.h)("div",{class:"vxe-list--y-space",style:{height:l?l+"px":""}}),(0,_vue.h)("div",{ref:h,class:"vxe-list--body",style:{marginTop:a?a+"px":""}},i?i({items:r,$list:f}):[])]),(0,_vue.h)(_loading.default,{class:"vxe-list--loading",modelValue:t})])},f},render(){return this.renderVN()}});