t-fighting-design/lib/waterfall/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("./index4.js"),z=["src"],B=e.defineComponent({name:"Waterfall"}),G=e.defineComponent({...B,props:k.Props,emits:k.Emits,setup(S,{emit:E}){const a=S;let h=a.cols;const u=e.ref(),f=e.reactive([]),y=e.ref("auto"),M=()=>Math.random().toString(16).substring(2),W=e.ref(0),_=e.ref("0px");e.watch(()=>a.list.length,t=>{t&&setTimeout(()=>{p()},0)});const C=async t=>Promise.all(t.map(l=>new Promise(o=>{let r=new Image;r.src=(l==null?void 0:l.src)||"",r.onload=()=>{o()},r.onerror=()=>{o()}}))),p=(t=!0)=>{let l=u.value.clientWidth;l=l-(Math.floor(l/a.minWidth)-1)*parseInt(a.colGap),a.minWidth&&(h=Math.floor(l/a.minWidth)),h!==Math.floor(u.value.clientWidth/a.minWidth)&&(l=u.value.clientWidth-(Number(h)-1)*parseInt(a.colGap)),W.value=h;const o=l/Number(h)+"px";_.value=o,l=u.value.clientWidth,f.length=0,f.push(...a.list.map(r=>({src:r.src,_uuid:M(),_order:0,_width:o,_minWidth:a.minWidth+"px",...r}))),e.nextTick(async()=>{t&&await C(f);const r=u.value.querySelectorAll(".f-waterfall-box");let v=Object.values(r).map((n,i)=>({height:n.clientHeight,index:i}));const m=Array(h).fill(0).map(()=>[]);v=v.sort((n,i)=>i.height-n.height),v.forEach(n=>{m.reduce((c,s)=>c.reduce((w,d)=>w+((d==null?void 0:d.height)||0),0)<s.reduce((w,d)=>w+((d==null?void 0:d.height)||0),0)?c:s,m[0]).push({...n})});const x=m.reduce((n,i)=>n.reduce((c,s)=>c+((s==null?void 0:s.height)||0),0)>i.reduce((c,s)=>c+((s==null?void 0:s.height)||0),0)?n:i,m[0]);y.value=x.reduce((n,i)=>n+Number(i.height),0)+"px",m.flat(1).reverse().forEach((n,i)=>{const c=f[(n==null?void 0:n.index)||0];c._order=i})})};let g=null;const b=()=>{g&&clearTimeout(g),g=setTimeout(()=>{p(!1)},10)};e.onMounted(async()=>{window.onresize=b,p()}),e.onUnmounted(()=>{window.removeEventListener("resize",b)});const T=t=>{const l=t.target.clientHeight,o=Math.ceil(t.target.scrollTop),r=t.target.scrollHeight;l+o===r&&E("scroll-end")};return(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"waterfall",ref:u,class:e.normalizeClass(["f-waterfall",[`f-waterfall__${t.type}`]]),style:e.normalizeStyle({"--colCount":W.value,"--colWidth":_.value,height:t.type==="flex"?y.value:"100%","--rowGap":t.rowGap,"row-gap":t.rowGap,"column-gap":t.colGap}),onScroll:T},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),(o,r)=>(e.openBlock(),e.createElementBlock("div",{key:`waterfall_${r}`,class:"f-waterfall-box",style:e.normalizeStyle({order:t.type==="flex"&&o._order,minWidth:t.type==="flex"&&o._minWidth,width:t.type==="flex"&&o._width})},[e.renderSlot(t.$slots,"default",{row:o},()=>[e.createElementVNode("img",{src:o.src},null,8,z)])],4))),128))],38))}});exports.default=G;