@kong-ui-public/table-data-grid 0.6.1-pr.3892.2ccd05c45.0 → 0.7.0

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

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