@kong/kongponents 9.61.0 → 9.61.1

package/dist/kongponents271.es.js

@@ -1,182 +1,123 @@
-import { defineComponent as D, ref as u, computed as L, watch as T, onMounted as $, 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 E, renderList as P, createTextVNode as C, toDisplayString as z, nextTick as U } from "vue";
-import { debounce as A } from "./kongponents178.es.js";
-import J from "./kongponents184.es.js";
-import R from "./kongponents206.es.js";
-import F from "./kongponents279.es.js";
-import p from "./kongponents38.es.js";
-import O from "./kongponents42.es.js";
-import j from "./kongponents49.es.js";
-import q from "./kongponents50.es.js";
-import G from "./kongponents55.es.js";
-import Q from "./kongponents30.es.js";
-/* empty css                 */
-import W from "./kongponents57.es.js";
-const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ D({
-  __name: "ColumnVisibilityMenu",
+import { defineComponent as b, computed as d, openBlock as u, createBlock as S, resolveDynamicComponent as x, normalizeStyle as C, withCtx as H, createElementBlock as w } from "vue";
+import { KUI_ICON_SIZE_50 as c } from "./kongponents269.es.js";
+const $ = ["aria-hidden"], p = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="currentColor"/>', k = /* @__PURE__ */ b({
+  __name: "ServiceDocumentIcon",
   props: {
-    columns: {},
-    tableId: {},
-    visibilityPreferences: {},
-    disabled: { type: Boolean }
+    /** The accessibility text provided to screen readers */
+    title: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
+    color: {
+      type: String,
+      required: !1,
+      default: "currentColor"
+    },
+    /** The CSS display property for the icon. Defaults to `block` */
+    display: {
+      type: String,
+      required: !1,
+      default: "block"
+    },
+    /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
+    decorative: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    /** The icon size */
+    size: {
+      type: [Number, String],
+      required: !1,
+      default: c,
+      // if setting to the imported const fails, just pass a number of 24 as the default.
+      validator: (t) => {
+        if (typeof t == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t) || typeof t == "number" && t > 0)
+          return !0;
+        if (typeof t == "string") {
+          const e = String(t).replace(/px/gi, ""), n = Number(e);
+          if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
+            return !0;
+        }
+        return !1;
+      }
+    },
+    /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
+    as: {
+      type: String,
+      required: !1,
+      default: "span"
+    },
+    /**
+     * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).
+     * Typically only set to `true` during snapshot testing.
+     * Defaults to `false`.
+     */
+    staticIds: {
+      type: Boolean,
+      default: !1
+    }
   },
-  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 = A((e) => {
-      i.value = e, n.value && m(n.value);
-    }, 500), k = L(() => 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 = "";
-    }, M = (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;
+  setup(t) {
+    const e = t, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), a = d(() => {
+      if (n(e.size))
+        return e.size;
+      if (typeof e.size == "number" && e.size > 0)
+        return `${e.size}px`;
+      if (typeof e.size == "string") {
+        const r = String(e.size).replace(/px/gi, ""), i = Number(r);
+        if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
+          return `${i}px`;
       }
-      const l = e.scrollHeight < e.clientHeight + e.scrollTop + 1;
-      e.classList.toggle("is-bottom-overflowing", !l);
-    };
-    return T(() => a.visibilityPreferences, () => {
-      b();
-    }, { immediate: !0 }), $(() => {
-      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(j, {
-        "data-testid": "table-column-visibility-menu",
-        disabled: a.disabled,
-        "kpop-attributes": { placement: "bottom-end" },
-        onToggleDropdown: M
-      }, {
-        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(R), { 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(J), { 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(E, null, P(k.value, (l) => (c(), g(q, {
-              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(O, {
-                  modelValue: s.value[l.key],
-                  "onUpdate:modelValue": (B) => s.value[l.key] = B,
-                  "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(z(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(F), { decorative: "" })
-                ]),
-                _: 1
-              }, 8, ["disabled"])
-            ]),
-            _: 1
-          }, 8, ["text"])
-        ]),
-        _: 1
-      }, 8, ["disabled"])
-    ]));
+      return c;
+    }), f = d(() => ({
+      boxSizing: "border-box",
+      color: e.color,
+      display: e.display,
+      flexShrink: "0",
+      height: a.value,
+      lineHeight: "0",
+      width: a.value,
+      pointerEvents: e.decorative ? "none" : void 0
+    })), g = (r) => {
+      const i = {}, h = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (s, o) => {
+        const l = `${h}-${o}`;
+        return i[o] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (s, o) => i[o] ? `#${i[o]}` : s);
+    }, m = {
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+      "&": "&amp;"
+    }, v = (r) => r.replace(/[<>"'&]/g, (i) => m[i]), y = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
+    return (r, i) => (u(), S(x(t.as), {
+      "aria-hidden": t.decorative ? "true" : void 0,
+      class: "kui-icon service-document-icon",
+      "data-testid": "kui-icon-wrapper-service-document-icon",
+      style: C(f.value),
+      tabindex: t.decorative ? "-1" : void 0
+    }, {
+      default: H(() => [
+        (u(), w("svg", {
+          "aria-hidden": t.decorative ? "true" : void 0,
+          "data-testid": "kui-icon-svg-service-document-icon",
+          fill: "none",
+          height: "100%",
+          role: "img",
+          viewBox: "0 0 24 24",
+          width: "100%",
+          xmlns: "http://www.w3.org/2000/svg",
+          innerHTML: y
+        }, null, 8, $))
+      ]),
+      _: 1
+    }, 8, ["aria-hidden", "style", "tabindex"]));
   }
 });
 export {
-  me as default
+  k as default
 };

