@robot-admin/naive-ui-components 0.17.0 → 0.17.2

package/dist/C_VtableGantt2.js

@@ -1 +1 @@
-import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,nextTick as u,normalizeStyle as d,onMounted as f,onUnmounted as p,openBlock as m,ref as h,toDisplayString as g,unref as _,watch as v,withCtx as y}from"vue";import{NButton as b}from"naive-ui";const x={headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`,borderLineWidth:1,fontSize:14,fontWeight:`bold`},bodyStyle:{borderColor:`rgba(128, 128, 128, 0.2)`,borderLineWidth:[1,0,1,0],fontSize:13}},S={basic:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`任务名称`,width:220,tree:!0},{field:`start`,title:`开始时间`,width:120},{field:`end`,title:`结束时间`,width:120},{field:`progress`,title:`进度`,width:80}],tableWidth:420,minTableWidth:300,theme:x},frame:{outerFrameStyle:{borderLineWidth:1,borderColor:`#e1e4e8`,cornerRadius:6},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:2}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,labelText:`{title}`,labelTextStyle:{fontSize:12,textAlign:`left`},barStyle:{width:18,barColor:`#1890ff`,completedBarColor:`#52c41a`,cornerRadius:4,borderLineWidth:0},milestoneStyle:{borderColor:`#fa8c16`,borderLineWidth:1,fillColor:`#ffd666`,width:12}},timelineHeader:{colWidth:60,horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},scales:[{unit:`week`,step:1,format:e=>`第${e.dateIndex}周`,style:{fontSize:12,fontWeight:`bold`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},project:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`任务名称`,width:200,tree:!0,editor:`input`},{field:`start`,title:`开始时间`,width:120,editor:`date-input`},{field:`end`,title:`结束时间`,width:120,editor:`date-input`},{field:`priority`,title:`优先级`,width:80,editor:`input`},{field:`progress`,title:`进度%`,width:80,editor:`input`}],tableWidth:480,minTableWidth:350,maxTableWidth:800,theme:x,hierarchyExpandLevel:2},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#e1e4e8`,cornerRadius:8},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,hoverBarStyle:{barOverlayColor:`rgba(24, 144, 255, 0.3)`},labelText:`{title} {progress}%`,labelTextStyle:{fontSize:12,textAlign:`left`,textOverflow:`ellipsis`},barStyle:{width:20,barColor:`#1890ff`,completedBarColor:`#52c41a`,cornerRadius:6,borderLineWidth:0}},timelineHeader:{colWidth:60,horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},scales:[{unit:`week`,step:1,startOfWeek:`monday`,format:e=>`第${e.dateIndex}周`,style:{fontSize:13,fontWeight:`bold`,textAlign:`center`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11,textAlign:`center`}}]},rowSeriesNumber:{title:`序号`,dragOrder:!0,headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`},style:{borderColor:`rgba(128, 128, 128, 0.2)`}},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},timeline:{overscrollBehavior:`none`,headerRowHeight:45,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`事件名称`,width:250,tree:!0},{field:`start`,title:`时间`,width:150}],tableWidth:400,minTableWidth:300,theme:{headerStyle:{...x.headerStyle},bodyStyle:x.bodyStyle}},frame:{outerFrameStyle:{borderLineWidth:1,borderColor:`rgba(128, 128, 128, 0.3)`,cornerRadius:4},verticalSplitLineMoveable:!0},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,labelText:`{title}`,labelTextStyle:{fontSize:12,textAlign:`left`},barStyle:{width:22,barColor:`#722ed1`,completedBarColor:`#b37feb`,cornerRadius:8,borderLineWidth:0}},timelineHeader:{colWidth:60,scales:[{unit:`month`,step:1,format:e=>`${e.dateIndex}月`,style:{fontSize:13,fontWeight:`bold`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},milestone:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:38,taskListTable:{columns:[{field:`title`,title:`里程碑`,width:200,tree:!0},{field:`start`,title:`目标日期`,width:120},{field:`priority`,title:`重要性`,width:100}],tableWidth:400,minTableWidth:300,theme:{headerStyle:{...x.headerStyle,borderColor:`#ffa940`},bodyStyle:{...x.bodyStyle,borderColor:`#ffa940`}}},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#ffa940`,cornerRadius:6},verticalSplitLineMoveable:!0},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(255, 168, 64, 0.3)`},horizontalLine:{lineWidth:1,lineColor:`rgba(255, 168, 64, 0.3)`}},taskBar:{startDateField:`start`,endDateField:`start`,labelText:`{title}`,labelTextStyle:{fontSize:12,fontWeight:`bold`},barStyle:{width:0,barColor:`transparent`},milestoneStyle:{borderColor:`#fa8c16`,borderLineWidth:2,fillColor:`#ffd666`,width:16}},timelineHeader:{colWidth:80,scales:[{unit:`month`,step:1,format:e=>`${e.dateIndex}月`,style:{fontSize:13,fontWeight:`bold`}},{unit:`week`,step:1,format:e=>`第${e.dateIndex}周`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},official:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`title`,width:180,sort:!0,tree:!0,editor:`input`},{field:`start`,title:`start`,width:120,sort:!0,editor:`date-input`},{field:`end`,title:`end`,width:120,sort:!0,editor:`date-input`},{field:`priority`,title:`priority`,width:80,sort:!0,editor:`input`},{field:`progress`,title:`progress`,width:80,sort:!0,editor:`input`}],tableWidth:460,minTableWidth:350,maxTableWidth:800,theme:{headerStyle:{...x.headerStyle,fontSize:18,color:`red`},bodyStyle:{...x.bodyStyle,fontSize:16,color:`#4D4D4D`}},hierarchyExpandLevel:2},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#e1e4e8`,cornerRadius:8},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3},horizontalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,hoverBarStyle:{barOverlayColor:`rgba(99, 144, 0, 0.4)`},labelText:`{title} {progress}%`,labelTextStyle:{fontSize:16,textAlign:`left`,textOverflow:`ellipsis`},barStyle:{width:20,barColor:`#ee8800`,completedBarColor:`#91e8e0`,cornerRadius:8,borderLineWidth:1,borderColor:`black`},milestoneStyle:{borderColor:`red`,borderLineWidth:1,fillColor:`green`,width:15}},timelineHeader:{backgroundColor:`#EEF1F5`,colWidth:60,horizontalLine:{lineWidth:1,lineColor:`#e1e4e8`},verticalLine:{lineWidth:1,lineColor:`#e1e4e8`},scales:[{unit:`week`,step:1,startOfWeek:`sunday`,format:e=>`Week ${e.dateIndex}`,style:{fontSize:20,fontWeight:`bold`,color:`white`,strokeColor:`black`,textAlign:`right`,textBaseline:`bottom`,textStick:!0}},{unit:`day`,step:1,format:e=>e.dateIndex.toString(),style:{fontSize:20,fontWeight:`bold`,color:`white`,strokeColor:`black`,textAlign:`right`,textBaseline:`bottom`}}]},markLine:[{date:`2024-07-28`,style:{lineWidth:1,lineColor:`blue`,lineDash:[8,4]}},{date:`2024-08-17`,style:{lineWidth:2,lineColor:`red`,lineDash:[8,4]}}],rowSeriesNumber:{title:`行号`,dragOrder:!0,headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`},style:{borderColor:`rgba(128, 128, 128, 0.2)`}},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}}},C=new Set([`__proto__`,`prototype`,`constructor`]),w=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null};function T(e,t){let n=new WeakMap,r=(e,t)=>{let i=n.get(t);if(i)return i;let a={...e};n.set(t,a);for(let[n,i]of Object.entries(t))C.has(n)||(a[n]=w(i)?r(w(e[n])?e[n]:{},i):i);return a};return r(e,t)}const E={class:`c-vtable-gantt-wrapper`},D={key:0,class:`gantt-toolbar`},O={class:`toolbar-left`},k={class:`gantt-title`},A={class:`toolbar-right`};var j=t(l({name:`C_VtableGantt`,__name:`index`,props:{data:{default:()=>[]},options:{default:()=>({})},preset:{default:`basic`},height:{default:`600px`},title:{default:``},showToolbar:{type:Boolean,default:!0},showFullscreenButton:{type:Boolean,default:!0},theme:{default:`light`}},emits:[`ganttCreated`,`taskClick`,`taskChange`],setup(t,{expose:l,emit:x}){let C=t,w=x,j=h(),M=h(),N=h(!1),P=0,F,I,L=!1,R=n(()=>typeof C.height==`number`?`${C.height}px`:C.height),z=(e,t)=>!L&&e===P&&j.value===t,B=e=>e.map(e=>({...e,title:e.title||`任务${e.id}`,children:e.children?B(e.children):void 0})),V=e=>({underlayBackgroundColor:e?`#1e1e1e`:`#ffffff`,timelineHeaderBg:e?`#2d2d2d`:`#EEF1F5`,gridBg:e?`#1e1e1e`:`#ffffff`,lineColor:e?`rgba(255, 255, 255, 0.1)`:`rgba(128, 128, 128, 0.2)`,textColor:e?`#ffffff`:`#000000`}),H=(e,t)=>({...e,backgroundColor:t.timelineHeaderBg,horizontalLine:{...e?.horizontalLine,lineColor:t.lineColor},verticalLine:{...e?.verticalLine,lineColor:t.lineColor},scales:e?.scales?.map(e=>({...e,style:{...e.style,color:t.textColor}}))}),U=(e,t)=>({...e,backgroundColor:t.gridBg,horizontalLine:{...e?.horizontalLine,lineColor:t.lineColor},verticalLine:{...e?.verticalLine,lineColor:t.lineColor}}),W=(e,t,n,r)=>({...e,records:t,underlayBackgroundColor:r.underlayBackgroundColor,taskListTable:{...e.taskListTable,theme:n},timelineHeader:H(e.timelineHeader,r),grid:U(e.grid,r)}),G=e=>{e.on(`click_cell`,e=>{let{record:t,event:n}=e||{};t&&w(`taskClick`,t,n)}),e.on(`change_data`,e=>{let{record:t,changes:n}=e||{};t&&n&&w(`taskChange`,t,n)})},K=async()=>{let e=j.value;if(!e||L)return;let t=++P;try{let{Gantt:n}=await import(`@visactor/vtable-gantt`),{themes:r}=await import(`@visactor/vtable`);if(!z(t,e))return;let i=C.theme===`dark`,a=T(S[C.preset]||S.basic,C.options),o=B(C.data||[]);M.value&&M.value.release();let s=new n(e,W(a,o,i?r.DARK:r.DEFAULT,V(i)));if(!z(t,e)){s.release();return}M.value=s,G(s),w(`ganttCreated`,s)}catch(e){console.error(`甘特图初始化失败:`,e)}},q=()=>{I&&clearTimeout(I),I=setTimeout(()=>{I=void 0,L||M.value?.resize?.()},100)},J=async()=>{let e=j.value;if(e)try{document.fullscreenElement===e?await document.exitFullscreen():await e.requestFullscreen(),N.value=document.fullscreenElement===e,q()}catch(t){console.warn(`全屏切换失败:`,t),N.value=document.fullscreenElement===e}},Y=()=>{N.value=document.fullscreenElement===j.value,q()},X=e=>{if(M.value&&e)try{M.value.setRecords(B(e))}catch(e){console.warn(`更新数据失败:`,e)}},Z=e=>{if(M.value&&e)try{M.value.updateOption(e)}catch(e){console.warn(`更新配置失败:`,e)}},Q=()=>{if(M.value)try{M.value.release()}catch(e){console.warn(`销毁甘特图失败:`,e)}finally{M.value=void 0}};return v(()=>C.data,e=>{e&&M.value&&X(e)},{deep:!0}),v(()=>[C.options,C.preset],()=>u(()=>K()),{deep:!0}),v(()=>C.theme,()=>u(()=>K())),f(()=>{L=!1,document.addEventListener(`fullscreenchange`,Y),u(()=>{L||(F=setTimeout(()=>K(),100))})}),p(()=>{L=!0,P+=1,F&&clearTimeout(F),I&&clearTimeout(I),document.removeEventListener(`fullscreenchange`,Y),Q()}),l({ganttInstance:M,updateData:X,updateOptions:Z,toggleFullscreen:J}),(n,l)=>(m(),a(`div`,E,[t.showToolbar?(m(),a(`div`,D,[o(`div`,O,[o(`span`,k,g(t.title||`甘特图`),1)]),o(`div`,A,[t.showFullscreenButton?(m(),r(_(b),{key:0,size:`small`,onClick:J},{icon:y(()=>[c(e,{name:N.value?`carbon:minimize`:`carbon:maximize`,size:16,color:`currentColor`},null,8,[`name`])]),default:y(()=>[s(` `+g(N.value?`退出全屏`:`全屏`),1)]),_:1})):i(`v-if`,!0)])])):i(`v-if`,!0),o(`div`,{ref_key:`ganttContainerRef`,ref:j,class:`gantt-container`,style:d({height:R.value})},null,4)]))}}),[[`__scopeId`,`data-v-7145fd81`]]);export{S as n,j as t};
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,nextTick as ee,normalizeStyle as te,onMounted as ne,onUnmounted as re,openBlock as u,ref as d,shallowRef as f,toDisplayString as p,unref as m,watch as h,withCtx as g}from"vue";import{NButton as _,NResult as v}from"naive-ui";const y={headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`,borderLineWidth:1,fontSize:14,fontWeight:`bold`},bodyStyle:{borderColor:`rgba(128, 128, 128, 0.2)`,borderLineWidth:[1,0,1,0],fontSize:13}},b={basic:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`任务名称`,width:220,tree:!0},{field:`start`,title:`开始时间`,width:120},{field:`end`,title:`结束时间`,width:120},{field:`progress`,title:`进度`,width:80}],tableWidth:420,minTableWidth:300,theme:y},frame:{outerFrameStyle:{borderLineWidth:1,borderColor:`#e1e4e8`,cornerRadius:6},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:2}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,labelText:`{title}`,labelTextStyle:{fontSize:12,textAlign:`left`},barStyle:{width:18,barColor:`#1890ff`,completedBarColor:`#52c41a`,cornerRadius:4,borderLineWidth:0},milestoneStyle:{borderColor:`#fa8c16`,borderLineWidth:1,fillColor:`#ffd666`,width:12}},timelineHeader:{colWidth:60,horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},scales:[{unit:`week`,step:1,format:e=>`第${e.dateIndex}周`,style:{fontSize:12,fontWeight:`bold`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},project:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`任务名称`,width:200,tree:!0,editor:`input`},{field:`start`,title:`开始时间`,width:120,editor:`date-input`},{field:`end`,title:`结束时间`,width:120,editor:`date-input`},{field:`priority`,title:`优先级`,width:80,editor:`input`},{field:`progress`,title:`进度%`,width:80,editor:`input`}],tableWidth:480,minTableWidth:350,maxTableWidth:800,theme:y,hierarchyExpandLevel:2},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#e1e4e8`,cornerRadius:8},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,hoverBarStyle:{barOverlayColor:`rgba(24, 144, 255, 0.3)`},labelText:`{title} {progress}%`,labelTextStyle:{fontSize:12,textAlign:`left`,textOverflow:`ellipsis`},barStyle:{width:20,barColor:`#1890ff`,completedBarColor:`#52c41a`,cornerRadius:6,borderLineWidth:0}},timelineHeader:{colWidth:60,horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},scales:[{unit:`week`,step:1,startOfWeek:`monday`,format:e=>`第${e.dateIndex}周`,style:{fontSize:13,fontWeight:`bold`,textAlign:`center`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11,textAlign:`center`}}]},rowSeriesNumber:{title:`序号`,dragOrder:!0,headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`},style:{borderColor:`rgba(128, 128, 128, 0.2)`}},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},timeline:{overscrollBehavior:`none`,headerRowHeight:45,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`事件名称`,width:250,tree:!0},{field:`start`,title:`时间`,width:150}],tableWidth:400,minTableWidth:300,theme:{headerStyle:{...y.headerStyle},bodyStyle:y.bodyStyle}},frame:{outerFrameStyle:{borderLineWidth:1,borderColor:`rgba(128, 128, 128, 0.3)`,cornerRadius:4},verticalSplitLineMoveable:!0},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,labelText:`{title}`,labelTextStyle:{fontSize:12,textAlign:`left`},barStyle:{width:22,barColor:`#722ed1`,completedBarColor:`#b37feb`,cornerRadius:8,borderLineWidth:0}},timelineHeader:{colWidth:60,scales:[{unit:`month`,step:1,format:e=>`${e.dateIndex}月`,style:{fontSize:13,fontWeight:`bold`}},{unit:`day`,step:1,format:e=>`${e.dateIndex}`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},milestone:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:38,taskListTable:{columns:[{field:`title`,title:`里程碑`,width:200,tree:!0},{field:`start`,title:`目标日期`,width:120},{field:`priority`,title:`重要性`,width:100}],tableWidth:400,minTableWidth:300,theme:{headerStyle:{...y.headerStyle,borderColor:`#ffa940`},bodyStyle:{...y.bodyStyle,borderColor:`#ffa940`}}},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#ffa940`,cornerRadius:6},verticalSplitLineMoveable:!0},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(255, 168, 64, 0.3)`},horizontalLine:{lineWidth:1,lineColor:`rgba(255, 168, 64, 0.3)`}},taskBar:{startDateField:`start`,endDateField:`start`,labelText:`{title}`,labelTextStyle:{fontSize:12,fontWeight:`bold`},barStyle:{width:0,barColor:`transparent`},milestoneStyle:{borderColor:`#fa8c16`,borderLineWidth:2,fillColor:`#ffd666`,width:16}},timelineHeader:{colWidth:80,scales:[{unit:`month`,step:1,format:e=>`${e.dateIndex}月`,style:{fontSize:13,fontWeight:`bold`}},{unit:`week`,step:1,format:e=>`第${e.dateIndex}周`,style:{fontSize:11}}]},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}},official:{overscrollBehavior:`none`,headerRowHeight:40,rowHeight:40,taskListTable:{columns:[{field:`title`,title:`title`,width:180,sort:!0,tree:!0,editor:`input`},{field:`start`,title:`start`,width:120,sort:!0,editor:`date-input`},{field:`end`,title:`end`,width:120,sort:!0,editor:`date-input`},{field:`priority`,title:`priority`,width:80,sort:!0,editor:`input`},{field:`progress`,title:`progress`,width:80,sort:!0,editor:`input`}],tableWidth:460,minTableWidth:350,maxTableWidth:800,theme:{headerStyle:{...y.headerStyle,fontSize:18,color:`red`},bodyStyle:{...y.bodyStyle,fontSize:16,color:`#4D4D4D`}},hierarchyExpandLevel:2},frame:{outerFrameStyle:{borderLineWidth:2,borderColor:`#e1e4e8`,cornerRadius:8},verticalSplitLineMoveable:!0,verticalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3},horizontalSplitLine:{lineColor:`#e1e4e8`,lineWidth:3}},grid:{verticalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`},horizontalLine:{lineWidth:1,lineColor:`rgba(128, 128, 128, 0.2)`}},taskBar:{startDateField:`start`,endDateField:`end`,progressField:`progress`,moveable:!0,resizable:!0,hoverBarStyle:{barOverlayColor:`rgba(99, 144, 0, 0.4)`},labelText:`{title} {progress}%`,labelTextStyle:{fontSize:16,textAlign:`left`,textOverflow:`ellipsis`},barStyle:{width:20,barColor:`#ee8800`,completedBarColor:`#91e8e0`,cornerRadius:8,borderLineWidth:1,borderColor:`black`},milestoneStyle:{borderColor:`red`,borderLineWidth:1,fillColor:`green`,width:15}},timelineHeader:{backgroundColor:`#EEF1F5`,colWidth:60,horizontalLine:{lineWidth:1,lineColor:`#e1e4e8`},verticalLine:{lineWidth:1,lineColor:`#e1e4e8`},scales:[{unit:`week`,step:1,startOfWeek:`sunday`,format:e=>`Week ${e.dateIndex}`,style:{fontSize:20,fontWeight:`bold`,color:`white`,strokeColor:`black`,textAlign:`right`,textBaseline:`bottom`,textStick:!0}},{unit:`day`,step:1,format:e=>e.dateIndex.toString(),style:{fontSize:20,fontWeight:`bold`,color:`white`,strokeColor:`black`,textAlign:`right`,textBaseline:`bottom`}}]},markLine:[{date:`2024-07-28`,style:{lineWidth:1,lineColor:`blue`,lineDash:[8,4]}},{date:`2024-08-17`,style:{lineWidth:2,lineColor:`red`,lineDash:[8,4]}}],rowSeriesNumber:{title:`行号`,dragOrder:!0,headerStyle:{borderColor:`rgba(128, 128, 128, 0.2)`},style:{borderColor:`rgba(128, 128, 128, 0.2)`}},scrollStyle:{scrollRailColor:`rgba(246,246,246,0.5)`,visible:`scrolling`,width:6,scrollSliderCornerRadius:2,scrollSliderColor:`#1890ff`}}},x=new Set([`__proto__`,`prototype`,`constructor`]),S=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null};function ie(e,t){let n=new WeakMap,r=(e,t)=>{let i=n.get(t);if(i)return i;let a={...e};n.set(t,a);for(let[n,i]of Object.entries(t))x.has(n)||(a[n]=S(i)?r(S(e[n])?e[n]:{},i):i);return a};return r(e,t)}function ae(e,t,n){e.on(`click_task_bar`,e=>{e.record&&t(e.record,e.event)}),e.on(`change_date_range`,e=>{if(e.record){let t={start:e.startDate,end:e.endDate};n({...e.record,...t},t)}}),e.on(`progress_update`,e=>{if(e.record){let t={progress:e.progress};n({...e.record,...t},t)}});let r=e.taskListTableInstance;r&&(r.on(`click_cell`,e=>{let n=r.getCellOriginRecord(e.col,e.row);n&&typeof n==`object`&&`id`in n&&t(n,e.event)}),r.on(`change_cell_value`,e=>{let t=r.getCellOriginRecord(e.col,e.row),i=r.getHeaderField(e.col,e.row);t&&typeof i==`string`&&n({...t,[i]:e.changedValue},{[i]:e.changedValue})}))}const C={class:`c-vtable-gantt-wrapper`},w={key:0,class:`gantt-toolbar`},T={class:`toolbar-left`},E={class:`gantt-title`},D={class:`toolbar-right`},O={class:`gantt-body`};var k=t(l({name:`C_VtableGantt`,__name:`index`,props:{data:{default:()=>[]},options:{default:()=>({})},preset:{default:`basic`},height:{default:`600px`},title:{default:``},showToolbar:{type:Boolean,default:!0},showFullscreenButton:{type:Boolean,default:!0},theme:{default:`light`}},emits:[`ganttCreated`,`taskClick`,`taskChange`,`error`],setup(t,{expose:l,emit:y}){let x=t,S=y,k=d(),A=f(),j=d(!1),M=d(!1),N=f(),P=0,F,I,L=!1,R=n(()=>typeof x.height==`number`?`${x.height}px`:x.height),z=(e,t)=>!L&&e===P&&k.value===t,B=e=>e.map(e=>({...e,title:e.title||`任务${e.id}`,children:e.children?B(e.children):void 0})),V=e=>({underlayBackgroundColor:e?`#1e1e1e`:`#ffffff`,timelineHeaderBg:e?`#2d2d2d`:`#EEF1F5`,gridBg:e?`#1e1e1e`:`#ffffff`,lineColor:e?`rgba(255, 255, 255, 0.1)`:`rgba(128, 128, 128, 0.2)`,textColor:e?`#ffffff`:`#000000`}),H=(e,t)=>({...e,backgroundColor:t.timelineHeaderBg,horizontalLine:{...e?.horizontalLine,lineColor:t.lineColor},verticalLine:{...e?.verticalLine,lineColor:t.lineColor},scales:e?.scales?.map(e=>({...e,style:{...e.style,color:t.textColor}}))}),U=(e,t)=>({...e,backgroundColor:t.gridBg,horizontalLine:{...e?.horizontalLine,lineColor:t.lineColor},verticalLine:{...e?.verticalLine,lineColor:t.lineColor}}),W=(e,t,n,r)=>({...e,records:t,underlayBackgroundColor:r.underlayBackgroundColor,taskListTable:{...e.taskListTable,theme:n.extends(e.taskListTable?.theme??{})},timelineHeader:H(e.timelineHeader,r),grid:U(e.grid,r)}),G=e=>{let t=x.theme===`dark`;return W(ie(b[x.preset]||b.basic,x.options),B(x.data),t?e.DARK:e.DEFAULT,V(t))},K=e=>{if(e)try{e.release()}catch(e){console.warn(`销毁甘特图失败:`,e)}},q=(e,t,n)=>{e.editor(t)||e.editor(t,n())},J=async()=>{clearTimeout(F),F=void 0;let e=k.value;if(!e||L)return;let t=++P;M.value=!0,N.value=void 0;let n;try{let[{Gantt:r},{themes:i,register:a},{InputEditor:o,DateInputEditor:s}]=await Promise.all([import(`@visactor/vtable-gantt`),import(`@visactor/vtable`),import(`@visactor/vtable-editors`)]);if(!z(t,e))return;q(a,`input`,()=>new o),q(a,`date-input`,()=>new s);let c=G(i);$();let l=new r(e,c);if(n=l,!z(t,e)){l.release();return}ae(l,(e,t)=>S(`taskClick`,e,t),(e,t)=>S(`taskChange`,e,t)),A.value=l,n=void 0,S(`ganttCreated`,l)}catch(r){if(K(n),!z(t,e))return;N.value=r instanceof Error?r:Error(String(r)),S(`error`,N.value)}finally{z(t,e)&&(M.value=!1)}},Y=()=>{I&&clearTimeout(I),I=setTimeout(()=>{I=void 0,L||A.value?.resize?.()},100)},X=async()=>{let e=k.value;if(e)try{document.fullscreenElement===e?await document.exitFullscreen():await e.requestFullscreen(),j.value=document.fullscreenElement===e,Y()}catch(t){console.warn(`全屏切换失败:`,t),j.value=document.fullscreenElement===e}},Z=()=>{j.value=document.fullscreenElement===k.value,Y()},Q=e=>{if(A.value&&e)try{A.value.setRecords(B(e))}catch(e){console.warn(`更新数据失败:`,e)}},oe=e=>{if(A.value&&e)try{A.value.updateOption(e)}catch(e){console.warn(`更新配置失败:`,e)}},$=()=>{let e=A.value;A.value=void 0,K(e)};return h(()=>x.data,e=>{e&&A.value&&Q(e)},{deep:!0}),h(()=>[x.options,x.preset,x.theme],()=>void J(),{deep:!0,flush:`post`}),ne(()=>{L=!1,document.addEventListener(`fullscreenchange`,Z),ee(()=>{L||P>0||(F=setTimeout(()=>J(),100))})}),re(()=>{L=!0,M.value=!1,P+=1,F&&clearTimeout(F),I&&clearTimeout(I),document.removeEventListener(`fullscreenchange`,Z),$()}),l({ganttInstance:A,loading:M,error:N,reload:J,updateData:Q,updateOptions:oe,toggleFullscreen:X}),(n,l)=>(u(),a(`div`,C,[t.showToolbar?(u(),a(`div`,w,[o(`div`,T,[o(`span`,E,p(t.title||`甘特图`),1)]),o(`div`,D,[t.showFullscreenButton?(u(),r(m(_),{key:0,size:`small`,onClick:X},{icon:g(()=>[c(e,{name:j.value?`carbon:minimize`:`carbon:maximize`,size:16,color:`currentColor`},null,8,[`name`])]),default:g(()=>[s(` `+p(j.value?`退出全屏`:`全屏`),1)]),_:1})):i(`v-if`,!0)])])):i(`v-if`,!0),o(`div`,O,[o(`div`,{ref_key:`ganttContainerRef`,ref:k,class:`gantt-container`,style:te({height:R.value})},null,4),N.value?(u(),r(m(v),{key:0,class:`gantt-error`,status:`error`,title:`甘特图加载失败`,description:N.value.message},{footer:g(()=>[c(m(_),{loading:M.value,onClick:J},{default:g(()=>[...l[0]||=[s(`重试`,-1)]]),_:1},8,[`loading`])]),_:1},8,[`description`])):i(`v-if`,!0)])]))}}),[[`__scopeId`,`data-v-dbfd25e4`]]);export{b as n,k as t};

package/dist/C_WaterFall.css

@@ -1,19 +1,19 @@
 :root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
 
-.c-waterfall[data-v-8bf18c79] {
+.c-waterfall[data-v-4df42989] {
   width: 100%;
 }
-.waterfall__body[data-v-8bf18c79] {
+.waterfall__body[data-v-4df42989] {
   overflow: hidden;
 }
-.waterfall__item[data-v-8bf18c79] {
+.waterfall__item[data-v-4df42989] {
   cursor: pointer;
 }
-.waterfall__item[data-v-8bf18c79]:focus-visible {
+.waterfall__item[data-v-4df42989]:focus-visible {
   outline: 2px solid var(--primary-color, #2080f0);
   outline-offset: 2px;
 }
-.waterfall__card[data-v-8bf18c79] {
+.waterfall__card[data-v-4df42989] {
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--border-color);
@@ -21,36 +21,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-8bf18c79]:hover {
+.waterfall__card[data-v-4df42989]:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
 }
-.waterfall__image[data-v-8bf18c79] {
+.waterfall__image[data-v-4df42989] {
   display: block;
   width: 100%;
   object-fit: cover;
   background: var(--body-color);
 }
-.waterfall__title[data-v-8bf18c79] {
+.waterfall__title[data-v-4df42989] {
   padding: 10px 12px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-color-1);
   word-break: break-all;
 }
-.waterfall__skeleton[data-v-8bf18c79] {
+.waterfall__skeleton[data-v-4df42989] {
   overflow: hidden;
   border-radius: 8px;
 }
-.waterfall__skeleton-inner[data-v-8bf18c79] {
+.waterfall__skeleton-inner[data-v-4df42989] {
   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-8bf18c79 1.4s ease infinite;
+  animation: shimmer-4df42989 1.4s ease infinite;
 }
-@keyframes shimmer-8bf18c79 {
+@keyframes shimmer-4df42989 {
 0% {
     background-position: 100% 50%;
 }
@@ -58,35 +58,35 @@
     background-position: 0 50%;
 }
 }
-.waterfall__footer[data-v-8bf18c79] {
+.waterfall__footer[data-v-4df42989] {
   padding: 24px 0;
   text-align: center;
 }
-.waterfall__sentinel[data-v-8bf18c79] {
+.waterfall__sentinel[data-v-4df42989] {
   height: 1px;
 }
-.waterfall__status[data-v-8bf18c79] {
+.waterfall__status[data-v-4df42989] {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 13px;
   color: var(--text-color-3);
 }
-.waterfall__status--done[data-v-8bf18c79] {
+.waterfall__status--done[data-v-4df42989] {
   color: var(--text-color-4);
 }
 
 /* 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);}
+.absolute[data-v-4df42989]{position:absolute;}
+.relative[data-v-4df42989]{position:relative;}
+.ms[data-v-4df42989]{margin-inline-start:1rem;}
+.block[data-v-4df42989]{display:block;}
+.hidden[data-v-4df42989]{display:none;}
+.inline-flex[data-v-4df42989]{display:inline-flex;}
+.transform[data-v-4df42989]{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-4df42989]{word-break:break-all;}
+.border[data-v-4df42989]{border-width:1px;}
+.px[data-v-4df42989]{padding-left:1rem;padding-right:1rem;}
+.outline[data-v-4df42989]{outline-style:solid;}
+.transition[data-v-4df42989]{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-4df42989]{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-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}});
+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,a={}){let o=(0,t.ref)([]),s=(0,t.ref)(0),c=new Map,l=new Map,u=(0,t.computed)(()=>new Map(e.value.map(e=>[e.id,e.src]))),d,f=!1,p=()=>{d!==void 0&&cancelAnimationFrame(d),d=void 0};(0,t.getCurrentScope)()&&(0,t.onScopeDispose)(()=>{f=!0,p(),l.clear(),c.clear()});let m=()=>{if(!f){if(!a.batchImageLoads||typeof requestAnimationFrame>`u`){C();return}d===void 0&&(d=requestAnimationFrame(()=>{d=void 0,C()}))}};function h(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function g(e,t){let n=l.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?h(r.height,r.basisWidth,t):h(e.height,e.width,t)}function _(){o.value=[],s.value=0,e.value.length===0&&(l.clear(),c.clear())}function v(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function y(e,t,n,r){if(f||r!==void 0&&u.value.get(e)!==r||!b(t,n))return;let i=l.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(l.set(e,{height:t,basisWidth:n,src:r}),m())}function b(e,t){return Number.isFinite(e)&&e>0&&(t===void 0||Number.isFinite(t)&&t>0)}function x(e,t){f||!u.value.has(e)||!Number.isFinite(t)||Math.abs((c.get(e)??0)-t)<.5||(c.set(e,t),m())}function S(e){for(let t of[l,c])for(let n of t.keys())e.has(n)||t.delete(n)}function C(){if(p(),f)return;let t=Math.min(24,Math.max(1,Math.floor(n.value))),a=r.value,l=Math.max(0,i.value??16);if(!v(t,a,l)){_();return}let u=(a-(t-1)*l)/t;if(u<=0){_();return}let d=Array.from({length:t},(e,t)=>({index:t,height:0})),m=[],h=new Set;for(let t of e.value){h.add(t.id);let e=d.reduce((e,t)=>t.height<e.height?t:e),n=g(t,u),r=e.index*(u+l),i=e.height;m.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+(c.get(t.id)??0)+l}S(h),o.value=m,s.value=Math.max(...d.map(e=>e.height))-l}return(0,t.watch)([e,()=>e.value.length,n,r,i],C,{immediate:!0}),{layoutItems:(0,t.readonly)(o),containerHeight:(0,t.readonly)(s),cacheImageHeight:y,cacheItemExtraHeight:x,relayout:C}}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,cacheItemExtraHeight:T,relayout:E}=o((0,t.computed)(()=>g.items),b,x,(0,t.computed)(()=>g.gap),{batchImageLoads:!0}),D=new Map,O=new Map,k=(0,t.computed)(()=>new Map(S.value.map(e=>[e.item.id,e]))),A=typeof ResizeObserver>`u`?null:new ResizeObserver(e=>{for(let t of e){let e=D.get(t.target),n=e===void 0?void 0:k.value.get(e);n&&T(n.item.id,t.target.getBoundingClientRect().height-n.height)}});function j(e,t){let n=O.get(t);n!==e&&(n&&(A?.unobserve(n),D.delete(n),O.delete(t)),e instanceof HTMLElement&&(O.set(t,e),D.set(e,t),A?.observe(e)))}(0,t.onUnmounted)(()=>{A?.disconnect(),D.clear(),O.clear()});let M=(0,t.computed)(()=>g.skeleton&&g.loading&&S.value.length===0),N=(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}),P=(0,t.computed)(()=>N.value.length===0?0:Math.max(...N.value.map(e=>e.y+e.height))),F=(0,t.computed)(()=>M.value?P.value:C.value),{status:I}=s(y,(0,t.computed)(()=>g.infinite),(0,t.computed)(()=>g.loading),(0,t.computed)(()=>g.noMore),()=>_(`load-more`));function L(e,t){let n=t.target;if(n.getAttribute(`src`)===e.item.src){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 R(e){_(`image-error`,e.item)}function z(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return r({relayout:E,scrollToTop:z,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:`${F.value}px`,position:`relative`})},[M.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(N.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,ref_for:!0,ref:e=>j(e,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=>L(n,e),onError:e=>R(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)(I)},()=>[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-4df42989`]]);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-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};
+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,getCurrentScope as c,normalizeStyle as l,onBeforeUnmount as u,onMounted as d,onScopeDispose as f,onUnmounted as p,openBlock as m,readonly as h,ref as g,renderList as _,renderSlot as v,toDisplayString as y,unref as b,watch as x,withKeys as S,withModifiers as C}from"vue";import{NSpin as w}from"naive-ui";const T=16,E=300,D=8,O=200,k=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],A=[180,360];function j(e,t,n){let r=g(4),i=g(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:k].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 d(s),u(c),x(e,()=>{c(),s()}),x([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:h(r),containerWidth:h(i)}}function M(e,t,r,i,a={}){let o=g([]),s=g(0),l=new Map,u=new Map,d=n(()=>new Map(e.value.map(e=>[e.id,e.src]))),p,m=!1,_=()=>{p!==void 0&&cancelAnimationFrame(p),p=void 0};c()&&f(()=>{m=!0,_(),u.clear(),l.clear()});let v=()=>{if(!m){if(!a.batchImageLoads||typeof requestAnimationFrame>`u`){O();return}p===void 0&&(p=requestAnimationFrame(()=>{p=void 0,O()}))}};function y(e,t,n){let r=e/t;return Number.isFinite(r)&&r>0?r*n:n}function b(e,t){let n=u.get(e.id),r=n?.src&&n.src!==e.src?void 0:n;return r&&!r.basisWidth?r.height:r?.basisWidth?y(r.height,r.basisWidth,t):y(e.height,e.width,t)}function S(){o.value=[],s.value=0,e.value.length===0&&(u.clear(),l.clear())}function C(t,n,r){return Number.isFinite(t)&&Number.isFinite(n)&&Number.isFinite(r)&&n>0&&e.value.length>0}function w(e,t,n,r){if(m||r!==void 0&&d.value.get(e)!==r||!T(t,n))return;let i=u.get(e);i?.height===t&&i.basisWidth===n&&i.src===r||(u.set(e,{height:t,basisWidth:n,src:r}),v())}function T(e,t){return Number.isFinite(e)&&e>0&&(t===void 0||Number.isFinite(t)&&t>0)}function E(e,t){m||!d.value.has(e)||!Number.isFinite(t)||Math.abs((l.get(e)??0)-t)<.5||(l.set(e,t),v())}function D(e){for(let t of[u,l])for(let n of t.keys())e.has(n)||t.delete(n)}function O(){if(_(),m)return;let n=Math.min(24,Math.max(1,Math.floor(t.value))),a=r.value,c=Math.max(0,i.value??16);if(!C(n,a,c)){S();return}let u=(a-(n-1)*c)/n;if(u<=0){S();return}let d=Array.from({length:n},(e,t)=>({index:t,height:0})),f=[],p=new Set;for(let t of e.value){p.add(t.id);let e=d.reduce((e,t)=>t.height<e.height?t:e),n=b(t,u),r=e.index*(u+c),i=e.height;f.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+(l.get(t.id)??0)+c}D(p),o.value=f,s.value=Math.max(...d.map(e=>e.height))-c}return x([e,()=>e.value.length,t,r,i],O,{immediate:!0}),{layoutItems:h(o),containerHeight:h(s),cacheImageHeight:w,cacheItemExtraHeight:E,relayout:O}}function N(e,t,n,r,i){let a=g(`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 l(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(c,{rootMargin:`200px 0px`}),o.observe(n))}function f(){o?.disconnect(),o=null,s=!1}return x([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:(a.value=`idle`,s=!1)}),d(l),u(f),x([e,t],()=>{f(),l()}),{status:h(a)}}const P=[`aria-label`,`onClick`,`onKeydown`],F={class:`waterfall__card`},I=[`src`,`alt`,`loading`,`onLoad`,`onError`],L={key:0,class:`waterfall__title`},R={key:0,class:`waterfall__footer`},z={key:0,class:`waterfall__status`},B={key:1,class:`waterfall__status waterfall__status--done`};var V=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:c}){let u=e,d=c,f=g(),h=g(),{columns:x,containerWidth:T}=j(f,n(()=>u.columns),n(()=>u.breakpoints)),{layoutItems:E,containerHeight:D,cacheImageHeight:O,cacheItemExtraHeight:k,relayout:V}=M(n(()=>u.items),x,T,n(()=>u.gap),{batchImageLoads:!0}),H=new Map,U=new Map,W=n(()=>new Map(E.value.map(e=>[e.item.id,e]))),G=typeof ResizeObserver>`u`?null:new ResizeObserver(e=>{for(let t of e){let e=H.get(t.target),n=e===void 0?void 0:W.value.get(e);n&&k(n.item.id,t.target.getBoundingClientRect().height-n.height)}});function K(e,t){let n=U.get(t);n!==e&&(n&&(G?.unobserve(n),H.delete(n),U.delete(t)),e instanceof HTMLElement&&(U.set(t,e),H.set(e,t),G?.observe(e)))}p(()=>{G?.disconnect(),H.clear(),U.clear()});let q=n(()=>u.skeleton&&u.loading&&E.value.length===0),J=n(()=>{let e=Math.min(24,Math.max(1,Math.floor(x.value))),t=T.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=A[0]+e*73%(A[1]-A[0]);o.push({x:t*(r+n),y:a[t],width:r,height:i}),a[t]+=i+n}return o}),Y=n(()=>J.value.length===0?0:Math.max(...J.value.map(e=>e.y+e.height))),X=n(()=>q.value?Y.value:D.value),{status:Z}=N(h,n(()=>u.infinite),n(()=>u.loading),n(()=>u.noMore),()=>d(`load-more`));function Q(e,t){let n=t.target;if(n.getAttribute(`src`)===e.item.src){if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;O(e.item.id,t,e.width,e.item.src)}d(`image-loaded`,e.item)}}function $(e){d(`image-error`,e.item)}function ee(){f.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return s({relayout:V,scrollToTop:ee,getColumns:()=>x.value,getContainerHeight:()=>D.value}),(e,n)=>(m(),i(`div`,{ref_key:`containerRef`,ref:f,class:`c-waterfall`},[a(`div`,{class:`waterfall__body`,style:l({height:`${X.value}px`,position:`relative`})},[q.value?(m(!0),i(t,{key:0},_(J.value,(t,r)=>(m(),i(`div`,{key:`sk-${r}`,class:`waterfall__skeleton`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${u.animationDuration??b(300)}ms ease`})},[v(e.$slots,`skeleton`,{},()=>[n[0]||=a(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):r(`v-if`,!0),(m(!0),i(t,null,_(b(E),(t,n)=>(m(),i(`div`,{key:t.item.id,ref_for:!0,ref:e=>K(e,t.item.id),class:`waterfall__item`,role:`button`,tabindex:`0`,"aria-label":t.item.title||`瀑布流项目 ${n+1}`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${u.animationDuration??b(300)}ms ease`}),onClick:e=>d(`item-click`,t.item,n),onKeydown:[S(e=>d(`item-click`,t.item,n),[`enter`]),S(C(e=>d(`item-click`,t.item,n),[`prevent`]),[`space`])]},[v(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[a(`div`,F,[a(`img`,{src:t.item.src,alt:t.item.title||``,loading:u.lazy?`lazy`:`eager`,class:`waterfall__image`,style:l({height:`${t.height}px`}),onLoad:e=>Q(t,e),onError:e=>$(t)},null,44,I),t.item.title?(m(),i(`div`,L,y(t.item.title),1)):r(`v-if`,!0)])],!0)],44,P))),128))],4),u.infinite?(m(),i(`div`,R,[a(`div`,{ref_key:`sentinelRef`,ref:h,class:`waterfall__sentinel`},null,512),v(e.$slots,`footer`,{status:b(Z)},()=>[u.loading?(m(),i(`div`,z,[o(b(w),{size:`small`}),n[1]||=a(`span`,null,`加载中…`,-1)])):u.noMore?(m(),i(`div`,B,` 没有更多了 `)):r(`v-if`,!0)],!0)])):r(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-4df42989`]]);export{E as a,D as c,j as i,O as l,N as n,k as o,M as r,T as s,V as t,A as u};