@kong-ui-public/table-data-grid 0.3.4-pr.3598.efa3e41fa.0 → 0.3.5
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as A, shallowRef as N, ref as R, computed as
|
|
1
|
+
import { defineComponent as A, shallowRef as N, ref as R, computed as k, onMounted as W, watch as O, onUnmounted as V, nextTick as $, resolveComponent as T, openBlock as w, createElementBlock as G, createVNode as I, withCtx as j, createElementVNode as q, toDisplayString as H, readonly as _, renderSlot as x, unref as S, createBlock as P } from "vue";
|
|
2
2
|
import { AgGridVue as Q } from "ag-grid-vue3";
|
|
3
3
|
import { ModuleRegistry as J, AllCommunityModule as X, InfiniteRowModelModule as Y, themeQuartz as Z } from "ag-grid-community";
|
|
4
4
|
import { createI18n as ee, i18nTComponent as te } from "@kong-ui-public/i18n";
|
|
@@ -9,7 +9,7 @@ const ae = { class: "table-data-grid-cell-renderer" }, oe = /* @__PURE__ */ A({
|
|
|
9
9
|
params: {}
|
|
10
10
|
},
|
|
11
11
|
setup(e, { expose: i }) {
|
|
12
|
-
const a = N(e.params), t = R(null), r = R(!1), h =
|
|
12
|
+
const a = N(e.params), t = R(null), r = R(!1), h = k(() => a.value.valueFormatted ?? String(a.value.value ?? ""));
|
|
13
13
|
let f, u, m = !1;
|
|
14
14
|
const C = () => {
|
|
15
15
|
const d = t.value;
|
|
@@ -35,11 +35,12 @@ const ae = { class: "table-data-grid-cell-renderer" }, oe = /* @__PURE__ */ A({
|
|
|
35
35
|
return a.value = d, $(p), !0;
|
|
36
36
|
}
|
|
37
37
|
}), (d, y) => {
|
|
38
|
-
const
|
|
38
|
+
const E = T("KTooltip");
|
|
39
39
|
return w(), G("span", ae, [
|
|
40
|
-
I(
|
|
40
|
+
I(E, {
|
|
41
41
|
class: "table-data-grid-cell-tooltip",
|
|
42
42
|
disabled: !r.value,
|
|
43
|
+
"kpop-attributes": { popoverDelay: 400 },
|
|
43
44
|
"max-width": "300",
|
|
44
45
|
placement: "bottom-start",
|
|
45
46
|
target: "body",
|
|
@@ -61,7 +62,7 @@ const ae = { class: "table-data-grid-cell-renderer" }, oe = /* @__PURE__ */ A({
|
|
|
61
62
|
var F = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(F || {});
|
|
62
63
|
const re = (e) => !!e?.length;
|
|
63
64
|
function ne(e, i, a, t = re) {
|
|
64
|
-
const r =
|
|
65
|
+
const r = k(() => t(e.value)), h = k(() => {
|
|
65
66
|
const u = e.value !== void 0, m = i.value !== void 0 && i.value !== null;
|
|
66
67
|
return a.value ? "LOADING" : r.value ? "SUCCESS" : m ? "ERROR" : u ? "SUCCESS" : "PENDING";
|
|
67
68
|
});
|
|
@@ -131,7 +132,7 @@ const se = ({
|
|
|
131
132
|
u.value = void 0, m.value += 1, g();
|
|
132
133
|
}, y = () => {
|
|
133
134
|
m.value = Math.max(0, m.value - 1), g();
|
|
134
|
-
},
|
|
135
|
+
}, E = (o) => {
|
|
135
136
|
const n = t.get(o);
|
|
136
137
|
if (n)
|
|
137
138
|
return n;
|
|
@@ -188,7 +189,7 @@ const se = ({
|
|
|
188
189
|
} = le({
|
|
189
190
|
startRow: n.startRow,
|
|
190
191
|
endRow: n.endRow
|
|
191
|
-
}), l =
|
|
192
|
+
}), l = E(s), z = await c({
|
|
192
193
|
blockIndex: s,
|
|
193
194
|
currentBlockCompletion: l,
|
|
194
195
|
datasourceId: o
|
|
@@ -286,7 +287,7 @@ const ve = {
|
|
|
286
287
|
resizable: !1,
|
|
287
288
|
sortable: !1,
|
|
288
289
|
suppressMovable: !0
|
|
289
|
-
}, h =
|
|
290
|
+
}, h = k(() => e.headers.map((c) => ({
|
|
290
291
|
colId: c.key,
|
|
291
292
|
// Headers without explicit width constraints should fill available space.
|
|
292
293
|
flex: !c.width && !c.maxWidth ? 1 : void 0,
|
|
@@ -295,7 +296,7 @@ const ve = {
|
|
|
295
296
|
minWidth: c.minWidth,
|
|
296
297
|
valueGetter: (D) => D.data?.[c.key],
|
|
297
298
|
width: c.width
|
|
298
|
-
}))), f =
|
|
299
|
+
}))), f = k(() => [e.fetcher, e.pageSize, e.refreshKey]), {
|
|
299
300
|
data: u,
|
|
300
301
|
datasource: m,
|
|
301
302
|
error: C,
|
|
@@ -307,7 +308,7 @@ const ve = {
|
|
|
307
308
|
fetchState: g,
|
|
308
309
|
hasData: d,
|
|
309
310
|
state: y
|
|
310
|
-
} = ne(u, C, p),
|
|
311
|
+
} = ne(u, C, p), E = k(() => y.value === g.SUCCESS && !d.value);
|
|
311
312
|
se({
|
|
312
313
|
emitState: (c) => a("state", c),
|
|
313
314
|
fetchLifecycleState: y,
|
|
@@ -327,7 +328,7 @@ const ve = {
|
|
|
327
328
|
title: S(t)("errorState.title")
|
|
328
329
|
}, null, 8, ["message", "title"])
|
|
329
330
|
], !0)
|
|
330
|
-
])) :
|
|
331
|
+
])) : E.value ? (w(), G("div", he, [
|
|
331
332
|
x(c.$slots, "empty-state", {}, () => [
|
|
332
333
|
I(D, {
|
|
333
334
|
message: S(t)("emptyState.message"),
|
|
@@ -356,7 +357,7 @@ const ve = {
|
|
|
356
357
|
for (const [t, r] of i)
|
|
357
358
|
a[t] = r;
|
|
358
359
|
return a;
|
|
359
|
-
},
|
|
360
|
+
}, ke = /* @__PURE__ */ ye(ge, [["__scopeId", "data-v-b8bd22c9"]]);
|
|
360
361
|
export {
|
|
361
|
-
|
|
362
|
+
ke as TableDataGrid
|
|
362
363
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(y,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):(y=typeof globalThis<"u"?globalThis:y||self,e(y["kong-ui-public-table-data-grid"]={},y.Vue,y.AgGridVue,y.agGridCommunity,y["kong-ui-public-i18n"]))})(this,(function(y,e,G,R,N){"use strict";const M={class:"table-data-grid-cell-renderer"},O=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:c}){const o=e.shallowRef(t.params),a=e.ref(null),
|
|
1
|
+
(function(y,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):(y=typeof globalThis<"u"?globalThis:y||self,e(y["kong-ui-public-table-data-grid"]={},y.Vue,y.AgGridVue,y.agGridCommunity,y["kong-ui-public-i18n"]))})(this,(function(y,e,G,R,N){"use strict";const M={class:"table-data-grid-cell-renderer"},O=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:c}){const o=e.shallowRef(t.params),a=e.ref(null),n=e.ref(!1),b=e.computed(()=>o.value.valueFormatted??String(o.value.value??""));let m,u,p=!1;const D=()=>{const f=a.value;n.value=!!f&&f.scrollWidth>f.clientWidth},g=()=>{p||(u!==void 0&&cancelAnimationFrame(u),u=requestAnimationFrame(()=>{u=void 0,D()}))},S=f=>{if(m?.disconnect(),f){m?.observe(f);const k=f.closest(".ag-cell");k&&m?.observe(k)}g()};return e.onMounted(()=>{m=new ResizeObserver(g),S(a.value)}),e.watch(a,S,{flush:"post"}),e.onUnmounted(()=>{p=!0,m?.disconnect(),u!==void 0&&cancelAnimationFrame(u)}),c({refresh(f){return o.value=f,e.nextTick(g),!0}}),(f,k)=>{const E=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",M,[e.createVNode(E,{class:"table-data-grid-cell-tooltip",disabled:!n.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:b.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:a,class:"table-data-grid-cell-content"},e.toDisplayString(b.value),513)]),_:1},8,["disabled","text"])])}}});var w=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(w||{});const I=t=>!!t?.length;function T(t,c,o,a=I){const n=e.computed(()=>a(t.value)),b=e.computed(()=>{const u=t.value!==void 0,p=c.value!==void 0&&c.value!==null;return o.value?"LOADING":n.value?"SUCCESS":p?"ERROR":u?"SUCCESS":"PENDING"});return{fetchState:w,hasData:n,state:b}}const x=({emitState:t,fetchLifecycleState:c,hasData:o})=>{e.watch(()=>({hasData:o.value,state:c.value}),({hasData:a,state:n})=>{if(n!==w.PENDING){if(n===w.LOADING){t({hasData:a,state:"loading"});return}if(n===w.ERROR){t({hasData:a,state:"error"});return}t({hasData:a,state:"success"})}})},z=({startRow:t,endRow:c})=>{const o=c-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},A=({startRow:t,rowsLength:c,pageSize:o,total:a,hasMore:n})=>{if(typeof a=="number")return a;if(n!==!0&&(n===!1||c<o))return t+c},V=({fetcher:t,resetKey:c})=>{const o=new Map,a=new Map,n=e.ref(0),b=e.shallowRef(),m=e.shallowRef(),u=e.shallowRef(),p=e.ref(0),D=e.ref(!1),g=r=>r===n.value,S=()=>{D.value=p.value>0},f=()=>{u.value=void 0,p.value+=1,S()},k=()=>{p.value=Math.max(0,p.value-1),S()},E=r=>{const s=a.get(r);if(s)return s;let l;const h={promise:new Promise(i=>{l=i}),resolve:i=>l(i)};return a.set(r,h),h},v=(r,s)=>{s.resolve(!1),a.get(r)===s&&a.delete(r)},d=async({blockIndex:r,currentBlockCompletion:s,datasourceId:l})=>{if(r===0)return"ready";const h=a.get(r-1);if(!h)return v(r,s),"failed";const i=await h.promise;return g(l)?i?"ready":(v(r,s),"failed"):(v(r,s),"stale")},_=({blockIndex:r,currentBlockCompletion:s,getRowsParams:l,pageSize:h,result:i})=>{i.cursor!==void 0&&o.set(r,i.cursor),l.successCallback(i.data,A({startRow:l.startRow,rowsLength:i.data.length,pageSize:h,total:i.total,hasMore:i.hasMore})),l.startRow===0&&(m.value=i.data),s.resolve(!0)},C=({blockIndex:r,currentBlockCompletion:s,fetchError:l,getRowsParams:h})=>{u.value=l,h.failCallback(),v(r,s)},j=()=>{const r=n.value+1;return n.value=r,o.clear(),a.clear(),m.value=void 0,u.value=void 0,p.value=0,S(),{async getRows(s){const{blockIndex:l,pageSize:h}=z({startRow:s.startRow,endRow:s.endRow}),i=E(l),F=await d({blockIndex:l,currentBlockCompletion:i,datasourceId:r});if(F!=="ready"){F==="failed"&&s.failCallback();return}f();try{const B=l>0?o.get(l-1):void 0,H=await t({mode:"infinite",pageSize:h,cursor:B});if(!g(r)){v(l,i);return}_({blockIndex:l,currentBlockCompletion:i,getRowsParams:s,pageSize:h,result:H})}catch(B){if(!g(r)){v(l,i);return}C({blockIndex:l,currentBlockCompletion:i,fetchError:B,getRowsParams:s})}finally{g(r)&&k()}}}},P=()=>{b.value=j()};return e.watch(()=>c?.value,()=>{P()},{immediate:!0}),{datasource:e.readonly(b),data:e.readonly(m),error:e.readonly(u),isFetching:e.readonly(D)}},K={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 L(){const t=N.createI18n("en-us",K);return{i18n:t,i18nT:N.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"},$=((t,c)=>{const o=t.__vccOpts||t;for(const[a,n]of c)o[a]=n;return o})(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}){R.ModuleRegistry.registerModules([R.AllCommunityModule,R.InfiniteRowModelModule]);const o=c,{i18n:{t:a}}=L(),n={cellRenderer:O,resizable:!1,sortable:!1,suppressMovable:!0},b=e.computed(()=>t.headers.map(d=>({colId:d.key,flex:!d.width&&!d.maxWidth?1:void 0,headerName:d.label,maxWidth:d.maxWidth,minWidth:d.minWidth,valueGetter:C=>C.data?.[d.key],width:d.width}))),m=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:u,datasource:p,error:D,isFetching:g}=V({fetcher:t.fetcher,resetKey:m}),{fetchState:S,hasData:f,state:k}=T(u,D,g),E=e.computed(()=>k.value===S.SUCCESS&&!f.value);x({emitState:d=>o("state",d),fetchLifecycleState:k,hasData:f});const v=d=>{o("grid:ready",d.api)};return(d,_)=>{const C=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",U,[t.error?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(d.$slots,"error-state",{},()=>[e.createVNode(C,{"icon-variant":"error",message:e.unref(a)("errorState.message"),title:e.unref(a)("errorState.title")},null,8,["message","title"])],!0)])):E.value?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(d.$slots,"empty-state",{},()=>[e.createVNode(C,{message:e.unref(a)("emptyState.message"),title:e.unref(a)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(G.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":b.value,datasource:e.unref(p),"default-col-def":n,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(R.themeQuartz),onGridReady:v},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-b8bd22c9"]]);y.TableDataGrid=$,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -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":"AAiIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5D,KAAK,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAMtE,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;CAC3B,CAAC;AA6IF,QAAA,MAAM,YAAY;wBAtEI,kBAAkB;oPAyEtC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong-ui-public/table-data-grid",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/table-data-grid.umd.js",
|
|
6
6
|
"module": "./dist/table-data-grid.es.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"access": "public"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@kong/kongponents": "9.61.
|
|
24
|
+
"@kong/kongponents": "9.61.6",
|
|
25
25
|
"vue": "^3.5.35",
|
|
26
26
|
"@kong-ui-public/i18n": "^2.5.0"
|
|
27
27
|
},
|