package/dist/kongponents272.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("./kongponents269.cjs"),b=["aria-hidden"],c='<path d="M3.0249 17.75V7.75C3.0249 7.2 3.22074 6.72917 3.6124 6.3375C4.00407 5.94583 4.4749 5.75 5.0249 5.75H18.9999C19.5499 5.75 20.0207 5.94583 20.4124 6.3375C20.8041 6.72917 20.9999 7.2 20.9999 7.75V17.75C20.9999 18.3 20.8041 18.7708 20.4124 19.1625C20.0207 19.5542 19.5499 19.75 18.9999 19.75H5.0249C4.4749 19.75 4.00407 19.5542 3.6124 19.1625C3.22074 18.7708 3.0249 18.3 3.0249 17.75ZM4.9999 17.75H8.3249V7.75H4.9999V17.75ZM10.3249 17.75H13.6499V7.75H10.3249V17.75ZM15.6499 17.75H18.9749V7.75H15.6499V17.75Z" fill="currentColor"/>',h=r.defineComponent({__name:"TableColumnsIcon",props:{title:{type:String,required:!1,default:""},color:{type:String,required:!1,default:"currentColor"},display:{type:String,required:!1,default:"block"},decorative:{type:Boolean,required:!1,default:!1},size:{type:[Number,String],required:!1,default:d.KUI_ICON_SIZE_50,validator:t=>{if(typeof t=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t)||typeof t=="number"&&t>0)return!0;if(typeof t=="string"){const e=String(t).replace(/px/gi,""),o=Number(e);if(o&&!isNaN(o)&&Number.isInteger(o)&&o>0)return!0}return!1}},as:{type:String,required:!1,default:"span"},staticIds:{type:Boolean,default:!1}},setup(t){const e=t,o=n=>typeof n=="string"&&/^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(n),l=r.computed(()=>{if(o(e.size))return e.size;if(typeof e.size=="number"&&e.size>0)return`${e.size}px`;if(typeof e.size=="string"){const n=String(e.size).replace(/px/gi,""),i=Number(n);if(i&&!isNaN(i)&&Number.isInteger(i)&&i>0)return`${i}px`}return d.KUI_ICON_SIZE_50}),p=r.computed(()=>({boxSizing:"border-box",color:e.color,display:e.display,flexShrink:"0",height:l.value,lineHeight:"0",width:l.value,pointerEvents:e.decorative?"none":void 0})),f=n=>{const i={},y=Math.random().toString(36).substring(2,12);return n.replace(/id="([^"]+)"/g,(s,a)=>{const u=`${y}-${a}`;return i[a]=u,`id="${u}"`}).replace(/#([^\s^")]+)/g,(s,a)=>i[a]?`#${i[a]}`:s)},g={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","&":"&amp;"},v=n=>n.replace(/[<>"'&]/g,i=>g[i]),m=`${e.title?`<title data-testid="kui-icon-svg-title">${v(e.title)}</title>`:""}${e.staticIds?c:f(c)}`;return(n,i)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(t.as),{"aria-hidden":t.decorative?"true":void 0,class:"kui-icon table-columns-icon","data-testid":"kui-icon-wrapper-table-columns-icon",style:r.normalizeStyle(p.value),tabindex:t.decorative?"-1":void 0},{default:r.withCtx(()=>[(r.openBlock(),r.createElementBlock("svg",{"aria-hidden":t.decorative?"true":void 0,"data-testid":"kui-icon-svg-table-columns-icon",fill:"none",height:"100%",role:"img",viewBox:"0 0 24 24",width:"100%",xmlns:"http://www.w3.org/2000/svg",innerHTML:m},null,8,b))]),_:1},8,["aria-hidden","style","tabindex"]))}});exports.default=h;

package/dist/{kongponents278.es.js → kongponents272.es.js}

@@ -1,7 +1,7 @@
-import { defineComponent as b, computed as d, openBlock as u, createBlock as S, resolveDynamicComponent as x, normalizeStyle as C, withCtx as H, createElementBlock as w } from "vue";
-import { KUI_ICON_SIZE_50 as c } from "./kongponents276.es.js";
-const $ = ["aria-hidden"], p = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="currentColor"/>', k = /* @__PURE__ */ b({
-  __name: "ServiceDocumentIcon",
+import { defineComponent as h, computed as d, openBlock as u, createBlock as C, resolveDynamicComponent as x, normalizeStyle as S, withCtx as w, createElementBlock as N } from "vue";
+import { KUI_ICON_SIZE_50 as c } from "./kongponents269.es.js";
+const $ = ["aria-hidden"], p = '<path d="M3.0249 17.75V7.75C3.0249 7.2 3.22074 6.72917 3.6124 6.3375C4.00407 5.94583 4.4749 5.75 5.0249 5.75H18.9999C19.5499 5.75 20.0207 5.94583 20.4124 6.3375C20.8041 6.72917 20.9999 7.2 20.9999 7.75V17.75C20.9999 18.3 20.8041 18.7708 20.4124 19.1625C20.0207 19.5542 19.5499 19.75 18.9999 19.75H5.0249C4.4749 19.75 4.00407 19.5542 3.6124 19.1625C3.22074 18.7708 3.0249 18.3 3.0249 17.75ZM4.9999 17.75H8.3249V7.75H4.9999V17.75ZM10.3249 17.75H13.6499V7.75H10.3249V17.75ZM15.6499 17.75H18.9749V7.75H15.6499V17.75Z" fill="currentColor"/>', k = /* @__PURE__ */ h({
+  __name: "TableColumnsIcon",
   props: {
     /** The accessibility text provided to screen readers */
     title: {
@@ -61,7 +61,7 @@ const $ = ["aria-hidden"], p = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22
     }
   },
   setup(t) {
-    const e = t, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), a = d(() => {
+    const e = t, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), o = d(() => {
       if (n(e.size))
         return e.size;
       if (typeof e.size == "number" && e.size > 0)
@@ -77,16 +77,16 @@ const $ = ["aria-hidden"], p = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22
       color: e.color,
       display: e.display,
       flexShrink: "0",
-      height: a.value,
+      height: o.value,
       lineHeight: "0",
-      width: a.value,
+      width: o.value,
       pointerEvents: e.decorative ? "none" : void 0
     })), g = (r) => {
-      const i = {}, h = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (s, o) => {
-        const l = `${h}-${o}`;
-        return i[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (s, o) => i[o] ? `#${i[o]}` : s);
+      const i = {}, b = Math.random().toString(36).substring(2, 12);
+      return r.replace(/id="([^"]+)"/g, (l, a) => {
+        const s = `${b}-${a}`;
+        return i[a] = s, `id="${s}"`;
+      }).replace(/#([^\s^")]+)/g, (l, a) => i[a] ? `#${i[a]}` : l);
     }, m = {
       "<": "&lt;",
       ">": "&gt;",
@@ -94,17 +94,17 @@ const $ = ["aria-hidden"], p = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22
       "'": "&#39;",
       "&": "&amp;"
     }, v = (r) => r.replace(/[<>"'&]/g, (i) => m[i]), y = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? p : g(p)}`;
-    return (r, i) => (u(), S(x(t.as), {
+    return (r, i) => (u(), C(x(t.as), {
       "aria-hidden": t.decorative ? "true" : void 0,
-      class: "kui-icon service-document-icon",
-      "data-testid": "kui-icon-wrapper-service-document-icon",
-      style: C(f.value),
+      class: "kui-icon table-columns-icon",
+      "data-testid": "kui-icon-wrapper-table-columns-icon",
+      style: S(f.value),
       tabindex: t.decorative ? "-1" : void 0
     }, {
-      default: H(() => [
-        (u(), w("svg", {
+      default: w(() => [
+        (u(), N("svg", {
           "aria-hidden": t.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-service-document-icon",
+          "data-testid": "kui-icon-svg-table-columns-icon",
           fill: "none",
           height: "100%",
           role: "img",

package/dist/kongponents273.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./kongponents30.cjs");;/* empty css                */const n=require("./kongponents49.cjs"),d=require("./kongponents38.cjs"),r=require("./kongponents214.cjs"),i={key:0,class:"bulk-actions-dropdown-trigger-count"},l=e.defineComponent({__name:"BulkActionsDropdown",props:{disabled:{type:Boolean},count:{default:""},buttonLabel:{default:""}},setup(t){return(o,s)=>(e.openBlock(),e.createBlock(n.default,{class:"bulk-actions-dropdown","data-testid":"bulk-actions-dropdown",disabled:t.disabled,"kpop-attributes":{placement:"bottom-end"}},{items:e.withCtx(()=>[e.renderSlot(o.$slots,"items",{},void 0,!0)]),default:e.withCtx(()=>[e.createVNode(a.default,{placement:"bottom-end",text:"Selected Row Actions"},{default:e.withCtx(()=>[e.createVNode(d.default,{appearance:"secondary","aria-label":t.buttonLabel,class:"bulk-actions-dropdown-trigger","data-testid":"bulk-actions-dropdown-trigger",disabled:t.disabled,icon:"",size:"large"},{default:e.withCtx(()=>[e.createVNode(e.unref(r.default),{class:"more-icon",decorative:""}),e.createVNode(e.Transition,{name:"kongponents-fade-transition"},{default:e.withCtx(()=>[t.count?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(t.count),1)):e.createCommentVNode("",!0)]),_:1})]),_:1},8,["aria-label","disabled"])]),_:1})]),_:3},8,["disabled"]))}});exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./kongponents178.cjs"),C=require("./kongponents185.cjs"),g=require("./kongponents205.cjs"),V=require("./kongponents272.cjs"),c=require("./kongponents38.cjs"),x=require("./kongponents42.cjs"),N=require("./kongponents49.cjs"),I=require("./kongponents50.cjs"),q=require("./kongponents55.cjs"),S=require("./kongponents30.cjs");;/* empty css                */const B=require("./kongponents57.cjs"),M={class:"table-column-visibility-menu"},T={class:"apply-button-wrapper"},D=e.defineComponent({__name:"ColumnVisibilityMenu",props:{columns:{},tableId:{},visibilityPreferences:{},disabled:{type:Boolean}},emits:["update"],setup(i,{emit:b}){const v=b,f=e.ref(!1),n=e.ref({}),u=e.ref(!1),r=e.ref(),o=e.ref(""),d=()=>{n.value=i.columns.reduce((t,l)=>(t[l.key]=i.visibilityPreferences[l.key]===void 0?!0:i.visibilityPreferences[l.key],t),{}),u.value=!1},y=w.debounce(t=>{o.value=t,r.value&&s(r.value)},500),m=e.computed(()=>o.value?i.columns.filter(t=>(t.label?t.label:t.key).toLowerCase().includes(o.value.toLowerCase())):i.columns),p=()=>{v("update",JSON.parse(JSON.stringify(n.value))),u.value=!1,o.value=""},k=t=>{f.value=t,t&&r.value&&e.nextTick(()=>{r.value&&s(r.value)}),!t&&u.value&&d(),t||(o.value="")},s=t=>{if(!(t.scrollHeight>t.clientHeight)){t.classList.remove("is-bottom-overflowing");return}const a=t.scrollHeight<t.clientHeight+t.scrollTop+1;t.classList.toggle("is-bottom-overflowing",!a)};return e.watch(()=>i.visibilityPreferences,()=>{d()},{immediate:!0}),e.onMounted(()=>{r.value&&(r.value.addEventListener("scroll",t=>{const l=t.currentTarget;s(l)}),s(r.value))}),e.onBeforeMount(()=>{d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",M,[e.createVNode(N.default,{"data-testid":"table-column-visibility-menu",disabled:i.disabled,"kpop-attributes":{placement:"bottom-end"},onToggleDropdown:k},{items:e.withCtx(()=>[o.value||m.value.length>5?(e.openBlock(),e.createBlock(q.default,{key:0,modelValue:o.value,"onUpdate:modelValue":l[1]||(l[1]=a=>o.value=a),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:l[2]||(l[2]=e.withModifiers(()=>{},["stop"])),onInput:e.unref(y)},e.createSlots({before:e.withCtx(()=>[e.createVNode(e.unref(g.default),{decorative:""})]),_:2},[o.value?{name:"after",fn:e.withCtx(()=>[e.createVNode(c.default,{appearance:"tertiary","aria-label":"Clear search",class:"clear-search","data-testid":"clear-search-button",icon:"",size:"small",onClick:l[0]||(l[0]=e.withModifiers(()=>o.value="",["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(C.default),{decorative:""})]),_:1})]),key:"0"}:void 0]),1032,["modelValue","onInput"])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"menuItemsRef",ref:r,class:"menu-items-wrapper"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,a=>(e.openBlock(),e.createBlock(I.default,{key:a.key,class:"column-visibility-menu-item","data-testid":`column-visibility-menu-item-${a.key}`,onClick:e.withModifiers(()=>{n.value[a.key]=!n.value[a.key],u.value=!0},["stop"])},{default:e.withCtx(()=>[e.createVNode(x.default,{modelValue:n.value[a.key],"onUpdate:modelValue":h=>n.value[a.key]=h,"aria-labelledby":`${i.tableId}-${a.key}-visibility-checkbox-label`,"data-testid":`column-visibility-checkbox-${a.key}`},null,8,["modelValue","onUpdate:modelValue","aria-labelledby","data-testid"]),e.createVNode(B.default,{id:`${i.tableId}-${a.key}-visibility-checkbox-label`,class:"visibility-checkbox-label",title:a.label},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:2},1032,["id","title"])]),_:2},1032,["data-testid","onClick"]))),128))],512),e.createElementVNode("div",T,[e.createVNode(c.default,{appearance:"tertiary",class:"apply-button","data-testid":"apply-button",onClick:p},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode(" Apply ",-1)])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(S.default,{placement:"bottom-end",text:f.value?void 0:"Show/Hide Columns"},{default:e.withCtx(()=>[e.createVNode(c.default,{appearance:"tertiary","aria-label":"Show/Hide Columns",class:"menu-button","data-testid":"column-visibility-menu-button",disabled:i.disabled,icon:"",size:"large"},{default:e.withCtx(()=>[e.createVNode(e.unref(V.default),{decorative:""})]),_:1},8,["disabled"])]),_:1},8,["text"])]),_:1},8,["disabled"])]))}});exports.default=D;

