@kong-ui-public/table-data-grid 0.3.4-pr.3596.41e70338d.0 → 0.3.4-pr.3598.efa3e41fa.0

package/dist/style.css

@@ -1 +1 @@
-.kong-ui-public-table-data-grid[data-v-87a96f8f]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.table-data-grid-grid[data-v-87a96f8f]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #000933);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex}
+.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-b8bd22c9]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.table-data-grid-grid[data-v-b8bd22c9]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #000933);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}

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

@@ -1,219 +1,275 @@
-import { computed as C, watch as L, ref as I, shallowRef as F, readonly as R, defineComponent as U, resolveComponent as W, openBlock as w, createElementBlock as M, renderSlot as O, createVNode as A, unref as v, createBlock as V } from "vue";
-import { AgGridVue as x } from "ag-grid-vue3";
-import { ModuleRegistry as $, AllCommunityModule as j, InfiniteRowModelModule as H, themeQuartz as Q } from "ag-grid-community";
-import { createI18n as q, i18nTComponent as J } from "@kong-ui-public/i18n";
-var D = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(D || {});
-const P = (e) => !!e?.length;
-function X(e, c, o, a = P) {
-  const i = C(() => a(e.value)), p = C(() => {
-    const f = e.value !== void 0, d = c.value !== void 0 && c.value !== null;
-    return o.value ? "LOADING" : i.value ? "SUCCESS" : d ? "ERROR" : f ? "SUCCESS" : "PENDING";
+import { defineComponent as A, shallowRef as N, ref as R, computed as E, onMounted as W, watch as O, onUnmounted as V, nextTick as $, resolveComponent as T, openBlock as w, createElementBlock as G, createVNode as I, withCtx as j, createElementVNode as q, toDisplayString as H, readonly as _, renderSlot as x, unref as S, createBlock as P } from "vue";
+import { AgGridVue as Q } from "ag-grid-vue3";
+import { ModuleRegistry as J, AllCommunityModule as X, InfiniteRowModelModule as Y, themeQuartz as Z } from "ag-grid-community";
+import { createI18n as ee, i18nTComponent as te } from "@kong-ui-public/i18n";
+const ae = { class: "table-data-grid-cell-renderer" }, oe = /* @__PURE__ */ A({
+  name: "TableDataGridCellRenderer",
+  __name: "TableDataGridCellRenderer",
+  props: {
+    params: {}
+  },
+  setup(e, { expose: i }) {
+    const a = N(e.params), t = R(null), r = R(!1), h = E(() => a.value.valueFormatted ?? String(a.value.value ?? ""));
+    let f, u, m = !1;
+    const C = () => {
+      const d = t.value;
+      r.value = !!d && d.scrollWidth > d.clientWidth;
+    }, p = () => {
+      m || (u !== void 0 && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+        u = void 0, C();
+      }));
+    }, g = (d) => {
+      if (f?.disconnect(), d) {
+        f?.observe(d);
+        const y = d.closest(".ag-cell");
+        y && f?.observe(y);
+      }
+      p();
+    };
+    return W(() => {
+      f = new ResizeObserver(p), g(t.value);
+    }), O(t, g, { flush: "post" }), V(() => {
+      m = !0, f?.disconnect(), u !== void 0 && cancelAnimationFrame(u);
+    }), i({
+      refresh(d) {
+        return a.value = d, $(p), !0;
+      }
+    }), (d, y) => {
+      const k = T("KTooltip");
+      return w(), G("span", ae, [
+        I(k, {
+          class: "table-data-grid-cell-tooltip",
+          disabled: !r.value,
+          "max-width": "300",
+          placement: "bottom-start",
+          target: "body",
+          text: h.value
+        }, {
+          default: j(() => [
+            q("span", {
+              ref_key: "contentElement",
+              ref: t,
+              class: "table-data-grid-cell-content"
+            }, H(h.value), 513)
+          ]),
+          _: 1
+        }, 8, ["disabled", "text"])
+      ]);
+    };
+  }
+});
+var F = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(F || {});
+const re = (e) => !!e?.length;
+function ne(e, i, a, t = re) {
+  const r = E(() => t(e.value)), h = E(() => {
+    const u = e.value !== void 0, m = i.value !== void 0 && i.value !== null;
+    return a.value ? "LOADING" : r.value ? "SUCCESS" : m ? "ERROR" : u ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: D,
-    hasData: i,
-    state: p
+    fetchState: F,
+    hasData: r,
+    state: h
   };
 }
-const Y = ({
+const se = ({
   emitState: e,
-  fetchLifecycleState: c,
-  hasData: o
+  fetchLifecycleState: i,
+  hasData: a
 }) => {
-  L(
+  O(
     () => ({
-      hasData: o.value,
-      state: c.value
+      hasData: a.value,
+      state: i.value
     }),
-    ({ hasData: a, state: i }) => {
-      if (i !== D.PENDING) {
-        if (i === D.LOADING) {
+    ({ hasData: t, state: r }) => {
+      if (r !== F.PENDING) {
+        if (r === F.LOADING) {
           e({
-            hasData: a,
+            hasData: t,
             state: "loading"
           });
           return;
         }
-        if (i === D.ERROR) {
+        if (r === F.ERROR) {
           e({
-            hasData: a,
+            hasData: t,
             state: "error"
           });
           return;
         }
         e({
-          hasData: a,
+          hasData: t,
           state: "success"
         });
       }
     }
   );
-}, Z = ({ startRow: e, endRow: c }) => {
-  const o = c - e;
+}, le = ({ startRow: e, endRow: i }) => {
+  const a = i - e;
   return {
-    blockIndex: o > 0 ? Math.floor(e / o) : 0,
-    pageSize: o
+    blockIndex: a > 0 ? Math.floor(e / a) : 0,
+    pageSize: a
   };
-}, ee = ({
+}, ie = ({
   startRow: e,
-  rowsLength: c,
-  pageSize: o,
-  total: a,
-  hasMore: i
+  rowsLength: i,
+  pageSize: a,
+  total: t,
+  hasMore: r
 }) => {
-  if (typeof a == "number")
-    return a;
-  if (i !== !0 && (i === !1 || c < o))
-    return e + c;
-}, te = ({
+  if (typeof t == "number")
+    return t;
+  if (r !== !0 && (r === !1 || i < a))
+    return e + i;
+}, ce = ({
   fetcher: e,
-  resetKey: c
+  resetKey: i
 }) => {
-  const o = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), i = I(0), p = F(), y = F(), f = F(), d = I(0), k = I(!1), h = (t) => t === i.value, S = () => {
-    k.value = d.value > 0;
-  }, b = () => {
-    f.value = void 0, d.value += 1, S();
-  }, E = () => {
-    d.value = Math.max(0, d.value - 1), S();
-  }, N = (t) => {
-    const r = a.get(t);
-    if (r)
-      return r;
+  const a = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), r = R(0), h = N(), f = N(), u = N(), m = R(0), C = R(!1), p = (o) => o === r.value, g = () => {
+    C.value = m.value > 0;
+  }, d = () => {
+    u.value = void 0, m.value += 1, g();
+  }, y = () => {
+    m.value = Math.max(0, m.value - 1), g();
+  }, k = (o) => {
+    const n = t.get(o);
+    if (n)
+      return n;
     let s;
-    const u = {
-      promise: new Promise((n) => {
-        s = n;
+    const v = {
+      promise: new Promise((l) => {
+        s = l;
       }),
-      resolve: (n) => s(n)
+      resolve: (l) => s(l)
     };
-    return a.set(t, u), u;
-  }, m = (t, r) => {
-    r.resolve(!1), a.get(t) === r && a.delete(t);
-  }, l = async ({
-    blockIndex: t,
-    currentBlockCompletion: r,
+    return t.set(o, v), v;
+  }, b = (o, n) => {
+    n.resolve(!1), t.get(o) === n && t.delete(o);
+  }, c = async ({
+    blockIndex: o,
+    currentBlockCompletion: n,
     datasourceId: s
   }) => {
-    if (t === 0)
+    if (o === 0)
       return "ready";
-    const u = a.get(t - 1);
-    if (!u)
-      return m(t, r), "failed";
-    const n = await u.promise;
-    return h(s) ? n ? "ready" : (m(t, r), "failed") : (m(t, r), "stale");
-  }, B = ({
-    blockIndex: t,
-    currentBlockCompletion: r,
+    const v = t.get(o - 1);
+    if (!v)
+      return b(o, n), "failed";
+    const l = await v.promise;
+    return p(s) ? l ? "ready" : (b(o, n), "failed") : (b(o, n), "stale");
+  }, M = ({
+    blockIndex: o,
+    currentBlockCompletion: n,
     getRowsParams: s,
-    pageSize: u,
-    result: n
+    pageSize: v,
+    result: l
   }) => {
-    n.cursor !== void 0 && o.set(t, n.cursor), s.successCallback(n.data, ee({
+    l.cursor !== void 0 && a.set(o, l.cursor), s.successCallback(l.data, ie({
       startRow: s.startRow,
-      rowsLength: n.data.length,
-      pageSize: u,
-      total: n.total,
-      hasMore: n.hasMore
-    })), s.startRow === 0 && (y.value = n.data), r.resolve(!0);
-  }, g = ({
-    blockIndex: t,
-    currentBlockCompletion: r,
+      rowsLength: l.data.length,
+      pageSize: v,
+      total: l.total,
+      hasMore: l.hasMore
+    })), s.startRow === 0 && (f.value = l.data), n.resolve(!0);
+  }, D = ({
+    blockIndex: o,
+    currentBlockCompletion: n,
     fetchError: s,
-    getRowsParams: u
+    getRowsParams: v
   }) => {
-    f.value = s, u.failCallback(), m(t, r);
-  }, _ = () => {
-    const t = i.value + 1;
-    return i.value = t, o.clear(), a.clear(), y.value = void 0, f.value = void 0, d.value = 0, S(), {
-      async getRows(r) {
+    u.value = s, v.failCallback(), b(o, n);
+  }, K = () => {
+    const o = r.value + 1;
+    return r.value = o, a.clear(), t.clear(), f.value = void 0, u.value = void 0, m.value = 0, g(), {
+      async getRows(n) {
         const {
           blockIndex: s,
-          pageSize: u
-        } = Z({
-          startRow: r.startRow,
-          endRow: r.endRow
-        }), n = N(s), z = await l({
+          pageSize: v
+        } = le({
+          startRow: n.startRow,
+          endRow: n.endRow
+        }), l = k(s), z = await c({
           blockIndex: s,
-          currentBlockCompletion: n,
-          datasourceId: t
+          currentBlockCompletion: l,
+          datasourceId: o
         });
         if (z !== "ready") {
-          z === "failed" && r.failCallback();
+          z === "failed" && n.failCallback();
           return;
         }
-        b();
+        d();
         try {
-          const G = s > 0 ? o.get(s - 1) : void 0, T = await e({
+          const B = s > 0 ? a.get(s - 1) : void 0, U = await e({
             mode: "infinite",
-            pageSize: u,
-            cursor: G
+            pageSize: v,
+            cursor: B
           });
-          if (!h(t)) {
-            m(s, n);
+          if (!p(o)) {
+            b(s, l);
             return;
           }
-          B({
+          M({
             blockIndex: s,
-            currentBlockCompletion: n,
-            getRowsParams: r,
-            pageSize: u,
-            result: T
+            currentBlockCompletion: l,
+            getRowsParams: n,
+            pageSize: v,
+            result: U
           });
-        } catch (G) {
-          if (!h(t)) {
-            m(s, n);
+        } catch (B) {
+          if (!p(o)) {
+            b(s, l);
             return;
           }
-          g({
+          D({
             blockIndex: s,
-            currentBlockCompletion: n,
-            fetchError: G,
-            getRowsParams: r
+            currentBlockCompletion: l,
+            fetchError: B,
+            getRowsParams: n
           });
         } finally {
-          h(t) && E();
+          p(o) && y();
         }
       }
     };
-  }, K = () => {
-    p.value = _();
+  }, L = () => {
+    h.value = K();
   };
-  return L(
-    () => c?.value,
+  return O(
+    () => i?.value,
     () => {
-      K();
+      L();
     },
     { immediate: !0 }
   ), {
-    datasource: R(p),
-    data: R(y),
-    error: R(f),
-    isFetching: R(k)
+    datasource: _(h),
+    data: _(f),
+    error: _(u),
+    isFetching: _(C)
   };
-}, ae = { title: "No Data", message: "There is no data to display." }, oe = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, re = {
-  emptyState: ae,
-  errorState: oe
+}, ue = { title: "No Data", message: "There is no data to display." }, de = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, fe = {
+  emptyState: ue,
+  errorState: de
 };
-function se() {
-  const e = q("en-us", re);
+function me() {
+  const e = ee("en-us", fe);
   return {
     i18n: e,
-    i18nT: J(e)
+    i18nT: te(e)
     // Translation component <i18n-t>
   };
 }
-const ne = {
+const ve = {
   class: "kong-ui-public-table-data-grid",
   "data-testid": "table-data-grid"
-}, ie = {
+}, pe = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, le = {
+}, he = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, ce = /* @__PURE__ */ U({
+}, ge = /* @__PURE__ */ A({
   __name: "TableDataGrid",
   props: {
     headers: {},
@@ -223,83 +279,84 @@ const ne = {
     refreshKey: { type: [String, Number, Boolean] }
   },
   emits: ["grid:ready", "state"],
-  setup(e, { emit: c }) {
-    $.registerModules([j, H]);
-    const o = c, { i18n: { t: a } } = se(), i = {
+  setup(e, { emit: i }) {
+    J.registerModules([X, Y]);
+    const a = i, { i18n: { t } } = me(), r = {
+      cellRenderer: oe,
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, p = C(() => e.headers.map((l) => ({
-      colId: l.key,
+    }, h = E(() => e.headers.map((c) => ({
+      colId: c.key,
       // Headers without explicit width constraints should fill available space.
-      flex: !l.width && !l.maxWidth ? 1 : void 0,
-      headerName: l.label,
-      maxWidth: l.maxWidth,
-      minWidth: l.minWidth,
-      valueGetter: (g) => g.data?.[l.key],
-      width: l.width
-    }))), y = C(() => [e.fetcher, e.pageSize, e.refreshKey]), {
-      data: f,
-      datasource: d,
-      error: k,
-      isFetching: h
-    } = te({
+      flex: !c.width && !c.maxWidth ? 1 : void 0,
+      headerName: c.label,
+      maxWidth: c.maxWidth,
+      minWidth: c.minWidth,
+      valueGetter: (D) => D.data?.[c.key],
+      width: c.width
+    }))), f = E(() => [e.fetcher, e.pageSize, e.refreshKey]), {
+      data: u,
+      datasource: m,
+      error: C,
+      isFetching: p
+    } = ce({
       fetcher: e.fetcher,
-      resetKey: y
+      resetKey: f
     }), {
-      fetchState: S,
-      hasData: b,
-      state: E
-    } = X(f, k, h), N = C(() => E.value === S.SUCCESS && !b.value);
-    Y({
-      emitState: (l) => o("state", l),
-      fetchLifecycleState: E,
-      hasData: b
+      fetchState: g,
+      hasData: d,
+      state: y
+    } = ne(u, C, p), k = E(() => y.value === g.SUCCESS && !d.value);
+    se({
+      emitState: (c) => a("state", c),
+      fetchLifecycleState: y,
+      hasData: d
     });
-    const m = (l) => {
-      o("grid:ready", l.api);
+    const b = (c) => {
+      a("grid:ready", c.api);
     };
-    return (l, B) => {
-      const g = W("KEmptyState");
-      return w(), M("div", ne, [
-        e.error ? (w(), M("div", ie, [
-          O(l.$slots, "error-state", {}, () => [
-            A(g, {
+    return (c, M) => {
+      const D = T("KEmptyState");
+      return w(), G("div", ve, [
+        e.error ? (w(), G("div", pe, [
+          x(c.$slots, "error-state", {}, () => [
+            I(D, {
               "icon-variant": "error",
-              message: v(a)("errorState.message"),
-              title: v(a)("errorState.title")
+              message: S(t)("errorState.message"),
+              title: S(t)("errorState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : N.value ? (w(), M("div", le, [
-          O(l.$slots, "empty-state", {}, () => [
-            A(g, {
-              message: v(a)("emptyState.message"),
-              title: v(a)("emptyState.title")
+        ])) : k.value ? (w(), G("div", he, [
+          x(c.$slots, "empty-state", {}, () => [
+            I(D, {
+              message: S(t)("emptyState.message"),
+              title: S(t)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (w(), V(v(x), {
+        ])) : (w(), P(S(Q), {
           key: 2,
           "cache-block-size": e.pageSize,
           class: "table-data-grid-grid",
-          "column-defs": p.value,
-          datasource: v(d),
-          "default-col-def": i,
+          "column-defs": h.value,
+          datasource: S(m),
+          "default-col-def": r,
           "infinite-initial-row-count": 1,
-          loading: v(h),
+          loading: S(p),
           "row-model-type": "infinite",
           "suppress-cell-focus": !0,
-          theme: v(Q),
-          onGridReady: m
+          theme: S(Z),
+          onGridReady: b
         }, null, 8, ["cache-block-size", "column-defs", "datasource", "loading", "theme"]))
       ]);
     };
   }
-}), ue = (e, c) => {
-  const o = e.__vccOpts || e;
-  for (const [a, i] of c)
-    o[a] = i;
-  return o;
-}, he = /* @__PURE__ */ ue(ce, [["__scopeId", "data-v-87a96f8f"]]);
+}), ye = (e, i) => {
+  const a = e.__vccOpts || e;
+  for (const [t, r] of i)
+    a[t] = r;
+  return a;
+}, Ee = /* @__PURE__ */ ye(ge, [["__scopeId", "data-v-b8bd22c9"]]);
 export {
-  he as TableDataGrid
+  Ee as TableDataGrid
 };

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

@@ -1 +1 @@
-(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f["kong-ui-public-table-data-grid"]={},f.Vue,f.AgGridVue,f.agGridCommunity,f["kong-ui-public-i18n"]))})(this,(function(f,e,M,v,G){"use strict";var D=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(D||{});const F=t=>!!t?.length;function O(t,u,r,o=F){const c=e.computed(()=>o(t.value)),g=e.computed(()=>{const p=t.value!==void 0,m=u.value!==void 0&&u.value!==null;return r.value?"LOADING":c.value?"SUCCESS":m?"ERROR":p?"SUCCESS":"PENDING"});return{fetchState:D,hasData:c,state:g}}const _=({emitState:t,fetchLifecycleState:u,hasData:r})=>{e.watch(()=>({hasData:r.value,state:u.value}),({hasData:o,state:c})=>{if(c!==D.PENDING){if(c===D.LOADING){t({hasData:o,state:"loading"});return}if(c===D.ERROR){t({hasData:o,state:"error"});return}t({hasData:o,state:"success"})}})},z=({startRow:t,endRow:u})=>{const r=u-t;return{blockIndex:r>0?Math.floor(t/r):0,pageSize:r}},T=({startRow:t,rowsLength:u,pageSize:r,total:o,hasMore:c})=>{if(typeof o=="number")return o;if(c!==!0&&(c===!1||u<r))return t+u},A=({fetcher:t,resetKey:u})=>{const r=new Map,o=new Map,c=e.ref(0),g=e.shallowRef(),S=e.shallowRef(),p=e.shallowRef(),m=e.ref(0),C=e.ref(!1),y=a=>a===c.value,b=()=>{C.value=m.value>0},E=()=>{p.value=void 0,m.value+=1,b()},R=()=>{m.value=Math.max(0,m.value-1),b()},w=a=>{const n=o.get(a);if(n)return n;let s;const d={promise:new Promise(i=>{s=i}),resolve:i=>s(i)};return o.set(a,d),d},h=(a,n)=>{n.resolve(!1),o.get(a)===n&&o.delete(a)},l=async({blockIndex:a,currentBlockCompletion:n,datasourceId:s})=>{if(a===0)return"ready";const d=o.get(a-1);if(!d)return h(a,n),"failed";const i=await d.promise;return y(s)?i?"ready":(h(a,n),"failed"):(h(a,n),"stale")},B=({blockIndex:a,currentBlockCompletion:n,getRowsParams:s,pageSize:d,result:i})=>{i.cursor!==void 0&&r.set(a,i.cursor),s.successCallback(i.data,T({startRow:s.startRow,rowsLength:i.data.length,pageSize:d,total:i.total,hasMore:i.hasMore})),s.startRow===0&&(S.value=i.data),n.resolve(!0)},k=({blockIndex:a,currentBlockCompletion:n,fetchError:s,getRowsParams:d})=>{p.value=s,d.failCallback(),h(a,n)},q=()=>{const a=c.value+1;return c.value=a,r.clear(),o.clear(),S.value=void 0,p.value=void 0,m.value=0,b(),{async getRows(n){const{blockIndex:s,pageSize:d}=z({startRow:n.startRow,endRow:n.endRow}),i=w(s),I=await l({blockIndex:s,currentBlockCompletion:i,datasourceId:a});if(I!=="ready"){I==="failed"&&n.failCallback();return}E();try{const N=s>0?r.get(s-1):void 0,$=await t({mode:"infinite",pageSize:d,cursor:N});if(!y(a)){h(s,i);return}B({blockIndex:s,currentBlockCompletion:i,getRowsParams:n,pageSize:d,result:$})}catch(N){if(!y(a)){h(s,i);return}k({blockIndex:s,currentBlockCompletion:i,fetchError:N,getRowsParams:n})}finally{y(a)&&R()}}}},j=()=>{g.value=q()};return e.watch(()=>u?.value,()=>{j()},{immediate:!0}),{datasource:e.readonly(g),data:e.readonly(S),error:e.readonly(p),isFetching:e.readonly(C)}},L={emptyState:{title:"No Data",message:"There is no data to display."},errorState:{title:"An error occurred",message:"Data cannot be displayed due to an error."}};function V(){const t=G.createI18n("en-us",L);return{i18n:t,i18nT:G.i18nTComponent(t)}}const x={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},K={key:0,class:"table-error-state","data-testid":"table-error-state"},U={key:1,class:"table-empty-state","data-testid":"table-empty-state"},W=((t,u)=>{const r=t.__vccOpts||t;for(const[o,c]of u)r[o]=c;return r})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]}},emits:["grid:ready","state"],setup(t,{emit:u}){v.ModuleRegistry.registerModules([v.AllCommunityModule,v.InfiniteRowModelModule]);const r=u,{i18n:{t:o}}=V(),c={resizable:!1,sortable:!1,suppressMovable:!0},g=e.computed(()=>t.headers.map(l=>({colId:l.key,flex:!l.width&&!l.maxWidth?1:void 0,headerName:l.label,maxWidth:l.maxWidth,minWidth:l.minWidth,valueGetter:k=>k.data?.[l.key],width:l.width}))),S=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:p,datasource:m,error:C,isFetching:y}=A({fetcher:t.fetcher,resetKey:S}),{fetchState:b,hasData:E,state:R}=O(p,C,y),w=e.computed(()=>R.value===b.SUCCESS&&!E.value);_({emitState:l=>r("state",l),fetchLifecycleState:R,hasData:E});const h=l=>{r("grid:ready",l.api)};return(l,B)=>{const k=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",x,[t.error?(e.openBlock(),e.createElementBlock("div",K,[e.renderSlot(l.$slots,"error-state",{},()=>[e.createVNode(k,{"icon-variant":"error",message:e.unref(o)("errorState.message"),title:e.unref(o)("errorState.title")},null,8,["message","title"])],!0)])):w.value?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(l.$slots,"empty-state",{},()=>[e.createVNode(k,{message:e.unref(o)("emptyState.message"),title:e.unref(o)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(M.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":g.value,datasource:e.unref(m),"default-col-def":c,"infinite-initial-row-count":1,loading:e.unref(y),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(v.themeQuartz),onGridReady:h},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-87a96f8f"]]);f.TableDataGrid=W,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+(function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y["kong-ui-public-table-data-grid"]={},y.Vue,y.AgGridVue,y.agGridCommunity,y["kong-ui-public-i18n"]))})(this,(function(y,e,G,R,N){"use strict";const M={class:"table-data-grid-cell-renderer"},O=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:c}){const o=e.shallowRef(t.params),a=e.ref(null),r=e.ref(!1),b=e.computed(()=>o.value.valueFormatted??String(o.value.value??""));let m,u,p=!1;const C=()=>{const f=a.value;r.value=!!f&&f.scrollWidth>f.clientWidth},g=()=>{p||(u!==void 0&&cancelAnimationFrame(u),u=requestAnimationFrame(()=>{u=void 0,C()}))},S=f=>{if(m?.disconnect(),f){m?.observe(f);const k=f.closest(".ag-cell");k&&m?.observe(k)}g()};return e.onMounted(()=>{m=new ResizeObserver(g),S(a.value)}),e.watch(a,S,{flush:"post"}),e.onUnmounted(()=>{p=!0,m?.disconnect(),u!==void 0&&cancelAnimationFrame(u)}),c({refresh(f){return o.value=f,e.nextTick(g),!0}}),(f,k)=>{const E=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",M,[e.createVNode(E,{class:"table-data-grid-cell-tooltip",disabled:!r.value,"max-width":"300",placement:"bottom-start",target:"body",text:b.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:a,class:"table-data-grid-cell-content"},e.toDisplayString(b.value),513)]),_:1},8,["disabled","text"])])}}});var w=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(w||{});const I=t=>!!t?.length;function T(t,c,o,a=I){const r=e.computed(()=>a(t.value)),b=e.computed(()=>{const u=t.value!==void 0,p=c.value!==void 0&&c.value!==null;return o.value?"LOADING":r.value?"SUCCESS":p?"ERROR":u?"SUCCESS":"PENDING"});return{fetchState:w,hasData:r,state:b}}const x=({emitState:t,fetchLifecycleState:c,hasData:o})=>{e.watch(()=>({hasData:o.value,state:c.value}),({hasData:a,state:r})=>{if(r!==w.PENDING){if(r===w.LOADING){t({hasData:a,state:"loading"});return}if(r===w.ERROR){t({hasData:a,state:"error"});return}t({hasData:a,state:"success"})}})},z=({startRow:t,endRow:c})=>{const o=c-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},A=({startRow:t,rowsLength:c,pageSize:o,total:a,hasMore:r})=>{if(typeof a=="number")return a;if(r!==!0&&(r===!1||c<o))return t+c},V=({fetcher:t,resetKey:c})=>{const o=new Map,a=new Map,r=e.ref(0),b=e.shallowRef(),m=e.shallowRef(),u=e.shallowRef(),p=e.ref(0),C=e.ref(!1),g=n=>n===r.value,S=()=>{C.value=p.value>0},f=()=>{u.value=void 0,p.value+=1,S()},k=()=>{p.value=Math.max(0,p.value-1),S()},E=n=>{const s=a.get(n);if(s)return s;let l;const h={promise:new Promise(i=>{l=i}),resolve:i=>l(i)};return a.set(n,h),h},v=(n,s)=>{s.resolve(!1),a.get(n)===s&&a.delete(n)},d=async({blockIndex:n,currentBlockCompletion:s,datasourceId:l})=>{if(n===0)return"ready";const h=a.get(n-1);if(!h)return v(n,s),"failed";const i=await h.promise;return g(l)?i?"ready":(v(n,s),"failed"):(v(n,s),"stale")},_=({blockIndex:n,currentBlockCompletion:s,getRowsParams:l,pageSize:h,result:i})=>{i.cursor!==void 0&&o.set(n,i.cursor),l.successCallback(i.data,A({startRow:l.startRow,rowsLength:i.data.length,pageSize:h,total:i.total,hasMore:i.hasMore})),l.startRow===0&&(m.value=i.data),s.resolve(!0)},D=({blockIndex:n,currentBlockCompletion:s,fetchError:l,getRowsParams:h})=>{u.value=l,h.failCallback(),v(n,s)},j=()=>{const n=r.value+1;return r.value=n,o.clear(),a.clear(),m.value=void 0,u.value=void 0,p.value=0,S(),{async getRows(s){const{blockIndex:l,pageSize:h}=z({startRow:s.startRow,endRow:s.endRow}),i=E(l),F=await d({blockIndex:l,currentBlockCompletion:i,datasourceId:n});if(F!=="ready"){F==="failed"&&s.failCallback();return}f();try{const B=l>0?o.get(l-1):void 0,H=await t({mode:"infinite",pageSize:h,cursor:B});if(!g(n)){v(l,i);return}_({blockIndex:l,currentBlockCompletion:i,getRowsParams:s,pageSize:h,result:H})}catch(B){if(!g(n)){v(l,i);return}D({blockIndex:l,currentBlockCompletion:i,fetchError:B,getRowsParams:s})}finally{g(n)&&k()}}}},P=()=>{b.value=j()};return e.watch(()=>c?.value,()=>{P()},{immediate:!0}),{datasource:e.readonly(b),data:e.readonly(m),error:e.readonly(u),isFetching:e.readonly(C)}},K={emptyState:{title:"No Data",message:"There is no data to display."},errorState:{title:"An error occurred",message:"Data cannot be displayed due to an error."}};function L(){const t=N.createI18n("en-us",K);return{i18n:t,i18nT:N.i18nTComponent(t)}}const U={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},W={key:0,class:"table-error-state","data-testid":"table-error-state"},q={key:1,class:"table-empty-state","data-testid":"table-empty-state"},$=((t,c)=>{const o=t.__vccOpts||t;for(const[a,r]of c)o[a]=r;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]}},emits:["grid:ready","state"],setup(t,{emit:c}){R.ModuleRegistry.registerModules([R.AllCommunityModule,R.InfiniteRowModelModule]);const o=c,{i18n:{t:a}}=L(),r={cellRenderer:O,resizable:!1,sortable:!1,suppressMovable:!0},b=e.computed(()=>t.headers.map(d=>({colId:d.key,flex:!d.width&&!d.maxWidth?1:void 0,headerName:d.label,maxWidth:d.maxWidth,minWidth:d.minWidth,valueGetter:D=>D.data?.[d.key],width:d.width}))),m=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:u,datasource:p,error:C,isFetching:g}=V({fetcher:t.fetcher,resetKey:m}),{fetchState:S,hasData:f,state:k}=T(u,C,g),E=e.computed(()=>k.value===S.SUCCESS&&!f.value);x({emitState:d=>o("state",d),fetchLifecycleState:k,hasData:f});const v=d=>{o("grid:ready",d.api)};return(d,_)=>{const D=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",U,[t.error?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(d.$slots,"error-state",{},()=>[e.createVNode(D,{"icon-variant":"error",message:e.unref(a)("errorState.message"),title:e.unref(a)("errorState.title")},null,8,["message","title"])],!0)])):E.value?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(d.$slots,"empty-state",{},()=>[e.createVNode(D,{message:e.unref(a)("emptyState.message"),title:e.unref(a)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(G.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":b.value,datasource:e.unref(p),"default-col-def":r,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(R.themeQuartz),onGridReady:v},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-b8bd22c9"]]);y.TableDataGrid=$,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/components/TableDataGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAgMA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAc/D,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAoNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAhN7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;KA4MmD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;uBAlMM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;;EA+LpD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAe/D,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAyNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBArN7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;KAiNmD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;uBAvMM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;;EAoMpD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/types/components/TableDataGridCellRenderer.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ICellRendererParams } from 'ag-grid-community';
+type CellRendererParams = ICellRendererParams<Record<string, unknown>>;
+type __VLS_Props = {
+    params: CellRendererParams;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    refresh(nextParams: CellRendererParams): boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=TableDataGridCellRenderer.vue.d.ts.map

package/dist/types/components/TableDataGridCellRenderer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableDataGridCellRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGridCellRenderer.vue"],"names":[],"mappings":"AAgIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5D,KAAK,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAMtE,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;CAC3B,CAAC;AA2IF,QAAA,MAAM,YAAY;wBApEI,kBAAkB;oPAuEtC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.3.4-pr.3596.41e70338d.0",
+  "version": "0.3.4-pr.3598.efa3e41fa.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",