@robot-admin/naive-ui-components 0.13.2 → 0.13.6

package/dist/C_WaterFall.css

@@ -1,17 +1,17 @@
-/* unplugin-vue-components disabled */.c-waterfall[data-v-f5a6939b] {
+/* unplugin-vue-components disabled */.c-waterfall[data-v-8bf18c79] {
   width: 100%;
 }
-.waterfall__body[data-v-f5a6939b] {
+.waterfall__body[data-v-8bf18c79] {
   overflow: hidden;
 }
-.waterfall__item[data-v-f5a6939b] {
+.waterfall__item[data-v-8bf18c79] {
   cursor: pointer;
 }
-.waterfall__item[data-v-f5a6939b]:focus-visible {
+.waterfall__item[data-v-8bf18c79]:focus-visible {
   outline: 2px solid var(--primary-color, #2080f0);
   outline-offset: 2px;
 }
-.waterfall__card[data-v-f5a6939b] {
+.waterfall__card[data-v-8bf18c79] {
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--border-color);
@@ -19,36 +19,36 @@
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
-.waterfall__card[data-v-f5a6939b]:hover {
+.waterfall__card[data-v-8bf18c79]:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
 }
-.waterfall__image[data-v-f5a6939b] {
+.waterfall__image[data-v-8bf18c79] {
   display: block;
   width: 100%;
   object-fit: cover;
   background: var(--body-color);
 }
-.waterfall__title[data-v-f5a6939b] {
+.waterfall__title[data-v-8bf18c79] {
   padding: 10px 12px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-color-1);
   word-break: break-all;
 }
-.waterfall__skeleton[data-v-f5a6939b] {
+.waterfall__skeleton[data-v-8bf18c79] {
   overflow: hidden;
   border-radius: 8px;
 }
-.waterfall__skeleton-inner[data-v-f5a6939b] {
+.waterfall__skeleton-inner[data-v-8bf18c79] {
   width: 100%;
   height: 100%;
   border-radius: 8px;
   background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);
   background-size: 400% 100%;
-  animation: shimmer-f5a6939b 1.4s ease infinite;
+  animation: shimmer-8bf18c79 1.4s ease infinite;
 }
-@keyframes shimmer-f5a6939b {
+@keyframes shimmer-8bf18c79 {
 0% {
     background-position: 100% 50%;
 }
@@ -56,20 +56,36 @@
     background-position: 0 50%;
 }
 }
-.waterfall__footer[data-v-f5a6939b] {
+.waterfall__footer[data-v-8bf18c79] {
   padding: 24px 0;
   text-align: center;
 }
-.waterfall__sentinel[data-v-f5a6939b] {
+.waterfall__sentinel[data-v-8bf18c79] {
   height: 1px;
 }
-.waterfall__status[data-v-f5a6939b] {
+.waterfall__status[data-v-8bf18c79] {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 13px;
   color: var(--text-color-3);
 }
-.waterfall__status--done[data-v-f5a6939b] {
+.waterfall__status--done[data-v-8bf18c79] {
   color: var(--text-color-4);
 }
+/* unplugin-vue-components disabled */
+/* layer: default */
+.absolute[data-v-8bf18c79]{position:absolute;}
+.relative[data-v-8bf18c79]{position:relative;}
+.ms[data-v-8bf18c79]{margin-inline-start:1rem;}
+.block[data-v-8bf18c79]{display:block;}
+.hidden[data-v-8bf18c79]{display:none;}
+.inline-flex[data-v-8bf18c79]{display:inline-flex;}
+.transform[data-v-8bf18c79]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.break-all[data-v-8bf18c79]{word-break:break-all;}
+.border[data-v-8bf18c79]{border-width:1px;}
+.px[data-v-8bf18c79]{padding-left:1rem;padding-right:1rem;}
+.outline[data-v-8bf18c79]{outline-style:solid;}
+.transition[data-v-8bf18c79]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.ease[data-v-8bf18c79]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+

package/dist/C_WaterFall2.cjs

@@ -1 +1 @@
-require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`naive-ui`);const r=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],i=[180,360];function a(e,n,i){let a=(0,t.ref)(4),o=(0,t.ref)(0);function s(e){if(n?.value&&n.value>0)return n.value;let t=[...i?.value?.length?i.value:r].sort((e,t)=>t.minWidth-e.minWidth);for(let n of t)if(e>=n.minWidth)return n.columns;return 1}let c=null;function l(){let t=e.value;if(!t)return;c=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;o.value=e,a.value=s(e)}}),c.observe(t);let n=t.getBoundingClientRect();o.value=n.width,a.value=s(n.width)}function u(){c?.disconnect(),c=null}return(0,t.onMounted)(l),(0,t.onBeforeUnmount)(u),(0,t.watch)(e,()=>{u(),l()}),(0,t.watch)([()=>n?.value,()=>i?.value],()=>{o.value>0&&(a.value=s(o.value))}),{columns:(0,t.readonly)(a),containerWidth:(0,t.readonly)(o)}}function o(e,n,r,i){let a=(0,t.ref)([]),o=(0,t.ref)(0),s=new Map;function c(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function l(e,t){let n=s.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?c(r.height,r.basisWidth,t):c(e.height,e.width,t)}function u(){a.value=[],o.value=0,e.value.length===0&&s.clear()}function d(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function f(e,t,n,r){if(!Number.isFinite(t)||t<=0||n!==void 0&&(!Number.isFinite(n)||n<=0))return;let i=s.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(s.set(e,{height:t,basisWidth:n,src:r}),p())}function p(){let t=Math.min(24,Math.max(1,Math.floor(n.value))),c=r.value,f=Math.max(0,i.value??16);if(!d(t,c,f)){u();return}let p=(c-(t-1)*f)/t;if(p<=0){u();return}let m=Array.from({length:t},(e,t)=>({index:t,height:0})),h=[],g=new Set;for(let t of e.value){g.add(t.id);let e=m.reduce((e,t)=>t.height<e.height?t:e),n=l(t,p),r=e.index*(p+f),i=e.height;h.push({item:t,columnIndex:e.index,x:r,y:i,width:p,height:n}),e.height=i+n+f}for(let e of s.keys())g.has(e)||s.delete(e);a.value=h,o.value=Math.max(...m.map(e=>e.height))-f}return(0,t.watch)([e,()=>e.value.length,n,r,i],p,{immediate:!0}),{layoutItems:(0,t.readonly)(a),containerHeight:(0,t.readonly)(o),cacheImageHeight:f,relayout:p}}function s(e,n,r,i,a){let o=(0,t.ref)(`idle`),s=null,c=!1;function l(e){if(!e[0]?.isIntersecting){c=!1;return}!n.value||r.value||i.value||c||(c=!0,o.value=`loading`,a())}function u(){let t=e.value;!t||!n.value||(s=new IntersectionObserver(l,{rootMargin:`200px 0px`}),s.observe(t))}function d(){s?.disconnect(),s=null,c=!1}return(0,t.watch)([r,i],()=>{i.value?o.value=`no-more`:r.value?o.value=`loading`:(o.value=`idle`,c=!1)}),(0,t.onMounted)(u),(0,t.onBeforeUnmount)(d),(0,t.watch)([e,n],()=>{d(),u()}),{status:(0,t.readonly)(o)}}const c=[`aria-label`,`onClick`,`onKeydown`],l={class:`waterfall__card`},u=[`src`,`alt`,`loading`,`onLoad`,`onError`],d={key:0,class:`waterfall__title`},f={key:0,class:`waterfall__footer`},p={key:0,class:`waterfall__status`},m={key:1,class:`waterfall__status waterfall__status--done`},h=(0,t.defineComponent)({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:r,emit:h}){let g=e,_=h,v=(0,t.ref)(),y=(0,t.ref)(),{columns:b,containerWidth:x}=a(v,(0,t.computed)(()=>g.columns),(0,t.computed)(()=>g.breakpoints)),{layoutItems:S,containerHeight:C,cacheImageHeight:w,relayout:T}=o((0,t.computed)(()=>g.items),b,x,(0,t.computed)(()=>g.gap)),E=(0,t.computed)(()=>g.skeleton&&g.loading&&S.value.length===0),D=(0,t.computed)(()=>{let e=Math.min(24,Math.max(1,Math.floor(b.value))),t=x.value,n=Math.max(0,g.gap);if(!Number.isFinite(e)||t<=0)return[];let r=(t-(e-1)*n)/e;if(r<=0)return[];let a=Math.min(100,Math.max(0,Math.floor(g.skeletonCount??8))),o=Array(e).fill(0),s=[];for(let e=0;e<a;e++){let t=o.indexOf(Math.min(...o)),a=i[0]+e*73%(i[1]-i[0]);s.push({x:t*(r+n),y:o[t],width:r,height:a}),o[t]+=a+n}return s}),O=(0,t.computed)(()=>D.value.length===0?0:Math.max(...D.value.map(e=>e.y+e.height))),k=(0,t.computed)(()=>E.value?O.value:C.value),{status:A}=s(y,(0,t.computed)(()=>g.infinite),(0,t.computed)(()=>g.loading),(0,t.computed)(()=>g.noMore),()=>_(`load-more`));function j(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;w(e.item.id,t,e.width,e.item.src)}_(`image-loaded`,e.item)}function M(e){_(`image-error`,e.item)}function N(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return r({relayout:T,scrollToTop:N,getColumns:()=>b.value,getContainerHeight:()=>C.value}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[(0,t.createElementVNode)(`div`,{class:`waterfall__body`,style:(0,t.normalizeStyle)({height:`${k.value}px`,position:`relative`})},[E.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(D.value,(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`sk-${i}`,class:`waterfall__skeleton`,style:(0,t.normalizeStyle)({position:`absolute`,left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,height:`${n.height}px`,transition:`all ${g.animationDuration??(0,t.unref)(300)}ms ease`})},[(0,t.renderSlot)(e.$slots,`skeleton`,{},()=>[r[0]||=(0,t.createElementVNode)(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):(0,t.createCommentVNode)(`v-if`,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(S),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n.item.id,class:`waterfall__item`,role:`button`,tabindex:`0`,"aria-label":n.item.title||`瀑布流项目 ${r+1}`,style:(0,t.normalizeStyle)({position:`absolute`,left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,transition:`all ${g.animationDuration??(0,t.unref)(300)}ms ease`}),onClick:e=>_(`item-click`,n.item,r),onKeydown:[(0,t.withKeys)(e=>_(`item-click`,n.item,r),[`enter`]),(0,t.withKeys)((0,t.withModifiers)(e=>_(`item-click`,n.item,r),[`prevent`]),[`space`])]},[(0,t.renderSlot)(e.$slots,`item`,{item:n.item,index:r,width:n.width,height:n.height},()=>[(0,t.createElementVNode)(`div`,l,[(0,t.createElementVNode)(`img`,{src:n.item.src,alt:n.item.title||``,loading:g.lazy?`lazy`:`eager`,class:`waterfall__image`,style:(0,t.normalizeStyle)({height:`${n.height}px`}),onLoad:e=>j(n,e),onError:e=>M(n)},null,44,u),n.item.title?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,d,(0,t.toDisplayString)(n.item.title),1)):(0,t.createCommentVNode)(`v-if`,!0)])],!0)],44,c))),128))],4),g.infinite?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,f,[(0,t.createElementVNode)(`div`,{ref_key:`sentinelRef`,ref:y,class:`waterfall__sentinel`},null,512),(0,t.renderSlot)(e.$slots,`footer`,{status:(0,t.unref)(A)},()=>[g.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,p,[(0,t.createVNode)((0,t.unref)(n.NSpin),{size:`small`}),r[1]||=(0,t.createElementVNode)(`span`,null,`加载中…`,-1)])):g.noMore?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m,` 没有更多了 `)):(0,t.createCommentVNode)(`v-if`,!0)],!0)])):(0,t.createCommentVNode)(`v-if`,!0)],512))}});var g=e.t(h,[[`__scopeId`,`data-v-f5a6939b`]]);Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return 300}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return 8}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return 200}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return 16}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return i}});
+require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`naive-ui`);const r=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],i=[180,360];function a(e,n,i){let a=(0,t.ref)(4),o=(0,t.ref)(0);function s(e){if(n?.value&&n.value>0)return n.value;let t=[...i?.value?.length?i.value:r].sort((e,t)=>t.minWidth-e.minWidth);for(let n of t)if(e>=n.minWidth)return n.columns;return 1}let c=null;function l(){let t=e.value;if(!t)return;c=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;o.value=e,a.value=s(e)}}),c.observe(t);let n=t.getBoundingClientRect();o.value=n.width,a.value=s(n.width)}function u(){c?.disconnect(),c=null}return(0,t.onMounted)(l),(0,t.onBeforeUnmount)(u),(0,t.watch)(e,()=>{u(),l()}),(0,t.watch)([()=>n?.value,()=>i?.value],()=>{o.value>0&&(a.value=s(o.value))}),{columns:(0,t.readonly)(a),containerWidth:(0,t.readonly)(o)}}function o(e,n,r,i){let a=(0,t.ref)([]),o=(0,t.ref)(0),s=new Map;function c(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function l(e,t){let n=s.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?c(r.height,r.basisWidth,t):c(e.height,e.width,t)}function u(){a.value=[],o.value=0,e.value.length===0&&s.clear()}function d(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function f(e,t,n,r){if(!Number.isFinite(t)||t<=0||n!==void 0&&(!Number.isFinite(n)||n<=0))return;let i=s.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(s.set(e,{height:t,basisWidth:n,src:r}),p())}function p(){let t=Math.min(24,Math.max(1,Math.floor(n.value))),c=r.value,f=Math.max(0,i.value??16);if(!d(t,c,f)){u();return}let p=(c-(t-1)*f)/t;if(p<=0){u();return}let m=Array.from({length:t},(e,t)=>({index:t,height:0})),h=[],g=new Set;for(let t of e.value){g.add(t.id);let e=m.reduce((e,t)=>t.height<e.height?t:e),n=l(t,p),r=e.index*(p+f),i=e.height;h.push({item:t,columnIndex:e.index,x:r,y:i,width:p,height:n}),e.height=i+n+f}for(let e of s.keys())g.has(e)||s.delete(e);a.value=h,o.value=Math.max(...m.map(e=>e.height))-f}return(0,t.watch)([e,()=>e.value.length,n,r,i],p,{immediate:!0}),{layoutItems:(0,t.readonly)(a),containerHeight:(0,t.readonly)(o),cacheImageHeight:f,relayout:p}}function s(e,n,r,i,a){let o=(0,t.ref)(`idle`),s=null,c=!1;function l(e){if(!e[0]?.isIntersecting){c=!1;return}!n.value||r.value||i.value||c||(c=!0,o.value=`loading`,a())}function u(){let t=e.value;!t||!n.value||(s=new IntersectionObserver(l,{rootMargin:`200px 0px`}),s.observe(t))}function d(){s?.disconnect(),s=null,c=!1}return(0,t.watch)([r,i],()=>{i.value?o.value=`no-more`:r.value?o.value=`loading`:(o.value=`idle`,c=!1)}),(0,t.onMounted)(u),(0,t.onBeforeUnmount)(d),(0,t.watch)([e,n],()=>{d(),u()}),{status:(0,t.readonly)(o)}}const c=[`aria-label`,`onClick`,`onKeydown`],l={class:`waterfall__card`},u=[`src`,`alt`,`loading`,`onLoad`,`onError`],d={key:0,class:`waterfall__title`},f={key:0,class:`waterfall__footer`},p={key:0,class:`waterfall__status`},m={key:1,class:`waterfall__status waterfall__status--done`},h=(0,t.defineComponent)({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:r,emit:h}){let g=e,_=h,v=(0,t.ref)(),y=(0,t.ref)(),{columns:b,containerWidth:x}=a(v,(0,t.computed)(()=>g.columns),(0,t.computed)(()=>g.breakpoints)),{layoutItems:S,containerHeight:C,cacheImageHeight:w,relayout:T}=o((0,t.computed)(()=>g.items),b,x,(0,t.computed)(()=>g.gap)),E=(0,t.computed)(()=>g.skeleton&&g.loading&&S.value.length===0),D=(0,t.computed)(()=>{let e=Math.min(24,Math.max(1,Math.floor(b.value))),t=x.value,n=Math.max(0,g.gap);if(!Number.isFinite(e)||t<=0)return[];let r=(t-(e-1)*n)/e;if(r<=0)return[];let a=Math.min(100,Math.max(0,Math.floor(g.skeletonCount??8))),o=Array(e).fill(0),s=[];for(let e=0;e<a;e++){let t=o.indexOf(Math.min(...o)),a=i[0]+e*73%(i[1]-i[0]);s.push({x:t*(r+n),y:o[t],width:r,height:a}),o[t]+=a+n}return s}),O=(0,t.computed)(()=>D.value.length===0?0:Math.max(...D.value.map(e=>e.y+e.height))),k=(0,t.computed)(()=>E.value?O.value:C.value),{status:A}=s(y,(0,t.computed)(()=>g.infinite),(0,t.computed)(()=>g.loading),(0,t.computed)(()=>g.noMore),()=>_(`load-more`));function j(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;w(e.item.id,t,e.width,e.item.src)}_(`image-loaded`,e.item)}function M(e){_(`image-error`,e.item)}function N(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return r({relayout:T,scrollToTop:N,getColumns:()=>b.value,getContainerHeight:()=>C.value}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[(0,t.createElementVNode)(`div`,{class:`waterfall__body`,style:(0,t.normalizeStyle)({height:`${k.value}px`,position:`relative`})},[E.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(D.value,(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:`sk-${i}`,class:`waterfall__skeleton`,style:(0,t.normalizeStyle)({position:`absolute`,left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,height:`${n.height}px`,transition:`all ${g.animationDuration??(0,t.unref)(300)}ms ease`})},[(0,t.renderSlot)(e.$slots,`skeleton`,{},()=>[r[0]||=(0,t.createElementVNode)(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):(0,t.createCommentVNode)(`v-if`,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(S),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n.item.id,class:`waterfall__item`,role:`button`,tabindex:`0`,"aria-label":n.item.title||`瀑布流项目 ${r+1}`,style:(0,t.normalizeStyle)({position:`absolute`,left:`${n.x}px`,top:`${n.y}px`,width:`${n.width}px`,transition:`all ${g.animationDuration??(0,t.unref)(300)}ms ease`}),onClick:e=>_(`item-click`,n.item,r),onKeydown:[(0,t.withKeys)(e=>_(`item-click`,n.item,r),[`enter`]),(0,t.withKeys)((0,t.withModifiers)(e=>_(`item-click`,n.item,r),[`prevent`]),[`space`])]},[(0,t.renderSlot)(e.$slots,`item`,{item:n.item,index:r,width:n.width,height:n.height},()=>[(0,t.createElementVNode)(`div`,l,[(0,t.createElementVNode)(`img`,{src:n.item.src,alt:n.item.title||``,loading:g.lazy?`lazy`:`eager`,class:`waterfall__image`,style:(0,t.normalizeStyle)({height:`${n.height}px`}),onLoad:e=>j(n,e),onError:e=>M(n)},null,44,u),n.item.title?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,d,(0,t.toDisplayString)(n.item.title),1)):(0,t.createCommentVNode)(`v-if`,!0)])],!0)],44,c))),128))],4),g.infinite?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,f,[(0,t.createElementVNode)(`div`,{ref_key:`sentinelRef`,ref:y,class:`waterfall__sentinel`},null,512),(0,t.renderSlot)(e.$slots,`footer`,{status:(0,t.unref)(A)},()=>[g.loading?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,p,[(0,t.createVNode)((0,t.unref)(n.NSpin),{size:`small`}),r[1]||=(0,t.createElementVNode)(`span`,null,`加载中…`,-1)])):g.noMore?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m,` 没有更多了 `)):(0,t.createCommentVNode)(`v-if`,!0)],!0)])):(0,t.createCommentVNode)(`v-if`,!0)],512))}});var g=e.t(h,[[`__scopeId`,`data-v-8bf18c79`]]);Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return 300}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return 8}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return 200}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return 16}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return i}});

