@kong/kongponents 9.45.3 → 9.46.0

package/dist/kongponents.es122.js

@@ -0,0 +1,237 @@
+import { defineComponent as le, ref as v, computed as m, watch as K, onMounted as ie, onBeforeUnmount as ne, createElementBlock as f, openBlock as r, normalizeClass as j, createBlock as q, createElementVNode as c, Fragment as H, createTextVNode as L, toDisplayString as P, createCommentVNode as k, createVNode as C, withCtx as J, unref as h, renderList as ue, nextTick as oe } from "vue";
+import se from "./kongponents.es42.js";
+import T from "./kongponents.es33.js";
+import ve from "./kongponents.es194.js";
+import re from "./kongponents.es195.js";
+import ce from "./kongponents.es191.js";
+import de from "./kongponents.es196.js";
+import { ResizeObserverHelper as ge } from "./kongponents.es192.js";
+const fe = {
+  class: "pagination-text large-screen",
+  "data-testid": "visible-items"
+}, be = { class: "pagination-text-pages" }, me = { class: "pagination-button-container" }, pe = { key: 0 }, Pe = {
+  key: 1,
+  class: "pagination-button placeholder"
+}, he = ["aria-current", "aria-label", "data-testid", "onClick"], ye = {
+  key: 2,
+  class: "pagination-button placeholder"
+}, ke = { key: 3 }, Ce = { class: "page-size-select" }, ze = {
+  key: 0,
+  class: "pagination-text small-screen",
+  "data-testid": "visible-items"
+}, xe = { class: "pagination-text-pages" }, Ge = /* @__PURE__ */ le({
+  __name: "KPagination",
+  props: {
+    items: { default: () => [] },
+    totalCount: { default: 0 },
+    pageSizes: { default: () => [15, 30, 50, 75, 100] },
+    initialPageSize: { default: null },
+    neighbors: { default: 1 },
+    currentPage: { default: null },
+    disablePageJump: { type: Boolean },
+    offset: { type: Boolean },
+    offsetPreviousButtonDisabled: { type: Boolean },
+    offsetNextButtonDisabled: { type: Boolean }
+  },
+  emits: ["pageChange", "pageSizeChange", "getNextOffset", "getPreviousOffset"],
+  setup(e, { emit: R }) {
+    const U = {
+      placement: "top"
+    }, B = R, y = v(null), N = v(), a = v(e.currentPage ? e.currentPage : 1), o = v(e.initialPageSize ? e.initialPageSize : e.pageSizes[0]), i = m(() => Math.ceil(e.totalCount / o.value)), w = e.pageSizes.map((t, n) => ({
+      label: `${t}`,
+      key: `size-${n}`,
+      value: t,
+      selected: t === o.value
+    })), Q = m(() => `${o.value} ${o.value === 1 ? "item per page" : " items per page"}`), l = v(e.neighbors), s = v(3), X = async () => (await oe(), y.value ? y.value.scrollWidth > y.value.clientWidth : !1), A = async () => {
+      await X() && (l.value > 1 || s.value > 1) && (l.value > 1 ? l.value-- : s.value > 1 && s.value--, x.value = O(a.value, i.value, p.value, d.value));
+    }, O = (t, n, u, I) => {
+      if (e.disablePageJump)
+        return [];
+      let g = [...Array(n).keys()].map((b) => b + 1);
+      const ae = s.value + 2 + 2 * l.value;
+      return g.length <= ae || (u ? u && I ? g = g.filter(
+        (b) => b > t - l.value - 1 && b < t + l.value + 1
+      ) : u && !I && (g = g.filter((b) => b > n - l.value * 2 - s.value)) : g = g.filter((b) => b <= l.value * 2 + s.value)), g;
+    }, F = v(a.value === 1), D = v(a.value === i.value), $ = m(() => (a.value - 1) * o.value + 1), G = m(() => {
+      const t = $.value - 1 + o.value;
+      return t > e.totalCount ? e.totalCount : t;
+    }), M = m(() => `${$.value} to ${G.value}`), V = m(() => ` of ${e.totalCount}`), z = m(() => e.currentPage ? e.currentPage : a.value), W = m(() => 5 + 2 * l.value), p = v(z.value >= l.value + (s.value + 1) && i.value > W.value), d = v(i.value > s.value + 2 + 2 * l.value), x = v(O(
+      z.value,
+      i.value,
+      p.value,
+      d.value
+    )), Y = () => {
+      a.value++, E();
+    }, Z = () => {
+      a.value--, E();
+    }, S = (t) => {
+      a.value = t, E();
+    }, E = () => {
+      const t = (a.value - 1) * o.value + o.value;
+      D.value = t >= e.totalCount, F.value = a.value === 1, i.value <= W.value ? (p.value = !1, d.value = !1) : (p.value = a.value >= l.value + (s.value + 1), d.value = a.value <= i.value - l.value - s.value), x.value = O(a.value, i.value, p.value, d.value), B("pageChange", {
+        page: a.value,
+        pageCount: i.value,
+        firstItem: $.value,
+        lastItem: G.value,
+        visibleItems: e.items.slice($.value - 1, G.value)
+      });
+    }, _ = (t) => {
+      o.value !== t.value && (o.value = t.value, B("pageSizeChange", {
+        pageSize: o.value,
+        pageCount: i.value
+      }), e.currentPage !== 1 && S(1));
+    }, ee = () => {
+      B("getNextOffset");
+    }, te = () => {
+      B("getPreviousOffset");
+    };
+    return K(() => e.currentPage, (t, n) => {
+      t !== n && t && S(t);
+    }), K(i, (t, n) => {
+      t !== n && (D.value = a.value === t, d.value = t > s.value + 2 + 2 * l.value, x.value = O(
+        z.value,
+        t,
+        !1,
+        d.value
+      ));
+    }), K(x, () => {
+      !e.disablePageJump && !e.offset && A();
+    }), ie(() => {
+      !e.disablePageJump && !e.offset && (N.value = ge.create(A), N.value.observe(y.value));
+    }), ne(() => {
+      var t;
+      !e.disablePageJump && !e.offset && ((t = N.value) == null || t.unobserve(y.value));
+    }), (t, n) => (r(), f("nav", {
+      ref_key: "kPaginationElement",
+      ref: y,
+      class: j(["k-pagination", { "page-jump": !e.disablePageJump && !e.offset }]),
+      "data-testid": "k-pagination"
+    }, [
+      e.offset ? (r(), q(ve, {
+        key: 1,
+        "next-button-disabled": e.offsetNextButtonDisabled,
+        "previous-button-disabled": e.offsetPreviousButtonDisabled,
+        onGetNextOffset: ee,
+        onGetPreviousOffset: te
+      }, null, 8, ["next-button-disabled", "previous-button-disabled"])) : (r(), f(H, { key: 0 }, [
+        c("span", fe, [
+          c("span", be, P(M.value), 1),
+          L(" " + P(V.value), 1)
+        ]),
+        c("ul", me, [
+          c("li", null, [
+            C(T, {
+              appearance: "tertiary",
+              "aria-label": "Go to the previous page",
+              class: "pagination-button arrow",
+              "data-testid": "previous-button",
+              disabled: F.value,
+              icon: "",
+              size: "small",
+              type: "button",
+              onClick: Z
+            }, {
+              default: J(() => [
+                C(h(re), {
+                  class: "pagination-arrow-icon",
+                  decorative: ""
+                })
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          !e.disablePageJump && p.value ? (r(), f("li", pe, [
+            c("button", {
+              "aria-label": "Go to the first page",
+              class: "pagination-button",
+              "data-testid": "page-1-button",
+              type: "button",
+              onClick: n[0] || (n[0] = (u) => S(1))
+            }, " 1 ")
+          ])) : k("", !0),
+          !e.disablePageJump && p.value ? (r(), f("li", Pe, " ... ")) : k("", !0),
+          (r(!0), f(H, null, ue(x.value, (u) => (r(), f("li", { key: u }, [
+            c("button", {
+              "aria-current": u == z.value && "page" || void 0,
+              "aria-label": `Go to page ${u}`,
+              class: j(["pagination-button", { active: u == z.value }]),
+              "data-testid": `page-${u}-button`,
+              type: "button",
+              onClick: (I) => S(u)
+            }, P(u), 11, he)
+          ]))), 128)),
+          !e.disablePageJump && d.value ? (r(), f("li", ye, " ... ")) : k("", !0),
+          !e.disablePageJump && d.value ? (r(), f("li", ke, [
+            c("button", {
+              "aria-label": "Go to the last page",
+              class: "pagination-button",
+              "data-testid": "last-button",
+              type: "button",
+              onClick: n[1] || (n[1] = (u) => S(i.value))
+            }, P(i.value), 1)
+          ])) : k("", !0),
+          c("li", null, [
+            C(T, {
+              appearance: "tertiary",
+              "aria-label": "Go to the next page",
+              class: "pagination-button arrow",
+              "data-testid": "next-button",
+              disabled: D.value ? !0 : void 0,
+              icon: "",
+              size: "small",
+              type: "button",
+              onClick: Y
+            }, {
+              default: J(() => [
+                C(h(de), {
+                  class: "pagination-arrow-icon",
+                  decorative: ""
+                })
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
+        ])
+      ], 64)),
+      c("div", Ce, [
+        !e.disablePageJump && !e.offset ? (r(), f("span", ze, [
+          c("span", xe, P(M.value), 1),
+          L(" " + P(V.value), 1)
+        ])) : k("", !0),
+        C(se, {
+          class: "page-size-dropdown",
+          "data-testid": "page-size-dropdown",
+          disabled: h(w).length <= 1,
+          items: h(w),
+          "kpop-attributes": U,
+          "selection-menu": "",
+          onChange: _
+        }, {
+          default: J(() => [
+            C(T, {
+              appearance: "tertiary",
+              class: "page-size-dropdown-trigger",
+              "data-testid": "page-size-dropdown-trigger",
+              disabled: h(w).length <= 1,
+              size: "small",
+              type: "button"
+            }, {
+              default: J(() => [
+                L(P(Q.value) + " ", 1),
+                h(w).length > 1 ? (r(), q(h(ce), {
+                  key: 0,
+                  decorative: ""
+                })) : k("", !0)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        }, 8, ["disabled", "items"])
+      ])
+    ], 2));
+  }
+});
+export {
+  Ge as default
+};

package/dist/kongponents.es124.js

@@ -0,0 +1,207 @@
+import { defineComponent as Y, useSlots as _, useId as U, ref as v, computed as r, onMounted as ee, onBeforeUnmount as te, watch as oe, createBlock as le, openBlock as f, resolveDynamicComponent as ae, withKeys as ie, withModifiers as re, withCtx as h, createElementVNode as C, createVNode as y, renderSlot as b, unref as n, createTextVNode as H, toDisplayString as $, Transition as ne, withDirectives as se, mergeProps as ue, normalizeStyle as ce, createElementBlock as k, createCommentVNode as w, normalizeClass as N, vShow as de } from "vue";
+import { useFloating as ve } from "./kongponents.es216.js";
+import fe from "./kongponents.es33.js";
+import pe from "./kongponents.es176.js";
+import { KUI_SPACE_60 as me, KUI_ICON_SIZE_30 as ge } from "./kongponents.es182.js";
+import he from "./kongponents.es217.js";
+import { useEventListener as p } from "./kongponents.es193.js";
+import { normalizeSize as x } from "./kongponents.es184.js";
+import { shift as Ce, flip as ye, autoPlacement as be, autoUpdate as ke } from "./kongponents.es218.js";
+const we = ["id", "aria-labelledby", "x-placement"], xe = ["tabindex"], Ee = {
+  key: 1,
+  class: "popover-header"
+}, Ie = ["id"], Pe = {
+  key: 2,
+  class: "popover-footer"
+}, Ne = /* @__PURE__ */ Y({
+  __name: "KPop",
+  props: {
+    buttonText: { default: "" },
+    title: { default: "" },
+    placement: { default: "auto" },
+    trigger: { default: "click" },
+    popoverTimeout: { default: 300 },
+    hideCloseIcon: { type: Boolean },
+    hideCaret: { type: Boolean },
+    closeOnPopoverClick: { type: Boolean },
+    disabled: { type: Boolean },
+    width: { default: "200px" },
+    maxWidth: { default: "none" },
+    maxHeight: { default: "none" },
+    popoverClasses: { default: "" },
+    popoverElementAttributes: { default: () => ({}) },
+    tag: { default: "div" },
+    zIndex: { default: 1e3 },
+    offset: { default: () => me },
+    target: { default: null }
+  },
+  emits: ["open", "close", "popover-click"],
+  setup(e, { expose: O, emit: V }) {
+    const E = V, u = _(), I = U(), z = U(), c = v(null), s = v(null), a = v(!1), i = r(() => {
+      var t, l;
+      return c.value && ((t = c.value) != null && t.children[0]) ? (l = c.value) == null ? void 0 : l.children[0] : null;
+    }), P = v(null), W = () => {
+      a.value ? o() : m();
+    }, S = v(), B = () => {
+      S.value && S.value();
+    }, D = () => {
+      B(), i.value && s.value && (S.value = ke(i.value, s.value, M));
+    }, m = async () => {
+      e.disabled || (P.value && clearTimeout(P.value), D(), a.value = !0);
+    }, o = () => {
+      P.value = setTimeout(() => {
+        B(), a.value = !1;
+      }, e.trigger === "hover" ? e.popoverTimeout : 0);
+    }, F = () => {
+      W();
+    }, L = () => {
+      E("popover-click"), e.closeOnPopoverClick && o();
+    }, Z = (t) => {
+      var A, K;
+      if (!a.value)
+        return;
+      const l = t.target, Q = (A = c.value) == null ? void 0 : A.contains(l), X = (K = s.value) == null ? void 0 : K.contains(l);
+      Q || X || o();
+    }, T = r(() => e.placement.trim().replace(/ /g, "-").replace(/[A-Z]+(?![a-z])|[A-Z]/g, (t, l) => (l ? "-" : "") + t.toLowerCase()).replace(/--+/g, "-").replace(/-+$/g, "")), { floatingStyles: q, placement: d, update: M } = ve(i, s, {
+      ...T.value === "auto" && { middleware: [be()] },
+      // when placement is auto just use autoPlacement middleware
+      ...T.value !== "auto" && {
+        placement: T.value,
+        middleware: [
+          Ce(),
+          // Shifts the floating element to keep it in view.
+          ye()
+          // Changes the placement of the floating element to keep it in view.
+        ]
+      },
+      strategy: "fixed",
+      transform: !1
+    }), g = r(() => x(e.offset)), j = r(() => d.value.includes("top") ? {
+      marginBottom: g.value
+    } : d.value.includes("bottom") ? {
+      marginTop: g.value
+    } : d.value.includes("right") ? {
+      marginLeft: g.value
+    } : d.value.includes("left") ? {
+      marginRight: g.value
+    } : {}), R = r(() => ({
+      ...q.value,
+      zIndex: e.zIndex
+    })), G = r(() => ({
+      ...j.value,
+      width: x(e.width),
+      maxWidth: x(e.maxWidth),
+      maxHeight: x(e.maxHeight)
+    })), J = r(() => [e.popoverClasses, { "hide-caret": e.hideCaret }]);
+    return O({
+      hidePopover: o,
+      showPopover: m
+    }), ee(() => {
+      if (p(window, "mousedown", Z, { capture: !0 }), i.value) {
+        const t = i.value.querySelector('button[data-dropdown-trigger="true"]') || i.value;
+        t.hasAttribute("aria-controls") || t.setAttribute("aria-controls", I);
+      }
+      e.trigger === "hover" && [s.value, i.value].forEach((t) => {
+        t && (p(t, "mouseenter", m), p(t, "focusin", m), p(t, "mouseleave", o), p(t, "focusout", o));
+      });
+    }), te(() => {
+      B();
+    }), oe(a, (t) => {
+      E(t ? "open" : "close");
+    }), (t, l) => (f(), le(ae(e.tag), {
+      class: "k-popover",
+      onKeydown: ie(re(o, ["stop"]), ["esc"])
+    }, {
+      default: h(() => [
+        C("div", {
+          ref_key: "triggerWrapperElement",
+          ref: c,
+          class: "popover-trigger-wrapper",
+          onClick: F
+        }, [
+          b(t.$slots, "default", {}, () => [
+            y(fe, {
+              "aria-controls": n(I),
+              "data-testid": "popover-button"
+            }, {
+              default: h(() => [
+                H($(e.buttonText), 1)
+              ]),
+              _: 1
+            }, 8, ["aria-controls"])
+          ], !0)
+        ], 512),
+        y(he, {
+          target: e.target,
+          "use-teleport": !!e.target
+        }, {
+          default: h(() => [
+            y(ne, { name: "kongponents-fade-transition" }, {
+              default: h(() => [
+                se(C("div", ue(e.popoverElementAttributes, {
+                  id: n(I),
+                  ref_key: "popoverElement",
+                  ref: s,
+                  "aria-labelledby": u.title || e.title ? n(z) : void 0,
+                  class: ["popover", J.value],
+                  role: "dialog",
+                  style: R.value,
+                  "x-placement": n(d),
+                  onClick: L
+                }), [
+                  C("div", {
+                    class: "popover-container",
+                    style: ce(G.value)
+                  }, [
+                    e.hideCloseIcon ? w("", !0) : (f(), k("button", {
+                      key: 0,
+                      ref: "popoverCloseButton",
+                      "aria-label": "Close popover",
+                      class: "popover-close-button",
+                      tabindex: a.value ? 0 : -1,
+                      type: "button",
+                      onClick: o
+                    }, [
+                      y(n(pe), {
+                        class: "popover-close-icon",
+                        decorative: "",
+                        size: n(ge)
+                      }, null, 8, ["size"])
+                    ], 8, xe)),
+                    u.title || e.title ? (f(), k("div", Ee, [
+                      u.title || e.title ? (f(), k("div", {
+                        key: 0,
+                        id: n(z),
+                        class: N(["popover-title", { "close-icon-spacing": !e.hideCloseIcon }])
+                      }, [
+                        b(t.$slots, "title", {}, () => [
+                          H($(e.title), 1)
+                        ], !0)
+                      ], 10, Ie)) : w("", !0)
+                    ])) : w("", !0),
+                    C("div", {
+                      class: N(["popover-content", { "close-icon-spacing": !e.hideCloseIcon && !(u.title || e.title) }])
+                    }, [
+                      b(t.$slots, "content", {}, void 0, !0)
+                    ], 2),
+                    u.footer ? (f(), k("div", Pe, [
+                      b(t.$slots, "footer", {}, void 0, !0)
+                    ])) : w("", !0)
+                  ], 4)
+                ], 16, we), [
+                  [de, a.value]
+                ])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["target", "use-teleport"])
+      ]),
+      _: 3
+    }, 40, ["onKeydown"]));
+  }
+});
+export {
+  Ne as default
+};

package/dist/kongponents.es126.js

@@ -0,0 +1,93 @@
+import { defineComponent as V, useSlots as w, useAttrs as C, computed as u, ref as b, watch as v, createBlock as $, openBlock as s, mergeProps as D, createSlots as K, withCtx as p, createElementBlock as x, createCommentVNode as B, renderSlot as y, createElementVNode as d, toDisplayString as l, createVNode as P, createTextVNode as T, withKeys as S, withModifiers as E } from "vue";
+import M from "./kongponents.es49.js";
+import N from "./kongponents.es46.js";
+const z = {
+  key: 0,
+  class: "prompt-content"
+}, I = { class: "prompt-message" }, j = {
+  key: 1,
+  class: "prompt-confirmation-container"
+}, O = { class: "prompt-confirmation-text" }, U = { class: "confirmation-text" }, G = /* @__PURE__ */ V({
+  inheritAttrs: !1,
+  __name: "KPrompt",
+  props: {
+    visible: { type: Boolean },
+    title: { default: "" },
+    message: { default: "" },
+    actionButtonText: { default: "Confirm" },
+    actionButtonAppearance: { default: "primary" },
+    actionButtonDisabled: { type: Boolean },
+    cancelButtonText: { default: "Cancel" },
+    cancelButtonAppearance: { default: "tertiary" },
+    cancelButtonDisabled: { type: Boolean },
+    confirmationText: { default: "" },
+    confirmationPrompt: { default: "Type {confirmationText} to confirm your action." },
+    modalAttributes: { default: () => ({}) },
+    errorMessage: { default: "You must enter the text as indicated above to confirm." }
+  },
+  emits: ["proceed", "cancel"],
+  setup(t, { emit: A }) {
+    const c = A, m = w(), g = C(), h = u(() => {
+      const e = Object.assign({}, g);
+      return delete e["tabbable-options"], delete e["max-width"], delete e["max-height"], delete e["close-on-backdrop-click"], delete e["input-autofocus"], delete e["hide-close-icon"], delete e["hide-cancel-button"], delete e["full-screen"], e;
+    }), n = b(""), i = b(!1), f = u(() => t.actionButtonDisabled ? !0 : t.confirmationText ? t.confirmationText !== n.value : !1), o = u(() => t.confirmationPrompt.split("{confirmationText}")), k = () => {
+      f.value ? i.value = !0 : c("proceed");
+    };
+    return v(() => t.visible, (e) => {
+      e || (n.value = "", i.value = !1);
+    }), v(n, (e) => {
+      e && e === t.confirmationText && (i.value = !1);
+    }), (e, a) => (s(), $(M, D({ ...h.value, ...t.modalAttributes }, {
+      "action-button-appearance": t.actionButtonAppearance,
+      "action-button-disabled": f.value,
+      "action-button-text": t.actionButtonText,
+      "cancel-button-appearance": t.cancelButtonAppearance,
+      "cancel-button-disabled": t.cancelButtonDisabled,
+      "cancel-button-text": t.cancelButtonText,
+      class: "k-prompt",
+      "input-autofocus": t.modalAttributes.inputAutofocus === void 0 ? !0 : t.modalAttributes.inputAutofocus,
+      title: t.title || "Confirm your action",
+      visible: t.visible,
+      onCancel: a[1] || (a[1] = (r) => c("cancel")),
+      onProceed: a[2] || (a[2] = (r) => c("proceed"))
+    }), K({
+      default: p(() => [
+        m.default || t.message ? (s(), x("div", z, [
+          y(e.$slots, "default", {}, () => [
+            d("p", I, l(t.message), 1)
+          ], !0)
+        ])) : B("", !0),
+        t.confirmationText ? (s(), x("div", j, [
+          d("p", O, [
+            T(l(o.value[0]) + " ", 1),
+            d("span", U, '"' + l(t.confirmationText) + '"', 1),
+            T(" " + l(o.value[1] ? o.value[1] : ""), 1)
+          ]),
+          P(N, {
+            modelValue: n.value,
+            "onUpdate:modelValue": a[0] || (a[0] = (r) => n.value = r),
+            "aria-label": `${o.value[0]}'${t.confirmationText}'${o.value[1] ? o.value[1] : ""}`,
+            autocapitalize: "off",
+            autocomplete: "off",
+            "data-testid": "confirmation-input",
+            error: i.value,
+            "error-message": t.errorMessage,
+            onKeydown: S(E(k, ["prevent"]), ["enter"])
+          }, null, 8, ["modelValue", "aria-label", "error", "error-message", "onKeydown"])
+        ])) : B("", !0)
+      ]),
+      _: 2
+    }, [
+      m.title ? {
+        name: "title",
+        fn: p(() => [
+          y(e.$slots, "title", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["action-button-appearance", "action-button-disabled", "action-button-text", "cancel-button-appearance", "cancel-button-disabled", "cancel-button-text", "input-autofocus", "title", "visible"]));
+  }
+});
+export {
+  G as default
+};