package/dist/kongponents273.es.js

@@ -1,66 +1,182 @@
-import { defineComponent as d, openBlock as a, createBlock as i, withCtx as e, createVNode as o, unref as r, Transition as l, createElementBlock as s, toDisplayString as c, createCommentVNode as u, renderSlot as m } from "vue";
-import b from "./kongponents30.es.js";
+import { defineComponent as D, ref as u, computed as L, watch as T, onMounted as $, 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 E, renderList as P, createTextVNode as C, toDisplayString as z, nextTick as U } from "vue";
+import { debounce as A } from "./kongponents178.es.js";
+import J from "./kongponents185.es.js";
+import R from "./kongponents205.es.js";
+import F from "./kongponents272.es.js";
+import p from "./kongponents38.es.js";
+import O from "./kongponents42.es.js";
+import j from "./kongponents49.es.js";
+import q from "./kongponents50.es.js";
+import G from "./kongponents55.es.js";
+import Q from "./kongponents30.es.js";
 /* empty css                 */
-import p from "./kongponents49.es.js";
-import f from "./kongponents38.es.js";
-import k from "./kongponents214.es.js";
-const g = {
-  key: 0,
-  class: "bulk-actions-dropdown-trigger-count"
-}, D = /* @__PURE__ */ d({
-  __name: "BulkActionsDropdown",
+import W from "./kongponents57.es.js";
+const X = { class: "table-column-visibility-menu" }, Y = { class: "apply-button-wrapper" }, me = /* @__PURE__ */ D({
+  __name: "ColumnVisibilityMenu",
   props: {
-    disabled: { type: Boolean },
-    count: { default: "" },
-    buttonLabel: { default: "" }
+    columns: {},
+    tableId: {},
+    visibilityPreferences: {},
+    disabled: { type: Boolean }
   },
-  setup(t) {
-    return (n, w) => (a(), i(p, {
-      class: "bulk-actions-dropdown",
-      "data-testid": "bulk-actions-dropdown",
-      disabled: t.disabled,
-      "kpop-attributes": { placement: "bottom-end" }
-    }, {
-      items: e(() => [
-        m(n.$slots, "items", {}, void 0, !0)
-      ]),
-      default: e(() => [
-        o(b, {
-          placement: "bottom-end",
-          text: "Selected Row Actions"
-        }, {
-          default: e(() => [
-            o(f, {
-              appearance: "secondary",
-              "aria-label": t.buttonLabel,
-              class: "bulk-actions-dropdown-trigger",
-              "data-testid": "bulk-actions-dropdown-trigger",
-              disabled: t.disabled,
-              icon: "",
-              size: "large"
-            }, {
-              default: e(() => [
-                o(r(k), {
-                  class: "more-icon",
-                  decorative: ""
-                }),
-                o(l, { name: "kongponents-fade-transition" }, {
-                  default: e(() => [
-                    t.count ? (a(), s("span", g, c(t.count), 1)) : u("", !0)
+  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 = A((e) => {
+      i.value = e, n.value && m(n.value);
+    }, 500), k = L(() => 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 = "";
+    }, M = (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 T(() => a.visibilityPreferences, () => {
+      b();
+    }, { immediate: !0 }), $(() => {
+      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(j, {
+        "data-testid": "table-column-visibility-menu",
+        disabled: a.disabled,
+        "kpop-attributes": { placement: "bottom-end" },
+        onToggleDropdown: M
+      }, {
+        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(R), { 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(J), { 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(E, null, P(k.value, (l) => (c(), g(q, {
+              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(O, {
+                  modelValue: s.value[l.key],
+                  "onUpdate:modelValue": (B) => s.value[l.key] = B,
+                  "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(z(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
-            }, 8, ["aria-label", "disabled"])
-          ]),
-          _: 1
-        })
-      ]),
-      _: 3
-    }, 8, ["disabled"]));
+            })
+          ])
+        ]),
+        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(F), { decorative: "" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["text"])
+        ]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
   }
 });
 export {
-  D as default
+  me as default
 };