@kiva/kv-components 10.7.0 → 10.9.0

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,12 +590,17 @@ 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;
+        status: string;
         anonymizationLevel: string;
         loanAmount: string;
-        status: string;
         borrowerCount: number;
         distributionModel: string;
         whySpecial: 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/KvDatePicker.vue.d.ts

@@ -58,8 +58,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             onFocus?: (...args: any[]) => any;
             onBlur?: (...args: any[]) => any;
             onOpen?: (...args: any[]) => any;
-            onClosed?: (...args: any[]) => any;
             "onUpdate:model-value"?: (...args: any[]) => any;
+            onClosed?: (...args: any[]) => any;
             "onUpdate:model-timezone-value"?: (...args: any[]) => any;
             "onText-submit"?: (...args: any[]) => any;
             onCleared?: (...args: any[]) => any;
@@ -93,8 +93,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             onFocus?: (...args: any[]) => any;
             onBlur?: (...args: any[]) => any;
             onOpen?: (...args: any[]) => any;
-            onClosed?: (...args: any[]) => any;
             "onUpdate:model-value"?: (...args: any[]) => any;
+            onClosed?: (...args: any[]) => any;
             "onUpdate:model-timezone-value"?: (...args: any[]) => any;
             "onText-submit"?: (...args: any[]) => any;
             onCleared?: (...args: any[]) => any;
@@ -125,8 +125,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onFocus?: (...args: any[]) => any;
         onBlur?: (...args: any[]) => any;
         onOpen?: (...args: any[]) => any;
-        onClosed?: (...args: any[]) => any;
         "onUpdate:model-value"?: (...args: any[]) => any;
+        onClosed?: (...args: any[]) => any;
         "onUpdate:model-timezone-value"?: (...args: any[]) => any;
         "onText-submit"?: (...args: any[]) => any;
         onCleared?: (...args: any[]) => any;

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,12 +136,17 @@ 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;
+    status: string;
     anonymizationLevel: string;
     loanAmount: string;
-    status: string;
     borrowerCount: number;
     distributionModel: string;
     whySpecial: 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/dist/vue/index.d.ts

@@ -7,6 +7,7 @@ export { default as KvCarousel } from './KvCarousel.vue';
 export { default as KvCartModal } from './KvCartModal.vue';
 export { default as KvCartPill } from './KvCartPill.vue';
 export { default as KvCheckbox } from './KvCheckbox.vue';
+export { default as KvCheckoutLightbox } from './KvCheckoutLightbox.vue';
 export { default as KvCheckoutReceipt } from './KvCheckoutReceipt.vue';
 export { default as KvChip } from './KvChip.vue';
 export { default as KvClassicLoanCard } from './KvClassicLoanCard.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.7.0",
+  "version": "10.9.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -116,5 +116,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "23f2971b14728c8457a2e3bccd9e57c50fb016d1"
+  "gitHead": "32c4cdce12614dadf8fd607ec4df25194d7a7b60"
 }