@kiva/kv-components 6.65.1 → 6.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vue/KvCompactLoanCard.css +1 -1
- package/dist/vue/KvCompactLoanCard.js +185 -190
- package/dist/vue/KvSideSheet.js +79 -75
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.loan-card-use[data-v-
|
|
1
|
+
.loan-card-use[data-v-6a955eed]:hover,.loan-card-use[data-v-6a955eed]: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-6a955eed]{text-decoration-line:underline}.loan-card-progress[data-v-6a955eed]:hover,.loan-card-progress[data-v-6a955eed]:focus{text-decoration-line:none}.loan-card-use-text[data-v-6a955eed] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-6a955eed] form,.loan-card-cta[data-v-6a955eed] fieldset,.loan-card-cta[data-v-6a955eed] .tw-w-full,.loan-card-cta[data-v-6a955eed] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-6a955eed] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
|
|
@@ -4,18 +4,18 @@ import { mdiMapMarker as O, mdiHome as D } from "@mdi/js";
|
|
|
4
4
|
import { LOAN_CALLOUTS_FRAGMENT as S, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as V, loanCardComputedProperties as U, loanCardMethods as I } from "../utils/loanCard.js";
|
|
5
5
|
import H, { KV_LOAN_USE_FRAGMENT as j } from "./KvLoanUse.js";
|
|
6
6
|
import q from "./KvBorrowerImage.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
7
|
+
import W from "./KvLoanCallouts.js";
|
|
8
|
+
import Z, { KV_LEND_CTA_FRAGMENT as z, KV_LEND_CTA_USER_FRAGMENT as J } from "./KvLendCta.js";
|
|
9
|
+
import Q, { KV_LOAN_BOOKMARK_FRAGMENT as X } from "./KvLoanBookmark.js";
|
|
10
10
|
import Y from "./KvLoanProgressGroup.js";
|
|
11
11
|
import $, { KV_LOAN_TAG_FRAGMENT as ee } from "./KvLoanTag.js";
|
|
12
12
|
import te from "./KvMaterialIcon.js";
|
|
13
13
|
import oe from "./KvLoadingPlaceholder.js";
|
|
14
14
|
import ae from "./KvLoanTeamPick.js";
|
|
15
|
-
import { resolveComponent as d, openBlock as n, createElementBlock as m, createElementVNode as r, createBlock as
|
|
15
|
+
import { resolveComponent as d, openBlock as n, createElementBlock as m, createElementVNode as r, createBlock as i, resolveDynamicComponent as c, withCtx as f, createVNode as u, createCommentVNode as L, Fragment as b, renderList as ne, normalizeClass as x } from "vue";
|
|
16
16
|
import "./KvCompactLoanCard.css";
|
|
17
17
|
import le from "../_virtual/_plugin-vue_export-helper.js";
|
|
18
|
-
const
|
|
18
|
+
const Fe = B`
|
|
19
19
|
fragment KvCompactLoanCard on LoanBasic {
|
|
20
20
|
id
|
|
21
21
|
image {
|
|
@@ -37,19 +37,19 @@ const Oe = B`
|
|
|
37
37
|
...LoanGeocode
|
|
38
38
|
...LoanProgress
|
|
39
39
|
}
|
|
40
|
-
${
|
|
40
|
+
${z}
|
|
41
41
|
${ee}
|
|
42
42
|
${j}
|
|
43
43
|
${S}
|
|
44
44
|
${G}
|
|
45
45
|
${V}
|
|
46
|
-
`,
|
|
46
|
+
`, Ee = B`
|
|
47
47
|
fragment KvCompactLoanCardUser on LoanBasic {
|
|
48
48
|
id
|
|
49
49
|
...KvLendCtaUser
|
|
50
50
|
...KvLoanBookmark
|
|
51
51
|
}
|
|
52
|
-
${
|
|
52
|
+
${J}
|
|
53
53
|
${X}
|
|
54
54
|
`, re = {
|
|
55
55
|
name: "KvCompactLoanCard",
|
|
@@ -58,10 +58,10 @@ const Oe = B`
|
|
|
58
58
|
KvLoadingPlaceholder: oe,
|
|
59
59
|
KvLoanUse: H,
|
|
60
60
|
KvMaterialIcon: te,
|
|
61
|
-
KvLendCta:
|
|
61
|
+
KvLendCta: Z,
|
|
62
62
|
KvLoanTag: $,
|
|
63
|
-
KvLoanCallouts:
|
|
64
|
-
KvLoanBookmark:
|
|
63
|
+
KvLoanCallouts: W,
|
|
64
|
+
KvLoanBookmark: Q,
|
|
65
65
|
KvLoanTeamPick: ae,
|
|
66
66
|
KvLoanProgressGroup: Y
|
|
67
67
|
},
|
|
@@ -178,11 +178,11 @@ const Oe = B`
|
|
|
178
178
|
city: C,
|
|
179
179
|
countryName: A,
|
|
180
180
|
distributionModel: w,
|
|
181
|
-
formattedLocation:
|
|
182
|
-
fundraisingPercent:
|
|
183
|
-
hasProgressData:
|
|
184
|
-
imageHash:
|
|
185
|
-
isLoading:
|
|
181
|
+
formattedLocation: h,
|
|
182
|
+
fundraisingPercent: s,
|
|
183
|
+
hasProgressData: g,
|
|
184
|
+
imageHash: k,
|
|
185
|
+
isLoading: v,
|
|
186
186
|
loanAmount: _,
|
|
187
187
|
loanBorrowerCount: a,
|
|
188
188
|
loanCallouts: y,
|
|
@@ -190,8 +190,8 @@ const Oe = B`
|
|
|
190
190
|
loanUse: N,
|
|
191
191
|
readMorePath: T,
|
|
192
192
|
state: P,
|
|
193
|
-
tag:
|
|
194
|
-
unreservedAmount:
|
|
193
|
+
tag: K,
|
|
194
|
+
unreservedAmount: p,
|
|
195
195
|
sharesAvailable: R
|
|
196
196
|
} = U(l), {
|
|
197
197
|
clickReadMore: F
|
|
@@ -202,11 +202,11 @@ const Oe = B`
|
|
|
202
202
|
city: C,
|
|
203
203
|
countryName: A,
|
|
204
204
|
distributionModel: w,
|
|
205
|
-
formattedLocation:
|
|
206
|
-
fundraisingPercent:
|
|
207
|
-
hasProgressData:
|
|
208
|
-
imageHash:
|
|
209
|
-
isLoading:
|
|
205
|
+
formattedLocation: h,
|
|
206
|
+
fundraisingPercent: s,
|
|
207
|
+
hasProgressData: g,
|
|
208
|
+
imageHash: k,
|
|
209
|
+
isLoading: v,
|
|
210
210
|
loanAmount: _,
|
|
211
211
|
loanBorrowerCount: a,
|
|
212
212
|
loanCallouts: y,
|
|
@@ -216,8 +216,8 @@ const Oe = B`
|
|
|
216
216
|
mdiHome: D,
|
|
217
217
|
readMorePath: T,
|
|
218
218
|
state: P,
|
|
219
|
-
tag:
|
|
220
|
-
unreservedAmount:
|
|
219
|
+
tag: K,
|
|
220
|
+
unreservedAmount: p,
|
|
221
221
|
sharesAvailable: R,
|
|
222
222
|
clickReadMore: F
|
|
223
223
|
};
|
|
@@ -233,183 +233,178 @@ const Oe = B`
|
|
|
233
233
|
return E(l).format("$0,0");
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
-
},
|
|
237
|
-
class: "tw-flex tw-flex-col tw-items-start tw-
|
|
238
|
-
style: {
|
|
239
|
-
},
|
|
236
|
+
}, ie = {
|
|
237
|
+
class: "tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-rounded-md tw-shadow-lg tw-w-full",
|
|
238
|
+
style: { "min-width": "322px" }
|
|
239
|
+
}, se = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, de = { class: "tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover" }, me = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, ue = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, ce = {
|
|
240
240
|
key: 0,
|
|
241
|
-
class: "loan-card-use-text tw-w-full tw-overflow-hidden"
|
|
242
|
-
|
|
243
|
-
}, ge = {
|
|
241
|
+
class: "loan-card-use-text tw-w-full tw-overflow-hidden"
|
|
242
|
+
}, fe = {
|
|
244
243
|
key: 1,
|
|
245
244
|
class: "loan-card-use-text tw-w-full tw-overflow-hidden"
|
|
246
|
-
},
|
|
247
|
-
function
|
|
248
|
-
const w = d("kv-borrower-image"),
|
|
249
|
-
return n(), m("div",
|
|
250
|
-
r("div",
|
|
245
|
+
}, we = { class: "tw-flex-1 tw-min-w-0" }, he = { class: "tw-flex-1 tw-min-w-0" };
|
|
246
|
+
function ge(l, o, t, e, C, A) {
|
|
247
|
+
const w = d("kv-borrower-image"), h = d("kv-loan-tag"), s = d("kv-loading-placeholder"), g = d("kv-loan-use"), k = d("kv-loan-callouts"), v = d("kv-loan-progress-group"), _ = d("kv-lend-cta");
|
|
248
|
+
return n(), m("div", ie, [
|
|
249
|
+
r("div", se, [
|
|
251
250
|
r("div", de, [
|
|
252
251
|
r("div", me, [
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
"photo-path": t.photoPath
|
|
272
|
-
}, null, 8, ["alt", "hash", "photo-path"])
|
|
273
|
-
]),
|
|
274
|
-
_: 1
|
|
275
|
-
}, 8, ["to", "href"]))
|
|
252
|
+
(n(), i(c(e.tag), {
|
|
253
|
+
to: e.readMorePath,
|
|
254
|
+
href: e.readMorePath,
|
|
255
|
+
class: "tw-flex",
|
|
256
|
+
"aria-label": "Borrower image",
|
|
257
|
+
onClick: o[0] || (o[0] = (a) => e.clickReadMore("Photo", a))
|
|
258
|
+
}, {
|
|
259
|
+
default: f(() => [
|
|
260
|
+
u(w, {
|
|
261
|
+
class: "tw-bg-gray-300 tw-rounded-md tw-object-cover",
|
|
262
|
+
style: { width: "100px", height: "100px" },
|
|
263
|
+
alt: `Photo of ${e.borrowerName}`,
|
|
264
|
+
"aspect-ratio": 1,
|
|
265
|
+
"default-image": { width: 200, faceZoom: 50 },
|
|
266
|
+
hash: e.imageHash,
|
|
267
|
+
images: [{ width: 200, faceZoom: 50 }],
|
|
268
|
+
"photo-path": t.photoPath
|
|
269
|
+
}, null, 8, ["alt", "hash", "photo-path"])
|
|
276
270
|
]),
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
to: e.readMorePath,
|
|
280
|
-
href: e.readMorePath,
|
|
281
|
-
class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
|
|
282
|
-
"aria-label": "Loan tag",
|
|
283
|
-
onClick: o[1] || (o[1] = (a) => e.clickReadMore("Tag", a))
|
|
284
|
-
}, {
|
|
285
|
-
default: f(() => [
|
|
286
|
-
t.showTags && !e.isLoading ? (n(), s(g, {
|
|
287
|
-
key: 0,
|
|
288
|
-
loan: t.loan
|
|
289
|
-
}, null, 8, ["loan"])) : L("", !0)
|
|
290
|
-
]),
|
|
291
|
-
_: 1
|
|
292
|
-
}, 8, ["to", "href"])),
|
|
293
|
-
(n(), s(u(e.tag), {
|
|
294
|
-
to: e.readMorePath,
|
|
295
|
-
href: e.readMorePath,
|
|
296
|
-
class: "loan-card-use tw-no-underline tw-text-primary",
|
|
297
|
-
"aria-label": "Loan use",
|
|
298
|
-
onClick: o[2] || (o[2] = (a) => e.clickReadMore("Use", a))
|
|
299
|
-
}, {
|
|
300
|
-
default: f(() => [
|
|
301
|
-
e.isLoading ? (n(), m("div", we, [
|
|
302
|
-
(n(!0), m(b, null, ne([...Array(4)], (a, y) => (n(), m("div", {
|
|
303
|
-
key: y,
|
|
304
|
-
class: "tw-h-2 tw-mb-1"
|
|
305
|
-
}, [
|
|
306
|
-
c(i)
|
|
307
|
-
]))), 128))
|
|
308
|
-
])) : (n(), m("div", ge, [
|
|
309
|
-
c(h, {
|
|
310
|
-
use: e.loanUse,
|
|
311
|
-
"loan-amount": e.loanAmount,
|
|
312
|
-
status: e.loanStatus,
|
|
313
|
-
"borrower-count": e.loanBorrowerCount,
|
|
314
|
-
name: e.borrowerName,
|
|
315
|
-
"distribution-model": e.distributionModel,
|
|
316
|
-
class: "tw-text-small tw-leading-tight"
|
|
317
|
-
}, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
|
|
318
|
-
]))
|
|
319
|
-
]),
|
|
320
|
-
_: 1
|
|
321
|
-
}, 8, ["to", "href"]))
|
|
322
|
-
])
|
|
323
|
-
]),
|
|
324
|
-
e.isLoading || typeof e.loanCallouts > "u" ? (n(), s(i, {
|
|
325
|
-
key: 0,
|
|
326
|
-
class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
|
|
327
|
-
style: { width: "60%", height: "1.5rem" }
|
|
328
|
-
})) : (n(), s(v, {
|
|
329
|
-
key: 1,
|
|
330
|
-
callouts: e.loanCallouts,
|
|
331
|
-
class: "tw-mt-1.5",
|
|
332
|
-
onClick: o[3] || (o[3] = (a) => l.$emit("jump-filter-page", a))
|
|
333
|
-
}, null, 8, ["callouts"]))
|
|
271
|
+
_: 1
|
|
272
|
+
}, 8, ["to", "href"]))
|
|
334
273
|
]),
|
|
335
|
-
r("div",
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
274
|
+
r("div", ue, [
|
|
275
|
+
(n(), i(c(e.tag), {
|
|
276
|
+
to: e.readMorePath,
|
|
277
|
+
href: e.readMorePath,
|
|
278
|
+
class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
|
|
279
|
+
"aria-label": "Loan tag",
|
|
280
|
+
onClick: o[1] || (o[1] = (a) => e.clickReadMore("Tag", a))
|
|
281
|
+
}, {
|
|
282
|
+
default: f(() => [
|
|
283
|
+
t.showTags && !e.isLoading ? (n(), i(h, {
|
|
341
284
|
key: 0,
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
class: "loan-card-progress tw-no-underline tw-block",
|
|
345
|
-
"aria-label": "Loan progress",
|
|
346
|
-
onClick: o[4] || (o[4] = (a) => e.clickReadMore("Progress", a))
|
|
347
|
-
}, {
|
|
348
|
-
default: f(() => [
|
|
349
|
-
c(k, {
|
|
350
|
-
id: "loanProgress",
|
|
351
|
-
"money-left": e.unreservedAmount,
|
|
352
|
-
"progress-percent": e.fundraisingPercent,
|
|
353
|
-
class: "tw-text-black"
|
|
354
|
-
}, null, 8, ["money-left", "progress-percent"])
|
|
355
|
-
]),
|
|
356
|
-
_: 1
|
|
357
|
-
}, 8, ["to", "href"])) : L("", !0)
|
|
285
|
+
loan: t.loan
|
|
286
|
+
}, null, 8, ["loan"])) : L("", !0)
|
|
358
287
|
]),
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
"
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
], 2)
|
|
388
|
-
], 64)) : (n(), m(b, { key: 0 }, [
|
|
389
|
-
r("div", he, [
|
|
390
|
-
c(i, {
|
|
391
|
-
class: "tw-mb-0.5",
|
|
392
|
-
style: { width: "11rem", height: "1rem" }
|
|
393
|
-
}),
|
|
394
|
-
c(i, {
|
|
395
|
-
class: "tw-rounded",
|
|
396
|
-
style: { width: "11rem", height: "0.5rem" }
|
|
397
|
-
})
|
|
288
|
+
_: 1
|
|
289
|
+
}, 8, ["to", "href"])),
|
|
290
|
+
(n(), i(c(e.tag), {
|
|
291
|
+
to: e.readMorePath,
|
|
292
|
+
href: e.readMorePath,
|
|
293
|
+
class: "loan-card-use tw-no-underline tw-text-primary tw-block tw-w-full",
|
|
294
|
+
"aria-label": "Loan use",
|
|
295
|
+
onClick: o[2] || (o[2] = (a) => e.clickReadMore("Use", a))
|
|
296
|
+
}, {
|
|
297
|
+
default: f(() => [
|
|
298
|
+
e.isLoading ? (n(), m("div", ce, [
|
|
299
|
+
(n(!0), m(b, null, ne([...Array(4)], (a, y) => (n(), m("div", {
|
|
300
|
+
key: y,
|
|
301
|
+
class: "tw-h-2 tw-mb-1"
|
|
302
|
+
}, [
|
|
303
|
+
u(s)
|
|
304
|
+
]))), 128))
|
|
305
|
+
])) : (n(), m("div", fe, [
|
|
306
|
+
u(g, {
|
|
307
|
+
use: e.loanUse,
|
|
308
|
+
"loan-amount": e.loanAmount,
|
|
309
|
+
status: e.loanStatus,
|
|
310
|
+
"borrower-count": e.loanBorrowerCount,
|
|
311
|
+
name: e.borrowerName,
|
|
312
|
+
"distribution-model": e.distributionModel,
|
|
313
|
+
class: "tw-text-small tw-leading-tight"
|
|
314
|
+
}, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
|
|
315
|
+
]))
|
|
398
316
|
]),
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
317
|
+
_: 1
|
|
318
|
+
}, 8, ["to", "href"]))
|
|
319
|
+
])
|
|
320
|
+
]),
|
|
321
|
+
e.isLoading || typeof e.loanCallouts > "u" ? (n(), i(s, {
|
|
322
|
+
key: 0,
|
|
323
|
+
class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
|
|
324
|
+
style: { width: "60%", height: "1.5rem" }
|
|
325
|
+
})) : (n(), i(k, {
|
|
326
|
+
key: 1,
|
|
327
|
+
callouts: e.loanCallouts,
|
|
328
|
+
class: "tw-mt-1.5",
|
|
329
|
+
onClick: o[3] || (o[3] = (a) => l.$emit("jump-filter-page", a))
|
|
330
|
+
}, null, 8, ["callouts"]))
|
|
331
|
+
]),
|
|
332
|
+
r("div", {
|
|
333
|
+
class: x(["tw-flex tw-items-end tw-w-full tw-mt-1", { "tw-gap-1": e.sharesAvailable }])
|
|
334
|
+
}, [
|
|
335
|
+
e.hasProgressData ? (n(), m(b, { key: 1 }, [
|
|
336
|
+
r("div", he, [
|
|
337
|
+
e.sharesAvailable ? (n(), i(c(e.tag), {
|
|
338
|
+
key: 0,
|
|
339
|
+
to: e.readMorePath,
|
|
340
|
+
href: e.readMorePath,
|
|
341
|
+
class: "loan-card-progress tw-no-underline tw-block",
|
|
342
|
+
"aria-label": "Loan progress",
|
|
343
|
+
onClick: o[4] || (o[4] = (a) => e.clickReadMore("Progress", a))
|
|
344
|
+
}, {
|
|
345
|
+
default: f(() => [
|
|
346
|
+
u(v, {
|
|
347
|
+
id: "loanProgress",
|
|
348
|
+
"money-left": e.unreservedAmount,
|
|
349
|
+
"progress-percent": e.fundraisingPercent,
|
|
350
|
+
class: "tw-text-black"
|
|
351
|
+
}, null, 8, ["money-left", "progress-percent"])
|
|
352
|
+
]),
|
|
353
|
+
_: 1
|
|
354
|
+
}, 8, ["to", "href"])) : L("", !0)
|
|
355
|
+
]),
|
|
356
|
+
r("div", {
|
|
357
|
+
class: x(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
|
|
358
|
+
style: { height: "40px" }
|
|
359
|
+
}, [
|
|
360
|
+
u(_, {
|
|
361
|
+
loan: t.loan,
|
|
362
|
+
"unreserved-amount": e.unreservedAmount,
|
|
363
|
+
"basket-items": t.basketItems,
|
|
364
|
+
"is-loading": e.isLoading,
|
|
365
|
+
"is-adding": t.isAdding,
|
|
366
|
+
"enable-five-dollars-notes": t.enableFiveDollarsNotes,
|
|
367
|
+
"five-dollars-selected": t.fiveDollarsSelected,
|
|
368
|
+
"kv-track-function": t.kvTrackFunction,
|
|
369
|
+
"show-view-loan": t.showViewLoan,
|
|
370
|
+
"custom-loan-details": t.customLoanDetails,
|
|
371
|
+
"external-links": t.externalLinks,
|
|
372
|
+
route: t.route,
|
|
373
|
+
"user-balance": t.userBalance,
|
|
374
|
+
"get-cookie": t.getCookie,
|
|
375
|
+
"set-cookie": t.setCookie,
|
|
376
|
+
"is-visitor": t.isVisitor,
|
|
377
|
+
"primary-button-text": t.primaryButtonText,
|
|
378
|
+
"secondary-button-text": t.secondaryButtonText,
|
|
379
|
+
"secondary-button-handler": t.secondaryButtonHandler,
|
|
380
|
+
onAddToBasket: o[5] || (o[5] = (a) => l.$emit("add-to-basket", a)),
|
|
381
|
+
onShowLoanDetails: o[6] || (o[6] = (a) => e.clickReadMore("ViewLoan", a)),
|
|
382
|
+
onRemoveFromBasket: o[7] || (o[7] = (a) => l.$emit("remove-from-basket", a))
|
|
383
|
+
}, 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", "primary-button-text", "secondary-button-text", "secondary-button-handler"])
|
|
405
384
|
], 2)
|
|
406
|
-
])
|
|
407
|
-
|
|
385
|
+
], 64)) : (n(), m(b, { key: 0 }, [
|
|
386
|
+
r("div", we, [
|
|
387
|
+
u(s, {
|
|
388
|
+
class: "tw-mb-0.5",
|
|
389
|
+
style: { width: "100%", maxWidth: "11rem", height: "1rem" }
|
|
390
|
+
}),
|
|
391
|
+
u(s, {
|
|
392
|
+
class: "tw-rounded",
|
|
393
|
+
style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
|
|
394
|
+
})
|
|
395
|
+
]),
|
|
396
|
+
e.allDataLoaded ? L("", !0) : (n(), i(s, {
|
|
397
|
+
key: 0,
|
|
398
|
+
class: "tw-rounded tw-flex-shrink-0",
|
|
399
|
+
style: { width: "8rem", height: "2.5rem" }
|
|
400
|
+
}))
|
|
401
|
+
], 64))
|
|
402
|
+
], 2)
|
|
408
403
|
]);
|
|
409
404
|
}
|
|
410
|
-
const
|
|
405
|
+
const Oe = /* @__PURE__ */ le(re, [["render", ge], ["__scopeId", "data-v-6a955eed"]]);
|
|
411
406
|
export {
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
407
|
+
Fe as KV_COMPACT_LOAN_CARD_FRAGMENT,
|
|
408
|
+
Ee as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
|
|
409
|
+
Oe as default
|
|
415
410
|
};
|
package/dist/vue/KvSideSheet.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { toRefs as
|
|
2
|
-
import { mdiArrowLeft as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { toRefs as X, ref as d, reactive as Y, computed as j, watch as g, onMounted as Z, onBeforeUnmount as $, onUnmounted as ee, resolveComponent as te, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as ne, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as oe, renderSlot as F, nextTick as ie } from "vue";
|
|
2
|
+
import { mdiArrowLeft as le, mdiClose as ae, mdiOpenInNew as se } from "@mdi/js";
|
|
3
|
+
import de from "./KvMaterialIcon.js";
|
|
4
|
+
import re from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const ce = {
|
|
6
6
|
name: "KvSideSheet",
|
|
7
7
|
components: {
|
|
8
|
-
KvMaterialIcon:
|
|
8
|
+
KvMaterialIcon: de
|
|
9
9
|
},
|
|
10
10
|
props: {
|
|
11
11
|
/**
|
|
@@ -86,18 +86,18 @@ const re = {
|
|
|
86
86
|
setup(n, { emit: o, slots: i }) {
|
|
87
87
|
const {
|
|
88
88
|
visible: t,
|
|
89
|
-
kvTrackFunction:
|
|
90
|
-
trackEventCategory:
|
|
89
|
+
kvTrackFunction: M,
|
|
90
|
+
trackEventCategory: I,
|
|
91
91
|
widthDimensions: l,
|
|
92
|
-
hideHeadlineBgOnMobile:
|
|
93
|
-
isAnimated:
|
|
94
|
-
} =
|
|
92
|
+
hideHeadlineBgOnMobile: r,
|
|
93
|
+
isAnimated: V
|
|
94
|
+
} = X(n), c = d(!V.value), s = d({}), O = d(null), m = d(null), y = d(null), _ = d(null), N = d(null), S = d(null), B = d(null), W = d("100vh"), v = Y({
|
|
95
95
|
headline: 0,
|
|
96
96
|
controls: 0
|
|
97
|
-
}),
|
|
98
|
-
const e = _.value - (
|
|
97
|
+
}), G = j(() => {
|
|
98
|
+
const e = _.value - (r.value ? 0 : v.headline) - v.controls;
|
|
99
99
|
return Math.max(e, 0);
|
|
100
|
-
}),
|
|
100
|
+
}), A = j(() => {
|
|
101
101
|
if (typeof l.value == "string")
|
|
102
102
|
return l.value;
|
|
103
103
|
const e = {
|
|
@@ -106,56 +106,56 @@ const re = {
|
|
|
106
106
|
lg: 1024,
|
|
107
107
|
xl: 1280,
|
|
108
108
|
"2xl": 1536
|
|
109
|
-
},
|
|
109
|
+
}, a = N.value || (typeof window < "u" ? window.innerWidth : 0), f = Object.keys(l.value).filter((u) => u !== "default").sort((u, R) => e[R] - e[u]).find((u) => a >= e[u]);
|
|
110
110
|
return f ? l.value[f] : l.value.default || "100%";
|
|
111
|
-
}),
|
|
111
|
+
}), q = (e, a) => {
|
|
112
112
|
let f;
|
|
113
113
|
return (...u) => {
|
|
114
|
-
clearTimeout(f), f = setTimeout(() => e(...u),
|
|
114
|
+
clearTimeout(f), f = setTimeout(() => e(...u), a);
|
|
115
115
|
};
|
|
116
116
|
}, C = () => {
|
|
117
117
|
_.value = typeof window < "u" ? window.innerHeight : 0, N.value = typeof window < "u" ? window.innerWidth : 0, setTimeout(() => {
|
|
118
|
-
|
|
118
|
+
ie(() => {
|
|
119
119
|
var e;
|
|
120
120
|
if (y.value) {
|
|
121
|
-
const
|
|
122
|
-
v.headline =
|
|
121
|
+
const a = y.value.getBoundingClientRect();
|
|
122
|
+
v.headline = a.height;
|
|
123
123
|
} else
|
|
124
124
|
v.headline = 0;
|
|
125
125
|
if ((e = i.controls) != null && e.call(i) && m.value) {
|
|
126
|
-
const
|
|
127
|
-
v.controls =
|
|
126
|
+
const a = m.value.getBoundingClientRect();
|
|
127
|
+
v.controls = a.height;
|
|
128
128
|
} else
|
|
129
129
|
v.controls = 0;
|
|
130
130
|
});
|
|
131
131
|
}, 300);
|
|
132
|
-
}, E =
|
|
132
|
+
}, E = q(C, 100), T = () => {
|
|
133
133
|
const e = "tw-overflow-hidden";
|
|
134
|
-
|
|
135
|
-
},
|
|
136
|
-
|
|
134
|
+
c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
|
|
135
|
+
}, K = () => {
|
|
136
|
+
c.value = !1, T(), M.value(I.value, "click", "side-sheet-closed"), setTimeout(() => {
|
|
137
137
|
o("side-sheet-closed");
|
|
138
138
|
}, 300), document.removeEventListener("keyup", L);
|
|
139
|
-
},
|
|
139
|
+
}, J = () => {
|
|
140
140
|
o("go-to-link");
|
|
141
141
|
}, L = (e) => {
|
|
142
|
-
(e == null ? void 0 : e.key) === "Escape" &&
|
|
143
|
-
},
|
|
144
|
-
width:
|
|
145
|
-
})),
|
|
142
|
+
(e == null ? void 0 : e.key) === "Escape" && K();
|
|
143
|
+
}, P = j(() => ({
|
|
144
|
+
width: A.value
|
|
145
|
+
})), U = () => {
|
|
146
146
|
if (typeof l.value == "object" && O.value) {
|
|
147
147
|
const e = "side-sheet-styles";
|
|
148
|
-
let
|
|
149
|
-
|
|
148
|
+
let a = document.getElementById(e);
|
|
149
|
+
a || (a = document.createElement("style"), a.id = e, document.head.appendChild(a));
|
|
150
150
|
const f = {
|
|
151
151
|
sm: "640px",
|
|
152
152
|
md: "768px",
|
|
153
153
|
lg: "1024px",
|
|
154
154
|
xl: "1280px",
|
|
155
155
|
"2xl": "1536px"
|
|
156
|
-
}, R = Object.keys(l.value).filter((h) => h !== "default").sort((h,
|
|
157
|
-
const
|
|
158
|
-
return
|
|
156
|
+
}, R = Object.keys(l.value).filter((h) => h !== "default").sort((h, Q) => {
|
|
157
|
+
const D = ["sm", "md", "lg", "xl", "2xl"];
|
|
158
|
+
return D.indexOf(h) - D.indexOf(Q);
|
|
159
159
|
}).map((h) => `
|
|
160
160
|
@media (min-width: ${f[h]}) {
|
|
161
161
|
#side-sheet-${n.trackEventCategory || "default"} {
|
|
@@ -163,13 +163,13 @@ const re = {
|
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
`).join("");
|
|
166
|
-
|
|
166
|
+
a.textContent = R, O.value.id = `side-sheet-${n.trackEventCategory || "default"}`;
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
169
|
return g(t, (e) => {
|
|
170
|
-
typeof window < "u" && (e ? (document.addEventListener("keyup", L),
|
|
171
|
-
|
|
172
|
-
}, 10)) : (
|
|
170
|
+
typeof window < "u" && (e ? (document.addEventListener("keyup", L), s.value = {}, setTimeout(() => {
|
|
171
|
+
c.value = !0, T(), C();
|
|
172
|
+
}, 10)) : (c.value = !1, T(), document.removeEventListener("keyup", L), s.value = {}));
|
|
173
173
|
}, { immediate: !0 }), g(() => {
|
|
174
174
|
var e;
|
|
175
175
|
return (e = i.controls) == null ? void 0 : e.call(i);
|
|
@@ -177,57 +177,58 @@ const re = {
|
|
|
177
177
|
setTimeout(() => {
|
|
178
178
|
C();
|
|
179
179
|
}, 100);
|
|
180
|
-
}, { deep: !0 }), g(
|
|
181
|
-
|
|
182
|
-
...
|
|
180
|
+
}, { deep: !0 }), g(A, (e) => {
|
|
181
|
+
c.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
|
|
182
|
+
...s.value,
|
|
183
183
|
width: e,
|
|
184
184
|
transition: "none"
|
|
185
185
|
// No animation for resize
|
|
186
186
|
}, setTimeout(() => {
|
|
187
|
-
|
|
188
|
-
...
|
|
187
|
+
s.value && Object.keys(s.value).length > 0 && (s.value = {
|
|
188
|
+
...s.value,
|
|
189
189
|
transition: "all 0.3s ease-in-out"
|
|
190
190
|
});
|
|
191
191
|
}, 50));
|
|
192
192
|
}), g(l, () => {
|
|
193
|
-
|
|
194
|
-
}, { immediate: !0 }), g(
|
|
195
|
-
e &&
|
|
196
|
-
}),
|
|
197
|
-
setTimeout(() => {
|
|
193
|
+
c.value && U();
|
|
194
|
+
}, { immediate: !0 }), g(c, (e) => {
|
|
195
|
+
e && U();
|
|
196
|
+
}), Z(() => {
|
|
197
|
+
W.value = "auto", setTimeout(() => {
|
|
198
198
|
C();
|
|
199
199
|
}, 100), m.value && (S.value = new ResizeObserver(E), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(E), B.value.observe(y.value)), window.addEventListener("resize", E);
|
|
200
|
-
}), Z(() => {
|
|
201
|
-
r.value && document.body.classList.remove("tw-overflow-hidden");
|
|
202
200
|
}), $(() => {
|
|
201
|
+
c.value && document.body.classList.remove("tw-overflow-hidden");
|
|
202
|
+
}), ee(() => {
|
|
203
203
|
S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", E);
|
|
204
204
|
const e = document.getElementById("side-sheet-styles");
|
|
205
205
|
e && e.remove();
|
|
206
206
|
}), {
|
|
207
|
-
closeSideSheet:
|
|
208
|
-
contentHeight:
|
|
207
|
+
closeSideSheet: K,
|
|
208
|
+
contentHeight: G,
|
|
209
209
|
controlsRef: m,
|
|
210
210
|
headlineRef: y,
|
|
211
211
|
sideSheetRef: O,
|
|
212
|
-
sideSheetStyles:
|
|
213
|
-
goToLink:
|
|
214
|
-
mdiArrowLeft:
|
|
215
|
-
mdiClose:
|
|
212
|
+
sideSheetStyles: P,
|
|
213
|
+
goToLink: J,
|
|
214
|
+
mdiArrowLeft: le,
|
|
215
|
+
mdiClose: ae,
|
|
216
216
|
mdiOpenInNew: se,
|
|
217
|
-
modalStyles:
|
|
218
|
-
open:
|
|
217
|
+
modalStyles: s,
|
|
218
|
+
open: c,
|
|
219
|
+
loadingContentMinHeight: W
|
|
219
220
|
};
|
|
220
221
|
}
|
|
221
|
-
},
|
|
222
|
-
function
|
|
223
|
-
const l =
|
|
222
|
+
}, ue = { class: "tw-flex tw-gap-1.5" }, we = { key: 1 }, fe = { class: "tw-flex tw-gap-1.5" };
|
|
223
|
+
function ve(n, o, i, t, M, I) {
|
|
224
|
+
const l = te("kv-material-icon");
|
|
224
225
|
return i.visible ? (p(), k("div", {
|
|
225
226
|
key: 0,
|
|
226
227
|
class: b(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
|
|
227
228
|
"tw-bg-opacity-0 tw-delay-300": !t.open,
|
|
228
229
|
"tw-bg-opacity-low": t.open
|
|
229
230
|
}]),
|
|
230
|
-
onClick: o[3] || (o[3] =
|
|
231
|
+
onClick: o[3] || (o[3] = ne((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
|
|
231
232
|
}, [
|
|
232
233
|
w("div", {
|
|
233
234
|
ref: "sideSheetRef",
|
|
@@ -250,24 +251,24 @@ function fe(n, o, i, t, I, M) {
|
|
|
250
251
|
"tw-border-b": i.showHeadlineBorder
|
|
251
252
|
}])
|
|
252
253
|
}, [
|
|
253
|
-
w("div",
|
|
254
|
+
w("div", ue, [
|
|
254
255
|
i.showBackButton ? (p(), k("button", {
|
|
255
256
|
key: 0,
|
|
256
257
|
class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
|
|
257
|
-
onClick: o[0] || (o[0] = (...
|
|
258
|
+
onClick: o[0] || (o[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
|
|
258
259
|
}, [
|
|
259
260
|
z(l, {
|
|
260
261
|
class: "tw-w-3 tw-h-3",
|
|
261
262
|
icon: t.mdiArrowLeft
|
|
262
263
|
}, null, 8, ["icon"])
|
|
263
264
|
])) : x("", !0),
|
|
264
|
-
i.headline ? (p(), k("h3",
|
|
265
|
+
i.headline ? (p(), k("h3", we, oe(i.headline), 1)) : x("", !0)
|
|
265
266
|
]),
|
|
266
|
-
w("div",
|
|
267
|
+
w("div", fe, [
|
|
267
268
|
i.showGoToLink ? (p(), k("button", {
|
|
268
269
|
key: 0,
|
|
269
270
|
class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
|
|
270
|
-
onClick: o[1] || (o[1] = (...
|
|
271
|
+
onClick: o[1] || (o[1] = (...r) => t.goToLink && t.goToLink(...r))
|
|
271
272
|
}, [
|
|
272
273
|
z(l, {
|
|
273
274
|
class: "tw-w-3 tw-h-3",
|
|
@@ -276,7 +277,7 @@ function fe(n, o, i, t, I, M) {
|
|
|
276
277
|
])) : x("", !0),
|
|
277
278
|
w("button", {
|
|
278
279
|
class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
|
|
279
|
-
onClick: o[2] || (o[2] = (...
|
|
280
|
+
onClick: o[2] || (o[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
|
|
280
281
|
}, [
|
|
281
282
|
z(l, {
|
|
282
283
|
class: "tw-w-3 tw-h-3",
|
|
@@ -288,7 +289,10 @@ function fe(n, o, i, t, I, M) {
|
|
|
288
289
|
w("div", {
|
|
289
290
|
id: "sidesheet-content",
|
|
290
291
|
class: "tw-overflow-y-auto tw-overscroll-y-contain",
|
|
291
|
-
style: H(
|
|
292
|
+
style: H([
|
|
293
|
+
{ "min-height": t.loadingContentMinHeight },
|
|
294
|
+
{ height: t.contentHeight + "px" }
|
|
295
|
+
])
|
|
292
296
|
}, [
|
|
293
297
|
w("div", {
|
|
294
298
|
class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
|
|
@@ -296,7 +300,7 @@ function fe(n, o, i, t, I, M) {
|
|
|
296
300
|
"tw-opacity-full": t.open
|
|
297
301
|
}])
|
|
298
302
|
}, [
|
|
299
|
-
|
|
303
|
+
F(n.$slots, "default")
|
|
300
304
|
], 2)
|
|
301
305
|
], 4),
|
|
302
306
|
n.$slots.controls ? (p(), k("div", {
|
|
@@ -308,13 +312,13 @@ function fe(n, o, i, t, I, M) {
|
|
|
308
312
|
}]),
|
|
309
313
|
style: { "z-index": "999" }
|
|
310
314
|
}, [
|
|
311
|
-
|
|
315
|
+
F(n.$slots, "controls")
|
|
312
316
|
], 2)) : x("", !0)
|
|
313
317
|
], 4)
|
|
314
318
|
], 6)
|
|
315
319
|
], 2)) : x("", !0);
|
|
316
320
|
}
|
|
317
|
-
const
|
|
321
|
+
const pe = /* @__PURE__ */ re(ce, [["render", ve]]);
|
|
318
322
|
export {
|
|
319
|
-
|
|
323
|
+
pe as default
|
|
320
324
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.67.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"embla-carousel-fade",
|
|
115
115
|
"popper.js"
|
|
116
116
|
],
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "8c5374ffe89ca6caff25d1c11fb697ac8552bf24"
|
|
118
118
|
}
|