@kong/kongponents 9.56.0 → 9.56.1

package/dist/kongponents.es246.js

@@ -1,42 +1,26 @@
-import p from "./kongponents.es429.js";
-function f(t) {
-  if (typeof t == "function")
-    try {
-      t = t();
-    } catch {
-      t = "";
-    }
-  return Array.isArray(t) ? t = p(t) : t = String(t || ""), t;
-}
-var c = (
-  /** @class */
-  (function() {
-    function t(e) {
-      e === void 0 && (e = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = e;
-    }
-    return t.prototype.serializeKey = function(e) {
-      return f(e);
-    }, t.prototype.get = function(e) {
-      var i = this.serializeKey(e);
-      return this.items.get(i);
-    }, t.prototype.set = function(e, i, s) {
-      var n = this.serializeKey(e), r = s || this.ttl, a = Date.now(), o = {
-        data: i,
-        createdAt: a,
-        expiresAt: r ? a + r : 1 / 0
-      };
-      this.dispatchExpire(r, o, n), this.items.set(n, o);
-    }, t.prototype.dispatchExpire = function(e, i, s) {
-      var n = this;
-      e && setTimeout(function() {
-        var r = Date.now(), a = r >= i.expiresAt;
-        a && n.delete(s);
-      }, e);
-    }, t.prototype.delete = function(e) {
-      this.items.delete(e);
-    }, t;
-  })()
-);
+import { defineComponent as r, openBlock as n, createElementBlock as s, renderSlot as i, createVNode as e } from "vue";
+import t from "./kongponents.es61.js";
+const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
+  __name: "SkeletonBase",
+  setup(a) {
+    return (o, d) => (n(), s("div", l, [
+      i(o.$slots, "default", {}, () => [
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        })
+      ], !0)
+    ]));
+  }
+});
 export {
-  c as default
+  _ as default
 };

package/dist/kongponents.es248.js

