@kiva/kv-components 10.4.1 → 10.5.1

package/dist/vue/KvWideLoanCard2.js

@@ -1,235 +1,209 @@
-import o from "graphql-tag";
-import { LOAN_CALLOUTS_FRAGMENT as M, LOAN_GEOCODE_FRAGMENT as R, LOAN_PROGRESS_FRAGMENT as B, loanCardComputedProperties as S, loanCardMethods as k, useLocationTruncation as w } from "../utils/loanCard.js";
-import O from "./KvLoanUse.js";
-import D from "./KvBorrowerImage.js";
-import F from "./KvLoanProgressGroup.js";
-import G from "./KvLoanCallouts.js";
-import b from "./KvLendCta.js";
-import P from "./KvLoanBookmark.js";
-import U from "./KvLoanTag.js";
-import V from "./KvMaterialIcon.js";
-import W from "./KvLoadingPlaceholder.js";
-import $ from "./KvTooltip.js";
-import { KV_LEND_CTA_FRAGMENT as z, KV_LEND_CTA_USER_FRAGMENT as I } from "./KvLendCta2.js";
-import { KV_LOAN_TAG_FRAGMENT as q } from "./KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as H } from "./KvLoanBookmark2.js";
-const me = o`
-	fragment KvWideLoanCard on LoanBasic {
-		id
-		image {
-			id
-			hash # for imageHash
-		}
-		name # for borrowerName
-		...KvLendCta
-		...KvLoanTag
-		...KvLoanUse
-		...LoanCallouts
-		...LoanGeocode
-		...LoanProgress
-	}
-	${z}
-	${q}
-	${x}
-	${M}
-	${R}
-	${B}
-`, ue = o`
-	fragment KvWideLoanCardUser on LoanBasic {
-		id
-		...KvLendCtaUser
-		...KvLoanBookmark
-	}
-	${I}
-	${H}
-`, fe = {
-  name: "KvWideLoanCard",
-  components: {
-    KvBorrowerImage: D,
-    KvLoadingPlaceholder: W,
-    KvLoanUse: O,
-    KvLoanProgressGroup: F,
-    KvMaterialIcon: V,
-    KvLendCta: b,
-    KvLoanTag: U,
-    KvLoanCallouts: G,
-    KvLoanBookmark: P,
-    KvTooltip: $
-  },
-  props: {
-    loanId: {
-      type: Number,
-      default: void 0
-    },
-    loan: {
-      type: Object,
-      default: null
-    },
-    customLoanDetails: {
-      type: Boolean,
-      default: !1
-    },
-    showTags: {
-      type: Boolean,
-      default: !1
-    },
-    categoryPageName: {
-      type: String,
-      default: ""
-    },
-    enableFiveDollarsNotes: {
-      type: Boolean,
-      default: !1
-    },
-    isAdding: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    },
-    basketItems: {
-      type: Array,
-      default: () => []
-    },
-    isBookmarked: {
-      type: Boolean,
-      default: !1
-    },
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    photoPath: {
-      type: String,
-      required: !0
-    },
-    showViewLoan: {
-      type: Boolean,
-      default: !1
-    },
-    externalLinks: {
-      type: Boolean,
-      default: !1
-    },
-    route: {
-      type: Object,
-      default: void 0
-    },
-    userBalance: {
-      type: String,
-      default: void 0
-    },
-    getCookie: {
-      type: Function,
-      default: void 0
-    },
-    setCookie: {
-      type: Function,
-      default: void 0
-    },
-    fiveDollarsSelected: {
-      type: Boolean,
-      default: !1
-    },
-    customCallouts: {
-      type: Array,
-      default: () => []
-    },
-    customHref: {
-      type: String,
-      default: ""
-    },
-    enableMultiMatching: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "toggle-bookmark",
-    "add-to-basket"
-  ],
-  setup(e, { emit: a }) {
-    const {
-      allDataLoaded: t,
-      borrowerName: r,
-      city: i,
-      countryName: n,
-      distributionModel: l,
-      formattedLocation: d,
-      fundraisingPercent: s,
-      hasProgressData: m,
-      imageHash: u,
-      isLoading: f,
-      loanAmount: p,
-      loanBorrowerCount: c,
-      loanCallouts: L,
-      loanStatus: g,
-      loanUse: v,
-      mdiMapMarker: _,
-      readMorePath: A,
-      state: y,
-      tag: K,
-      unreservedAmount: N,
-      sharesAvailable: h
-    } = S(e), {
-      clickReadMore: C
-    } = k(e, a), {
-      locationRef: T,
-      isLocationTruncated: E
-    } = w();
-    return {
-      allDataLoaded: t,
-      borrowerName: r,
-      city: i,
-      countryName: n,
-      distributionModel: l,
-      formattedLocation: d,
-      fundraisingPercent: s,
-      hasProgressData: m,
-      imageHash: u,
-      isLoading: f,
-      loanAmount: p,
-      loanBorrowerCount: c,
-      loanCallouts: L,
-      loanStatus: g,
-      loanUse: v,
-      mdiMapMarker: _,
-      readMorePath: A,
-      state: y,
-      tag: K,
-      unreservedAmount: N,
-      sharesAvailable: h,
-      clickReadMore: C,
-      locationRef: T,
-      isLocationTruncated: E
-    };
-  },
-  computed: {
-    cardWidth() {
-      return "374px";
-    },
-    imageAspectRatio() {
-      return 1;
-    },
-    imageDefaultWidth() {
-      return 320;
-    },
-    imageSizes() {
-      return [
-        { width: this.imageDefaultWidth, viewSize: 1024 },
-        { width: this.imageDefaultWidth, viewSize: 768 },
-        { width: 416, viewSize: 480 },
-        { width: 374, viewSize: 414 },
-        { width: 335, viewSize: 375 }
-      ];
-    }
-  }
+import D from "./KvWideLoanCard.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as ee, KV_WIDE_LOAN_CARD_USER_FRAGMENT as te } from "./KvWideLoanCard.js";
+import { resolveComponent as i, openBlock as o, createElementBlock as r, normalizeClass as f, createElementVNode as s, createBlock as n, resolveDynamicComponent as k, withCtx as m, createVNode as d, toDisplayString as h, createTextVNode as N, createCommentVNode as w, Fragment as R, renderList as V } from "vue";
+import "./KvWideLoanCard.css";
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const T = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, E = {
+  key: 1,
+  class: "tw-relative tw-w-full"
+}, I = { key: 0 }, S = {
+  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-text-label tw-flex tw-items-center tw-h-3",
+  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
+}, F = ["id"], W = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, z = { class: "tw-hidden md:tw-inline-block tw-text-title" }, K = { class: "tw-pt-1" }, U = {
+  key: 0,
+  class: "tw-w-full",
+  style: { height: "5.5rem" }
+}, G = { key: 1 }, O = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, j = {
+  key: 0,
+  class: "tw-w-full tw-pt-1 tw-pr-1"
 };
