@kiva/kv-components 6.6.0 → 6.8.0

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.6.0",
+  "version": "6.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -107,5 +107,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "640523fa07c1542647510ed746713061bb595ded"
+  "gitHead": "f3c26f5415ac8b9bd051eb8624aec077a7b89440"
 }