@kong/kongponents 9.56.1 → 9.56.2

package/dist/kongponents.es239.js

@@ -1,100 +1,191 @@
-import g from "./kongponents.es286.js";
-function E(t) {
-  const n = [0];
-  for (let r = 0; r < t.length; r++)
-    t[r] === `
-` && n.push(r + 1);
-  return n;
-}
-function a(t, n) {
-  let r = 0, e = t.length - 1;
-  for (; r < e; ) {
-    const i = Math.floor((r + e + 1) / 2);
-    t[i] && t[i] <= n ? r = i : e = i - 1;
+import { defineComponent as H, ref as g, computed as S, useTemplateRef as Q, watch as U, onMounted as W, nextTick as I, resolveComponent as X, openBlock as s, createBlock as b, unref as Y, mergeProps as Z, withCtx as c, createElementBlock as $, Fragment as _, renderList as ee, normalizeClass as L, createSlots as B, renderSlot as h, createTextVNode as le, toDisplayString as ae, withDirectives as te, vShow as ne } from "vue";
+import { VueDraggableNext as ie } from "./kongponents.es512.js";
+import oe from "./kongponents.es513.js";
+const T = ({ children: a = [] }) => a.length === 0 ? 0 : 1 + Math.max(...a.map(T)), ce = /* @__PURE__ */ H({
+  __name: "KTreeDraggable",
+  props: {
+    items: {},
+    disableDrag: { type: Boolean },
+    filter: { type: [String, Function] },
+    maxDepth: {},
+    level: { default: 0 },
+    parentId: {},
+    hideIcons: { type: Boolean },
+    group: {},
+    collapsible: { type: Boolean },
+    initialCollapseAll: { type: Boolean }
+  },
+  emits: ["change", "child-change", "selected"],
+  setup(a, { expose: A, emit: w }) {
+    const d = w, v = g(0), n = g([]), M = {
+      tag: "div",
+      // Note: force-fallback: true is required to override cursor when dragging
+      "force-fallback": !0,
+      animation: "100",
+      draggable: ".tree-item-container",
+      "item-key": "id",
+      "ghost-class": "tree-item-dragged",
+      "drag-class": "tree-item-grabbing",
+      class: "child-drop-zone",
+      "fallback-tolerance": 10
+    }, m = g(!1), p = S(() => [".tree-item-expanded-button", ...(typeof a.filter == "function" ? a.filter() : a.filter).split(",").map((l) => l.trim()).filter(Boolean)].join(", ")), y = (e) => {
+      var l, i, t;
+      return !((t = (i = (l = n.value.filter((o) => o.id === e.id)) == null ? void 0 : l[0]) == null ? void 0 : i.children) != null && t.length);
+    }, N = (e) => e.children || [], V = (e) => {
+      a.parentId ? d("child-change", {
+        parentId: a.parentId,
+        children: n.value,
+        target: (e == null ? void 0 : e.added) || (e == null ? void 0 : e.removed) || (e == null ? void 0 : e.moved)
+      }) : d("change", {
+        items: n.value,
+        target: (e == null ? void 0 : e.added) || (e == null ? void 0 : e.removed) || (e == null ? void 0 : e.moved)
+      });
+    }, K = (e) => {
+      d("child-change", e);
+    }, E = (e) => {
+      d("selected", e);
+    }, r = g(/* @__PURE__ */ new Map()), F = (e, l) => {
+      r.value.set(l, e);
+    }, O = (e) => a.collapsible ? !!r.value.get(e) : !0, f = Q("tree-items"), z = () => {
+      var e;
+      n.value.forEach((l) => {
+        r.value.set(l.id, !1);
+      }), (e = f.value) == null || e.forEach((l) => {
+        l == null || l.setExpandedValue(!1);
+      });
+    }, J = () => {
+      var e;
+      n.value.forEach((l) => {
+        r.value.set(l.id, !0);
+      }), (e = f.value) == null || e.forEach((l) => {
+        l == null || l.setExpandedValue(!0);
+      });
+    }, R = S(() => a.level > a.maxDepth - 1), j = (e) => {
+      var u, D, x, k;
+      const l = ((D = (u = e.relatedContext) == null ? void 0 : u.component) == null ? void 0 : D.$attrs.level) || 0, i = (x = e.draggedContext) == null ? void 0 : x.element;
+      let t = 0;
+      return (k = i.children) != null && k.length && (t = T(i)), !(l + t > a.maxDepth - 1);
+    }, P = (e) => {
+      var t, o;
+      const l = ((o = (t = e.item) == null ? void 0 : t._underlying_vm_) == null ? void 0 : o.id) || "", i = n.value.find((u) => u.id === l);
+      m.value = !0, i && d("selected", i), C(!0);
+    }, q = async () => {
+      var e;
+      m.value = !1, C(!1), v.value++, await I(), (e = f.value) == null || e.forEach((l) => {
+        l == null || l.setExpandedValue(r.value.get(l == null ? void 0 : l.id));
+      });
+    }, C = (e) => {
+      const l = document == null ? void 0 : document.getElementsByTagName("html").item(0);
+      l && l.classList.toggle("tree-list-grabbing", e);
+    };
+    U(() => a.items, (e, l) => {
+      JSON.stringify(e) !== JSON.stringify(l) && (n.value = e, n.value.forEach((i) => {
+        i.children || (i.children = []);
+      }));
+    });
+    const G = () => {
+      n.value.forEach((e) => {
+        r.value.set(e.id, !a.initialCollapseAll);
+      });
+    };
+    return W(async () => {
+      n.value = a.items, n.value.forEach((e) => {
+        e.children || (e.children = []);
+      }), await I(), a.collapsible && G();
+    }), A({ collapseAll: z, expandAll: J }), (e, l) => {
+      const i = X("KTreeDraggable", !0);
+      return s(), b(Y(ie), Z(M, {
+        class: "tree-draggable",
+        direction: "vertical",
+        disabled: a.disableDrag,
+        filter: p.value,
+        group: { name: a.group, pull: [a.group], put: R.value ? [] : [a.group] },
+        level: a.level,
+        list: n.value,
+        move: j,
+        tag: "div",
+        onChange: V,
+        onEnd: q,
+        onStart: P
+      }), {
+        default: c(() => [
+          (s(!0), $(_, null, ee(n.value, (t) => (s(), $("div", {
+            key: t.id,
+            class: L(["tree-item-container", {
+              "has-no-children": y(t)
+            }])
+          }, [
+            (s(), b(oe, {
+              key: `tree-item-${t.id}-${v.value}`,
+              ref_for: !0,
+              ref: "tree-items",
+              collapsible: a.collapsible,
+              "controls-id": t.id,
+              disabled: a.disableDrag,
+              "has-children": !y(t),
+              "hide-icons": a.hideIcons,
+              "initial-collapse": a.initialCollapseAll,
+              item: t,
+              onExpanded: (o) => F(o, t.id),
+              onSelected: E
+            }, B({
+              "item-label": c(() => [
+                h(e.$slots, "item-label", { item: t }, () => [
+                  le(ae(t.name), 1)
+                ], !0)
+              ]),
+              _: 2
+            }, [
+              e.$slots["item-icon"] ? {
+                name: "item-icon",
+                fn: c(() => [
+                  h(e.$slots, "item-icon", { item: t }, void 0, !0)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["collapsible", "controls-id", "disabled", "has-children", "hide-icons", "initial-collapse", "item", "onExpanded"])),
+            te((s(), b(i, {
+              id: `tree-list-draggable-${t.id}`,
+              key: `tree-item-${t.id}-children-${v.value}`,
+              class: L({
+                collapsible: a.collapsible
+              }),
+              collapsible: a.collapsible,
+              "disable-drag": a.disableDrag,
+              filter: p.value,
+              group: a.group,
+              "hide-icons": a.hideIcons,
+              "initial-collapse-all": a.initialCollapseAll,
+              items: N(t),
+              level: a.level + 1,
+              "max-depth": a.maxDepth,
+              "parent-id": t.id,
+              onChildChange: K,
+              onSelected: E
+            }, B({
+              "item-label": c(({ item: o }) => [
+                h(e.$slots, "item-label", { item: o }, void 0, !0)
+              ]),
+              _: 2
+            }, [
+              e.$slots["item-icon"] ? {
+                name: "item-icon",
+                fn: c(({ item: o }) => [
+                  h(e.$slots, "item-icon", { item: o }, void 0, !0)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["id", "class", "collapsible", "disable-drag", "filter", "group", "hide-icons", "initial-collapse-all", "items", "level", "max-depth", "parent-id"])), [
+              [ne, O(t.id)]
+            ])
+          ], 2))), 128))
+        ]),
+        _: 3
+      }, 16, ["disabled", "filter", "group", "level", "list"]);
+    };
   }
-  return r + 1;
-}
-function x(t, n, r) {
-  if (!t || !n)
-    return [];
-  const e = [];
-  let i = 0;
-  for (; ; ) {
-    const s = t.indexOf(n, i);
-    if (s === -1) break;
-    const l = a(r, s);
-    e.push(l), i = (l < r.length ? r[l] : t.length) ?? 0;
-  }
-  return e;
-}
-function L(t, n, r) {
-  if (!t || !n)
-    return [];
-  const e = new RegExp(n, "sg"), i = [];
-  let s;
-  for (; (s = e.exec(t)) !== null; ) {
-    const l = s.index, c = s.index + s[0].length - 1, u = a(r, l), m = a(r, c);
-    for (let o = u; o <= m; o++)
-      i[i.length - 1] !== o && i.push(o);
-  }
-  return i;
-}
-function w(t, n, r, e = E(t)) {
-  return r ? L(t, n, e) : x(t, n, e);
-}
-const M = (t) => `<mark class="matched-term">${t}</mark>`, f = /[<&]/;
-function h(t) {
-  return t.replace(/[&<]/g, (n) => n === "&" ? "&amp;" : "&lt;");
-}
-function R(t, n = f, r = h) {
-  return n.test(t) ? r(t) : t;
-}
-function I(t, n, r) {
-  if (!t || !n)
-    return "";
-  let e;
-  try {
-    e = new RegExp(`(?:${r ? n : g(n)})+`, "sgi");
-  } catch {
-    return t;
-  }
-  const i = !f.test(t);
-  let s = "", l = 0, c;
-  for (; (c = e.exec(t)) !== null; ) {
-    const u = c.index;
-    s += i ? t.slice(l, u) : h(t.slice(l, u)), s += M(i ? c[0] : h(c[0])), l = u + c[0].length;
-  }
-  return s += i ? t.slice(l) : h(t.slice(l)), s;
-}
-const d = /^\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*$/;
-function b(t, n) {
-  if (!d.test(t))
-    throw new Error("Invalid line number expression.");
-  const r = t.split(",").map((e) => {
-    const [i, s] = e.split("-").map(Number);
-    return s == null ? i : [i, s];
-  }).filter((e) => e !== void 0);
-  return p(r, n);
-}
-function p(t, n) {
-  const r = t.flatMap((e) => {
-    if (typeof e == "number")
-      return e < 1 || e > n ? [] : e;
-    let [i, s] = e[0] < e[1] ? e : [e[1], e[0]];
-    return i = Math.max(1, i), s = Math.min(n, s), Array.from({ length: s - i + 1 }, (l, c) => c + i);
-  }).sort((e, i) => e - i);
-  return Array.from(new Set(r));
-}
-function k(t, n) {
-  return typeof t == "string" ? b(t, n) : p(t, n);
-}
+});
 export {
-  d as LINE_NUMBER_EXPRESSION_REGEX,
-  E as buildLineOffsets,
-  R as escapeHTMLIfNeeded,
-  h as escapeInnerHTML,
-  w as getMatchingLineNumbers,
-  I as highlightMatchingChars,
-  k as normalizeHighlightedLines,
-  M as wrapMark
+  ce as default,
+  T as getMaximumDepth
 };

package/dist/kongponents.es24.js

@@ -1,7 +1,7 @@
-import { defineComponent as s, useSlots as m, computed as r, useId as u, openBlock as c, createBlock as f, mergeProps as h, unref as l, withCtx as a, renderSlot as o, createElementVNode as x, createTextVNode as p, toDisplayString as b } from "vue";
+import { defineComponent as s, useSlots as r, computed as u, useId as c, openBlock as m, createBlock as f, mergeProps as h, unref as l, withCtx as a, renderSlot as o, createElementVNode as p, createTextVNode as x, toDisplayString as b } from "vue";
 import k from "./kongponents.es56.js";
 import { KUI_SPACE_20 as I } from "./kongponents.es181.js";
-const v = ["id"], A = /* @__PURE__ */ s({
+const v = ["id"], z = /* @__PURE__ */ s({
   inheritAttrs: !1,
   __name: "KTooltip",
   props: {
@@ -15,13 +15,13 @@ const v = ["id"], A = /* @__PURE__ */ s({
     disabled: { type: Boolean }
   },
   setup(t) {
-    const d = m(), i = r(() => !t.disabled && (!!t.text || !!t.label || !!d.content)), n = u();
-    return (e, w) => i.value ? (c(), f(k, h({
+    const d = r(), i = u(() => !t.disabled && (!!t.text || !!t.label || !!d.content)), n = c();
+    return (e, w) => i.value ? (m(), f(k, h({
       key: 0,
       "hide-caret": "",
       "hide-close-icon": "",
       "max-width": t.maxWidth,
-      offset: l(I),
+      offset: `var(--kui-space-20, ${l(I)})`,
       placement: t.placement,
       "popover-classes": "k-tooltip",
       "popover-timeout": 100,
@@ -30,14 +30,14 @@ const v = ["id"], A = /* @__PURE__ */ s({
       "z-index": t.zIndex
     }, { ...e.$attrs, ...t.kpopAttributes }), {
       content: a(() => [
-        x("div", {
+        p("div", {
           id: t.tooltipId || l(n),
           role: "tooltip"
         }, [
           o(e.$slots, "content", {
             label: t.text || t.label
           }, () => [
-            p(b(t.text || t.label), 1)
+            x(b(t.text || t.label), 1)
           ])
         ], 8, v)
       ]),
@@ -49,5 +49,5 @@ const v = ["id"], A = /* @__PURE__ */ s({
   }
 });
 export {
-  A as default
+  z as default
 };

package/dist/kongponents.es240.js

@@ -1,123 +1,7 @@
-import { defineComponent as w, computed as d, openBlock as u, createBlock as b, resolveDynamicComponent as x, normalizeStyle as S, withCtx as $, createElementBlock as z } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kongponents.es273.js";
-const N = ["aria-hidden"], c = '<path d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="currentColor"/>', q = /* @__PURE__ */ w({
-  __name: "ArrowUpIcon",
-  props: {
-    /** The accessibility text provided to screen readers */
-    title: {
-      type: String,
-      required: !1,
-      default: ""
-    },
-    /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
-    color: {
-      type: String,
-      required: !1,
-      default: "currentColor"
-    },
-    /** The CSS display property for the icon. Defaults to `block` */
-    display: {
-      type: String,
-      required: !1,
-      default: "block"
-    },
-    /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
-    decorative: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** The icon size */
-    size: {
-      type: [Number, String],
-      required: !1,
-      default: p,
-      // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (t) => {
-        if (typeof t == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t) || typeof t == "number" && t > 0)
-          return !0;
-        if (typeof t == "string") {
-          const e = String(t).replace(/px/gi, ""), a = Number(e);
-          if (a && !isNaN(a) && Number.isInteger(a) && a > 0)
-            return !0;
-        }
-        return !1;
-      }
-    },
-    /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
-    as: {
-      type: String,
-      required: !1,
-      default: "span"
-    },
-    /**
-     * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).
-     * Typically only set to `true` during snapshot testing.
-     * Defaults to `false`.
-     */
-    staticIds: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(t) {
-    const e = t, a = (i) => typeof i == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(i), n = d(() => {
-      if (a(e.size))
-        return e.size;
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const i = String(e.size).replace(/px/gi, ""), r = Number(i);
-        if (r && !isNaN(r) && Number.isInteger(r) && r > 0)
-          return `${r}px`;
-      }
-      return p;
-    }), f = d(() => ({
-      boxSizing: "border-box",
-      color: e.color,
-      display: e.display,
-      flexShrink: "0",
-      height: n.value,
-      lineHeight: "0",
-      width: n.value,
-      pointerEvents: e.decorative ? "none" : void 0
-    })), g = (i) => {
-      const r = {}, h = Math.random().toString(36).substring(2, 12);
-      return i.replace(/id="([^"]+)"/g, (s, o) => {
-        const l = `${h}-${o}`;
-        return r[o] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (s, o) => r[o] ? `#${r[o]}` : s);
-    }, m = {
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "&": "&amp;"
-    }, v = (i) => i.replace(/[<>"'&]/g, (r) => m[r]), y = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? c : g(c)}`;
-    return (i, r) => (u(), b(x(t.as), {
-      "aria-hidden": t.decorative ? "true" : void 0,
-      class: "kui-icon arrow-up-icon",
-      "data-testid": "kui-icon-wrapper-arrow-up-icon",
-      style: S(f.value),
-      tabindex: t.decorative ? "-1" : void 0
-    }, {
-      default: $(() => [
-        (u(), z("svg", {
-          "aria-hidden": t.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-arrow-up-icon",
-          fill: "none",
-          height: "100%",
-          role: "img",
-          viewBox: "0 0 24 24",
-          width: "100%",
-          xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: y
-        }, null, 8, N))
-      ]),
-      _: 1
-    }, 8, ["aria-hidden", "style", "tabindex"]));
-  }
-});
+import t from "./kongponents.es444.js";
+/* empty css                  */
+import o from "./kongponents.es75.js";
+const s = /* @__PURE__ */ o(t, [["__scopeId", "data-v-f93867d5"]]);
 export {
-  q as default
+  s as default
 };

package/dist/kongponents.es241.js

@@ -1,123 +1,7 @@
-import { defineComponent as b, computed as d, openBlock as u, createBlock as x, resolveDynamicComponent as S, normalizeStyle as w, withCtx as $, createElementBlock as z } from "vue";
-import { KUI_ICON_SIZE_50 as p } from "./kongponents.es273.js";
-const N = ["aria-hidden"], f = '<path d="M10 18V16H14V18H10ZM6 13V11H18V13H6ZM3 8V6H21V8H3Z" fill="currentColor"/>', H = /* @__PURE__ */ b({
-  __name: "FilterIcon",
-  props: {
-    /** The accessibility text provided to screen readers */
-    title: {
-      type: String,
-      required: !1,
-      default: ""
-    },
-    /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
-    color: {
-      type: String,
-      required: !1,
-      default: "currentColor"
-    },
-    /** The CSS display property for the icon. Defaults to `block` */
-    display: {
-      type: String,
-      required: !1,
-      default: "block"
-    },
-    /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
-    decorative: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** The icon size */
-    size: {
-      type: [Number, String],
-      required: !1,
-      default: p,
-      // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (t) => {
-        if (typeof t == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(t) || typeof t == "number" && t > 0)
-          return !0;
-        if (typeof t == "string") {
-          const e = String(t).replace(/px/gi, ""), n = Number(e);
-          if (n && !isNaN(n) && Number.isInteger(n) && n > 0)
-            return !0;
-        }
-        return !1;
-      }
-    },
-    /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
-    as: {
-      type: String,
-      required: !1,
-      default: "span"
-    },
-    /**
-     * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).
-     * Typically only set to `true` during snapshot testing.
-     * Defaults to `false`.
-     */
-    staticIds: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(t) {
-    const e = t, n = (r) => typeof r == "string" && /^\s*var\(\s*--[\w-]+\s*(?:,[^)]*)?\)\s*$/.test(r), o = d(() => {
-      if (n(e.size))
-        return e.size;
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const r = String(e.size).replace(/px/gi, ""), i = Number(r);
-        if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
-          return `${i}px`;
-      }
-      return p;
-    }), c = d(() => ({
-      boxSizing: "border-box",
-      color: e.color,
-      display: e.display,
-      flexShrink: "0",
-      height: o.value,
-      lineHeight: "0",
-      width: o.value,
-      pointerEvents: e.decorative ? "none" : void 0
-    })), g = (r) => {
-      const i = {}, h = Math.random().toString(36).substring(2, 12);
-      return r.replace(/id="([^"]+)"/g, (l, a) => {
-        const s = `${h}-${a}`;
-        return i[a] = s, `id="${s}"`;
-      }).replace(/#([^\s^")]+)/g, (l, a) => i[a] ? `#${i[a]}` : l);
-    }, m = {
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "&": "&amp;"
-    }, v = (r) => r.replace(/[<>"'&]/g, (i) => m[i]), y = `${e.title ? `<title data-testid="kui-icon-svg-title">${v(e.title)}</title>` : ""}${e.staticIds ? f : g(f)}`;
-    return (r, i) => (u(), x(S(t.as), {
-      "aria-hidden": t.decorative ? "true" : void 0,
-      class: "kui-icon filter-icon",
-      "data-testid": "kui-icon-wrapper-filter-icon",
-      style: w(c.value),
-      tabindex: t.decorative ? "-1" : void 0
-    }, {
-      default: $(() => [
-        (u(), z("svg", {
-          "aria-hidden": t.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-filter-icon",
-          fill: "none",
-          height: "100%",
-          role: "img",
-          viewBox: "0 0 24 24",
-          width: "100%",
-          xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: y
-        }, null, 8, N))
-      ]),
-      _: 1
-    }, 8, ["aria-hidden", "style", "tabindex"]));
-  }
-});
+import t from "./kongponents.es446.js";
+/* empty css                  */
+import o from "./kongponents.es75.js";
+const c = /* @__PURE__ */ o(t, [["__scopeId", "data-v-12cbeddf"]]);
 export {
-  H as default
+  c as default
 };