@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvUserAvatar.js

@@ -1,153 +1,71 @@
-import { toRefs as B, ref as m, computed as a, onMounted as P, resolveComponent as V, openBlock as i, createElementBlock as c, normalizeClass as b, createElementVNode as r, createCommentVNode as f, withDirectives as N, createVNode as z, vShow as D, normalizeStyle as y, toDisplayString as F } from "vue";
-import { randomizedUserAvatarClass as M, isLegacyPlaceholderAvatar as p } from "../utils/imageUtils.js";
-import S from "./KvLoadingPlaceholder.js";
-import E from "../_virtual/_plugin-vue_export-helper.js";
-const K = {
-  name: "KvUserAvatar",
-  components: {
-    KvLoadingPlaceholder: S
-  },
-  props: {
-    /**
-     * The name of the lender
-     */
-    lenderName: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The image of the lender
-     */
-    lenderImageUrl: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Whether to render a smaller avatar
-     */
-    isSmall: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether to use a css variable for the avatar url before data is loaded
-     */
-    showCssPlaceholder: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(w) {
-    const {
-      lenderName: t,
-      lenderImageUrl: s,
-      isSmall: e,
-      showCssPlaceholder: d
-    } = B(w), u = m(!0), l = m(null), v = m(null), C = a(() => !d.value && t.value === "" && s.value === "" || t.value === "Anonymous"), _ = a(() => {
-      const o = e != null && e.value ? "tw-font-sans tw-font-normal" : "tw-font-serif";
-      return `${M(t.value)} ${o}`;
-    }), A = a(() => e != null && e.value ? "0 0 27 27" : "0 0 27.5 27.5"), x = a(() => {
-      var n;
-      if (d.value)
-        return !0;
-      const o = ((n = s == null ? void 0 : s.value) == null ? void 0 : n.split("/").pop()) ?? "";
-      return o && !p(o);
-    }), I = a(() => {
-      var o;
-      return (o = t == null ? void 0 : t.value) == null ? void 0 : o.substring(0, 1).toUpperCase();
-    }), g = () => {
-      u.value = !1;
-    }, U = (o, n = 1e4) => new Promise((k, H) => {
-      const L = Date.now() + n, h = () => {
-        !o || o.complete ? k(o) : Date.now() > L ? H(new Error(`Timeout: ${o.src}`)) : setTimeout(h, 50);
-      };
-      h();
-    });
-    return P(async () => {
-      const o = l.value;
-      try {
-        await U(o), g();
-      } catch (n) {
-        console.log(n.message);
-      }
-    }), {
-      isAnonymousUser: C,
-      avatarClass: _,
-      userHasImage: x,
-      lenderNameFirstLetter: I,
-      letterViewBox: A,
-      isLegacyPlaceholderAvatar: p,
-      isImageLoading: u,
-      onImgLoad: g,
-      imageRef: l,
-      userAvatar: v
-    };
-  }
-}, R = {
+import d from "./KvUserAvatar2.js";
+import { resolveComponent as m, openBlock as t, createElementBlock as r, normalizeClass as c, createElementVNode as l, createCommentVNode as n, withDirectives as w, createVNode as f, vShow as v, normalizeStyle as a, toDisplayString as h } from "vue";
+import g from "../_virtual/_plugin-vue_export-helper.js";
+const u = {
   key: 0,
   class: "tw-h-3/4",
   viewBox: "0 0 25 37",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, T = ["src"], Z = ["viewBox"], j = {
+}, y = ["src"], _ = ["viewBox"], x = {
   x: "50%",
   y: "55%",
   "dominant-baseline": "middle",
   "text-anchor": "middle"
 };
-function q(w, t, s, e, d, u) {
-  const l = V("kv-loading-placeholder");
-  return i(), c("div", {
+function C(k, o, s, e, H, A) {
+  const i = m("kv-loading-placeholder");
+  return t(), r("div", {
     ref: "userAvatar",
-    class: b(["data-hj-suppress tw-flex tw-items-center tw-justify-center tw-rounded-full tw-overflow-hidden", {
+    class: c(["data-hj-suppress tw-flex tw-items-center tw-justify-center tw-rounded-full tw-overflow-hidden", {
       "tw-bg-brand": e.isAnonymousUser,
       [e.avatarClass]: !e.isAnonymousUser
     }])
   }, [
-    e.isAnonymousUser ? (i(), c("svg", R, t[1] || (t[1] = [
-      r("path", {
+    e.isAnonymousUser ? (t(), r("svg", u, o[1] || (o[1] = [
+      l("path", {
         d: "M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z",
         fill: "white"
       }, null, -1),
-      r("path", {
+      l("path", {
         d: "M10.1143 23.2751C21.9428 23.2751 24.6857 13.2126 24.6857 11.4626H23.6571C11.8286 11.4626 9.08569 21.5251 9.08569 23.2751H10.1143Z",
         fill: "white"
       }, null, -1),
-      r("path", {
+      l("path", {
         d: "M9.08569 24.2376C9.08569 26.0751 11.1428 36.3126 23.8285 36.3126H24.8571C24.8571 34.4751 22.8 24.2376 10.1143 24.2376H9.08569Z",
         fill: "white"
       }, null, -1)
-    ]))) : f("", !0),
-    N(z(l, null, null, 512), [
-      [D, !e.isAnonymousUser && e.userHasImage && e.isImageLoading]
+    ]))) : n("", !0),
+    w(f(i, null, null, 512), [
+      [v, !e.isAnonymousUser && e.userHasImage && e.isImageLoading]
     ]),
-    !e.isAnonymousUser && e.userHasImage ? (i(), c("div", {
+    !e.isAnonymousUser && e.userHasImage ? (t(), r("div", {
       key: 1,
       class: "tw-w-full tw-h-full",
-      style: y(s.showCssPlaceholder ? { display: "var(--user-avatar-display, block)" } : {
+      style: a(s.showCssPlaceholder ? { display: "var(--user-avatar-display, block)" } : {
         display: e.isImageLoading ? "none" : "block"
       })
     }, [
-      r("img", {
+      l("img", {
         ref: "imageRef",
         src: s.lenderImageUrl,
         alt: "Image of lender",
         class: "tw-w-full",
-        style: y(s.showCssPlaceholder ? { content: "var(--user-avatar)" } : {}),
-        onLoad: t[0] || (t[0] = (v) => e.onImgLoad())
-      }, null, 44, T)
-    ], 4)) : f("", !0),
-    !e.isAnonymousUser && !e.userHasImage ? (i(), c("svg", {
+        style: a(s.showCssPlaceholder ? { content: "var(--user-avatar)" } : {}),
+        onLoad: o[0] || (o[0] = (I) => e.onImgLoad())
+      }, null, 44, y)
+    ], 4)) : n("", !0),
+    !e.isAnonymousUser && !e.userHasImage ? (t(), r("svg", {
       key: 2,
       class: "tw-w-full tw-h-full",
       fill: "currentColor",
       viewBox: e.letterViewBox
     }, [
-      r("text", j, F(e.lenderNameFirstLetter), 1)
-    ], 8, Z)) : f("", !0)
+      l("text", x, h(e.lenderNameFirstLetter), 1)
+    ], 8, _)) : n("", !0)
   ], 2);
 }
-const W = /* @__PURE__ */ E(K, [["render", q]]);
+const b = /* @__PURE__ */ g(d, [["render", C]]);
 export {
-  W as default
+  b as default
 };

package/dist/vue/KvUserAvatar.vue.d.ts

@@ -0,0 +1,55 @@
+import { isLegacyPlaceholderAvatar } from '../utils/imageUtils';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    lenderName: {
+        type: StringConstructor;
+        default: string;
+    };
+    lenderImageUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    isSmall: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCssPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    isAnonymousUser: import('vue').ComputedRef<boolean>;
+    avatarClass: import('vue').ComputedRef<string>;
+    userHasImage: import('vue').ComputedRef<boolean>;
+    lenderNameFirstLetter: import('vue').ComputedRef<string>;
+    letterViewBox: import('vue').ComputedRef<"0 0 27 27" | "0 0 27.5 27.5">;
+    isLegacyPlaceholderAvatar: typeof isLegacyPlaceholderAvatar;
+    isImageLoading: import('vue').Ref<boolean, boolean>;
+    onImgLoad: () => void;
+    imageRef: import('vue').Ref<any, any>;
+    userAvatar: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    lenderName: {
+        type: StringConstructor;
+        default: string;
+    };
+    lenderImageUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    isSmall: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCssPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    lenderName: string;
+    lenderImageUrl: string;
+    isSmall: boolean;
+    showCssPlaceholder: boolean;
+}, {}, {
+    KvLoadingPlaceholder: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvUserAvatar2.js

@@ -0,0 +1,88 @@
+import { toRefs as I, ref as r, computed as s, onMounted as U } from "vue";
+import { randomizedUserAvatarClass as B, isLegacyPlaceholderAvatar as f } from "../utils/imageUtils.js";
+import F from "./KvLoadingPlaceholder.js";
+const z = {
+  name: "KvUserAvatar",
+  components: {
+    KvLoadingPlaceholder: F
+  },
+  props: {
+    /**
+     * The name of the lender
+     */
+    lenderName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The image of the lender
+     */
+    lenderImageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether to render a smaller avatar
+     */
+    isSmall: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether to use a css variable for the avatar url before data is loaded
+     */
+    showCssPlaceholder: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(p) {
+    const {
+      lenderName: t,
+      lenderImageUrl: n,
+      isSmall: o,
+      showCssPlaceholder: l
+    } = I(p), u = r(!0), c = r(null), d = r(null), v = s(() => !l.value && t.value === "" && n.value === "" || t.value === "Anonymous"), g = s(() => {
+      const e = o != null && o.value ? "tw-font-sans tw-font-normal" : "tw-font-serif";
+      return `${B(t.value)} ${e}`;
+    }), w = s(() => o != null && o.value ? "0 0 27 27" : "0 0 27.5 27.5"), y = s(() => {
+      var a;
+      if (l.value)
+        return !0;
+      const e = ((a = n == null ? void 0 : n.value) == null ? void 0 : a.split("/").pop()) ?? "";
+      return e && !f(e);
+    }), h = s(() => {
+      var e;
+      return (e = t == null ? void 0 : t.value) == null ? void 0 : e.substring(0, 1).toUpperCase();
+    }), i = () => {
+      u.value = !1;
+    }, A = (e, a = 1e4) => new Promise((C, L) => {
+      const P = Date.now() + a, m = () => {
+        !e || e.complete ? C(e) : Date.now() > P ? L(new Error(`Timeout: ${e.src}`)) : setTimeout(m, 50);
+      };
+      m();
+    });
+    return U(async () => {
+      const e = c.value;
+      try {
+        await A(e), i();
+      } catch (a) {
+        console.log(a.message);
+      }
+    }), {
+      isAnonymousUser: v,
+      avatarClass: g,
+      userHasImage: y,
+      lenderNameFirstLetter: h,
+      letterViewBox: w,
+      isLegacyPlaceholderAvatar: f,
+      isImageLoading: u,
+      onImgLoad: i,
+      imageRef: c,
+      userAvatar: d
+    };
+  }
+};
+export {
+  z as default
+};

package/dist/vue/KvUtilityMenu.js

@@ -1,86 +1,10 @@
-import { ref as r, onMounted as f, onBeforeUnmount as g, resolveComponent as h, resolveDirective as y, openBlock as s, createElementBlock as d, normalizeClass as u, withDirectives as m, withModifiers as b, createVNode as k, createElementVNode as S, normalizeStyle as C, renderSlot as M, vShow as z } from "vue";
-import { mdiDotsVertical as w } from "@mdi/js";
-import _ from "./KvMaterialIcon.js";
-import B from "../_virtual/_plugin-vue_export-helper.js";
-const p = {
-  name: "KvUtilityMenu",
-  components: {
-    KvMaterialIcon: _
-  },
-  props: {
-    analyticsCategory: {
-      type: String,
-      default: "event-tracking"
-    },
-    buttonBorderClass: {
-      type: String,
-      default: ""
-    },
-    buttonRadiusClass: {
-      type: String,
-      default: "tw-rounded"
-    },
-    buttonSize: {
-      type: String,
-      default: "large",
-      validator(n) {
-        return [
-          "small",
-          "medium",
-          "large"
-        ].includes(n);
-      }
-    },
-    icon: {
-      type: String,
-      default: w
-    },
-    menuBorderClass: {
-      type: String,
-      default: "tw-border tw-border-tertiary"
-    },
-    menuRadiusClass: {
-      type: String,
-      default: "tw-rounded"
-    },
-    menuPosition: {
-      type: String,
-      default: "left-aligned",
-      validator(n) {
-        return [
-          "left-aligned",
-          "right-aligned"
-        ].includes(n);
-      }
-    }
-  },
-  emits: [
-    "kv-utility-menu-clicked"
-  ],
-  setup(n, { emit: i }) {
-    const t = r(null), e = r(!1), c = r(null), l = (a) => {
-      t.value && !t.value.contains(a.target) && (e.value = !1);
-    }, o = () => {
-      e.value = !e.value, i("kv-utility-menu-clicked", { open: e.value });
-    };
-    return f(() => {
-      document.addEventListener("click", l);
-    }), g(() => {
-      document.removeEventListener("click", l);
-    }), {
-      handleMenuClickOutside: l,
-      handleMenuAnchorClick: o,
-      mdiDotsVertical: w,
-      menuAnchor: t,
-      menuOpen: e,
-      optionsMenu: c
-    };
-  }
-};
-function A(n, i, t, e, c, l) {
-  const o = h("KvMaterialIcon"), a = y("kv-track-event");
-  return s(), d("div", {
-    class: u(["tw-relative utility-menu-wrapper", [
+import m from "./KvUtilityMenu2.js";
+import { resolveComponent as s, resolveDirective as d, openBlock as l, createElementBlock as o, normalizeClass as n, withDirectives as a, withModifiers as h, createVNode as v, createElementVNode as b, normalizeStyle as f, renderSlot as g, vShow as _ } from "vue";
+import k from "../_virtual/_plugin-vue_export-helper.js";
+function z(r, i, t, e, C, S) {
+  const w = s("KvMaterialIcon"), c = d("kv-track-event");
+  return l(), o("div", {
+    class: n(["tw-relative utility-menu-wrapper", [
       {
         "tw-w-4 tw-h-4": t.buttonSize === "small",
         "tw-w-5 tw-h-5": t.buttonSize === "medium",
@@ -88,9 +12,9 @@ function A(n, i, t, e, c, l) {
       }
     ]])
   }, [
-    m((s(), d("button", {
+    a((l(), o("button", {
       ref: "menuAnchor",
-      class: u(["tw-absolute tw-bg-white tw-flex tw-items-center tw-justify-center menu-trigger", [
+      class: n(["tw-absolute tw-bg-white tw-flex tw-items-center tw-justify-center menu-trigger", [
         t.buttonBorderClass,
         t.buttonRadiusClass,
         {
@@ -99,30 +23,30 @@ function A(n, i, t, e, c, l) {
           "tw-w-6 tw-h-6": t.buttonSize === "large"
         }
       ]]),
-      onClick: i[0] || (i[0] = b((...v) => e.handleMenuAnchorClick && e.handleMenuAnchorClick(...v), ["stop"]))
+      onClick: i[0] || (i[0] = h((...u) => e.handleMenuAnchorClick && e.handleMenuAnchorClick(...u), ["stop"]))
     }, [
-      k(o, { icon: t.icon }, null, 8, ["icon"])
+      v(w, { icon: t.icon }, null, 8, ["icon"])
     ], 2)), [
-      [a, [t.analyticsCategory, "click", "utility-menu"]]
+      [c, [t.analyticsCategory, "click", "utility-menu"]]
     ]),
-    m(S("div", {
+    a(b("div", {
       ref: "optionsMenu",
-      class: u(["tw-absolute tw-bg-white tw-z-1 tw-shadow-lg vertical-menu", [
+      class: n(["tw-absolute tw-bg-white tw-z-1 tw-shadow-lg vertical-menu", [
         t.menuBorderClass,
         t.menuRadiusClass,
         {
           "tw-right-0": t.menuPosition === "right-aligned"
         }
       ]]),
-      style: C(`width: 236px; top: ${t.buttonSize === "small" ? "2.5rem" : "3.5rem"};`)
+      style: f(`width: 236px; top: ${t.buttonSize === "small" ? "2.5rem" : "3.5rem"};`)
     }, [
-      M(n.$slots, "default")
+      g(r.$slots, "default")
     ], 6), [
-      [z, e.menuOpen]
+      [_, e.menuOpen]
     ])
   ], 2);
 }
-const D = /* @__PURE__ */ B(p, [["render", A]]);
+const B = /* @__PURE__ */ k(m, [["render", z]]);
 export {
-  D as default
+  B as default
 };

package/dist/vue/KvUtilityMenu.vue.d.ts

@@ -0,0 +1,104 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    analyticsCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonBorderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonRadiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonSize: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuBorderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuRadiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuPosition: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>, {
+    handleMenuClickOutside: (event: any) => void;
+    handleMenuAnchorClick: () => void;
+    mdiDotsVertical: string;
+    menuAnchor: import('vue').Ref<any, any>;
+    menuOpen: import('vue').Ref<boolean, boolean>;
+    optionsMenu: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "kv-utility-menu-clicked"[], "kv-utility-menu-clicked", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    analyticsCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonBorderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonRadiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonSize: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuBorderClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuRadiusClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    menuPosition: {
+        type: StringConstructor;
+        default: string;
+        validator(value: string): boolean;
+    };
+}>> & Readonly<{
+    "onKv-utility-menu-clicked"?: (...args: any[]) => any;
+}>, {
+    icon: string;
+    analyticsCategory: string;
+    buttonBorderClass: string;
+    buttonRadiusClass: string;
+    buttonSize: string;
+    menuBorderClass: string;
+    menuRadiusClass: string;
+    menuPosition: string;
+}, {}, {
+    KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        icon: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvUtilityMenu2.js

@@ -0,0 +1,81 @@
+import { ref as l, onMounted as s, onBeforeUnmount as c } from "vue";
+import { mdiDotsVertical as r } from "@mdi/js";
+import m from "./KvMaterialIcon.js";
+const v = {
+  name: "KvUtilityMenu",
+  components: {
+    KvMaterialIcon: m
+  },
+  props: {
+    analyticsCategory: {
+      type: String,
+      default: "event-tracking"
+    },
+    buttonBorderClass: {
+      type: String,
+      default: ""
+    },
+    buttonRadiusClass: {
+      type: String,
+      default: "tw-rounded"
+    },
+    buttonSize: {
+      type: String,
+      default: "large",
+      validator(t) {
+        return [
+          "small",
+          "medium",
+          "large"
+        ].includes(t);
+      }
+    },
+    icon: {
+      type: String,
+      default: r
+    },
+    menuBorderClass: {
+      type: String,
+      default: "tw-border tw-border-tertiary"
+    },
+    menuRadiusClass: {
+      type: String,
+      default: "tw-rounded"
+    },
+    menuPosition: {
+      type: String,
+      default: "left-aligned",
+      validator(t) {
+        return [
+          "left-aligned",
+          "right-aligned"
+        ].includes(t);
+      }
+    }
+  },
+  emits: [
+    "kv-utility-menu-clicked"
+  ],
+  setup(t, { emit: a }) {
+    const n = l(null), e = l(!1), u = l(null), i = (d) => {
+      n.value && !n.value.contains(d.target) && (e.value = !1);
+    }, o = () => {
+      e.value = !e.value, a("kv-utility-menu-clicked", { open: e.value });
+    };
+    return s(() => {
+      document.addEventListener("click", i);
+    }), c(() => {
+      document.removeEventListener("click", i);
+    }), {
+      handleMenuClickOutside: i,
+      handleMenuAnchorClick: o,
+      mdiDotsVertical: r,
+      menuAnchor: n,
+      menuOpen: e,
+      optionsMenu: u
+    };
+  }
+};
+export {
+  v as default
+};