@kong/kongponents 9.45.3 → 9.46.1-pr.2962.dc37c46.0

package/dist/kongponents.es94.js

@@ -0,0 +1,100 @@
+import { defineComponent as L, useSlots as N, useId as T, ref as f, computed as n, watch as w, createElementBlock as g, openBlock as r, createElementVNode as d, createCommentVNode as v, createVNode as h, normalizeClass as b, createBlock as B, resolveDynamicComponent as D, withCtx as C, renderSlot as a, createTextVNode as z, toDisplayString as V, withModifiers as E, unref as c, Transition as A, withDirectives as K, vShow as x } from "vue";
+import M from "./kongponents.es212.js";
+import { KUI_ICON_SIZE_40 as O } from "./kongponents.es175.js";
+const U = { class: "k-collapse" }, Z = { class: "collapse-trigger" }, j = ["aria-controls", "aria-expanded", "aria-label"], q = {
+  key: 0,
+  class: "collapse-trigger-label",
+  "data-testid": "collapse-trigger-label"
+}, F = {
+  key: 0,
+  class: "collapse-visible-content",
+  "data-testid": "collapse-visible-content"
+}, G = ["id"], R = /* @__PURE__ */ L({
+  __name: "KCollapse",
+  props: {
+    modelValue: { type: Boolean, default: !0 },
+    title: { default: "" },
+    titleTag: { default: "div" },
+    triggerLabel: { default: "" },
+    triggerAlignment: { default: "trailing" }
+  },
+  emits: ["toggle", "update:modelValue"],
+  setup(t, { emit: k }) {
+    const m = k, y = N(), p = T(), l = f(!0), u = f(!1), $ = n(() => t.triggerAlignment === "trailing"), S = n(() => !!y["visible-content"]), I = n({
+      get() {
+        return t.modelValue;
+      },
+      set(e) {
+        i(e);
+      }
+    }), o = n(() => u.value ? l.value : t.modelValue), i = (e) => {
+      u.value || (l.value = t.modelValue), l.value = e !== void 0 ? e : !l.value, u.value = !0, m("toggle", l.value), m("update:modelValue", l.value);
+    };
+    return w(I, (e, s) => {
+      e !== s && i(e);
+    }), (e, s) => (r(), g("div", U, [
+      d("div", {
+        class: b(["collapse-heading", { "has-trailing-trigger": $.value }])
+      }, [
+        t.title || e.$slots.title ? (r(), B(D(t.titleTag), {
+          key: 0,
+          class: "collapse-title",
+          "data-testid": "collapse-title"
+        }, {
+          default: C(() => [
+            a(e.$slots, "title", {}, () => [
+              z(V(t.title), 1)
+            ], !0)
+          ]),
+          _: 3
+        })) : v("", !0),
+        d("div", Z, [
+          a(e.$slots, "trigger", {
+            isCollapsed: o.value,
+            toggle: i
+          }, () => [
+            d("button", {
+              "aria-controls": c(p),
+              "aria-expanded": !o.value,
+              "aria-label": t.triggerLabel ? void 0 : "Toggle content",
+              class: "collapse-trigger-content",
+              "data-testid": "collapse-trigger-content",
+              type: "button",
+              onClick: s[0] || (s[0] = E((H) => i(), ["prevent", "stop"]))
+            }, [
+              a(e.$slots, "trigger-content", {}, () => [
+                h(c(M), {
+                  class: b(["collapse-trigger-icon", { "collapse-expanded": !o.value }]),
+                  "data-testid": "collapse-trigger-icon",
+                  decorative: "",
+                  size: c(O)
+                }, null, 8, ["class", "size"]),
+                t.triggerLabel ? (r(), g("span", q, V(t.triggerLabel), 1)) : v("", !0)
+              ], !0)
+            ], 8, j)
+          ], !0)
+        ])
+      ], 2),
+      S.value ? (r(), g("div", F, [
+        a(e.$slots, "visible-content", {}, void 0, !0)
+      ])) : v("", !0),
+      h(A, { name: "kongponents-fade-transition" }, {
+        default: C(() => [
+          K(d("div", {
+            id: c(p),
+            class: "collapse-hidden-content",
+            "data-testid": "collapse-hidden-content"
+          }, [
+            a(e.$slots, "default", {}, void 0, !0)
+          ], 8, G), [
+            [x, !o.value]
+          ])
+        ]),
+        _: 3
+      })
+    ]));
+  }
+});
+export {
+  R as default
+};

