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