@kiva/kv-components 4.8.5 → 5.0.0

package/dist/vue/KvPagination.js

@@ -0,0 +1,163 @@
+import { mdiChevronLeft as k, mdiChevronRight as f } from "@mdi/js";
+import v from "./KvMaterialIcon.js";
+import { resolveComponent as C, openBlock as s, createElementBlock as l, createElementVNode as i, normalizeClass as o, createVNode as g, Fragment as m, renderList as P, createTextVNode as p, createCommentVNode as w, toDisplayString as y } from "vue";
+import x from "../_virtual/_plugin-vue_export-helper.js";
+const _ = {
+  name: "KvPagination",
+  components: {
+    KvMaterialIcon: v
+  },
+  props: {
+    limit: {
+      type: Number,
+      required: !0,
+      validator: (t) => t > 0
+    },
+    total: {
+      type: Number,
+      required: !0,
+      validator: (t) => t >= 0
+    },
+    offset: {
+      type: Number,
+      default: 0,
+      validator: (t) => t >= 0
+    },
+    extraPages: {
+      type: Number,
+      default: 3,
+      validator: (t) => t > 0
+    },
+    scrollToTop: {
+      type: Boolean,
+      default: !0
+    },
+    kvTrackFunction: {
+      type: Function,
+      default: () => {
+      }
+    },
+    trackEventCategory: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      mdiChevronLeft: k,
+      mdiChevronRight: f
+    };
+  },
+  computed: {
+    current() {
+      const t = Math.ceil(this.offset / this.limit);
+      return t < this.totalPages ? t : 0;
+    },
+    totalPages() {
+      return Math.ceil(this.total / this.limit);
+    },
+    numbers() {
+      if (this.totalPages < this.extraPages + 2)
+        return this.range(0, this.totalPages - 1);
+      const t = [];
+      if ([0, 1, 2].includes(this.current))
+        t.push(...this.range(1, this.extraPages));
+      else if ([this.totalPages - 3, this.totalPages - 2, this.totalPages - 1].includes(this.current))
+        t.push(...this.range(this.totalPages - this.extraPages - 1, this.totalPages - 2));
+      else {
+        const n = Math.floor(this.extraPages / 2);
+        t.push(...this.range(this.current - n, this.current + n));
+      }
+      t[1] !== 2 && t.splice(0, 0, -1);
+      const r = t.length;
+      return t[r - 1] !== this.totalPages - 2 && t.splice(r, 0, -1), t.unshift(0), t.push(this.totalPages - 1), t;
+    }
+  },
+  methods: {
+    range(t, r) {
+      return [...Array(r - t + 1)].map((n, c) => c + t);
+    },
+    isCurrent(t) {
+      return t === this.current;
+    },
+    isEllipsis(t) {
+      return t === -1;
+    },
+    linkClass(t) {
+      return { "tw-text-tertiary": this.isCurrent(t), "tw-pointer-events-none": this.isCurrent(t) };
+    },
+    pageChange(t) {
+      this.scrollToTop && window.scrollTo && window.scrollTo({ top: 0, left: 0, behavior: "smooth" }), this.$emit("page-changed", { pageOffset: t * this.limit });
+    },
+    clickPage(t) {
+      this.pageChange(t), this.kvTrackFunction(this.trackEventCategory, "click", "pagination-number", null, t + 1);
+    },
+    clickPrevious() {
+      const t = this.current - 1;
+      this.pageChange(t), this.kvTrackFunction(this.trackEventCategory, "click", "pagination-previous", null, t + 1);
+    },
+    clickNext() {
+      const t = this.current + 1;
+      this.pageChange(t), this.kvTrackFunction(this.trackEventCategory, "click", "pagination-next", null, t + 1);
+    }
+  }
+}, b = { "aria-label": "Pagination" }, N = {
+  class: "tw-text-center tw-mx-auto tw-my-1.5 tw-flex tw-justify-between tw-items-center",
+  style: { "max-width": "17rem" }
+}, T = ["aria-hidden"], E = ["aria-label", "onClick"], F = {
+  key: 0,
+  class: "tw-sr-only"
+};
+function M(t, r, n, c, u, e) {
+  const h = C("kv-material-icon");
+  return s(), l("nav", b, [
+    i("ul", N, [
+      i("li", null, [
+        i("a", {
+          class: o(["tw-cursor-pointer tw-flex", e.linkClass(0)]),
+          "aria-label": "Previous page",
+          onClick: r[0] || (r[0] = (a) => !e.isCurrent(0) && e.clickPrevious())
+        }, [
+          g(h, {
+            icon: u.mdiChevronLeft,
+            class: "tw-h-4 tw-w-4"
+          }, null, 8, ["icon"]),
+          r[2] || (r[2] = i("span", { class: "tw-sr-only" }, "Previous page", -1))
+        ], 2)
+      ]),
+      (s(!0), l(m, null, P(e.numbers, (a, d) => (s(), l("li", {
+        key: d,
+        "aria-hidden": e.isEllipsis(a)
+      }, [
+        e.isEllipsis(a) ? (s(), l(m, { key: 0 }, [
+          p(" ... ")
+        ], 64)) : (s(), l("a", {
+          key: 1,
+          class: o(["tw-cursor-pointer", e.linkClass(a)]),
+          "aria-label": `Page ${a + 1}`,
+          onClick: (V) => !e.isCurrent(a) && e.clickPage(a)
+        }, [
+          e.isCurrent(a) ? (s(), l("span", F, "You're on page")) : w("", !0),
+          p(" " + y(a + 1), 1)
+        ], 10, E))
+      ], 8, T))), 128)),
+      i("li", null, [
+        i("a", {
+          class: o(["tw-cursor-pointer tw-flex", e.linkClass(e.totalPages ? e.totalPages - 1 : 0)]),
+          "aria-label": "Next page",
+          onClick: r[1] || (r[1] = (a) => e.totalPages && !e.isCurrent(e.totalPages - 1) && e.clickNext())
+        }, [
+          g(h, {
+            icon: u.mdiChevronRight,
+            class: "tw-h-4 tw-w-4"
+          }, null, 8, ["icon"]),
+          r[3] || (r[3] = i("span", { class: "tw-sr-only" }, "Next page", -1))
+        ], 2)
+      ])
+    ])
+  ]);
+}
+const R = /* @__PURE__ */ x(_, [["render", M]]);
+export {
+  R as default
+};

