@kong-ui-public/table-data-grid 0.6.1-pr.3884.dc6f18af1.0 → 0.7.0

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

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