@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es143.js

@@ -0,0 +1,691 @@
+import { defineComponent as vt, useCssVars as ft, computed as u, useAttrs as gt, useSlots as yt, useId as mt, ref as r, watch as $, onMounted as bt, createElementBlock as b, openBlock as c, createCommentVNode as A, createBlock as D, renderSlot as H, createVNode as L, unref as h, createSlots as Ae, withCtx as F, createTextVNode as Z, toDisplayString as x, createElementVNode as M, normalizeStyle as He, normalizeClass as E, Fragment as se, renderList as oe, withModifiers as Me, mergeProps as Ie, toHandlers as pt } from "vue";
+import we from "./kongponents.es33.js";
+import Ne from "./kongponents.es44.js";
+import ht from "./kongponents.es21.js";
+/* empty css                 */
+import kt from "./kongponents.es52.js";
+import St from "./kongponents.es24.js";
+/* empty css                 */
+import Ct from "./kongponents.es174.js";
+import zt from "./kongponents.es186.js";
+import $t from "./kongponents.es187.js";
+import "./kongponents.es5.js";
+import "./kongponents.es10.js";
+import { EmptyStateIconVariants as Pt } from "./kongponents.es11.js";
+import { KUI_ICON_SIZE_30 as Te, KUI_COLOR_TEXT_NEUTRAL as Ke } from "./kongponents.es182.js";
+import Ot from "./kongponents.es188.js";
+import { normalizeSize as At } from "./kongponents.es184.js";
+const Ht = { class: "k-table" }, Mt = {
+  key: 0,
+  class: "table-toolbar",
+  "data-testid": "table-toolbar"
+}, It = {
+  key: 0,
+  class: "toolbar-default-items-container"
+}, wt = {
+  key: 2,
+  class: "table-error-state",
+  "data-testid": "table-error-state"
+}, Nt = {
+  key: 3,
+  class: "table-empty-state",
+  "data-testid": "table-empty-state"
+}, Tt = {
+  key: 4,
+  class: "table-container"
+}, Kt = ["data-tableid"], Lt = ["aria-sort", "data-testid", "onClick", "onMouseover"], Ft = ["onMousedown", "onMouseover"], Et = ["aria-describedby"], Rt = ["onMousedown", "onMouseover"], Vt = ["role", "tabindex"], la = /* @__PURE__ */ vt({
+  __name: "KTable",
+  props: {
+    /**
+     * Allow columns to be resized
+     */
+    resizeColumns: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Used to customize the initial state of the table.
+     * Column visibility/width.
+     */
+    tablePreferences: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Enable client side sort - only do this if using a fetcher
+     * that returns static data
+     */
+    clientSort: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Enables hover highlighting to table rows
+     */
+    rowHover: {
+      type: Boolean,
+      default: !0
+    },
+    sortHandlerFunction: {
+      type: Function,
+      default: () => ({})
+    },
+    /**
+     * A function that conditionally specifies row attributes on each row
+     */
+    rowAttrs: {
+      type: Function,
+      default: () => ({})
+    },
+    /**
+     * A function that conditionally specifies cell attributes
+     */
+    cellAttrs: {
+      type: Function,
+      default: () => ({})
+    },
+    /**
+     * A prop that enables a loading skeleton
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A prop to pass in a custom empty state title
+     */
+    emptyStateTitle: {
+      type: String,
+      default: "No Data"
+    },
+    /**
+     * A prop to pass in a custom empty state message
+     */
+    emptyStateMessage: {
+      type: String,
+      default: "There is no data to display."
+    },
+    /**
+     * A prop to pass in a custom empty state action route
+     */
+    emptyStateActionRoute: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * A prop to pass in a custom empty state action message
+     */
+    emptyStateActionMessage: {
+      type: String,
+      default: ""
+    },
+    emptyStateIconVariant: {
+      type: String,
+      default: Pt.Default
+    },
+    /**
+     * A prop that enables the error state
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A prop to pass in a custom error state title
+     */
+    errorStateTitle: {
+      type: String,
+      default: "An error occurred"
+    },
+    /**
+     * A prop to pass in a custom error state message
+     */
+    errorStateMessage: {
+      type: String,
+      default: "Data cannot be displayed due to an error."
+    },
+    /**
+     * A prop to pass in a custom error state action route
+     */
+    errorStateActionRoute: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * A prop to pass in a custom error state action message
+     */
+    errorStateActionMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * A prop to pass in a fetcher function to enable server-side search, sort
+     * and pagination
+     */
+    fetcher: {
+      type: Function,
+      default: void 0,
+      required: !0
+    },
+    /**
+     * A prop to trigger a revalidate of the fetcher function. Modifying this value
+     * will trigger a manual refetch of the table data.
+     */
+    fetcherCacheKey: {
+      type: String,
+      default: ""
+    },
+    /**
+     * A prop used to uniquely identify this table in the swrv cache
+     */
+    cacheIdentifier: {
+      type: String,
+      default: ""
+    },
+    /**
+     * A prop to pass in a search string for server-side search
+     */
+    searchInput: {
+      type: String,
+      default: ""
+    },
+    /**
+     * A prop to pass in an array of headers for the table
+     */
+    headers: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * A prop to pass in an object of intial params for the initial fetcher function call
+     */
+    initialFetcherParams: {
+      type: Object,
+      default: null
+    },
+    /**
+     * A prop to pass in the number of pagination neighbors used by the pagination component
+     */
+    paginationNeighbors: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * A prop to pass in an array of page sizes used by the pagination component
+     */
+    paginationPageSizes: {
+      type: Array,
+      default: () => [15, 30, 50, 75, 100],
+      validator: (s) => !!s.length && s.every((Y) => typeof Y == "number")
+    },
+    /**
+     * A prop to pass the total number of items in the set for the pagination text
+     */
+    paginationTotalItems: {
+      type: Number,
+      default: null
+    },
+    disablePaginationPageJump: {
+      type: Boolean,
+      default: !1
+    },
+    sortable: {
+      type: Boolean,
+      default: !0
+    },
+    disablePagination: {
+      type: Boolean,
+      default: !1
+    },
+    paginationOffset: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A prop to pass to hide pagination for total table records is less than or equal to pagesize
+     */
+    hidePaginationWhenOptional: {
+      type: Boolean,
+      default: !1
+    },
+    maxHeight: {
+      type: String,
+      default: "none"
+    }
+  },
+  emits: ["cell-click", "row-click", "error-action-click", "empty-state-action-click", "update:table-preferences", "sort", "state"],
+  setup(s, { emit: Y }) {
+    ft((e) => ({
+      v5d6dfa67: Ge.value
+    }));
+    const { useDebounce: ie, useRequest: Le, useSwrvState: Fe, clientSideSorter: re } = $t(), l = s, U = Y, ne = gt(), Ee = yt(), k = mt(), I = {
+      pageSize: 15,
+      page: 1,
+      query: "",
+      sortColumnKey: "",
+      sortColumnOrder: "desc",
+      offset: null
+    }, p = r([]), ue = r(), R = r([]), S = r([]), V = r(""), w = r(""), G = r(""), ce = u(() => R.value.filter((e) => e.hidable).length > 0), B = u(() => !!(ce.value && !l.error && !O.value && !l.loading && p.value && p.value.length)), Re = u(() => R.value.filter((e) => e.hidable)), Ve = u(() => B.value ? l.tablePreferences.columnVisibility || {} : {}), J = r(B.value ? l.tablePreferences.columnVisibility || {} : {}), _ = r(0), N = r(!1), d = r(1), T = r(15), de = r(""), y = r(""), f = r("desc"), P = r(null), C = r([]), ve = r(!0), Q = r(!1), ee = r(!1), Be = u(() => !!Ee.toolbar || B.value), je = u(() => ({
+      maxHeight: At(l.maxHeight)
+    })), qe = (e) => `column-${e}`, K = (e) => `tooltip-${e}`, te = (e) => e, fe = (e, a) => (t, o) => {
+      const i = /^on[^a-z]/, n = {};
+      for (const v in a)
+        i.test(v) && a[v] && (n[v] = a[v]);
+      return Object.keys(n).reduce((v, z) => {
+        if (z.indexOf(e) === 0) {
+          const g = z.split(e);
+          v[g[1]] = (m) => n[z](m, t, o);
+        }
+        return v;
+      }, {});
+    }, We = u(() => (e, a) => {
+      const t = fe("onRow:", ne)(a, "row"), o = fe("onCell:", ne)(e, "cell"), i = ["a", "button", "label", "input", "select"];
+      return t.click && (Q.value = !0), {
+        ...t,
+        ...o,
+        click(n) {
+          const v = n.target.className;
+          let z = i.includes(n.target.tagName.toLowerCase()), g = !1;
+          typeof v == "string" || Array.isArray(v) ? g = v.includes("k-popover") : typeof v == "object" && (g = Object.keys(v).includes("k-popover")), n.target.closest(".popover-content") !== null && (g = !0);
+          for (let m = 0; m < i.length; m++)
+            if (n.target.closest(i[m]) !== null) {
+              z = !0;
+              break;
+            }
+          if ((!z || n.target.hasAttribute("disabled")) && !g && (t.click || o.click))
+            if (o.click) {
+              U("cell-click", { data: e });
+              const m = o.click(n, e, "cell");
+              typeof m == "function" && m(n, e);
+            } else {
+              U("row-click", { data: a });
+              const m = t.click(n, a, "row");
+              typeof m == "function" && m(n, a);
+            }
+        }
+      };
+    }), j = r(l.resizeColumns ? l.tablePreferences.columnWidths || {} : {}), ge = u(() => {
+      const e = {};
+      for (const a in j.value) {
+        if (!j.value[a])
+          continue;
+        const t = j.value[a] + "px";
+        e[a] = {
+          width: t,
+          maxWidth: t,
+          minWidth: t
+        };
+      }
+      return e;
+    }), xe = (e, a) => ({
+      // display the resize handle on the right side of the column if resizeColumns is enabled, hovering current column, and not the last column
+      "resize-hover": ye.value === e.key && l.resizeColumns && a !== S.value.length - 1,
+      resizable: l.resizeColumns,
+      // display sort control if column is sortable, label is visible, and sorting is not disabled
+      sortable: l.sortable && !e.hideLabel && !!e.sortable,
+      // display active sorting styles if column is currently sorted
+      "active-sort": l.sortable && !e.hideLabel && !!e.sortable && e.key === y.value,
+      [f.value]: l.sortable && e.key === y.value && !e.hideLabel,
+      "is-scrolled": N.value,
+      "has-tooltip": !!e.tooltip
+    }), Ue = u(() => V.value ? "resizing" : w.value ? "resize-hover" : G.value ? "th-hover" : ""), ye = u(() => {
+      switch (Ue.value) {
+        case "resizing":
+          return V.value;
+        case "resize-hover":
+          return w.value;
+        case "th-hover":
+          return G.value;
+        default:
+          return "";
+      }
+    }), me = u(() => {
+      var e;
+      return (e = ue.value) == null ? void 0 : e.querySelectorAll("th.resizable");
+    }), Ge = u(() => {
+      var a;
+      const e = (a = me.value) == null ? void 0 : a.item(0);
+      if (e) {
+        const t = window == null ? void 0 : window.getComputedStyle(e);
+        if (t != null && t.height)
+          return `${parseInt(t.height, 10)}px`;
+      }
+      return "auto";
+    }), be = (e, a) => {
+      var z;
+      if (e.button !== 0)
+        return;
+      let t = 0, o = 0;
+      V.value = a;
+      let i = null;
+      (z = me.value) == null || z.forEach((g) => {
+        g.getAttribute("data-testid") === `table-header-${a}` && (i = document == null ? void 0 : document.querySelector(`[data-tableid="${k}"] [data-testid="table-header-${a}"]`));
+      });
+      const n = (g) => {
+        const m = g.clientX - t;
+        i == null || i.setAttribute("style", `width: ${o + m}px`), j.value[a] = o + m;
+      }, v = () => {
+        V.value = "", document == null || document.removeEventListener("mousemove", n), document == null || document.removeEventListener("mouseup", v), X();
+      };
+      if (t = e.clientX, i) {
+        const g = window == null ? void 0 : window.getComputedStyle(i);
+        g != null && g.width && (o = parseInt(g.width, 10)), document == null || document.addEventListener("mousemove", n), document == null || document.addEventListener("mouseup", v);
+      }
+    }, pe = r(!0), Je = async () => {
+      var t, o;
+      const e = l.searchInput, a = await l.fetcher({
+        pageSize: T.value,
+        page: d.value,
+        query: e || de.value,
+        sortColumnKey: y.value,
+        sortColumnOrder: f.value,
+        offset: P.value
+      });
+      return p.value = a.data, _.value = l.paginationTotalItems || a.total || ((t = a.data) == null ? void 0 : t.length), l.paginationOffset && ((o = a.pagination) != null && o.offset ? (q.value = a.pagination.offset, C.value[d.value] || C.value.push(a.pagination.offset)) : q.value = null, ve.value = a.pagination && "hasNextPage" in a.pagination ? a.pagination.hasNextPage : !0), p.value.length === 0 && d.value > 1 && (d.value = 1, C.value = [null], P.value = null), pe.value = !1, a;
+    }, Qe = () => {
+      const e = {
+        ...I,
+        ...l.initialFetcherParams
+      };
+      d.value = e.page ?? I.page, T.value = e.pageSize ?? I.pageSize, de.value = e.query ?? I.query, y.value = e.sortColumnKey ?? I.sortColumnKey, f.value = e.sortColumnOrder ?? I.sortColumnOrder, l.clientSort && y.value && f.value && re(y.value, "", f.value, p.value), l.paginationOffset && (P.value = e.offset, C.value.push(e.offset)), l.headers && l.headers.length && (R.value = l.headers), ee.value = !0;
+    };
+    $(() => l.headers, (e) => {
+      e && e.length && (R.value = e);
+    }, { deep: !0 });
+    const ae = u(() => C.value[d.value - 1]), q = r(null), Xe = u(() => {
+      if (!l.fetcher || !ee.value)
+        return "";
+      let e = k;
+      return l.cacheIdentifier && (e = l.cacheIdentifier), l.fetcherCacheKey && (e += `-${l.fetcherCacheKey}`), `k-table_${e}`;
+    }), he = r(""), { debouncedFn: De, generateDebouncedFn: Ze } = ie((e) => {
+      he.value = e;
+    }, 350), Ye = Ze(0), { data: ke, error: Se, revalidate: _e, isValidating: et } = Le(
+      () => Xe.value,
+      () => Je(),
+      { revalidateOnFocus: !1, revalidateDebounce: 0 }
+    ), { state: le, hasData: tt, swrvState: Ce } = Fe(ke, Se, et), O = r(!0), ze = u(() => ({
+      hasData: tt.value,
+      state: le.value
+    })), $e = u(() => O.value ? "loading" : Se.value ? "error" : "success"), { debouncedFn: Pe, generateDebouncedFn: at } = ie(_e, 500), lt = at(0), st = (e) => {
+      const { key: a, useSortHandlerFunction: t } = e, o = y.value + "";
+      d.value = 1, y.value ? a === y.value ? f.value === "asc" ? f.value = "desc" : f.value = "asc" : (y.value = a, f.value = "asc", C.value = [null]) : (y.value = a, f.value = "asc", C.value = [null]), l.clientSort ? t && l.sortHandlerFunction ? l.sortHandlerFunction({
+        key: a,
+        prevKey: o,
+        sortColumnOrder: f.value,
+        data: p.value
+      }) : re(a, o, f.value, p.value) : l.paginationOffset || Pe(), X();
+    }, ot = ({ page: e }) => {
+      d.value = e;
+    }, it = ({ pageSize: e }) => {
+      C.value = [null], P.value = null, T.value = e, d.value = 1, X();
+    }, rt = (e) => {
+      e && e.target && typeof e.target.scrollTop == "number" && (e.target.scrollTop > 1 ? N.value = !0 : e.target.scrollTop === 0 && (N.value = !N.value));
+    }, nt = u(() => ({
+      pageSize: T.value,
+      sortColumnKey: y.value,
+      sortColumnOrder: f.value,
+      ...l.resizeColumns ? { columnWidths: j.value } : {},
+      ...ce.value ? { columnVisibility: J.value } : {}
+    })), X = () => {
+      $e.value === "success" && U("update:table-preferences", nt.value);
+    }, ut = () => {
+      d.value++, P.value = q.value;
+    }, ct = () => {
+      d.value--, P.value = ae.value;
+    }, dt = u(() => !!(l.fetcher && !l.disablePagination && !(!l.paginationOffset && l.hidePaginationWhenOptional && _.value <= l.paginationPageSizes[0]) && !(l.paginationOffset && l.hidePaginationWhenOptional && !ae.value && !q.value && p.value.length < l.paginationPageSizes[0]))), Oe = (e) => e.toLowerCase().replace(/[^[a-z0-9]/gi, "-");
+    $([J, R], (e) => {
+      const a = e[0], o = e[1].filter((i) => a[i.key] !== !1);
+      JSON.stringify(o) !== JSON.stringify(S.value) && (S.value = o, X());
+    }, { deep: !0, immediate: !0 }), $(ke, (e) => {
+      e != null && e.length && !p.value.length && (p.value = e);
+    }, { deep: !0, immediate: !0 }), $(le, () => {
+      switch (le.value) {
+        case Ce.PENDING:
+          O.value = !0;
+          break;
+        case Ce.VALIDATING_HAS_DATA:
+          O.value = W.value;
+          break;
+        default:
+          O.value = !1;
+          break;
+      }
+    }, { immediate: !0 }), $([ze, $e], (e) => {
+      var a;
+      U("state", {
+        state: e == null ? void 0 : e[1],
+        // newData[tableState]
+        hasData: (a = e == null ? void 0 : e[0]) == null ? void 0 : a.hasData
+        // newData[stateData].hasData
+      });
+    }), $(() => l.searchInput, (e) => {
+      d.value !== 1 && (d.value = 1), e === "" ? Ye(e) : De(e);
+    }, { immediate: !0 });
+    const W = r(!1);
+    return $([he, d, T], async (e, a) => {
+      const t = a == null ? void 0 : a[0], o = e[0], i = e[1];
+      o !== t && i !== 1 && (d.value = 1, C.value = [null], P.value = null), ee.value && !pe.value && (W.value = !0, o !== "" && o !== t ? await Pe() : await lt(), W.value = !1);
+    }, { deep: !0, immediate: !0 }), $(B, (e) => {
+      e && (J.value = l.tablePreferences.columnVisibility || {});
+    }, { immediate: !0 }), bt(() => {
+      console.warn(`The Kongponents 'KTable' component is deprecated and will be removed in the next major release.
+We suggest using 'KTableData' component instead.
+Docs: https://kongponents.konghq.com/components/table-data.html`), Qe();
+    }), (e, a) => (c(), b("div", Ht, [
+      Be.value ? (c(), b("div", Mt, [
+        H(e.$slots, "toolbar", { state: ze.value }, void 0, !0),
+        B.value ? (c(), b("div", It, [
+          L(Ot, {
+            columns: Re.value,
+            "table-id": h(k),
+            "visibility-preferences": Ve.value,
+            onUpdate: a[0] || (a[0] = (t) => J.value = t)
+          }, null, 8, ["columns", "table-id", "visibility-preferences"])
+        ])) : A("", !0)
+      ])) : A("", !0),
+      (O.value || s.loading || W.value) && !s.error ? (c(), D(ht, {
+        key: 1,
+        "data-testid": "table-skeleton",
+        type: "table"
+      })) : s.error ? (c(), b("div", wt, [
+        H(e.$slots, "error-state", {}, () => [
+          L(Ne, {
+            "icon-variant": "error",
+            message: s.errorStateMessage,
+            title: s.errorStateTitle
+          }, Ae({ _: 2 }, [
+            s.errorStateActionMessage ? {
+              name: "action",
+              fn: F(() => [
+                L(we, {
+                  "data-testid": Oe(s.errorStateActionMessage),
+                  to: s.errorStateActionRoute ? s.errorStateActionRoute : void 0,
+                  onClick: a[1] || (a[1] = (t) => e.$emit("error-action-click"))
+                }, {
+                  default: F(() => [
+                    Z(x(s.errorStateActionMessage), 1)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid", "to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["message", "title"])
+        ], !0)
+      ])) : !s.error && !O.value && !s.loading && !W.value && p.value && !p.value.length ? (c(), b("div", Nt, [
+        H(e.$slots, "empty-state", {}, () => [
+          L(Ne, {
+            "icon-variant": s.emptyStateIconVariant,
+            message: s.emptyStateMessage,
+            title: s.emptyStateTitle
+          }, Ae({ _: 2 }, [
+            s.emptyStateActionMessage ? {
+              name: "action",
+              fn: F(() => [
+                L(we, {
+                  appearance: s.searchInput ? "tertiary" : "primary",
+                  "data-testid": Oe(s.emptyStateActionMessage),
+                  to: s.emptyStateActionRoute ? s.emptyStateActionRoute : void 0,
+                  onClick: a[2] || (a[2] = (t) => e.$emit("empty-state-action-click"))
+                }, {
+                  default: F(() => [
+                    H(e.$slots, "empty-state-action-icon", {}, void 0, !0),
+                    Z(" " + x(s.emptyStateActionMessage), 1)
+                  ]),
+                  _: 3
+                }, 8, ["appearance", "data-testid", "to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["icon-variant", "message", "title"])
+        ], !0)
+      ])) : (c(), b("div", Tt, [
+        M("div", {
+          class: "table-wrapper",
+          style: He(je.value),
+          onScrollPassive: rt
+        }, [
+          M("table", {
+            class: E(["table", {
+              "has-hover": s.rowHover,
+              "is-clickable": Q.value
+            }]),
+            "data-tableid": h(k)
+          }, [
+            M("thead", {
+              class: E({ "is-scrolled": N.value })
+            }, [
+              M("tr", {
+                ref_key: "headerRow",
+                ref: ue,
+                class: E({ "is-scrolled": N.value })
+              }, [
+                (c(!0), b(se, null, oe(S.value, (t, o) => (c(), b("th", {
+                  key: `table-${h(k)}-headers-${o}`,
+                  "aria-sort": s.sortable && t.key === y.value ? f.value === "asc" ? "ascending" : "descending" : void 0,
+                  class: E(["table-headers", xe(t, o)]),
+                  "data-testid": `table-header-${t.key}`,
+                  style: He(ge.value[t.key]),
+                  onClick: () => {
+                    s.sortable && t.sortable && (e.$emit("sort", {
+                      prevKey: y.value,
+                      sortColumnKey: t.key,
+                      sortColumnOrder: f.value === "asc" ? "desc" : "asc"
+                      // display opposite because sortColumnOrder outdated
+                    }), st(t));
+                  },
+                  onMouseleave: a[7] || (a[7] = (i) => G.value = ""),
+                  onMouseover: (i) => G.value = t.key
+                }, [
+                  s.resizeColumns && o !== 0 ? (c(), b("div", {
+                    key: 0,
+                    class: "resize-handle previous",
+                    onClick: a[3] || (a[3] = Me(() => {
+                    }, ["stop"])),
+                    onMousedown: (i) => be(i, S.value[o - 1].key),
+                    onMouseleave: a[4] || (a[4] = (i) => w.value = ""),
+                    onMouseover: (i) => w.value = S.value[o - 1].key
+                  }, null, 40, Ft)) : A("", !0),
+                  M("div", {
+                    "aria-describedby": t.tooltip || e.$slots[K(t.key)] ? `${K(t.key)}-${h(k)}` : void 0,
+                    class: E(["table-headers-container", { resized: V.value === t.key }])
+                  }, [
+                    H(e.$slots, qe(t.key), {
+                      column: te(t)
+                    }, () => [
+                      M("span", {
+                        class: E(["table-header-label", {
+                          "sr-only": t.hideLabel
+                        }])
+                      }, x(t.label ? t.label : t.key), 3)
+                    ], !0),
+                    t.tooltip || e.$slots[K(t.key)] ? (c(), D(St, {
+                      key: 0,
+                      "data-testid": K(t.key),
+                      "tooltip-id": `${K(t.key)}-${h(k)}`
+                    }, {
+                      content: F(() => [
+                        H(e.$slots, K(t.key), {
+                          column: te(t)
+                        }, () => [
+                          Z(x(t.tooltip), 1)
+                        ], !0)
+                      ]),
+                      default: F(() => [
+                        L(h(zt), {
+                          class: "header-tooltip-trigger",
+                          color: `var(--kui-color-text-neutral, ${h(Ke)})`,
+                          size: h(Te)
+                        }, null, 8, ["color", "size"])
+                      ]),
+                      _: 2
+                    }, 1032, ["data-testid", "tooltip-id"])) : A("", !0),
+                    s.sortable && !t.hideLabel && t.sortable ? (c(), D(h(Ct), {
+                      key: 1,
+                      class: "sort-icon",
+                      color: `var(--kui-color-text-neutral, ${h(Ke)})`,
+                      size: h(Te)
+                    }, null, 8, ["color", "size"])) : A("", !0)
+                  ], 10, Et),
+                  s.resizeColumns && o !== S.value.length - 1 ? (c(), b("div", {
+                    key: 1,
+                    class: "resize-handle",
+                    onClick: a[5] || (a[5] = Me(() => {
+                    }, ["stop"])),
+                    onMousedown: (i) => be(i, t.key),
+                    onMouseleave: a[6] || (a[6] = (i) => w.value = ""),
+                    onMouseover: (i) => w.value = t.key
+                  }, null, 40, Rt)) : A("", !0)
+                ], 46, Lt))), 128))
+              ], 2)
+            ], 2),
+            M("tbody", null, [
+              (c(!0), b(se, null, oe(p.value, (t, o) => (c(), b("tr", Ie({ ref_for: !0 }, s.rowAttrs(t), {
+                key: `table-${h(k)}-row-${o}`,
+                role: Q.value ? "link" : null,
+                tabindex: Q.value ? 0 : null
+              }), [
+                (c(!0), b(se, null, oe(S.value, (i, n) => (c(), b("td", Ie({ ref_for: !0 }, s.cellAttrs({ headerKey: i.key, row: t, rowIndex: o, colIndex: n }), {
+                  key: `table-${h(k)}-cell-${n}`,
+                  class: {
+                    "resize-hover": s.resizeColumns && ye.value === i.key && n !== S.value.length - 1
+                  },
+                  style: ge.value[i.key]
+                }, pt(We.value(t[i.key], t), !0)), [
+                  H(e.$slots, i.key, {
+                    row: te(t),
+                    rowKey: o,
+                    rowValue: t[i.key]
+                  }, () => [
+                    Z(x(t[i.key]), 1)
+                  ], !0)
+                ], 16))), 128))
+              ], 16, Vt))), 128))
+            ])
+          ], 10, Kt)
+        ], 36),
+        dt.value ? (c(), D(kt, {
+          key: 0,
+          class: "table-pagination",
+          "current-page": d.value,
+          "data-testid": "table-pagination",
+          "disable-page-jump": s.disablePaginationPageJump,
+          "initial-page-size": T.value,
+          neighbors: s.paginationNeighbors,
+          offset: s.paginationOffset,
+          "offset-next-button-disabled": !q.value || !ve.value,
+          "offset-previous-button-disabled": !ae.value,
+          "page-sizes": s.paginationPageSizes,
+          "total-count": _.value,
+          onGetNextOffset: ut,
+          onGetPreviousOffset: ct,
+          onPageChange: ot,
+          onPageSizeChange: it
+        }, null, 8, ["current-page", "disable-page-jump", "initial-page-size", "neighbors", "offset", "offset-next-button-disabled", "offset-previous-button-disabled", "page-sizes", "total-count"])) : A("", !0)
+      ]))
+    ]));
+  }
+});
+export {
+  la as default
+};