@kong/kongponents 9.54.1 → 9.54.2

package/dist/kongponents.es262.js

@@ -1,4 +1,182 @@
-import f from "./kongponents.es213.js";
+import { defineComponent as $, ref as u, computed as D, watch as L, onMounted as T, onBeforeMount as H, openBlock as c, createElementBlock as h, createVNode as o, withCtx as r, unref as f, createBlock as g, withModifiers as v, createSlots as K, createCommentVNode as N, createElementVNode as w, Fragment as P, renderList as z, createTextVNode as C, toDisplayString as E, nextTick as U } from "vue";
+import { debounce as q } from "./kongponents.es170.js";
+import A from "./kongponents.es176.js";
+import J from "./kongponents.es201.js";
+import R from "./kongponents.es268.js";
+import p from "./kongponents.es32.js";
+import F from "./kongponents.es36.js";
+import O from "./kongponents.es43.js";
+import j from "./kongponents.es44.js";
+import G from "./kongponents.es49.js";
+import Q from "./kongponents.es24.js";
+/* empty css                 */
+import W from "./kongponents.es51.js";
+const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ $({
+  __name: "ColumnVisibilityMenu",
+  props: {
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update"],
+  setup(a, { emit: V }) {
+    const x = V, y = u(!1), s = u({}), d = u(!1), n = u(), i = u(""), b = () => {
+      s.value = a.columns.reduce((e, t) => (e[t.key] = a.visibilityPreferences[t.key] === void 0 ? !0 : a.visibilityPreferences[t.key], e), {}), d.value = !1;
+    }, I = q((e) => {
+      i.value = e, n.value && m(n.value);
+    }, 500), k = D(() => i.value ? a.columns.filter((e) => (e.label ? e.label : e.key).toLowerCase().includes(i.value.toLowerCase())) : a.columns), S = () => {
+      x("update", JSON.parse(JSON.stringify(s.value))), d.value = !1, i.value = "";
+    }, B = (e) => {
+      y.value = e, e && n.value && U(() => {
+        n.value && m(n.value);
+      }), !e && d.value && b(), e || (i.value = "");
+    }, m = (e) => {
+      if (!(e.scrollHeight > e.clientHeight)) {
+        e.classList.remove("is-bottom-overflowing");
+        return;
+      }
+      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
+      e.classList.toggle("is-bottom-overflowing", !l);
+    };
+    return L(() => a.visibilityPreferences, () => {
+      b();
+    }, { immediate: !0 }), T(() => {
+      n.value && (n.value.addEventListener("scroll", (e) => {
+        const t = e.currentTarget;
+        m(t);
+      }), m(n.value));
+    }), H(() => {
+      b();
+    }), (e, t) => (c(), h("div", X, [
+      o(O, {
+        "data-testid": "table-column-visibility-menu",
+        disabled: a.disabled,
+        "kpop-attributes": { placement: "bottom-end" },
+        onToggleDropdown: B
+      }, {
+        items: r(() => [
+          i.value || k.value.length > 5 ? (c(), g(G, {
+            key: 0,
+            modelValue: i.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => i.value = l),
+            modelModifiers: { trim: !0 },
+            autocapitalize: "off",
+            autocomplete: "off",
+            autocorrect: "off",
+            class: "search-input",
+            "data-testid": "search-input",
+            name: "column-search",
+            placeholder: "Search columns",
+            spellcheck: "false",
+            type: "search",
+            onClick: t[2] || (t[2] = v(() => {
+            }, ["stop"])),
+            onInput: f(I)
+          }, K({
+            before: r(() => [
+              o(f(J), { decorative: "" })
+            ]),
+            _: 2
+          }, [
+            i.value ? {
+              name: "after",
+              fn: r(() => [
+                o(p, {
+                  appearance: "tertiary",
+                  "aria-label": "Clear search",
+                  class: "clear-search",
+                  "data-testid": "clear-search-button",
+                  icon: "",
+                  size: "small",
+                  onClick: t[0] || (t[0] = v(() => i.value = "", ["stop"]))
+                }, {
+                  default: r(() => [
+                    o(f(A), { decorative: "" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "onInput"])) : N("", !0),
+          w("div", {
+            ref_key: "menuItemsRef",
+            ref: n,
+            class: "menu-items-wrapper"
+          }, [
+            (c(!0), h(P, null, z(k.value, (l) => (c(), g(j, {
+              key: l.key,
+              class: "column-visibility-menu-item",
+              "data-testid": `column-visibility-menu-item-${l.key}`,
+              onClick: v(() => {
+                s.value[l.key] = !s.value[l.key], d.value = !0;
+              }, ["stop"])
+            }, {
+              default: r(() => [
+                o(F, {
+                  modelValue: s.value[l.key],
+                  "onUpdate:modelValue": (M) => s.value[l.key] = M,
+                  "aria-labelledby": `${a.tableId}-${l.key}-visibility-checkbox-label`,
+                  "data-testid": `column-visibility-checkbox-${l.key}`
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-labelledby", "data-testid"]),
+                o(W, {
+                  id: `${a.tableId}-${l.key}-visibility-checkbox-label`,
+                  class: "visibility-checkbox-label",
+                  title: l.label
+                }, {
+                  default: r(() => [
+                    C(E(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["id", "title"])
+              ]),
+              _: 2
+            }, 1032, ["data-testid", "onClick"]))), 128))
+          ], 512),
+          w("div", Y, [
+            o(p, {
+              appearance: "tertiary",
+              class: "apply-button",
+              "data-testid": "apply-button",
+              onClick: S
+            }, {
+              default: r(() => [...t[3] || (t[3] = [
+                C(" Apply ", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        default: r(() => [
+          o(Q, {
+            placement: "bottom-end",
+            text: y.value ? void 0 : "Show/Hide Columns"
+          }, {
+            default: r(() => [
+              o(p, {
+                appearance: "tertiary",
+                "aria-label": "Show/Hide Columns",
+                class: "menu-button",
+                "data-testid": "column-visibility-menu-button",
+                disabled: a.disabled,
+                icon: "",
+                size: "large"
+              }, {
+                default: r(() => [
+                  o(f(R), { decorative: "" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["text"])
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
+  }
+});
 export {
-  f as default
+  me as default
 };

package/dist/{kongponents.es280.js → kongponents.es264.js}

@@ -1,5 +1,5 @@
 import { defineComponent as h, computed as d, openBlock as s, createBlock as b, resolveDynamicComponent as x, normalizeStyle as S, withCtx as w, createElementBlock as N } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es281.js";
+import { KUI_ICON_SIZE_50 as u } from "./kongponents.es265.js";
 const k = ["aria-hidden"], p = '<path d="M11 19V13H5V11H11V5H13V11H19V13H13V19H11Z" fill="currentColor"/>', q = /* @__PURE__ */ h({
   __name: "AddIcon",
   props: {

package/dist/kongponents.es265.js

@@ -1,59 +1,4 @@
-import { defineComponent as m, computed as d, openBlock as l, createElementBlock as i, createElementVNode as a, normalizeClass as u, createBlock as r, unref as t, toDisplayString as s, createCommentVNode as f, normalizeStyle as b } from "vue";
-import p from "./kongponents.es282.js";
-import k from "./kongponents.es184.js";
-import z from "./kongponents.es187.js";
-import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as c, KUI_COLOR_TEXT_PRIMARY as v } from "./kongponents.es178.js";
-import { normalizeSize as y } from "./kongponents.es175.js";
-const h = ["aria-current", "data-testid"], x = { class: "step-circle" }, E = {
-  key: 3,
-  class: "step-number"
-}, C = ["title"], K = /* @__PURE__ */ m({
-  __name: "KStep",
-  props: {
-    label: {},
-    state: { default: "default" },
-    maxLabelWidth: {},
-    stepNumber: {}
-  },
-  setup(e) {
-    const n = d(() => ({
-      maxWidth: y(e.maxLabelWidth)
-    }));
-    return (I, N) => (l(), i("li", {
-      "aria-current": e.state === "active" ? "step" : "false",
-      class: "step",
-      "data-testid": `step-${e.state}`
-    }, [
-      a("div", {
-        class: u(["step-container", `${e.state}`])
-      }, [
-        a("div", x, [
-          e.state === "completed" ? (l(), r(t(p), {
-            key: 0,
-            color: `var(--kui-color-text-inverse, ${t(c)})`,
-            size: t(o),
-            title: "Completed"
-          }, null, 8, ["color", "size"])) : e.state === "pending" ? (l(), r(t(z), {
-            key: 1,
-            color: `var(--kui-color-text-primary, ${t(v)})`,
-            size: t(o),
-            title: "Pending"
-          }, null, 8, ["color", "size"])) : e.state === "error" ? (l(), r(t(k), {
-            key: 2,
-            color: `var(--kui-color-text-inverse, ${t(c)})`,
-            size: t(o),
-            title: "Error"
-          }, null, 8, ["color", "size"])) : e.stepNumber ? (l(), i("span", E, s(e.stepNumber), 1)) : f("", !0)
-        ]),
-        a("span", {
-          class: "step-label",
-          style: b(n.value),
-          title: e.label
-        }, s(e.label), 13, C)
-      ], 2)
-    ], 8, h));
-  }
-});
+const I = "24px";
 export {
-  K as default
+  I as KUI_ICON_SIZE_50
 };

package/dist/{kongponents.es282.js → kongponents.es266.js}

@@ -1,5 +1,5 @@
 import { defineComponent as y, computed as s, openBlock as d, createBlock as b, resolveDynamicComponent as k, normalizeStyle as x, withCtx as S, createElementBlock as N } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es281.js";
+import { KUI_ICON_SIZE_50 as u } from "./kongponents.es265.js";
 const w = ["aria-hidden"], c = '<path d="M9.7 18.025L4 12.325L5.425 10.9L9.7 15.175L18.875 6L20.3 7.425L9.7 18.025Z" fill="currentColor"/>', z = /* @__PURE__ */ y({
   __name: "CheckIcon",
   props: {