vue3-pivot-data-table/dist/vue3-pivot-data-table.umd.js

A non-aggregating Vue3 table component for presenting pivot-like data

(function(e,H){typeof exports=="object"&&typeof module<"u"?module.exports=H(require("vue")):typeof define=="function"&&define.amd?define(["vue"],H):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-pivot-data-table"]=H(e.Vue))})(this,function(e){"use strict";const H={items:{type:Array,default:()=>[],required:!0,description:"Array of data objects, should be a flat array."},measures:{type:Array,default:()=>[],required:!0,description:"Array of Measure objects representing the metrics"},dimensions:{type:Array,default:()=>[],description:"Array of Dimension objects representing the row-dimensions"},pivot:{type:Object,default:null,description:"Single Pivot object representing the column-dimension. Limited to 1 for reduced complexity."},locale:{type:String,default:"en-US",description:"Locale setting for the table."},currentPage:{type:Number,default:1,description:"Current page number."},noRowsCustom:{type:Boolean,default:!1,description:"Indicates whether to use custom rows when no data is available."},emptyMessage:{type:String,default:"No Available Data",description:"Message to display when there is no available data."},filterOptions:{type:Array,default:null,description:"Array of filter options for the table."},hideFooter:{type:Boolean,default:!1,description:"Indicates whether to hide the table footer."},hideHeader:{type:Boolean,default:!1,description:"Indicates whether to hide the table header."},loading:{type:Boolean,default:!1,description:"Indicates whether the table is in a loading state."},rowsPerPage:{type:Number,default:25,description:"Number of rows per page."},searchField:{type:[String,Array],default:"",description:"Field or fields to search within."},rowsItems:{type:Array,default:()=>[25,50,100]},rowsOfPageSeparatorMessage:{type:String,default:"of"},searchValue:{type:String,default:"",description:"Value to search for within the specified field(s)."},showIndex:{type:Boolean,default:!1,description:"Indicates whether to display an index column."},showIndexSymbol:{type:String,default:"#",description:"Symbol used for the index column."},showIndexClass:{type:String,default:"",description:"Class used for the index column."},oddRowClass:{type:String,default:"odd-row",description:"CSS class applied to odd-numbered rows."},evenRowClass:{type:String,default:"even-row",description:"CSS class applied to even-numbered rows."},oddRowCellClass:{type:String,default:"odd-row-cell",description:"CSS class applied to cells in odd-numbered rows."},customTableRowClass:{type:Function,default:()=>null,description:"Custom function to apply classes to tablerows <tr>."},customTableDataClass:{type:Function,default:()=>null,description:"Custom function to apply classes to tablerows <td>."},evenRowCellClass:{type:String,default:"even-row-cell",description:"CSS class applied to cells in even-numbered rows."},sortBy:{type:String,default:"",description:"Field or fields to sort by."},sortType:{type:String,default:"asc",description:"Sort type or types (ascending or descending)."},sortPivotValue:{type:String,default:"",description:"Sort pivotValue when pivot is active"},tableClassName:{type:String,default:"",description:"CSS class applied to the table element."},innerTableClassName:{type:String,default:"",description:"CSS class applied to the inner table element."},headerClassName:{type:String,default:"",description:"CSS class applied to the table header element."},mustSort:{type:Boolean,default:!1,description:"Indicates whether sorting is required."},tableNodeId:{type:String,default:"",description:"ID attribute for the table element."},nullFillText:{type:String,default:"-",description:"Text to be shown if cellvalue is null"},splitDimensionHeaders:{type:Boolean,default:!1,description:"Forces spit of dimension headers into separate cells."}};function L(n,l){if(n.includes(".")){const c=n.split("."),{length:u}=c;let o,p=0;for(;p<u;){if(p===0)o=l[c[0]];else if(o&&typeof o=="object")o=o[c[p]];else{o="";break}p+=1}return o??""}return l[n]}function ee(n,l,c,u){return n==null?u:Array.isArray(n)?n.join(", "):(l.formatFunc?n=l.formatFunc(n):l.numberFormat&&(n=new Intl.NumberFormat(c,l.numberFormat).format(n)),l.prefix&&(n=l.prefix+n),l.suffix&&(n=n+l.suffix),n)}function te(n,l,c,u){const o=L(n.value,l);return ee(o,n,c,u)}function re(n,l,c,u,o){var V;let p;return n.pivotValue?p=(V=l.items.find(T=>T[c.value]===n.pivotValue))==null?void 0:V[n.value]:p=L(n.value,l.dimensions),ee(p,n,u,o)}function ue(n,l,c,u,o,p,V,T,g){const M=k=>{if(typeof V.value=="string"&&V.value!=="")return L(V.value,k);if(Array.isArray(V.value)){let s="";return V.value.forEach(m=>{s+=L(m,k)}),s}return Object.values(k).join(" ")},N=e.computed(()=>{if(o.value){const k=p.value.map(m=>m.value),s=u.value.reduce((m,S)=>{const w=k.map(b=>S[b]).join("|"),P=m.find(b=>b.key===w);if(P)P.items.push(S);else{const b=Object.fromEntries(Object.entries(S).filter(([d])=>k.includes(d)));m.push({key:w,dimensions:b,items:[S]})}return m},[]);if(T.value!==""){const m=new RegExp(T.value,"i");return s.filter(S=>m.test(S.key))}return s}if(T.value!==""){const k=new RegExp(T.value,"i");return u.value.filter(s=>k.test(M(s)))}return u.value}),I=e.computed(()=>{let k=[...N.value];return o.value?k:c.value?(c.value.forEach(s=>{k=k.filter(m=>{const{field:S,comparison:w,criteria:P}=s;if(typeof w=="function")return w(L(S,m),P);const b=L(S,m);if(b===null)return!1;switch(w){case"=":return b===P;case"!=":return b!==P;case">":return b>P;case"<":return b<P;case"<=":return b<=P;case">=":return b>=P;case"between":return b>=Math.min(...P)&&b<=Math.max(...P);case"in":return Array.isArray(P)?P.includes(b):!0;default:return b===P}})}),k):N.value});e.watch(I,k=>{c.value&&g("updateFilter",k)},{immediate:!0,deep:!0});const R=e.computed(()=>{var b;if(l.value===null)return I.value;const k=[...I.value],{sortBy:s,sortDesc:m,sortPivotValue:S}=l.value,w=(b=n.value.find(d=>d.value===s))==null?void 0:b.sortFunc;return k.sort((d,f)=>{var x,y,h,A;let a,r;return o.value?S?(a=w?w((x=d.items.find($=>$[o.value.value]===S))==null?void 0:x[s]):(y=d.items.find($=>$[o.value.value]===S))==null?void 0:y[s],r=w?w((h=f.items.find($=>$[o.value.value]===S))==null?void 0:h[s]):(A=f.items.find($=>$[o.value.value]===S))==null?void 0:A[s]):(a=w?w(d.dimensions[s]):d.dimensions[s],r=w?w(f.dimensions[s]):f.dimensions[s]):(a=w?w(L(s,d)):L(s,d),r=w?w(L(s,f)):L(s,f)),a==null&&r!=null?1:a!=null&&r==null?-1:a==null&&r==null?0:a<r?m?1:-1:a>r?m?-1:1:0})}),O=e.computed(()=>R.value.length);return{totalItems:R,totalItemsLength:O}}function de(n,l,c,u,o,p,V,T,g,M,N,I,R){const O=e.computed(()=>o.value?[...new Set(n.value.map(d=>d[o.value.value]))]:[]),k=(d,f,a)=>d&&d!==""?{sortBy:d,sortDesc:f==="desc",sortPivotValue:a}:null,s=e.ref(k(g.value,M.value,N.value));let m=[];const S=e.computed(()=>{if(o.value){const a=O.value.flatMap((r,x)=>{const y=u.value.map(h=>({...h,pivotValue:r}));return[{...y[0],colType:`firstEntry ${x%2===0?"evenPivot":"oddPivot"}`},...y.slice(1).map(h=>({...h,colType:`nonFirstEntry ${x%2===0?"evenPivot":"oddPivot"}`}))]});m=[...c.value.map(r=>({...r,type:"tableRow"})),...a.map(r=>({...r,type:"tableValue"}))]}else m=[...c.value.map(a=>({...a,type:"tableRow"})),...u.value.map(a=>({...a,type:"tableValue"}))];const d=m.map(a=>{const r=Object.assign(a);return r.sortable&&(r.sortType="none"),s.value&&r.value===s.value.sortBy&&s.value.sortPivotValue?s.value.sortPivotValue===r.pivotValue?r.sortType=s.value.sortDesc?"desc":"asc":r.sortType="none":s.value&&r.value===s.value.sortBy&&(r.sortType=s.value.sortDesc?"desc":"asc"),r});let f=[];return V.value?f=[{text:l.value,value:"index",cssClass:T.value},...d.map(r=>({...r,cssClass:[r.cssClass??"",r.colType].join(" ")}))]:f=d.map(a=>({...a,cssClass:[a.cssClass??"",a.colType].join(" ")})),f}),w=e.computed(()=>{const d=[];if(o.value){const f=S.value.reduce((a,r)=>{var A,$;const x=r.pivotValue;let y;r.pivotValue?o.value.formatFunc?y=o.value.formatFunc(r.pivotValue):y=r.pivotValue:y=null;const h=a[a.length-1];return h&&(r.type==="tableValue"||!I.value)&&(((A=h.parent)==null?void 0:A.text)!==null||(($=r.parent)==null?void 0:$.text)!==null)&&h.text===y&&!h.isIndex&&h.originalText===x?h.count++:a.push({type:"pivot",isIndex:r.value==="index",text:y,originalText:x,count:1,cssClass:r.cssClass??"",parent:r.parent}),a},[]);d.push(f)}if(S.value.findIndex(f=>f.parent)>-1){const f=S.value.reduce((a,r)=>{var A;const x=((A=r.parent)==null?void 0:A.text)||null,y=r.pivotValue,h=a[a.length-1];return h&&(r.type==="tableValue"||!I.value)&&(h.text!==null||x!==null)&&h.text===x&&!h.isIndex&&h.pivotValue===y?h.count++:a.push({type:"parent",isIndex:r.value==="index",pivotValue:y,text:x,count:1,cssClass:r.cssClass??""}),a},[]);d.push(f)}return d}),P=e.computed(()=>S.value.map(d=>d.value));return{clientSortOptions:s,headerColumns:P,headersForRenderParents:w,headersForRender:S,updateSortField:(d,f,a=!1,r=void 0,x=!1)=>{let y=null;a?y=f==="none"?null:f:f==="none"?y="asc":f==="asc"?y="desc":y=p.value?"asc":null,y===null?s.value=null:s.value={sortBy:d,sortDesc:y==="desc",sortPivotValue:r},x||R("updateSort",{sortPivotValue:r,sortType:y,sortBy:d})}}}function ce(n,l){const c=e.computed(()=>n.value.findIndex(p=>p===l.value)===-1?[l.value,...n.value]:n.value),u=e.ref(l.value);return{rowsItemsComputed:c,rowsPerPageRef:u,updateRowsPerPage:p=>{u.value=p}}}function pe(n,l,c,u){const o=e.ref(n.value),p=e.computed(()=>Math.ceil(c.value/u.value)),V=e.computed(()=>p.value===0||o.value===p.value),T=e.computed(()=>o.value===1);return{currentPaginationNumber:o,maxPaginationNumber:p,isLastPage:V,isFirstPage:T,nextPage:()=>{c.value!==0&&(V.value||l.value||(o.value+=1))},prevPage:()=>{c.value!==0&&(T.value||l.value||(o.value-=1))},updatePage:R=>{l.value||(o.value=R)},updateCurrentPaginationNumber:R=>{o.value=R}}}function fe(n,l,c,u,o){const p=e.computed(()=>(n.value-1)*l.value+1),V=e.computed(()=>Math.min(u.value.length,n.value*l.value)),T=e.computed(()=>l.value===-1?u.value:u.value.slice(p.value-1,V.value)),g=e.computed(()=>c.value?o.value?T.value.map((N,I)=>(N.dimensions={index:p.value+I,...N.dimensions},N)):T.value.map((N,I)=>({index:p.value+I,...N})):T.value),M=e.computed(()=>g.value);return{currentPageFirstIndex:p,currentPageLastIndex:V,pageItems:M}}const me=[{name:"scroll",description:"Triggered when scrolling"},{name:"clickRow",description:"Triggered when a row is clicked"},{name:"clickCell",description:"Triggered when a cell is clicked"},{name:"updateSort",description:"Triggered when sorting is updated"},{name:"updateFilter",description:"Triggered when filtering is updated"},{name:"updatePageItems",description:"Triggered when page items are updated"},{name:"updateTotalItems",description:"Triggered when total items are updated"},{name:"mouseover",description:"Triggered when mouse is over"},{name:"mouseleave",description:"Triggered when mouse leaves"}].map(n=>n.name),ge=["id"],ye=["colspan"],Se={class:"header"},we={key:3,class:"header-text"},be=["onClick"],he={class:"header"},ke={key:3,class:"header-text"},Ce=["id"],Pe=["role","onClick","onMouseover","onMouseleave"],Te={id:"errors"},Be={style:{color:"red"}},Ve={key:6},xe=e.defineComponent({__name:"PivotDataTable",props:H,emits:me,setup(n,{expose:l,emit:c}){const u=e.ref([]),o=e.ref();e.provide("dataTable",o);const p=n,{measures:V,dimensions:T,pivot:g,locale:M,tableNodeId:N,currentPage:I,filterOptions:R,emptyMessage:O,noRowsCustom:k,items:s,loading:m,mustSort:S,rowsItems:w,rowsPerPage:P,searchField:b,searchValue:d,showIndex:f,sortBy:a,sortType:r,sortPivotValue:x,showIndexSymbol:y,showIndexClass:h,nullFillText:A,hideFooter:$,customTableRowClass:Fe,customTableDataClass:Ie,splitDimensionHeaders:Ee}=e.toRefs(p),D=e.useSlots(),q=c,{clientSortOptions:Ne,headersForRenderParents:$e,headersForRender:_,updateSortField:G}=de(s,y,T,V,g,S,f,h,a,r,x,Ee,q),{totalItems:ne,totalItemsLength:W}=ue(_,Ne,R,s,g,T,b,d,q),{rowsItemsComputed:De,rowsPerPageRef:U,updateRowsPerPage:Re}=ce(w,P),{currentPaginationNumber:Q,maxPaginationNumber:X,isLastPage:oe,isFirstPage:se,nextPage:K,prevPage:v,updatePage:J}=pe(I,m,W,U),{currentPageFirstIndex:Y,currentPageLastIndex:Z,pageItems:le}=fe(Q,U,f,ne,g),Ae=(i,F,t,C)=>{q("clickCell",i,F,t,C)};e.watch(U,()=>{J(1)}),e.watch([d,R],()=>{J(1)}),e.watch([s,g],()=>{Le()},{immediate:!0});const ae=e.ref(!1);function Le(){u.value=[],g.value&&Array.isArray(g.value)?u.value.push({type:"propError",text:"pivot is of type Array"}):g.value&&Me()&&u.value.push({type:"dataShapeError",text:"duplicate item Objects (by rows * columns) found in items"})}e.onMounted(()=>{o.value.addEventListener("scroll",()=>{ae.value=o.value.scrollLeft>0})}),l({currentPageFirstIndex:Y,currentPageLastIndex:Z,clientItemsLength:W,totalItems:ne,maxPaginationNumber:X,currentPaginationNumber:Q,isLastPage:oe,isFirstPage:se,nextPage:K,prevPage:v,updatePage:J,updateSortField:G,rowsPerPageOptions:De,rowsPerPageActiveOption:U,updateRowsPerPageActiveOption:Re});function Me(){const i=[...T.value.map(t=>t.value),g.value.value],F=new Set;for(let t=0;t<s.value.length;t++){const C=i.map(B=>s.value[t][B]).join("|");if(F.has(C))return!0;F.add(C)}return!1}return(i,F)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"dataTable",ref:o,class:e.normalizeClass(["vue3-pivot-data-table",[i.tableClassName]]),onScroll:F[0]||(F[0]=t=>i.$emit("scroll",t))},[e.createElementVNode("table",{id:e.unref(N),class:e.normalizeClass({[i.innerTableClassName]:!0,"show-shadow":ae.value})},[e.unref(D)["customize-headers"]?e.renderSlot(i.$slots,"customize-headers",e.normalizeProps(e.mergeProps({key:0},{headersForRender:e.unref(_),updateSortField:e.unref(G)})),void 0,!0):e.unref(_).length&&!i.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:1,class:e.normalizeClass([i.headerClassName])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref($e),(t,C)=>(e.openBlock(),e.createElementBlock("tr",{key:"headerRowGroup"+C},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t,(B,E)=>(e.openBlock(),e.createElementBlock("th",{key:"pivotHeader"+E,colspan:B.count,class:e.normalizeClass([{shadow:E===0,[B.cssClass??""]:!0,[B.type??""]:!0}])},[e.createElementVNode("span",Se,[e.unref(D)[`header-${B.type}-${B.text}`]?e.renderSlot(i.$slots,`header-${B.type}-${B.text}`,e.mergeProps({key:0,ref_for:!0},B),void 0,!0):e.unref(D)[`header-${B.type}`]?e.renderSlot(i.$slots,`header-${B.type}`,e.mergeProps({key:1,ref_for:!0},B),void 0,!0):e.unref(D).header?e.renderSlot(i.$slots,"header",e.mergeProps({key:2,ref_for:!0},B),void 0,!0):(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(B.text),1))])],10,ye))),128))]))),128)),e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(t,C)=>(e.openBlock(),e.createElementBlock("th",{key:C,role:"button",tabindex:0,class:e.normalizeClass([{sortable:t.sortable,none:t.sortable&&t.sortType==="none",desc:t.sortable&&t.sortType==="desc",asc:t.sortable&&t.sortType==="asc",shadow:C===0,[t.cssClass??""]:!0,[t.type??""]:!0}]),onClick:e.withModifiers(B=>t.sortable&&t.sortType?e.unref(G)(t.value,t.sortType,!1,t.pivotValue):null,["stop"])},[e.createElementVNode("span",he,[e.unref(D)[`header-${t.value}`]?e.renderSlot(i.$slots,`header-${t.value}`,e.mergeProps({key:0,ref_for:!0},t),void 0,!0):e.unref(D)[`header-${t.value.toLowerCase()}`]?e.renderSlot(i.$slots,`header-${t.value.toLowerCase()}`,e.mergeProps({key:1,ref_for:!0},t),void 0,!0):e.unref(D).header?e.renderSlot(i.$slots,"header",e.mergeProps({key:2,ref_for:!0},t),void 0,!0):(e.openBlock(),e.createElementBlock("span",ke,e.toDisplayString(t.text),1)),t.sortable&&e.unref(D)["sort-icon"]?e.renderSlot(i.$slots,"sort-icon",e.mergeProps({key:4,ref_for:!0},t),void 0,!0):t.sortable?(e.openBlock(),e.createElementBlock("i",{key:t.sortType?t.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:t.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)])],10,be))),128))])],2)):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(le),(t,C)=>{var B;return e.openBlock(),e.createElementBlock("tr",{id:`row-${C}`,key:C,class:e.normalizeClass([{[i.oddRowClass]:(C+1)%2===0},{[i.evenRowClass]:C%2===0},...((B=e.unref(Fe))==null?void 0:B({index:C,item:t}))??[]]),role:"button",tabindex:0},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(E,z)=>{var ie;return e.openBlock(),e.createElementBlock("td",{key:z,role:e.unref(_)[z].clickable||e.unref(_)[z].hoverable?"button":"",tabindex:"0",class:e.normalizeClass([{[i.oddRowCellClass]:(C+1)%2===0,[i.evenRowCellClass]:C%2===0,shadow:z===0,[E.cssClass??""]:!0,[E.type??""]:!0},...((ie=e.unref(Ie))==null?void 0:ie({header:E,item:e.unref(g)&&E.pivotValue?t.items.find(j=>j[e.unref(g).value]===E.pivotValue):e.unref(g)?t.dimensions:t,index:C}))??[]]),onClick:j=>Ae(t,e.unref(_)[z],C,j),onMouseover:j=>q("mouseover",t,e.unref(_)[z],j),onMouseleave:j=>q("mouseleave",t,j)},[e.unref(D)[`item-${E.value}`]?e.renderSlot(i.$slots,`item-${E.value}`,e.mergeProps({key:0,ref_for:!0},e.unref(g)&&E.pivotValue?t.items.find(j=>j[e.unref(g).value]===E.pivotValue):e.unref(g)?t.dimensions:t),void 0,!0):e.unref(D).item?e.renderSlot(i.$slots,"item",e.mergeProps({key:1,ref_for:!0},{pivot:e.unref(g),item:t}),void 0,!0):e.unref(g)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(e.unref(re)(E,t,e.unref(g),e.unref(M),e.unref(A))),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(e.unref(te)(E,t,e.unref(M),e.unref(A))),1)],64))],42,Pe)}),128))],10,Ce)}),128))]),e.unref(D)["customize-footers"]?e.renderSlot(i.$slots,"customize-footers",e.normalizeProps(e.mergeProps({key:2},{headersForRender:e.unref(_),updateSortField:e.unref(G),generateCellContentBasedOnPivot:e.unref(re),generateCellContent:e.unref(te),locale:e.unref(M)})),void 0,!0):e.createCommentVNode("",!0)],10,ge)],34),u.value.length?e.renderSlot(i.$slots,"errors",{key:0},()=>[e.createElementVNode("div",Te,[e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(t,C)=>(e.openBlock(),e.createElementBlock("li",{key:"error"+C},[e.createElementVNode("span",Be,e.toDisplayString(t.type)+":",1),e.createTextVNode(" "+e.toDisplayString(t.text),1)]))),128))])])],!0):e.unref(m)?e.renderSlot(i.$slots,"loading",{key:1},()=>[F[3]||(F[3]=e.createTextVNode(" Slot: loading "))],!0):!e.unref(s).length&&!e.unref(m)&&e.unref(k)?e.renderSlot(i.$slots,"no-rows-custom",{key:2},()=>[F[4]||(F[4]=e.createTextVNode(" Slot: no-rows-custom "))],!0):!e.unref(s).length&&!e.unref(m)?e.renderSlot(i.$slots,"no-rows",{key:3},()=>[e.createTextVNode(e.toDisplayString(e.unref(O)),1)],!0):!e.unref(le).length&&!e.unref(m)?e.renderSlot(i.$slots,"empty-message",{key:4},()=>[e.createTextVNode(e.toDisplayString(e.unref(O)),1)],!0):e.createCommentVNode("",!0),e.unref(D).footer?e.renderSlot(i.$slots,"footer",e.normalizeProps(e.mergeProps({key:5},{currentPageFirstIndex:e.unref(Y),currentPageLastIndex:e.unref(Z),rowsOfPageSeparatorMessage:i.rowsOfPageSeparatorMessage,totalItemsLength:e.unref(W),isFirstPage:e.unref(se),isLastPage:e.unref(oe),currentPaginationNumber:e.unref(Q),maxPaginationNumber:e.unref(X),nextPage:e.unref(K),prevPage:e.unref(v),updatePage:e.unref(J)})),void 0,!0):e.unref($)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ve,[e.createTextVNode(e.toDisplayString(`${e.unref(Y)}–${e.unref(Z)}`)+" "+e.toDisplayString(i.rowsOfPageSeparatorMessage)+" "+e.toDisplayString(e.unref(W))+" ",1),e.createElementVNode("button",{onClick:F[1]||(F[1]=(...t)=>e.unref(v)&&e.unref(v)(...t))},e.toDisplayString("<")),e.createTextVNode(" "+e.toDisplayString(e.unref(I))+" of "+e.toDisplayString(e.unref(X))+" ",1),e.createElementVNode("button",{onClick:F[2]||(F[2]=(...t)=>e.unref(K)&&e.unref(K)(...t))},">")]))],64))}}),je="";return((n,l)=>{const c=n.__vccOpts||n;for(const[u,o]of l)c[u]=o;return c})(xe,[["__scopeId","data-v-6c36e521"]])});