+function H(_, a, t, e, q, g) {
+  const c = i("kv-loading-placeholder"), v = i("kv-borrower-image"), u = i("kv-material-icon"), b = i("kv-tooltip"), x = i("kv-loan-bookmark"), y = i("kv-loan-tag"), L = i("kv-loan-use"), M = i("kv-loan-callouts"), C = i("kv-loan-progress-group"), A = i("kv-lend-cta");
+  return o(), r("div", {
+    class: f(["tw-flex tw-flex-row tw-flex-wrap tw-bg-white tw-rounded tw-w-full tw-pb-1 tw-p-1 tw-gap-1 tw-items-center", { "tw-pointer-events-none": e.isLoading }]),
+    "data-testid": "loan-card",
+    style: { "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }
+  }, [
+    s("div", T, [
+      e.isLoading ? (o(), n(c, {
+        key: 0,
+        class: "tw-mb-1 tw-w-full tw-rounded",
+        style: { height: "15rem" }
+      })) : (o(), r("div", E, [
+        (o(), n(k(e.tag), {
+          to: e.readMorePath,
+          href: e.readMorePath,
+          class: "tw-flex",
+          "aria-label": "Borrower image",
+          onClick: a[0] || (a[0] = (l) => e.clickReadMore("Photo", l))
+        }, {
+          default: m(() => [
+            d(v, {
+              class: "tw-relative tw-w-full tw-bg-black tw-rounded-sm tw-bg-clip-content",
+              alt: `Photo of ${e.borrowerName}`,
+              "aspect-ratio": g.imageAspectRatio,
+              "default-image": { width: g.imageDefaultWidth },
+              hash: e.imageHash,
+              images: g.imageSizes,
+              "photo-path": t.photoPath
+            }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
+            e.countryName ? (o(), r("div", I, [
+              s("p", S, [
+                d(u, {
+                  class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
+                  icon: e.mdiMapMarker
+                }, null, 8, ["icon"]),
+                s("span", {
+                  id: `loan-location-${t.loanId}`,
+                  ref: "locationRef",
+                  class: "tw-truncate tw-min-w-0",
+                  style: { "margin-top": "0.125rem" }
+                }, h(e.formattedLocation), 9, F),
+                e.isLocationTruncated ? (o(), n(b, {
+                  key: 0,
+                  controller: `loan-location-${t.loanId}`,
+                  "max-width": "250px"
+                }, {
+                  default: m(() => [
+                    N(h(e.formattedLocation), 1)
+                  ]),
+                  _: 1
+                }, 8, ["controller"])) : w("", !0)
+              ])
+            ])) : w("", !0)
+          ]),
+          _: 1
+        }, 8, ["to", "href"])),
+        t.isVisitor ? w("", !0) : (o(), n(x, {
+          key: 0,
+          "loan-id": t.loanId,
+          "is-bookmarked": t.isBookmarked,
+          class: "tw-absolute tw-right-1",
+          style: { top: "-6px" },
+          "data-testid": "loan-card-bookmark",
+          onToggleBookmark: a[1] || (a[1] = (l) => _.$emit("toggle-bookmark"))
+        }, null, 8, ["loan-id", "is-bookmarked"]))
+      ]))
+    ]),
+    s("div", W, [
+      s("h3", z, h(e.borrowerName), 1),
+      (o(), n(k(e.tag), {
+        to: e.readMorePath,
+        href: e.readMorePath,
+        class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline",
+        "aria-label": "Loan tag",
+        onClick: a[2] || (a[2] = (l) => e.clickReadMore("Tag", l))
+      }, {
+        default: m(() => [
+          t.showTags && !e.isLoading ? (o(), n(y, {
+            key: 0,
+            loan: t.loan,
+            "enable-multi-matching": t.enableMultiMatching
+          }, null, 8, ["loan", "enable-multi-matching"])) : w("", !0)
+        ]),
+        _: 1
+      }, 8, ["to", "href"])),
+      (o(), n(k(e.tag), {
+        to: e.readMorePath,
+        href: e.readMorePath,
+        class: "loan-card-use tw-no-underline tw-text-primary",
+        "aria-label": "Loan use",
+        onClick: a[3] || (a[3] = (l) => e.clickReadMore("Use", l))
+      }, {
+        default: m(() => [
+          s("div", K, [
+            e.isLoading ? (o(), r("div", U, [
+              (o(!0), r(R, null, V([...Array(4)], (l, P) => (o(), r("div", {
+                key: P,
+                class: "tw-h-2 tw-mb-1"
+              }, [
+                d(c)
+              ]))), 128))
+            ])) : (o(), r("div", G, [
+              d(L, {
+                use: e.loanUse,
+                "loan-amount": e.loanAmount,
+                status: e.loanStatus,
+                "borrower-count": e.loanBorrowerCount,
+                name: e.borrowerName,
+                "distribution-model": e.distributionModel
+              }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
+            ]))
+          ])
+        ]),
+        _: 1
+      }, 8, ["to", "href"])),
+      e.isLoading || typeof e.loanCallouts > "u" ? (o(), n(c, {
+        key: 0,
+        class: "tw-mt-1.5 tw-mb-1",
+        style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
+      })) : (o(), n(M, {
+        key: 1,
+        callouts: e.loanCallouts,
+        class: "loan-callouts tw-my-1.5"
+      }, null, 8, ["callouts"])),
+      s("div", O, [
+        e.hasProgressData ? w("", !0) : (o(), r("div", j, [
+          d(c, {
+            class: "tw-mb-0.5",
+            style: { width: "70%", height: "1.3rem" }
+          }),
+          d(c, {
+            class: "tw-rounded",
+            style: { width: "70%", height: "0.5rem" }
+          })
+        ])),
+        e.sharesAvailable ? (o(), n(k(e.tag), {
+          key: 1,
+          to: e.readMorePath,
+          href: e.readMorePath,
+          class: "loan-card-progress tw-mt-1 tw-flex-grow",
+          "aria-label": "Loan progress",
+          onClick: a[4] || (a[4] = (l) => e.clickReadMore("Progress", l))
+        }, {
+          default: m(() => [
+            d(C, {
+              id: "loanProgress",
+              "money-left": e.unreservedAmount,
+              "progress-percent": e.fundraisingPercent,
+              class: "tw-text-black"
+            }, null, 8, ["money-left", "progress-percent"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])) : w("", !0),
+        e.allDataLoaded ? (o(), n(A, {
+          key: 3,
+          loan: t.loan,
+          "unreserved-amount": e.unreservedAmount,
+          "basket-items": t.basketItems,
+          "is-loading": e.isLoading,
+          "is-adding": t.isAdding,
+          "enable-five-dollars-notes": t.enableFiveDollarsNotes,
+          "five-dollars-selected": t.fiveDollarsSelected,
+          "kv-track-function": t.kvTrackFunction,
+          "show-view-loan": t.showViewLoan,
+          "custom-loan-details": t.customLoanDetails,
+          "external-links": t.externalLinks,
+          route: t.route,
+          "user-balance": t.userBalance,
+          "get-cookie": t.getCookie,
+          "set-cookie": t.setCookie,
+          "is-visitor": t.isVisitor,
+          class: f(["tw-mt-auto tw-self-end", { "tw-flex-grow": !e.sharesAvailable, "tw-flex-shrink-0": e.sharesAvailable }]),
+          onAddToBasket: a[5] || (a[5] = (l) => _.$emit("add-to-basket", l)),
+          onShowLoanDetails: a[6] || (a[6] = (l) => e.clickReadMore("ViewLoan", l))
+        }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "class"])) : (o(), n(c, {
+          key: 2,
+          class: "tw-rounded tw-self-start",
+          style: { width: "9rem", height: "3rem" }
+        }))
+      ])
+    ])
+  ], 2);
+}
+const Z = /* @__PURE__ */ B(D, [["render", H], ["__scopeId", "data-v-de4628d8"]]);
 export {
-  me as KV_WIDE_LOAN_CARD_FRAGMENT,
-  ue as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
-  fe as default
+  ee as KV_WIDE_LOAN_CARD_FRAGMENT,
+  te as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  Z as default
 };

package/dist/vue/KvWwwHeader/KvHeaderLinkBar2.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as c, ref as t, inject as W, computed as d, watch as k, onMounted as $, onUnmounted as j } from "vue";
+import { ref as t, inject as W, computed as d, watch as k, onMounted as $, onUnmounted as j, defineAsyncComponent as c } from "vue";
 import { mdiMenu as z, mdiMagnify as F, mdiChevronDown as V, mdiAccountCircle as q } from "@mdi/js";
 import G from "numeral";
 import J from "@kiva/kv-tokens";

package/dist/vue/KvWwwHeaderBasic/LinkBar2.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as n, inject as N, shallowRef as T, ref as b, provide as f, computed as i } from "vue";
+import { inject as N, shallowRef as T, ref as b, provide as f, computed as i, defineAsyncComponent as n } from "vue";
 import { mdiAccountCircle as I, mdiBriefcase as E, mdiChevronDown as S, mdiMenu as A } from "@mdi/js";
 import h from "numeral";
 import K from "../KvMaterialIcon.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.4.1",
+  "version": "10.5.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./assets/*": "./dist/assets/*.js",
     "./assets/*.js": "./dist/assets/*.js",
@@ -19,6 +20,9 @@
     "./vue/*": "./dist/vue/*.js",
     "./vue/*.js": "./dist/vue/*.js"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kiva/kv-ui-elements.git"
@@ -33,7 +37,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@figma/code-connect": "^1.4.9",
-    "@kiva/kv-tokens": "^5.0.0",
+    "@kiva/kv-tokens": "^5.0.1",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
@@ -112,5 +116,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "b4b0ee68cc95def097ca00ae4bdb56861437087d"
+  "gitHead": "074a5802f62864713f35c7d42c914324c5cd2cc1"
 }