@kiva/kv-components 10.6.1 → 10.8.0

package/dist/utils/loanUseFit.d.ts

@@ -0,0 +1,5 @@
+export declare const READ_MORE_CLASS = "kv-loan-use-read-more";
+export declare const overflows: (statement: HTMLElement) => boolean;
+export declare const findStatementTail: (statement: HTMLElement) => ChildNode;
+export declare const trimStatementToFit: (statement: HTMLElement) => void;
+export declare const fitStatement: (statement: HTMLElement, html: string) => void;

package/dist/utils/loanUseFit.js

@@ -0,0 +1,40 @@
+const S = "kv-loan-use-read-more";
+const l = (e) => e.scrollHeight > e.clientHeight + 1, a = (e) => {
+  var t;
+  return e.nodeType === Node.TEXT_NODE && !!((t = e.textContent) != null && t.trim());
+}, u = (e) => {
+  const t = Array.from(e.childNodes), o = e.querySelector(`.${S}`), n = o ? t.indexOf(o) : t.length;
+  return t.slice(0, n).reverse().find(a) ?? null;
+}, h = (e) => {
+  const t = u(e);
+  if (!t) return;
+  const o = t.textContent ?? "", n = /^\s/.test(o) ? " " : "", s = o.trim().split(/\s+/), d = (r) => {
+    const x = s.slice(0, r).join(" ").replace(/[,;:]$/, "");
+    t.textContent = `${n}${x}… `;
+  };
+  let i = 1, c = s.length - 1, f = 1;
+  for (; i <= c; ) {
+    const r = Math.floor((i + c) / 2);
+    d(r), l(e) ? c = r - 1 : (f = r, i = r + 1);
+  }
+  d(f);
+}, p = (e, t) => {
+  if (e.innerHTML = t, !l(e)) return;
+  const o = e.querySelector(`.${S}`);
+  if (o) {
+    if (o.remove(), !l(e)) {
+      const n = u(e);
+      n && (n.textContent = (n.textContent ?? "").trimEnd());
+      return;
+    }
+    e.innerHTML = t;
+  }
+  h(e);
+};
+export {
+  S as READ_MORE_CLASS,
+  u as findStatementTail,
+  p as fitStatement,
+  l as overflows,
+  h as trimStatementToFit
+};

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-330ff302]:hover,.loan-card-use[data-v-330ff302]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-330ff302]{text-decoration-line:underline}.loan-card-progress[data-v-330ff302]:hover,.loan-card-progress[data-v-330ff302]:focus{text-decoration-line:none}.loan-card-use-text-light-detailed[data-v-330ff302] p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.loan-card-cta[data-v-330ff302] form,.loan-card-cta[data-v-330ff302] fieldset,.loan-card-cta[data-v-330ff302] .tw-w-full,.loan-card-cta[data-v-330ff302] button{display:flex!important;height:2.5rem!important;max-height:2.5rem!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-330ff302] .tw-inline-flex{height:2.5rem!important;max-height:2.5rem!important;min-height:2.5rem!important}[data-v-330ff302] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-330ff302] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-330ff302] div[role=progressbar]{background-color:#d9d9d9}.light-detailed-progress-group[data-v-330ff302] p:first-of-type{margin-bottom:.5rem}
+.loan-card-use[data-v-6313c6b8]:hover,.loan-card-use[data-v-6313c6b8]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-6313c6b8]{text-decoration-line:underline}.loan-card-progress[data-v-6313c6b8]:hover,.loan-card-progress[data-v-6313c6b8]:focus{text-decoration-line:none}.loan-card-use-text-light-detailed[data-v-6313c6b8] p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.loan-card-cta[data-v-6313c6b8] form,.loan-card-cta[data-v-6313c6b8] fieldset,.loan-card-cta[data-v-6313c6b8] .tw-w-full,.loan-card-cta[data-v-6313c6b8] button{display:flex!important;height:2.5rem!important;max-height:2.5rem!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-6313c6b8] .tw-inline-flex{height:2.5rem!important;max-height:2.5rem!important;min-height:2.5rem!important}[data-v-6313c6b8] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-6313c6b8] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-6313c6b8] div[role=progressbar]{background-color:#d9d9d9}.light-detailed-progress-group[data-v-6313c6b8] p:first-of-type{margin-bottom:.5rem}

package/dist/vue/KvCompactLoanCard.js

@@ -1,6 +1,6 @@
 import D from "./KvCompactLoanCard.script.js";
 import { KV_COMPACT_LOAN_CARD_FRAGMENT as gt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as ft } from "./KvCompactLoanCard.script.js";
-import { resolveComponent as h, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as g, createElementVNode as r, normalizeStyle as _, createBlock as d, resolveDynamicComponent as k, withCtx as f, Fragment as s, toDisplayString as w, withModifiers as R, renderList as u } from "vue";
+import { resolveComponent as h, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as g, createElementVNode as r, normalizeStyle as x, createBlock as d, resolveDynamicComponent as k, withCtx as f, Fragment as s, toDisplayString as w, withModifiers as R, renderList as u } from "vue";
 import "./KvCompactLoanCard.css";
 import B from "../_virtual/_plugin-vue_export-helper.js";
 const S = ["aria-busy"], G = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, U = {
@@ -32,7 +32,7 @@ const S = ["aria-busy"], G = { class: "tw-flex tw-flex-col tw-items-start tw-w-f
   class: "tw-flex-1 tw-min-w-0",
   style: { "max-width": "6.5rem" }
 }, at = ["value"], ot = { class: "tw-flex-1 tw-min-w-0" }, nt = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
-function lt(b, n, e, t, rt, x) {
+function lt(b, n, e, t, rt, _) {
   var V;
   const v = h("kv-material-icon"), m = h("kv-loading-placeholder"), P = h("kv-borrower-image"), C = h("kv-loan-tag"), L = h("kv-loan-use"), M = h("kv-loan-callouts"), y = h("kv-loan-progress-group"), N = h("kv-select"), A = h("kv-lend-cta");
   return a(), l("div", {
@@ -60,7 +60,7 @@ function lt(b, n, e, t, rt, x) {
           "!tw-gap-1": e.showLightView || t.isLightDetailedVariant,
           "!tw-gap-1.5 md:!tw-gap-2.5": t.isPostGoalVariant
         }]),
-        style: _(t.customStyle)
+        style: x(t.customStyle)
       }, [
         t.isLoading ? (a(), d(m, {
           key: 0,
@@ -70,7 +70,7 @@ function lt(b, n, e, t, rt, x) {
             "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
             "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
           }),
-          style: _(t.borrowerImageStyle)
+          style: x(t.borrowerImageStyle)
         }, null, 8, ["class", "style"])) : (a(), l("div", U, [
           (a(), d(k(t.tag), {
             to: t.readMorePath,
@@ -88,7 +88,7 @@ function lt(b, n, e, t, rt, x) {
                   "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
                   "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
                 }]),
-                style: _(t.borrowerImageStyle),
+                style: x(t.borrowerImageStyle),
                 alt: `Photo of ${t.borrowerName}`,
                 "aspect-ratio": 1,
                 "default-image": { width: 200, faceZoom: 50 },
@@ -234,7 +234,7 @@ function lt(b, n, e, t, rt, x) {
                 ]))), 128))
               ])) : (a(), l("div", {
                 key: 1,
-                class: c(["tw-w-full tw-overflow-hidden", { "!tw--mt-1": e.showTags && x.hasMatchingInfo && e.showLightView }])
+                class: c(["tw-w-full tw-overflow-hidden", { "!tw--mt-1": e.showTags && _.hasMatchingInfo && e.showLightView }])
               }, [
                 i(L, {
                   use: t.loanUse,
@@ -247,8 +247,9 @@ function lt(b, n, e, t, rt, x) {
                   country: t.formattedLocation,
                   "show-read-more": e.showLightView,
                   "truncate-words-number": e.truncateWordsNumber,
+                  "max-lines": e.loanUseMaxLines,
                   class: "tw-text-small tw-leading-tight"
-                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model", "country", "show-read-more", "truncate-words-number"])
+                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model", "country", "show-read-more", "truncate-words-number", "max-lines"])
               ], 2))
             ]),
             _: 1
@@ -318,7 +319,7 @@ function lt(b, n, e, t, rt, x) {
               t.handleSelectedAmount
             ],
             "aria-label": "Lend amount",
-            disabled: !t.amountOptions.length || x.isInBasket,
+            disabled: !t.amountOptions.length || _.isInBasket,
             class: "amount-dropdown"
           }, {
             default: f(() => [
@@ -410,7 +411,7 @@ function lt(b, n, e, t, rt, x) {
     ], 2)
   ], 10, S);
 }
