@kong/kongponents 9.47.5-pr.3005.17b94c3.0 → 9.48.1-pr.3009.8b5ec33.0

package/dist/kongponents.es329.js

@@ -1,43 +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: "multiselect-item-container" }, $ = ["disabled", "value"], h = { class: "multiselect-item-label" }, K = /* @__PURE__ */ r({
-  __name: "KMultiselectItem",
+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.es233.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: d }) {
-    const o = d, a = () => {
-      e.item.disabled || o("selected", e.item);
+  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();
+        }
+      }
     };
-    return (i, t) => (u(), c("div", {
-      key: e.item.key,
-      "aria-selected": e.item.selected,
-      class: "multiselect-item",
-      "data-testid": `multiselect-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: a,
-          onKeydown: [
-            t[0] || (t[0] = s(n((m) => i.$emit("arrow-down"), ["prevent"]), ["down"])),
-            t[1] || (t[1] = s(n((m) => i.$emit("arrow-up"), ["prevent"]), ["up"]))
-          ]
-        }, [
-          l("span", h, [
-            w(i.$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.es331.js

@@ -1,179 +1,47 @@
-import { defineComponent as W, mergeModels as j, useModel as P, ref as b, useId as J, computed as D, onMounted as K, watch as h, createElementBlock as m, openBlock as i, createBlock as I, createCommentVNode as y, unref as c, mergeProps as B, createElementVNode as M, createVNode as L, withDirectives as S, toDisplayString as k, normalizeClass as F, vModelText as A, Transition as Q, withCtx as X } from "vue";
-import { DatePicker as U } from "./kongponents.es416.js";
-import Z from "./kongponents.es401.js";
-import p from "./kongponents.es405.js";
-import G from "./kongponents.es231.js";
-const _ = { class: "calendar-wrapper" }, ee = {
-  key: 2,
-  class: "time-wrapper"
-}, te = { class: "time-input" }, ae = ["for"], ne = { key: 0 }, le = { key: 1 }, ue = ["id", "step"], se = ["for"], ie = { key: 0 }, re = ["id", "step"], oe = {
-  key: 0,
-  class: "help-text"
-}, ye = /* @__PURE__ */ W({
-  __name: "CalendarWrapper",
-  props: /* @__PURE__ */ j({
-    isRange: { type: Boolean },
-    kDatePickerMode: {},
-    maxDate: { default: () => {
-    } },
-    minDate: { default: () => {
-    } },
-    errorMessage: { default: () => {
-    } },
-    timeGranularity: { default: "minutely" }
-  }, {
-    modelValue: { required: !0 },
-    modelModifiers: {},
-    error: { type: Boolean, default: !1 },
-    errorModifiers: {}
-  }),
-  emits: ["update:modelValue", "update:error"],
-  setup(t, { expose: Y }) {
-    const u = (n, a) => a === "secondly" ? G(n, "HH:mm:ss") : G(n, "HH:mm"), e = P(t, "modelValue"), f = P(t, "error"), s = b(u(/* @__PURE__ */ new Date(), t.timeGranularity)), r = b(u(/* @__PURE__ */ new Date(), t.timeGranularity)), o = b({
-      start: u(/* @__PURE__ */ new Date(), t.timeGranularity),
-      end: u(/* @__PURE__ */ new Date(), t.timeGranularity)
-    }), g = J(), $ = D(() => t.isRange && e.value && "start" in e.value && e.value.start instanceof Date ? { year: e.value.start.getFullYear(), month: e.value.start.getMonth() + 1 } : e.value instanceof Date ? { year: e.value.getFullYear(), month: e.value.getMonth() + 1 } : t.maxDate && Z(t.maxDate, p()) ? { year: t.maxDate.getFullYear(), month: t.maxDate.getMonth() + 1 } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() + 1 }), x = D(() => ({
-      borderless: !0,
-      color: "blue",
-      dragAttribute: q,
-      expanded: !0,
-      initialPage: $.value,
-      maxDate: t.maxDate,
-      minDate: t.minDate,
-      mode: "date",
-      modelConfig: N,
-      selectAttribute: z,
-      transparent: !0
-    })), R = D(() => ["time", "dateTime", "relativeDateTime"].includes(t.kDatePickerMode)), H = D(() => {
-      switch (t.timeGranularity) {
-        case "minutely":
-          return 60;
-        case "secondly":
-          return 1;
-        default:
-          return 60;
+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: {
+    item: {}
+  },
+  emits: ["selected", "arrow-down", "arrow-up"],
+  setup(e, { emit: o }) {
+    const a = o, d = (t) => {
+      if (e.item.disabled) {
+        t.stopPropagation();
+        return;
       }
-    }), V = (n, a) => n > a, C = () => {
-      if (e.value && R.value)
-        if (t.isRange && e.value.start && e.value.end) {
-          const n = e.value;
-          s.value = u(n.start, t.timeGranularity), r.value = u(n.end, t.timeGranularity);
-        } else e.value instanceof Date ? s.value = u(e.value, t.timeGranularity) : s.value = u(/* @__PURE__ */ new Date(), t.timeGranularity);
-    }, w = (n) => {
-      const a = n.split(":"), l = parseInt(a[0], 10), d = parseInt(a[1], 10), v = t.timeGranularity === "secondly" && a[2] ? parseInt(a[2], 10) : 0;
-      return { hours: l, minutes: d, seconds: v };
+      a("selected", e.item);
     };
-    K(() => {
-      C(), o.value.start = s.value, o.value.end = r.value;
-    });
-    const N = { type: "number" }, q = {
-      key: "select-drag",
-      highlight: {
-        start: { contentClass: "vcal-day-drag-start" },
-        base: { contentClass: "vcal-day-drag-base" },
-        end: { contentClass: "vcal-day-drag-end" }
-      }
-    }, z = {
-      key: "select-calendar",
-      highlight: {
-        start: { contentClass: "vcal-day-start" },
-        base: { contentClass: "vcal-day-base" },
-        end: { contentClass: "vcal-day-end" }
-      }
-    };
-    h(() => s.value, (n) => {
-      if (n) {
-        if (e.value && t.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date) {
-          const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
-          a.setHours(l, d, v, 0), e.value.start.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0), f.value = V(e.value.start, e.value.end);
-        } else if (e.value instanceof Date) {
-          const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
-          a.setHours(l, d, v, 0), e.value.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0);
-        }
-      }
-    }), h(() => r.value, (n) => {
-      if (n && e.value && t.isRange && "end" in e.value && e.value.end instanceof Date && "start" in e.value && e.value.start instanceof Date) {
-        const a = /* @__PURE__ */ new Date(), { hours: l, minutes: d, seconds: v } = w(n);
-        a.setHours(l, d, v, 0), e.value.end.setHours(a.getHours(), a.getMinutes(), a.getSeconds(), 0), f.value = V(e.value.start, e.value.end);
-      }
-    }), h(() => e.value, () => {
-      e.value && t.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date ? (s.value = u(e.value.start, t.timeGranularity), r.value = u(e.value.end, t.timeGranularity), f.value = V(e.value.start, e.value.end)) : e.value instanceof Date && (s.value = u(e.value, t.timeGranularity));
-    }, { immediate: !0, deep: !0 }), h(() => t.timeGranularity, () => {
-      e.value && t.isRange && "start" in e.value && e.value.start instanceof Date ? o.value.start = u(e.value.start, t.timeGranularity) : e.value instanceof Date && (o.value.start = u(e.value, t.timeGranularity)), e.value && t.isRange && "end" in e.value && e.value.end instanceof Date && (o.value.end = u(e.value.end, t.timeGranularity));
-    });
-    const T = (n) => {
-      const a = e.value;
-      return t.isRange && a && n in a && a[n] instanceof Date;
-    }, O = () => {
-      s.value = o.value.start, r.value = o.value.end;
-    }, E = (n) => {
-      try {
-        return G(n, "EEE MMM d yyyy");
-      } catch (a) {
-        console.warn("Error formatting date:", a);
-      }
-    };
-    return Y({
-      resetTime: O,
-      initTimeInputs: C
-    }), (n, a) => (i(), m("div", _, [
-      t.isRange ? (i(), I(c(U), B({ key: 0 }, x.value, {
-        modelValue: e.value,
-        "onUpdate:modelValue": a[0] || (a[0] = (l) => e.value = l),
-        modelModifiers: { range: !0 }
-      }), null, 16, ["modelValue"])) : (i(), I(c(U), B({ key: 1 }, x.value, {
-        modelValue: e.value,
-        "onUpdate:modelValue": a[1] || (a[1] = (l) => e.value = l)
-      }), null, 16, ["modelValue"])),
-      R.value ? (i(), m("div", ee, [
-        M("div", te, [
-          M("label", {
-            class: "time-input-label",
-            for: `time-input-start-${c(g)}`
-          }, [
-            T("start") ? (i(), m("span", ne, k(E(e.value.start)), 1)) : e.value && e.value instanceof Date ? (i(), m("span", le, k(E(e.value)), 1)) : y("", !0)
-          ], 8, ae),
-          S(M("input", {
-            id: `time-input-start-${c(g)}`,
-            "onUpdate:modelValue": a[2] || (a[2] = (l) => s.value = l),
-            class: F(["time-input-start", { "input-error": f.value }]),
-            "data-testid": "time-input-start",
-            step: H.value,
-            type: "time"
-          }, null, 10, ue), [
-            [A, s.value]
-          ]),
-          M("label", {
-            class: "time-input-label",
-            for: `time-input-end-${c(g)}`
-          }, [
-            T("end") ? (i(), m("span", ie, k(c(G)(e.value.end, "EEE MMM d yyyy")), 1)) : y("", !0)
-          ], 8, se),
-          t.isRange ? S((i(), m("input", {
-            key: 0,
-            id: `time-input-end-${c(g)}`,
-            "onUpdate:modelValue": a[3] || (a[3] = (l) => r.value = l),
-            class: F(["time-input-end", { "input-error": f.value }]),
-            "data-testid": "time-input-end",
-            step: H.value,
-            type: "time"
-          }, null, 10, re)), [
-            [A, r.value]
-          ]) : y("", !0)
-        ]),
-        L(Q, {
-          mode: "out-in",
-          name: "kongponents-fade-transition"
-        }, {
-          default: X(() => [
-            f.value && t.errorMessage ? (i(), m("div", oe, k(t.errorMessage), 1)) : y("", !0)
-          ]),
-          _: 1
-        })
-      ])) : y("", !0)
-    ]));
+    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)
+          ])
+        ], 42, $)
+      ])
+    ], 8, k));
   }
 });
 export {
-  ye as default
+  K as default
 };