@kong/kongponents 9.52.7 → 9.52.8

package/dist/kongponents.es276.js

@@ -1,244 +1,91 @@
-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.es182.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.es372.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 x, useTemplateRef as _, openBlock as i, createElementBlock as r, Fragment as m, renderList as v, createBlock as u, withCtx as f, renderSlot as g, createElementVNode as S, toDisplayString as k, createTextVNode as h, createCommentVNode as B } from "vue";
+import E from "./kongponents.es227.js";
+const K = { ref: "itemsContainer" }, L = {
+  key: 1,
+  class: "select-group",
+  "data-propagate-clicks": "false"
+}, $ = { class: "select-group-title" }, V = { class: "select-item-description" }, A = ".select-item button:not(:disabled)", D = '.select-item[aria-selected="true"] button:not(:disabled)', q = /* @__PURE__ */ x({
+  __name: "KSelectItems",
   props: {
-    filter: {},
-    initOpen: { type: Boolean, default: !1 },
-    selection: { default: () => {
-    } },
-    custom: { type: Boolean, default: !1 }
+    items: { default: () => [] },
+    itemCreationEnabled: { type: Boolean },
+    filterString: { default: "" },
+    itemCreationValid: { type: Boolean, default: !0 }
   },
-  emits: ["apply", "close", "open", "clear"],
-  setup(t, { emit: M }) {
-    _((l) => ({
-      v5984a737: D.value
-    }));
-    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;
+  emits: ["selected", "add-item"],
+  setup(d, { expose: b, emit: y }) {
+    const I = y, p = (t) => "items" in t && Array.isArray(t.items), w = (t) => I("selected", t), C = _("itemsContainer"), T = (t) => {
+      var s, a;
+      const n = C.value;
+      if (!n)
+        return;
+      const e = n.querySelectorAll(A);
+      if (!(e != null && e.length))
+        return;
+      const o = n.querySelector(D);
+      if (o) {
+        const l = [...e].indexOf(o);
+        (s = e[t === "down" ? l + 1 : l - 1]) == null || s.focus();
+      } else
+        (a = e[t === "down" ? 0 : e.length - 1]) == null || a.focus();
+    }, c = ({ target: t, key: n }) => {
+      var e;
+      if (n === "ArrowDown" || n === "ArrowUp") {
+        const o = (e = C.value) == null ? void 0 : e.querySelectorAll(A);
+        if (o != null && o.length) {
+          const s = [...o].indexOf(t), a = n === "ArrowDown" ? s + 1 : s - 1, l = o[a];
+          l == null || l.focus();
+        }
       }
-    }), 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
+    return b({ setFocus: T }), (t, n) => (i(), r("div", K, [
+      (i(!0), r(m, null, v(d.items, (e, o) => (i(), r(m, {
+        key: p(e) ? `${e.key || e.label}-group` : e.key || e.value || o
+      }, [
+        p(e) ? (i(), r("div", L, [
+          S("span", $, k(e.label), 1),
+          (i(!0), r(m, null, v(e.items, (s) => (i(), u(E, {
+            key: s.key,
+            item: s,
+            onKeydown: c,
+            onSelected: w
+          }, {
+            content: f(() => [
+              g(t.$slots, "content", { item: s }, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["item"]))), 128))
+        ])) : (i(), u(E, {
+          key: 0,
+          item: e,
+          onKeydown: c,
+          onSelected: w
+        }, {
+          content: f(() => [
+            g(t.$slots, "content", { item: e }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item"]))
+      ], 64))), 128)),
+      d.itemCreationEnabled ? (i(), u(E, {
+        key: "select-add-item",
+        class: "select-add-item",
+        "data-testid": "select-add-item",
+        item: { label: `${d.filterString} (Add new value)`, value: "add_item", disabled: !d.itemCreationValid },
+        onKeydown: c,
+        onSelected: n[0] || (n[0] = (e) => t.$emit("add-item"))
       }, {
-        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)
+        content: f(() => [
+          S("div", V, [
+            h(k(d.filterString) + " ", 1),
+            n[1] || (n[1] = S("span", { class: "select-item-new-indicator" }, "(Add new value)", -1))
           ])
         ]),
-        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"]);
-    };
+        _: 1
+      }, 8, ["item"])) : B("", !0)
+    ], 512));
   }
 });
 export {
-  qe as default
+  q as default
 };