package/dist/vue/KvPieChart.css

@@ -0,0 +1 @@
+.pie-chart svg[data-v-306e6631]{width:20rem;height:20rem}.pie-placeholder[data-v-306e6631],.pie-placeholder div[data-v-306e6631]{width:17.5rem;height:17.5rem}

package/dist/vue/KvPieChart.js

@@ -0,0 +1,166 @@
+import K from "numeral";
+import { toRefs as L, ref as g, computed as h, resolveComponent as R, openBlock as i, createElementBlock as r, createElementVNode as l, createVNode as W, Fragment as V, renderList as X, normalizeStyle as Y, toDisplayString as m, createCommentVNode as F, createTextVNode as D, toRaw as T } from "vue";
+import q from "../utils/Alea.js";
+import G from "./KvLoadingPlaceholder.js";
+/* empty css            */
+import H from "../_virtual/_plugin-vue_export-helper.js";
+function b(p, n, a, e) {
+  return [
+    p + a * Math.cos(e),
+    n + a * Math.sin(e)
+  ];
+}
+const J = {
+  name: "PieChartFigure",
+  components: {
+    KvLoadingPlaceholder: G
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: !0
+    },
+    values: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+    "click"
+  ],
+  setup(p, { emit: n }) {
+    const {
+      values: a
+    } = L(p), e = g(32), y = g(5), d = g(null), s = g(0), t = g(10), f = h(() => d.value ? K(d.value.percent).format("0.00%") : ""), v = h(() => e.value / 2 - y.value / 2 - 2), M = h(() => e.value / 2), z = (c) => {
+      const w = new q("loans", c, "kiva");
+      let u = "#";
+      for (let o = 0; o < 3; o += 1)
+        u += Math.floor(w() * 256).toString(16).padStart(2, "0");
+      return u;
+    }, I = h(() => {
+      const c = [], w = M.value, u = w, o = v.value;
+      let _ = -0.25;
+      for (let x = 0; x < a.value.length; x += 1) {
+        const k = a.value[x], S = _ + k.percent, [B, N] = b(w, u, o, _ * Math.PI * 2);
+        let P = `M ${B},${N} `;
+        if (k.percent > 0.99) {
+          const [A, C] = b(w, u, o, (_ + S) * Math.PI);
+          P += `A ${o},${o} 0 0,1 ${A},${C} `, P += `A ${o},${o} 0 0,1 ${B},${N}`;
+        } else {
+          const [A, C] = b(w, u, o, S * Math.PI * 2), E = k.percent > 0.5 ? 1 : 0;
+          P += `A ${o},${o} 0 ${E},1 ${A},${C}`;
+        }
+        c.push({
+          ...k,
+          path: P,
+          color: z(x)
+        }), _ = S;
+      }
+      return c;
+    }), j = h(() => Math.ceil(I.value.length / t.value));
+    return {
+      svgSize: e,
+      lineWidth: y,
+      activeSlice: d,
+      pageIndex: s,
+      slicesPerPage: t,
+      activeSlicePercent: f,
+      radius: v,
+      center: M,
+      slices: I,
+      pageCount: j,
+      prevPage: () => {
+        s.value > 0 && (s.value -= 1);
+      },
+      nextPage: () => {
+        s.value < j.value - 1 && (s.value += 1);
+      },
+      isSliceActive: (c) => T(d.value) === c,
+      setActiveSlice: (c) => {
+        d.value = c, n("click", c.label);
+      }
+    };
+  }
+}, O = { class: "tw-relative" }, Q = {
+  key: 0,
+  class: "pie-placeholder tw-mt-2.5"
+}, U = { class: "tw-overflow-hidden tw-rounded-full" }, Z = {
+  key: 1,
+  viewBox: "0 0 32 32",
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink"
+}, $ = ["d", "stroke", "stroke-width", "onMouseenter", "onClick"], ee = {
+  key: 2,
+  class: "tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-flex tw-flex-col tw-items-center tw-text-center",
+  style: { "max-width": "8.5rem" }
+}, te = { class: "tw-font-medium tw-line-clamp-4" }, oe = {
+  style: { width: "14rem", height: "85%" },
+  class: "tw-flex tw-flex-col tw-justify-between"
+}, ne = { class: "tw-pl-4 md:tw-pl-0" }, le = ["onMouseenter", "onClick"], ce = { class: "tw-truncate" }, ie = {
+  key: 0,
+  class: "tw-flex tw-justify-center md:tw-justify-start"
+}, re = ["disabled"], ae = ["disabled"];
+function se(p, n, a, e, y, d) {
+  const s = R("kv-loading-placeholder");
+  return i(), r("figure", {
+    class: "pie-chart tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center tw-gap-2",
+    onMouseleave: n[2] || (n[2] = (t) => e.activeSlice = null)
+  }, [
+    l("div", O, [
+      a.loading ? (i(), r("div", Q, [
+        l("div", U, [
+          W(s)
+        ])
+      ])) : (i(), r("svg", Z, [
+        (i(!0), r(V, null, X(e.slices, (t, f) => (i(), r("path", {
+          key: f,
+          class: "tw-origin-center tw-transition-transform",
+          style: Y(e.isSliceActive(t) ? { transform: "scale(1.1)" } : {}),
+          d: t.path,
+          stroke: t.color,
+          "stroke-width": e.lineWidth,
+          fill: "none",
+          onMouseenter: (v) => e.setActiveSlice(t),
+          onClick: (v) => e.setActiveSlice(t)
+        }, null, 44, $))), 128))
+      ])),
+      e.activeSlice ? (i(), r("div", ee, [
+        l("div", te, m(e.activeSlice.label), 1),
+        l("div", null, m(e.activeSlice.value) + " (" + m(e.activeSlicePercent) + ") ", 1)
+      ])) : F("", !0)
+    ]),
+    l("div", oe, [
+      l("ol", ne, [
+        (i(!0), r(V, null, X(e.slices.slice(e.pageIndex * e.slicesPerPage, (e.pageIndex + 1) * e.slicesPerPage), (t, f) => (i(), r("li", {
+          key: f,
+          class: "tw-flex tw-items-center",
+          onMouseenter: (v) => e.setActiveSlice(t),
+          onClick: (v) => e.setActiveSlice(t)
+        }, [
+          l("div", {
+            class: "tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none",
+            style: Y({ backgroundColor: t.color })
+          }, null, 4),
+          l("span", ce, m(t.label), 1)
+        ], 40, le))), 128))
+      ]),
+      e.pageCount > 1 ? (i(), r("div", ie, [
+        l("button", {
+          disabled: e.pageIndex === 0,
+          class: "tw-font-medium tw-p-0.5 disabled:tw-opacity-low",
+          onClick: n[0] || (n[0] = (...t) => e.prevPage && e.prevPage(...t))
+        }, " < ", 8, re),
+        D(" " + m(e.pageIndex + 1) + " / " + m(e.pageCount) + " ", 1),
+        l("button", {
+          disabled: e.pageIndex === e.pageCount - 1,
+          class: "tw-font-medium tw-p-0.5 disabled:tw-opacity-low",
+          onClick: n[1] || (n[1] = (...t) => e.nextPage && e.nextPage(...t))
+        }, " > ", 8, ae)
+      ])) : F("", !0)
+    ])
+  ], 32);
+}
+const xe = /* @__PURE__ */ H(J, [["render", se], ["__scopeId", "data-v-306e6631"]]);
+export {
+  xe as default
+};

