@kong/kongponents 9.48.10-pr.3041.71c0449.0 → 9.48.10-pr.3042.f75d935.0

package/dist/types/types/tree-list.d.ts

@@ -153,9 +153,13 @@ export interface TreeListSlots {
     /**
      * Slot for content displayed to the left of the item name in place of the default icon.
      */
-    'item-icon'?(item: TreeListItem): any;
+    'item-icon'?(props: {
+        item: TreeListItem;
+    }): any;
     /**
      * Slot for the main content of an item (defaults to the `name` of the item).
      */
-    'item-label'?(item: TreeListItem): any;
+    'item-label'?(props: {
+        item: TreeListItem;
+    }): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong/kongponents",
-  "version": "9.48.10-pr.3041.71c0449.0",
+  "version": "9.48.10-pr.3042.f75d935.0",
   "description": "Kong Component library",
   "type": "module",
   "repository": {
@@ -70,7 +70,7 @@
     "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/compiler-core": "^3.5.26",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^14.1.0",
     "autoprefixer": "^10.4.23",
     "boxen": "^8.0.1",
@@ -107,7 +107,7 @@
     "vitepress": "^1.6.4",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4",
-    "vue-tsc": "^2.2.12"
+    "vue-tsc": "^3.2.2"
   },
   "resolutions": {
     "rollup": "npm:@rollup/wasm-node"

package/dist/kongponents.es155.js

@@ -1,35 +0,0 @@
-import { defineComponent as l, watch as f, computed as m, createElementBlock as c, createCommentVNode as t, openBlock as o, renderSlot as d, createBlock as h, unref as n } from "vue";
-import s from "./kongponents.es226.js";
-import { KUI_ICON_SIZE_30 as u } from "./kongponents.es173.js";
-import { isValidUrl as a } from "./kongponents.es168.js";
-import { warnInvalidProp as k } from "./kongponents.es208.js";
-const p = ["href"], y = /* @__PURE__ */ l({
-  __name: "KExternalLink",
-  props: {
-    href: {},
-    hideIcon: { type: Boolean }
-  },
-  setup(e) {
-    f(() => e.href, (r) => {
-      a(r) || k("href", `\`href\` should be a valid URL, but got "${r}".`);
-    }, { immediate: !0 });
-    const i = m(() => !!a(e.href));
-    return (r, I) => i.value ? (o(), c("a", {
-      key: 0,
-      class: "k-external-link",
-      href: e.href,
-      rel: "noopener",
-      target: "_blank"
-    }, [
-      d(r.$slots, "default", {}, void 0, !0),
-      e.hideIcon ? t("", !0) : (o(), h(n(s), {
-        key: 0,
-        decorative: "",
-        size: n(u)
-      }, null, 8, ["size"]))
-    ], 8, p)) : t("", !0);
-  }
-});
-export {
-  y as default
-};

package/dist/kongponents.es164.js

@@ -1,179 +0,0 @@
-import { defineComponent as z, mergeModels as M, useId as I, computed as o, useModel as A, useTemplateRef as D, watch as h, createElementBlock as r, openBlock as s, createBlock as E, createCommentVNode as F, createElementVNode as u, mergeProps as L, unref as b, withCtx as y, createTextVNode as q, toDisplayString as S, createVNode as U, withDirectives as W, normalizeStyle as g, normalizeClass as P, vModelText as X, Fragment as B, renderList as K } from "vue";
-import G from "./kongponents.es48.js";
-import H from "./kongponents.es53.js";
-const J = {
-  class: "k-slider",
-  "data-testid": "k-slider"
-}, O = { class: "slider-container" }, Q = { class: "input-value" }, Y = ["id", "disabled", "list", "max", "min", "step"], Z = ["id"], p = ["data-testid", "label", "value"], _ = {
-  "aria-hidden": "true",
-  class: "slider-marks",
-  "data-testid": "slider-marks"
-}, ee = ["data-testid"], ie = /* @__PURE__ */ z({
-  __name: "KSlider",
-  props: /* @__PURE__ */ M({
-    label: { default: "" },
-    min: { default: 0 },
-    max: { default: 10 },
-    step: { default: 1 },
-    showMarks: { type: Boolean, default: !1 },
-    marks: { default: () => [] },
-    showValue: { type: Boolean, default: !0 },
-    disabled: { type: Boolean, default: !1 },
-    labelAttributes: { default: () => ({}) }
-  }, {
-    modelValue: {
-      required: !0,
-      type: Number
-    },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ M(["change", "update:modelValue"], ["update:modelValue"]),
-  setup(e, { emit: j }) {
-    const N = j, c = I(), T = o(() => ({ width: m(i.value) })), C = o(() => ({
-      left: m(i.value),
-      transform: `translateX(-${m(i.value)})`
-    })), R = () => {
-      N("change", i.value), V();
-    }, $ = D("thumbPopover"), V = () => {
-      var t;
-      (t = $.value) == null || t.showPopover();
-    }, x = () => {
-      var t;
-      (t = $.value) == null || t.hidePopover();
-    }, i = A(e, "modelValue"), n = o(() => {
-      const t = Math.max(
-        (String(e.step).split(".")[1] || "").length,
-        (String(e.min).split(".")[1] || "").length,
-        (String(e.max).split(".")[1] || "").length
-      );
-      return Math.pow(10, t);
-    }), v = o(() => {
-      if (e.max <= e.min || e.step <= 0)
-        return [];
-      const t = [], l = e.min * n.value, a = e.max * n.value, d = e.step * n.value;
-      for (let k = l; k <= a; k += d)
-        t.push(k / n.value);
-      return t;
-    }), f = (t) => t >= e.min && t <= e.max && v.value.includes(t), w = o(() => {
-      var t, l;
-      if (e.marks.length) {
-        if (typeof e.marks[0] == "object")
-          return e.marks.filter((a) => f(a.value));
-        {
-          const a = e.marks.filter((d) => f(d)).map((d) => ({
-            label: String(d),
-            value: d
-          }));
-          return ((t = a[0]) == null ? void 0 : t.value) !== e.min && a.unshift({ label: String(e.min), value: e.min }), ((l = a.at(-1)) == null ? void 0 : l.value) !== e.max && a.push({ label: String(e.max), value: e.max }), a;
-        }
-      }
-      return e.showMarks ? v.value.map((a) => ({
-        label: String(a),
-        value: a
-      })) : [
-        {
-          label: String(e.min),
-          value: e.min
-        },
-        {
-          label: String(e.max),
-          value: e.max
-        }
-      ];
-    }), m = (t) => `${(t - e.min) / (e.max - e.min) * 100}%`;
-    return h(() => e.max, (t) => {
-      t <= e.min && console.warn(`KSlider: max value ${t} must be greater than min value ${e.min}.`);
-    }, { immediate: !0 }), h(() => e.step, (t) => {
-      e.max > e.min && (t <= 0 || (e.max * n.value - e.min * n.value) % (t * n.value) !== 0) && console.warn(`KSlider: step value ${t} is invalid.`);
-    }, { immediate: !0 }), h(i, (t) => {
-      e.max > e.min && !f(t) && (console.warn(`KSlider: value ${t} is out of range [${v.value.join(", ")}]. Setting to min value ${e.min}.`), i.value = e.min);
-    }, { immediate: !0 }), h(() => e.marks, (t) => {
-      if (t.length) {
-        let l = [];
-        l = t.filter((a) => !f(typeof e.marks[0] == "object" ? a.value : a)), l.length && console.warn(`KSlider: marks [${l.map((a) => typeof l[0] == "object" ? a.value : a).join(", ")}] are out of range [${v.value.join(", ")}].`);
-      }
-    }, { immediate: !0 }), (t, l) => (s(), r("div", J, [
-      e.label ? (s(), E(G, L({ key: 0 }, e.labelAttributes, {
-        for: `${b(c)}-input`
-      }), {
-        default: y(() => [
-          q(S(e.label), 1)
-        ]),
-        _: 1
-      }, 16, ["for"])) : F("", !0),
-      u("div", O, [
-        u("span", {
-          "aria-hidden": "true",
-          class: P(["lower-range-track", { "is-disabled": e.disabled }]),
-          style: g(T.value)
-        }, null, 6),
-        U(H, {
-          ref: "thumbPopover",
-          "aria-hidden": "true",
-          disabled: e.disabled || !e.showValue,
-          "hide-close-icon": "",
-          placement: "top",
-          "popover-timeout": 500,
-          trigger: "hover",
-          width: "auto"
-        }, {
-          content: y(() => [
-            u("span", Q, S(i.value), 1)
-          ]),
-          default: y(() => [
-            u("span", {
-              class: P(["thumb", { "is-disabled": e.disabled }]),
-              style: g(C.value)
-            }, null, 6)
-          ]),
-          _: 1
-        }, 8, ["disabled"]),
-        W(u("input", {
-          id: `${b(c)}-input`,
-          "onUpdate:modelValue": l[0] || (l[0] = (a) => i.value = a),
-          "data-testid": "slider-input",
-          disabled: e.disabled,
-          list: `${b(c)}-markers`,
-          max: e.max,
-          min: e.min,
-          step: e.step,
-          type: "range",
-          onBlur: x,
-          onFocus: V,
-          onInput: R,
-          onMouseup: x,
-          onTouchend: x
-        }, null, 40, Y), [
-          [
-            X,
-            i.value,
-            void 0,
-            { number: !0 }
-          ]
-        ]),
-        u("datalist", {
-          id: `${b(c)}-markers`,
-          "data-testid": "slider-datalist-marks"
-        }, [
-          (s(!0), r(B, null, K(w.value, (a) => (s(), r("option", {
-            key: `datalist-mark-${a.value}`,
-            "data-testid": `datalist-mark-${a.value}`,
-            label: a.label,
-            style: g({ left: m(a.value) }),
-            value: a.value
-          }, null, 12, p))), 128))
-        ], 8, Z),
-        u("div", _, [
-          (s(!0), r(B, null, K(w.value, (a) => (s(), r("span", {
-            key: `mark-${a.value}`,
-            "data-testid": `mark-${a.value}`,
-            style: g({ left: m(a.value) })
-          }, S(a.label || a.value), 13, ee))), 128))
-        ])
-      ])
-    ]));
-  }
-});
-export {
-  ie as default
-};

package/dist/kongponents.es240.js

@@ -1,4 +0,0 @@
-const t = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-export {
-  t as urlAlphabet
-};

package/dist/kongponents.es248.js

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

package/dist/kongponents.es258.js

@@ -1,36 +0,0 @@
-import { defineComponent as i, useCssVars as d, createElementBlock as t, openBlock as n, Fragment as a, renderList as c, renderSlot as m, createVNode as k } from "vue";
-import f from "./kongponents.es58.js";
-const p = { class: "skeleton-table-wrapper" }, b = /* @__PURE__ */ i({
-  __name: "TableSkeleton",
-  props: {
-    rows: {},
-    columns: {}
-  },
-  setup(s) {
-    d((e) => ({
-      v11294cba: e.columns
-    }));
-    const u = (e, r) => e === 1 && r === 1 || e !== 1 && r !== 1 ? "25" : "50";
-    return (e, r) => (n(), t("div", p, [
-      (n(!0), t(a, null, c(s.rows, (l) => (n(), t("div", {
-        key: l,
-        class: "skeleton-table-row"
-      }, [
-        m(e.$slots, "default", {}, () => [
-          (n(!0), t(a, null, c(s.columns, (o) => (n(), t("div", {
-            key: o,
-            class: "skeleton-cell-container"
-          }, [
-            k(f, {
-              class: "skeleton-cell",
-              width: u(o, l)
-            }, null, 8, ["width"])
-          ]))), 128))
-        ], !0)
-      ]))), 128))
-    ]));
-  }
-});
-export {
-  b as default
-};

package/dist/kongponents.es262.js

@@ -1,47 +0,0 @@
-import { defineComponent as d, useCssVars as i, ref as s, computed as u, onMounted as m, onUnmounted as g, createElementBlock as l, openBlock as a, createElementVNode as o, createCommentVNode as v, unref as p, normalizeStyle as f } from "vue";
-import h from "./kongponents.es363.js";
-const I = {
-  class: "fullscreen-loading-container",
-  "data-testid": "full-screen-loader"
-}, _ = ["src"], k = {
-  key: 0,
-  class: "progress"
-}, z = /* @__PURE__ */ d({
-  __name: "FullScreenKongSkeleton",
-  props: {
-    progress: {},
-    hideProgress: { type: Boolean },
-    zIndex: {}
-  },
-  setup(r) {
-    i((t) => ({
-      v4d434712: t.zIndex
-    }));
-    const n = s(0), e = s(0), c = u(() => r.progress !== null ? r.progress : e.value);
-    return m(() => {
-      r.progress || (n.value = setInterval(() => {
-        e.value >= 100 && (clearInterval(n.value), e.value = 100), e.value = Math.min(e.value + Math.ceil(Math.random() * 10 * 30), 100);
-      }, 200));
-    }), g(() => {
-      clearInterval(n.value);
-    }), (t, x) => (a(), l("div", I, [
-      o("div", null, [
-        o("img", {
-          alt: "Loading",
-          src: p(h)
-        }, null, 8, _),
-        r.hideProgress ? v("", !0) : (a(), l("div", k, [
-          o("div", {
-            class: "progress-bar",
-            role: "progressbar",
-            style: f({ width: `${c.value}%` }),
-            title: "Loading"
-          }, null, 4)
-        ]))
-      ])
-    ]));
-  }
-});
-export {
-  z as default
-};