@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es160.js

@@ -0,0 +1,799 @@
+import { defineComponent as ht, useCssVars as At, computed as y, ref as v, unref as u, createPropsRestProxy as Ct, useSlots as St, useId as wt, useTemplateRef as ne, watch as W, createElementBlock as f, openBlock as r, normalizeClass as p, createCommentVNode as b, createBlock as w, renderSlot as T, withCtx as A, createVNode as O, createSlots as Ke, createTextVNode as ie, toDisplayString as J, createElementVNode as R, normalizeStyle as ze, Fragment as Y, renderList as be, withModifiers as Ie, withDirectives as Tt, mergeProps as se, toHandlers as Rt, resolveDynamicComponent as Et, vShow as Lt, nextTick as Ot } from "vue";
+import ke from "./kongponents.es33.js";
+import Pe from "./kongponents.es44.js";
+import $t from "./kongponents.es21.js";
+/* empty css                 */
+import He from "./kongponents.es24.js";
+/* empty css                 */
+import Nt from "./kongponents.es174.js";
+import Bt from "./kongponents.es219.js";
+import xt from "./kongponents.es186.js";
+import Kt from "./kongponents.es228.js";
+import zt from "./kongponents.es229.js";
+import "./kongponents.es5.js";
+import "./kongponents.es10.js";
+import { EmptyStateIconVariants as It } from "./kongponents.es11.js";
+import { TableViewHeaderKeys as i } from "./kongponents.es17.js";
+import { KUI_ICON_SIZE_30 as re, KUI_COLOR_TEXT_NEUTRAL as Pt, KUI_COLOR_TEXT_PRIMARY as Ht, KUI_COLOR_TEXT_NEUTRAL_WEAK as Mt, KUI_SPACE_60 as Ft } from "./kongponents.es182.js";
+import Ut from "./kongponents.es188.js";
+import Dt from "./kongponents.es52.js";
+import Wt from "./kongponents.es42.js";
+import Me from "./kongponents.es37.js";
+import Xt from "./kongponents.es230.js";
+import { getInitialPageSize as qt } from "./kongponents.es169.js";
+import { getUniqueStringId as jt } from "./kongponents.es151.js";
+import { getScrollbarSize as Vt } from "./kongponents.es183.js";
+import { useResizeObserver as Zt } from "./kongponents.es193.js";
+import { normalizeSize as Gt } from "./kongponents.es184.js";
+import Jt from "./kongponents.es29.js";
+import Yt from "./kongponents.es231.js";
+const Qt = {
+  key: 0,
+  class: "table-toolbar",
+  "data-testid": "table-toolbar"
+}, _t = {
+  key: 0,
+  class: "toolbar-default-items-container"
+}, eo = {
+  key: 2,
+  class: "table-error-state",
+  "data-testid": "table-error-state"
+}, to = {
+  key: 3,
+  class: "table-empty-state",
+  "data-testid": "table-empty-state"
+}, oo = {
+  key: 4,
+  class: "table-container"
+}, ao = ["data-tableid"], lo = ["aria-sort", "data-key", "data-testid", "onClick", "onMouseover"], no = ["onMousedown", "onMouseover"], io = ["aria-describedby"], so = {
+  key: 1,
+  class: "table-header-bulk-actions-container"
+}, ro = ["onMousedown", "onMouseover"], uo = ["role", "tabindex"], co = {
+  key: 1,
+  class: "expandable-row-control-container"
+}, vo = ["aria-controls", "aria-expanded", "onClick"], fo = ["id"], yo = ["colspan"], bo = { class: "expandable-content-wrapper" }, qo = /* @__PURE__ */ ht({
+  __name: "KTableView",
+  props: {
+    data: { default: () => [] },
+    headers: { default: () => [] },
+    resizeColumns: { type: Boolean },
+    tablePreferences: { default: () => ({}) },
+    rowHover: { type: Boolean, default: !0 },
+    rowAttrs: { default: () => (() => ({})) },
+    rowLink: { default: () => (() => ({})) },
+    rowBulkActionEnabled: { default: () => (() => !0) },
+    rowKey: {},
+    cellAttrs: { default: () => (() => ({})) },
+    loading: { type: Boolean },
+    emptyStateTitle: { default: "No Data" },
+    emptyStateMessage: { default: "There is no data to display." },
+    emptyStateActionRoute: {},
+    emptyStateActionMessage: { default: "" },
+    emptyStateIconVariant: { default: () => It.Default },
+    emptyStateButtonAppearance: { default: "primary" },
+    error: { type: Boolean },
+    errorStateTitle: { default: "An error occurred" },
+    errorStateMessage: { default: "Data cannot be displayed due to an error." },
+    errorStateActionRoute: {},
+    errorStateActionMessage: { default: "" },
+    maxHeight: { default: "none" },
+    hidePagination: { type: Boolean },
+    paginationAttributes: { default: () => ({}) },
+    rowExpandable: { default: () => (() => !1) },
+    rowExpanded: { default: () => (() => !1) },
+    hideHeaders: { type: Boolean },
+    nested: { type: Boolean },
+    hidePaginationWhenOptional: { type: Boolean },
+    hideToolbar: { type: Boolean },
+    tooltipTarget: { default: "body" },
+    "onRow:click": { type: Function },
+    "onRow:dblclick": { type: Function },
+    "onRow:auxclick": { type: Function },
+    "onRow:contextmenu": { type: Function },
+    "onRow:mouseover": { type: Function },
+    "onRow:mouseout": { type: Function },
+    "onRow:mouseenter": { type: Function },
+    "onRow:mouseleave": { type: Function },
+    "onRow:mousedown": { type: Function },
+    "onRow:mouseup": { type: Function },
+    "onRow:focus": { type: Function },
+    "onRow:focusin": { type: Function },
+    "onRow:blur": { type: Function },
+    "onRow:focusout": { type: Function },
+    "onRow:keydown": { type: Function },
+    "onRow:keyup": { type: Function },
+    "onRow:keypress": { type: Function },
+    "onCell:click": { type: Function },
+    "onCell:dblclick": { type: Function },
+    "onCell:auxclick": { type: Function },
+    "onCell:contextmenu": { type: Function },
+    "onCell:mouseover": { type: Function },
+    "onCell:mouseout": { type: Function },
+    "onCell:mouseenter": { type: Function },
+    "onCell:mouseleave": { type: Function },
+    "onCell:mousedown": { type: Function },
+    "onCell:mouseup": { type: Function },
+    "onCell:focus": { type: Function },
+    "onCell:focusin": { type: Function },
+    "onCell:blur": { type: Function },
+    "onCell:focusout": { type: Function },
+    "onCell:keydown": { type: Function },
+    "onCell:keyup": { type: Function },
+    "onCell:keypress": { type: Function }
+  },
+  emits: ["page-change", "page-size-change", "get-next-offset", "get-previous-offset", "cell-click", "row-click", "error-action-click", "empty-state-action-click", "update:table-preferences", "sort", "row-select", "update:row-expanded", "row-actions-toggle"],
+  setup(a, { emit: Fe }) {
+    At((e) => ({
+      v7d6bd3b8: u(_e).expandable,
+      v5a9df56f: at.value,
+      b14b44f2: he.value,
+      v3181b04a: Je.value
+    }));
+    const me = Ct(a, ["resizeColumns", "tablePreferences", "rowHover", "rowAttrs", "rowLink", "rowBulkActionEnabled", "rowKey", "cellAttrs", "loading", "emptyStateTitle", "emptyStateMessage", "emptyStateActionMessage", "emptyStateIconVariant", "emptyStateButtonAppearance", "emptyStateActionRoute", "error", "errorStateTitle", "errorStateMessage", "errorStateActionMessage", "errorStateActionRoute", "maxHeight", "hidePagination", "paginationAttributes", "rowExpandable", "rowExpanded", "hideHeaders", "nested", "hidePaginationWhenOptional", "hideToolbar", "tooltipTarget", "data", "headers"]), g = Fe, z = St(), C = wt(), E = (e) => typeof a.rowKey == "function" && typeof a.rowKey(e) == "string" ? a.rowKey(e) : typeof a.rowKey == "string" && a.rowKey in e && typeof e[a.rowKey] == "string" ? e[a.rowKey] : "", ge = ne("table-wrapper"), Ue = ne("table"), De = ne("header-row"), B = v([]), k = v([]), X = v(""), I = v(""), Q = v(""), We = y(() => B.value.some((e) => e.key === i.ACTIONS)), pe = y(() => B.value.filter((e) => e.hidable).length > 0), P = y(() => a.nested || !pe.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), Xe = y(() => a.loading || !(a.data && a.data.length)), qe = y(() => B.value.filter((e) => e.hidable && !te(e.key))), je = y(() => P.value ? a.tablePreferences.columnVisibility || {} : {}), H = v(P.value ? a.tablePreferences.columnVisibility || {} : {}), he = v("100%"), ue = v(!1), q = v(!1), x = v(!1), M = v(!1), h = v(a.tablePreferences.sortColumnKey || ""), S = v(a.tablePreferences.sortColumnOrder || "desc"), de = v(!1), Ve = y(() => !a.hideToolbar && !a.nested && (!!z.toolbar || P.value || ve.value)), Ze = ne("actionsDropdown"), ce = v(!1), Ge = y(() => ({
+      maxHeight: Gt(a.maxHeight)
+    })), Je = y(() => `${Vt()}px`), F = v([]), j = y(() => !a.nested && !a.error && B.value.some((e) => e.key === i.BULK_ACTIONS) && !!(z["bulk-action-items"] || z["bulk-actions"]) && !!a.data.every((e) => E(e))), V = v([]), ve = y(() => a.nested || !j.value || a.error ? !1 : z.toolbar ? !0 : !a.loading && !!a.data && !!a.data.length), Ae = y(() => {
+      const e = F.value.length;
+      return e ? e > 100 ? "99+" : String(e) : "";
+    }), _ = v(/* @__PURE__ */ new WeakMap()), Ye = (e) => `column-${e}`, U = (e) => `tooltip-${e}`, Ce = (e, o) => (t, n) => {
+      const l = /^on[^a-z]/, d = {};
+      for (const s in o)
+        l.test(s) && o[s] && (d[s] = o[s]);
+      return Object.keys(d).reduce((s, c) => {
+        if (c.indexOf(e) === 0) {
+          const m = c.split(e);
+          s[m[1]] = ($) => d[c]($, t, n);
+        }
+        return s;
+      }, {});
+    }, Qe = y(() => (e, o) => {
+      const t = Ce("onRow:", me)(o, "row"), n = Ce("onCell:", me)(e, "cell"), l = ["a", "button", "label", "input", "select", 'span[role="checkbox"]'];
+      return (t.click || n.click) && (de.value = !0), {
+        ...t,
+        ...n,
+        click(d) {
+          const s = d.target, c = s.className;
+          let m = l.includes(s.tagName.toLowerCase()), $ = !1;
+          typeof c == "string" || Array.isArray(c) ? $ = c.includes("k-popover") : typeof c == "object" && ($ = Object.keys(c).includes("k-popover")), s.closest(".popover-content") !== null && ($ = !0);
+          for (let N = 0; N < l.length; N++)
+            if (s.closest(l[N]) !== null) {
+              m = !0;
+              break;
+            }
+          if ((!m || s.hasAttribute("disabled")) && !$ && (t.click || n.click))
+            if (n.click) {
+              g("cell-click", { data: e });
+              const N = n.click(d, e, "cell");
+              typeof N == "function" && N(d, e);
+            } else {
+              g("row-click", { data: o });
+              const N = t.click(d, o, "row");
+              typeof N == "function" && N(d, o);
+            }
+        }
+      };
+    }), Se = parseInt(Ft) * 2 + parseInt(re), we = { expandable: Se, bulkActions: 48, actions: 54 }, _e = Yt(we, (e) => `${e}px`), K = v({
+      ...a.tablePreferences.columnWidths || {},
+      ...we
+      // override special columns with default widths
+    }), Te = y(() => {
+      const e = {};
+      for (const o in K.value) {
+        const t = o;
+        if (!K.value[t])
+          continue;
+        const n = K.value[t] + "px";
+        e[t] = {
+          width: n,
+          maxWidth: n,
+          minWidth: n
+        };
+      }
+      return e;
+    }), et = (e, o) => ({
+      // 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": Re.value === e.key && o !== k.value.length - 1 && oe(e),
+      resizable: a.resizeColumns && !a.nested,
+      // display sort control if column is sortable, label is visible, and sorting is not disabled
+      sortable: !e.hideLabel && !!e.sortable,
+      // display active sorting styles if column is currently sorted
+      "active-sort": !e.hideLabel && !!e.sortable && e.key === h.value,
+      [S.value]: e.key === h.value && !e.hideLabel,
+      "is-scrolled": q.value,
+      "has-tooltip": !!e.tooltip,
+      "sticky-column": Oe(e.key),
+      "second-sticky-column": $e(e.key),
+      "has-row-scroll-overlay": ee(e.key),
+      "actions-column": e.key === i.ACTIONS
+    }), tt = (e) => {
+      if (e.sortable && e.key !== i.BULK_ACTIONS && e.key !== i.ACTIONS) {
+        let o = "asc";
+        e.key === h.value && S.value === "asc" && (o = "desc"), g("sort", {
+          prevKey: h.value,
+          sortColumnKey: e.key,
+          sortColumnOrder: o
+        }), st(e);
+      }
+    }, ot = y(() => X.value ? "resizing" : I.value ? "resize-hover" : Q.value ? "th-hover" : ""), Re = y(() => {
+      switch (ot.value) {
+        case "resizing":
+          return X.value;
+        case "resize-hover":
+          return I.value;
+        case "th-hover":
+          return Q.value;
+        default:
+          return "";
+      }
+    }), Ee = y(() => {
+      var e;
+      return (e = De.value) == null ? void 0 : e.querySelectorAll("th.resizable");
+    }), at = y(() => {
+      var o;
+      const e = (o = Ee.value) == null ? void 0 : o.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";
+    }), Le = (e, o) => {
+      var c;
+      if (e.button !== 0)
+        return;
+      let t = 0, n = 0;
+      X.value = o;
+      let l = null;
+      (c = Ee.value) == null || c.forEach((m) => {
+        m.getAttribute("data-testid") === `table-header-${o}` && (l = document == null ? void 0 : document.querySelector(`[data-tableid="${C}"] [data-testid="table-header-${o}"]`));
+      });
+      const d = (m) => {
+        const $ = m.clientX - t;
+        l == null || l.setAttribute("style", `width: ${n + $}px`), K.value[o] = n + $;
+      }, s = () => {
+        X.value = "", document == null || document.removeEventListener("mousemove", d), document == null || document.removeEventListener("mouseup", s), le(), D.value && ye();
+      };
+      if (t = e.clientX, l) {
+        const m = window == null ? void 0 : window.getComputedStyle(l);
+        m != null && m.width && (n = parseInt(m.width, 10)), document == null || document.addEventListener("mousemove", d), document == null || document.addEventListener("mouseup", s);
+      }
+    }, Oe = (e) => x.value ? e === i.BULK_ACTIONS || e === i.EXPANDABLE : !1, $e = (e) => e === i.BULK_ACTIONS && D.value, ee = (e) => x.value ? j.value ? e === i.BULK_ACTIONS : D.value ? e === i.EXPANDABLE : !1 : !1, te = (e) => e === i.EXPANDABLE || e === i.BULK_ACTIONS || e === i.ACTIONS, oe = (e, o = !1) => {
+      if (!a.resizeColumns || a.nested)
+        return !1;
+      if (o) {
+        if (k.value.indexOf(e) === k.value.length - 1)
+          return !1;
+        const n = k.value[k.value.indexOf(e) - 1];
+        return !te(n.key);
+      }
+      const t = k.value[k.value.indexOf(e) + 1];
+      return !te(e.key) && !te(t.key);
+    }, lt = (e, o, t) => {
+      g("row-actions-toggle", { row: e, open: o }), setTimeout(() => {
+        t.isRowActionsDropdownOpen = o;
+      }, o ? 0 : 100);
+    }, nt = y(() => !(a.hidePagination || a.nested || a.hidePaginationWhenOptional && a.data.length && a.paginationAttributes.totalCount && a.paginationAttributes.totalCount <= a.data.length));
+    W(() => a.headers, (e) => {
+      if (e && e.length) {
+        const o = e.filter((l) => l.key !== i.BULK_ACTIONS && l.key !== i.ACTIONS), t = e.find((l) => l.key === i.BULK_ACTIONS), n = e.find((l) => l.key === i.ACTIONS);
+        t && o.unshift(t), n && o.push(n), B.value = o;
+      }
+    }, { deep: !0, immediate: !0 });
+    const it = (e) => !e.hideLabel && !!e.sortable && e.key !== i.BULK_ACTIONS && e.key !== i.ACTIONS, st = (e) => {
+      const { key: o } = e;
+      h.value && o === h.value ? S.value === "asc" ? S.value = "desc" : S.value = "asc" : (h.value = o, S.value = "asc"), le();
+    }, rt = (e) => {
+      var t;
+      const o = e.target;
+      o && (typeof o.scrollTop == "number" || typeof o.scrollLeft == "number") && (o.scrollTop > 1 ? (ue.value = !0, q.value = !0) : o.scrollTop === 0 && (q.value = !1), o.scrollLeft > 1 ? x.value = !0 : o.scrollLeft === 0 && (x.value = !1), o.scrollWidth <= o.scrollLeft + o.clientWidth ? M.value = !1 : M.value = !0), (t = Ze.value) == null || t.forEach((n) => {
+        n && n.closeDropdown && n.closeDropdown();
+      });
+    }, ae = (e) => V.value.find((o) => o.rowKey === E(e)), ut = (e, o) => ({
+      "data-testid": a.rowAttrs(e)["data-testid"] ? `${a.rowAttrs(e)["data-testid"]}-actions-dropdown-popover` : `row-${o}-actions-dropdown-popover`
+    }), fe = (e) => {
+      if (typeof a.rowBulkActionEnabled != "function")
+        return !1;
+      const o = a.rowBulkActionEnabled(e);
+      return typeof o == "boolean" ? o : o.enabled;
+    }, dt = (e) => {
+      if (typeof a.rowBulkActionEnabled != "function")
+        return "";
+      const o = a.rowBulkActionEnabled(e);
+      return typeof o == "boolean" ? "" : o.disabledTooltip || "";
+    }, ct = (e, o) => {
+      const { to: t } = a.rowLink(e);
+      return !t || o === i.BULK_ACTIONS || o === i.ACTIONS ? "div" : typeof t == "object" ? "router-link" : "a";
+    }, vt = (e, o) => {
+      if (o === i.BULK_ACTIONS || o === i.ACTIONS)
+        return {};
+      const { to: t, target: n } = a.rowLink(e), l = t && typeof t == "object", d = t && typeof t == "string";
+      return {
+        ...l && { to: t },
+        ...d && { href: t },
+        ...(l || d) && {
+          ...n && { target: n }
+        }
+      };
+    }, Ne = v(0), Z = v(qt(a.tablePreferences, a.paginationAttributes)), ft = (e) => {
+      Z.value = e.pageSize, g("page-size-change", e), le();
+    }, yt = y(() => ({
+      sortColumnKey: h.value,
+      sortColumnOrder: S.value,
+      ...a.resizeColumns ? { columnWidths: K.value } : {},
+      ...pe.value ? { columnVisibility: H.value } : {},
+      ...Z.value && !a.hidePagination && { pageSize: Z.value }
+    })), le = () => {
+      g("update:table-preferences", yt.value);
+    }, D = y(() => !a.nested && a.data.some((e) => a.rowExpandable(e))), bt = { key: i.EXPANDABLE, label: "Expandable rows controls", hideLabel: !0 }, Be = () => {
+      const e = [];
+      return a.data.forEach((o, t) => {
+        a.rowExpanded(o) && e.push(t);
+      }), e;
+    }, L = v(Be()), kt = async (e, o) => {
+      ye(), await Ot(), L.value.includes(e) ? (L.value = L.value.filter((t) => t !== e), g("update:row-expanded", { row: o, expanded: !1 })) : (L.value = [...L.value, e], g("update:row-expanded", { row: o, expanded: !0 }));
+    }, mt = y(() => k.value.filter((e) => e.key !== i.EXPANDABLE && e.key !== i.BULK_ACTIONS)), xe = v({}), ye = () => {
+      if (typeof document > "u")
+        return;
+      const e = document == null ? void 0 : document.querySelector(`[data-tableid="${C}"]`), o = e == null ? void 0 : e.querySelectorAll("th"), t = {};
+      o == null || o.forEach((n, l) => {
+        const d = n.getAttribute("data-key");
+        if (d === i.EXPANDABLE)
+          return;
+        let s = n.getBoundingClientRect().width;
+        l === 1 && (s += Se), l === o.length - 1 && (s -= 15), t[d] = s;
+      }), xe.value = t;
+    };
+    W([H, B, D], (e) => {
+      const [o, t, n] = e;
+      let l = t.filter((d) => d.key === i.BULK_ACTIONS ? j.value : o[d.key] !== !1);
+      l.find((d) => d.key === i.EXPANDABLE) && (l = l.filter((d) => d.key !== i.EXPANDABLE)), n && l.unshift(bt), JSON.stringify(l) !== JSON.stringify(k.value) && (k.value = l, le()), n && ye();
+    }, { deep: !0, immediate: !0 }), W(P, (e) => {
+      e && (H.value = a.tablePreferences.columnVisibility || {});
+    }, { immediate: !0 });
+    const G = v(!1), gt = y(() => {
+      const e = V.value.filter((o) => !o.disabled && a.data.find((t) => E(t) === o.rowKey));
+      return !!e.filter((o) => o.selected).length && !!e.filter((o) => !o.selected).length;
+    }), pt = (e) => {
+      V.value.forEach((o) => {
+        a.data.find((t) => E(t) === o.rowKey) && !o.disabled && (o.selected = e);
+      });
+    };
+    return W([() => a.data, V], (e) => {
+      const [o, t] = e;
+      if (o.forEach((n) => {
+        if (!_.value.get(n)) {
+          const l = E(n) || jt();
+          _.value.set(n, `table-${C}-row-${l}`);
+        }
+      }), j.value) {
+        o.forEach((s) => {
+          ae(s) || V.value.push({
+            rowKey: E(s),
+            selected: !1,
+            disabled: !fe(s)
+          });
+        });
+        const n = t.filter((s) => !s.disabled && o.find((c) => E(c) === s.rowKey));
+        n.length && n.filter((s) => s.selected).length === n.length ? G.value = !0 : (n.filter((s) => !s.selected).length, n.length, G.value = !1);
+        const l = o.filter((s) => {
+          const c = t.find((m) => m.rowKey === E(s));
+          return !!(c && c.selected);
+        }), d = [];
+        F.value.forEach((s) => {
+          o.find((m) => E(s) === E(m)) || d.push(s);
+        }), F.value = [...d, ...l];
+      }
+      L.value = Be();
+    }, { deep: !0, immediate: !0 }), W(F, (e) => {
+      g("row-select", e);
+    }), W(() => a.tablePreferences, (e) => {
+      e != null && e.pageSize && (Z.value = e.pageSize, Ne.value++), h.value = e != null && e.sortColumnKey ? e.sortColumnKey : h.value, S.value = e != null && e.sortColumnOrder ? e.sortColumnOrder : S.value, K.value = e != null && e.columnWidths ? e.columnWidths : K.value, H.value = e != null && e.columnVisibility ? e.columnVisibility : H.value;
+    }), Zt([ge, Ue], () => {
+      const e = ge.value;
+      e && (M.value = e.scrollWidth > e.clientWidth, he.value = e.clientHeight + "px", ue.value = e.scrollHeight > e.clientHeight);
+    }), (e, o) => (r(), f("div", {
+      class: p(["k-table-view", { "hide-headers": a.hideHeaders }])
+    }, [
+      Ve.value ? (r(), f("div", Qt, [
+        T(e.$slots, "toolbar", {}, void 0, !0),
+        ve.value || P.value ? (r(), f("div", _t, [
+          ve.value ? T(e.$slots, "bulk-actions", {
+            key: 0,
+            selectedRows: F.value
+          }, () => [
+            e.$slots["bulk-actions"] ? b("", !0) : (r(), w(Xt, {
+              key: 0,
+              "button-label": B.value.find((t) => t.key === u(i).BULK_ACTIONS).label,
+              count: Ae.value,
+              disabled: !Ae.value || a.loading || !a.data.length
+            }, {
+              items: A(() => [
+                T(e.$slots, "bulk-action-items", { selectedRows: F.value }, void 0, !0)
+              ]),
+              _: 3
+            }, 8, ["button-label", "count", "disabled"]))
+          ], !0) : b("", !0),
+          P.value ? (r(), w(Ut, {
+            key: 1,
+            columns: qe.value,
+            disabled: Xe.value,
+            "table-id": u(C),
+            "visibility-preferences": je.value,
+            onUpdate: o[0] || (o[0] = (t) => H.value = t)
+          }, null, 8, ["columns", "disabled", "table-id", "visibility-preferences"])) : b("", !0)
+        ])) : b("", !0)
+      ])) : b("", !0),
+      a.loading && !a.error ? (r(), w($t, {
+        key: 1,
+        "data-testid": "table-skeleton",
+        type: "table"
+      })) : a.error ? (r(), f("div", eo, [
+        T(e.$slots, "error-state", {}, () => [
+          O(Pe, {
+            "icon-variant": "error",
+            message: a.errorStateMessage,
+            title: a.errorStateTitle
+          }, Ke({ _: 2 }, [
+            a.errorStateActionMessage ? {
+              name: "action",
+              fn: A(() => [
+                O(ke, {
+                  "data-testid": "error-state-action",
+                  to: a.errorStateActionRoute,
+                  onClick: o[1] || (o[1] = (t) => g("error-action-click"))
+                }, {
+                  default: A(() => [
+                    ie(J(a.errorStateActionMessage), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["message", "title"])
+        ], !0)
+      ])) : !a.error && !a.loading && a.data && !a.data.length ? (r(), f("div", to, [
+        T(e.$slots, "empty-state", {}, () => [
+          O(Pe, {
+            "icon-variant": a.emptyStateIconVariant,
+            message: a.emptyStateMessage,
+            title: a.emptyStateTitle
+          }, Ke({ _: 2 }, [
+            a.emptyStateActionMessage ? {
+              name: "action",
+              fn: A(() => [
+                O(ke, {
+                  appearance: a.emptyStateButtonAppearance,
+                  "data-testid": "empty-state-action",
+                  to: a.emptyStateActionRoute,
+                  onClick: o[2] || (o[2] = (t) => g("empty-state-action-click"))
+                }, {
+                  default: A(() => [
+                    T(e.$slots, "empty-state-action-icon", {}, void 0, !0),
+                    ie(" " + J(a.emptyStateActionMessage), 1)
+                  ]),
+                  _: 3
+                }, 8, ["appearance", "to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["icon-variant", "message", "title"])
+        ], !0)
+      ])) : (r(), f("div", oo, [
+        R("div", {
+          ref: "table-wrapper",
+          class: "table-wrapper",
+          style: ze(Ge.value),
+          onScrollPassive: rt
+        }, [
+          R("table", {
+            ref: "table",
+            class: p(["table", {
+              "has-hover": a.rowHover && !ce.value,
+              "is-clickable": de.value
+            }]),
+            "data-tableid": u(C)
+          }, [
+            a.hideHeaders ? b("", !0) : (r(), f("thead", {
+              key: 0,
+              class: p({ "is-scrolled": q.value })
+            }, [
+              R("tr", {
+                ref: "header-row",
+                class: p({ "is-scrolled": q.value })
+              }, [
+                (r(!0), f(Y, null, be(k.value, (t, n) => (r(), f("th", {
+                  key: `table-${u(C)}-headers-${t.key}`,
+                  "aria-sort": t.key === h.value ? S.value === "asc" ? "ascending" : "descending" : void 0,
+                  class: p(["table-headers", et(t, n)]),
+                  "data-key": t.key,
+                  "data-testid": `table-header-${t.key}`,
+                  style: ze(Te.value[t.key]),
+                  onClick: () => tt(t),
+                  onMouseleave: o[8] || (o[8] = (l) => Q.value = ""),
+                  onMouseover: (l) => Q.value = t.key
+                }, [
+                  n !== 0 && oe(t, !0) ? (r(), f("div", {
+                    key: 0,
+                    class: "resize-handle previous",
+                    onClick: o[3] || (o[3] = Ie(() => {
+                    }, ["stop"])),
+                    onMousedown: (l) => Le(l, k.value[n - 1].key),
+                    onMouseleave: o[4] || (o[4] = (l) => I.value = ""),
+                    onMouseover: (l) => I.value = k.value[n - 1].key
+                  }, null, 40, no)) : b("", !0),
+                  R("div", {
+                    "aria-describedby": t.tooltip || z[U(t.key)] ? `${U(t.key)}-${u(C)}` : void 0,
+                    class: p(["table-headers-container", { resized: X.value === t.key }])
+                  }, [
+                    t.key !== u(i).BULK_ACTIONS ? T(e.$slots, Ye(t.key), {
+                      key: 0,
+                      column: t
+                    }, () => [
+                      R("span", {
+                        class: p(["table-header-label", {
+                          "sr-only": t.hideLabel || t.key === u(i).ACTIONS && t.hideLabel !== !1
+                        }])
+                      }, J(t.label ? t.label : t.key), 3)
+                    ], !0) : (r(), f("div", so, [
+                      O(Me, {
+                        modelValue: G.value,
+                        "onUpdate:modelValue": o[5] || (o[5] = (l) => G.value = l),
+                        "aria-label": "Toggle selection for all rows",
+                        class: "table-header-bulk-actions-checkbox",
+                        "data-testid": "table-header-bulk-actions-checkbox",
+                        indeterminate: gt.value,
+                        onChange: pt
+                      }, null, 8, ["modelValue", "indeterminate"])
+                    ])),
+                    t.tooltip || e.$slots[U(t.key)] ? (r(), w(He, {
+                      key: 2,
+                      "data-testid": U(t.key),
+                      "kpop-attributes": { target: a.tooltipTarget },
+                      "max-width": "300",
+                      "tooltip-id": `${U(t.key)}-${u(C)}`
+                    }, {
+                      content: A(() => [
+                        T(e.$slots, U(t.key), { column: t }, () => [
+                          ie(J(t.tooltip), 1)
+                        ], !0)
+                      ]),
+                      default: A(() => [
+                        O(u(xt), {
+                          class: "header-tooltip-trigger",
+                          color: `var(--kui-color-text-neutral, ${u(Pt)})`,
+                          size: u(re),
+                          tabindex: "0"
+                        }, null, 8, ["color", "size"])
+                      ]),
+                      _: 2
+                    }, 1032, ["data-testid", "kpop-attributes", "tooltip-id"])) : b("", !0),
+                    it(t) ? (r(), f(Y, { key: 3 }, [
+                      h.value === t.key ? (r(), w(u(Nt), {
+                        key: 0,
+                        class: "active-sort-icon",
+                        color: `var(--kui-color-text-primary, ${u(Ht)})`,
+                        decorative: "",
+                        size: u(re)
+                      }, null, 8, ["color", "size"])) : (r(), w(u(zt), {
+                        key: 1,
+                        class: "sort-icon",
+                        color: `var(--kui-color-text-neutral-weak, ${u(Mt)})`,
+                        size: u(re),
+                        title: `Sort by ${t.label}`
+                      }, null, 8, ["color", "size", "title"]))
+                    ], 64)) : b("", !0)
+                  ], 10, io),
+                  n !== k.value.length - 1 && oe(t) ? (r(), f("div", {
+                    key: 1,
+                    class: "resize-handle",
+                    onClick: o[6] || (o[6] = Ie(() => {
+                    }, ["stop"])),
+                    onMousedown: (l) => Le(l, t.key),
+                    onMouseleave: o[7] || (o[7] = (l) => I.value = ""),
+                    onMouseover: (l) => I.value = t.key
+                  }, null, 40, ro)) : b("", !0),
+                  ee(t.key) ? (r(), f("div", {
+                    key: 2,
+                    "aria-hidden": "true",
+                    class: p(["scroll-overlay row-overlay left", {
+                      "overlay-visible": x.value
+                    }])
+                  }, null, 2)) : b("", !0),
+                  t.key === u(i).ACTIONS ? (r(), f("div", {
+                    key: 3,
+                    "aria-hidden": "true",
+                    class: p(["scroll-overlay row-overlay right", {
+                      "overlay-visible": M.value
+                    }])
+                  }, null, 2)) : b("", !0)
+                ], 46, lo))), 128))
+              ], 2)
+            ], 2)),
+            R("tbody", null, [
+              (r(!0), f(Y, null, be(a.data, (t, n) => (r(), f(Y, {
+                key: _.value.get(t)
+              }, [
+                R("tr", se({
+                  class: {
+                    "last-row": n === a.data.length - 1 && !L.value.includes(n)
+                  },
+                  role: a.rowLink(t).to ? "link" : void 0,
+                  tabindex: de.value && !a.rowLink(t).to ? 0 : void 0
+                }, { ref_for: !0 }, a.rowAttrs(t)), [
+                  (r(!0), f(Y, null, be(k.value, (l, d) => (r(), w(u(Jt), {
+                    key: `${_.value.get(t)}-cell-${l.key}`,
+                    data: { isRowActionsDropdownOpen: !1 }
+                  }, {
+                    default: A(({ data: s }) => [
+                      R("td", se({
+                        class: {
+                          "resize-hover": Re.value === l.key && d !== k.value.length - 1 && oe(l),
+                          "row-link": !!a.rowLink(t).to,
+                          "sticky-column": Oe(l.key),
+                          "second-sticky-column": $e(l.key),
+                          "has-row-scroll-overlay": ee(l.key),
+                          "actions-column": l.key === u(i).ACTIONS
+                        },
+                        style: {
+                          ...Te.value[l.key],
+                          ...s.isRowActionsDropdownOpen ? { zIndex: 2 } : {}
+                        }
+                      }, { ref_for: !0 }, a.cellAttrs({ headerKey: l.key, row: t, rowIndex: n, colIndex: d }), Rt(Qe.value(t[l.key], t), !0)), [
+                        l.key !== u(i).EXPANDABLE ? (r(), w(Et(ct(t, l.key)), se({
+                          key: 0,
+                          class: "cell-wrapper"
+                        }, { ref_for: !0 }, vt(t, l.key)), {
+                          default: A(() => [
+                            l.key !== u(i).BULK_ACTIONS && l.key !== u(i).ACTIONS ? T(e.$slots, l.key, {
+                              key: 0,
+                              row: t,
+                              rowKey: n,
+                              rowValue: t[l.key]
+                            }, () => [
+                              ie(J(t[l.key]), 1)
+                            ], !0) : l.key === u(i).BULK_ACTIONS && ae(t) ? (r(), w(He, {
+                              key: 1,
+                              "kpop-attributes": { target: a.tooltipTarget },
+                              "max-width": "200",
+                              placement: "bottom-start",
+                              text: fe(t) ? void 0 : dt(t)
+                            }, {
+                              default: A(() => [
+                                O(Me, {
+                                  modelValue: ae(t).selected,
+                                  "onUpdate:modelValue": (c) => ae(t).selected = c,
+                                  "aria-label": "Toggle row selection",
+                                  class: "bulk-actions-checkbox",
+                                  "data-testid": "bulk-actions-checkbox",
+                                  disabled: !fe(t)
+                                }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
+                              ]),
+                              _: 2
+                            }, 1032, ["kpop-attributes", "text"])) : l.key === u(i).ACTIONS ? (r(), w(Wt, {
+                              key: 2,
+                              ref_for: !0,
+                              ref: "actionsDropdown",
+                              class: "actions-dropdown",
+                              "data-testid": "actions-dropdown",
+                              "kpop-attributes": { placement: "bottom-end", target: "body", popoverElementAttributes: ut(t, n) },
+                              onToggleDropdown: (c) => lt(t, c, s)
+                            }, {
+                              items: A(() => [
+                                T(e.$slots, "action-items", { row: t }, void 0, !0)
+                              ]),
+                              default: A(() => [
+                                O(ke, {
+                                  appearance: "tertiary",
+                                  "aria-label": l.label,
+                                  class: "actions-dropdown-trigger",
+                                  "data-testid": "row-actions-dropdown-trigger",
+                                  icon: "",
+                                  size: "small",
+                                  onMouseleave: o[9] || (o[9] = (c) => ce.value = !1),
+                                  onMouseover: o[10] || (o[10] = (c) => ce.value = !0)
+                                }, {
+                                  default: A(() => [
+                                    O(u(Kt), {
+                                      class: "more-icon",
+                                      decorative: ""
+                                    })
+                                  ]),
+                                  _: 1
+                                }, 8, ["aria-label"])
+                              ]),
+                              _: 2
+                            }, 1032, ["kpop-attributes", "onToggleDropdown"])) : b("", !0)
+                          ]),
+                          _: 2
+                        }, 1040)) : a.rowExpandable(t) ? (r(), f("div", co, [
+                          R("button", {
+                            "aria-controls": `table-${u(C)}-row-${n}-expandable-content`,
+                            "aria-expanded": L.value.includes(n),
+                            "aria-label": "Toggle row expandable content",
+                            class: p(["expandable-row-control", { expanded: L.value.includes(n) }]),
+                            "data-testid": "expandable-row-control",
+                            type: "button",
+                            onClick: (c) => kt(n, t)
+                          }, [
+                            O(u(Bt), {
+                              class: "expandable-row-control-icon",
+                              decorative: ""
+                            })
+                          ], 10, vo)
+                        ])) : b("", !0),
+                        ee(l.key) ? (r(), f("div", {
+                          key: 2,
+                          "aria-hidden": "true",
+                          class: p(["scroll-overlay row-overlay left", {
+                            "overlay-visible": x.value
+                          }])
+                        }, null, 2)) : b("", !0),
+                        l.key === u(i).ACTIONS ? (r(), f("div", {
+                          key: 3,
+                          "aria-hidden": "true",
+                          class: p(["scroll-overlay row-overlay right", {
+                            "overlay-visible": M.value
+                          }])
+                        }, null, 2)) : b("", !0)
+                      ], 16)
+                    ]),
+                    _: 2
+                  }, 1024))), 128))
+                ], 16, uo),
+                D.value && a.rowExpandable(t) ? Tt((r(), f("tr", {
+                  key: 0,
+                  id: `table-${u(C)}-row-${n}-expandable-content`,
+                  class: "expandable-content-row",
+                  "data-testid": "expandable-content-row"
+                }, [
+                  R("td", {
+                    colspan: k.value.length
+                  }, [
+                    R("div", bo, [
+                      T(e.$slots, "row-expanded", {
+                        columnWidths: xe.value,
+                        nestedHeaders: mt.value,
+                        row: t
+                      }, void 0, !0)
+                    ])
+                  ], 8, yo)
+                ], 8, fo)), [
+                  [Lt, L.value.includes(n)]
+                ]) : b("", !0)
+              ], 64))), 128))
+            ])
+          ], 10, ao)
+        ], 36),
+        !j.value && !D.value ? (r(), f("div", {
+          key: 0,
+          "aria-hidden": "true",
+          class: p(["scroll-overlay table-overlay left", {
+            "overlay-visible": x.value
+          }])
+        }, null, 2)) : b("", !0),
+        We.value ? b("", !0) : (r(), f("div", {
+          key: 1,
+          "aria-hidden": "true",
+          class: p(["scroll-overlay table-overlay right", {
+            "overlay-visible": M.value,
+            "scrollbar-offset": ue.value
+          }])
+        }, null, 2)),
+        nt.value ? (r(), w(Dt, se({
+          key: `table-${u(C)}-pagination-${Ne.value}`,
+          class: "table-pagination",
+          "data-testid": "table-pagination",
+          "initial-page-size": Z.value
+        }, a.paginationAttributes, {
+          onGetNextOffset: o[11] || (o[11] = (t) => g("get-next-offset")),
+          onGetPreviousOffset: o[12] || (o[12] = (t) => g("get-previous-offset")),
+          onPageChange: o[13] || (o[13] = (t) => g("page-change", t)),
+          onPageSizeChange: ft
+        }), null, 16, ["initial-page-size"])) : b("", !0)
+      ]))
+    ], 2));
+  }
+});
+export {
+  qo as default
+};