package/dist/vue/KvPopper.js

@@ -0,0 +1,132 @@
+import { isTargetElement as o, onBodyTouchstart as i, offBodyTouchstart as n } from "../utils/touchEvents.js";
+import { openBlock as h, createBlock as p, Transition as l, withCtx as a, withDirectives as d, createElementVNode as u, normalizeStyle as c, renderSlot as f, vShow as m } from "vue";
+import v from "../_virtual/_plugin-vue_export-helper.js";
+const y = {
+  name: "KvPopper",
+  props: {
+    controller: {
+      validator(e) {
+        return typeof e == "string" || typeof window == "object" && "HTMLElement" in window && e instanceof HTMLElement;
+      },
+      required: !0
+    },
+    openDelay: { type: Number, default: 0 },
+    closeDelay: { type: Number, default: 200 },
+    // must be defined in our globa/transitions.scss
+    transitionType: { type: String, default: "" },
+    popperPlacement: { type: String, default: "bottom-start" },
+    popperModifiers: { type: Object, default: () => {
+    } }
+  },
+  data() {
+    return {
+      popper: null,
+      popperPromise: null,
+      styles: {},
+      show: !1,
+      timeout: null
+    };
+  },
+  computed: {
+    reference() {
+      return typeof this.controller == "string" ? document.getElementById(this.controller) : this.controller;
+    }
+  },
+  watch: {
+    show(e) {
+      this.reference && this.reference.setAttribute("aria-expanded", e ? "true" : "false"), this.$emit(e ? "show" : "hide");
+    }
+  },
+  mounted() {
+    this.reference.tabIndex = 0, this.attachEvents();
+  },
+  updated() {
+    this.popper && this.popper.scheduleUpdate();
+  },
+  beforeDestroy() {
+    this.removeEvents(), this.popper && this.popper.destroy();
+  },
+  methods: {
+    open() {
+      this.initPopper().then(() => {
+        this.setTimeout(() => {
+          this.show = !0, this.popper.scheduleUpdate(), this.attachBodyEvents();
+        }, this.openDelay);
+      });
+    },
+    close() {
+      this.setTimeout(() => {
+        this.show = !1, this.removeBodyEvents();
+      }, this.closeDelay);
+    },
+    toggle() {
+      this.show ? this.close() : this.open();
+    },
+    update() {
+      this.popper && this.popper.scheduleUpdate();
+    },
+    initPopper() {
+      return this.popper ? Promise.resolve() : this.popperPromise ? this.popperPromise : (this.popperPromise = import("../node_modules/popper.js/dist/esm/popper.js").then(({ default: e }) => {
+        this.popper = new e(this.reference, this.$el, {
+          placement: this.popperPlacement,
+          modifiers: {
+            applyStyle: (t) => {
+              this.styles = t.styles, this.setAttributes(t.attributes);
+            },
+            preventOverflow: {
+              padding: 0
+            },
+            ...this.popperModifiers
+          }
+        });
+      }), this.popperPromise);
+    },
+    bodyTouchHandler(e) {
+      o(e, [this.reference, this.$el]) || (this.show = !1, this.removeBodyEvents());
+    },
+    referenceTapHandler(e) {
+      e.preventDefault(), this.toggle();
+    },
+    attachEvents() {
+      this.reference.addEventListener("mouseover", this.open), this.reference.addEventListener("focus", this.open), this.reference.addEventListener("mouseout", this.close), this.reference.addEventListener("blur", this.close), this.$el.addEventListener("mouseover", this.open), this.$el.addEventListener("mouseout", this.close), this.reference.addEventListener("touchstart", this.referenceTapHandler);
+    },
+    attachBodyEvents() {
+      i(this.bodyTouchHandler);
+    },
+    removeEvents() {
+      this.removeBodyEvents(), this.reference.removeEventListener("touchstart", this.referenceTapHandler), this.reference.removeEventListener("mouseover", this.open), this.reference.removeEventListener("mouseout", this.close), this.$el.removeEventListener("mouseover", this.open), this.$el.removeEventListener("mouseout", this.close);
+    },
+    removeBodyEvents() {
+      n(this.bodyTouchHandler);
+    },
+    setAttributes(e) {
+      Object.keys(e).forEach((t) => {
+        const s = e[t];
+        s === !1 ? this.$el.removeAttribute(t) : this.$el.setAttribute(t, s);
+      });
+    },
+    setTimeout(e, t) {
+      window.clearTimeout(this.timeout), this.timeout = window.setTimeout(e, t);
+    }
+  }
+}, E = ["aria-hidden"];
+function w(e, t, s, b, r, T) {
+  return h(), p(l, { name: s.transitionType }, {
+    default: a(() => [
+      d(u("div", {
+        class: "tw-absolute",
+        style: c(r.styles),
+        "aria-hidden": r.show ? "false" : "true"
+      }, [
+        f(e.$slots, "default")
+      ], 12, E), [
+        [m, r.show]
+      ])
+    ]),
+    _: 3
+  }, 8, ["name"]);
+}
+const g = /* @__PURE__ */ v(y, [["render", w]]);
+export {
+  g as default
+};

