@kong-ui-public/table-data-grid 0.1.4 → 0.1.5-pr.3462.c424524ce.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
CHANGED
|
@@ -21,26 +21,32 @@ app.use(Kongponents)
|
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
|
+
`TableDataGrid` fills the height of its parent container by default. Place it in
|
|
25
|
+
a parent with an explicit height, or in a flex layout where the parent owns the
|
|
26
|
+
available height, so the grid can expand and shrink with its container.
|
|
27
|
+
|
|
24
28
|
```vue
|
|
25
29
|
<template>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
<div class="rows-panel">
|
|
31
|
+
<KButton @click="refreshRows">
|
|
32
|
+
Refresh rows
|
|
33
|
+
</KButton>
|
|
34
|
+
|
|
35
|
+
<TableDataGrid
|
|
36
|
+
:fetcher="fetchRows"
|
|
37
|
+
:headers="headers"
|
|
38
|
+
:page-size="25"
|
|
39
|
+
:refresh-key="refreshKey"
|
|
40
|
+
@state="handleState"
|
|
41
|
+
>
|
|
42
|
+
<template #empty-state>
|
|
43
|
+
<KEmptyState
|
|
44
|
+
message="Try changing filters or refreshing the dataset."
|
|
45
|
+
title="No rows found"
|
|
46
|
+
/>
|
|
47
|
+
</template>
|
|
48
|
+
</TableDataGrid>
|
|
49
|
+
</div>
|
|
44
50
|
</template>
|
|
45
51
|
|
|
46
52
|
<script setup lang="ts">
|
|
@@ -91,6 +97,15 @@ const handleState = (payload: TableDataGridStatePayload) => {
|
|
|
91
97
|
lastState.value = payload
|
|
92
98
|
}
|
|
93
99
|
</script>
|
|
100
|
+
|
|
101
|
+
<style scoped>
|
|
102
|
+
.rows-panel {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
height: 480px;
|
|
106
|
+
min-height: 0;
|
|
107
|
+
}
|
|
108
|
+
</style>
|
|
94
109
|
```
|
|
95
110
|
|
|
96
111
|
## Props
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.kong-ui-public-table-data-grid[data-v-
|
|
1
|
+
.kong-ui-public-table-data-grid[data-v-f9bd2cc8]{border:1px solid #e0e4ea;border:1px solid var(--kui-color-border, #e0e4ea);border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.table-data-grid-grid[data-v-f9bd2cc8]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-resize-handle-color: transparent;--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex}
|
|
@@ -308,7 +308,7 @@ const ne = {
|
|
|
308
308
|
for (const [a, l] of i)
|
|
309
309
|
o[a] = l;
|
|
310
310
|
return o;
|
|
311
|
-
}, he = /* @__PURE__ */ ue(ce, [["__scopeId", "data-v-
|
|
311
|
+
}, he = /* @__PURE__ */ ue(ce, [["__scopeId", "data-v-f9bd2cc8"]]);
|
|
312
312
|
export {
|
|
313
313
|
he as TableDataGrid
|
|
314
314
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(f,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):(f=typeof globalThis<"u"?globalThis:f||self,e(f["kong-ui-public-table-data-grid"]={},f.Vue,f.AgGridVue,f.agGridCommunity,f["kong-ui-public-i18n"]))})(this,function(f,e,F,v,I){"use strict";var D=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(D||{});const O=t=>!!(t!=null&&t.length);function _(t,c,r,o=O){const l=e.computed(()=>o(t.value)),y=e.computed(()=>{const p=t.value!==void 0,m=c.value!==void 0&&c.value!==null;return r.value?"LOADING":l.value?"SUCCESS":m?"ERROR":p?"SUCCESS":"PENDING"});return{fetchState:D,hasData:l,state:y}}const z=({emitState:t,fetchLifecycleState:c,hasData:r})=>{e.watch(()=>({hasData:r.value,state:c.value}),({hasData:o,state:l})=>{if(l!==D.PENDING){if(l===D.LOADING){t({hasData:o,state:"loading"});return}if(l===D.ERROR){t({hasData:o,state:"error"});return}t({hasData:o,state:"success"})}})},T=({startRow:t,endRow:c})=>{const r=c-t;return{blockIndex:r>0?Math.floor(t/r):0,pageSize:r}},A=({startRow:t,rowsLength:c,pageSize:r,total:o,hasMore:l})=>{if(typeof o=="number")return o;if(l!==!0&&(l===!1||c<r))return t+c},L=({fetcher:t,resetKey:c})=>{const r=new Map,o=new Map,l=e.ref(0),y=e.shallowRef(),S=e.shallowRef(),p=e.shallowRef(),m=e.ref(0),C=e.ref(!1),g=a=>a===l.value,b=()=>{C.value=m.value>0},E=()=>{p.value=void 0,m.value+=1,b()},R=()=>{m.value=Math.max(0,m.value-1),b()},B=a=>{const n=o.get(a);if(n)return n;let s;const d={promise:new Promise(i=>{s=i}),resolve:i=>s(i)};return o.set(a,d),d},h=(a,n)=>{n.resolve(!1),o.get(a)===n&&o.delete(a)},u=async({blockIndex:a,currentBlockCompletion:n,datasourceId:s})=>{if(a===0)return"ready";const d=o.get(a-1);if(!d)return h(a,n),"failed";const i=await d.promise;return g(s)?i?"ready":(h(a,n),"failed"):(h(a,n),"stale")},N=({blockIndex:a,currentBlockCompletion:n,getRowsParams:s,pageSize:d,result:i})=>{i.cursor!==void 0&&r.set(a,i.cursor),s.successCallback(i.data,A({startRow:s.startRow,rowsLength:i.data.length,pageSize:d,total:i.total,hasMore:i.hasMore})),s.startRow===0&&(S.value=i.data),n.resolve(!0)},k=({blockIndex:a,currentBlockCompletion:n,fetchError:s,getRowsParams:d})=>{p.value=s,d.failCallback(),h(a,n)},w=()=>{const a=l.value+1;return l.value=a,r.clear(),o.clear(),S.value=void 0,p.value=void 0,m.value=0,b(),{async getRows(n){const{blockIndex:s,pageSize:d}=T({startRow:n.startRow,endRow:n.endRow}),i=B(s),M=await u({blockIndex:s,currentBlockCompletion:i,datasourceId:a});if(M!=="ready"){M==="failed"&&n.failCallback();return}E();try{const G=s>0?r.get(s-1):void 0,H=await t({mode:"infinite",pageSize:d,cursor:G});if(!g(a)){h(s,i);return}N({blockIndex:s,currentBlockCompletion:i,getRowsParams:n,pageSize:d,result:H})}catch(G){if(!g(a)){h(s,i);return}k({blockIndex:s,currentBlockCompletion:i,fetchError:G,getRowsParams:n})}finally{g(a)&&R()}}}},$=()=>{y.value=w()};return e.watch(()=>c==null?void 0:c.value,()=>{$()},{immediate:!0}),{datasource:e.readonly(y),data:e.readonly(S),error:e.readonly(p),isFetching:e.readonly(C)}},V={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 x(){const t=I.createI18n("en-us",V);return{i18n:t,i18nT:I.i18nTComponent(t)}}const U={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},W={key:0,class:"table-error-state","data-testid":"table-error-state"},q={key:1,class:"table-empty-state","data-testid":"table-empty-state"},j=((t,c)=>{const r=t.__vccOpts||t;for(const[o,l]of c)r[o]=l;return r})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]}},emits:["grid:ready","state"],setup(t,{emit:c}){v.ModuleRegistry.registerModules([v.AllCommunityModule,v.InfiniteRowModelModule]);const r=c,{i18n:{t:o}}=x(),l={resizable:!1,sortable:!1,suppressMovable:!0},y=e.computed(()=>t.headers.map(u=>({colId:u.key,flex:!u.width&&!u.maxWidth?1:void 0,headerName:u.label,maxWidth:u.maxWidth,minWidth:u.minWidth,valueGetter:k=>{var w;return(w=k.data)==null?void 0:w[u.key]},width:u.width}))),S=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:p,datasource:m,error:C,isFetching:g}=L({fetcher:t.fetcher,resetKey:S}),{fetchState:b,hasData:E,state:R}=_(p,C,g),B=e.computed(()=>R.value===b.SUCCESS&&!E.value);z({emitState:u=>r("state",u),fetchLifecycleState:R,hasData:E});const h=u=>{r("grid:ready",u.api)};return(u,N)=>{const k=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",U,[t.error?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(u.$slots,"error-state",{},()=>[e.createVNode(k,{"icon-variant":"error",message:e.unref(o)("errorState.message"),title:e.unref(o)("errorState.title")},null,8,["message","title"])],!0)])):B.value?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(u.$slots,"empty-state",{},()=>[e.createVNode(k,{message:e.unref(o)("emptyState.message"),title:e.unref(o)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(F.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":y.value,datasource:e.unref(m),"default-col-def":l,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(v.themeQuartz),onGridReady:h},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-
|
|
1
|
+
(function(f,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):(f=typeof globalThis<"u"?globalThis:f||self,e(f["kong-ui-public-table-data-grid"]={},f.Vue,f.AgGridVue,f.agGridCommunity,f["kong-ui-public-i18n"]))})(this,function(f,e,F,v,I){"use strict";var D=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(D||{});const O=t=>!!(t!=null&&t.length);function _(t,c,r,o=O){const l=e.computed(()=>o(t.value)),y=e.computed(()=>{const p=t.value!==void 0,m=c.value!==void 0&&c.value!==null;return r.value?"LOADING":l.value?"SUCCESS":m?"ERROR":p?"SUCCESS":"PENDING"});return{fetchState:D,hasData:l,state:y}}const z=({emitState:t,fetchLifecycleState:c,hasData:r})=>{e.watch(()=>({hasData:r.value,state:c.value}),({hasData:o,state:l})=>{if(l!==D.PENDING){if(l===D.LOADING){t({hasData:o,state:"loading"});return}if(l===D.ERROR){t({hasData:o,state:"error"});return}t({hasData:o,state:"success"})}})},T=({startRow:t,endRow:c})=>{const r=c-t;return{blockIndex:r>0?Math.floor(t/r):0,pageSize:r}},A=({startRow:t,rowsLength:c,pageSize:r,total:o,hasMore:l})=>{if(typeof o=="number")return o;if(l!==!0&&(l===!1||c<r))return t+c},L=({fetcher:t,resetKey:c})=>{const r=new Map,o=new Map,l=e.ref(0),y=e.shallowRef(),S=e.shallowRef(),p=e.shallowRef(),m=e.ref(0),C=e.ref(!1),g=a=>a===l.value,b=()=>{C.value=m.value>0},E=()=>{p.value=void 0,m.value+=1,b()},R=()=>{m.value=Math.max(0,m.value-1),b()},B=a=>{const n=o.get(a);if(n)return n;let s;const d={promise:new Promise(i=>{s=i}),resolve:i=>s(i)};return o.set(a,d),d},h=(a,n)=>{n.resolve(!1),o.get(a)===n&&o.delete(a)},u=async({blockIndex:a,currentBlockCompletion:n,datasourceId:s})=>{if(a===0)return"ready";const d=o.get(a-1);if(!d)return h(a,n),"failed";const i=await d.promise;return g(s)?i?"ready":(h(a,n),"failed"):(h(a,n),"stale")},N=({blockIndex:a,currentBlockCompletion:n,getRowsParams:s,pageSize:d,result:i})=>{i.cursor!==void 0&&r.set(a,i.cursor),s.successCallback(i.data,A({startRow:s.startRow,rowsLength:i.data.length,pageSize:d,total:i.total,hasMore:i.hasMore})),s.startRow===0&&(S.value=i.data),n.resolve(!0)},k=({blockIndex:a,currentBlockCompletion:n,fetchError:s,getRowsParams:d})=>{p.value=s,d.failCallback(),h(a,n)},w=()=>{const a=l.value+1;return l.value=a,r.clear(),o.clear(),S.value=void 0,p.value=void 0,m.value=0,b(),{async getRows(n){const{blockIndex:s,pageSize:d}=T({startRow:n.startRow,endRow:n.endRow}),i=B(s),M=await u({blockIndex:s,currentBlockCompletion:i,datasourceId:a});if(M!=="ready"){M==="failed"&&n.failCallback();return}E();try{const G=s>0?r.get(s-1):void 0,H=await t({mode:"infinite",pageSize:d,cursor:G});if(!g(a)){h(s,i);return}N({blockIndex:s,currentBlockCompletion:i,getRowsParams:n,pageSize:d,result:H})}catch(G){if(!g(a)){h(s,i);return}k({blockIndex:s,currentBlockCompletion:i,fetchError:G,getRowsParams:n})}finally{g(a)&&R()}}}},$=()=>{y.value=w()};return e.watch(()=>c==null?void 0:c.value,()=>{$()},{immediate:!0}),{datasource:e.readonly(y),data:e.readonly(S),error:e.readonly(p),isFetching:e.readonly(C)}},V={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 x(){const t=I.createI18n("en-us",V);return{i18n:t,i18nT:I.i18nTComponent(t)}}const U={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},W={key:0,class:"table-error-state","data-testid":"table-error-state"},q={key:1,class:"table-empty-state","data-testid":"table-empty-state"},j=((t,c)=>{const r=t.__vccOpts||t;for(const[o,l]of c)r[o]=l;return r})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]}},emits:["grid:ready","state"],setup(t,{emit:c}){v.ModuleRegistry.registerModules([v.AllCommunityModule,v.InfiniteRowModelModule]);const r=c,{i18n:{t:o}}=x(),l={resizable:!1,sortable:!1,suppressMovable:!0},y=e.computed(()=>t.headers.map(u=>({colId:u.key,flex:!u.width&&!u.maxWidth?1:void 0,headerName:u.label,maxWidth:u.maxWidth,minWidth:u.minWidth,valueGetter:k=>{var w;return(w=k.data)==null?void 0:w[u.key]},width:u.width}))),S=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:p,datasource:m,error:C,isFetching:g}=L({fetcher:t.fetcher,resetKey:S}),{fetchState:b,hasData:E,state:R}=_(p,C,g),B=e.computed(()=>R.value===b.SUCCESS&&!E.value);z({emitState:u=>r("state",u),fetchLifecycleState:R,hasData:E});const h=u=>{r("grid:ready",u.api)};return(u,N)=>{const k=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",U,[t.error?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(u.$slots,"error-state",{},()=>[e.createVNode(k,{"icon-variant":"error",message:e.unref(o)("errorState.message"),title:e.unref(o)("errorState.title")},null,8,["message","title"])],!0)])):B.value?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(u.$slots,"empty-state",{},()=>[e.createVNode(k,{message:e.unref(o)("emptyState.message"),title:e.unref(o)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(F.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":y.value,datasource:e.unref(m),"default-col-def":l,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(v.themeQuartz),onGridReady:h},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-f9bd2cc8"]]);f.TableDataGrid=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -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":"AA4LA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAc/D,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;WAoNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAhN7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;KA4MmD,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;;uBAlMM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;;EA+LpD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,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"}
|