package/dist/kongponents.es96.js

@@ -0,0 +1,240 @@
+import { defineComponent as ae, ref as c, computed as R, reactive as le, useTemplateRef as ie, watch as $, createElementBlock as u, openBlock as d, normalizeStyle as q, normalizeClass as N, createVNode as ne, unref as T, withCtx as f, createElementVNode as v, createBlock as y, createCommentVNode as g, createTextVNode as M, toDisplayString as A, isRef as de, Fragment as F, renderList as G } from "vue";
+import I from "./kongponents.es33.js";
+import re from "./kongponents.es53.js";
+import oe from "./kongponents.es56.js";
+/* empty css                  */
+import "./kongponents.es5.js";
+import { DateTimePickerModes as se, ModeArrayCustom as me, ModeArrayRelative as ce, ModeDateOnly as ue } from "./kongponents.es10.js";
+import fe from "./kongponents.es235.js";
+import { KUI_SPACE_40 as ve, KUI_ICON_SIZE_40 as ye, KUI_COLOR_TEXT_NEUTRAL as ge } from "./kongponents.es175.js";
+import { normalizeSize as pe } from "./kongponents.es200.js";
+import be from "./kongponents.es236.js";
+import U from "./kongponents.es237.js";
+import C from "./kongponents.es238.js";
+const ke = ["tabindex"], Re = ["innerHTML"], Te = {
+  key: 1,
+  class: "range-display"
+}, De = {
+  key: 3,
+  class: "relative-periods-container"
+}, Pe = { class: "timeframe-section-title" }, he = { class: "timeframe-buttons" }, Se = { class: "datetime-picker-footer-container" }, Le = /* @__PURE__ */ ae({
+  __name: "KDateTimePicker",
+  props: {
+    clearButton: { type: Boolean },
+    icon: { type: Boolean, default: !0 },
+    modelValue: { default: () => ({ start: null, end: null }) },
+    maxDate: { default: () => {
+    } },
+    minDate: { default: () => {
+    } },
+    mode: {},
+    placeholder: { default: "Select a time range" },
+    range: { type: Boolean },
+    timePeriods: { default: () => [] },
+    width: { default: "100%" },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    popoverPlacement: { default: "bottom-start" },
+    invalidTimeErrorMessage: { default: "Start time cannot exceed end time." }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(a, { emit: J }) {
+    var X, j;
+    const m = J, L = c(null), x = R(() => a.mode !== se.Relative), o = R(() => me.includes(a.mode) && !a.range), s = R(() => a.timePeriods.length > 0), p = R(() => t.tabName === "custom" || !s.value), D = c(!0), w = c(!1), W = c(0), B = {
+      start: null,
+      end: null
+    }, P = c(a.modelValue.start || null), b = c(a.modelValue || B), K = o.value ? P : b, h = ie("calendarWrapperRef"), Z = R(() => ({
+      width: pe(a.width)
+    })), O = Intl.DateTimeFormat().resolvedOptions().timeZone, t = le({
+      abbreviatedDisplay: a.placeholder,
+      fullRangeDisplay: "",
+      popoverOpen: !1,
+      selectedRange: { start: /* @__PURE__ */ new Date(), end: /* @__PURE__ */ new Date() },
+      previouslySelectedRange: { start: /* @__PURE__ */ new Date(), end: /* @__PURE__ */ new Date() },
+      selectedTimeframe: (X = a.timePeriods[0]) == null ? void 0 : X.values[0],
+      previouslySelectedTimeframe: (j = a.timePeriods[0]) == null ? void 0 : j.values[0],
+      tabName: "relative"
+    }), S = (e) => {
+      if (!e) return;
+      const l = o.value ? !e.start : !e.start || !e.end, i = (e == null ? void 0 : e.start) || /* @__PURE__ */ new Date(), r = (e == null ? void 0 : e.end) || null;
+      D.value = !!l, !o.value && e && e.start && e.end ? (b.value.start = i, b.value.end = r) : e && e.start && (P.value = i), t.selectedRange = t.previouslySelectedRange = {
+        start: i,
+        end: r
+      };
+    }, z = (e, l = !1) => {
+      if (t.selectedTimeframe = t.previouslySelectedTimeframe = e, t.selectedRange = {
+        timePeriodsKey: t.selectedTimeframe.key
+      }, t.selectedTimeframe.start && t.selectedTimeframe.end) {
+        const i = new Date(t.selectedTimeframe.start()), r = new Date(t.selectedTimeframe.end());
+        t.fullRangeDisplay = H({ start: i, end: r }, !1), t.selectedRange.start = i, t.selectedRange.end = r;
+      } else
+        t.fullRangeDisplay = "";
+      D.value = !1, l && V();
+    }, Q = () => {
+      var e;
+      b.value = B, P.value = null, t.abbreviatedDisplay = a.placeholder, t.fullRangeDisplay = "", s.value && (t.selectedTimeframe = (e = a.timePeriods[0]) == null ? void 0 : e.values[0]), t.selectedRange = t.previouslySelectedRange = B, m("change", t.selectedRange), m("update:modelValue", t.selectedRange);
+    }, H = (e, l) => {
+      const { start: i, end: r } = e;
+      let n = "PP hh:mm a";
+      const k = U(i, O, "(z)");
+      return !x.value && s.value ? n = "PP hh:mm a" : ue.includes(a.mode) && (n = "PP"), o.value ? `${C(i, n)} ${k}` : l ? `<div>${C(i, n)} -&nbsp;</div><div>${U(r, O, n)} ${k}</div>` : `${C(i, n)} - ${U(r, O, n)} ${k}`;
+    }, V = async () => {
+      var e;
+      o.value ? t.selectedRange.start && (m("change", { start: t.selectedRange.start, end: null }), m("update:modelValue", { start: t.selectedRange.start, end: null })) : (m("change", t.selectedRange), m("update:modelValue", t.selectedRange)), (e = L.value) == null || e.hidePopover(), E();
+    }, E = () => {
+      var e;
+      p.value && ((e = t.selectedRange) != null && e.start) ? t.abbreviatedDisplay = H(t.selectedRange, !0) : s.value && !p.value && (t.abbreviatedDisplay = t.selectedTimeframe.display);
+    }, Y = (e) => e.charAt(0).toUpperCase() + e.slice(1), _ = (e) => t.selectedTimeframe.key === e.key ? "primary" : "secondary";
+    $(P, (e, l) => {
+      e !== void 0 && e !== l && S({ start: e, end: null });
+    }, { immediate: !0 }), $(b, (e, l) => {
+      e !== void 0 && e !== l && S(e);
+    }, { immediate: !0 }), $(() => t.tabName, (e, l) => {
+      l !== void 0 && e === "relative" ? z(t.previouslySelectedTimeframe) : l !== void 0 && e === "custom" && S(t.previouslySelectedRange);
+    }), $(() => a.modelValue, () => {
+      if (ce.includes(a.mode) && a.modelValue.timePeriodsKey) {
+        t.tabName = "relative", D.value = !1;
+        for (const e of a.timePeriods) {
+          const l = e.values.find((i) => i.key === a.modelValue.timePeriodsKey);
+          if (l) {
+            z(l), E();
+            break;
+          }
+        }
+      } else
+        t.tabName = "custom", S(a.modelValue), (a.modelValue.start && a.modelValue.end || o.value && a.modelValue.start) && E();
+      W.value++;
+    }, { immediate: !0 });
+    const ee = () => {
+      t.popoverOpen = !1, h.value && h.value.resetTime();
+    }, te = () => {
+      t.popoverOpen = !0, h.value && h.value.initTimeInputs();
+    };
+    return (e, l) => (d(), u("div", {
+      class: N(["k-datetime-picker", { "set-min-width": s.value }]),
+      style: q(Z.value)
+    }, [
+      ne(re, {
+        ref_key: "kPop",
+        ref: L,
+        disabled: a.disabled || a.readonly,
+        "hide-caret": "",
+        "hide-close-icon": "",
+        offset: T(ve),
+        placement: a.popoverPlacement,
+        width: "auto",
+        onClose: ee,
+        onOpen: te
+      }, {
+        content: f(() => [
+          s.value && x.value ? (d(), y(oe, {
+            key: 0,
+            modelValue: t.tabName,
+            "onUpdate:modelValue": l[0] || (l[0] = (i) => t.tabName = i),
+            class: "datetime-picker-toggle",
+            "data-testid": "datetime-picker-toggle",
+            options: [
+              { label: "Relative", value: "relative" },
+              { label: "Custom", value: "custom" }
+            ],
+            onClick: l[1] || (l[1] = (i) => t.tabName = i)
+          }, null, 8, ["modelValue"])) : g("", !0),
+          !p.value && t.fullRangeDisplay ? (d(), u("p", Te, A(t.fullRangeDisplay), 1)) : g("", !0),
+          x.value && p.value ? (d(), y(be, {
+            key: W.value,
+            ref: "calendarWrapperRef",
+            modelValue: T(K),
+            "onUpdate:modelValue": l[2] || (l[2] = (i) => de(K) ? K.value = i : null),
+            error: w.value,
+            "onUpdate:error": l[3] || (l[3] = (i) => w.value = i),
+            "error-message": a.invalidTimeErrorMessage,
+            "is-range": !o.value,
+            "k-date-picker-mode": a.mode,
+            "max-date": a.maxDate,
+            "min-date": a.minDate
+          }, null, 8, ["modelValue", "error", "error-message", "is-range", "k-date-picker-mode", "max-date", "min-date"])) : s.value && !o.value ? (d(), u("div", De, [
+            (d(!0), u(F, null, G(a.timePeriods, (i, r) => (d(), u("div", {
+              key: `section-${String(i.section || r)}`,
+              class: "timeframe-section"
+            }, [
+              v("div", Pe, A(i.section), 1),
+              v("div", he, [
+                (d(!0), u(F, null, G(i.values, (n, k) => (d(), y(I, {
+                  key: `time-${k}`,
+                  appearance: _(n),
+                  class: "timeframe-button",
+                  "data-testid": `select-timeframe-${n.key}`,
+                  onClick: ($e) => z(n, !0)
+                }, {
+                  default: f(() => [
+                    M(A(Y(n.timeframeText)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["appearance", "data-testid", "onClick"]))), 128))
+              ])
+            ]))), 128))
+          ])) : g("", !0)
+        ]),
+        footer: f(() => [
+          v("div", Se, [
+            a.clearButton ? (d(), y(I, {
+              key: 0,
+              appearance: "tertiary",
+              class: "action-button",
+              "data-testid": "datetime-picker-clear",
+              onClick: l[4] || (l[4] = (i) => Q())
+            }, {
+              default: f(() => [...l[6] || (l[6] = [
+                M(" Clear ", -1)
+              ])]),
+              _: 1
+            })) : g("", !0),
+            p.value ? (d(), y(I, {
+              key: 1,
+              appearance: "tertiary",
+              class: "action-button",
+              "data-testid": "datetime-picker-submit",
+              disabled: D.value || w.value,
+              onClick: l[5] || (l[5] = (i) => V())
+            }, {
+              default: f(() => [...l[7] || (l[7] = [
+                M(" Apply ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])) : g("", !0)
+          ])
+        ]),
+        default: f(() => [
+          v("div", {
+            class: N(["datetime-picker-trigger-wrapper", { disabled: a.disabled }])
+          }, [
+            v("div", {
+              class: N(["datetime-picker-trigger", { disabled: a.disabled, readonly: a.readonly }]),
+              "data-testid": "datetime-picker-trigger",
+              role: "button",
+              style: q(Z.value),
+              tabindex: a.disabled ? -1 : 0
+            }, [
+              v("div", {
+                class: N(["datetime-picker-display", { "has-icon": a.icon, disabled: a.disabled }]),
+                "data-testid": "datetime-picker-display",
+                innerHTML: t.abbreviatedDisplay
+              }, null, 10, Re)
+            ], 14, ke),
+            a.icon ? (d(), y(T(fe), {
+              key: 0,
+              class: "calendar-icon",
+              color: `var(--kui-color-text-neutral, ${T(ge)})`,
+              decorative: "",
+              size: T(ye)
+            }, null, 8, ["color", "size"])) : g("", !0)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["disabled", "offset", "placement"])
+    ], 6));
+  }
+});
+export {
+  Le as default
+};

package/dist/kongponents.es99.js

@@ -0,0 +1,147 @@
+import { defineComponent as S, watch as p, computed as k, useTemplateRef as N, ref as E, onMounted as I, createElementBlock as C, openBlock as n, normalizeClass as O, createVNode as P, withCtx as i, mergeProps as D, unref as T, createBlock as s, resolveDynamicComponent as q, renderSlot as x, createCommentVNode as y, createTextVNode as L, toDisplayString as R, createElementVNode as V, Fragment as z, renderList as F } from "vue";
+import U from "./kongponents.es33.js";
+import j from "./kongponents.es24.js";
+/* empty css                 */
+import G from "./kongponents.es53.js";
+import H from "./kongponents.es20.js";
+import J from "./kongponents.es43.js";
+import Q from "./kongponents.es184.js";
+import { KUI_SPACE_20 as W } from "./kongponents.es175.js";
+const X = {
+  class: "dropdown-list",
+  "data-testid": "dropdown-list"
+}, ie = /* @__PURE__ */ S({
+  __name: "KDropdown",
+  props: {
+    selectionMenu: { type: Boolean },
+    appearance: { default: "primary" },
+    triggerText: { default: "" },
+    showCaret: { type: Boolean },
+    width: { default: "" },
+    kpopAttributes: { default: () => ({}) },
+    items: { default: () => [] },
+    disabled: { type: Boolean },
+    disabledTooltip: { default: "" },
+    label: {}
+  },
+  emits: ["toggleDropdown", "change"],
+  setup(o, { expose: K, emit: B }) {
+    var w;
+    p(() => o.appearance, (e) => {
+      (e === "menu" || e === "selectionMenu") && console.warn("KDropdown: the usage for the `appearance` prop has changed. Please see the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu");
+    }, { immediate: !0 }), p(() => o.label, (e) => {
+      e && console.warn("KDropdown: `label` prop is deprecated. Please use `triggerText` prop instead. See the migration guide for more details: https://kongponents.konghq.com/guide/migrating-to-version-9.html#kdropdownmenu");
+    }, { immediate: !0 });
+    const c = B, $ = k(() => o.disabledTooltip ? j : "div"), m = N("kPop"), f = {
+      hideCaret: !0,
+      popoverClasses: "k-dropdown-popover dropdown-popover",
+      popoverTimeout: 0,
+      placement: "bottom-start"
+    }, A = {
+      ...f,
+      ...o.kpopAttributes,
+      width: o.width || void 0,
+      popoverClasses: `${f.popoverClasses} ${((w = o.kpopAttributes) == null ? void 0 : w.popoverClasses) || ""}`
+    }, g = k(() => {
+      var e;
+      return ((e = a.value) == null ? void 0 : e.label) || o.triggerText || o.label || "";
+    }), a = E(), h = (e) => {
+      o.selectionMenu && (a.value = e);
+    }, v = () => {
+      var e;
+      (e = m.value) == null || e.hidePopover();
+    }, u = (e, t, r) => {
+      e.value !== r && (t(), c("toggleDropdown", e.value));
+    };
+    return p(a, (e, t) => {
+      e && e !== t && c("change", e);
+    }), I(() => {
+      if (o.items) {
+        const e = o.items.filter((t) => t.selected);
+        e.length && (a.value = e[0]);
+      }
+    }), K({
+      openDropdown: () => {
+        var e;
+        (e = m.value) == null || e.showPopover();
+      },
+      closeDropdown: v
+    }), (e, t) => (n(), C("div", {
+      class: O(["k-dropdown", { "selection-dropdown-menu": o.selectionMenu }])
+    }, [
+      P(H, null, {
+        default: i(({ toggle: r, isToggled: l }) => [
+          P(G, D({ ref: "kPop" }, A, {
+            "close-on-popover-click": "",
+            "data-testid": "dropdown-popover",
+            "hide-close-icon": "",
+            offset: T(W),
+            onClose: () => u(l, r, !1),
+            onOpen: () => u(l, r, !0),
+            onPopoverClick: () => u(l, r, !1)
+          }), {
+            content: i(() => [
+              V("ul", X, [
+                x(e.$slots, "items", {
+                  closeDropdown: v,
+                  handleSelection: h,
+                  items: o.items
+                }, () => [
+                  (n(!0), C(z, null, F(o.items, (d, M) => {
+                    var b;
+                    return n(), s(J, D({ ref_for: !0 }, d, {
+                      key: `${d.label}-${M}`,
+                      item: d,
+                      selected: o.selectionMenu && ((b = a.value) == null ? void 0 : b.value) === d.value,
+                      "selection-menu-child": o.selectionMenu,
+                      onChange: h
+                    }), null, 16, ["item", "selected", "selection-menu-child"]);
+                  }), 128))
+                ], !0)
+              ])
+            ]),
+            default: i(() => [
+              (n(), s(q($.value), {
+                class: "dropdown-trigger",
+                "data-testid": "dropdown-trigger",
+                label: o.disabledTooltip ? o.disabledTooltip : void 0,
+                "max-width": o.disabledTooltip ? "240" : void 0,
+                position: o.disabledTooltip ? "bottom" : void 0
+              }, {
+                default: i(() => [
+                  x(e.$slots, "default", {
+                    isOpen: l.value
+                  }, () => [
+                    g.value ? (n(), s(U, {
+                      key: 0,
+                      appearance: o.appearance,
+                      class: "dropdown-trigger-button",
+                      "data-dropdown-trigger": "true",
+                      "data-testid": "dropdown-trigger-button",
+                      disabled: o.disabled
+                    }, {
+                      default: i(() => [
+                        L(R(g.value) + " ", 1),
+                        o.showCaret ? (n(), s(T(Q), {
+                          key: 0,
+                          decorative: ""
+                        })) : y("", !0)
+                      ]),
+                      _: 1
+                    }, 8, ["appearance", "disabled"])) : y("", !0)
+                  ], !0)
+                ]),
+                _: 2
+              }, 1032, ["label", "max-width", "position"]))
+            ]),
+            _: 2
+          }, 1040, ["offset", "onClose", "onOpen", "onPopoverClick"])
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+});
+export {
+  ie as default
+};