package/dist/vue/KvProgressBar.js

@@ -0,0 +1,118 @@
+import { toRefs as f, ref as g, computed as n, onMounted as b, nextTick as y, openBlock as p, createElementBlock as h, normalizeClass as s, createElementVNode as x, normalizeStyle as _ } from "vue";
+import V from "../_virtual/_plugin-vue_export-helper.js";
+const k = {
+  props: {
+    /**
+     * The words to announce to screenreaders describing what this progress represents
+     * e.g., "Percent the loan has funded"
+     * */
+    ariaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The min value of the progress bar
+     * */
+    min: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The max value of the progress bar
+     * */
+    max: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * The current value to display
+     * */
+    value: {
+      type: Number,
+      default: 0,
+      required: !0
+    },
+    /**
+     * Appearance of the progress bar
+     * `primary (default), ghost, danger, caution
+     * */
+    variant: {
+      type: String,
+      default: "primary",
+      validator(a) {
+        return ["primary", "ghost", "danger", "caution"].includes(a);
+      }
+    },
+    /**
+     * Appearance of the progress bar background
+     * `secondary (default), tertiary
+     * */
+    bgVariant: {
+      type: String,
+      default: "secondary",
+      validator(a) {
+        return ["secondary", "tertiary"].includes(a);
+      }
+    }
+  },
+  setup(a) {
+    const {
+      min: r,
+      max: e,
+      value: t,
+      variant: l,
+      bgVariant: u
+    } = f(a), i = g(!1), c = n(() => {
+      const w = (t.value - r.value) / (e.value - r.value) * 100, v = Math.round(w * 10) / 10;
+      return Math.min(Math.max(v, 0), 100);
+    }), d = n(() => {
+      switch (l.value) {
+        case "ghost":
+          return "tw-bg-tertiary";
+        case "danger":
+          return "tw-bg-danger";
+        case "caution":
+          return "tw-bg-caution";
+        default:
+          return "tw-bg-brand";
+      }
+    }), m = n(() => {
+      switch (u.value) {
+        case "tertiary":
+          return "tw-bg-tertiary";
+        default:
+          return "tw-bg-secondary";
+      }
+    }), o = () => {
+      i.value = !0;
+    };
+    return b(async () => {
+      await y(), o();
+    }), {
+      loaded: i,
+      percent: c,
+      animateProgressBar: o,
+      variantClass: d,
+      backgroundVariant: m
+    };
+  }
+}, B = ["aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow"];
+function M(a, r, e, t, l, u) {
+  return p(), h("div", {
+    class: s(["tw-h-1 tw-w-full tw-rounded-full tw-overflow-hidden tw-relative", t.backgroundVariant]),
+    role: "progressbar",
+    "aria-label": e.ariaLabel,
+    "aria-valuemin": e.min,
+    "aria-valuemax": e.max,
+    "aria-valuenow": e.value
+  }, [
+    x("div", {
+      class: s(["tw-h-1 tw-w-full tw-absolute tw--left-full tw-rounded-full tw-transition-all tw-duration-1000 tw-origin-left tw-ease-out", t.variantClass]),
+      style: _({ transform: t.loaded ? `translateX(${t.percent}%)` : "translateX(0)" })
+    }, null, 6)
+  ], 10, B);
+}
+const q = /* @__PURE__ */ V(k, [["render", M]]);
+export {
+  q as default
+};