@kong/kongponents 9.49.0 → 9.49.1-pr.3042.f75d935.0

package/dist/kongponents.es143.js

@@ -1,25 +1,26 @@
-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";
+import { defineComponent as ft, useCssVars as gt, computed as u, useAttrs as yt, useSlots as mt, useId as pt, ref as i, watch as $, onMounted as bt, createElementBlock as p, openBlock as c, createCommentVNode as A, createBlock as D, renderSlot as H, createVNode as L, unref as h, createSlots as Ae, withCtx as E, createTextVNode as Z, toDisplayString as x, createElementVNode as M, normalizeStyle as He, normalizeClass as F, Fragment as se, renderList as oe, withModifiers as Me, mergeProps as Ie, toHandlers as ht } from "vue";
+import Te from "./kongponents.es33.js";
+import we from "./kongponents.es44.js";
+import kt from "./kongponents.es21.js";
 /* empty css                 */
-import kt from "./kongponents.es52.js";
-import St from "./kongponents.es24.js";
+import St from "./kongponents.es52.js";
+import Ct from "./kongponents.es24.js";
 /* empty css                 */
-import Ct from "./kongponents.es177.js";
-import zt from "./kongponents.es196.js";
-import $t from "./kongponents.es193.js";
+import zt from "./kongponents.es185.js";
+import $t from "./kongponents.es196.js";
+import Pt from "./kongponents.es171.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.es173.js";
-import Ot from "./kongponents.es220.js";
-import { normalizeSize as At } from "./kongponents.es186.js";
-const Ht = { class: "k-table" }, Mt = {
+import { EmptyStateIconVariants as Ot } from "./kongponents.es11.js";
+import { KUI_ICON_SIZE_30 as Ne, KUI_COLOR_TEXT_NEUTRAL as Ke } from "./kongponents.es178.js";
+import At from "./kongponents.es233.js";
+import { normalizeSize as Ht } from "./kongponents.es179.js";
+import { DEFAULT_PAGE_SIZE as Le } from "./kongponents.es169.js";
+const Mt = { class: "k-table" }, It = {
   key: 0,
   class: "table-toolbar",
   "data-testid": "table-toolbar"
-}, It = {
+}, Tt = {
   key: 0,
   class: "toolbar-default-items-container"
 }, wt = {
@@ -30,10 +31,10 @@ const Ht = { class: "k-table" }, Mt = {
   key: 3,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, Tt = {
+}, Kt = {
   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({
+}, Lt = ["data-tableid"], Et = ["aria-sort", "data-testid", "onClick", "onMouseover"], Ft = ["onMousedown", "onMouseover"], Rt = ["aria-describedby"], Vt = ["onMousedown", "onMouseover"], Bt = ["role", "tabindex"], oa = /* @__PURE__ */ ft({
   __name: "KTable",
   props: {
     /**
@@ -121,7 +122,7 @@ const Ht = { class: "k-table" }, Mt = {
     },
     emptyStateIconVariant: {
       type: String,
-      default: Pt.Default
+      default: Ot.Default
     },
     /**
      * A prop that enables the error state
@@ -255,22 +256,22 @@ const Ht = { class: "k-table" }, Mt = {
   },
   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
+    gt((e) => ({
+      ae6ef3f8: Je.value
     }));
-    const { useDebounce: ie, useRequest: Le, useSwrvState: Fe, clientSideSorter: re } = $t(), l = s, U = Y, ne = gt(), Ee = yt(), k = mt(), I = {
+    const { useDebounce: re, useRequest: Ee, useSwrvState: Fe, clientSideSorter: ie } = Pt(), l = s, U = Y, ne = yt(), Re = mt(), k = pt(), 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 = {};
+    }, b = i([]), ue = i(), R = i([]), S = i([]), V = i(""), T = i(""), G = i(""), ce = u(() => R.value.filter((e) => e.hidable).length > 0), B = u(() => !!(ce.value && !l.error && !O.value && !l.loading && b.value && b.value.length)), Ve = u(() => R.value.filter((e) => e.hidable)), Be = u(() => B.value ? l.tablePreferences.columnVisibility || {} : {}), J = i(B.value ? l.tablePreferences.columnVisibility || {} : {}), _ = i(0), w = i(!1), d = i(1), N = i(15), de = i(""), y = i(""), f = i("desc"), P = i(null), C = i([]), ve = i(!0), Q = i(!1), ee = i(!1), je = u(() => !!Re.toolbar || B.value), qe = u(() => ({
+      maxHeight: Ht(l.maxHeight)
+    })), We = (e) => `column-${e}`, K = (e) => `tooltip-${e}`, te = (e) => e, fe = (e, a) => (t, o) => {
+      const r = /^on[^a-z]/, n = {};
       for (const v in a)
-        i.test(v) && a[v] && (n[v] = a[v]);
+        r.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);
@@ -278,17 +279,17 @@ const Ht = { class: "k-table" }, Mt = {
         }
         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"];
+    }, xe = u(() => (e, a) => {
+      const t = fe("onRow:", ne)(a, "row"), o = fe("onCell:", ne)(e, "cell"), r = ["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;
+          let z = r.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) {
+          for (let m = 0; m < r.length; m++)
+            if (n.target.closest(r[m]) !== null) {
               z = !0;
               break;
             }
@@ -304,7 +305,7 @@ const Ht = { class: "k-table" }, Mt = {
             }
         }
       };
-    }), j = r(l.resizeColumns ? l.tablePreferences.columnWidths || {} : {}), ge = u(() => {
+    }), j = i(l.resizeColumns ? l.tablePreferences.columnWidths || {} : {}), ge = u(() => {
       const e = {};
       for (const a in j.value) {
         if (!j.value[a])
@@ -317,7 +318,7 @@ const Ht = { class: "k-table" }, Mt = {
         };
       }
       return e;
-    }), xe = (e, a) => ({
+    }), Ue = (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,
@@ -326,14 +327,14 @@ const Ht = { class: "k-table" }, Mt = {
       // 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,
+      "is-scrolled": w.value,
       "has-tooltip": !!e.tooltip
-    }), Ue = u(() => V.value ? "resizing" : w.value ? "resize-hover" : G.value ? "th-hover" : ""), ye = u(() => {
-      switch (Ue.value) {
+    }), Ge = u(() => V.value ? "resizing" : T.value ? "resize-hover" : G.value ? "th-hover" : ""), ye = u(() => {
+      switch (Ge.value) {
         case "resizing":
           return V.value;
         case "resize-hover":
-          return w.value;
+          return T.value;
         case "th-hover":
           return G.value;
         default:
@@ -342,7 +343,7 @@ const Ht = { class: "k-table" }, Mt = {
     }), me = u(() => {
       var e;
       return (e = ue.value) == null ? void 0 : e.querySelectorAll("th.resizable");
-    }), Ge = u(() => {
+    }), Je = u(() => {
       var a;
       const e = (a = me.value) == null ? void 0 : a.item(0);
       if (e) {
@@ -351,93 +352,93 @@ const Ht = { class: "k-table" }, Mt = {
           return `${parseInt(t.height, 10)}px`;
       }
       return "auto";
-    }), be = (e, a) => {
+    }), pe = (e, a) => {
       var z;
       if (e.button !== 0)
         return;
       let t = 0, o = 0;
       V.value = a;
-      let i = null;
+      let r = 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}"]`));
+        g.getAttribute("data-testid") === `table-header-${a}` && (r = 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;
+        r == null || r.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);
+      if (t = e.clientX, r) {
+        const g = window == null ? void 0 : window.getComputedStyle(r);
         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 () => {
+    }, be = i(!0), Qe = async () => {
       var t, o;
       const e = l.searchInput, a = await l.fetcher({
-        pageSize: T.value,
+        pageSize: N.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 = () => {
+      return b.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), b.value.length === 0 && d.value > 1 && (d.value = 1, C.value = [null], P.value = null), be.value = !1, a;
+    }, Xe = () => {
       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;
+      d.value = e.page ?? I.page, N.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 && ie(y.value, "", f.value, b.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(() => {
+    const ae = u(() => C.value[d.value - 1]), q = i(null), De = 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 = i(""), { debouncedFn: Ze, generateDebouncedFn: Ye } = re((e) => {
       he.value = e;
-    }, 350), Ye = Ze(0), { data: ke, error: Se, revalidate: _e, isValidating: et } = Le(
-      () => Xe.value,
-      () => Je(),
+    }, 350), _e = Ye(0), { data: ke, error: Se, revalidate: et, isValidating: tt } = Ee(
+      () => De.value,
+      () => Qe(),
       { revalidateOnFocus: !1, revalidateDebounce: 0 }
-    ), { state: le, hasData: tt, swrvState: Ce } = Fe(ke, Se, et), O = r(!0), ze = u(() => ({
-      hasData: tt.value,
+    ), { state: le, hasData: at, swrvState: Ce } = Fe(ke, Se, tt), O = i(!0), ze = u(() => ({
+      hasData: at.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) => {
+    })), $e = u(() => O.value ? "loading" : Se.value ? "error" : "success"), { debouncedFn: Pe, generateDebouncedFn: lt } = re(et, 500), st = lt(0), ot = (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 }) => {
+        data: b.value
+      }) : ie(a, o, f.value, b.value) : l.paginationOffset || Pe(), X();
+    }, rt = ({ 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,
+      C.value = [null], P.value = null, N.value = e, d.value = 1, X();
+    }, nt = (e) => {
+      e && e.target && typeof e.target.scrollTop == "number" && (e.target.scrollTop > 1 ? w.value = !0 : e.target.scrollTop === 0 && (w.value = !w.value));
+    }, ut = u(() => ({
+      pageSize: N.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;
+      $e.value === "success" && U("update:table-preferences", ut.value);
     }, ct = () => {
+      d.value++, P.value = q.value;
+    }, dt = () => {
       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, "-");
+    }, vt = u(() => !!(l.fetcher && !l.disablePagination && !(!l.paginationOffset && l.hidePaginationWhenOptional && _.value <= (l.paginationPageSizes[0] ?? Le)) && !(l.paginationOffset && l.hidePaginationWhenOptional && !ae.value && !q.value && b.value.length < (l.paginationPageSizes[0] ?? Le)))), 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);
+      const a = e[0], o = e[1].filter((r) => a[r.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);
+      e != null && e.length && !b.value.length && (b.value = e);
     }, { deep: !0, immediate: !0 }), $(le, () => {
       switch (le.value) {
         case Ce.PENDING:
@@ -459,50 +460,50 @@ const Ht = { class: "k-table" }, Mt = {
         // newData[stateData].hasData
       });
     }), $(() => l.searchInput, (e) => {
-      d.value !== 1 && (d.value = 1), e === "" ? Ye(e) : De(e);
+      d.value !== 1 && (d.value = 1), e === "" ? _e(e) : Ze(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);
+    const W = i(!1);
+    return $([he, d, N], async (e, a) => {
+      const t = a == null ? void 0 : a[0], o = e[0], r = e[1];
+      o !== t && r !== 1 && (d.value = 1, C.value = [null], P.value = null), ee.value && !be.value && (W.value = !0, o !== "" && o !== t ? await Pe() : await st(), 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, [
+Docs: https://kongponents.konghq.com/components/table-data.html`), Xe();
+    }), (e, a) => (c(), p("div", Mt, [
+      je.value ? (c(), p("div", It, [
         H(e.$slots, "toolbar", { state: ze.value }, void 0, !0),
-        B.value ? (c(), b("div", It, [
-          L(Ot, {
-            columns: Re.value,
+        B.value ? (c(), p("div", Tt, [
+          L(At, {
+            columns: Ve.value,
             "table-id": h(k),
-            "visibility-preferences": Ve.value,
+            "visibility-preferences": Be.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, {
+      (O.value || s.loading || W.value) && !s.error ? (c(), D(kt, {
         key: 1,
         "data-testid": "table-skeleton",
         type: "table"
-      })) : s.error ? (c(), b("div", wt, [
+      })) : s.error ? (c(), p("div", wt, [
         H(e.$slots, "error-state", {}, () => [
-          L(Ne, {
+          L(we, {
             "icon-variant": "error",
             message: s.errorStateMessage,
             title: s.errorStateTitle
           }, Ae({ _: 2 }, [
             s.errorStateActionMessage ? {
               name: "action",
-              fn: F(() => [
-                L(we, {
+              fn: E(() => [
+                L(Te, {
                   "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(() => [
+                  default: E(() => [
                     Z(x(s.errorStateActionMessage), 1)
                   ]),
                   _: 1
@@ -512,23 +513,23 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Qe();
             } : void 0
           ]), 1032, ["message", "title"])
         ], !0)
-      ])) : !s.error && !O.value && !s.loading && !W.value && p.value && !p.value.length ? (c(), b("div", Nt, [
+      ])) : !s.error && !O.value && !s.loading && !W.value && b.value && !b.value.length ? (c(), p("div", Nt, [
         H(e.$slots, "empty-state", {}, () => [
-          L(Ne, {
+          L(we, {
             "icon-variant": s.emptyStateIconVariant,
             message: s.emptyStateMessage,
             title: s.emptyStateTitle
           }, Ae({ _: 2 }, [
             s.emptyStateActionMessage ? {
               name: "action",
-              fn: F(() => [
-                L(we, {
+              fn: E(() => [
+                L(Te, {
                   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(() => [
+                  default: E(() => [
                     H(e.$slots, "empty-state-action-icon", {}, void 0, !0),
                     Z(" " + x(s.emptyStateActionMessage), 1)
                   ]),
@@ -539,31 +540,31 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Qe();
             } : void 0
           ]), 1032, ["icon-variant", "message", "title"])
         ], !0)
-      ])) : (c(), b("div", Tt, [
+      ])) : (c(), p("div", Kt, [
         M("div", {
           class: "table-wrapper",
-          style: He(je.value),
-          onScrollPassive: rt
+          style: He(qe.value),
+          onScrollPassive: nt
         }, [
           M("table", {
-            class: E(["table", {
+            class: F(["table", {
               "has-hover": s.rowHover,
               "is-clickable": Q.value
             }]),
             "data-tableid": h(k)
           }, [
             M("thead", {
-              class: E({ "is-scrolled": N.value })
+              class: F({ "is-scrolled": w.value })
             }, [
               M("tr", {
                 ref_key: "headerRow",
                 ref: ue,
-                class: E({ "is-scrolled": N.value })
+                class: F({ "is-scrolled": w.value })
               }, [
-                (c(!0), b(se, null, oe(S.value, (t, o) => (c(), b("th", {
+                (c(!0), p(se, null, oe(S.value, (t, o) => (c(), p("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)]),
+                  class: F(["table-headers", Ue(t, o)]),
                   "data-testid": `table-header-${t.key}`,
                   style: He(ge.value[t.key]),
                   onClick: () => {
@@ -572,114 +573,114 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Qe();
                       sortColumnKey: t.key,
                       sortColumnOrder: f.value === "asc" ? "desc" : "asc"
                       // display opposite because sortColumnOrder outdated
-                    }), st(t));
+                    }), ot(t));
                   },
-                  onMouseleave: a[7] || (a[7] = (i) => G.value = ""),
-                  onMouseover: (i) => G.value = t.key
+                  onMouseleave: a[7] || (a[7] = (r) => G.value = ""),
+                  onMouseover: (r) => G.value = t.key
                 }, [
-                  s.resizeColumns && o !== 0 ? (c(), b("div", {
+                  s.resizeColumns && o !== 0 ? (c(), p("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
+                    onMousedown: (r) => pe(r, S.value[o - 1].key),
+                    onMouseleave: a[4] || (a[4] = (r) => T.value = ""),
+                    onMouseover: (r) => T.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 }])
+                    class: F(["table-headers-container", { resized: V.value === t.key }])
                   }, [
-                    H(e.$slots, qe(t.key), {
+                    H(e.$slots, We(t.key), {
                       column: te(t)
                     }, () => [
                       M("span", {
-                        class: E(["table-header-label", {
+                        class: F(["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, {
+                    t.tooltip || e.$slots[K(t.key)] ? (c(), D(Ct, {
                       key: 0,
                       "data-testid": K(t.key),
                       "tooltip-id": `${K(t.key)}-${h(k)}`
                     }, {
-                      content: F(() => [
+                      content: E(() => [
                         H(e.$slots, K(t.key), {
                           column: te(t)
                         }, () => [
                           Z(x(t.tooltip), 1)
                         ], !0)
                       ]),
-                      default: F(() => [
-                        L(h(zt), {
+                      default: E(() => [
+                        L(h($t), {
                           class: "header-tooltip-trigger",
                           color: `var(--kui-color-text-neutral, ${h(Ke)})`,
-                          size: h(Te)
+                          size: h(Ne)
                         }, null, 8, ["color", "size"])
                       ]),
                       _: 2
                     }, 1032, ["data-testid", "tooltip-id"])) : A("", !0),
-                    s.sortable && !t.hideLabel && t.sortable ? (c(), D(h(Ct), {
+                    s.sortable && !t.hideLabel && t.sortable ? (c(), D(h(zt), {
                       key: 1,
                       class: "sort-icon",
                       color: `var(--kui-color-text-neutral, ${h(Ke)})`,
-                      size: h(Te)
+                      size: h(Ne)
                     }, null, 8, ["color", "size"])) : A("", !0)
-                  ], 10, Et),
-                  s.resizeColumns && o !== S.value.length - 1 ? (c(), b("div", {
+                  ], 10, Rt),
+                  s.resizeColumns && o !== S.value.length - 1 ? (c(), p("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))
+                    onMousedown: (r) => pe(r, t.key),
+                    onMouseleave: a[6] || (a[6] = (r) => T.value = ""),
+                    onMouseover: (r) => T.value = t.key
+                  }, null, 40, Vt)) : A("", !0)
+                ], 46, Et))), 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), {
+              (c(!0), p(se, null, oe(b.value, (t, o) => (c(), p("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 }), {
+                (c(!0), p(se, null, oe(S.value, (r, n) => (c(), p("td", Ie({ ref_for: !0 }, s.cellAttrs({ headerKey: r.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
+                    "resize-hover": s.resizeColumns && ye.value === r.key && n !== S.value.length - 1
                   },
-                  style: ge.value[i.key]
-                }, pt(We.value(t[i.key], t), !0)), [
-                  H(e.$slots, i.key, {
+                  style: ge.value[r.key]
+                }, ht(xe.value(t[r.key], t), !0)), [
+                  H(e.$slots, r.key, {
                     row: te(t),
                     rowKey: o,
-                    rowValue: t[i.key]
+                    rowValue: t[r.key]
                   }, () => [
-                    Z(x(t[i.key]), 1)
+                    Z(x(t[r.key]), 1)
                   ], !0)
                 ], 16))), 128))
-              ], 16, Vt))), 128))
+              ], 16, Bt))), 128))
             ])
-          ], 10, Kt)
+          ], 10, Lt)
         ], 36),
-        dt.value ? (c(), D(kt, {
+        vt.value ? (c(), D(St, {
           key: 0,
           class: "table-pagination",
           "current-page": d.value,
           "data-testid": "table-pagination",
           "disable-page-jump": s.disablePaginationPageJump,
-          "initial-page-size": T.value,
+          "initial-page-size": N.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,
+          onGetNextOffset: ct,
+          onGetPreviousOffset: dt,
+          onPageChange: rt,
           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)
       ]))
@@ -687,5 +688,5 @@ Docs: https://kongponents.konghq.com/components/table-data.html`), Qe();
   }
 });
 export {
-  la as default
+  oa as default
 };

package/dist/kongponents.es145.js

@@ -15,7 +15,7 @@ const N = { class: "k-tabs" }, P = {
   emits: ["update:modelValue", "change"],
   setup(a, { emit: g }) {
     var c;
-    const r = g, t = C(a.modelValue ? a.modelValue : (c = a.tabs[0]) == null ? void 0 : c.hash), s = async (n) => {
+    const r = g, t = C(a.modelValue ? a.modelValue : ((c = a.tabs[0]) == null ? void 0 : c.hash) ?? ""), s = async (n) => {
       (typeof a.beforeChange != "function" || await a.beforeChange(n)) && (t.value = n, r("change", n), r("update:modelValue", n));
     }, o = (n) => n.replace("#", ""), T = (n) => n.disabled ? "-1" : typeof a.anchorTabindex == "number" && a.anchorTabindex >= -1 && a.anchorTabindex <= 32767 ? String(a.anchorTabindex) : "0";
     return x(() => a.modelValue, (n) => {

package/dist/kongponents.es147.js

@@ -1,7 +1,7 @@
 import { defineComponent as J, useCssVars as X, watch as s, useAttrs as Y, useSlots as G, computed as l, ref as k, useId as j, createElementBlock as f, openBlock as u, normalizeClass as A, createBlock as Q, createCommentVNode as z, createElementVNode as T, createVNode as W, mergeProps as I, createSlots as _, withCtx as g, createTextVNode as b, toDisplayString as S, renderSlot as N, unref as c, Transition as ee, Fragment as te } from "vue";
-import ae from "./kongponents.es193.js";
+import ae from "./kongponents.es171.js";
 import le from "./kongponents.es48.js";
-import { IS_MAYBE_FIREFOX as w, getScrollbarSize as re, cssSupports as ie } from "./kongponents.es185.js";
+import { IS_MAYBE_FIREFOX as w, getScrollbarSize as re, cssSupports as ie } from "./kongponents.es192.js";
 const oe = ["data-value"], ne = ["id", "aria-invalid", "rows", "value"], E = 2048, R = w ? 0 : re(), B = ie("field-sizing", "content"), me = /* @__PURE__ */ J({
   inheritAttrs: !1,
   __name: "KTextArea",

package/dist/kongponents.es149.js

@@ -1,11 +1,11 @@
 import { defineComponent as _, useCssVars as f, createBlock as n, openBlock as t, TransitionGroup as k, withCtx as C, createElementBlock as s, Fragment as g, renderList as v, normalizeClass as h, createElementVNode as a, resolveDynamicComponent as y, unref as r, createCommentVNode as c, toDisplayString as i, withModifiers as I, createVNode as T } from "vue";
-import x from "./kongponents.es199.js";
-import E from "./kongponents.es236.js";
-import $ from "./kongponents.es179.js";
+import x from "./kongponents.es194.js";
+import E from "./kongponents.es224.js";
+import $ from "./kongponents.es187.js";
 import l from "./kongponents.es196.js";
-import w from "./kongponents.es203.js";
-import z from "./kongponents.es202.js";
-import { KUI_COLOR_TEXT as B, KUI_ICON_SIZE_50 as K, KUI_COLOR_TEXT_NEUTRAL_WEAK as L } from "./kongponents.es173.js";
+import w from "./kongponents.es175.js";
+import z from "./kongponents.es177.js";
+import { KUI_COLOR_TEXT as B, KUI_ICON_SIZE_50 as K, KUI_COLOR_TEXT_NEUTRAL_WEAK as L } from "./kongponents.es178.js";
 const N = { class: "toaster-icon-container" }, O = { class: "toaster-content" }, S = {
   key: 0,
   class: "toaster-title"