@kong/kongponents 9.46.4 → 9.46.5

package/dist/kongponents.es270.js

@@ -1,47 +1,97 @@
-import { defineComponent as r, createElementBlock as c, openBlock as u, createElementVNode as l, withKeys as s, normalizeClass as v, withModifiers as n, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
-const k = ["aria-selected", "data-testid"], y = { class: "select-item-container" }, $ = ["disabled", "value"], h = { class: "select-item-label" }, K = /* @__PURE__ */ r({
-  __name: "KSelectItem",
+import { defineComponent as K, computed as g, useTemplateRef as $, createElementBlock as d, openBlock as l, createBlock as u, createCommentVNode as h, Fragment as m, renderList as f, withCtx as S, renderSlot as v, createElementVNode as p, toDisplayString as y, createTextVNode as V } from "vue";
+import w from "./kongponents.es220.js";
+const D = { ref: "itemsContainer" }, O = { class: "select-group-title" }, R = { class: "select-item-description" }, I = ".select-item button:not(:disabled)", q = '.select-item[aria-selected="true"] button:not(:disabled)', G = /* @__PURE__ */ K({
+  __name: "KSelectItems",
   props: {
-    item: {}
+    items: { default: () => [] },
+    itemCreationEnabled: { type: Boolean },
+    filterString: { default: "" },
+    itemCreationValid: { type: Boolean, default: !0 }
   },
-  emits: ["selected", "arrow-down", "arrow-up"],
-  setup(e, { emit: o }) {
-    const a = o, d = (t) => {
-      if (e.item.disabled) {
-        t.stopPropagation();
+  emits: ["selected", "add-item"],
+  setup(s, { expose: k, emit: A }) {
+    const L = A, C = (n) => L("selected", n), T = g(() => {
+      var n;
+      return (n = s.items) == null ? void 0 : n.filter((t) => !t.group);
+    }), b = g(() => {
+      var n, t;
+      return [...new Set((t = (n = s.items) == null ? void 0 : n.filter((e) => e.group)) == null ? void 0 : t.map((e) => e.group))].sort((e, o) => e.toLowerCase().localeCompare(o.toLowerCase()));
+    }), x = (n) => {
+      var t;
+      return (t = s.items) == null ? void 0 : t.filter((e) => e.group === n);
+    }, E = $("itemsContainer"), B = (n) => {
+      var i, c;
+      const t = E.value;
+      if (!t)
         return;
+      const e = t.querySelectorAll(I);
+      if (!(e != null && e.length))
+        return;
+      const o = t.querySelector(q);
+      if (o) {
+        const r = [...e].indexOf(o);
+        (i = e[n === "down" ? r + 1 : r - 1]) == null || i.focus();
+      } else
+        (c = e[n === "down" ? 0 : e.length - 1]) == null || c.focus();
+    }, a = ({ target: n, key: t }) => {
+      var e;
+      if (t === "ArrowDown" || t === "ArrowUp") {
+        const o = (e = E.value) == null ? void 0 : e.querySelectorAll(I);
+        if (o != null && o.length) {
+          const i = [...o].indexOf(n), c = t === "ArrowDown" ? i + 1 : i - 1, r = o[c];
+          r == null || r.focus();
+        }
       }
-      a("selected", e.item);
     };
-    return (t, i) => (u(), c("div", {
-      key: e.item.key,
-      "aria-selected": e.item.selected,
-      class: "select-item",
-      "data-testid": `select-item-${e.item.value}`,
-      role: "option"
-    }, [
-      l("div", y, [
-        l("button", {
-          class: v({ selected: e.item.selected }),
-          disabled: e.item.disabled === !0 ? !0 : void 0,
-          type: "button",
-          value: e.item.value,
-          onClick: d,
-          onKeydown: [
-            i[0] || (i[0] = s(n((m) => t.$emit("arrow-down"), ["prevent"]), ["down"])),
-            i[1] || (i[1] = s(n((m) => t.$emit("arrow-up"), ["prevent"]), ["up"]))
-          ]
-        }, [
-          l("span", h, [
-            w(t.$slots, "content", {}, () => [
-              b(f(e.item.label), 1)
-            ], !0)
+    return k({ setFocus: B }), (n, t) => (l(), d("div", D, [
+      (l(!0), d(m, null, f(T.value, (e) => (l(), u(w, {
+        key: e.key,
+        item: e,
+        onKeydown: a,
+        onSelected: C
+      }, {
+        content: S(() => [
+          v(n.$slots, "content", { item: e }, void 0, !0)
+        ]),
+        _: 2
+      }, 1032, ["item"]))), 128)),
+      (l(!0), d(m, null, f(b.value, (e) => (l(), d("div", {
+        key: `${e}-group`,
+        class: "select-group",
+        "data-propagate-clicks": "false"
+      }, [
+        p("span", O, y(e), 1),
+        (l(!0), d(m, null, f(x(e), (o) => (l(), u(w, {
+          key: o.key,
+          item: o,
+          onKeydown: a,
+          onSelected: C
+        }, {
+          content: S(() => [
+            v(n.$slots, "content", { item: o }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item"]))), 128))
+      ]))), 128)),
+      s.itemCreationEnabled ? (l(), u(w, {
+        key: "select-add-item",
+        class: "select-add-item",
+        "data-testid": "select-add-item",
+        item: { label: `${s.filterString} (Add new value)`, value: "add_item", disabled: !s.itemCreationValid },
+        onKeydown: a,
+        onSelected: t[0] || (t[0] = (e) => n.$emit("add-item"))
+      }, {
+        content: S(() => [
+          p("div", R, [
+            V(y(s.filterString) + " ", 1),
+            t[1] || (t[1] = p("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
           ])
-        ], 42, $)
-      ])
-    ], 8, k));
+        ]),
+        _: 1
+      }, 8, ["item"])) : h("", !0)
+    ], 512));
   }
 });
 export {
-  K as default
+  G as default
 };

package/dist/kongponents.es272.js

@@ -1,54 +1,47 @@
-import { defineComponent as c, computed as n, createElementBlock as m, openBlock as l, createElementVNode as a, normalizeClass as d, createBlock as r, createCommentVNode as u, unref as e, normalizeStyle as f, toDisplayString as p } from "vue";
-import z from "./kongponents.es262.js";
-import k from "./kongponents.es167.js";
-import v from "./kongponents.es178.js";
-import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as i, KUI_COLOR_TEXT_PRIMARY as x } from "./kongponents.es172.js";
-import { normalizeSize as y } from "./kongponents.es173.js";
-const E = ["aria-current", "data-testid"], C = { class: "step-circle" }, $ = /* @__PURE__ */ c({
-  __name: "KStep",
+import { defineComponent as r, createElementBlock as c, openBlock as u, createElementVNode as l, withKeys as s, normalizeClass as v, withModifiers as n, renderSlot as w, createTextVNode as b, toDisplayString as f } from "vue";
+const k = ["aria-selected", "data-testid"], y = { class: "select-item-container" }, $ = ["disabled", "value"], h = { class: "select-item-label" }, K = /* @__PURE__ */ r({
+  __name: "KSelectItem",
   props: {
-    label: {},
-    state: { default: "default" },
-    maxLabelWidth: {}
+    item: {}
   },
-  setup(t) {
-    const s = n(() => ({
-      maxWidth: y(t.maxLabelWidth)
-    }));
-    return (I, S) => (l(), m("li", {
-      "aria-current": t.state === "active" ? "step" : "false",
-      class: "step",
-      "data-testid": `step-${t.state}`
+  emits: ["selected", "arrow-down", "arrow-up"],
+  setup(e, { emit: o }) {
+    const a = o, d = (t) => {
+      if (e.item.disabled) {
+        t.stopPropagation();
+        return;
+      }
+      a("selected", e.item);
+    };
+    return (t, i) => (u(), c("div", {
+      key: e.item.key,
+      "aria-selected": e.item.selected,
+      class: "select-item",
+      "data-testid": `select-item-${e.item.value}`,
+      role: "option"
     }, [
-      a("div", {
-        class: d(["step-container", `${t.state}`])
-      }, [
-        a("div", C, [
-          t.state === "completed" ? (l(), r(e(z), {
-            key: 0,
-            color: `var(--kui-color-text-inverse, ${e(i)})`,
-            size: e(o),
-            title: "Completed"
-          }, null, 8, ["color", "size"])) : t.state === "pending" ? (l(), r(e(v), {
-            key: 1,
-            color: `var(--kui-color-text-primary, ${e(x)})`,
-            size: e(o),
-            title: "Pending"
-          }, null, 8, ["color", "size"])) : t.state === "error" ? (l(), r(e(k), {
-            key: 2,
-            color: `var(--kui-color-text-inverse, ${e(i)})`,
-            size: e(o),
-            title: "Error"
-          }, null, 8, ["color", "size"])) : u("", !0)
-        ]),
-        a("span", {
-          class: "step-label",
-          style: f(s.value)
-        }, p(t.label), 5)
-      ], 2)
-    ], 8, E));
+      l("div", y, [
+        l("button", {
+          class: v({ selected: e.item.selected }),
+          disabled: e.item.disabled === !0 ? !0 : void 0,
+          type: "button",
+          value: e.item.value,
+          onClick: d,
+          onKeydown: [
+            i[0] || (i[0] = s(n((m) => t.$emit("arrow-down"), ["prevent"]), ["down"])),
+            i[1] || (i[1] = s(n((m) => t.$emit("arrow-up"), ["prevent"]), ["up"]))
+          ]
+        }, [
+          l("span", h, [
+            w(t.$slots, "content", {}, () => [
+              b(f(e.item.label), 1)
+            ], !0)
+          ])
+        ], 42, $)
+      ])
+    ], 8, k));
   }
 });
 export {
-  $ as default
+  K as default
 };

package/dist/kongponents.es28.js

@@ -1,11 +1,11 @@
 import { defineComponent as He, createPropsRestProxy as Te, computed as r, useSlots as Be, useId as Ke, ref as i, watch as A, onMounted as ze, createBlock as De, openBlock as Ie, mergeProps as Ee, unref as $e, createSlots as Me, withCtx as d, renderList as B, renderSlot as f, normalizeProps as p, guardReactiveProps as S } from "vue";
 import We from "./kongponents.es68.js";
-import Ne from "./kongponents.es174.js";
+import Ne from "./kongponents.es175.js";
 import "./kongponents.es5.js";
 import "./kongponents.es10.js";
 import { EmptyStateIconVariants as Le } from "./kongponents.es11.js";
-import { getInitialPageSize as qe, DEFAULT_PAGE_SIZE as Ue } from "./kongponents.es192.js";
-import je from "./kongponents.es193.js";
+import { getInitialPageSize as qe, DEFAULT_PAGE_SIZE as Ue } from "./kongponents.es169.js";
+import je from "./kongponents.es176.js";
 const et = /* @__PURE__ */ He({
   __name: "KTableData",
   props: {

package/dist/kongponents.es280.js

@@ -1,4 +1,4 @@
-import l from "./kongponents.es345.js";
+import l from "./kongponents.es344.js";
 import f from "./kongponents.es318.js";
 function d(n, e) {
   e = l(e, n);

package/dist/kongponents.es283.js

@@ -1,7 +1,7 @@
-import t from "./kongponents.es345.js";
+import t from "./kongponents.es344.js";
 import a from "./kongponents.es285.js";
 import u from "./kongponents.es288.js";
-import o from "./kongponents.es346.js";
+import o from "./kongponents.es345.js";
 import e from "./kongponents.es291.js";
 import g from "./kongponents.es318.js";
 function P(r, m, s) {

package/dist/kongponents.es293.js

@@ -1,4 +1,4 @@
-import e from "./kongponents.es347.js";
+import e from "./kongponents.es346.js";
 var t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
 export {
   r as default

package/dist/kongponents.es295.js

@@ -1,6 +1,6 @@
-import t from "./kongponents.es341.js";
-import e from "./kongponents.es348.js";
-import o from "./kongponents.es349.js";
+import t from "./kongponents.es340.js";
+import e from "./kongponents.es347.js";
+import o from "./kongponents.es348.js";
 var i = "[object Null]", f = "[object Undefined]", r = t ? t.toStringTag : void 0;
 function m(n) {
   return n == null ? n === void 0 ? f : i : r && r in Object(n) ? e(n) : o(n);

package/dist/kongponents.es300.js

@@ -1,4 +1,4 @@
-import p from "./kongponents.es347.js";
+import p from "./kongponents.es346.js";
 var t = typeof exports == "object" && exports && !exports.nodeType && exports, e = t && typeof module == "object" && module && !module.nodeType && module, u = e && e.exports === t, r = u && p.process, l = (function() {
   try {
     var o = e && e.require && e.require("util").types;

package/dist/kongponents.es302.js

@@ -1,8 +1,8 @@
-import a from "./kongponents.es368.js";
+import a from "./kongponents.es367.js";
 import g from "./kongponents.es285.js";
 import h from "./kongponents.es288.js";
 import b from "./kongponents.es292.js";
-import A from "./kongponents.es346.js";
+import A from "./kongponents.es345.js";
 import c from "./kongponents.es297.js";
 var d = Object.prototype, O = d.hasOwnProperty;
 function l(t, p) {

package/dist/kongponents.es303.js

@@ -1,5 +1,5 @@
-import a from "./kongponents.es336.js";
-import e from "./kongponents.es350.js";
+import a from "./kongponents.es335.js";
+import e from "./kongponents.es351.js";
 var s = Object.prototype, n = s.hasOwnProperty;
 function f(r) {
   if (!a(r))

package/dist/kongponents.es305.js

@@ -1,6 +1,6 @@
 import a from "./kongponents.es274.js";
-import i from "./kongponents.es336.js";
-import n from "./kongponents.es369.js";
+import i from "./kongponents.es335.js";
+import n from "./kongponents.es368.js";
 var e = Object.prototype, p = e.hasOwnProperty;
 function v(r) {
   if (!a(r))

package/dist/kongponents.es306.js

@@ -1,4 +1,4 @@
-import u from "./kongponents.es337.js";
+import u from "./kongponents.es336.js";
 function i(r, e, t) {
   e == "__proto__" && u ? u(r, e, {
     configurable: !0,

package/dist/kongponents.es307.js

@@ -1,4 +1,4 @@
-import e from "./kongponents.es343.js";
+import e from "./kongponents.es342.js";
 import t from "./kongponents.es301.js";
 function m(r, o) {
   return r && e(r, o, t);

package/dist/kongponents.es308.js

@@ -1,5 +1,5 @@
-import t from "./kongponents.es339.js";
-import o from "./kongponents.es340.js";
+import t from "./kongponents.es338.js";
+import o from "./kongponents.es339.js";
 import f from "./kongponents.es284.js";
 import i from "./kongponents.es288.js";
 import e from "./kongponents.es314.js";

package/dist/kongponents.es310.js

@@ -1,8 +1,8 @@
-import r from "./kongponents.es371.js";
-import m from "./kongponents.es372.js";
-import h from "./kongponents.es373.js";
-import l from "./kongponents.es374.js";
-import c from "./kongponents.es375.js";
+import r from "./kongponents.es370.js";
+import m from "./kongponents.es371.js";
+import h from "./kongponents.es372.js";
+import l from "./kongponents.es373.js";
+import c from "./kongponents.es374.js";
 function e(t) {
   var o = -1, a = t == null ? 0 : t.length;
   for (this.clear(); ++o < a; ) {

package/dist/kongponents.es312.js

@@ -1,6 +1,6 @@
 import a from "./kongponents.es280.js";
-import s from "./kongponents.es380.js";
-import l from "./kongponents.es345.js";
+import s from "./kongponents.es379.js";
+import l from "./kongponents.es344.js";
 function d(e, t, m) {
   for (var i = -1, n = t.length, o = {}; ++i < n; ) {
     var r = t[i], f = a(e, r);

package/dist/kongponents.es313.js

@@ -1,5 +1,5 @@
-import t from "./kongponents.es377.js";
-import o from "./kongponents.es378.js";
+import t from "./kongponents.es376.js";
+import o from "./kongponents.es377.js";
 import r from "./kongponents.es304.js";
 function s(e) {
   return t(e, r, o);

package/dist/kongponents.es320.js

@@ -1,4 +1,4 @@
-import r from "./kongponents.es383.js";
+import r from "./kongponents.es382.js";
 var a = /^\s+/;
 function t(e) {
   return e && e.slice(0, r(e) + 1).replace(a, "");

package/dist/kongponents.es321.js

@@ -1,4 +1,4 @@
-import t from "./kongponents.es341.js";
+import t from "./kongponents.es340.js";
 import f from "./kongponents.es311.js";
 import m from "./kongponents.es288.js";
 import p from "./kongponents.es296.js";