@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es83.js

@@ -0,0 +1,270 @@
+import { defineComponent as Se, useSlots as be, useId as pe, ref as n, computed as r, watch as v, onMounted as ke, createElementBlock as m, openBlock as s, createBlock as I, createCommentVNode as M, resolveDynamicComponent as Pe, withCtx as u, createTextVNode as b, toDisplayString as p, renderSlot as c, createVNode as A, createSlots as x, unref as D, normalizeClass as ze, Fragment as Ie, renderList as Ae } from "vue";
+import Ce from "./kongponents.es187.js";
+import $e from "./kongponents.es21.js";
+/* empty css                 */
+import Q from "./kongponents.es44.js";
+import j from "./kongponents.es33.js";
+import Te from "./kongponents.es52.js";
+import Ne from "./kongponents.es36.js";
+const Oe = { class: "k-catalog" }, Me = {
+  key: 1,
+  class: "catalog-toolbar",
+  "data-testid": "catalog-toolbar"
+}, Fe = {
+  key: 3,
+  class: "catalog-error-state",
+  "data-testid": "catalog-error-state"
+}, Be = {
+  key: 4,
+  class: "catalog-empty-state",
+  "data-testid": "catalog-empty-state"
+}, Ke = ["data-tableid"], J = 15, xe = /* @__PURE__ */ Se({
+  __name: "KCatalog",
+  props: {
+    titleTag: { default: "div" },
+    loading: { type: Boolean },
+    cardSize: { default: "medium" },
+    title: { default: "" },
+    truncateDescription: { type: Boolean, default: !0 },
+    emptyStateTitle: { default: "No Data" },
+    emptyStateMessage: { default: "There is no data to display." },
+    emptyStateActionRoute: { default: "" },
+    emptyStateActionMessage: { default: "" },
+    emptyStateIconVariant: { default: "default" },
+    error: { type: Boolean },
+    errorStateTitle: { default: "An error occurred" },
+    errorStateMessage: { default: "Data cannot be displayed due to an error." },
+    errorStateActionRoute: { default: "" },
+    errorStateActionMessage: { default: "" },
+    fetcher: { type: Function },
+    initialFetcherParams: { default: null },
+    cacheIdentifier: { default: "" },
+    fetcherCacheKey: { default: "" },
+    searchInput: { default: "" },
+    paginationNeighbors: { default: 1 },
+    paginationPageSizes: { default: () => [15, 30, 50, 75, 100] },
+    paginationTotalItems: { default: null },
+    disablePaginationPageJump: { type: Boolean },
+    disablePagination: { type: Boolean },
+    hidePaginationWhenOptional: { type: Boolean },
+    paginationOffset: { type: Boolean }
+  },
+  emits: ["card-click", "error-action-click", "empty-state-action-click", "update:catalog-preferences", "state"],
+  setup(t, { emit: U }) {
+    const { useRequest: W, useDebounce: Z, useSwrvState: X } = Ce(), h = U, Y = be(), C = pe(), _ = () => {
+      var a;
+      const e = (a = t.paginationPageSizes) == null ? void 0 : a[0];
+      return e || J;
+    }, o = n([]), $ = n(0), F = n(""), l = n(1), d = n(_()), g = n(null), f = n([]), T = r(() => f.value[l.value - 1]), y = n(null), B = n(!0), N = n(!1), ee = r(() => !!Y.toolbar), k = {
+      page: 1,
+      pageSize: d.value,
+      query: "",
+      offset: null
+    }, K = r(() => (S.value || t.loading || P.value) && !t.error), te = r(() => !K.value && o.value && !o.value.length), ae = r(() => ({
+      pageSize: d.value
+    })), E = n(!0), ie = async () => {
+      var a, i;
+      const e = await t.fetcher({
+        query: t.searchInput || F.value,
+        pageSize: d.value,
+        page: l.value,
+        offset: g.value
+      });
+      if (e == null)
+        throw new Error("KCatalog: Fetcher did not return data correctly.");
+      return o.value = e.data, $.value = t.paginationTotalItems || e.total || ((a = e.data) == null ? void 0 : a.length), t.paginationOffset && ((i = e.pagination) != null && i.offset ? (y.value = e.pagination.offset, f.value[l.value] || f.value.push(e.pagination.offset)) : y.value = null, B.value = e.pagination && "hasNextPage" in e.pagination ? !!e.pagination.hasNextPage : !0), o.value.length === 0 && l.value > 1 && (l.value = 1, f.value = [null], g.value = null), E.value = !1, e;
+    }, le = () => {
+      const e = {
+        ...k,
+        ...t.initialFetcherParams
+      };
+      l.value = e.page ?? k.page, d.value = e.pageSize ?? k.pageSize, F.value = e.query ?? k.query, t.paginationOffset && (g.value = e.offset, f.value.push(e.offset)), N.value = !0;
+    }, ne = r(() => {
+      if (!t.fetcher || !N.value)
+        return "";
+      let e = C;
+      return t.cacheIdentifier && (e = t.cacheIdentifier), t.fetcherCacheKey && (e += `-${t.fetcherCacheKey}`), `k-catalog_${e}`;
+    }), R = n(""), { debouncedFn: oe, generateDebouncedFn: se } = Z((e) => {
+      R.value = e;
+    }, 350), re = se(0), { data: q, error: L, revalidate: ue, isValidating: ce } = W(
+      () => ne.value,
+      () => ie(),
+      { revalidateOnFocus: !1, revalidateDebounce: 0 }
+    ), { state: O, hasData: de, swrvState: V } = X(q, L, ce), S = n(!0), G = r(() => ({
+      hasData: de.value,
+      state: O.value
+    })), ge = r(() => S.value ? "loading" : L.value ? "error" : "success"), fe = ({ page: e }) => {
+      l.value = e;
+    }, ve = ({ pageSize: e }) => {
+      f.value = [null], g.value = null, d.value = e, l.value = 1;
+    }, me = () => {
+      l.value++, g.value = y.value;
+    }, he = () => {
+      l.value--, g.value = T.value;
+    }, H = (e) => e.toLowerCase().replace(/[^[a-z0-9]/gi, "-"), ye = r(() => {
+      var a;
+      if (!t.fetcher || t.disablePagination || !o.value || !o.value.length || t.error)
+        return !1;
+      const e = ((a = t.paginationPageSizes) == null ? void 0 : a[0]) ?? J;
+      return t.hidePaginationWhenOptional && l.value === 1 ? t.paginationOffset ? !!T.value || !!y.value || o.value.length >= e : $.value > e : !0;
+    });
+    v(q, (e) => {
+      e != null && e.length && !o.value.length && (o.value = e);
+    }, { deep: !0, immediate: !0 }), v(O, () => {
+      switch (O.value) {
+        case V.PENDING:
+          S.value = !0;
+          break;
+        case V.VALIDATING_HAS_DATA:
+          S.value = P.value;
+          break;
+        default:
+          S.value = !1;
+          break;
+      }
+    }, { immediate: !0 }), v([G, ge], (e) => {
+      var a;
+      h("state", {
+        state: e == null ? void 0 : e[1],
+        // newData[catalogState]
+        hasData: (a = e == null ? void 0 : e[0]) == null ? void 0 : a.hasData
+        // newData[stateData].hasData
+      });
+    }), v(() => t.searchInput, (e) => {
+      l.value !== 1 && (l.value = 1), e === "" ? re(e) : oe(e);
+    }, { immediate: !0 });
+    const P = n(!1);
+    return v([R, l, d], async (e, a) => {
+      const i = a == null ? void 0 : a[0], z = e[0], w = e[1];
+      z !== i && w !== 1 && (l.value = 1, f.value = [null], g.value = null), N.value && !E.value && (P.value = !0, await ue(), P.value = !1);
+    }, { deep: !0, immediate: !0 }), v(ae, (e) => {
+      h("update:catalog-preferences", e);
+    }), ke(() => {
+      le();
+    }), (e, a) => (s(), m("div", Oe, [
+      t.title ? (s(), I(Pe(t.titleTag), {
+        key: 0,
+        class: "catalog-title",
+        "data-testid": "catalog-title"
+      }, {
+        default: u(() => [
+          b(p(t.title), 1)
+        ]),
+        _: 1
+      })) : M("", !0),
+      ee.value ? (s(), m("div", Me, [
+        c(e.$slots, "toolbar", { state: G.value }, void 0, !0)
+      ])) : M("", !0),
+      K.value ? (s(), I($e, {
+        key: 2,
+        "card-count": 4,
+        class: "catalog-skeleton-loader",
+        "data-testid": "catalog-skeleton-loader",
+        type: "card"
+      })) : t.error ? (s(), m("div", Fe, [
+        c(e.$slots, "error-state", {}, () => [
+          A(Q, {
+            "icon-variant": "error",
+            message: t.errorStateMessage,
+            title: t.errorStateTitle
+          }, x({ _: 2 }, [
+            t.errorStateActionMessage ? {
+              name: "action",
+              fn: u(() => [
+                A(j, {
+                  "data-testid": H(t.errorStateActionMessage),
+                  to: t.errorStateActionRoute ? t.errorStateActionRoute : void 0,
+                  onClick: a[0] || (a[0] = (i) => h("error-action-click"))
+                }, {
+                  default: u(() => [
+                    b(p(t.errorStateActionMessage), 1)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid", "to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["message", "title"])
+        ], !0)
+      ])) : te.value ? (s(), m("div", Be, [
+        c(e.$slots, "empty-state", {}, () => [
+          A(Q, {
+            "icon-variant": t.emptyStateIconVariant,
+            message: t.emptyStateMessage,
+            title: t.emptyStateTitle
+          }, x({ _: 2 }, [
+            t.emptyStateActionMessage ? {
+              name: "action",
+              fn: u(() => [
+                A(j, {
+                  appearance: t.searchInput ? "tertiary" : "primary",
+                  "data-testid": H(t.emptyStateActionMessage),
+                  to: t.emptyStateActionRoute ? t.emptyStateActionRoute : void 0,
+                  onClick: a[1] || (a[1] = (i) => h("empty-state-action-click"))
+                }, {
+                  default: u(() => [
+                    c(e.$slots, "empty-state-action-icon", {}, void 0, !0),
+                    b(" " + p(t.emptyStateActionMessage), 1)
+                  ]),
+                  _: 3
+                }, 8, ["appearance", "data-testid", "to"])
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["icon-variant", "message", "title"])
+        ], !0)
+      ])) : (s(), m("div", {
+        key: 5,
+        class: ze(["catalog-page", `card-${t.cardSize}`]),
+        "data-tableid": D(C)
+      }, [
+        c(e.$slots, "body", { data: o.value }, () => [
+          (s(!0), m(Ie, null, Ae(o.value, (i, z) => (s(), I(Ne, {
+            key: i.key ? i.key : `catalog-${D(C)}-item-${z}`,
+            class: "catalog-item",
+            "data-testid": i.id ? i.id : `catalog-item-${z}`,
+            item: i,
+            truncate: t.truncateDescription,
+            onClick: (w) => h("card-click", i)
+          }, {
+            "card-title": u(() => [
+              c(e.$slots, "card-title", { item: i }, () => [
+                b(p(i.title), 1)
+              ], !0)
+            ]),
+            "card-actions": u(() => [
+              c(e.$slots, "card-actions", { item: i }, void 0, !0)
+            ]),
+            "card-body": u(() => [
+              c(e.$slots, "card-body", { item: i }, () => [
+                b(p(i.description), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["data-testid", "item", "truncate", "onClick"]))), 128))
+        ], !0)
+      ], 10, Ke)),
+      ye.value ? (s(), I(Te, {
+        key: 6,
+        class: "card-pagination",
+        "current-page": l.value,
+        "data-testid": "catalog-pagination",
+        "disable-page-jump": t.disablePaginationPageJump,
+        "initial-page-size": d.value,
+        neighbors: t.paginationNeighbors,
+        offset: t.paginationOffset,
+        "offset-next-button-disabled": !y.value || !B.value,
+        "offset-previous-button-disabled": !T.value,
+        "page-sizes": t.paginationPageSizes,
+        "total-count": $.value,
+        onGetNextOffset: me,
+        onGetPreviousOffset: he,
+        onPageChange: fe,
+        onPageSizeChange: ve
+      }, null, 8, ["current-page", "disable-page-jump", "initial-page-size", "neighbors", "offset", "offset-next-button-disabled", "offset-previous-button-disabled", "page-sizes", "total-count"])) : M("", !0)
+    ]));
+  }
+});
+export {
+  xe as default
+};

package/dist/kongponents.es85.js

@@ -0,0 +1,50 @@
+import { defineComponent as n, createBlock as d, openBlock as s, withCtx as i, createElementVNode as u, normalizeClass as f, renderSlot as a, createTextVNode as l, toDisplayString as o } from "vue";
+import C from "./kongponents.es34.js";
+const b = /* @__PURE__ */ n({
+  __name: "KCatalogItem",
+  props: {
+    item: {},
+    truncate: { type: Boolean, default: !0 }
+  },
+  emits: ["click"],
+  setup(t, { emit: c }) {
+    const r = c, m = (e) => {
+      r("click", {
+        evt: e,
+        item: t.item
+      });
+    };
+    return (e, k) => (s(), d(C, {
+      class: "k-catalog-item",
+      "data-testid": t.item && t.item.title ? `${t.item.title.replace(/[^0-9a-z]/gi, "-")}-catalog-item` : "catalog-item",
+      role: "button",
+      tabindex: "0",
+      onClick: m
+    }, {
+      title: i(() => [
+        a(e.$slots, "card-title", {}, () => [
+          l(o(t.item ? t.item.title : ""), 1)
+        ], !0)
+      ]),
+      actions: i(() => [
+        a(e.$slots, "card-actions", {}, void 0, !0)
+      ]),
+      footer: i(() => [
+        a(e.$slots, "card-footer", {}, void 0, !0)
+      ]),
+      default: i(() => [
+        u("div", {
+          class: f({ "multi-line-truncate": t.truncate })
+        }, [
+          a(e.$slots, "card-body", {}, () => [
+            l(o(t.item ? t.item.description : ""), 1)
+          ], !0)
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["data-testid"]));
+  }
+});
+export {
+  b as default
+};

package/dist/kongponents.es87.js

@@ -0,0 +1,95 @@
+import { defineComponent as z, useSlots as $, useAttrs as K, useId as N, computed as l, watch as D, createElementBlock as p, openBlock as i, normalizeClass as f, createElementVNode as o, createBlock as m, createCommentVNode as n, mergeProps as v, unref as s, createSlots as E, withCtx as g, renderSlot as h, createTextVNode as L, toDisplayString as x } from "vue";
+import P from "./kongponents.es48.js";
+import T from "./kongponents.es214.js";
+import q from "./kongponents.es215.js";
+import { KUI_ICON_SIZE_40 as C } from "./kongponents.es182.js";
+const O = ["id", "aria-checked"], U = { class: "checkbox-label-wrapper" }, Z = {
+  key: 1,
+  class: "checkbox-description"
+}, Q = /* @__PURE__ */ z({
+  inheritAttrs: !1,
+  __name: "KCheckbox",
+  props: {
+    modelValue: { type: Boolean },
+    label: { default: "" },
+    labelAttributes: { default: () => ({}) },
+    description: { default: "" },
+    error: { type: Boolean, default: !1 }
+  },
+  emits: ["change", "input", "update:modelValue"],
+  setup(t, { emit: V }) {
+    const c = V, d = $(), a = K(), y = N(), b = l(() => a.id ? String(a.id) : y), r = l(() => !!(t.label || d.default)), S = l(() => (a == null ? void 0 : a.disabled) !== void 0 && String(a == null ? void 0 : a.disabled) !== "false"), k = l(() => r.value && (!!t.description || !!d.description)), A = l(() => !!d.tooltip), u = l(() => {
+      const e = { ...a };
+      return delete e.class, e.checked = t.modelValue, e.indeterminate !== void 0 && String(e.indeterminate) !== "false" && !t.modelValue ? (delete e.checked, e.indeterminate = !0) : delete e.indeterminate, e;
+    }), I = l(() => ({
+      disabled: S.value,
+      "has-description": k.value,
+      "input-error": t.error
+    })), w = l(() => u.value.indeterminate !== void 0 && String(u.value.indeterminate) !== "false");
+    D(() => t.labelAttributes, (e) => {
+      e.help && console.warn("KCheckbox: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#klabel");
+    }, { immediate: !0 });
+    const B = (e) => {
+      c("change", e.target.checked), c("input", e.target.checked), c("update:modelValue", e.target.checked);
+    };
+    return (e, j) => (i(), p("div", {
+      class: f(["k-checkbox", [e.$attrs.class, I.value]])
+    }, [
+      o("div", {
+        class: f(["checkbox-input-wrapper", { "has-label": r.value }])
+      }, [
+        o("input", v({ id: b.value }, u.value, {
+          "aria-checked": t.modelValue,
+          class: "checkbox-input",
+          type: "checkbox",
+          onChange: B
+        }), null, 16, O),
+        t.modelValue ? (i(), m(s(T), {
+          key: 0,
+          class: "checkbox-icon",
+          "data-testid": "check-icon",
+          decorative: "",
+          size: s(C),
+          tabindex: "-1"
+        }, null, 8, ["size"])) : n("", !0),
+        w.value && !t.modelValue ? (i(), m(s(q), {
+          key: 1,
+          class: "checkbox-icon",
+          "data-testid": "indeterminate-icon",
+          decorative: "",
+          size: s(C),
+          tabindex: "-1"
+        }, null, 8, ["size"])) : n("", !0)
+      ], 2),
+      o("div", U, [
+        r.value ? (i(), m(P, v({ key: 0 }, t.labelAttributes, {
+          class: "checkbox-label",
+          for: b.value
+        }), E({
+          default: g(() => [
+            h(e.$slots, "default", {}, () => [
+              L(x(t.label), 1)
+            ], !0)
+          ]),
+          _: 2
+        }, [
+          A.value ? {
+            name: "tooltip",
+            fn: g(() => [
+              h(e.$slots, "tooltip", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["for"])) : n("", !0),
+        k.value ? (i(), p("div", Z, [
+          h(e.$slots, "description", {}, () => [
+            o("p", null, x(t.description), 1)
+          ], !0)
+        ])) : n("", !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  Q as default
+};