@@ -1,73 +1,50 @@
-import { defineComponent as C, useTemplateRef as c, ref as p, computed as T, openBlock as i, createBlock as u, withCtx as o, createElementVNode as D, createElementBlock as S, Fragment as _, renderList as x, renderSlot as B, createTextVNode as h, toDisplayString as F, createVNode as f, withModifiers as I, unref as N, nextTick as R } from "vue";
-import V from "./kongponents.es43.js";
-import W from "./kongponents.es44.js";
-import y from "./kongponents.es344.js";
-import E from "./kongponents.es261.js";
-const K = {
-  ref: "itemWrapper",
-  class: "items-wrapper"
-}, M = /* @__PURE__ */ C({
-  __name: "FilterSelector",
+import { defineComponent as h, useCssVars as k, computed as f, openBlock as t, createElementBlock as r, Fragment as s, renderList as c, createElementVNode as l, renderSlot as i, createVNode as n } from "vue";
+import d from "./kongponents.es61.js";
+import { KUI_SPACE_50 as C } from "./kongponents.es181.js";
+import { normalizeSize as p } from "./kongponents.es189.js";
+const _ = { class: "skeleton-card-wrapper" }, v = { class: "skeleton-card-header" }, w = { class: "skeleton-card-content" }, x = { class: "skeleton-card-footer" }, E = /* @__PURE__ */ h({
+  __name: "CardSkeleton",
   props: {
-    filters: {},
-    label: { default: "Add filter" }
+    cardCount: {},
+    maxWidth: {}
   },
-  emits: ["select"],
-  setup(n, { emit: d }) {
-    const s = c("filterSelector"), m = c("itemWrapper"), r = p(!1), a = p(!1), v = T(() => Object.entries(n.filters).map(([e, l]) => ({
-      label: l.label,
-      value: e,
-      onClick: () => g(e)
-    }))), w = d, g = (e) => {
-      w("select", e);
-    }, k = (e) => {
-      e ? a.value = !0 : a.value = !1, r.value = !r.value;
-    }, b = async () => {
-      var e, l, t;
-      r.value ? (e = s.value) == null || e.closeDropdown() : ((l = s.value) == null || l.openDropdown(), await R(), (t = m.value) == null || t.scrollTo({ top: 0 }));
-    };
-    return (e, l) => (i(), u(V, {
-      ref: "filterSelector",
-      width: "auto",
-      onToggleDropdown: k
-    }, {
-      default: o(() => [
-        f(y, {
-          "data-testid": "filter-selector",
-          label: n.label,
-          "pill-focus": a.value,
-          onClick: l[0] || (l[0] = I(() => {
-          }, ["prevent", "stop"])),
-          onTrigger: b
-        }, {
-          "open-icon": o(() => [
-            f(N(E), { decorative: "" })
-          ]),
-          _: 1
-        }, 8, ["label", "pill-focus"])
-      ]),
-      items: o(() => [
-        D("div", K, [
-          (i(!0), S(_, null, x(v.value, (t) => (i(), u(W, {
-            key: t.value,
-            "data-testid": "dropdown-item-trigger",
-            item: t,
-            value: t.value,
-            onClick: t.onClick
-          }, {
-            default: o(() => [
-              B(e.$slots, `filter-item-${t.value}`, {}, () => [
-                h(F(t.label), 1)
-              ], !0)
-            ]),
-            _: 2
-          }, 1032, ["item", "value", "onClick"]))), 128))
-        ], 512)
-      ]),
-      _: 3
-    }, 512));
+  setup(o) {
+    k((e) => ({
+      v243e7eb5: u.value
+    }));
+    const u = f(() => o.maxWidth ? p(o.maxWidth) : o.cardCount === 1 ? "470px" : `calc((100% / 3) - ${C})`);
+    return (e, S) => (t(), r("div", _, [
+      (t(!0), r(s, null, c(o.cardCount, (m) => (t(), r("div", {
+        key: m,
+        class: "skeleton-card"
+      }, [
+        l("div", v, [
+          i(e.$slots, "card-header", {}, () => [
+            n(d, { width: "50" })
+          ], !0)
+        ]),
+        l("div", w, [
+          i(e.$slots, "card-content", {}, () => [
+            (t(), r(s, null, c(3, (a) => n(d, {
+              key: a,
+              width: "100"
+            })), 64)),
+            n(d, { width: "50" })
+          ], !0)
+        ]),
+        l("div", x, [
+          i(e.$slots, "card-footer", {}, () => [
+            (t(), r(s, null, c(2, (a) => n(d, {
+              key: a,
+              height: "2",
+              width: "5"
+            })), 64))
+          ], !0)
+        ])
+      ]))), 128))
+    ]));
   }
 });
 export {
-  M as default
+  E as default
 };

package/dist/kongponents.es250.js

@@ -1,244 +1,36 @@
-import { defineComponent as Z, useCssVars as _, useAttrs as ee, ref as x, useTemplateRef as E, computed as r, onMounted as te, resolveComponent as le, openBlock as C, createBlock as w, unref as F, withCtx as m, createElementVNode as P, createVNode as S, createTextVNode as q, renderSlot as ae, createElementBlock as oe, createCommentVNode as ie, toDisplayString as ne, mergeProps as re, withModifiers as ue, nextTick as se } from "vue";
-import { KUI_SPACE_30 as ce } from "./kongponents.es181.js";
-import de from "./kongponents.es56.js";
-import fe from "./kongponents.es49.js";
-import I from "./kongponents.es60.js";
-import ve from "./kongponents.es54.js";
-import me from "./kongponents.es344.js";
-const pe = {
-  class: "filter-content",
-  "data-testid": "filter-pill-content"
-}, be = { class: "default-layout" }, ye = {
-  key: 0,
-  class: "operator"
-}, Ve = { class: "value" }, he = { class: "footer" }, qe = /* @__PURE__ */ Z({
-  inheritAttrs: !1,
-  __name: "FilterPill",
+import { defineComponent as i, useCssVars as d, openBlock as t, createElementBlock as n, Fragment as a, renderList as c, renderSlot as m, createVNode as k } from "vue";
+import f from "./kongponents.es61.js";
+const p = { class: "skeleton-table-wrapper" }, b = /* @__PURE__ */ i({
+  __name: "TableSkeleton",
   props: {
-    filter: {},
-    initOpen: { type: Boolean, default: !1 },
-    selection: { default: () => {
-    } },
-    custom: { type: Boolean, default: !1 }
+    rows: {},
+    columns: {}
   },
-  emits: ["apply", "close", "open", "clear"],
-  setup(t, { emit: M }) {
-    _((l) => ({
-      v5984a737: D.value
+  setup(s) {
+    d((e) => ({
+      v11294cba: e.columns
     }));
-    const N = ee(), p = M, b = x(!1), k = E("filterPopper"), f = x(), u = x(), s = x(), c = x(), T = E("inputField"), v = r(() => t.custom ? "custom" : t.filter.options && !t.filter.multiple ? "select" : t.filter.options && t.filter.multiple ? "multiselect" : "input"), L = r(() => {
-      switch (v.value) {
-        case "input":
-          return !u.value || u.value === "";
-        case "select":
-          return !s.value;
-        case "multiselect":
-          return !c.value || c.value.length === 0;
-        case "custom":
-        default:
-          return !1;
-      }
-    }), g = r(() => t.filter.operators && t.filter.operators.length ? t.filter.operators : ["eq"]), D = r(() => g.value.some((l) => l === "lte" || l === "gte") ? "205px" : "120px"), R = r(() => {
-      var o, a, V, h, i, n, K, O;
-      let l, e;
-      switch (v.value) {
-        case "input":
-          l = u.value, e = u.value;
-          break;
-        case "select":
-          l = s.value, e = ((V = (a = (o = t.filter) == null ? void 0 : o.options) == null ? void 0 : a.find(({ value: d }) => d === s.value)) == null ? void 0 : V.label) ?? ((h = s.value) == null ? void 0 : h.toString());
-          break;
-        case "multiselect":
-          l = c.value, e = (O = (K = (n = (i = c.value) == null ? void 0 : i.map((d) => {
-            var U;
-            return (U = t.filter.options) == null ? void 0 : U.find(({ value: Y }) => Y === d);
-          })) == null ? void 0 : n.filter((d) => d !== void 0)) == null ? void 0 : K.map(({ label: d }) => d)) == null ? void 0 : O.join(", ");
-          break;
-      }
-      if (!(f.value === void 0 || l === void 0 || e === void 0))
-        return {
-          operator: f.value,
-          value: l,
-          text: e
-        };
-    }), G = r(() => {
-      var l;
-      switch ((l = t.selection) == null ? void 0 : l.operator) {
-        case "eq":
-          return " = ";
-        case "neq":
-          return " ≠ ";
-        case "lt":
-          return " < ";
-        case "lte":
-          return " ≤ ";
-        case "gt":
-          return " > ";
-        case "gte":
-          return " ≥ ";
-        case "contains":
-        case "exists":
-        default:
-          return ": ";
-      }
-    }), A = r(() => {
-      const l = {
-        eq: "Equals",
-        neq: "Not equals",
-        contains: "Contains",
-        exists: "Exists",
-        lt: "Less than",
-        lte: "Less than or equal to",
-        gt: "Greater than",
-        gte: "Greater than or equal to"
-      };
-      return g.value.map((e) => ({
-        label: l[e],
-        value: e
-      }));
-    }), W = r(() => {
-      var l;
-      return ((l = A.value.find(({ value: e }) => e === f.value)) == null ? void 0 : l.label) ?? "";
-    }), $ = () => {
-      var l, e;
-      v.value === "input" && ((e = (l = T.value) == null ? void 0 : l.input) == null || e.focus());
-    }, j = () => {
-      var l, e, o, a, V, h;
-      f.value = ((l = t.selection) == null ? void 0 : l.operator) ?? ((e = g.value) == null ? void 0 : e[0]), u.value = typeof ((o = t.selection) == null ? void 0 : o.value) == "string" ? t.selection.value : void 0, s.value = (V = (a = t.filter.options) == null ? void 0 : a.find(({ value: i }) => {
-        var n;
-        return i === ((n = t.selection) == null ? void 0 : n.value);
-      })) == null ? void 0 : V.value, c.value = (h = t.filter.options) == null ? void 0 : h.filter(({ value: i }) => {
-        var n;
-        if (Array.isArray((n = t.selection) == null ? void 0 : n.value))
-          return t.selection.value.includes(`${i}`);
-      }).map(({ value: i }) => i);
-    }, B = async () => {
-      j(), k.value && (k.value.showPopover(), b.value = !0, await se(), $()), p("open");
-    }, y = () => {
-      k.value && (k.value.hidePopover(), b.value = !1), p("close");
-    };
-    te(() => {
-      t.initOpen && B();
-    });
-    const z = () => {
-      b.value && y();
-    }, H = () => {
-      v.value === "custom" ? p("apply", void 0) : p("apply", R.value), y();
-    }, J = () => {
-      y();
-    }, Q = () => {
-      y(), p("clear");
-    }, X = () => {
-      b.value ? y() : B();
-    };
-    return (l, e) => {
-      const o = le("KButton");
-      return C(), w(de, {
-        ref: "filterPopper",
-        "max-width": t.filter.maxWidth ?? "400px",
-        offset: F(ce),
-        placement: t.filter.placement ?? "bottom-start",
-        width: "auto",
-        onClose: z
-      }, {
-        default: m(() => {
-          var a;
-          return [
-            S(me, re({
-              "content-label": (a = t.selection) == null ? void 0 : a.text,
-              "data-testid": "filter-pill",
-              delimiter: G.value,
-              label: t.filter.label,
-              "pill-focus": b.value
-            }, F(N), {
-              onClear: Q,
-              onClick: e[0] || (e[0] = ue(() => {
-              }, ["prevent", "stop"])),
-              onTrigger: X
-            }), null, 16, ["content-label", "delimiter", "label", "pill-focus"])
-          ];
-        }),
-        title: m(() => [
-          q(ne(t.filter.label), 1)
-        ]),
-        content: m(() => [
-          P("div", pe, [
-            ae(l.$slots, "default", {}, () => [
-              P("div", be, [
-                g.value.length > 1 ? (C(), oe("div", ye, [
-                  S(I, {
-                    modelValue: f.value,
-                    "onUpdate:modelValue": e[1] || (e[1] = (a) => f.value = a),
-                    items: A.value,
-                    "kpop-attributes": {
-                      popoverClasses: "force-operator-width"
-                    },
-                    label: "Operator",
-                    title: W.value
-                  }, null, 8, ["modelValue", "items", "title"])
-                ])) : ie("", !0),
-                P("div", Ve, [
-                  v.value === "select" ? (C(), w(I, {
-                    key: 0,
-                    modelValue: s.value,
-                    "onUpdate:modelValue": e[2] || (e[2] = (a) => s.value = a),
-                    "data-testid": "filter-pill-select",
-                    items: t.filter.options,
-                    label: "Value",
-                    placeholder: "Select a value"
-                  }, null, 8, ["modelValue", "items"])) : v.value === "multiselect" ? (C(), w(ve, {
-                    key: 1,
-                    modelValue: c.value,
-                    "onUpdate:modelValue": e[3] || (e[3] = (a) => c.value = a),
-                    "data-testid": "filter-pill-multiselect",
-                    items: t.filter.options,
-                    label: "Value",
-                    placeholder: "Select values"
-                  }, null, 8, ["modelValue", "items"])) : (C(), w(fe, {
-                    key: 2,
-                    ref: "inputField",
-                    modelValue: u.value,
-                    "onUpdate:modelValue": e[4] || (e[4] = (a) => u.value = a),
-                    modelModifiers: { trim: !0 },
-                    "data-testid": "filter-pill-input",
-                    label: "Value",
-                    placeholder: "Enter a value"
-                  }, null, 8, ["modelValue"]))
-                ])
-              ])
-            ], !0)
-          ])
-        ]),
-        footer: m(() => [
-          P("div", he, [
-            S(o, {
-              appearance: "secondary",
-              "data-testid": "filter-pill-cancel",
-              onClick: J
-            }, {
-              default: m(() => [...e[5] || (e[5] = [
-                q(" Cancel ", -1)
-              ])]),
-              _: 1
-            }),
-            S(o, {
-              appearance: "primary",
-              "data-testid": "filter-pill-apply",
-              disabled: L.value,
-              onClick: H
-            }, {
-              default: m(() => [...e[6] || (e[6] = [
-                q(" Apply ", -1)
-              ])]),
-              _: 1
-            }, 8, ["disabled"])
-          ])
-        ]),
-        _: 3
-      }, 8, ["max-width", "offset", "placement"]);
-    };
+    const u = (e, r) => e === 1 && r === 1 || e !== 1 && r !== 1 ? "25" : "50";
+    return (e, r) => (t(), n("div", p, [
+      (t(!0), n(a, null, c(s.rows, (l) => (t(), n("div", {
+        key: l,
+        class: "skeleton-table-row"
+      }, [
+        m(e.$slots, "default", {}, () => [
+          (t(!0), n(a, null, c(s.columns, (o) => (t(), n("div", {
+            key: o,
+            class: "skeleton-cell-container"
+          }, [
+            k(f, {
+              class: "skeleton-cell",
+              width: u(o, l)
+            }, null, 8, ["width"])
+          ]))), 128))
+        ], !0)
+      ]))), 128))
+    ]));
   }
 });
 export {
-  qe as default
+  b as default
 };

package/dist/kongponents.es252.js

@@ -1,8 +1,25 @@
-import p from "./kongponents.es284.js";
-var a = /[\\^$.*+?()[\]{}|]/g, r = RegExp(a.source);
-function x(e) {
-  return e = p(e), e && r.test(e) ? e.replace(a, "\\$&") : e;
-}
+import { defineComponent as s, openBlock as e, createElementBlock as t, Fragment as c, renderList as l, createElementVNode as m, createVNode as o } from "vue";
+import r from "./kongponents.es61.js";
+const a = { class: "skeleton-form-wrapper" }, f = /* @__PURE__ */ s({
+  __name: "FormSkeleton",
+  setup(i) {
+    return (d, p) => (e(), t("div", a, [
+      (e(), t(c, null, l(4, (n) => m("div", {
+        key: n,
+        class: "skeleton-form-row"
+      }, [
+        o(r, {
+          height: "2",
+          width: "10"
+        }),
+        o(r, {
+          height: "2",
+          width: "100"
+        })
+      ])), 64))
+    ]));
+  }
+});
 export {
-  x as default
+  f as default
 };