@kiva/kv-components 6.5.0 → 6.7.0

package/dist/vue/KvCartPill.js

@@ -1,6 +1,6 @@
-import { toRefs as n, computed as a, openBlock as i, createElementBlock as p, normalizeClass as u, renderSlot as c, createElementVNode as m, toDisplayString as f } from "vue";
-import w from "../_virtual/_plugin-vue_export-helper.js";
-const d = {
+import { toRefs as n, computed as a, openBlock as i, createElementBlock as u, normalizeClass as p, renderSlot as c, createElementVNode as m, toDisplayString as f } from "vue";
+import d from "../_virtual/_plugin-vue_export-helper.js";
+const w = {
   props: {
     borrowerName: {
       type: String,
@@ -17,35 +17,41 @@ const d = {
     isCloseNextMilestone: {
       type: Boolean,
       default: !1
+    },
+    customMessage: {
+      type: String,
+      default: ""
     }
   },
-  setup(t) {
+  setup(e) {
     const {
       borrowerName: o,
-      milestonesNumber: e,
-      isCloseNextMilestone: l
-    } = n(t);
+      milestonesNumber: t,
+      isCloseNextMilestone: s
+    } = n(e);
     return {
       pillCopy: a(() => {
-        if (l.value)
+        if (e.customMessage)
+          return e.customMessage;
+        if (s.value)
           return "You’re close to your next milestone!";
-        const s = e.value > 1 ? `${e.value} of your milestones` : "your next milestone";
-        return o.value ? `Supporting ${o.value} will hit ${s}!` : "Supporting this loan achieves a milestone!";
+        const l = t.value > 1 ? `${t.value} of your milestones` : "your next milestone";
+        return o.value ? `Supporting ${o.value} will hit ${l}!` : "Supporting this loan achieves a milestone!";
       })
     };
   }
 }, y = { class: "tw-text-wrap" };
-function x(t, o, e, l, r, s) {
-  return i(), p("div", {
-    class: u(["tw-w-max tw-flex tw-items-center tw-gap-1 tw-px-1 tw-py-0.5 tw-rounded", {
-      "tw-text-small tw-bg-secondary": e.showBg
+function g(e, o, t, s, r, l) {
+  return i(), u("div", {
+    class: p(["tw-w-max tw-flex tw-items-center tw-gap-1 tw-px-1 tw-py-0.5 tw-rounded", {
+      "tw-text-small tw-bg-secondary": t.showBg
     }])
   }, [
-    c(t.$slots, "icon"),
-    m("p", y, f(l.pillCopy), 1)
+    c(e.$slots, "icon"),
+    m("p", y, f(s.pillCopy), 1)
   ], 2);
 }
-const v = /* @__PURE__ */ w(d, [["render", x]]);
+const v = /* @__PURE__ */ d(w, [["render", g]]);
 export {
   v as default
 };

package/dist/vue/KvUserAvatar.js

@@ -1,8 +1,12 @@
-import { toRefs as f, computed as o, openBlock as n, createElementBlock as s, normalizeClass as r, createElementVNode as i, toDisplayString as h, createCommentVNode as v } from "vue";
-import { isLegacyPlaceholderAvatar as g, randomizedUserAvatarClass as y } from "../utils/imageUtils.js";
-import _ from "../_virtual/_plugin-vue_export-helper.js";
-const x = {
+import { toRefs as h, ref as v, computed as d, resolveComponent as y, openBlock as n, createElementBlock as o, normalizeClass as i, createElementVNode as s, createBlock as _, createCommentVNode as f, withDirectives as L, vShow as S, toDisplayString as C } from "vue";
+import { isLegacyPlaceholderAvatar as x, randomizedUserAvatarClass as k } from "../utils/imageUtils.js";
+import A from "./KvLoadingPlaceholder.js";
+import F from "../_virtual/_plugin-vue_export-helper.js";
+const U = {
   name: "KvUserAvatar",
+  components: {
+    KvLoadingPlaceholder: A
+  },
   props: {
     /**
      * The name of the lender
@@ -26,74 +30,86 @@ const x = {
       default: !1
     }
   },
-  setup(w) {
+  setup(m) {
     const {
       lenderName: l,
-      lenderImageUrl: e,
-      isSmall: t
-    } = f(w), m = o(() => l.value === "" && e.value === "" || l.value === "Anonymous"), c = () => {
-      const a = t != null && t.value ? "tw-w-3 tw-h-3 tw-text-h4" : "tw-w-6 tw-h-6 tw-text-h2";
-      return `${y()} ${a}`;
-    }, d = o(() => {
+      lenderImageUrl: t,
+      isSmall: e
+    } = h(m), r = v(!0), c = d(() => l.value === "" && t.value === "" || l.value === "Anonymous"), w = () => {
+      const a = e != null && e.value ? "tw-w-3 tw-h-3 tw-text-h4" : "tw-w-6 tw-h-6 tw-text-h2";
+      return `${k()} ${a}`;
+    }, u = d(() => {
       var a;
-      return ((a = e == null ? void 0 : e.value) == null ? void 0 : a.split("/").pop()) ?? "";
-    }), u = o(() => {
+      return ((a = t == null ? void 0 : t.value) == null ? void 0 : a.split("/").pop()) ?? "";
+    }), g = d(() => {
       var a;
       return (a = l == null ? void 0 : l.value) == null ? void 0 : a.substring(0, 1).toUpperCase();
     });
     return {
-      isAnonymousUser: m,
-      avatarClass: c,
-      imageFilename: d,
-      lenderNameFirstLetter: u,
-      isLegacyPlaceholderAvatar: g
+      isAnonymousUser: c,
+      avatarClass: w,
+      imageFilename: u,
+      lenderNameFirstLetter: g,
+      isLegacyPlaceholderAvatar: x,
+      isLoading: r,
+      onImgLoad: () => {
+        r.value = !1;
+      }
     };
   }
-}, C = { key: 1 }, S = ["src"], A = { class: "tw-self-center" };
-function F(w, l, e, t, m, c) {
-  return n(), s("div", {
-    class: r(["data-hj-suppress tw-flex", { "tw-w-3": e.isSmall, "tw-w-6": !e.isSmall }])
+}, H = { key: 1 }, b = ["src"], B = { class: "tw-self-center" };
+function I(m, l, t, e, r, c) {
+  const w = y("kv-loading-placeholder");
+  return n(), o("div", {
+    class: i(["data-hj-suppress tw-flex", { "tw-w-3": t.isSmall, "tw-w-6": !t.isSmall }])
   }, [
-    t.isAnonymousUser ? (n(), s("div", {
+    e.isAnonymousUser ? (n(), o("div", {
       key: 0,
-      class: r(["tw-rounded-full tw-bg-brand tw-inline-flex tw-align-center tw-justify-center", { "tw-w-3 tw-h-3": e.isSmall, "tw-w-6 tw-h-6": !e.isSmall }])
+      class: i(["tw-rounded-full tw-bg-brand tw-inline-flex tw-align-center tw-justify-center", { "tw-w-3 tw-h-3": t.isSmall, "tw-w-6 tw-h-6": !t.isSmall }])
     }, [
-      (n(), s("svg", {
-        class: r(["tw-h-full tw-text-brand", { "tw-w-3 tw-h-3": e.isSmall }]),
+      (n(), o("svg", {
+        class: i(["tw-h-full tw-text-brand", { "tw-w-3 tw-h-3": t.isSmall }]),
         width: "25",
         height: "37",
         viewBox: "0 0 25 37",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
-      }, l[0] || (l[0] = [
-        i("path", {
+      }, l[1] || (l[1] = [
+        s("path", {
           d: "M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z",
           fill: "white"
         }, null, -1),
-        i("path", {
+        s("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),
-        i("path", {
+        s("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)
       ]), 2))
-    ], 2)) : !t.isLegacyPlaceholderAvatar(t.imageFilename) && t.imageFilename ? (n(), s("div", C, [
-      i("img", {
-        src: e.lenderImageUrl,
+    ], 2)) : !e.isLegacyPlaceholderAvatar(e.imageFilename) && e.imageFilename ? (n(), o("div", H, [
+      e.isLoading ? (n(), _(w, {
+        key: 0,
+        class: i(["!tw-rounded-full", { "!tw-w-3 !tw-h-3": t.isSmall, "!tw-w-6 !tw-h-6": !t.isSmall }])
+      }, null, 8, ["class"])) : f("", !0),
+      L(s("img", {
+        src: t.lenderImageUrl,
         alt: "Image of lender",
-        class: r(["tw-rounded-full tw-inline-block", { "tw-w-3 tw-h-3": e.isSmall, "tw-w-6 tw-h-6": !e.isSmall }])
-      }, null, 10, S)
-    ])) : t.isLegacyPlaceholderAvatar(t.imageFilename) || !t.imageFilename ? (n(), s("div", {
+        class: i(["tw-rounded-full tw-inline-block", { "tw-w-3 tw-h-3": t.isSmall, "tw-w-6 tw-h-6": !t.isSmall }]),
+        onLoad: l[0] || (l[0] = (u) => e.onImgLoad())
+      }, null, 42, b), [
+        [S, !e.isLoading]
+      ])
+    ])) : e.isLegacyPlaceholderAvatar(e.imageFilename) || !e.imageFilename ? (n(), o("div", {
       key: 2,
-      class: r(["tw-rounded-full tw-inline-flex tw-align-center tw-justify-center", t.avatarClass()])
+      class: i(["tw-rounded-full tw-inline-flex tw-align-center tw-justify-center", e.avatarClass()])
     }, [
-      i("span", A, h(t.lenderNameFirstLetter), 1)
-    ], 2)) : v("", !0)
+      s("span", B, C(e.lenderNameFirstLetter), 1)
+    ], 2)) : f("", !0)
   ], 2);
 }
-const b = /* @__PURE__ */ _(x, [["render", F]]);
+const K = /* @__PURE__ */ F(U, [["render", I]]);
 export {
-  b as default
+  K as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.5.0",
+  "version": "6.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -107,5 +107,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "d7bbbf5fc30ed4b8c955c8603b6784e36f143344"
+  "gitHead": "cd2c1146ba70de5cde2dd547181a3e4489c627d3"
 }