@kong-ui-public/table-data-grid 0.7.1 → 0.7.2-pr.3884.49ec4889a.0

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

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