@kong-ui-public/table-data-grid 0.9.0 → 0.9.1-pr.4063.bf809a10e.0

package/dist/table-data-grid.umd.js

@@ -1 +1 @@
-(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x["kong-ui-public-table-data-grid"]={},x.Vue,x.AgGridVue,x.agGridCommunity,x["kong-ui-public-i18n"]))})(this,(function(x,e,Z,L,W){"use strict";var $=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))($||{});const ee=t=>!!t?.length;function te(t,a,o,n=ee){const l=e.computed(()=>n(t.value)),r=e.computed(()=>{const u=t.value!==void 0,s=a.value!==void 0&&a.value!==null;return o.value?"LOADING":l.value?"SUCCESS":s?"ERROR":u?"SUCCESS":"PENDING"});return{fetchState:$,hasData:l,state:r}}const oe=({emitState:t,fetchLifecycleState:a,hasData:o})=>{e.watch(()=>({hasData:o.value,state:a.value}),({hasData:n,state:l})=>{if(l!==$.PENDING){if(l===$.LOADING){t({hasData:n,state:"loading"});return}if(l===$.ERROR){t({hasData:n,state:"error"});return}t({hasData:n,state:"success"})}})},ae=({startRow:t,endRow:a})=>{const o=a-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},le=({startRow:t,rowsLength:a,pageSize:o,total:n,hasMore:l})=>{if(typeof n=="number")return n;if(l!==!0&&(l===!1||a<o))return t+a},ne=({fetcher:t,resetKey:a,sort:o})=>{const n=new Map,l=new Map,r=e.ref(0),g=e.ref(0),u=e.shallowRef(),s=e.shallowRef(),p=e.shallowRef(),b=e.ref(0),w=e.ref(!1);let h,R,G=o?.value?.sortColumnKey,i=o?.value?.sortColumnOrder;const f=d=>d===r.value&&h===t.value&&R===a?.value,k=(d,m)=>f(d)&&m===g.value&&G===o?.value?.sortColumnKey&&i===o?.value?.sortColumnOrder,_=d=>{if(!o)return!0;const m=o.value;return!m?.sortColumnKey||!m.sortColumnOrder?d.length===0:d.length===1&&d[0].colId===m.sortColumnKey&&d[0].sort===m.sortColumnOrder},E=()=>{w.value=b.value>0},T=()=>{g.value+=1,G=o?.value?.sortColumnKey,i=o?.value?.sortColumnOrder;for(const d of l.values())d.resolve(!1);n.clear(),l.clear(),s.value=void 0,p.value=void 0,b.value=0,E()},B=()=>{p.value=void 0,b.value+=1,E()},V=()=>{b.value=Math.max(0,b.value-1),E()},K=d=>{const m=l.get(d);if(m)return m;let C;const y={promise:new Promise(S=>{C=S}),resolve:S=>C(S)};return l.set(d,y),y},D=(d,m)=>{m.resolve(!1),l.get(d)===m&&l.delete(d)},M=async({blockIndex:d,currentBlockCompletion:m,datasourceId:C,requestGeneration:y})=>{if(d===0)return"ready";const S=l.get(d-1);if(!S)return D(d,m),"failed";const I=await S.promise;return k(C,y)?I?"ready":(D(d,m),"failed"):(D(d,m),"stale")},v=({blockIndex:d,currentBlockCompletion:m,getRowsParams:C,pageSize:y,result:S})=>{S.cursor!==void 0&&n.set(d,S.cursor),C.successCallback(S.data,le({startRow:C.startRow,rowsLength:S.data.length,pageSize:y,total:S.total,hasMore:S.hasMore})),C.startRow===0&&(s.value=S.data),m.resolve(!0)},O=({blockIndex:d,currentBlockCompletion:m,fetchError:C,getRowsParams:y})=>{p.value=C,y.failCallback(),D(d,m)},N=()=>{const d=t.value;if(!d)throw new Error("TableDataGrid requires a fetcher in infinite mode");h=d,R=a?.value;const m=r.value+1;return r.value=m,T(),{async getRows(C){if(!f(m)||!_(C.sortModel)){C.failCallback();return}const{blockIndex:y,pageSize:S}=ae({startRow:C.startRow,endRow:C.endRow});y===0&&l.has(0)&&T();const I=g.value,F=K(y);if(await M({blockIndex:y,currentBlockCompletion:F,datasourceId:m,requestGeneration:I})!=="ready"||!k(m,I)){C.failCallback(),D(y,F);return}B();try{const c=y>0?n.get(y-1):void 0,z=await d({mode:"infinite",pageSize:S,cursor:c,sort:o?.value});if(!k(m,I)){C.failCallback(),D(y,F);return}v({blockIndex:y,currentBlockCompletion:F,getRowsParams:C,pageSize:S,result:z})}catch(c){if(!k(m,I)){C.failCallback(),D(y,F);return}O({blockIndex:y,currentBlockCompletion:F,fetchError:c,getRowsParams:C})}finally{k(m,I)&&V()}}}},A=()=>{u.value=N()};return e.watch([t,()=>a?.value],()=>{A()},{immediate:!0}),e.watch([()=>o?.value?.sortColumnKey,()=>o?.value?.sortColumnOrder],()=>T()),{datasource:e.readonly(u),data:e.shallowReadonly(s),error:e.readonly(p),isFetching:e.readonly(w)}},re={emptyState:{title:"No Data",message:"There is no data to display."},errorState:{title:"An error occurred",message:"Data cannot be displayed due to an error."}};function j(){const t=W.createI18n("en-us",re);return{i18n:t,i18nT:W.i18nTComponent(t)}}const{i18n:se}=j(),H=(t,a)=>{const o=Reflect.get(a,t.key);return t.valueFormatter?t.valueFormatter(o,a):String(o??"")},P=t=>typeof t!="number"?null:Number.isFinite(t)?t:null,ie=(t,a)=>t.reduce((o,n)=>{const l=P(Reflect.get(n,a.key));return l===null?o:{sum:o.sum+l,max:Math.max(o.max,l)}},{sum:0,max:0}),ce=(t,a)=>{const o=(a??[]).filter(r=>Number.isFinite(r.value)&&t>=r.value);if(!o.length)return;const n=Math.max(...o.map(r=>r.value));return o.filter(r=>r.value===n).some(r=>r.type==="error")?"error":"warning"},ue=(t,a,o)=>{if(t===null)return 0;const n=o==="relative"?a.sum:a.max;return n>0?Math.min(Math.max(t/n,0),1):0},de=t=>{const a=o=>se.formatNumber(o,{maximumFractionDigits:2});return t>0&&t<.01?`< ${a(.01)} %`:`${a(t)} %`},Q=({value:t,stats:a,header:o})=>{if(t===null||a.sum<=0)return;const n=t/a.sum*100;return o.percentageFormatter?.(n)??de(n)},J=(t,a)=>a!==void 0&&a.length>(t?.length??-1)?a:t,me=({rows:t,header:a,stats:o})=>t.reduce((n,l)=>({value:J(n.value,H(a,l))??"",relative:a.showPercentage?J(n.relative,Q({value:P(Reflect.get(l,a.key)),stats:o,header:a})):void 0}),{value:""}),fe=["data-threshold"],pe={class:"table-data-grid-cell-label-track"},Ce={class:"table-data-grid-cell-label"},ge={key:0,class:"table-data-grid-cell-relative","data-testid":"table-data-grid-cell-relative"},he={key:0,"aria-hidden":"true",class:"table-data-grid-cell-label table-data-grid-cell-label-sizer"},ve=["data-text"],ye=["data-text"],be=["data-threshold"],ke=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:a}){const o=e.shallowRef(t.params),n=e.ref(null),l=e.ref(!1),r=e.computed(()=>o.value.headerDef??{key:"",label:""}),g=e.computed(()=>o.value.context?.presentation),u=e.computed(()=>o.value.context?.cells?.tooltipTarget?.value??"body"),s=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),p=e.computed(()=>o.value.value),b=e.computed(()=>P(p.value)),w=e.computed(()=>g.value?.stats[r.value.key]),h=e.computed(()=>r.value.showPercentage&&w.value?Q({value:b.value,stats:w.value,header:r.value}):void 0),R=e.computed(()=>!!r.value.bar&&!!w.value&&(b.value!==null||p.value===null||p.value===void 0)),G=e.computed(()=>R.value&&w.value?ue(b.value,w.value,r.value.bar)*100:0),i=e.computed(()=>R.value?g.value?.labelSizers[r.value.key]:void 0),f=e.computed(()=>r.value.thresholds?.length&&b.value!==null?ce(b.value,r.value.thresholds):void 0),k=e.computed(()=>({column:r.value,refreshCell:()=>{const v=o.value.node;v&&o.value.api.refreshCells({force:!0,rowNodes:[v]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),_=(v,{slots:O})=>{const N=o.value.colDef?.colId,A=o.value.context?.cells?.slots;return!N||N==="cell-icon"||!A?.[N]?O.default?.():e.h("span",{class:"table-data-grid-cell-slot-content"},e.renderSlot(A,N,k.value,()=>O.default?.()??[]))},E=()=>{const v=o.value.context?.cells?.slots;return v?.["cell-icon"]?e.renderSlot(v,"cell-icon",k.value):null};let T,B,V=!1;const K=()=>{const v=n.value;l.value=!!v&&v.scrollWidth>v.clientWidth},D=()=>{V||(B!==void 0&&cancelAnimationFrame(B),B=requestAnimationFrame(()=>{B=void 0,K()}))},M=v=>{if(T?.disconnect(),v){T?.observe(v);const O=v.closest(".ag-cell");O&&T?.observe(O)}D()};return e.onMounted(()=>{T=new ResizeObserver(D),M(n.value)}),e.watch(n,M),e.onUnmounted(()=>{V=!0,T?.disconnect(),B!==void 0&&cancelAnimationFrame(B)}),a({refresh(v){return o.value=v,e.nextTick(D),!0}}),(v,O)=>{const N=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["table-data-grid-cell-renderer",{"table-data-grid-cell-renderer--bar":R.value,"table-data-grid-cell-renderer--percentage":!!h.value,[`table-data-grid-cell-renderer--text-${f.value}`]:!R.value&&!!f.value}]),"data-threshold":f.value},[e.createElementVNode("span",pe,[e.createElementVNode("span",Ce,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(E))),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(_),null,{default:e.withCtx(()=>[e.createVNode(N,{class:"table-data-grid-cell-tooltip",disabled:!l.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:u.value,text:s.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:n,class:"table-data-grid-cell-content"},e.toDisplayString(s.value),513)]),_:1},8,["disabled","target","text"])]),_:1})),h.value?(e.openBlock(),e.createElementBlock("span",ge,"("+e.toDisplayString(h.value)+")",1)):e.createCommentVNode("",!0)]),i.value?(e.openBlock(),e.createElementBlock("span",he,[e.createElementVNode("span",{class:"table-data-grid-cell-sizer-value","data-text":i.value.value},null,8,ve),i.value.relative?(e.openBlock(),e.createElementBlock("span",{key:0,class:"table-data-grid-cell-sizer-relative","data-text":`(${i.value.relative})`},null,8,ye)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),R.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"table-data-grid-cell-bar","data-testid":"table-data-grid-cell-bar","data-threshold":f.value},[e.createElementVNode("span",{class:"table-data-grid-cell-bar-fill","data-testid":"table-data-grid-cell-bar-fill",style:e.normalizeStyle({width:`${G.value}%`})},null,4)],8,be)):e.createCommentVNode("",!0)],10,fe)}}}),Se=({headers:t,slots:a,initialSort:o,mode:n,rows:l,tooltipTarget:r})=>{const g=n??"infinite",u=new Set,s=i=>!!(i.showPercentage||i.bar||i.thresholds?.length),p=()=>{t.value.forEach(i=>{if(!s(i))return;let f;if(g==="infinite"&&(i.showPercentage||i.bar)?f="percentage and bar presentation is only supported in unpaginated mode":g==="unpaginated"&&l?.value?.some(_=>{const E=Reflect.get(_,i.key);return E!=null&&P(E)===null})&&(f="contains non-finite or nonnumeric values; numeric presentation skips those values"),!f)return;const k=`${i.key}:${f}`;u.has(k)||(u.add(k),console.warn(`[TableDataGrid] Column "${i.key}" ${f}.`))})};e.watch([t,()=>l?.value],p,{immediate:!0});const b=e.computed(()=>{if(g!=="unpaginated")return{};const i=l?.value??[];return Object.fromEntries(t.value.filter(f=>f.showPercentage||f.bar).map(f=>[f.key,ie(i,f)]))}),w=e.computed(()=>{if(g!=="unpaginated")return{};const i=l?.value??[];return Object.fromEntries(t.value.filter(f=>f.bar).map(f=>[f.key,me({rows:i,header:f,stats:b.value[f.key]})]))}),h=e.computed(()=>({cells:{slots:a,tooltipTarget:r},presentation:{stats:b.value,labelSizers:w.value}})),R=i=>{const f=o?.sortColumnKey===i.key;return{colId:i.key,flex:!i.width&&!i.maxWidth?1:void 0,headerName:i.label,maxWidth:i.maxWidth,minWidth:i.minWidth,sortable:i.sortable??!1,unSortIcon:i.showSortIcon,...f?{initialSort:o?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:k=>k.data?.[i.key],valueFormatter:k=>k.data?H(i,k.data):String(k.value??""),width:i.width,cellRenderer:ke,cellRendererParams:{headerDef:i}}};return{columnDefs:e.computed(()=>t.value.map(R)),gridContext:h}},U=({config:t,headers:a,pageSize:o})=>{const n=new Set(a.filter(r=>r.sortable).map(r=>r.key)),l=t?.sortColumnKey&&n.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:l,sortColumnOrder:l?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o,...t?.fitToContent!==void 0?{fitToContent:t.fitToContent}:{}}},X=(t,a)=>t.sortColumnKey===a.sortColumnKey&&t.sortColumnOrder===a.sortColumnOrder&&t.pageSize===a.pageSize&&t.fitToContent===a.fitToContent,we=({headers:t,pageSize:a,tableConfig:o,emitSort:n,emitTableConfigUpdate:l,onExternalConfigChange:r})=>{const g=e.computed(()=>o.value?U({config:o.value,headers:t.value,pageSize:a.value}):void 0),u=e.ref(g.value??U({config:void 0,headers:t.value,pageSize:a.value}));e.watch(g,w=>{w&&!X(w,u.value)&&(u.value=w,r?.(w))});const s=w=>{const h=U({config:{...u.value,...w},headers:t.value,pageSize:a.value});X(h,u.value)||((h.sortColumnKey!==u.value.sortColumnKey||h.sortColumnOrder!==u.value.sortColumnOrder)&&n({sortColumnKey:h.sortColumnKey,sortColumnOrder:h.sortColumnOrder}),u.value=h,l(h))};e.watch(t,()=>{o.value||s({})},{deep:!0});const p=e.computed(()=>({sortColumnKey:u.value.sortColumnKey,sortColumnOrder:u.value.sortColumnOrder})),b=e.computed(()=>o.value?.pageSize??a.value);return{activeTableConfig:e.readonly(u),activeSort:p,activePageSize:b,patchTableConfig:s}},Re=({cellClick:t,headers:a,rowClick:o})=>{const n=e.computed(()=>new Set(a.value.filter(s=>s.disableRowClick).map(s=>s.key))),l=s=>{const p=s.event?.target;return p instanceof Element?p.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},r=s=>{const p=l(s);return!!(p&&n.value.has(p))};return{onCellClick:s=>{const p=s.colDef.colId;!s.data||!p||t({columnKey:p,row:s.data,value:s.value})},onRowClick:s=>{s.data&&!r(s)&&o(s.data,s)}}},De=({activeSort:t,patchTableConfig:a})=>{const o=(l,r)=>{l.applyColumnState({state:r.sortColumnKey?[{colId:r.sortColumnKey,sort:r.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:l=>{const r=l.api.getColumnState().filter(s=>s.sort).sort((s,p)=>(s.sortIndex??0)-(p.sortIndex??0)),g=r[r.length-1],u=g?{sortColumnKey:g.colId,sortColumnOrder:g.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};(u.sortColumnKey!==t.value.sortColumnKey||u.sortColumnOrder!==t.value.sortColumnOrder)&&a(u),r.length>1&&o(l.api,u)},applySortToGrid:o}},Ee={key:0,class:"table-error-state","data-testid":"table-error-state"},Te={key:1,class:"table-empty-state","data-testid":"table-empty-state"},Oe=((t,a)=>{const o=t.__vccOpts||t;for(const[n,l]of a)o[n]=l;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},error:{type:Boolean,default:!1},tableConfig:{},fetcher:{type:Function},mode:{},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]},rows:{}},emits:["grid:ready","state","row:click","cell:click","sort","update:tableConfig"],setup(t,{emit:a}){L.ModuleRegistry.registerModules([L.AllCommunityModule,L.ClientSideRowModelModule,L.InfiniteRowModelModule]);const o=t.mode??"infinite",n=a,{i18n:l}=j(),{t:r}=l,g=e.useSlots(),u=e.shallowRef(),s=e.useTemplateRef("rootElement"),p=e.shallowRef("body"),b=()=>{const c=document.fullscreenElement;p.value=c instanceof HTMLElement&&c.contains(s.value??null)?c:"body"};e.onMounted(()=>{b(),document.addEventListener("fullscreenchange",b)}),e.onBeforeUnmount(()=>{document.removeEventListener("fullscreenchange",b)});const{activeTableConfig:w,activeSort:h,activePageSize:R,patchTableConfig:G}=we({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitSort:c=>n("sort",c),emitTableConfigUpdate:c=>n("update:tableConfig",c),onExternalConfigChange:c=>{u.value&&f(u.value,c)}}),{onSortChanged:i,applySortToGrid:f}=De({activeSort:h,patchTableConfig:G}),k=e.computed(()=>o==="unpaginated"&&!!w.value.fitToContent),_=L.themeQuartz.withParams({autoHeightMinBodyHeight:0}),{onCellClick:E,onRowClick:T}=Re({cellClick:c=>n("cell:click",c),headers:e.toRef(()=>t.headers),rowClick:(c,z)=>n("row:click",c,z)}),B={resizable:!1,sortable:!1,suppressMovable:!0},V=e.computed(()=>[R.value,t.refreshKey]),K=o==="infinite"?ne({fetcher:e.toRef(()=>t.fetcher),resetKey:V,sort:h}):void 0,D=K?.datasource,M=e.computed(()=>K?K.data.value:t.rows),v=e.computed(()=>K?.isFetching.value??!1),O=e.computed(()=>t.rows?Array.from(t.rows):void 0),{columnDefs:N,gridContext:A}=Se({headers:e.toRef(()=>t.headers),mode:o,rows:O,slots:g,tooltipTarget:p,initialSort:h.value}),{fetchState:d,hasData:m,state:C}=te(M,e.toRef(()=>K?.error.value),v),y=e.computed(()=>C.value===d.SUCCESS&&!m.value);K&&oe({emitState:c=>n("state",c),fetchLifecycleState:C,hasData:m});const S=()=>{const c=u.value;if(!c||c.isDestroyed())return;const z=h.value,q=c.getColumnState().find(xe=>xe.sort);q?.colId===z.sortColumnKey&&(q?.sort??void 0)===z.sortColumnOrder||f(c,z)};e.watch([u,h],S);const I=e.ref(!1),F=c=>{c.direction==="vertical"&&(I.value=c.top>0)},Y=c=>{u.value=c.api,n("grid:ready",c.api)};return(c,z)=>{const q=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",{ref_key:"rootElement",ref:s,class:e.normalizeClass(["kong-ui-public-table-data-grid",{"fit-to-content":k.value,"is-scrolled":I.value}]),"data-testid":"table-data-grid"},[t.error?(e.openBlock(),e.createElementBlock("div",Ee,[e.renderSlot(c.$slots,"error-state",{},()=>[e.createVNode(q,{"icon-variant":"error",message:e.unref(r)("errorState.message"),title:e.unref(r)("errorState.title")},null,8,["message","title"])],!0)])):y.value?(e.openBlock(),e.createElementBlock("div",Te,[e.renderSlot(c.$slots,"empty-state",{},()=>[e.createVNode(q,{message:e.unref(r)("emptyState.message"),title:e.unref(r)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(Z.AgGridVue),{key:2,"cache-block-size":e.unref(o)==="infinite"?e.unref(R):void 0,class:"table-data-grid-grid","column-defs":e.unref(N),context:e.unref(A),datasource:e.unref(o)==="infinite"?e.unref(D):void 0,"default-col-def":B,"dom-layout":k.value?"autoHeight":"normal","infinite-initial-row-count":e.unref(o)==="infinite"?1:void 0,loading:v.value,"row-data":e.unref(o)==="unpaginated"?O.value:void 0,"row-model-type":e.unref(o)==="unpaginated"?"clientSide":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(_),onBodyScroll:F,onCellClicked:e.unref(E),onGridReady:Y,onNewColumnsLoaded:S,onRowClicked:e.unref(T),onSortChanged:e.unref(i)},null,8,["cache-block-size","column-defs","context","datasource","dom-layout","infinite-initial-row-count","loading","row-data","row-model-type","theme","onCellClicked","onRowClicked","onSortChanged"]))],2)}}}),[["__scopeId","data-v-82e410f3"]]);x.TableDataGrid=Oe,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`ag-grid-vue3`,`ag-grid-community`,`@kong-ui-public/i18n`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`kong-ui-public-table-data-grid`]={},e.Vue,e.AgGridVue,e.agGridCommunity,e[`kong-ui-public-i18n`]))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=function(e){return e.PENDING=`PENDING`,e.LOADING=`LOADING`,e.SUCCESS=`SUCCESS`,e.ERROR=`ERROR`,e}({}),o=e=>!!e?.length;function s(e,n,r,i=o){let s=(0,t.computed)(()=>i(e.value));return{fetchState:a,hasData:s,state:(0,t.computed)(()=>{let t=e.value!==void 0,i=n.value!==void 0&&n.value!==null;return r.value?`LOADING`:s.value?`SUCCESS`:i?`ERROR`:t?`SUCCESS`:`PENDING`})}}var c=({emitState:e,fetchLifecycleState:n,hasData:r})=>{(0,t.watch)(()=>({hasData:r.value,state:n.value}),({hasData:t,state:n})=>{n!==a.PENDING&&(n===a.LOADING?e({hasData:t,state:`loading`}):n===a.ERROR?e({hasData:t,state:`error`}):e({hasData:t,state:`success`}))})},l=({startRow:e,endRow:t})=>{let n=t-e;return{blockIndex:n>0?Math.floor(e/n):0,pageSize:n}},u=({startRow:e,rowsLength:t,pageSize:n,total:r,hasMore:i})=>{if(typeof r==`number`)return r;if(i!==!0&&(i===!1||t<n))return e+t},d=({fetcher:e,resetKey:n,sort:r})=>{let i=new Map,a=new Map,o=(0,t.ref)(0),s=(0,t.ref)(0),c=(0,t.shallowRef)(),d=(0,t.shallowRef)(),f=(0,t.shallowRef)(),p=(0,t.ref)(0),m=(0,t.ref)(!1),h,g,_=r?.value?.sortColumnKey,v=r?.value?.sortColumnOrder,y=t=>t===o.value&&h===e.value&&g===n?.value,b=(e,t)=>y(e)&&t===s.value&&_===r?.value?.sortColumnKey&&v===r?.value?.sortColumnOrder,x=e=>{if(!r)return!0;let t=r.value;return!t?.sortColumnKey||!t.sortColumnOrder?e.length===0:e.length===1&&e[0].colId===t.sortColumnKey&&e[0].sort===t.sortColumnOrder},S=()=>{m.value=p.value>0},C=()=>{s.value+=1,_=r?.value?.sortColumnKey,v=r?.value?.sortColumnOrder;for(let e of a.values())e.resolve(!1);i.clear(),a.clear(),d.value=void 0,f.value=void 0,p.value=0,S()},w=()=>{f.value=void 0,p.value+=1,S()},T=()=>{p.value=Math.max(0,p.value-1),S()},E=e=>{let t=a.get(e);if(t)return t;let n,r={promise:new Promise(e=>{n=e}),resolve:e=>n(e)};return a.set(e,r),r},D=(e,t)=>{t.resolve(!1),a.get(e)===t&&a.delete(e)},O=async({blockIndex:e,currentBlockCompletion:t,datasourceId:n,requestGeneration:r})=>{if(e===0)return`ready`;let i=a.get(e-1);if(!i)return D(e,t),`failed`;let o=await i.promise;return b(n,r)?o?`ready`:(D(e,t),`failed`):(D(e,t),`stale`)},k=({blockIndex:e,currentBlockCompletion:t,getRowsParams:n,pageSize:r,result:a})=>{a.cursor!==void 0&&i.set(e,a.cursor),n.successCallback(a.data,u({startRow:n.startRow,rowsLength:a.data.length,pageSize:r,total:a.total,hasMore:a.hasMore})),n.startRow===0&&(d.value=a.data),t.resolve(!0)},A=({blockIndex:e,currentBlockCompletion:t,fetchError:n,getRowsParams:r})=>{f.value=n,r.failCallback(),D(e,t)},j=()=>{let t=e.value;if(!t)throw Error(`TableDataGrid requires a fetcher in infinite mode`);h=t,g=n?.value;let c=o.value+1;return o.value=c,C(),{async getRows(e){if(!y(c)||!x(e.sortModel)){e.failCallback();return}let{blockIndex:n,pageSize:o}=l({startRow:e.startRow,endRow:e.endRow});n===0&&a.has(0)&&C();let u=s.value,d=E(n);if(await O({blockIndex:n,currentBlockCompletion:d,datasourceId:c,requestGeneration:u})!==`ready`||!b(c,u))e.failCallback(),D(n,d);else{w();try{let a=n>0?i.get(n-1):void 0,s=await t({mode:`infinite`,pageSize:o,cursor:a,sort:r?.value});if(!b(c,u)){e.failCallback(),D(n,d);return}k({blockIndex:n,currentBlockCompletion:d,getRowsParams:e,pageSize:o,result:s})}catch(t){if(!b(c,u)){e.failCallback(),D(n,d);return}A({blockIndex:n,currentBlockCompletion:d,fetchError:t,getRowsParams:e})}finally{b(c,u)&&T()}}}}},M=()=>{c.value=j()};return(0,t.watch)([e,()=>n?.value],()=>{M()},{immediate:!0}),(0,t.watch)([()=>r?.value?.sortColumnKey,()=>r?.value?.sortColumnOrder],()=>C()),{datasource:(0,t.readonly)(c),data:(0,t.shallowReadonly)(d),error:(0,t.readonly)(f),isFetching:(0,t.readonly)(m)}},f={emptyState:{title:`No Data`,message:`There is no data to display.`},errorState:{title:`An error occurred`,message:`Data cannot be displayed due to an error.`}};function p(){let e=(0,i.createI18n)(`en-us`,f);return{i18n:e,i18nT:(0,i.i18nTComponent)(e)}}var{i18n:m}=p(),h=(e,t)=>{let n=Reflect.get(t,e.key);return e.valueFormatter?e.valueFormatter(n,t):String(n??``)},g=e=>typeof e==`number`&&Number.isFinite(e)?e:null,_=(e,t)=>e.reduce((e,n)=>{let r=g(Reflect.get(n,t.key));return r===null?e:{sum:e.sum+r,max:Math.max(e.max,r)}},{sum:0,max:0}),v=(e,t)=>{let n=(t??[]).filter(t=>Number.isFinite(t.value)&&e>=t.value);if(!n.length)return;let r=Math.max(...n.map(e=>e.value));return n.filter(e=>e.value===r).some(e=>e.type===`error`)?`error`:`warning`},y=(e,t,n)=>{if(e===null)return 0;let r=n===`relative`?t.sum:t.max;return r>0?Math.min(Math.max(e/r,0),1):0},b=e=>{let t=e=>m.formatNumber(e,{maximumFractionDigits:2});return e>0&&e<.01?`< ${t(.01)} %`:`${t(e)} %`},x=({value:e,stats:t,header:n})=>{if(e===null||t.sum<=0)return;let r=e/t.sum*100;return n.percentageFormatter?.(r)??b(r)},S=(e,t)=>t!==void 0&&t.length>(e?.length??-1)?t:e,C=({rows:e,header:t,stats:n})=>e.reduce((e,r)=>({value:S(e.value,h(t,r))??``,relative:t.showPercentage?S(e.relative,x({value:g(Reflect.get(r,t.key)),stats:n,header:t})):void 0}),{value:``}),w=[`data-threshold`],T={class:`table-data-grid-cell-label-track`},E={class:`table-data-grid-cell-label`},D={key:0,class:`table-data-grid-cell-relative`,"data-testid":`table-data-grid-cell-relative`},O={key:0,"aria-hidden":`true`,class:`table-data-grid-cell-label table-data-grid-cell-label-sizer`},k=[`data-text`],A=[`data-text`],j=[`data-threshold`],M=(0,t.defineComponent)({name:`TableDataGridCellRenderer`,__name:`TableDataGridCellRenderer`,props:{params:{}},setup(e,{expose:n}){let r=(0,t.shallowRef)(e.params),i=(0,t.ref)(null),a=(0,t.ref)(!1),o=(0,t.computed)(()=>r.value.headerDef??{key:``,label:``}),s=(0,t.computed)(()=>r.value.context?.presentation),c=(0,t.computed)(()=>r.value.context?.cells?.tooltipTarget?.value??`body`),l=(0,t.computed)(()=>r.value.valueFormatted??String(r.value.value??``)),u=(0,t.computed)(()=>r.value.value),d=(0,t.computed)(()=>g(u.value)),f=(0,t.computed)(()=>s.value?.stats[o.value.key]),p=(0,t.computed)(()=>o.value.showPercentage&&f.value?x({value:d.value,stats:f.value,header:o.value}):void 0),m=(0,t.computed)(()=>!!o.value.bar&&!!f.value&&(d.value!==null||u.value===null||u.value===void 0)),h=(0,t.computed)(()=>m.value&&f.value?y(d.value,f.value,o.value.bar)*100:0),_=(0,t.computed)(()=>m.value?s.value?.labelSizers[o.value.key]:void 0),b=(0,t.computed)(()=>o.value.thresholds?.length&&d.value!==null?v(d.value,o.value.thresholds):void 0),S=(0,t.computed)(()=>({column:o.value,refreshCell:()=>{let e=r.value.node;e&&r.value.api.refreshCells({force:!0,rowNodes:[e]})},row:r.value.data??{},rowIndex:r.value.node?.rowIndex??0,rowValue:r.value.value,selected:r.value.node?.isSelected()??!1})),C=(e,{slots:n})=>{let i=r.value.colDef?.colId,a=r.value.context?.cells?.slots;return!i||i===`cell-icon`||!a?.[i]?n.default?.():(0,t.h)(`span`,{class:`table-data-grid-cell-slot-content`},(0,t.renderSlot)(a,i,S.value,()=>n.default?.()??[]))},M=()=>{let e=r.value.context?.cells?.slots;return e?.[`cell-icon`]?(0,t.renderSlot)(e,`cell-icon`,S.value):null},N,P,F=!1,I=()=>{let e=i.value;a.value=!!e&&e.scrollWidth>e.clientWidth},L=()=>{F||(P!==void 0&&cancelAnimationFrame(P),P=requestAnimationFrame(()=>{P=void 0,I()}))},R=e=>{if(N?.disconnect(),e){N?.observe(e);let t=e.closest(`.ag-cell`);t&&N?.observe(t)}L()};return(0,t.onMounted)(()=>{N=new ResizeObserver(L),R(i.value)}),(0,t.watch)(i,R),(0,t.onUnmounted)(()=>{F=!0,N?.disconnect(),P!==void 0&&cancelAnimationFrame(P)}),n({refresh(e){return r.value=e,(0,t.nextTick)(L),!0}}),(e,n)=>{let r=(0,t.resolveComponent)(`KTooltip`);return(0,t.openBlock)(),(0,t.createElementBlock)(`span`,{class:(0,t.normalizeClass)([`table-data-grid-cell-renderer`,{"table-data-grid-cell-renderer--bar":m.value,"table-data-grid-cell-renderer--percentage":!!p.value,[`table-data-grid-cell-renderer--text-${b.value}`]:!m.value&&!!b.value}]),"data-threshold":b.value},[(0,t.createElementVNode)(`span`,T,[(0,t.createElementVNode)(`span`,E,[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(M))),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(C),null,{default:(0,t.withCtx)(()=>[(0,t.createVNode)(r,{class:`table-data-grid-cell-tooltip`,disabled:!a.value,"kpop-attributes":{popoverDelay:400},"max-width":`300`,placement:`bottom-start`,target:c.value,text:l.value},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`span`,{ref_key:`contentElement`,ref:i,class:`table-data-grid-cell-content`},(0,t.toDisplayString)(l.value),513)]),_:1},8,[`disabled`,`target`,`text`])]),_:1})),p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,D,`(`+(0,t.toDisplayString)(p.value)+`)`,1)):(0,t.createCommentVNode)(``,!0)]),_.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,O,[(0,t.createElementVNode)(`span`,{class:`table-data-grid-cell-sizer-value`,"data-text":_.value.value},null,8,k),_.value.relative?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:0,class:`table-data-grid-cell-sizer-relative`,"data-text":`(${_.value.relative})`},null,8,A)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)]),m.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:0,class:`table-data-grid-cell-bar`,"data-testid":`table-data-grid-cell-bar`,"data-threshold":b.value},[(0,t.createElementVNode)(`span`,{class:`table-data-grid-cell-bar-fill`,"data-testid":`table-data-grid-cell-bar-fill`,style:(0,t.normalizeStyle)({width:`${h.value}%`})},null,4)],8,j)):(0,t.createCommentVNode)(``,!0)],10,w)}}}),N=({headers:e,slots:n,initialSort:r,mode:i,rows:a,tooltipTarget:o})=>{let s=i??`infinite`,c=new Set,l=e=>!!(e.showPercentage||e.bar||e.thresholds?.length);(0,t.watch)([e,()=>a?.value],()=>{e.value.forEach(e=>{if(!l(e))return;let t;if(s===`infinite`&&(e.showPercentage||e.bar)?t=`percentage and bar presentation is only supported in unpaginated mode`:s===`unpaginated`&&a?.value?.some(t=>{let n=Reflect.get(t,e.key);return n!=null&&g(n)===null})&&(t=`contains non-finite or nonnumeric values; numeric presentation skips those values`),!t)return;let n=`${e.key}:${t}`;c.has(n)||(c.add(n),console.warn(`[TableDataGrid] Column "${e.key}" ${t}.`))})},{immediate:!0});let u=(0,t.computed)(()=>{if(s!==`unpaginated`)return{};let t=a?.value??[];return Object.fromEntries(e.value.filter(e=>e.showPercentage||e.bar).map(e=>[e.key,_(t,e)]))}),d=(0,t.computed)(()=>{if(s!==`unpaginated`)return{};let t=a?.value??[];return Object.fromEntries(e.value.filter(e=>e.bar).map(e=>[e.key,C({rows:t,header:e,stats:u.value[e.key]})]))}),f=(0,t.computed)(()=>({cells:{slots:n,tooltipTarget:o},presentation:{stats:u.value,labelSizers:d.value}})),p=e=>{let t=r?.sortColumnKey===e.key;return{colId:e.key,flex:!e.width&&!e.maxWidth?1:void 0,headerName:e.label,maxWidth:e.maxWidth,minWidth:e.minWidth,sortable:e.sortable??!1,unSortIcon:e.showSortIcon,...t?{initialSort:r?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:t=>t.data?.[e.key],valueFormatter:t=>t.data?h(e,t.data):String(t.value??``),width:e.width,cellRenderer:M,cellRendererParams:{headerDef:e}}};return{columnDefs:(0,t.computed)(()=>e.value.map(p)),gridContext:f}},P=({config:e,headers:t,pageSize:n})=>{let r=new Set(t.filter(e=>e.sortable).map(e=>e.key)),i=e?.sortColumnKey&&r.has(e.sortColumnKey)?e.sortColumnKey:void 0;return{sortColumnKey:i,sortColumnOrder:i?e?.sortColumnOrder:void 0,pageSize:e?.pageSize??n,...e?.fitToContent===void 0?{}:{fitToContent:e.fitToContent}}},F=(e,t)=>e.sortColumnKey===t.sortColumnKey&&e.sortColumnOrder===t.sortColumnOrder&&e.pageSize===t.pageSize&&e.fitToContent===t.fitToContent,I=({headers:e,pageSize:n,tableConfig:r,emitSort:i,emitTableConfigUpdate:a,onExternalConfigChange:o})=>{let s=(0,t.computed)(()=>r.value?P({config:r.value,headers:e.value,pageSize:n.value}):void 0),c=(0,t.ref)(s.value??P({config:void 0,headers:e.value,pageSize:n.value}));(0,t.watch)(s,e=>{e&&!F(e,c.value)&&(c.value=e,o?.(e))});let l=t=>{let r=P({config:{...c.value,...t},headers:e.value,pageSize:n.value});F(r,c.value)||((r.sortColumnKey!==c.value.sortColumnKey||r.sortColumnOrder!==c.value.sortColumnOrder)&&i({sortColumnKey:r.sortColumnKey,sortColumnOrder:r.sortColumnOrder}),c.value=r,a(r))};(0,t.watch)(e,()=>{r.value||l({})},{deep:!0});let u=(0,t.computed)(()=>({sortColumnKey:c.value.sortColumnKey,sortColumnOrder:c.value.sortColumnOrder})),d=(0,t.computed)(()=>r.value?.pageSize??n.value);return{activeTableConfig:(0,t.readonly)(c),activeSort:u,activePageSize:d,patchTableConfig:l}},L=({cellClick:e,headers:n,rowClick:r})=>{let i=(0,t.computed)(()=>new Set(n.value.filter(e=>e.disableRowClick).map(e=>e.key))),a=e=>{let t=e.event?.target;return t instanceof Element?t.closest(`.ag-cell`)?.getAttribute(`col-id`)??void 0:void 0},o=e=>{let t=a(e);return!!(t&&i.value.has(t))};return{onCellClick:t=>{let n=t.colDef.colId;t.data&&n&&e({columnKey:n,row:t.data,value:t.value})},onRowClick:e=>{e.data&&!o(e)&&r(e.data,e)}}},R=({activeSort:e,patchTableConfig:t})=>{let n=(e,t)=>{e.applyColumnState({state:t.sortColumnKey?[{colId:t.sortColumnKey,sort:t.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:r=>{let i=r.api.getColumnState().filter(e=>e.sort).sort((e,t)=>(e.sortIndex??0)-(t.sortIndex??0)),a=i[i.length-1],o=a?{sortColumnKey:a.colId,sortColumnOrder:a.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};(o.sortColumnKey!==e.value.sortColumnKey||o.sortColumnOrder!==e.value.sortColumnOrder)&&t(o),i.length>1&&n(r.api,o)},applySortToGrid:n}},z={key:0,class:`table-error-state`,"data-testid":`table-error-state`},B={key:1,class:`table-empty-state`,"data-testid":`table-empty-state`};e.TableDataGrid=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`TableDataGrid`,props:{headers:{},error:{type:Boolean,default:!1},tableConfig:{},fetcher:{type:Function},mode:{},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]},rows:{}},emits:[`grid:ready`,`state`,`row:click`,`cell:click`,`sort`,`update:tableConfig`],setup(e,{emit:i}){r.ModuleRegistry.registerModules([r.AllCommunityModule,r.ClientSideRowModelModule,r.InfiniteRowModelModule]);let a=e.mode??`infinite`,o=i,{i18n:l}=p(),{t:u}=l,f=(0,t.useSlots)(),m=(0,t.shallowRef)(),h=(0,t.useTemplateRef)(`rootElement`),g=(0,t.shallowRef)(`body`),_=()=>{let e=document.fullscreenElement;g.value=e instanceof HTMLElement&&e.contains(h.value??null)?e:`body`};(0,t.onMounted)(()=>{_(),document.addEventListener(`fullscreenchange`,_)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`fullscreenchange`,_)});let{activeTableConfig:v,activeSort:y,activePageSize:b,patchTableConfig:x}=I({headers:(0,t.toRef)(()=>e.headers),pageSize:(0,t.toRef)(()=>e.pageSize),tableConfig:(0,t.toRef)(()=>e.tableConfig),emitSort:e=>o(`sort`,e),emitTableConfigUpdate:e=>o(`update:tableConfig`,e),onExternalConfigChange:e=>{m.value&&C(m.value,e)}}),{onSortChanged:S,applySortToGrid:C}=R({activeSort:y,patchTableConfig:x}),w=(0,t.computed)(()=>a===`unpaginated`&&!!v.value.fitToContent),T=r.themeQuartz.withParams({autoHeightMinBodyHeight:0}),{onCellClick:E,onRowClick:D}=L({cellClick:e=>o(`cell:click`,e),headers:(0,t.toRef)(()=>e.headers),rowClick:(e,t)=>o(`row:click`,e,t)}),O={resizable:!1,sortable:!1,suppressMovable:!0},k=(0,t.computed)(()=>[b.value,e.refreshKey]),A=a===`infinite`?d({fetcher:(0,t.toRef)(()=>e.fetcher),resetKey:k,sort:y}):void 0,j=A?.datasource,M=(0,t.computed)(()=>A?A.data.value:e.rows),P=(0,t.computed)(()=>A?.isFetching.value??!1),F=(0,t.computed)(()=>e.rows?Array.from(e.rows):void 0),{columnDefs:V,gridContext:H}=N({headers:(0,t.toRef)(()=>e.headers),mode:a,rows:F,slots:f,tooltipTarget:g,initialSort:y.value}),{fetchState:U,hasData:W,state:G}=s(M,(0,t.toRef)(()=>A?.error.value),P),K=(0,t.computed)(()=>G.value===U.SUCCESS&&!W.value);A&&c({emitState:e=>o(`state`,e),fetchLifecycleState:G,hasData:W});let q=()=>{let e=m.value;if(!e||e.isDestroyed())return;let t=y.value,n=e.getColumnState().find(e=>e.sort);(n?.colId!==t.sortColumnKey||(n?.sort??void 0)!==t.sortColumnOrder)&&C(e,t)};(0,t.watch)([m,y],q);let J=(0,t.ref)(!1),Y=e=>{e.direction===`vertical`&&(J.value=e.top>0)},X=e=>{m.value=e.api,o(`grid:ready`,e.api)};return(r,i)=>{let o=(0,t.resolveComponent)(`KEmptyState`);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootElement`,ref:h,class:(0,t.normalizeClass)([`kong-ui-public-table-data-grid`,{"fit-to-content":w.value,"is-scrolled":J.value}]),"data-testid":`table-data-grid`},[e.error?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,z,[(0,t.renderSlot)(r.$slots,`error-state`,{},()=>[(0,t.createVNode)(o,{"icon-variant":`error`,message:(0,t.unref)(u)(`errorState.message`),title:(0,t.unref)(u)(`errorState.title`)},null,8,[`message`,`title`])],!0)])):K.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,B,[(0,t.renderSlot)(r.$slots,`empty-state`,{},()=>[(0,t.createVNode)(o,{message:(0,t.unref)(u)(`emptyState.message`),title:(0,t.unref)(u)(`emptyState.title`)},null,8,[`message`,`title`])],!0)])):((0,t.openBlock)(),(0,t.createBlock)((0,t.unref)(n.AgGridVue),{key:2,"cache-block-size":(0,t.unref)(a)===`infinite`?(0,t.unref)(b):void 0,class:`table-data-grid-grid`,"column-defs":(0,t.unref)(V),context:(0,t.unref)(H),datasource:(0,t.unref)(a)===`infinite`?(0,t.unref)(j):void 0,"default-col-def":O,"dom-layout":w.value?`autoHeight`:`normal`,"infinite-initial-row-count":(0,t.unref)(a)===`infinite`?1:void 0,loading:P.value,"row-data":(0,t.unref)(a)===`unpaginated`?F.value:void 0,"row-model-type":(0,t.unref)(a)===`unpaginated`?`clientSide`:`infinite`,"suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:(0,t.unref)(T),onBodyScroll:Y,onCellClicked:(0,t.unref)(E),onGridReady:X,onNewColumnsLoaded:q,onRowClicked:(0,t.unref)(D),onSortChanged:(0,t.unref)(S)},null,8,[`cache-block-size`,`column-defs`,`context`,`datasource`,`dom-layout`,`infinite-initial-row-count`,`loading`,`row-data`,`row-model-type`,`theme`,`onCellClicked`,`onRowClicked`,`onSortChanged`]))],2)}}}),[[`__scopeId`,`data-v-82e410f3`]])});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.9.0",
+  "version": "0.9.1-pr.4063.bf809a10e.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",
@@ -22,9 +22,9 @@
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "^2.5.1",
-    "@kong-ui-public/sandbox-layout": "^2.8.7",
+    "@kong-ui-public/sandbox-layout": "^2.8.8-pr.4063.bf809a10e.0",
     "@kong/kongponents": "9.66.12",
-    "vue": "^3.5.43"
+    "vue": "^3.5.44"
   },
   "repository": {
     "type": "git",