package/dist/C_WaterFall2.js

@@ -1 +1 @@
-import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,normalizeStyle as c,onBeforeUnmount as l,onMounted as u,openBlock as d,readonly as f,ref as p,renderList as m,renderSlot as h,toDisplayString as g,unref as _,watch as v,withKeys as y,withModifiers as b}from"vue";import{NSpin as x}from"naive-ui";const S=16,C=300,w=8,T=200,E=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],D=[180,360];function O(e,t,n){let r=p(4),i=p(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:E].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return u(s),l(c),v(e,()=>{c(),s()}),v([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:f(r),containerWidth:f(i)}}function k(e,t,n,r){let i=p([]),a=p(0),o=new Map;function s(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function c(e,t){let n=o.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?s(r.height,r.basisWidth,t):s(e.height,e.width,t)}function l(){i.value=[],a.value=0,e.value.length===0&&o.clear()}function u(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function d(e,t,n,r){if(!Number.isFinite(t)||t<=0||n!==void 0&&(!Number.isFinite(n)||n<=0))return;let i=o.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(o.set(e,{height:t,basisWidth:n,src:r}),m())}function m(){let s=Math.min(24,Math.max(1,Math.floor(t.value))),d=n.value,f=Math.max(0,r.value??16);if(!u(s,d,f)){l();return}let p=(d-(s-1)*f)/s;if(p<=0){l();return}let m=Array.from({length:s},(e,t)=>({index:t,height:0})),h=[],g=new Set;for(let t of e.value){g.add(t.id);let e=m.reduce((e,t)=>t.height<e.height?t:e),n=c(t,p),r=e.index*(p+f),i=e.height;h.push({item:t,columnIndex:e.index,x:r,y:i,width:p,height:n}),e.height=i+n+f}for(let e of o.keys())g.has(e)||o.delete(e);i.value=h,a.value=Math.max(...m.map(e=>e.height))-f}return v([e,()=>e.value.length,t,n,r],m,{immediate:!0}),{layoutItems:f(i),containerHeight:f(a),cacheImageHeight:d,relayout:m}}function A(e,t,n,r,i){let a=p(`idle`),o=null,s=!1;function c(e){if(!e[0]?.isIntersecting){s=!1;return}!t.value||n.value||r.value||s||(s=!0,a.value=`loading`,i())}function d(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(c,{rootMargin:`200px 0px`}),o.observe(n))}function m(){o?.disconnect(),o=null,s=!1}return v([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:(a.value=`idle`,s=!1)}),u(d),l(m),v([e,t],()=>{m(),d()}),{status:f(a)}}const j=[`aria-label`,`onClick`,`onKeydown`],M={class:`waterfall__card`},N=[`src`,`alt`,`loading`,`onLoad`,`onError`],P={key:0,class:`waterfall__title`},F={key:0,class:`waterfall__footer`},I={key:0,class:`waterfall__status`},L={key:1,class:`waterfall__status waterfall__status--done`};var R=e(s({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:s,emit:l}){let u=e,f=l,v=p(),S=p(),{columns:C,containerWidth:w}=O(v,n(()=>u.columns),n(()=>u.breakpoints)),{layoutItems:T,containerHeight:E,cacheImageHeight:R,relayout:z}=k(n(()=>u.items),C,w,n(()=>u.gap)),B=n(()=>u.skeleton&&u.loading&&T.value.length===0),V=n(()=>{let e=Math.min(24,Math.max(1,Math.floor(C.value))),t=w.value,n=Math.max(0,u.gap);if(!Number.isFinite(e)||t<=0)return[];let r=(t-(e-1)*n)/e;if(r<=0)return[];let i=Math.min(100,Math.max(0,Math.floor(u.skeletonCount??8))),a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let t=a.indexOf(Math.min(...a)),i=D[0]+e*73%(D[1]-D[0]);o.push({x:t*(r+n),y:a[t],width:r,height:i}),a[t]+=i+n}return o}),H=n(()=>V.value.length===0?0:Math.max(...V.value.map(e=>e.y+e.height))),U=n(()=>B.value?H.value:E.value),{status:W}=A(S,n(()=>u.infinite),n(()=>u.loading),n(()=>u.noMore),()=>f(`load-more`));function G(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;R(e.item.id,t,e.width,e.item.src)}f(`image-loaded`,e.item)}function K(e){f(`image-error`,e.item)}function q(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return s({relayout:z,scrollToTop:q,getColumns:()=>C.value,getContainerHeight:()=>E.value}),(e,n)=>(d(),i(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[a(`div`,{class:`waterfall__body`,style:c({height:`${U.value}px`,position:`relative`})},[B.value?(d(!0),i(t,{key:0},m(V.value,(t,r)=>(d(),i(`div`,{key:`sk-${r}`,class:`waterfall__skeleton`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${u.animationDuration??_(300)}ms ease`})},[h(e.$slots,`skeleton`,{},()=>[n[0]||=a(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):r(`v-if`,!0),(d(!0),i(t,null,m(_(T),(t,n)=>(d(),i(`div`,{key:t.item.id,class:`waterfall__item`,role:`button`,tabindex:`0`,"aria-label":t.item.title||`瀑布流项目 ${n+1}`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${u.animationDuration??_(300)}ms ease`}),onClick:e=>f(`item-click`,t.item,n),onKeydown:[y(e=>f(`item-click`,t.item,n),[`enter`]),y(b(e=>f(`item-click`,t.item,n),[`prevent`]),[`space`])]},[h(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[a(`div`,M,[a(`img`,{src:t.item.src,alt:t.item.title||``,loading:u.lazy?`lazy`:`eager`,class:`waterfall__image`,style:c({height:`${t.height}px`}),onLoad:e=>G(t,e),onError:e=>K(t)},null,44,N),t.item.title?(d(),i(`div`,P,g(t.item.title),1)):r(`v-if`,!0)])],!0)],44,j))),128))],4),u.infinite?(d(),i(`div`,F,[a(`div`,{ref_key:`sentinelRef`,ref:S,class:`waterfall__sentinel`},null,512),h(e.$slots,`footer`,{status:_(W)},()=>[u.loading?(d(),i(`div`,I,[o(_(x),{size:`small`}),n[1]||=a(`span`,null,`加载中…`,-1)])):u.noMore?(d(),i(`div`,L,` 没有更多了 `)):r(`v-if`,!0)],!0)])):r(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-f5a6939b`]]);export{C as a,w as c,O as i,T as l,A as n,E as o,k as r,S as s,R as t,D as u};
+import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,normalizeStyle as c,onBeforeUnmount as l,onMounted as u,openBlock as d,readonly as f,ref as p,renderList as m,renderSlot as h,toDisplayString as g,unref as _,watch as v,withKeys as y,withModifiers as b}from"vue";import{NSpin as x}from"naive-ui";const S=16,C=300,w=8,T=200,E=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],D=[180,360];function O(e,t,n){let r=p(4),i=p(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:E].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return u(s),l(c),v(e,()=>{c(),s()}),v([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:f(r),containerWidth:f(i)}}function k(e,t,n,r){let i=p([]),a=p(0),o=new Map;function s(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function c(e,t){let n=o.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?s(r.height,r.basisWidth,t):s(e.height,e.width,t)}function l(){i.value=[],a.value=0,e.value.length===0&&o.clear()}function u(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function d(e,t,n,r){if(!Number.isFinite(t)||t<=0||n!==void 0&&(!Number.isFinite(n)||n<=0))return;let i=o.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(o.set(e,{height:t,basisWidth:n,src:r}),m())}function m(){let s=Math.min(24,Math.max(1,Math.floor(t.value))),d=n.value,f=Math.max(0,r.value??16);if(!u(s,d,f)){l();return}let p=(d-(s-1)*f)/s;if(p<=0){l();return}let m=Array.from({length:s},(e,t)=>({index:t,height:0})),h=[],g=new Set;for(let t of e.value){g.add(t.id);let e=m.reduce((e,t)=>t.height<e.height?t:e),n=c(t,p),r=e.index*(p+f),i=e.height;h.push({item:t,columnIndex:e.index,x:r,y:i,width:p,height:n}),e.height=i+n+f}for(let e of o.keys())g.has(e)||o.delete(e);i.value=h,a.value=Math.max(...m.map(e=>e.height))-f}return v([e,()=>e.value.length,t,n,r],m,{immediate:!0}),{layoutItems:f(i),containerHeight:f(a),cacheImageHeight:d,relayout:m}}function A(e,t,n,r,i){let a=p(`idle`),o=null,s=!1;function c(e){if(!e[0]?.isIntersecting){s=!1;return}!t.value||n.value||r.value||s||(s=!0,a.value=`loading`,i())}function d(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(c,{rootMargin:`200px 0px`}),o.observe(n))}function m(){o?.disconnect(),o=null,s=!1}return v([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:(a.value=`idle`,s=!1)}),u(d),l(m),v([e,t],()=>{m(),d()}),{status:f(a)}}const j=[`aria-label`,`onClick`,`onKeydown`],M={class:`waterfall__card`},N=[`src`,`alt`,`loading`,`onLoad`,`onError`],P={key:0,class:`waterfall__title`},F={key:0,class:`waterfall__footer`},I={key:0,class:`waterfall__status`},L={key:1,class:`waterfall__status waterfall__status--done`};var R=e(s({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:s,emit:l}){let u=e,f=l,v=p(),S=p(),{columns:C,containerWidth:w}=O(v,n(()=>u.columns),n(()=>u.breakpoints)),{layoutItems:T,containerHeight:E,cacheImageHeight:R,relayout:z}=k(n(()=>u.items),C,w,n(()=>u.gap)),B=n(()=>u.skeleton&&u.loading&&T.value.length===0),V=n(()=>{let e=Math.min(24,Math.max(1,Math.floor(C.value))),t=w.value,n=Math.max(0,u.gap);if(!Number.isFinite(e)||t<=0)return[];let r=(t-(e-1)*n)/e;if(r<=0)return[];let i=Math.min(100,Math.max(0,Math.floor(u.skeletonCount??8))),a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let t=a.indexOf(Math.min(...a)),i=D[0]+e*73%(D[1]-D[0]);o.push({x:t*(r+n),y:a[t],width:r,height:i}),a[t]+=i+n}return o}),H=n(()=>V.value.length===0?0:Math.max(...V.value.map(e=>e.y+e.height))),U=n(()=>B.value?H.value:E.value),{status:W}=A(S,n(()=>u.infinite),n(()=>u.loading),n(()=>u.noMore),()=>f(`load-more`));function G(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;R(e.item.id,t,e.width,e.item.src)}f(`image-loaded`,e.item)}function K(e){f(`image-error`,e.item)}function q(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return s({relayout:z,scrollToTop:q,getColumns:()=>C.value,getContainerHeight:()=>E.value}),(e,n)=>(d(),i(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[a(`div`,{class:`waterfall__body`,style:c({height:`${U.value}px`,position:`relative`})},[B.value?(d(!0),i(t,{key:0},m(V.value,(t,r)=>(d(),i(`div`,{key:`sk-${r}`,class:`waterfall__skeleton`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${u.animationDuration??_(300)}ms ease`})},[h(e.$slots,`skeleton`,{},()=>[n[0]||=a(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):r(`v-if`,!0),(d(!0),i(t,null,m(_(T),(t,n)=>(d(),i(`div`,{key:t.item.id,class:`waterfall__item`,role:`button`,tabindex:`0`,"aria-label":t.item.title||`瀑布流项目 ${n+1}`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${u.animationDuration??_(300)}ms ease`}),onClick:e=>f(`item-click`,t.item,n),onKeydown:[y(e=>f(`item-click`,t.item,n),[`enter`]),y(b(e=>f(`item-click`,t.item,n),[`prevent`]),[`space`])]},[h(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[a(`div`,M,[a(`img`,{src:t.item.src,alt:t.item.title||``,loading:u.lazy?`lazy`:`eager`,class:`waterfall__image`,style:c({height:`${t.height}px`}),onLoad:e=>G(t,e),onError:e=>K(t)},null,44,N),t.item.title?(d(),i(`div`,P,g(t.item.title),1)):r(`v-if`,!0)])],!0)],44,j))),128))],4),u.infinite?(d(),i(`div`,F,[a(`div`,{ref_key:`sentinelRef`,ref:S,class:`waterfall__sentinel`},null,512),h(e.$slots,`footer`,{status:_(W)},()=>[u.loading?(d(),i(`div`,I,[o(_(x),{size:`small`}),n[1]||=a(`span`,null,`加载中…`,-1)])):u.noMore?(d(),i(`div`,L,` 没有更多了 `)):r(`v-if`,!0)],!0)])):r(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-8bf18c79`]]);export{C as a,w as c,O as i,T as l,A as n,E as o,k as r,S as s,R as t,D as u};