vue-amazing-ui/lib/waterfall/Waterfall.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("../spin/index.cjs"),W=require("../utils/index.cjs"),P=["href","target"],_=["src","alt","onLoad"],B=e.defineComponent({__name:"Waterfall",props:{images:{default:()=>[]},columnCount:{default:3},columnGap:{default:20},width:{default:"100%"},borderRadius:{default:8},backgroundColor:{default:"#F2F4F8"},spinProps:{default:()=>({})}},setup(h){const t=h,i=e.ref(),c=e.ref(),g=e.ref(Array(t.images.length).fill(!1)),f=e.ref(),m=e.ref([]),r=e.ref(Array(t.columnCount).fill(0)),s=e.ref(0),p=e.computed(()=>typeof t.width=="number"?`${t.width}px`:t.width),v=e.computed(()=>Math.max(...r.value)+t.columnGap),w=e.computed(()=>t.images.length);e.watch(()=>[t.images,t.columnCount,t.columnGap,t.width],()=>{c.value=i.value.offsetWidth,r.value=Array(t.columnCount).fill(0),s.value++,d(s.value)},{deep:!0,flush:"post"}),e.onMounted(()=>{c.value=i.value.offsetWidth,d(s.value)});function k(){const l=i.value.offsetWidth;t.images.length&&l!==c.value&&(c.value=l,s.value++,d(s.value))}W.useResizeObserver(i,k);async function d(l){f.value=(c.value-(t.columnCount+1)*t.columnGap)/t.columnCount,m.value=[];for(let n=0;n<w.value;n++)if(l===s.value)await C(t.images[n].src,n);else return!1}function C(l,n){return new Promise(o=>{const a=new Image;a.src=l,a.onload=function(){const u=a.height/(a.width/f.value);m.value[n]={width:f.value,height:u,...b(n,u)},o("load")}})}function b(l,n){if(l<t.columnCount)return r.value[l]=t.columnGap+n,{top:t.columnGap,left:(f.value+t.columnGap)*l+t.columnGap};{const o=Math.min(...r.value);let a=0;for(let u=0;u<t.columnCount;u++)if(r.value[u]===o){a=u;break}return r.value[a]=o+t.columnGap+n,{top:o+t.columnGap,left:(f.value+t.columnGap)*a+t.columnGap}}}function G(l){g.value[l]=!0}function $(l){if(l){if(l.name)return l.name;{const n=l.src.split("?")[0].split("/");return n[n.length-1]}}}return(l,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"waterfallRef",ref:i,class:"m-waterfall",style:e.normalizeStyle(`--border-radius: ${l.borderRadius}px; background-color: ${l.backgroundColor}; width: ${p.value}; height: ${v.value}px;`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,(o,a)=>(e.openBlock(),e.createBlock(e.unref(y.default),e.mergeProps({class:"waterfall-image",style:`width: ${o.width}px; height: ${o.height}px; top: ${o&&o.top}px; left: ${o&&o.left}px;`,spinning:!g.value[a],size:"small",indicator:"dynamic-circle",ref_for:!0},l.spinProps,{key:a}),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":l.images[a].link}]),href:l.images[a].link,target:l.images[a].target?l.images[a].target:"_blank"},[e.createElementVNode("img",{class:"image-item",src:l.images[a].src,alt:$(l.images[a]),onLoad:u=>G(a)},null,40,_)],10,P)]),_:2},1040,["style","spinning"]))),128))],4))}});exports.default=B;