@kong-ui-public/table-data-grid 0.6.0 → 0.6.1-pr.3860.a89554fba.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -1
- package/dist/style.css +1 -1
- package/dist/table-data-grid.es.js +465 -347
- package/dist/table-data-grid.umd.js +1 -1
- package/dist/types/components/TableDataGrid.vue.d.ts +1 -0
- package/dist/types/components/TableDataGrid.vue.d.ts.map +1 -1
- package/dist/types/components/TableDataGridCellRenderer.vue.d.ts +4 -1
- package/dist/types/components/TableDataGridCellRenderer.vue.d.ts.map +1 -1
- package/dist/types/composables/useTableDataGridColumnDefs.d.ts +12 -1
- package/dist/types/composables/useTableDataGridColumnDefs.d.ts.map +1 -1
- package/dist/types/types/index.d.ts +19 -0
- package/dist/types/types/index.d.ts.map +1 -1
- package/dist/types/utils/tableDataGridPresentation.d.ts +51 -0
- package/dist/types/utils/tableDataGridPresentation.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(k,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):(k=typeof globalThis<"u"?globalThis:k||self,e(k["kong-ui-public-table-data-grid"]={},k.Vue,k.AgGridVue,k.agGridCommunity,k["kong-ui-public-i18n"]))})(this,(function(k,e,U,O,M){"use strict";var K=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(K||{});const q=t=>!!t?.length;function L(t,r,o,l=q){const s=e.computed(()=>l(t.value)),c=e.computed(()=>{const h=t.value!==void 0,n=r.value!==void 0&&r.value!==null;return o.value?"LOADING":s.value?"SUCCESS":n?"ERROR":h?"SUCCESS":"PENDING"});return{fetchState:K,hasData:s,state:c}}const W=({emitState:t,fetchLifecycleState:r,hasData:o})=>{e.watch(()=>({hasData:o.value,state:r.value}),({hasData:l,state:s})=>{if(s!==K.PENDING){if(s===K.LOADING){t({hasData:l,state:"loading"});return}if(s===K.ERROR){t({hasData:l,state:"error"});return}t({hasData:l,state:"success"})}})},$=({startRow:t,endRow:r})=>{const o=r-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},j=({startRow:t,rowsLength:r,pageSize:o,total:l,hasMore:s})=>{if(typeof l=="number")return l;if(s!==!0&&(s===!1||r<o))return t+r},P=({fetcher:t,resetKey:r,sort:o})=>{const l=new Map,s=new Map,c=e.ref(0),a=e.shallowRef(),h=e.shallowRef(),n=e.shallowRef(),i=e.ref(0),p=e.ref(!1);let b,I;const S=d=>d===c.value&&b===t.value&&I===r?.value,w=()=>{p.value=i.value>0},g=()=>{n.value=void 0,i.value+=1,w()},E=()=>{i.value=Math.max(0,i.value-1),w()},T=d=>{const u=s.get(d);if(u)return u;let m;const f={promise:new Promise(y=>{m=y}),resolve:y=>m(y)};return s.set(d,f),f},v=(d,u)=>{u.resolve(!1),s.get(d)===u&&s.delete(d)},D=async({blockIndex:d,currentBlockCompletion:u,datasourceId:m})=>{if(d===0)return"ready";const f=s.get(d-1);if(!f)return v(d,u),"failed";const y=await f.promise;return S(m)?y?"ready":(v(d,u),"failed"):(v(d,u),"stale")},F=({blockIndex:d,currentBlockCompletion:u,getRowsParams:m,pageSize:f,result:y})=>{y.cursor!==void 0&&l.set(d,y.cursor),m.successCallback(y.data,j({startRow:m.startRow,rowsLength:y.data.length,pageSize:f,total:y.total,hasMore:y.hasMore})),m.startRow===0&&(h.value=y.data),u.resolve(!0)},N=({blockIndex:d,currentBlockCompletion:u,fetchError:m,getRowsParams:f})=>{n.value=m,f.failCallback(),v(d,u)},x=()=>{const d=t.value;if(!d)throw new Error("TableDataGrid requires a fetcher in infinite mode");b=d,I=r?.value;const u=c.value+1;return c.value=u,l.clear(),s.clear(),h.value=void 0,n.value=void 0,i.value=0,w(),{async getRows(m){if(!S(u)){m.failCallback();return}const{blockIndex:f,pageSize:y}=$({startRow:m.startRow,endRow:m.endRow}),R=T(f);if(await D({blockIndex:f,currentBlockCompletion:R,datasourceId:u})!=="ready"||!S(u)){m.failCallback(),v(f,R);return}g();try{const C=f>0?l.get(f-1):void 0,B=await d({mode:"infinite",pageSize:y,cursor:C,sort:o?.value});if(!S(u)){m.failCallback(),v(f,R);return}F({blockIndex:f,currentBlockCompletion:R,getRowsParams:m,pageSize:y,result:B})}catch(C){if(!S(u)){m.failCallback(),v(f,R);return}N({blockIndex:f,currentBlockCompletion:R,fetchError:C,getRowsParams:m})}finally{S(u)&&E()}}}},z=()=>{a.value=x()};return e.watch([t,()=>r?.value],()=>{z()},{immediate:!0}),{datasource:e.readonly(a),data:e.shallowReadonly(h),error:e.readonly(n),isFetching:e.readonly(p)}},H={key:1,class:"table-data-grid-cell-renderer"},Q=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:r}){const o=e.shallowRef(t.params),l=e.ref(null),s=e.ref(!1),c=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),a=e.computed(()=>{const g=o.value.colDef?.colId;return g?o.value.context?.cells?.slots?.[g]:void 0}),h=e.computed(()=>({column:o.value.headerDef,refreshCell:()=>{const g=o.value.node;g&&o.value.api.refreshCells({force:!0,rowNodes:[g]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),n=()=>a.value?.(h.value);let i,p,b=!1;const I=()=>{const g=l.value;s.value=!!g&&g.scrollWidth>g.clientWidth},S=()=>{b||(p!==void 0&&cancelAnimationFrame(p),p=requestAnimationFrame(()=>{p=void 0,I()}))},w=g=>{if(i?.disconnect(),g){i?.observe(g);const E=g.closest(".ag-cell");E&&i?.observe(E)}S()};return e.onMounted(()=>{i=new ResizeObserver(S),w(l.value)}),e.watch(l,w,{flush:"post"}),e.onUnmounted(()=>{b=!0,i?.disconnect(),p!==void 0&&cancelAnimationFrame(p)}),r({refresh(g){return o.value=g,e.nextTick(S),!0}}),(g,E)=>{const T=e.resolveComponent("KTooltip");return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n),{key:0})):(e.openBlock(),e.createElementBlock("span",H,[e.createVNode(T,{class:"table-data-grid-cell-tooltip",disabled:!s.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:c.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:l,class:"table-data-grid-cell-content"},e.toDisplayString(c.value),513)]),_:1},8,["disabled","text"])]))}}}),J=({headers:t,slots:r,initialSort:o})=>{const l=e.computed(()=>({cells:{slots:r}})),s=a=>{const h=o?.sortColumnKey===a.key;return{colId:a.key,flex:!a.width&&!a.maxWidth?1:void 0,headerName:a.label,maxWidth:a.maxWidth,minWidth:a.minWidth,sortable:a.sortable??!1,unSortIcon:a.showSortIcon,...h?{initialSort:o?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:n=>n.data?.[a.key],width:a.width,cellRenderer:Q,cellRendererParams:{headerDef:a}}};return{columnDefs:e.computed(()=>t.value.map(s)),gridContext:l}},G=({config:t,headers:r,pageSize:o})=>{const l=new Set(r.filter(c=>c.sortable).map(c=>c.key)),s=t?.sortColumnKey&&l.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:s,sortColumnOrder:s?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},A=(t,r)=>t.sortColumnKey===r.sortColumnKey&&t.sortColumnOrder===r.sortColumnOrder&&t.pageSize===r.pageSize,X=({headers:t,pageSize:r,tableConfig:o,emitTableConfigUpdate:l,onExternalConfigChange:s})=>{const c=e.computed(()=>o.value?G({config:o.value,headers:t.value,pageSize:r.value}):void 0),a=e.ref(c.value??G({config:void 0,headers:t.value,pageSize:r.value}));e.watch(c,p=>{p&&!A(p,a.value)&&(a.value=p,s?.(p))});const h=p=>{const b=G({config:{...a.value,...p},headers:t.value,pageSize:r.value});A(b,a.value)||(a.value=b,l(b))},n=e.computed(()=>({sortColumnKey:a.value.sortColumnKey,sortColumnOrder:a.value.sortColumnOrder})),i=e.computed(()=>o.value?.pageSize??r.value);return{activeTableConfig:e.readonly(a),activeSort:n,activePageSize:i,patchTableConfig:h}},Y=({cellClick:t,headers:r,rowClick:o})=>{const l=e.computed(()=>new Set(r.value.filter(n=>n.disableRowClick).map(n=>n.key))),s=n=>{const i=n.event?.target;return i instanceof Element?i.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},c=n=>{const i=s(n);return!!(i&&l.value.has(i))};return{onCellClick:n=>{const i=n.colDef.colId;!n.data||!i||t({columnKey:i,row:n.data,value:n.value})},onRowClick:n=>{n.data&&!c(n)&&o(n.data,n)}}},Z=({activeSort:t,emitSort:r,patchTableConfig:o})=>{const l=(c,a)=>{c.applyColumnState({state:a.sortColumnKey?[{colId:a.sortColumnKey,sort:a.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:c=>{const a=c.api.getColumnState().filter(i=>i.sort).sort((i,p)=>(i.sortIndex??0)-(p.sortIndex??0)),h=a[a.length-1],n=h?{sortColumnKey:h.colId,sortColumnOrder:h.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};n.sortColumnKey===t.value.sortColumnKey&&n.sortColumnOrder===t.value.sortColumnOrder||(r(n),o(n),a.length>1&&l(c.api,n))},applySortToGrid:l}},ee={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 te(){const t=M.createI18n("en-us",ee);return{i18n:t,i18nT:M.i18nTComponent(t)}}const oe={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},ae={key:0,class:"table-error-state","data-testid":"table-error-state"},ne={key:1,class:"table-empty-state","data-testid":"table-empty-state"},le=((t,r)=>{const o=t.__vccOpts||t;for(const[l,s]of r)o[l]=s;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:r}){O.ModuleRegistry.registerModules([O.AllCommunityModule,O.ClientSideRowModelModule,O.InfiniteRowModelModule]);const o=t.mode??"infinite",l=r,{i18n:{t:s}}=te(),c=e.useSlots(),a=e.shallowRef(),{activeTableConfig:h,activeSort:n,activePageSize:i,patchTableConfig:p}=X({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:C=>l("update:tableConfig",C),onExternalConfigChange:C=>{a.value&&I(a.value,C)}}),{onSortChanged:b,applySortToGrid:I}=Z({activeSort:n,emitSort:C=>l("sort",C),patchTableConfig:p}),{onCellClick:S,onRowClick:w}=Y({cellClick:C=>l("cell:click",C),headers:e.toRef(()=>t.headers),rowClick:(C,B)=>l("row:click",C,B)}),g={resizable:!1,sortable:!1,suppressMovable:!0},E=e.computed(()=>h.value.sortColumnKey),T=e.computed(()=>h.value.sortColumnOrder),v=e.computed(()=>[i.value,t.refreshKey,E.value,T.value]),D=o==="infinite"?P({fetcher:e.toRef(()=>t.fetcher),resetKey:v,sort:n}):void 0,F=D?.datasource,N=e.computed(()=>D?D.data.value:t.rows),x=e.computed(()=>D?.isFetching.value??!1),z=e.computed(()=>t.rows?Array.from(t.rows):void 0),{columnDefs:d,gridContext:u}=J({headers:e.toRef(()=>t.headers),slots:c,initialSort:n.value}),{fetchState:m,hasData:f,state:y}=L(N,e.toRef(()=>D?.error.value),x),R=e.computed(()=>y.value===m.SUCCESS&&!f.value);D&&W({emitState:C=>l("state",C),fetchLifecycleState:y,hasData:f});const _=C=>{a.value=C.api,l("grid:ready",C.api)};return(C,B)=>{const V=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",oe,[t.error?(e.openBlock(),e.createElementBlock("div",ae,[e.renderSlot(C.$slots,"error-state",{},()=>[e.createVNode(V,{"icon-variant":"error",message:e.unref(s)("errorState.message"),title:e.unref(s)("errorState.title")},null,8,["message","title"])],!0)])):R.value?(e.openBlock(),e.createElementBlock("div",ne,[e.renderSlot(C.$slots,"empty-state",{},()=>[e.createVNode(V,{message:e.unref(s)("emptyState.message"),title:e.unref(s)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(U.AgGridVue),{key:2,"cache-block-size":e.unref(o)==="infinite"?e.unref(i):void 0,class:"table-data-grid-grid","column-defs":e.unref(d),context:e.unref(u),datasource:e.unref(o)==="infinite"?e.unref(F):void 0,"default-col-def":g,"infinite-initial-row-count":e.unref(o)==="infinite"?1:void 0,loading:x.value,"row-data":e.unref(o)==="unpaginated"?z.value:void 0,"row-model-type":e.unref(o)==="unpaginated"?"clientSide":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(O.themeQuartz),onCellClicked:e.unref(S),onGridReady:_,onRowClicked:e.unref(w),onSortChanged:e.unref(b)},null,8,["cache-block-size","column-defs","context","datasource","infinite-initial-row-count","loading","row-data","row-model-type","theme","onCellClicked","onRowClicked","onSortChanged"]))])}}}),[["__scopeId","data-v-17889e6a"]]);k.TableDataGrid=le,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(E,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):(E=typeof globalThis<"u"?globalThis:E||self,e(E["kong-ui-public-table-data-grid"]={},E.Vue,E.AgGridVue,E.agGridCommunity,E["kong-ui-public-i18n"]))})(this,(function(E,e,q,K,_){"use strict";var M=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(M||{});const W=t=>!!t?.length;function P(t,l,o,n=W){const s=e.computed(()=>n(t.value)),r=e.computed(()=>{const h=t.value!==void 0,i=l.value!==void 0&&l.value!==null;return o.value?"LOADING":s.value?"SUCCESS":i?"ERROR":h?"SUCCESS":"PENDING"});return{fetchState:M,hasData:s,state:r}}const j=({emitState:t,fetchLifecycleState:l,hasData:o})=>{e.watch(()=>({hasData:o.value,state:l.value}),({hasData:n,state:s})=>{if(s!==M.PENDING){if(s===M.LOADING){t({hasData:n,state:"loading"});return}if(s===M.ERROR){t({hasData:n,state:"error"});return}t({hasData:n,state:"success"})}})},H=({startRow:t,endRow:l})=>{const o=l-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},Q=({startRow:t,rowsLength:l,pageSize:o,total:n,hasMore:s})=>{if(typeof n=="number")return n;if(s!==!0&&(s===!1||l<o))return t+l},J=({fetcher:t,resetKey:l,sort:o})=>{const n=new Map,s=new Map,r=e.ref(0),d=e.shallowRef(),h=e.shallowRef(),i=e.shallowRef(),m=e.ref(0),C=e.ref(!1);let b,D;const S=f=>f===r.value&&b===t.value&&D===l?.value,c=()=>{C.value=m.value>0},k=()=>{i.value=void 0,m.value+=1,c()},y=()=>{m.value=Math.max(0,m.value-1),c()},B=f=>{const p=s.get(f);if(p)return p;let a;const u={promise:new Promise(g=>{a=g}),resolve:g=>a(g)};return s.set(f,u),u},w=(f,p)=>{p.resolve(!1),s.get(f)===p&&s.delete(f)},O=async({blockIndex:f,currentBlockCompletion:p,datasourceId:a})=>{if(f===0)return"ready";const u=s.get(f-1);if(!u)return w(f,p),"failed";const g=await u.promise;return S(a)?g?"ready":(w(f,p),"failed"):(w(f,p),"stale")},F=({blockIndex:f,currentBlockCompletion:p,getRowsParams:a,pageSize:u,result:g})=>{g.cursor!==void 0&&n.set(f,g.cursor),a.successCallback(g.data,Q({startRow:a.startRow,rowsLength:g.data.length,pageSize:u,total:g.total,hasMore:g.hasMore})),a.startRow===0&&(h.value=g.data),p.resolve(!0)},T=({blockIndex:f,currentBlockCompletion:p,fetchError:a,getRowsParams:u})=>{i.value=a,u.failCallback(),w(f,p)},I=()=>{const f=t.value;if(!f)throw new Error("TableDataGrid requires a fetcher in infinite mode");b=f,D=l?.value;const p=r.value+1;return r.value=p,n.clear(),s.clear(),h.value=void 0,i.value=void 0,m.value=0,c(),{async getRows(a){if(!S(p)){a.failCallback();return}const{blockIndex:u,pageSize:g}=H({startRow:a.startRow,endRow:a.endRow}),R=B(u);if(await O({blockIndex:u,currentBlockCompletion:R,datasourceId:p})!=="ready"||!S(p)){a.failCallback(),w(u,R);return}k();try{const N=u>0?n.get(u-1):void 0,G=await f({mode:"infinite",pageSize:g,cursor:N,sort:o?.value});if(!S(p)){a.failCallback(),w(u,R);return}F({blockIndex:u,currentBlockCompletion:R,getRowsParams:a,pageSize:g,result:G})}catch(N){if(!S(p)){a.failCallback(),w(u,R);return}T({blockIndex:u,currentBlockCompletion:R,fetchError:N,getRowsParams:a})}finally{S(p)&&y()}}}},x=()=>{d.value=I()};return e.watch([t,()=>l?.value],()=>{x()},{immediate:!0}),{datasource:e.readonly(d),data:e.shallowReadonly(h),error:e.readonly(i),isFetching:e.readonly(C)}},z=t=>typeof t!="number"?null:Number.isFinite(t)?t:null,X=(t,l)=>t.reduce((o,n)=>{const s=z(Reflect.get(n,l.key));return s===null?o:{sum:o.sum+s,max:Math.max(o.max,s)}},{sum:0,max:0}),Y=(t,l)=>{const o=(l??[]).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"},Z=(t,l,o)=>{if(t===null)return 0;const n=o==="relative"?l.sum:l.max;return!n||n<=0?0:Math.min(Math.max(t/n,0),1)},ee=(t,l="en-US")=>{const o=new Intl.NumberFormat(l,{maximumFractionDigits:2}),n=o.format(t);return t>0&&t<.01?`< ${o.format(.01)} %`:`${n} %`},te=["data-threshold"],oe={key:0,class:"table-data-grid-cell-relative","data-testid":"table-data-grid-cell-relative"},ae=["data-threshold"],ne=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:l}){const o=e.shallowRef(t.params),n=e.ref(null),s=e.ref(!1),r=e.computed(()=>o.value.headerDef??{key:"",label:""}),d=e.computed(()=>o.value.context?.presentation),h=e.computed(()=>o.value.context?.cells?.tooltipTarget?.value??"body"),i=e.computed(()=>{const a=o.value;return a.valueFormatted!==void 0&&a.valueFormatted!==null?String(a.valueFormatted):String(a.value??"")}),m=e.computed(()=>o.value.value),C=e.computed(()=>z(m.value)),b=e.computed(()=>d.value?.stats[r.value.key]),D=e.computed(()=>d.value?.mode==="unpaginated"&&r.value.dataType==="number"),S=e.computed(()=>{if(!D.value||!r.value.showPercentage||!b.value)return;const a=C.value;if(a===null||b.value.sum<=0)return;const u=a/b.value.sum*100;return r.value.percentageFormatter?.(u)??ee(u,d.value?.locale)}),c=e.computed(()=>D.value&&!!r.value.bar&&(C.value!==null||m.value===null||m.value===void 0)),k=e.computed(()=>c.value&&b.value?Z(C.value,b.value,r.value.bar)*100:0),y=e.computed(()=>D.value&&C.value!==null?Y(C.value,r.value.thresholds):void 0),B=e.computed(()=>({column:r.value,refreshCell:()=>{const a=o.value.node;a&&o.value.api.refreshCells({force:!0,rowNodes:[a]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),w=(a,{slots:u})=>{const g=o.value.colDef?.colId,R=o.value.context?.cells?.slots;return!g||g==="cell-icon"||!R?.[g]?u.default?.():e.h("span",{class:"table-data-grid-cell-slot-content"},e.renderSlot(R,g,B.value,()=>u.default?.()??[]))},O=()=>{const a=o.value.context?.cells?.slots;return a?.["cell-icon"]?e.renderSlot(a,"cell-icon",B.value):null};let F,T,I=!1;const x=()=>{const a=n.value;s.value=!!a&&a.scrollWidth>a.clientWidth},f=()=>{I||(T!==void 0&&cancelAnimationFrame(T),T=requestAnimationFrame(()=>{T=void 0,x()}))},p=a=>{if(F?.disconnect(),a){F?.observe(a);const u=a.closest(".ag-cell");u&&F?.observe(u)}f()};return e.onMounted(()=>{F=new ResizeObserver(f),p(n.value)}),e.watch(n,p),e.onUnmounted(()=>{I=!0,F?.disconnect(),T!==void 0&&cancelAnimationFrame(T)}),l({refresh(a){return o.value=a,e.nextTick(f),!0}}),(a,u)=>{const g=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["table-data-grid-cell-renderer",{"table-data-grid-cell-renderer--bar":c.value,"table-data-grid-cell-renderer--percentage":!!S.value,[`table-data-grid-cell-renderer--text-${y.value}`]:!c.value&&!!y.value}]),"data-threshold":y.value},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(O))),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(w),null,{default:e.withCtx(()=>[e.createVNode(g,{class:"table-data-grid-cell-tooltip",disabled:!s.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:h.value,text:i.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:n,class:"table-data-grid-cell-content"},e.toDisplayString(i.value),513)]),_:1},8,["disabled","target","text"])]),_:1})),S.value?(e.openBlock(),e.createElementBlock("span",oe,"("+e.toDisplayString(S.value)+")",1)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"table-data-grid-cell-bar","data-testid":"table-data-grid-cell-bar","data-threshold":y.value},[e.createElementVNode("span",{class:"table-data-grid-cell-bar-fill","data-testid":"table-data-grid-cell-bar-fill",style:e.normalizeStyle({width:`${k.value}%`})},null,4)],8,ae)):e.createCommentVNode("",!0)],10,te)}}}),le=({headers:t,slots:l,initialSort:o,mode:n,rows:s,locale:r,tooltipTarget:d})=>{const h=n??"infinite",i=new Set,m=()=>{t.value.forEach(c=>{if(!!!(c.showPercentage||c.bar||c.thresholds?.length))return;const y=h==="infinite"?"percentage, bar, and threshold presentation is only supported in unpaginated mode":c.dataType!=="number"?'percentage, bar, and threshold presentation requires dataType: "number"':s?.value?.some(w=>{const O=Reflect.get(w,c.key);return O!=null&&z(O)===null})?"contains non-finite or nonnumeric values; numeric presentation skips those values":void 0;if(!y)return;const B=`${c.key}:${y}`;i.has(B)||(i.add(B),console.warn(`[TableDataGrid] Column "${c.key}" ${y}.`))})};e.watch([t,()=>s?.value],m,{deep:!0,immediate:!0});const C=e.computed(()=>{if(h!=="unpaginated")return{};const c=s?.value??[];return Object.fromEntries(t.value.filter(k=>k.dataType==="number").map(k=>[k.key,X(c,k)]))}),b=e.computed(()=>({cells:{slots:l,tooltipTarget:d},presentation:{mode:h,locale:r?.value??"en-US",stats:C.value}})),D=c=>{const k=o?.sortColumnKey===c.key;return{colId:c.key,flex:!c.width&&!c.maxWidth?1:void 0,headerName:c.label,maxWidth:c.maxWidth,minWidth:c.minWidth,sortable:c.sortable??!1,unSortIcon:c.showSortIcon,...k?{initialSort:o?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:y=>y.data?.[c.key],valueFormatter:y=>c.valueFormatter&&y.data?c.valueFormatter(y.value,y.data):String(y.value??""),width:c.width,cellRenderer:ne,cellRendererParams:{headerDef:c}}};return{columnDefs:e.computed(()=>t.value.map(D)),gridContext:b}},V=({config:t,headers:l,pageSize:o})=>{const n=new Set(l.filter(r=>r.sortable).map(r=>r.key)),s=t?.sortColumnKey&&n.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:s,sortColumnOrder:s?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},A=(t,l)=>t.sortColumnKey===l.sortColumnKey&&t.sortColumnOrder===l.sortColumnOrder&&t.pageSize===l.pageSize,re=({headers:t,pageSize:l,tableConfig:o,emitTableConfigUpdate:n,onExternalConfigChange:s})=>{const r=e.computed(()=>o.value?V({config:o.value,headers:t.value,pageSize:l.value}):void 0),d=e.ref(r.value??V({config:void 0,headers:t.value,pageSize:l.value}));e.watch(r,C=>{C&&!A(C,d.value)&&(d.value=C,s?.(C))});const h=C=>{const b=V({config:{...d.value,...C},headers:t.value,pageSize:l.value});A(b,d.value)||(d.value=b,n(b))},i=e.computed(()=>({sortColumnKey:d.value.sortColumnKey,sortColumnOrder:d.value.sortColumnOrder})),m=e.computed(()=>o.value?.pageSize??l.value);return{activeTableConfig:e.readonly(d),activeSort:i,activePageSize:m,patchTableConfig:h}},se=({cellClick:t,headers:l,rowClick:o})=>{const n=e.computed(()=>new Set(l.value.filter(i=>i.disableRowClick).map(i=>i.key))),s=i=>{const m=i.event?.target;return m instanceof Element?m.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},r=i=>{const m=s(i);return!!(m&&n.value.has(m))};return{onCellClick:i=>{const m=i.colDef.colId;!i.data||!m||t({columnKey:m,row:i.data,value:i.value})},onRowClick:i=>{i.data&&!r(i)&&o(i.data,i)}}},ie=({activeSort:t,emitSort:l,patchTableConfig:o})=>{const n=(r,d)=>{r.applyColumnState({state:d.sortColumnKey?[{colId:d.sortColumnKey,sort:d.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:r=>{const d=r.api.getColumnState().filter(m=>m.sort).sort((m,C)=>(m.sortIndex??0)-(C.sortIndex??0)),h=d[d.length-1],i=h?{sortColumnKey:h.colId,sortColumnOrder:h.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};i.sortColumnKey===t.value.sortColumnKey&&i.sortColumnOrder===t.value.sortColumnOrder||(l(i),o(i),d.length>1&&n(r.api,i))},applySortToGrid:n}},ce={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 ue(){const t=_.createI18n("en-us",ce);return{i18n:t,i18nT:_.i18nTComponent(t)}}const de={key:0,class:"table-error-state","data-testid":"table-error-state"},me={key:1,class:"table-empty-state","data-testid":"table-empty-state"},fe=((t,l)=>{const o=t.__vccOpts||t;for(const[n,s]of l)o[n]=s;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:l}){K.ModuleRegistry.registerModules([K.AllCommunityModule,K.ClientSideRowModelModule,K.InfiniteRowModelModule]);const o=t.mode??"infinite",n=l,{i18n:s}=ue(),{t:r}=s,d=e.useSlots(),h=e.shallowRef(),i=e.shallowRef(),m=e.shallowRef("body"),C=()=>{const v=document.fullscreenElement;m.value=v instanceof HTMLElement&&v.contains(i.value??null)?v:"body"};e.onMounted(()=>{C(),document.addEventListener("fullscreenchange",C)}),e.onBeforeUnmount(()=>{document.removeEventListener("fullscreenchange",C)});const{activeTableConfig:b,activeSort:D,activePageSize:S,patchTableConfig:c}=re({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:v=>n("update:tableConfig",v),onExternalConfigChange:v=>{h.value&&y(h.value,v)}}),{onSortChanged:k,applySortToGrid:y}=ie({activeSort:D,emitSort:v=>n("sort",v),patchTableConfig:c}),{onCellClick:B,onRowClick:w}=se({cellClick:v=>n("cell:click",v),headers:e.toRef(()=>t.headers),rowClick:(v,U)=>n("row:click",v,U)}),O={resizable:!1,sortable:!1,suppressMovable:!0},F=e.computed(()=>b.value.sortColumnKey),T=e.computed(()=>b.value.sortColumnOrder),I=e.computed(()=>[S.value,t.refreshKey,F.value,T.value]),x=o==="infinite"?J({fetcher:e.toRef(()=>t.fetcher),resetKey:I,sort:D}):void 0,f=x?.datasource,p=e.computed(()=>x?x.data.value:t.rows),a=e.computed(()=>x?.isFetching.value??!1),u=e.computed(()=>t.rows?Array.from(t.rows):void 0),{columnDefs:g,gridContext:R}=le({headers:e.toRef(()=>t.headers),locale:e.computed(()=>s.locale),mode:o,rows:u,slots:d,tooltipTarget:m,initialSort:D.value}),{fetchState:$,hasData:N,state:G}=P(p,e.toRef(()=>x?.error.value),a),pe=e.computed(()=>G.value===$.SUCCESS&&!N.value);x&&j({emitState:v=>n("state",v),fetchLifecycleState:G,hasData:N});const ge=v=>{h.value=v.api,n("grid:ready",v.api)};return(v,U)=>{const L=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",{ref_key:"rootElement",ref:i,class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},[t.error?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(v.$slots,"error-state",{},()=>[e.createVNode(L,{"icon-variant":"error",message:e.unref(r)("errorState.message"),title:e.unref(r)("errorState.title")},null,8,["message","title"])],!0)])):pe.value?(e.openBlock(),e.createElementBlock("div",me,[e.renderSlot(v.$slots,"empty-state",{},()=>[e.createVNode(L,{message:e.unref(r)("emptyState.message"),title:e.unref(r)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(q.AgGridVue),{key:2,"cache-block-size":e.unref(o)==="infinite"?e.unref(S):void 0,class:"table-data-grid-grid","column-defs":e.unref(g),context:e.unref(R),datasource:e.unref(o)==="infinite"?e.unref(f):void 0,"default-col-def":O,"infinite-initial-row-count":e.unref(o)==="infinite"?1:void 0,loading:a.value,"row-data":e.unref(o)==="unpaginated"?u.value:void 0,"row-model-type":e.unref(o)==="unpaginated"?"clientSide":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(K.themeQuartz),onCellClicked:e.unref(B),onGridReady:ge,onRowClicked:e.unref(w),onSortChanged:e.unref(k)},null,8,["cache-block-size","column-defs","context","datasource","infinite-initial-row-count","loading","row-data","row-model-type","theme","onCellClicked","onRowClicked","onSortChanged"]))],512)}}}),[["__scopeId","data-v-08dd32b5"]]);E.TableDataGrid=fe,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -17,6 +17,7 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
|
|
|
17
17
|
[columnKey: string]: (props: TableDataGridCellSlotProps<Row>) => unknown;
|
|
18
18
|
'empty-state': () => unknown;
|
|
19
19
|
'error-state': () => unknown;
|
|
20
|
+
'cell-icon': (props: TableDataGridCellSlotProps<Row>) => unknown;
|
|
20
21
|
};
|
|
21
22
|
emit: {
|
|
22
23
|
(e: "grid:ready", api: GridReadyEvent<Row>["api"]): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAqSA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAmB1B,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmUO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;;;;;;;KAAmC,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;qCA/SoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAHzD,MAAM,OAAO;uBACb,MAAM,OAAO;qBACf,CAAC,KAAK,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;;;YAM5D,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,OAAO,GAAG,SAAS,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI;YACzD,YAAY,WAAW,6BAA6B,CAAC,GAAG,CAAC,GAAG,IAAI;YAChE,MAAM,WAAW,iBAAiB,GAAG,IAAI;YACzC,oBAAoB,WAAW,mBAAmB,GAAG,IAAI;;EAyS3D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { TableDataGridHeader } from '../types';
|
|
2
2
|
import type { ICellRendererParams } from 'ag-grid-community';
|
|
3
|
-
import type { Slots } from 'vue';
|
|
3
|
+
import type { Ref, Slots } from 'vue';
|
|
4
|
+
import { type TableDataGridPresentationContext } from '../utils/tableDataGridPresentation';
|
|
4
5
|
type CellRendererParams = ICellRendererParams<Record<string, unknown>> & {
|
|
5
6
|
/** Set internally via `cellRendererParams` so the renderer can resolve the
|
|
6
7
|
* host slot and build its payload without leaking AG Grid's own `column`. */
|
|
@@ -8,7 +9,9 @@ type CellRendererParams = ICellRendererParams<Record<string, unknown>> & {
|
|
|
8
9
|
context?: {
|
|
9
10
|
cells?: {
|
|
10
11
|
slots?: Slots;
|
|
12
|
+
tooltipTarget?: Readonly<Ref<string | HTMLElement>>;
|
|
11
13
|
};
|
|
14
|
+
presentation?: TableDataGridPresentationContext;
|
|
12
15
|
};
|
|
13
16
|
};
|
|
14
17
|
type __VLS_Props = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableDataGridCellRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGridCellRenderer.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableDataGridCellRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGridCellRenderer.vue"],"names":[],"mappings":"AA+VA,OAAO,KAAK,EAEV,mBAAmB,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAuB,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAY1D,OAAO,EAKL,KAAK,gCAAgC,EACtC,MAAM,oCAAoC,CAAA;AAE3C,KAAK,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG;IACvE;iFAC6E;IAC7E,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,KAAK,CAAC;YAAC,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAA;SAAE,CAAA;QAC9E,YAAY,CAAC,EAAE,gCAAgC,CAAA;KAChD,CAAA;CACF,CAAA;AAMD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;CAC3B,CAAC;AA8RF,QAAA,MAAM,YAAY;wBAhII,kBAAkB;oPAmItC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import type { TableDataGridHeader, TableDataGridRow, TableDataGridSort } from '../types';
|
|
2
2
|
import type { ColDef } from 'ag-grid-community';
|
|
3
3
|
import type { Ref, Slots } from 'vue';
|
|
4
|
+
import { type TableDataGridColumnStats } from '../utils/tableDataGridPresentation';
|
|
4
5
|
/**
|
|
5
6
|
* Converts `headers` into what AG Grid needs to render the table's columns:
|
|
6
7
|
* the column definitions themselves, and the shared grid `context`.
|
|
7
8
|
*/
|
|
8
|
-
export declare const useTableDataGridColumnDefs: <Row extends object = TableDataGridRow>({ headers, slots, initialSort, }: {
|
|
9
|
+
export declare const useTableDataGridColumnDefs: <Row extends object = TableDataGridRow>({ headers, slots, initialSort, mode, rows, locale, tooltipTarget, }: {
|
|
9
10
|
headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
|
|
10
11
|
slots: Slots;
|
|
11
12
|
initialSort?: TableDataGridSort;
|
|
13
|
+
mode?: "infinite" | "unpaginated";
|
|
14
|
+
rows?: Readonly<Ref<readonly object[] | undefined>>;
|
|
15
|
+
locale?: Readonly<Ref<string>>;
|
|
16
|
+
tooltipTarget?: Readonly<Ref<string | HTMLElement>>;
|
|
12
17
|
}) => {
|
|
13
18
|
columnDefs: import("vue").ComputedRef<ColDef<Row, any>[]>;
|
|
14
19
|
gridContext: import("vue").ComputedRef<{
|
|
@@ -16,6 +21,12 @@ export declare const useTableDataGridColumnDefs: <Row extends object = TableData
|
|
|
16
21
|
slots: Readonly<{
|
|
17
22
|
[name: string]: import("vue").Slot<any> | undefined;
|
|
18
23
|
}>;
|
|
24
|
+
tooltipTarget: Readonly<Ref<string | HTMLElement, string | HTMLElement>> | undefined;
|
|
25
|
+
};
|
|
26
|
+
presentation: {
|
|
27
|
+
mode: "infinite" | "unpaginated";
|
|
28
|
+
locale: string;
|
|
29
|
+
stats: Record<string, TableDataGridColumnStats>;
|
|
19
30
|
};
|
|
20
31
|
}>;
|
|
21
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAGrC,OAAO,EAGL,KAAK,wBAAwB,EAC9B,MAAM,oCAAoC,CAAA;AAE3C;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,qEAQ/E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,KAAK,EAAE,KAAK,CAAA;IACZ,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,IAAI,CAAC,EAAE,UAAU,GAAG,aAAa,CAAA;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAA;IACnD,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC9B,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAA;CACpD;;;;;;;;;;;;;;;CAkGA,CAAA"}
|
|
@@ -21,6 +21,10 @@ export type TableDataGridCellSlotProps<Row extends object = TableDataGridRow> =
|
|
|
21
21
|
/** Forces AG Grid to re-render this cell. */
|
|
22
22
|
refreshCell: () => void;
|
|
23
23
|
};
|
|
24
|
+
export type TableDataGridThreshold = {
|
|
25
|
+
value: number;
|
|
26
|
+
type: 'warning' | 'error';
|
|
27
|
+
};
|
|
24
28
|
export type TableDataGridHeader<Row extends object = TableDataGridRow> = {
|
|
25
29
|
key: Extract<keyof Row, string>;
|
|
26
30
|
label: string;
|
|
@@ -41,6 +45,21 @@ export type TableDataGridHeader<Row extends object = TableDataGridRow> = {
|
|
|
41
45
|
* when `sortable` is true.
|
|
42
46
|
*/
|
|
43
47
|
showSortIcon?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Marks a column as numeric for aggregate percentage, bar, and threshold
|
|
50
|
+
* presentation. These options are only applied in unpaginated mode.
|
|
51
|
+
*/
|
|
52
|
+
dataType?: 'number';
|
|
53
|
+
/** Formats the raw cell value for display. */
|
|
54
|
+
valueFormatter?: (value: unknown, row: Row) => string;
|
|
55
|
+
/** Shows the row's share of the full returned column total. */
|
|
56
|
+
showPercentage?: boolean;
|
|
57
|
+
/** Formats percentage points, e.g. 50 for a 50% share (not the 0–1 ratio). */
|
|
58
|
+
percentageFormatter?: (percentage: number) => string;
|
|
59
|
+
/** Renders a bar using the column total or maximum as its denominator. */
|
|
60
|
+
bar?: 'relative' | 'absolute';
|
|
61
|
+
/** Applies warning/error presentation at or above the crossed threshold. */
|
|
62
|
+
thresholds?: TableDataGridThreshold[];
|
|
44
63
|
};
|
|
45
64
|
export type TableDataGridSortDirection = 'asc' | 'desc';
|
|
46
65
|
export type TableDataGridSort = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,aAAa,CAAA;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACtD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEhE,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,kBAAkB,CAAA;IACzB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,GAAG,CAAA;AAErF,MAAM,MAAM,6BAA6B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACjF,GAAG,EAAE,GAAG,CAAA;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,GAAG,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACvE,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,MAAM,CAAC,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import type { TableDataGridHeader, TableDataGridThreshold } from '../types';
|
|
2
|
+
export type TableDataGridColumnStats = {
|
|
3
|
+
sum: number;
|
|
4
|
+
max: number;
|
|
5
|
+
};
|
|
6
|
+
export type TableDataGridPresentationContext = {
|
|
7
|
+
mode: 'infinite' | 'unpaginated';
|
|
8
|
+
locale: string;
|
|
9
|
+
stats: Record<string, TableDataGridColumnStats>;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Accept numeric values only; generic grid cells must not coerce strings or booleans.
|
|
13
|
+
*
|
|
14
|
+
* @param value - Raw cell value.
|
|
15
|
+
* @returns The finite number unchanged, or null without coercion.
|
|
16
|
+
*/
|
|
17
|
+
export declare const toFiniteNumber: (value: unknown) => number | null;
|
|
18
|
+
/**
|
|
19
|
+
* Calculate sum and maximum from the complete returned result, ignoring missing or invalid values.
|
|
20
|
+
*
|
|
21
|
+
* @param rows - Complete result for the current query.
|
|
22
|
+
* @param header - Column key to aggregate.
|
|
23
|
+
* @returns Column sum and maximum, with the maximum floored at zero.
|
|
24
|
+
*/
|
|
25
|
+
export declare const getColumnStats: (rows: readonly object[], header: Pick<TableDataGridHeader, "key">) => TableDataGridColumnStats;
|
|
26
|
+
/**
|
|
27
|
+
* Preserve TopN threshold precedence: highest crossed value wins, with error winning ties.
|
|
28
|
+
*
|
|
29
|
+
* @param value - Numeric cell value.
|
|
30
|
+
* @param thresholds - Optional warning and error thresholds.
|
|
31
|
+
* @returns The highest crossed threshold type, or undefined.
|
|
32
|
+
*/
|
|
33
|
+
export declare const getThresholdType: (value: number, thresholds: readonly TableDataGridThreshold[] | undefined) => TableDataGridThreshold["type"] | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* Return a clamped 0–1 ratio: relative uses the column sum; absolute uses its maximum.
|
|
36
|
+
*
|
|
37
|
+
* @param value - Numeric cell value, or null when missing.
|
|
38
|
+
* @param stats - Sum and maximum of the complete column.
|
|
39
|
+
* @param mode - Relative (sum) or absolute (maximum) scaling.
|
|
40
|
+
* @returns A ratio between zero and one; zero for missing values or nonpositive denominators.
|
|
41
|
+
*/
|
|
42
|
+
export declare const getBarRatio: (value: number | null, stats: TableDataGridColumnStats, mode: TableDataGridHeader["bar"]) => number;
|
|
43
|
+
/**
|
|
44
|
+
* Format a percentage already on the 0–100 scale, preserving the small-value placeholder.
|
|
45
|
+
*
|
|
46
|
+
* @param percentage - Percentage expressed on the 0–100 scale.
|
|
47
|
+
* @param locale - Number formatting locale; defaults to en-US.
|
|
48
|
+
* @returns Localized percentage text, including the small-value placeholder.
|
|
49
|
+
*/
|
|
50
|
+
export declare const formatPercentage: (percentage: number, locale?: string) => string;
|
|
51
|
+
//# sourceMappingURL=tableDataGridPresentation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tableDataGridPresentation.d.ts","sourceRoot":"","sources":["../../../src/utils/tableDataGridPresentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,gCAAgC,GAAG;IAC7C,IAAI,EAAE,UAAU,GAAG,aAAa,CAAA;IAChC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAA;CAChD,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,IAMxD,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,MAAM,EAAE,EACvB,QAAQ,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,KACvC,wBAcF,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,EACb,YAAY,SAAS,sBAAsB,EAAE,GAAG,SAAS,KACxD,sBAAsB,CAAC,MAAM,CAAC,GAAG,SAanC,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,OAAO,MAAM,GAAG,IAAI,EACpB,OAAO,wBAAwB,EAC/B,MAAM,mBAAmB,CAAC,KAAK,CAAC,KAC/B,MAYF,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,eAAgB,KAAG,MAOvE,CAAA"}
|