-const mt = /* @__PURE__ */ B(D, [["render", lt], ["__scopeId", "data-v-330ff302"]]);
+const mt = /* @__PURE__ */ B(D, [["render", lt], ["__scopeId", "data-v-6313c6b8"]]);
 export {
   gt as KV_COMPACT_LOAN_CARD_FRAGMENT,
   ft as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvCompactLoanCard.script.js

@@ -200,6 +200,18 @@ const d = {
       type: Number,
       default: 0
     },
+    /**
+     * Opt-in line cap for the loan use statement. Unset, the light view behaves as before: a 4-line
+     * CSS clamp plus the `truncateWordsNumber` word cut. Set, a statement that runs past the cap is
+     * trimmed so "… read more" stays visible; one that fills the cap on its own is shown whole
+     * without the link. The `light-detailed` variant always clamps to 3 lines and ignores this prop.
+     */
+    loanUseMaxLines: {
+      type: Number,
+      default: null,
+      validator: (e) => e === null || e > 0
+      // 0 would hide the whole statement
+    },
     showRefreshButton: {
       type: Boolean,
       default: !1
@@ -236,8 +248,8 @@ const d = {
       distributionModel: v,
       formattedLocation: g,
       fundraisingPercent: B,
-      hasProgressData: _,
-      imageHash: N,
+      hasProgressData: N,
+      imageHash: _,
       isLoading: T,
       loanAmount: f,
       loanBorrowerCount: L,
@@ -245,9 +257,9 @@ const d = {
       loanStatus: y,
       loanUse: A,
       readMorePath: R,
-      tag: F,
+      tag: M,
       unreservedAmount: u,
-      sharesAvailable: M
+      sharesAvailable: F
     } = Z(e), { clickReadMore: K } = ee(e, o), P = a(() => c.value ? void 0 : { width: "100px", height: "100px" }), D = a(() => {
       if (!e.website)
         return "";
@@ -269,7 +281,7 @@ const d = {
         loanStatus: y.value,
         loanUse: A.value
       });
-    }), O = a(() => i.value.borrowerNameWithCountry), U = a(() => i.value.loanUsePrefixStart), V = a(() => i.value.loanUsePrefixEnd), x = a(() => i.value.statementTitle), I = a(() => i.value.visibleUseStatement), C = a(() => {
+    }), U = a(() => i.value.borrowerNameWithCountry), O = a(() => i.value.loanUsePrefixStart), V = a(() => i.value.loanUsePrefixEnd), x = a(() => i.value.statementTitle), I = a(() => i.value.visibleUseStatement), C = a(() => {
       var r;
       const t = parseFloat(u.value);
       if (!t) return [];
@@ -310,14 +322,14 @@ const d = {
       amountOptions: C,
       borrowerImageStyle: P,
       borrowerName: h,
-      borrowerNameWithCountry: O,
+      borrowerNameWithCountry: U,
       lightDetailedAmount: G,
       distributionModel: v,
       formattedLocation: g,
       formattedWebsite: D,
       fundraisingPercent: B,
-      hasProgressData: _,
-      imageHash: N,
+      hasProgressData: N,
+      imageHash: _,
       isLightDetailedVariant: s,
       isLoading: T,
       isPostGoalVariant: m,
@@ -327,15 +339,15 @@ const d = {
       loanStatus: y,
       loanUse: A,
       loanUsePrefixEnd: V,
-      loanUsePrefixStart: U,
+      loanUsePrefixStart: O,
       mdiLink: J,
       mdiCached: z,
       mdiArrowRight: H,
       readMorePath: R,
       shouldShowRefreshButton: w,
-      tag: F,
+      tag: M,
       unreservedAmount: u,
-      sharesAvailable: M,
+      sharesAvailable: F,
       selectedAmount: l,
       statementTitle: x,
       customStyle: E,

package/dist/vue/KvCompactLoanCard.vue.d.ts

@@ -132,6 +132,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    loanUseMaxLines: {
+        type: NumberConstructor;
+        default: any;
+        validator: (value: number | null) => boolean;
+    };
     showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -326,6 +331,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    loanUseMaxLines: {
+        type: NumberConstructor;
+        default: any;
+        validator: (value: number | null) => boolean;
+    };
     showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -377,6 +387,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     website: string;
     showLoanUse: boolean;
     showLightView: boolean;
+    loanUseMaxLines: number;
     showRefreshButton: boolean;
     customAmountLent: string;
 }, {}, {
@@ -503,13 +514,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: NumberConstructor;
             default: number;
         };
+        maxLines: {
+            type: NumberConstructor;
+            default: any;
+            validator: (value: number | null) => boolean;
+        };
     }>, {}, {}, {
+        hasMaxLines(): boolean;
+        fitsReadMore(): boolean;
         helpLanguage(): "helps" | "helped";
         isDirect(): boolean;
         whySpecialSentence(): string;
         nameSpan(): string;
         loanUse(): string;
-    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {
+        fitReadMore(): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         anonymizationLevel: {
             type: StringConstructor;
             default: string;
@@ -570,6 +590,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: NumberConstructor;
             default: number;
         };
+        maxLines: {
+            type: NumberConstructor;
+            default: any;
+            validator: (value: number | null) => boolean;
+        };
     }>> & Readonly<{}>, {
         name: string;
         use: string;
@@ -586,6 +611,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         useIndicativeHelpText: boolean;
         showReadMore: boolean;
         truncateWordsNumber: number;
+        maxLines: number;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         icon: {

package/dist/vue/KvImageUpload.css

@@ -1 +1 @@
-.image-upload-icon[data-v-ea802cf6]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-ea802cf6]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}
+.image-upload-icon[data-v-373dd692]{background-color:#ffffffbf;border-radius:9px;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.image-upload-icon--circle[data-v-373dd692]{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 4px 0 rgb(0 0 0 / .08);--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

package/dist/vue/KvImageUpload.js

@@ -1,72 +1,85 @@
-import p from "./KvImageUpload.script.js";
-import { resolveComponent as f, openBlock as i, createElementBlock as n, createElementVNode as a, normalizeStyle as g, normalizeClass as l, renderSlot as b, createVNode as c, withModifiers as w, createCommentVNode as m } from "vue";
+import v from "./KvImageUpload.script.js";
+import { resolveComponent as f, openBlock as t, createElementBlock as r, createElementVNode as i, normalizeStyle as b, normalizeClass as l, renderSlot as c, createVNode as s, toDisplayString as p, withModifiers as m, createCommentVNode as w } from "vue";
 import "./KvImageUpload.css";
-import u from "../_virtual/_plugin-vue_export-helper.js";
-const v = { class: "tw-flex tw-flex-col" }, h = ["src", "alt"], C = ["accept", "aria-label"];
-function k(d, t, s, e, I, _) {
-  const r = f("kv-material-icon");
-  return i(), n("div", v, [
-    a("div", {
-      class: l(["kv-image-upload tw-relative", e.shapeClass]),
-      style: g(e.containerStyle)
+import D from "../_virtual/_plugin-vue_export-helper.js";
+const C = { class: "tw-flex tw-flex-col" }, k = ["src", "alt"], y = { class: "tw-text-label" }, I = ["accept", "aria-label"];
+function h(n, o, d, e, u, O) {
+  const g = f("kv-material-icon");
+  return t(), r("div", C, [
+    i("div", {
+      class: l(["kv-image-upload tw-relative", [e.shapeClass, { "kv-image-upload--dragging": e.isDraggingOver }]]),
+      style: b(e.containerStyle),
+      onDragenter: o[3] || (o[3] = (...a) => e.onDragEnter && e.onDragEnter(...a)),
+      onDragover: o[4] || (o[4] = (...a) => e.onDragOver && e.onDragOver(...a)),
+      onDragleave: o[5] || (o[5] = (...a) => e.onDragLeave && e.onDragLeave(...a)),
+      onDrop: o[6] || (o[6] = (...a) => e.onDrop && e.onDrop(...a))
     }, [
-      e.previewImage ? (i(), n("img", {
+      e.previewImage ? (t(), r("img", {
         key: 0,
         src: e.previewImage,
-        alt: s.imageAlt,
+        alt: d.imageAlt,
         class: l(["tw-w-full tw-h-full tw-object-cover", e.shapeClass])
-      }, null, 10, h)) : b(d.$slots, "fallback-image", { key: 1 }, () => [
-        a("div", {
+      }, null, 10, k)) : c(n.$slots, "fallback-image", {
+        key: 1,
+        isDraggingOver: e.isDraggingOver
+      }, () => [
+        i("div", {
           class: l(["kv-image-upload__placeholder tw-w-full tw-h-full tw-bg-eco-green-1 tw-p-0.5", e.shapeClass])
         }, [
-          a("div", {
-            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed tw-border-black", e.shapeClass])
+          i("div", {
+            class: l(["tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-0.5 tw-w-full tw-h-full tw-border-2 tw-border-dashed", [e.shapeClass, e.isDraggingOver ? "tw-border-action" : "tw-border-black"]])
           }, [
-            c(r, {
+            s(g, {
               icon: e.mdiCameraPlusOutline,
               class: "tw-w-3.5"
             }, null, 8, ["icon"]),
-            t[3] || (t[3] = a("span", { class: "tw-text-label" }, " Add a photo ", -1))
+            i("span", y, p(e.isDraggingOver ? "Drop to upload" : "Add a photo"), 1)
           ], 2)
         ], 2)
       ], !0),
-      a("input", {
+      i("input", {
         ref: "fileInput",
         type: "file",
         accept: e.acceptAttr,
         "aria-label": e.inputLabel,
         class: "tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",
-        onChange: t[0] || (t[0] = (...o) => e.handleFileChange && e.handleFileChange(...o))
-      }, null, 40, C),
-      e.previewImage || s.showEditIcon ? (i(), n("button", {
+        onChange: o[0] || (o[0] = (...a) => e.handleFileChange && e.handleFileChange(...a))
+      }, null, 40, I),
+      e.previewImage || d.showEditIcon ? (t(), r("button", {
         key: 2,
-        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        class: l(["image-upload-icon edit-icon tw-absolute tw-bottom-1 tw-right-1 tw-p-1 tw-z-1", { "image-upload-icon--circle": e.isCircle }]),
         type: "button",
         "aria-hidden": "true",
         tabindex: "-1",
-        onClick: t[1] || (t[1] = w((...o) => e.openFileInput && e.openFileInput(...o), ["stop"]))
+        onClick: o[1] || (o[1] = m((...a) => e.openFileInput && e.openFileInput(...a), ["stop"]))
       }, [
-        c(r, {
+        s(g, {
           icon: e.mdiPencil,
           class: "tw-w-2"
         }, null, 8, ["icon"])
-      ], 2)) : m("", !0),
-      e.previewImage ? (i(), n("button", {
+      ], 2)) : w("", !0),
+      e.previewImage ? (t(), r("button", {
         key: 3,
-        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-10", { "image-upload-icon--circle": e.isCircle }]),
+        class: l(["image-upload-icon remove-icon tw-absolute tw-top-1 tw-right-1 tw-p-1 tw-z-1", { "image-upload-icon--circle": e.isCircle }]),
         type: "button",
         "aria-label": "Remove Image",
-        onClick: t[2] || (t[2] = w((...o) => e.removeImage && e.removeImage(...o), ["stop"]))
+        onClick: o[2] || (o[2] = m((...a) => e.removeImage && e.removeImage(...a), ["stop"]))
       }, [
-        c(r, {
+        s(g, {
           icon: e.mdiClose,
           class: "tw-w-2"
         }, null, 8, ["icon"])
-      ], 2)) : m("", !0)
-    ], 6)
+      ], 2)) : w("", !0),
+      e.isDraggingOver && e.previewImage && n.$slots["drag-overlay"] ? (t(), r("div", {
+        key: 4,
+        class: l(["tw-absolute tw-inset-0 tw-z-2 tw-pointer-events-none", e.shapeClass])
+      }, [
+        c(n.$slots, "drag-overlay", {}, void 0, !0)
+      ], 2)) : w("", !0)
+    ], 38)
   ]);
 }
-const A = /* @__PURE__ */ u(p, [["render", k], ["__scopeId", "data-v-ea802cf6"]]);
+const F = /* @__PURE__ */ D(v, [["render", h], ["__scopeId", "data-v-373dd692"]]);
 export {
-  A as default
+  F as default
 };

package/dist/vue/KvImageUpload.script.js

@@ -1,10 +1,10 @@
-import { toRefs as S, ref as u, watch as x, computed as l } from "vue";
-import { mdiCameraPlusOutline as F, mdiClose as w, mdiPencil as I } from "@mdi/js";
-import C from "./KvMaterialIcon.js";
-import { DEFAULT_ACCEPTED_IMAGE_TYPES as b, validateImageFile as R, cropResizeImageToDataUrl as T } from "../utils/imageUtils.js";
-const U = {
+import { toRefs as T, ref as f, watch as w, computed as o } from "vue";
+import { mdiCameraPlusOutline as E, mdiClose as I, mdiPencil as C } from "@mdi/js";
+import b from "./KvMaterialIcon.js";
+import { DEFAULT_ACCEPTED_IMAGE_TYPES as R, validateImageFile as z, cropResizeImageToDataUrl as A } from "../utils/imageUtils.js";
+const H = {
   components: {
-    KvMaterialIcon: C
+    KvMaterialIcon: b
   },
   props: {
     /**
@@ -27,8 +27,8 @@ const U = {
     shape: {
       type: String,
       default: "square",
-      validator(e) {
-        return ["square", "circle"].includes(e);
+      validator(a) {
+        return ["square", "circle"].includes(a);
       }
     },
     /**
@@ -59,7 +59,7 @@ const U = {
      */
     acceptedFileTypes: {
       type: Array,
-      default: () => [...b]
+      default: () => [...R]
     },
     /**
      * Whether to show the edit (pencil) affordance in the blank state, before an image is
@@ -92,59 +92,85 @@ const U = {
      */
     "file-error"
   ],
-  setup(e, { emit: r }) {
-    const { imageUrl: c } = S(e), a = u(c.value || ""), s = u(null);
-    x(c, (t) => {
-      a.value = t || "";
+  setup(a, { emit: s }) {
+    const { imageUrl: d } = T(a), n = f(d.value || ""), m = f(null), c = f(!1);
+    let l = 0;
+    w(d, (e) => {
+      n.value = e || "";
     });
-    const m = l(() => e.shape === "circle"), d = l(() => m.value ? "tw-rounded-full" : "tw-rounded"), p = l(() => e.acceptedFileTypes.join(",")), f = l(() => a.value ? "Change image" : "Upload image"), g = l(() => ({
-      aspectRatio: String(e.aspectRatio),
-      maxHeight: `${e.previewSize}px`,
-      maxWidth: `${e.previewSize * e.aspectRatio}px`
-    })), v = () => {
-      var t;
-      (t = s.value) == null || t.click();
-    }, y = () => {
-      a.value = "", r("file-removed");
-    }, h = async (t) => {
-      const { valid: o, error: i } = R(t, {
-        maxSizeMb: e.maxSizeMb,
-        acceptedFileTypes: e.acceptedFileTypes
+    const p = o(() => a.shape === "circle"), v = o(() => p.value ? "tw-rounded-full" : "tw-rounded"), y = o(() => a.acceptedFileTypes.join(",")), D = o(() => n.value ? "Change image" : "Upload image"), h = o(() => ({
+      aspectRatio: String(a.aspectRatio),
+      maxHeight: `${a.previewSize}px`,
+      maxWidth: `${a.previewSize * a.aspectRatio}px`
+    })), x = () => {
+      var e;
+      (e = m.value) == null || e.click();
+    }, F = () => {
+      n.value = "", s("file-removed");
+    }, g = async (e) => {
+      const { valid: t, error: r } = z(e, {
+        maxSizeMb: a.maxSizeMb,
+        acceptedFileTypes: a.acceptedFileTypes
       });
-      if (!o && i) {
-        r("file-error", i);
+      if (!t && r) {
+        s("file-error", r);
         return;
       }
       try {
-        a.value = await T(t, {
-          aspectRatio: e.aspectRatio,
-          maxDimension: e.maxDimension
-        }), r("file-uploaded", { file: t });
+        n.value = await A(e, {
+          aspectRatio: a.aspectRatio,
+          maxDimension: a.maxDimension
+        }), s("file-uploaded", { file: e });
       } catch {
-        r("file-error", { type: "other", message: "Failed to read file" });
+        s("file-error", { type: "other", message: "Failed to read file" });
       }
+    }, S = (e) => {
+      var i;
+      const t = e.target, r = (i = t.files) == null ? void 0 : i[0];
+      r && (g(r), t.value = "");
+    }, u = (e) => {
+      var t;
+      return Array.from(((t = e.dataTransfer) == null ? void 0 : t.types) ?? []).includes("Files");
     };
     return {
-      mdiPencil: I,
-      mdiClose: w,
-      mdiCameraPlusOutline: F,
-      fileInput: s,
-      previewImage: a,
-      isCircle: m,
-      shapeClass: d,
-      acceptAttr: p,
-      inputLabel: f,
-      containerStyle: g,
-      openFileInput: v,
-      removeImage: y,
-      handleFileChange: (t) => {
-        var n;
-        const o = t.target, i = (n = o.files) == null ? void 0 : n[0];
-        i && (h(i), o.value = "");
+      mdiPencil: C,
+      mdiClose: I,
+      mdiCameraPlusOutline: E,
+      fileInput: m,
+      previewImage: n,
+      isCircle: p,
+      isDraggingOver: c,
+      shapeClass: v,
+      acceptAttr: y,
+      inputLabel: D,
+      containerStyle: h,
+      openFileInput: x,
+      removeImage: F,
+      handleFileChange: S,
+      onDragEnter: (e) => {
+        u(e) && (l += 1, c.value = !0);
+      },
+      onDragOver: (e) => {
+        if (!u(e))
+          return;
+        e.preventDefault();
+        const { dataTransfer: t } = e;
+        t && (t.dropEffect = "copy");
+      },
+      onDragLeave: (e) => {
+        u(e) && (l = Math.max(0, l - 1), l === 0 && (c.value = !1));
+      },
+      onDrop: (e) => {
+        var r, i;
+        if (!u(e))
+          return;
+        e.preventDefault(), l = 0, c.value = !1;
+        const t = (i = (r = e.dataTransfer) == null ? void 0 : r.files) == null ? void 0 : i[0];
+        t && g(t);
       }
     };
   }
 };
 export {
-  U as default
+  H as default
 };

package/dist/vue/KvLoanUse.css

@@ -0,0 +1 @@
+.kv-loan-use-lines[data-v-534d5054]{-webkit-line-clamp:var(--kv-loan-use-lines);line-clamp:var(--kv-loan-use-lines)}

package/dist/vue/KvLoanUse.js

@@ -1,16 +1,18 @@
-import o from "./KvLoanUse.script.js";
-import { KV_LOAN_USE_FRAGMENT as E } from "./KvLoanUse.script.js";
-import { openBlock as r, createElementBlock as n } from "vue";
-import t from "../_virtual/_plugin-vue_export-helper.js";
-const c = ["innerHTML"];
-function s(_, p, a, l, m, e) {
-  return r(), n("p", {
-    class: "tw-line-clamp-4",
+import a from "./KvLoanUse.script.js";
+import { KV_LOAN_USE_FRAGMENT as k } from "./KvLoanUse.script.js";
+import { openBlock as s, createElementBlock as o, normalizeStyle as r, normalizeClass as t } from "vue";
+import "./KvLoanUse.css";
+import l from "../_virtual/_plugin-vue_export-helper.js";
+const i = ["innerHTML"];
+function c(_, m, n, p, d, e) {
+  return s(), o("p", {
+    class: t(["tw-line-clamp-4", { "kv-loan-use-lines": e.hasMaxLines }]),
+    style: r(e.hasMaxLines ? { "--kv-loan-use-lines": n.maxLines } : void 0),
     innerHTML: e.loanUse
-  }, null, 8, c);
+  }, null, 14, i);
 }
-const u = /* @__PURE__ */ t(o, [["render", s]]);
+const v = /* @__PURE__ */ l(a, [["render", c], ["__scopeId", "data-v-534d5054"]]);
 export {
-  E as KV_LOAN_USE_FRAGMENT,
-  u as default
+  k as KV_LOAN_USE_FRAGMENT,
+  v as default
 };

package/dist/vue/KvLoanUse.script.js

@@ -1,7 +1,8 @@
-import u from "graphql-tag";
+import h from "graphql-tag";
 import l from "numeral";
-import { truncateStringByWords as i } from "../utils/loanUtils.js";
-const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) => e.charAt(0).toLowerCase() + e.slice(1), m = u`
+import { truncateStringByWords as a } from "../utils/loanUtils.js";
+import { fitStatement as d, READ_MORE_CLASS as r } from "../utils/loanUseFit.js";
+const o = "direct", u = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) => e.charAt(0).toLowerCase() + e.slice(1), w = h`
 	fragment KvLoanUse on LoanBasic {
 		id
 		anonymizationLevel
@@ -13,7 +14,7 @@ const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) =
 		distributionModel
 		whySpecial
 	}
-`, f = {
+`, S = {
   name: "KvLoanUse",
   props: {
     anonymizationLevel: {
@@ -42,7 +43,7 @@ const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) =
     },
     distributionModel: {
       type: String,
-      default: r
+      default: o
     },
     whySpecial: {
       type: String,
@@ -76,14 +77,33 @@ const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) =
     truncateWordsNumber: {
       type: Number,
       default: 0
+    },
+    /**
+     * Opt-in line cap. Unset, the statement keeps the plain 4-line CSS clamp and none of the fit
+     * logic runs. Set, the clamp follows this number and, with `showReadMore`, a statement that runs
+     * past the cap is trimmed word by word after render so "… read more" ends the last visible line;
+     * one that fills the cap on its own is shown whole without the link.
+     */
+    maxLines: {
+      type: Number,
+      default: null,
+      validator: (e) => e === null || e > 0
+      // 0 would hide the whole statement
     }
   },
   computed: {
+    hasMaxLines() {
+      return this.maxLines !== null;
+    },
+    // The fit only applies to an opted-in cap with a link to fit; hideBorrowerDetails never renders one.
+    fitsReadMore() {
+      return this.hasMaxLines && this.showReadMore && !this.hideBorrowerDetails;
+    },
     helpLanguage() {
       return this.status === "fundraising" || this.status === "inactive" || this.status === "reviewed" ? "helps" : "helped";
     },
     isDirect() {
-      return this.distributionModel === r;
+      return this.distributionModel === o;
     },
     whySpecialSentence() {
       return this.whySpecial ? ` This loan is special because ${t(this.whySpecial)}` : "";
@@ -95,19 +115,49 @@ const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) =
       if (this.anonymizationLevel === "full" || this.use.length === 0)
         return "For the borrower's privacy, this loan has been made anonymous.";
       if (this.hideBorrowerDetails)
-        return `${o(this.helpLanguage)} ${t(this.use)}${this.whySpecialSentence}`;
+        return `${u(this.helpLanguage)} ${t(this.use)}${this.whySpecialSentence}`;
       if (this.hideLoanAmount) {
         const n = this.useIndicativeHelpText ? this.helpLanguage : "Help";
-        let a = `${o(n)} ${this.nameSpan} ${t(this.use)} ${this.whySpecialSentence}`;
-        return this.showReadMore && (a = `${i(a, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), a;
+        let i = `${u(n)} ${this.nameSpan} ${t(this.use)} ${this.whySpecialSentence}`;
+        return this.showReadMore && (i = `${a(i, this.truncateWordsNumber)} <span class="${r} tw-text-action tw-underline">read more</span>`), i;
       }
       const e = this.borrowerCount > 1;
       let s = `${l(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${e ? "a member of " : ""}${this.nameSpan} ${this.isDirect ? `${this.helpLanguage} ` : ""}${t(this.use)}${this.whySpecialSentence}`;
-      return this.showReadMore && (s = `${i(s, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), s;
+      return this.showReadMore && (s = `${a(s, this.truncateWordsNumber)} <span class="${r} tw-text-action tw-underline">read more</span>`), s;
+    }
+  },
+  watch: {
+    loanUse: {
+      // Runs after Vue has written the full statement to the DOM but within the same flush, so the
+      // fitted text is in place before the browser paints.
+      handler() {
+        this.fitReadMore();
+      },
+      flush: "post"
+    }
+  },
+  mounted() {
+    if (this.fitsReadMore) {
+      if (typeof ResizeObserver > "u") {
+        this.fitReadMore();
+        return;
+      }
+      this.resizeObserver = new ResizeObserver(() => this.fitReadMore()), this.resizeObserver.observe(this.$el);
+    }
+  },
+  beforeUnmount() {
+    var e;
+    (e = this.resizeObserver) == null || e.disconnect();
+  },
+  methods: {
+    fitReadMore() {
+      if (!this.fitsReadMore) return;
+      const e = this.$el;
+      !e || e.clientHeight === 0 || d(e, this.loanUse);
     }
   }
 };
 export {
-  m as KV_LOAN_USE_FRAGMENT,
-  f as default
+  w as KV_LOAN_USE_FRAGMENT,
+  S as default
 };

package/dist/vue/KvLoanUse.vue.d.ts

@@ -60,13 +60,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    maxLines: {
+        type: NumberConstructor;
+        default: any;
+        validator: (value: number | null) => boolean;
+    };
 }>, {}, {}, {
+    hasMaxLines(): boolean;
+    fitsReadMore(): boolean;
     helpLanguage(): "helps" | "helped";
     isDirect(): boolean;
     whySpecialSentence(): string;
     nameSpan(): string;
     loanUse(): string;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {
+    fitReadMore(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     anonymizationLevel: {
         type: StringConstructor;
         default: string;
@@ -127,6 +136,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    maxLines: {
+        type: NumberConstructor;
+        default: any;
+        validator: (value: number | null) => boolean;
+    };
 }>> & Readonly<{}>, {
     name: string;
     use: string;
@@ -143,5 +157,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     useIndicativeHelpText: boolean;
     showReadMore: boolean;
     truncateWordsNumber: number;
+    maxLines: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.6.1",
+  "version": "10.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -116,5 +116,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "a55163da474c53d2958af25e6b68684b3f1922db"
+  "gitHead": "3bf4173c32eeef15fa827502a287df142343b445"
 }