@kong-ui-public/table-data-grid 0.3.12-pr.3713.f969d6fca.0 → 0.3.13

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/dist/style.css CHANGED
@@ -1 +1 @@
1
- .table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-f70c15d1]{border:none;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-f70c15d1]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #000933);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--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;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}
1
+ .table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-b8bd22c9]{border:none;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-b8bd22c9]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #0d0e14);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--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;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}
@@ -1,45 +1,45 @@
1
- import { defineComponent as K, shallowRef as N, ref as E, computed as k, onMounted as V, watch as z, onUnmounted as $, nextTick as P, resolveComponent as L, openBlock as w, createElementBlock as G, createVNode as O, withCtx as j, createElementVNode as q, toDisplayString as H, readonly as _, renderSlot as A, unref as S, createBlock as Q } from "vue";
2
- import { AgGridVue as J } from "ag-grid-vue3";
3
- import { ModuleRegistry as X, AllCommunityModule as Y, InfiniteRowModelModule as Z, themeQuartz as ee } from "ag-grid-community";
4
- import { createI18n as te, i18nTComponent as ae } from "@kong-ui-public/i18n";
5
- const oe = { class: "table-data-grid-cell-renderer" }, T = /* @__PURE__ */ K({
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
+ import { AgGridVue as Q } from "ag-grid-vue3";
3
+ import { ModuleRegistry as J, AllCommunityModule as X, InfiniteRowModelModule as Y, themeQuartz as Z } from "ag-grid-community";
4
+ import { createI18n as ee, i18nTComponent as te } from "@kong-ui-public/i18n";
5
+ const ae = { class: "table-data-grid-cell-renderer" }, oe = /* @__PURE__ */ A({
6
6
  name: "TableDataGridCellRenderer",
7
7
  __name: "TableDataGridCellRenderer",
8
8
  props: {
9
9
  params: {}
10
10
  },
11
- setup(e, { expose: l }) {
12
- const a = N(e.params), t = E(null), n = E(!1), h = k(() => a.value.valueFormatted ?? String(a.value.value ?? ""));
11
+ setup(e, { expose: i }) {
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;
16
- n.value = !!d && d.scrollWidth > d.clientWidth;
16
+ r.value = !!d && d.scrollWidth > d.clientWidth;
17
17
  }, p = () => {
18
18
  m || (u !== void 0 && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
19
19
  u = void 0, C();
20
20
  }));
21
- }, y = (d) => {
21
+ }, g = (d) => {
22
22
  if (f?.disconnect(), d) {
23
23
  f?.observe(d);
24
- const g = d.closest(".ag-cell");
25
- g && f?.observe(g);
24
+ const y = d.closest(".ag-cell");
25
+ y && f?.observe(y);
26
26
  }
27
27
  p();
28
28
  };
29
- return V(() => {
30
- f = new ResizeObserver(p), y(t.value);
31
- }), z(t, y, { flush: "post" }), $(() => {
29
+ return W(() => {
30
+ f = new ResizeObserver(p), g(t.value);
31
+ }), O(t, g, { flush: "post" }), V(() => {
32
32
  m = !0, f?.disconnect(), u !== void 0 && cancelAnimationFrame(u);
33
- }), l({
33
+ }), i({
34
34
  refresh(d) {
35
- return a.value = d, P(p), !0;
35
+ return a.value = d, $(p), !0;
36
36
  }
37
- }), (d, g) => {
38
- const R = L("KTooltip");
39
- return w(), G("span", oe, [
40
- O(R, {
37
+ }), (d, y) => {
38
+ const E = T("KTooltip");
39
+ return w(), G("span", ae, [
40
+ I(E, {
41
41
  class: "table-data-grid-cell-tooltip",
42
- disabled: !n.value,
42
+ disabled: !r.value,
43
43
  "kpop-attributes": { popoverDelay: 400 },
44
44
  "max-width": "300",
45
45
  placement: "bottom-start",
@@ -61,37 +61,37 @@ const oe = { class: "table-data-grid-cell-renderer" }, T = /* @__PURE__ */ K({
61
61
  });
62
62
  var F = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(F || {});
63
63
  const re = (e) => !!e?.length;
64
- function ne(e, l, a, t = re) {
65
- const n = k(() => t(e.value)), h = k(() => {
66
- const u = e.value !== void 0, m = l.value !== void 0 && l.value !== null;
67
- return a.value ? "LOADING" : n.value ? "SUCCESS" : m ? "ERROR" : u ? "SUCCESS" : "PENDING";
64
+ function ne(e, i, a, t = re) {
65
+ const r = k(() => t(e.value)), h = k(() => {
66
+ const u = e.value !== void 0, m = i.value !== void 0 && i.value !== null;
67
+ return a.value ? "LOADING" : r.value ? "SUCCESS" : m ? "ERROR" : u ? "SUCCESS" : "PENDING";
68
68
  });
69
69
  return {
70
70
  fetchState: F,
71
- hasData: n,
71
+ hasData: r,
72
72
  state: h
73
73
  };
74
74
  }
75
75
  const se = ({
76
76
  emitState: e,
77
- fetchLifecycleState: l,
77
+ fetchLifecycleState: i,
78
78
  hasData: a
79
79
  }) => {
80
- z(
80
+ O(
81
81
  () => ({
82
82
  hasData: a.value,
83
- state: l.value
83
+ state: i.value
84
84
  }),
85
- ({ hasData: t, state: n }) => {
86
- if (n !== F.PENDING) {
87
- if (n === F.LOADING) {
85
+ ({ hasData: t, state: r }) => {
86
+ if (r !== F.PENDING) {
87
+ if (r === F.LOADING) {
88
88
  e({
89
89
  hasData: t,
90
90
  state: "loading"
91
91
  });
92
92
  return;
93
93
  }
94
- if (n === F.ERROR) {
94
+ if (r === F.ERROR) {
95
95
  e({
96
96
  hasData: t,
97
97
  state: "error"
@@ -105,141 +105,140 @@ const se = ({
105
105
  }
106
106
  }
107
107
  );
108
- }, le = ({ startRow: e, endRow: l }) => {
109
- const a = l - e;
108
+ }, le = ({ startRow: e, endRow: i }) => {
109
+ const a = i - e;
110
110
  return {
111
111
  blockIndex: a > 0 ? Math.floor(e / a) : 0,
112
112
  pageSize: a
113
113
  };
114
114
  }, ie = ({
115
115
  startRow: e,
116
- rowsLength: l,
116
+ rowsLength: i,
117
117
  pageSize: a,
118
118
  total: t,
119
- hasMore: n
119
+ hasMore: r
120
120
  }) => {
121
121
  if (typeof t == "number")
122
122
  return t;
123
- if (n !== !0 && (n === !1 || l < a))
124
- return e + l;
125
- }, ce = (e) => e.map(({ colId: l, sort: a }) => ({ colId: l, sort: a })), ue = ({
123
+ if (r !== !0 && (r === !1 || i < a))
124
+ return e + i;
125
+ }, ce = ({
126
126
  fetcher: e,
127
- resetKey: l
127
+ resetKey: i
128
128
  }) => {
129
- const a = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = E(0), h = N(), f = N(), u = N(), m = E(0), C = E(!1), p = (r) => r === n.value, y = () => {
129
+ const a = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), r = R(0), h = N(), f = N(), u = N(), m = R(0), C = R(!1), p = (o) => o === r.value, g = () => {
130
130
  C.value = m.value > 0;
131
131
  }, d = () => {
132
- u.value = void 0, m.value += 1, y();
133
- }, g = () => {
134
- m.value = Math.max(0, m.value - 1), y();
135
- }, R = (r) => {
136
- const s = t.get(r);
137
- if (s)
138
- return s;
139
- let i;
132
+ u.value = void 0, m.value += 1, g();
133
+ }, y = () => {
134
+ m.value = Math.max(0, m.value - 1), g();
135
+ }, E = (o) => {
136
+ const n = t.get(o);
137
+ if (n)
138
+ return n;
139
+ let s;
140
140
  const v = {
141
- promise: new Promise((c) => {
142
- i = c;
141
+ promise: new Promise((l) => {
142
+ s = l;
143
143
  }),
144
- resolve: (c) => i(c)
144
+ resolve: (l) => s(l)
145
145
  };
146
- return t.set(r, v), v;
147
- }, b = (r, s) => {
148
- s.resolve(!1), t.get(r) === s && t.delete(r);
149
- }, M = async ({
150
- blockIndex: r,
151
- currentBlockCompletion: s,
152
- datasourceId: i
146
+ return t.set(o, v), v;
147
+ }, b = (o, n) => {
148
+ n.resolve(!1), t.get(o) === n && t.delete(o);
149
+ }, c = async ({
150
+ blockIndex: o,
151
+ currentBlockCompletion: n,
152
+ datasourceId: s
153
153
  }) => {
154
- if (r === 0)
154
+ if (o === 0)
155
155
  return "ready";
156
- const v = t.get(r - 1);
156
+ const v = t.get(o - 1);
157
157
  if (!v)
158
- return b(r, s), "failed";
159
- const c = await v.promise;
160
- return p(i) ? c ? "ready" : (b(r, s), "failed") : (b(r, s), "stale");
161
- }, o = ({
162
- blockIndex: r,
163
- currentBlockCompletion: s,
164
- getRowsParams: i,
158
+ return b(o, n), "failed";
159
+ const l = await v.promise;
160
+ return p(s) ? l ? "ready" : (b(o, n), "failed") : (b(o, n), "stale");
161
+ }, M = ({
162
+ blockIndex: o,
163
+ currentBlockCompletion: n,
164
+ getRowsParams: s,
165
165
  pageSize: v,
166
- result: c
166
+ result: l
167
167
  }) => {
168
- c.cursor !== void 0 && a.set(r, c.cursor), i.successCallback(c.data, ie({
169
- startRow: i.startRow,
170
- rowsLength: c.data.length,
168
+ l.cursor !== void 0 && a.set(o, l.cursor), s.successCallback(l.data, ie({
169
+ startRow: s.startRow,
170
+ rowsLength: l.data.length,
171
171
  pageSize: v,
172
- total: c.total,
173
- hasMore: c.hasMore
174
- })), i.startRow === 0 && (f.value = c.data), s.resolve(!0);
175
- }, I = ({
176
- blockIndex: r,
177
- currentBlockCompletion: s,
178
- fetchError: i,
172
+ total: l.total,
173
+ hasMore: l.hasMore
174
+ })), s.startRow === 0 && (f.value = l.data), n.resolve(!0);
175
+ }, D = ({
176
+ blockIndex: o,
177
+ currentBlockCompletion: n,
178
+ fetchError: s,
179
179
  getRowsParams: v
180
180
  }) => {
181
- u.value = i, v.failCallback(), b(r, s);
182
- }, D = () => {
183
- const r = n.value + 1;
184
- return n.value = r, a.clear(), t.clear(), f.value = void 0, u.value = void 0, m.value = 0, y(), {
185
- async getRows(s) {
181
+ u.value = s, v.failCallback(), b(o, n);
182
+ }, K = () => {
183
+ const o = r.value + 1;
184
+ return r.value = o, a.clear(), t.clear(), f.value = void 0, u.value = void 0, m.value = 0, g(), {
185
+ async getRows(n) {
186
186
  const {
187
- blockIndex: i,
187
+ blockIndex: s,
188
188
  pageSize: v
189
189
  } = le({
190
- startRow: s.startRow,
191
- endRow: s.endRow
192
- }), c = R(i), x = await M({
193
- blockIndex: i,
194
- currentBlockCompletion: c,
195
- datasourceId: r
190
+ startRow: n.startRow,
191
+ endRow: n.endRow
192
+ }), l = E(s), z = await c({
193
+ blockIndex: s,
194
+ currentBlockCompletion: l,
195
+ datasourceId: o
196
196
  });
197
- if (x !== "ready") {
198
- x === "failed" && s.failCallback();
197
+ if (z !== "ready") {
198
+ z === "failed" && n.failCallback();
199
199
  return;
200
200
  }
201
201
  d();
202
202
  try {
203
- const B = i > 0 ? a.get(i - 1) : void 0, W = await e({
203
+ const B = s > 0 ? a.get(s - 1) : void 0, U = await e({
204
204
  mode: "infinite",
205
205
  pageSize: v,
206
- cursor: B,
207
- sort: ce(s.sortModel)
206
+ cursor: B
208
207
  });
209
- if (!p(r)) {
210
- b(i, c);
208
+ if (!p(o)) {
209
+ b(s, l);
211
210
  return;
212
211
  }
213
- o({
214
- blockIndex: i,
215
- currentBlockCompletion: c,
216
- getRowsParams: s,
212
+ M({
213
+ blockIndex: s,
214
+ currentBlockCompletion: l,
215
+ getRowsParams: n,
217
216
  pageSize: v,
218
- result: W
217
+ result: U
219
218
  });
220
219
  } catch (B) {
221
- if (!p(r)) {
222
- b(i, c);
220
+ if (!p(o)) {
221
+ b(s, l);
223
222
  return;
224
223
  }
225
- I({
226
- blockIndex: i,
227
- currentBlockCompletion: c,
224
+ D({
225
+ blockIndex: s,
226
+ currentBlockCompletion: l,
228
227
  fetchError: B,
229
- getRowsParams: s
228
+ getRowsParams: n
230
229
  });
231
230
  } finally {
232
- p(r) && g();
231
+ p(o) && y();
233
232
  }
234
233
  }
235
234
  };
236
- }, U = () => {
237
- h.value = D();
235
+ }, L = () => {
236
+ h.value = K();
238
237
  };
239
- return z(
240
- () => l?.value,
238
+ return O(
239
+ () => i?.value,
241
240
  () => {
242
- U();
241
+ L();
243
242
  },
244
243
  { immediate: !0 }
245
244
  ), {
@@ -248,30 +247,30 @@ const se = ({
248
247
  error: _(u),
249
248
  isFetching: _(C)
250
249
  };
251
- }, de = { title: "No Data", message: "There is no data to display." }, fe = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, me = {
252
- emptyState: de,
253
- errorState: fe
250
+ }, ue = { title: "No Data", message: "There is no data to display." }, de = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, fe = {
251
+ emptyState: ue,
252
+ errorState: de
254
253
  };
255
- function ve() {
256
- const e = te("en-us", me);
254
+ function me() {
255
+ const e = ee("en-us", fe);
257
256
  return {
258
257
  i18n: e,
259
- i18nT: ae(e)
258
+ i18nT: te(e)
260
259
  // Translation component <i18n-t>
261
260
  };
262
261
  }
263
- const pe = {
262
+ const ve = {
264
263
  class: "kong-ui-public-table-data-grid",
265
264
  "data-testid": "table-data-grid"
266
- }, he = {
265
+ }, pe = {
267
266
  key: 0,
268
267
  class: "table-error-state",
269
268
  "data-testid": "table-error-state"
270
- }, ye = {
269
+ }, he = {
271
270
  key: 1,
272
271
  class: "table-empty-state",
273
272
  "data-testid": "table-empty-state"
274
- }, ge = /* @__PURE__ */ K({
273
+ }, ge = /* @__PURE__ */ A({
275
274
  __name: "TableDataGrid",
276
275
  props: {
277
276
  headers: {},
@@ -280,95 +279,85 @@ const pe = {
280
279
  pageSize: { default: 25 },
281
280
  refreshKey: { type: [String, Number, Boolean] }
282
281
  },
283
- emits: ["grid:ready", "state", "row:click"],
284
- setup(e, { emit: l }) {
285
- X.registerModules([Y, Z]);
286
- const a = l, { i18n: { t } } = ve(), n = {
287
- cellRenderer: T,
282
+ emits: ["grid:ready", "state"],
283
+ setup(e, { emit: i }) {
284
+ J.registerModules([X, Y]);
285
+ const a = i, { i18n: { t } } = me(), r = {
286
+ cellRenderer: oe,
288
287
  resizable: !1,
289
288
  sortable: !1,
290
289
  suppressMovable: !0
291
- }, h = k(() => e.headers.map((o) => ({
292
- colId: o.key,
290
+ }, h = k(() => e.headers.map((c) => ({
291
+ colId: c.key,
293
292
  // Headers without explicit width constraints should fill available space.
294
- flex: !o.width && !o.maxWidth ? 1 : void 0,
295
- headerName: o.label,
296
- maxWidth: o.maxWidth,
297
- minWidth: o.minWidth,
298
- valueGetter: (D) => D.data?.[o.key],
299
- width: o.width,
300
- pinned: o.pinned,
301
- cellRenderer: o.cellRenderer ?? T,
302
- cellRendererParams: o.cellRendererParams,
303
- valueFormatter: o.valueFormatter,
304
- sortable: o.sortable ?? !1,
305
- // Always show the sort icon on sortable columns.
306
- unSortIcon: o.sortable ?? !1
293
+ flex: !c.width && !c.maxWidth ? 1 : void 0,
294
+ headerName: c.label,
295
+ maxWidth: c.maxWidth,
296
+ minWidth: c.minWidth,
297
+ valueGetter: (D) => D.data?.[c.key],
298
+ width: c.width
307
299
  }))), f = k(() => [e.fetcher, e.pageSize, e.refreshKey]), {
308
300
  data: u,
309
301
  datasource: m,
310
302
  error: C,
311
303
  isFetching: p
312
- } = ue({
304
+ } = ce({
313
305
  fetcher: e.fetcher,
314
306
  resetKey: f
315
307
  }), {
316
- fetchState: y,
308
+ fetchState: g,
317
309
  hasData: d,
318
- state: g
319
- } = ne(u, C, p), R = k(() => g.value === y.SUCCESS && !d.value);
310
+ state: y
311
+ } = ne(u, C, p), E = k(() => y.value === g.SUCCESS && !d.value);
320
312
  se({
321
- emitState: (o) => a("state", o),
322
- fetchLifecycleState: g,
313
+ emitState: (c) => a("state", c),
314
+ fetchLifecycleState: y,
323
315
  hasData: d
324
316
  });
325
- const b = (o) => {
326
- a("grid:ready", o.api);
327
- }, M = (o) => {
328
- o.data && a("row:click", o.data);
317
+ const b = (c) => {
318
+ a("grid:ready", c.api);
329
319
  };
330
- return (o, I) => {
331
- const D = L("KEmptyState");
332
- return w(), G("div", pe, [
333
- e.error ? (w(), G("div", he, [
334
- A(o.$slots, "error-state", {}, () => [
335
- O(D, {
320
+ return (c, M) => {
321
+ const D = T("KEmptyState");
322
+ return w(), G("div", ve, [
323
+ e.error ? (w(), G("div", pe, [
324
+ x(c.$slots, "error-state", {}, () => [
325
+ I(D, {
336
326
  "icon-variant": "error",
337
327
  message: S(t)("errorState.message"),
338
328
  title: S(t)("errorState.title")
339
329
  }, null, 8, ["message", "title"])
340
330
  ], !0)
341
- ])) : R.value ? (w(), G("div", ye, [
342
- A(o.$slots, "empty-state", {}, () => [
343
- O(D, {
331
+ ])) : E.value ? (w(), G("div", he, [
332
+ x(c.$slots, "empty-state", {}, () => [
333
+ I(D, {
344
334
  message: S(t)("emptyState.message"),
345
335
  title: S(t)("emptyState.title")
346
336
  }, null, 8, ["message", "title"])
347
337
  ], !0)
348
- ])) : (w(), Q(S(J), {
338
+ ])) : (w(), P(S(Q), {
349
339
  key: 2,
350
340
  "cache-block-size": e.pageSize,
351
341
  class: "table-data-grid-grid",
352
342
  "column-defs": h.value,
353
343
  datasource: S(m),
354
- "default-col-def": n,
344
+ "default-col-def": r,
355
345
  "infinite-initial-row-count": 1,
356
346
  loading: S(p),
357
347
  "row-model-type": "infinite",
358
348
  "suppress-cell-focus": !0,
359
- theme: S(ee),
360
- onGridReady: b,
361
- onRowClicked: M
349
+ theme: S(Z),
350
+ onGridReady: b
362
351
  }, null, 8, ["cache-block-size", "column-defs", "datasource", "loading", "theme"]))
363
352
  ]);
364
353
  };
365
354
  }
366
- }), be = (e, l) => {
355
+ }), ye = (e, i) => {
367
356
  const a = e.__vccOpts || e;
368
- for (const [t, n] of l)
369
- a[t] = n;
357
+ for (const [t, r] of i)
358
+ a[t] = r;
370
359
  return a;
371
- }, Re = /* @__PURE__ */ be(ge, [["__scopeId", "data-v-f70c15d1"]]);
360
+ }, ke = /* @__PURE__ */ ye(ge, [["__scopeId", "data-v-b8bd22c9"]]);
372
361
  export {
373
- Re as TableDataGrid
362
+ ke as TableDataGrid
374
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,I,E,N){"use strict";const O={class:"table-data-grid-cell-renderer"},M=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:i}){const o=e.shallowRef(t.params),a=e.ref(null),s=e.ref(!1),b=e.computed(()=>o.value.valueFormatted??String(o.value.value??""));let m,u,p=!1;const C=()=>{const f=a.value;s.value=!!f&&f.scrollWidth>f.clientWidth},g=()=>{p||(u!==void 0&&cancelAnimationFrame(u),u=requestAnimationFrame(()=>{u=void 0,C()}))},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)}),i({refresh(f){return o.value=f,e.nextTick(g),!0}}),(f,k)=>{const R=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",O,[e.createVNode(R,{class:"table-data-grid-cell-tooltip",disabled:!s.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 T=t=>!!t?.length;function x(t,i,o,a=T){const s=e.computed(()=>a(t.value)),b=e.computed(()=>{const u=t.value!==void 0,p=i.value!==void 0&&i.value!==null;return o.value?"LOADING":s.value?"SUCCESS":p?"ERROR":u?"SUCCESS":"PENDING"});return{fetchState:w,hasData:s,state:b}}const z=({emitState:t,fetchLifecycleState:i,hasData:o})=>{e.watch(()=>({hasData:o.value,state:i.value}),({hasData:a,state:s})=>{if(s!==w.PENDING){if(s===w.LOADING){t({hasData:a,state:"loading"});return}if(s===w.ERROR){t({hasData:a,state:"error"});return}t({hasData:a,state:"success"})}})},A=({startRow:t,endRow:i})=>{const o=i-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},V=({startRow:t,rowsLength:i,pageSize:o,total:a,hasMore:s})=>{if(typeof a=="number")return a;if(s!==!0&&(s===!1||i<o))return t+i},K=t=>t.map(({colId:i,sort:o})=>({colId:i,sort:o})),L=({fetcher:t,resetKey:i})=>{const o=new Map,a=new Map,s=e.ref(0),b=e.shallowRef(),m=e.shallowRef(),u=e.shallowRef(),p=e.ref(0),C=e.ref(!1),g=n=>n===s.value,S=()=>{C.value=p.value>0},f=()=>{u.value=void 0,p.value+=1,S()},k=()=>{p.value=Math.max(0,p.value-1),S()},R=n=>{const l=a.get(n);if(l)return l;let c;const h={promise:new Promise(d=>{c=d}),resolve:d=>c(d)};return a.set(n,h),h},v=(n,l)=>{l.resolve(!1),a.get(n)===l&&a.delete(n)},_=async({blockIndex:n,currentBlockCompletion:l,datasourceId:c})=>{if(n===0)return"ready";const h=a.get(n-1);if(!h)return v(n,l),"failed";const d=await h.promise;return g(c)?d?"ready":(v(n,l),"failed"):(v(n,l),"stale")},r=({blockIndex:n,currentBlockCompletion:l,getRowsParams:c,pageSize:h,result:d})=>{d.cursor!==void 0&&o.set(n,d.cursor),c.successCallback(d.data,V({startRow:c.startRow,rowsLength:d.data.length,pageSize:h,total:d.total,hasMore:d.hasMore})),c.startRow===0&&(m.value=d.data),l.resolve(!0)},B=({blockIndex:n,currentBlockCompletion:l,fetchError:c,getRowsParams:h})=>{u.value=c,h.failCallback(),v(n,l)},D=()=>{const n=s.value+1;return s.value=n,o.clear(),a.clear(),m.value=void 0,u.value=void 0,p.value=0,S(),{async getRows(l){const{blockIndex:c,pageSize:h}=A({startRow:l.startRow,endRow:l.endRow}),d=R(c),G=await _({blockIndex:c,currentBlockCompletion:d,datasourceId:n});if(G!=="ready"){G==="failed"&&l.failCallback();return}f();try{const F=c>0?o.get(c-1):void 0,Q=await t({mode:"infinite",pageSize:h,cursor:F,sort:K(l.sortModel)});if(!g(n)){v(c,d);return}r({blockIndex:c,currentBlockCompletion:d,getRowsParams:l,pageSize:h,result:Q})}catch(F){if(!g(n)){v(c,d);return}B({blockIndex:c,currentBlockCompletion:d,fetchError:F,getRowsParams:l})}finally{g(n)&&k()}}}},H=()=>{b.value=D()};return e.watch(()=>i?.value,()=>{H()},{immediate:!0}),{datasource:e.readonly(b),data:e.readonly(m),error:e.readonly(u),isFetching:e.readonly(C)}},U={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 W(){const t=N.createI18n("en-us",U);return{i18n:t,i18nT:N.i18nTComponent(t)}}const q={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},$={key:0,class:"table-error-state","data-testid":"table-error-state"},P={key:1,class:"table-empty-state","data-testid":"table-empty-state"},j=((t,i)=>{const o=t.__vccOpts||t;for(const[a,s]of i)o[a]=s;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","row:click"],setup(t,{emit:i}){E.ModuleRegistry.registerModules([E.AllCommunityModule,E.InfiniteRowModelModule]);const o=i,{i18n:{t:a}}=W(),s={cellRenderer:M,resizable:!1,sortable:!1,suppressMovable:!0},b=e.computed(()=>t.headers.map(r=>({colId:r.key,flex:!r.width&&!r.maxWidth?1:void 0,headerName:r.label,maxWidth:r.maxWidth,minWidth:r.minWidth,valueGetter:D=>D.data?.[r.key],width:r.width,pinned:r.pinned,cellRenderer:r.cellRenderer??M,cellRendererParams:r.cellRendererParams,valueFormatter:r.valueFormatter,sortable:r.sortable??!1,unSortIcon:r.sortable??!1}))),m=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:u,datasource:p,error:C,isFetching:g}=L({fetcher:t.fetcher,resetKey:m}),{fetchState:S,hasData:f,state:k}=x(u,C,g),R=e.computed(()=>k.value===S.SUCCESS&&!f.value);z({emitState:r=>o("state",r),fetchLifecycleState:k,hasData:f});const v=r=>{o("grid:ready",r.api)},_=r=>{r.data&&o("row:click",r.data)};return(r,B)=>{const D=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",q,[t.error?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(r.$slots,"error-state",{},()=>[e.createVNode(D,{"icon-variant":"error",message:e.unref(a)("errorState.message"),title:e.unref(a)("errorState.title")},null,8,["message","title"])],!0)])):R.value?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(r.$slots,"empty-state",{},()=>[e.createVNode(D,{message:e.unref(a)("emptyState.message"),title:e.unref(a)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(I.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":b.value,datasource:e.unref(p),"default-col-def":s,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(E.themeQuartz),onGridReady:v,onRowClicked:_},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-f70c15d1"]]);y.TableDataGrid=j,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
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,4 +1,4 @@
1
- import type { TableDataGridFetcher, TableDataGridHeader, TableDataGridRowClickPayload, TableDataGridStatePayload } from '../types';
1
+ import type { TableDataGridFetcher, TableDataGridHeader, TableDataGridStatePayload } from '../types';
2
2
  import type { GridReadyEvent } from 'ag-grid-community';
3
3
  declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
4
4
  props: import("vue").PublicProps & __VLS_PrettifyLocal<{
@@ -10,7 +10,6 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
10
10
  } & {
11
11
  onState?: ((payload: TableDataGridStatePayload) => any) | undefined;
12
12
  "onGrid:ready"?: ((api: import("ag-grid-community").GridApi<Row>) => any) | undefined;
13
- "onRow:click"?: ((payload: Row) => any) | undefined;
14
13
  }> & (typeof globalThis extends {
15
14
  __VLS_PROPS_FALLBACK: infer P;
16
15
  } ? P : {});
@@ -23,7 +22,6 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
23
22
  emit: {
24
23
  (e: "grid:ready", api: GridReadyEvent<Row>["api"]): void;
25
24
  (e: "state", payload: TableDataGridStatePayload): void;
26
- (e: "row:click", payload: TableDataGridRowClickPayload<Row>): void;
27
25
  };
28
26
  }>) => import("vue").VNode & {
29
27
  __ctx?: Awaited<typeof __VLS_setup>;
@@ -1 +1 @@
1
- {"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,4BAA4B,EAC5B,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,cAAc,EAEf,MAAM,mBAAmB,CAAA;AAe1B,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;WA8OO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBA1O7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;;KAsOmD,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;;uBA5NM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,WAAW,4BAA4B,CAAC,GAAG,CAAC,GAAG,IAAI;;EAwNhE,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"}
1
+ {"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAe/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;WAyNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBArN7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;KAiNmD,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;;uBAvMM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;;EAoMpD,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EACjB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;CAClC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,wBAGrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CA8T9B,CAAA"}
1
+ {"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EACjB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;CAClC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,wBAGrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CA4T9B,CAAA"}
@@ -1,5 +1,4 @@
1
- import type { GridApi, ValueFormatterFunc } from 'ag-grid-community';
2
- import type { Component } from 'vue';
1
+ import type { GridApi } from 'ag-grid-community';
3
2
  export type TableDataGridMode = 'infinite';
4
3
  export type TableDataGridRow = Record<string, unknown>;
5
4
  export type TableDataGridState = 'loading' | 'success' | 'error';
@@ -7,35 +6,17 @@ export type TableDataGridStatePayload = {
7
6
  state: TableDataGridState;
8
7
  hasData: boolean;
9
8
  };
10
- export type TableDataGridSortModelItem = {
11
- colId: string;
12
- sort: 'asc' | 'desc';
13
- };
14
- /** Active sort columns, ordered by priority. Empty when unsorted. */
15
- export type TableDataGridSortPayload = TableDataGridSortModelItem[];
16
- export type TableDataGridRowClickPayload<Row extends object = TableDataGridRow> = Row;
17
9
  export type TableDataGridHeader<Row extends object = TableDataGridRow> = {
18
10
  key: Extract<keyof Row, string>;
19
11
  label: string;
20
12
  width?: number;
21
13
  minWidth?: number;
22
14
  maxWidth?: number;
23
- /** Pins the column to the left or right edge of the grid. */
24
- pinned?: 'left' | 'right';
25
- /** Vue component used to render this column's cells. */
26
- cellRenderer?: Component;
27
- /** Extra props passed to `cellRenderer`. */
28
- cellRendererParams?: Record<string, unknown>;
29
- /** Formats the raw cell value for display. */
30
- valueFormatter?: ValueFormatterFunc<Row>;
31
- /** Enables sorting UI for this column. The `fetcher` must apply `params.sort` server-side. */
32
- sortable?: boolean;
33
15
  };
34
16
  export interface TableDataGridInfiniteFetcherParams {
35
17
  mode: 'infinite';
36
18
  pageSize: number;
37
19
  cursor?: unknown;
38
- sort?: TableDataGridSortPayload;
39
20
  }
40
21
  export type TableDataGridFetcherResult<Row extends object = TableDataGridRow> = {
41
22
  data: Row[];
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAC1C,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,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CACrB,CAAA;AAED,qEAAqE;AACrE,MAAM,MAAM,wBAAwB,GAAG,0BAA0B,EAAE,CAAA;AAEnE,MAAM,MAAM,4BAA4B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,GAAG,CAAA;AAErF,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,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACzB,wDAAwD;IACxD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5C,8CAA8C;IAC9C,cAAc,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAA;IACxC,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAA;CAChC;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,CACxE,MAAM,EAAE,kCAAkC,KACvC,OAAO,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7C,MAAM,MAAM,yBAAyB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,CAAA"}
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,CAAA;AAC1C,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,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;CAClB,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,CACxE,MAAM,EAAE,kCAAkC,KACvC,OAAO,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7C,MAAM,MAAM,yBAAyB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,CAAA"}
@@ -1,5 +1,3 @@
1
- import type { TableDataGridSortPayload } from '../types';
2
- import type { SortModelItem } from 'ag-grid-community';
3
1
  interface GridRowRange {
4
2
  startRow: number;
5
3
  endRow: number;
@@ -40,12 +38,5 @@ export declare const resolveInfiniteLastRow: ({ startRow, rowsLength, pageSize,
40
38
  total?: number;
41
39
  hasMore?: boolean;
42
40
  }) => number | undefined;
43
- /**
44
- * Translates AG Grid's sort model into TableDataGrid's public sort contract.
45
- *
46
- * @param sortModel AG Grid's active sort model, ordered by priority.
47
- * @returns The active sort columns as `{ colId, sort }[]`, empty when unsorted.
48
- */
49
- export declare const resolveSortPayload: (sortModel: SortModelItem[]) => TableDataGridSortPayload;
50
41
  export {};
51
42
  //# sourceMappingURL=fetchers.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"fetchers.d.ts","sourceRoot":"","sources":["../../../src/utils/fetchers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEtD,UAAU,YAAY;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,sBAAsB,YAAY,KAAG,WAOnE,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GAAI,qDAMpC;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAG,MAAM,GAAG,SAcZ,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,WAAW,aAAa,EAAE,KAAG,wBAE/D,CAAA"}
1
+ {"version":3,"file":"fetchers.d.ts","sourceRoot":"","sources":["../../../src/utils/fetchers.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,sBAAsB,YAAY,KAAG,WAOnE,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GAAI,qDAMpC;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAG,MAAM,GAAG,SAcZ,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong-ui-public/table-data-grid",
3
- "version": "0.3.12-pr.3713.f969d6fca.0",
3
+ "version": "0.3.13",
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.64.3",
24
+ "@kong/kongponents": "9.64.10",
25
25
  "vue": "^3.5.35",
26
26
  "@kong-ui-public/i18n": "^2.5.1"
27
27
  },
@@ -48,8 +48,8 @@
48
48
  "@kong-ui-public/i18n": "^2.5.1"
49
49
  },
50
50
  "dependencies": {
51
- "ag-grid-community": "^36.0.0",
52
- "ag-grid-vue3": "^36.0.0"
51
+ "ag-grid-community": "^36.1.0",
52
+ "ag-grid-vue3": "^36.1.0"
53
53
  },
54
54
  "scripts": {
55
55
  "dev": "cross-env USE_SANDBOX=true vite",