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"),I=require("../spin/index.cjs"),S=require("../utils/index.cjs"),B=["href","target"],x=["src","alt","onLoad"],E=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(u){const a=u,s=e.ref(),g=e.ref(0),w=e.ref([]),c=e.ref([]),h=e.ref([]),i=e.ref([]),v=e.ref(0),k=e.computed(()=>typeof a.width=="number"?`${a.width}px`:a.width),C=e.computed(()=>Math.max(...i.value)+a.columnGap),m=e.computed(()=>(g.value-(a.columnCount+1)*a.columnGap)/a.columnCount),$=e.computed(()=>a.images.length);e.watch(()=>a.images,(t,l)=>{(t.length!==t.length||t.some((o,n)=>o.src!==l[n]?.src))&&(c.value=[],d())},{deep:!0,flush:"post"}),e.watch(()=>[a.columnCount,a.columnGap,a.width],()=>{d()},{deep:!0,flush:"post"}),e.onMounted(()=>{d()}),S.useResizeObserver(s,()=>{const t=s.value.offsetWidth;a.images.length&&t!==g.value&&d()});function d(){s.value&&(g.value=s.value.offsetWidth,i.value=Array(a.columnCount).fill(0),h.value.splice(0),v.value++,b(v.value))}async function b(t){for(let l=0;l<$.value;l++)if(t===v.value)c.value[l]?p(l):await G(a.images[l].src,l);else return!1}function G(t,l){if(c.value[l])p(l);else return new Promise((n,r)=>{const f=new Image;f.src=t,f.onload=function(){c.value[l]={width:f.naturalWidth,height:f.naturalHeight},p(l),n("loaded")},f.onerror=function(P){r(new Error(`Failed to load image at ${t}, err: ${P}`))}})}function p(t){const l=c.value[t],o=l.height/(l.width/m.value);h.value[t]={width:m.value,height:o,...W(t,o)}}function W(t,l){if(t<a.columnCount)return i.value[t]=a.columnGap+l,{top:a.columnGap,left:(m.value+a.columnGap)*t+a.columnGap};{const o=Math.min(...i.value);let n=0;for(let r=0;r<a.columnCount;r++)if(i.value[r]===o){n=r;break}return i.value[n]=o+a.columnGap+l,{top:o+a.columnGap,left:(m.value+a.columnGap)*n+a.columnGap}}}function y(t){w.value[t]=!0}function z(t){if(t){if(t.name)return t.name;{const l=t.src.split("?")[0].split("/");return l[l.length-1]}}return""}return(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"waterfallRef",ref:s,class:"waterfall-wrap",style:e.normalizeStyle(`
      --waterfall-border-radius: ${u.borderRadius}px;
      --waterfall-bg-color: ${u.backgroundColor};
      --waterfall-width: ${k.value};
      --waterfall-height: ${C.value}px;
    `)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(o,n)=>(e.openBlock(),e.createBlock(e.unref(I.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:!w.value[n],size:"small",indicator:"dynamic-circle"},{ref_for:!0},u.spinProps,{key:n}),{default:e.withCtx(()=>[e.createElementVNode("a",{class:e.normalizeClass(["image-link",{"link-cursor":u.images[n].link}]),href:u.images[n].link,target:u.images[n].target?u.images[n].target:"_blank"},[e.createElementVNode("img",{class:"image-item",src:u.images[n].src,alt:z(u.images[n]),onLoad:r=>y(n)},null,40,x)],10,B)]),_:2},1040,["style","spinning"]))),128))],4))}});exports.default=E;