1import{o as e,M as t,bg as i,af as l,bh as a,m as n,l as o,y as s,b7 as r,aW as c,d as u,b as d,c as m,h as p,n as v,e as h,F as f,r as g,ab as y,K as b,ag as x,ao as w,B as k,q as _,f as S,Q as z,g as C,t as L,w as P,C as R,_ as H}from"./DQ8Q0yk1.js";import{B as $}from"./C99-hGBY.js";import{B as T,C as B}from"./B2WA-K2k.js";import{H as A}from"./Bkfz0aKP.js";import{t as I,r as W}from"./P7QG2sPm.js";const j="undefined"!=typeof window&&"undefined"!=typeof document;function F(i,l=!0,n){a()?e(i,n):l?i():t(i)}"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const V=j?window:void 0;function M(e){var t;const i=r(e);return null!==(t=null==i?void 0:i.$el)&&void 0!==t?t:i}function K(t){const i=function(){const t=c(!1),i=a();return i&&e(()=>{t.value=!0},i),t}();return n(()=>(i.value,Boolean(t())))}function O(e,t,a={}){const{window:o=V,...c}=a;let u;const d=K(()=>o&&"ResizeObserver"in o),m=()=>{u&&(u.disconnect(),u=void 0)},p=s(n(()=>{const t=r(e);return Array.isArray(t)?t.map(e=>M(e)):[M(t)]}),e=>{if(m(),d.value&&o){u=new ResizeObserver(t);for(const t of e)t&&u.observe(t,c)}},{immediate:!0,flush:"post"}),v=()=>{m(),p()};var h,f;return h=v,i()&&l(h,f),{isSupported:d,stop:v}}function q(e,t={width:0,height:0},i={}){const{window:l=V,box:a="content-box"}=i,o=n(()=>{var t;return null===(t=M(e))||void 0===t||null===(t=t.namespaceURI)||void 0===t?void 0:t.includes("svg")}),r=c(t.width),u=c(t.height),{stop:d}=O(e,([t])=>{const i="border-box"===a?t.borderBoxSize:"content-box"===a?t.contentBoxSize:t.devicePixelContentBoxSize;if(l&&o.value){const t=M(e);if(t){const e=t.getBoundingClientRect();r.value=e.width,u.value=e.height}}else if(i){const e=(n=i,Array.isArray(n)?n:[n]);r.value=e.reduce((e,{inlineSize:t})=>e+t,0),u.value=e.reduce((e,{blockSize:t})=>e+t,0)}else r.value=t.contentRect.width,u.value=t.contentRect.height;var n},i);F(()=>{const i=M(e);i&&(r.value="offsetWidth"in i?i.offsetWidth:t.width,u.value="offsetHeight"in i?i.offsetHeight:t.height)});const m=s(()=>M(e),e=>{r.value=e?t.width:0,u.value=e?t.height:0});return{width:r,height:u,stop:function(){d(),m()}}}function G(e,t){const{containerStyle:i,wrapperProps:l,scrollTo:a,calculateRange:o,currentList:s,containerRef:r}="itemHeight"in t?function(e,t){const i=N(t),{state:l,source:a,currentList:o,size:s,containerRef:r}=i,c={overflowY:"auto"},{itemHeight:u,overscan:d=5}=e,m=U(l,a,u),p=Q("vertical",d,D(a,u),m,i),v=X(u,a),h=n(()=>v(l.value.start)),f=E(u,a);return Y(s,t,r,p),{calculateRange:p,scrollTo:Z("vertical",p,v,r),containerStyle:c,wrapperProps:n(()=>({style:{width:"100%",height:f.value-h.value+"px",marginTop:`${h.value}px`}})),currentList:o,containerRef:r}}(t,e):function(e,t){const i=N(t),{state:l,source:a,currentList:o,size:s,containerRef:r}=i,c={overflowX:"auto"},{itemWidth:u,overscan:d=5}=e,m=U(l,a,u),p=Q("horizontal",d,D(a,u),m,i),v=X(u,a),h=n(()=>v(l.value.start)),f=E(u,a);return Y(s,t,r,p),{scrollTo:Z("horizontal",p,v,r),calculateRange:p,wrapperProps:n(()=>({style:{height:"100%",width:f.value-h.value+"px",marginLeft:`${h.value}px`,display:"flex"}})),containerStyle:c,currentList:o,containerRef:r}}(t,e);return{list:s,scrollTo:a,containerProps:{ref:r,onScroll:()=>{o()},style:i},wrapperProps:l}}function N(e){const t=c(null),i=q(t),l=o([]),a=c(e);return{state:o({start:0,end:10}),source:a,currentList:l,size:i,containerRef:t}}function U(e,t,i){return l=>{if("number"==typeof i)return Math.ceil(l/i);const{start:a=0}=e.value;let n=0,o=0;for(let e=a;e<t.value.length;e++){if(n+=i(e),o=e,n>l)break}return o-a}}function D(e,t){return i=>{if("number"==typeof t)return Math.floor(i/t)+1;let l=0,a=0;for(let n=0;n<e.value.length;n++){if(l+=t(n),l>=i){a=n;break}}return a+1}}function Q(e,t,i,l,{containerRef:a,state:n,currentList:o,source:s}){return()=>{const r=a.value;if(r){const a=i("vertical"===e?r.scrollTop:r.scrollLeft),c=l("vertical"===e?r.clientHeight:r.clientWidth),u=a-t,d=a+c+t;n.value={start:u<0?0:u,end:d>s.value.length?s.value.length:d},o.value=s.value.slice(n.value.start,n.value.end).map((e,t)=>({data:e,index:t+n.value.start}))}}}function X(e,t){return i=>"number"==typeof e?i*e:t.value.slice(0,i).reduce((t,i,l)=>t+e(l),0)}function Y(e,t,i,l){s([e.width,e.height,()=>r(t),i],()=>{l()})}function E(e,t){return n(()=>"number"==typeof e?t.value.length*e:t.value.reduce((t,i,l)=>t+e(l),0))}const J={horizontal:"scrollLeft",vertical:"scrollTop"};function Z(e,t,i,l){return a=>{l.value&&(l.value[J[e]]=i(a),t())}}const ee=["aria-label"],te=["onClick"],ie=u({__name:"VirtualList",props:{items:{},height:{},itemHeight:{},gap:{default:0},overscan:{default:5},itemComponent:{default:void 0},resolveItemComponent:{type:Function,default:void 0},itemProps:{type:Function,default:void 0},keyField:{type:Function,default:"id"},ariaLabel:{default:""}},emits:["itemClick"],setup(e,{expose:t,emit:i}){const l=e,a=i,o=n(()=>l.items),{list:s,containerProps:r,wrapperProps:c,scrollTo:u}=G(o,{itemHeight:e=>S(e)+l.gap,overscan:l.overscan}),_=n(()=>[r.style,{height:I(l.height)}]);function S(e){return"function"==typeof l.itemHeight?l.itemHeight(e):l.itemHeight}function z(e,t){return W(e,t,l.keyField)}function C(e,t){return l.resolveItemComponent?.(e,t)??l.itemComponent}function L(e,t){return l.itemProps?l.itemProps(e,t):e&&"object"==typeof e?e:{data:e,index:t}}return t({scrollTo:u}),(t,i)=>(d(),m("div",{ref:p(r).ref,class:"virtual-list",style:v(_.value),"aria-label":e.ariaLabel||void 0,tabindex:"0",onScroll:i[0]||(i[0]=(...e)=>p(r).onScroll&&p(r).onScroll(...e))},[h("div",{class:"virtual-list__spacer",style:v(p(c).style)},[(d(!0),m(f,null,g(p(s),e=>{return d(),m("div",{key:z(e.data,e.index),class:"virtual-list__item",style:v((i=e.index,{height:`${S(i)}px`,marginBottom:`${l.gap}
1px`})),onClick:t=>a("itemClick",e.data,e.index)},[y(t.$slots,"item",{item:e.data,index:e.index,itemKey:z(e.data,e.index)},()=>[C(e.data,e.index)?(d(),b(w(C(e.data,e.index)),x({key:0,ref_for:!0},L(e.data,e.index)),null,16)):k("",!0)],!0)],12,te);var i}),128))],4)],44,ee))}}),le=Object.assign(_(ie,[["__scopeId","data-v-404cfb09"]]),{__name:"ListVirtualList"}),ae={class:"list-demo"},ne={class:"demo-section","aria-labelledby":"static-list-title"},oe={class:"demo-section__heading"},se={class:"demo-section","aria-labelledby":"paginated-list-title"},re={class:"demo-section__heading"},ce={class:"demo-page-item"},ue={class:"demo-status"},de={class:"demo-section","aria-labelledby":"virtual-list-title"},me={class:"demo-virtual-row"},pe={class:"demo-section","aria-labelledby":"horizontal-list-title"},ve={class:"demo-horizontal-controls"},he=_(u({__name:"list-demo",setup(e){const t=Array.from({length:6},(e,t)=>({id:`item-${t+1}`,title:`Item ${t+1}`,meta:t%2==0?"Primary group":"Secondary group"})),i=Array.from({length:16},(e,t)=>({id:`P${String(t+1).padStart(2,"0")}`,title:`Page row ${t+1}`,meta:`Source position ${t+1}`})),l=Array.from({length:1e4},(e,t)=>({id:`virtual-${t+1}`,title:`Virtual row ${t+1}`,value:`Value ${String(17*(t+1)).padStart(6,"0")}`})),a=Array.from({length:14},(e,t)=>({id:`H${String(t+1).padStart(2,"0")}`,title:`Horizontal ${t+1}`,meta:`Position ${t+1}`})),n=o(!1),s=o(t[0].id),r=o(a[0].id),c=o(0);async function u(e,t,l){await new Promise(e=>setTimeout(e,250));const a=i.slice(l,l+t);return{items:a,loadedCount:a.length,hasMore:l+a.length<i.length}}function v(){c.value+=1}return(e,i)=>{const o=H;return d(),m("main",ae,[i[16]||(i[16]=h("header",{class:"list-demo__header"},[h("p",null,"List Demo"),h("h1",null,"List types and parameters")],-1)),h("section",ne,[h("div",oe,[i[2]||(i[2]=h("div",null,[h("span",null,"Complete data"),h("h2",{id:"static-list-title"},"BaseList")],-1)),S($,{variant:"secondary",size:"small",onClick:i[0]||(i[0]=e=>n.value=!p(n))},{default:z(()=>[C(L(p(n)?"Show items":"Show skeleton"),1)]),_:1})]),i[4]||(i[4]=h("code",null,'items · columns="3" · gap="12" · #item · #skeleton',-1)),S(T,{items:p(n)?[]:p(t),loading:p(n),columns:3,gap:12,"skeleton-count":6,"aria-label":"Static list example"},{item:z(({item:e,index:t})=>[S($,{variant:"ghost",class:R(["demo-static-item",{"demo-static-item--selected":p(s)===e.id}]),onClick:P(t=>s.value=e.id,["stop"])},{default:z(()=>[h("span",null,L(String(t+1).padStart(2,"0")),1),h("strong",null,L(e.title),
11),h("small",null,L(e.meta),1)]),_:2},1032,["class","onClick"])]),skeleton:z(()=>[...i[3]||(i[3]=[h("div",{class:"demo-skeleton"},[h("span"),h("span")],-1)])]),_:1},8,["items","loading"])]),h("section",se,[h("div",re,[i[6]||(i[6]=h("div",null,[h("span",null,"Request pages"),h("h2",{id:"paginated-list-title"},"Paginated list")],-1)),S($,{variant:"secondary",size:"small",onClick:v},{default:z(()=>[S(o,{name:"lucide:refresh-cw",size:"15","aria-hidden":"true"}),i[5]||(i[5]=C(" Reset ",-1))]),_:1})]),i[11]||(i[11]=h("code",null,'loadMore · pageSize="4" · resetKey · initialItems',-1)),S(B,{"load-more":u,"reset-key":p(c),"page-size":4,columns:2,gap:10,"skeleton-count":4,"root-margin":"100px 0px","aria-label":"Paginated list example"},{item:z(({item:e})=>[h("div",ce,[h("span",null,L(e.id),1),h("div",null,[h("strong",null,L(e.title),1),h("small",null,L(e.meta),1)])])]),skeleton:z(()=>[...i[7]||(i[7]=[h("div",{class:"demo-skeleton demo-skeleton--row"},[h("span"),h("span")],-1)])]),error:z(({retry:e})=>[h("div",ue,[i[9]||(i[9]=h("span",null,"Unable to load",-1)),S($,{size:"small",onClick:e},{default:z(()=>[...i[8]||(i[8]=[C("Retry",-1)])]),_:1},8,["onClick"])])]),end:z(()=>[...i[10]||(i[10]=[h("p",{class:"demo-status"},"All demo rows loaded",-1)])]),_:1},8,["reset-key"])]),h("section",de,[i[12]||(i[12]=h("div",{class:"demo-section__heading"},[h("div",null,[h("span",null,"Large data"),h("h2",{id:"virtual-list-title"},"VirtualList")]),h("strong",null,"10,000 rows")],-1)),i[13]||(i[13]=h("code",null,'height="360" · itemHeight="52" · gap="8" · overscan="6"',-1)),S(le,{items:p(l),height:360,"item-height":52,gap:8,overscan:6,"aria-label":"Virtual list example"},{item:z(({item:e,index:t})=>[h("div",me,[h("span",null,L(String(t+1).padStart(5,"0")),1),h("strong",null,L(e.title),
11),h("small",null,L(e.value),1)])]),_:1},8,["items"])]),h("section",pe,[i[14]||(i[14]=h("div",{class:"demo-section__heading"},[h("div",null,[h("span",null,"Horizontal rail"),h("h2",{id:"horizontal-list-title"},"HorizontalList")])],-1)),i[15]||(i[15]=h("code",null,'itemWidth="180" · gap="12" · #controls · #item',-1)),S(A,{items:p(a),"item-width":180,"item-height":132,gap:12,"selected-key":p(r),"aria-label":"Horizontal list example",onItemClick:i[1]||(i[1]=e=>r.value=e.id)},{controls:z(({previous:e,next:t,canScrollPrevious:i,canScrollNext:l})=>[h("div",ve,[h("span",null,L(p(r)),1),h("div",null,[S($,{variant:"outline",size:"small",shape:"pill",class:"demo-icon-button",disabled:!i,"aria-label":"Previous",onClick:e},{default:z(()=>[S(o,{name:"lucide:chevron-left",size:"17","aria-hidden":"true"})]),_:1},8,["disabled","onClick"]),S($,{variant:"outline",size:"small",shape:"pill",class:"demo-icon-button",disabled:!l,"aria-label":"Next",onClick:t},{default:z(()=>[S(o,{name:"lucide:chevron-right",size:"17","aria-hidden":"true"})]),_:1},8,["disabled","onClick"])])])]),item:z(({item:e,selected:t})=>[h("article",{class:R(["demo-horizontal-item",{"demo-horizontal-item--selected":t}])}
1,[h("span",null,L(e.id),1),h("strong",null,L(e.title),1),h("small",null,L(e.meta),1)],2)]),_:1},8,["items","selected-key"])])])}}}),[["__scopeId","data-v-bad324f2"]]);export{he as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.