@kiva/kv-components 6.62.1 → 6.62.3
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.
|
@@ -71,7 +71,7 @@ function I(e, n, o, r, a, c) {
|
|
|
71
71
|
ref: o.refName,
|
|
72
72
|
class: "tw-py-1 tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-cursor-pointer",
|
|
73
73
|
href: o.href,
|
|
74
|
-
|
|
74
|
+
onMouseenter: n[0] || (n[0] = (...t) => r.handleMouseOver && r.handleMouseOver(...t)),
|
|
75
75
|
onTouchstart: n[1] || (n[1] = h((...t) => r.handleTouchStart && r.handleTouchStart(...t), ["prevent"]))
|
|
76
76
|
}, [
|
|
77
77
|
p("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.header-link[data-v-
|
|
1
|
+
.header-link[data-v-3a913e07]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-3a913e07]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-3a913e07] .avatar div:first-child{display:flex}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { defineAsyncComponent as
|
|
2
|
-
import { mdiAccountCircle as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
1
|
+
import { defineAsyncComponent as h, ref as l, inject as Z, computed as H, watch as _, onMounted as $, onUnmounted as ee, resolveComponent as p, resolveDirective as ne, openBlock as r, createElementBlock as w, withDirectives as v, normalizeClass as y, withModifiers as U, createVNode as B, createBlock as T, withCtx as K, createTextVNode as f, createElementVNode as M, createCommentVNode as P, vShow as V, toDisplayString as te } from "vue";
|
|
2
|
+
import { mdiAccountCircle as oe, mdiChevronDown as ae, mdiMagnify as le, mdiMenu as re } from "@mdi/js";
|
|
3
|
+
import ie from "numeral";
|
|
4
|
+
import de from "@kiva/kv-tokens";
|
|
5
|
+
import ue from "../KvMaterialIcon.js";
|
|
6
|
+
import me from "../KvIconBag.js";
|
|
7
|
+
import se from "./KvHeaderDropdownLink.js";
|
|
8
|
+
import ve from "../KvUserAvatar.js";
|
|
9
|
+
import { throttle as ce } from "../../utils/throttle.js";
|
|
10
|
+
import { isLegacyPlaceholderAvatar as we } from "../../utils/imageUtils.js";
|
|
10
11
|
import "./KvHeaderLinkBar.css";
|
|
11
|
-
import
|
|
12
|
-
const
|
|
12
|
+
import fe from "../../_virtual/_plugin-vue_export-helper.js";
|
|
13
|
+
const Me = h(() => import("./KvHeaderMobileMenu.js")), R = h(() => import("./KvHeaderMyKivaMenu.js")), ke = h(() => import("./LendMenu/KvLendMenu.js")), he = h(() => import("./KvHeaderTakeActionMenu.js")), ge = h(() => import("./KvHeaderAboutMenu.js")), F = 120, k = "avatar-menu", x = "menuButton", W = { top: "-3.75rem", width: "100%" }, A = "lendButton", be = {
|
|
13
14
|
components: {
|
|
14
|
-
KvMaterialIcon:
|
|
15
|
-
KvIconBag:
|
|
16
|
-
KvHeaderDropdownLink:
|
|
17
|
-
KvUserAvatar:
|
|
15
|
+
KvMaterialIcon: ue,
|
|
16
|
+
KvIconBag: me,
|
|
17
|
+
KvHeaderDropdownLink: se,
|
|
18
|
+
KvUserAvatar: ve
|
|
18
19
|
},
|
|
19
20
|
props: {
|
|
20
21
|
loggedIn: {
|
|
@@ -57,119 +58,118 @@ const we = k(() => import("./KvHeaderMobileMenu.js")), F = k(() => import("./KvH
|
|
|
57
58
|
emits: [
|
|
58
59
|
"item-hover"
|
|
59
60
|
],
|
|
60
|
-
setup(
|
|
61
|
-
const a =
|
|
62
|
-
n("item-hover", o,
|
|
63
|
-
},
|
|
64
|
-
navigator.maxTouchPoints || (o === A && t.value !== A &&
|
|
61
|
+
setup(i, { emit: n }) {
|
|
62
|
+
const a = l(null), e = l(null), N = l(null), E = l(null), g = l(null), c = l(null), I = l(null), L = l(null), d = l(null), t = l(null), O = Z("$kvTrackEvent"), u = (o, m, s = null) => {
|
|
63
|
+
n("item-hover", o, m, s);
|
|
64
|
+
}, z = (o, m, s = null) => {
|
|
65
|
+
navigator.maxTouchPoints || (o === A && t.value !== A && O(
|
|
65
66
|
"TopNav",
|
|
66
67
|
"hover-Lend-menu",
|
|
67
68
|
"Lend"
|
|
68
69
|
), t.value = o, u(
|
|
69
70
|
o,
|
|
70
|
-
|
|
71
|
-
o ===
|
|
71
|
+
m,
|
|
72
|
+
o === x && i.isMobile ? W : s
|
|
72
73
|
));
|
|
73
74
|
}, j = (o) => {
|
|
74
75
|
!navigator.maxTouchPoints && t.value === o && (t.value = null, u());
|
|
75
|
-
},
|
|
76
|
-
var
|
|
77
|
-
const o = (
|
|
76
|
+
}, D = () => {
|
|
77
|
+
var C;
|
|
78
|
+
const o = (C = a.value) == null ? void 0 : C.getBoundingClientRect();
|
|
78
79
|
if (!o) return null;
|
|
79
|
-
const
|
|
80
|
+
const s = o.left + o.width / 2 - F / 2, Y = `${window.innerWidth - s - F}px`;
|
|
80
81
|
return {
|
|
81
|
-
|
|
82
|
-
marginTop: "-2px",
|
|
83
|
-
// Avoid closing avatar menu on header edge
|
|
84
|
-
borderRadius: l.isMobile ? "auto" : "0px 0px 8px 8px",
|
|
85
|
-
width: l.isMobile ? "100%" : `${K}px`
|
|
82
|
+
right: (window == null ? void 0 : window.innerWidth) < de.breakpoints.md ? 0 : Y
|
|
86
83
|
};
|
|
87
|
-
},
|
|
88
|
-
t.value =
|
|
89
|
-
}, q = (o,
|
|
90
|
-
o === A && t.value !== A &&
|
|
84
|
+
}, b = () => {
|
|
85
|
+
t.value = k, u(a.value, R, D());
|
|
86
|
+
}, q = (o, m, s) => {
|
|
87
|
+
o === A && t.value !== A && O(
|
|
91
88
|
"TopNav",
|
|
92
89
|
"hover-Lend-menu",
|
|
93
90
|
"Lend"
|
|
94
|
-
), t.value ===
|
|
95
|
-
},
|
|
96
|
-
t.value ===
|
|
97
|
-
}, 100), G =
|
|
91
|
+
), t.value === x && (t.value = null), !t.value || t.value !== o ? (t.value = o, o === k ? b() : o === x && i.isMobile ? u(o, m, W) : u(o, m, s)) : (t.value = null, u());
|
|
92
|
+
}, S = ce(() => {
|
|
93
|
+
t.value === k && b();
|
|
94
|
+
}, 100), G = H(() => i.isMobile ? void 0 : "/lend-by-category"), J = H(() => {
|
|
98
95
|
var o;
|
|
99
|
-
return ((o =
|
|
100
|
-
}), Q =
|
|
96
|
+
return ((o = i.lenderImageUrl) == null ? void 0 : o.split("/").pop()) ?? "";
|
|
97
|
+
}), Q = H(() => Math.floor(i.balance)), X = (o) => {
|
|
101
98
|
o.target === o.currentTarget && u();
|
|
102
99
|
};
|
|
103
|
-
return
|
|
104
|
-
() =>
|
|
100
|
+
return _(
|
|
101
|
+
() => i.isMobile,
|
|
105
102
|
() => {
|
|
106
|
-
t.value ===
|
|
103
|
+
t.value === k && b();
|
|
107
104
|
}
|
|
108
|
-
),
|
|
109
|
-
() =>
|
|
105
|
+
), _(
|
|
106
|
+
() => i.openMenuItem,
|
|
110
107
|
(o) => {
|
|
111
108
|
o || (t.value = null);
|
|
112
109
|
}
|
|
113
|
-
),
|
|
114
|
-
import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize",
|
|
115
|
-
}),
|
|
116
|
-
window.removeEventListener("resize",
|
|
110
|
+
), $(() => {
|
|
111
|
+
import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", S);
|
|
112
|
+
}), ee(() => {
|
|
113
|
+
window.removeEventListener("resize", S);
|
|
117
114
|
}), {
|
|
118
|
-
AVATAR_MENU_ID:
|
|
115
|
+
AVATAR_MENU_ID: k,
|
|
119
116
|
openMenuId: t,
|
|
120
|
-
numeral:
|
|
121
|
-
mdiAccountCircle:
|
|
122
|
-
mdiChevronDown:
|
|
123
|
-
mdiMagnify:
|
|
124
|
-
mdiMenu:
|
|
117
|
+
numeral: ie,
|
|
118
|
+
mdiAccountCircle: oe,
|
|
119
|
+
mdiChevronDown: ae,
|
|
120
|
+
mdiMagnify: le,
|
|
121
|
+
mdiMenu: re,
|
|
125
122
|
onHover: u,
|
|
126
123
|
avatar: a,
|
|
127
124
|
lendButton: e,
|
|
128
|
-
aboutUsLink:
|
|
125
|
+
aboutUsLink: N,
|
|
129
126
|
partnerWithUsLink: E,
|
|
130
|
-
borrowLink:
|
|
127
|
+
borrowLink: g,
|
|
131
128
|
supportKivaLink: c,
|
|
132
129
|
basketLink: I,
|
|
133
130
|
signInLink: L,
|
|
134
131
|
menuButton: d,
|
|
135
132
|
lendUrl: G,
|
|
136
133
|
avatarFilename: J,
|
|
137
|
-
handleOnHover:
|
|
134
|
+
handleOnHover: z,
|
|
138
135
|
handleTouchStart: q,
|
|
139
136
|
handleMouseOut: j,
|
|
140
|
-
handleAvatarMenuPosition:
|
|
141
|
-
KvHeaderMobileMenu:
|
|
142
|
-
KvHeaderMyKivaMenu:
|
|
143
|
-
KvLendMenu:
|
|
144
|
-
KvHeaderTakeActionMenu:
|
|
145
|
-
KvHeaderAboutMenu:
|
|
146
|
-
isLegacyPlaceholderAvatar:
|
|
147
|
-
getAvatarMenuPosition:
|
|
137
|
+
handleAvatarMenuPosition: b,
|
|
138
|
+
KvHeaderMobileMenu: Me,
|
|
139
|
+
KvHeaderMyKivaMenu: R,
|
|
140
|
+
KvLendMenu: ke,
|
|
141
|
+
KvHeaderTakeActionMenu: he,
|
|
142
|
+
KvHeaderAboutMenu: ge,
|
|
143
|
+
isLegacyPlaceholderAvatar: we,
|
|
144
|
+
getAvatarMenuPosition: D,
|
|
148
145
|
handleEmptySpaceClick: X,
|
|
149
146
|
roundedBalance: Q
|
|
150
147
|
};
|
|
151
148
|
}
|
|
152
|
-
},
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
149
|
+
}, pe = ["href"], ye = {
|
|
150
|
+
ref: "avatar",
|
|
151
|
+
class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-bg-eco-green-1 tw-rounded-md tw-py-0.5 md:tw-py-1 tw-px-1 md:tw-px-2"
|
|
152
|
+
}, Te = { class: "tw-text-eco-green-4" }, Ae = ["href"];
|
|
153
|
+
function Ie(i, n, a, e, N, E) {
|
|
154
|
+
const g = p("kv-material-icon"), c = p("KvHeaderDropdownLink"), I = p("kv-icon-bag"), L = p("KvUserAvatar"), d = ne("kv-track-event");
|
|
155
|
+
return r(), w("div", {
|
|
156
156
|
class: "tw-h-full tw-flex tw-items-center tw-gap-0.5 md:tw-gap-2 lg:tw-gap-2.5",
|
|
157
157
|
onTouchstart: n[10] || (n[10] = (...t) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...t))
|
|
158
158
|
}, [
|
|
159
|
-
|
|
159
|
+
v((r(), w("button", {
|
|
160
160
|
ref: "menuButton",
|
|
161
|
-
class:
|
|
161
|
+
class: y(["header-link tw-inline-flex md:tw-hidden", {
|
|
162
162
|
"tw-text-tertiary": a.openMenuItem && a.openMenuItem !== e.KvHeaderMobileMenu
|
|
163
163
|
}]),
|
|
164
164
|
onMouseover: n[0] || (n[0] = (t) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
|
|
165
165
|
onMouseout: n[1] || (n[1] = (t) => e.handleMouseOut("menuButton")),
|
|
166
|
-
onTouchstart: n[2] || (n[2] =
|
|
166
|
+
onTouchstart: n[2] || (n[2] = U((t) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
|
|
167
167
|
}, [
|
|
168
|
-
|
|
168
|
+
B(g, { icon: e.mdiMenu }, null, 8, ["icon"])
|
|
169
169
|
], 34)), [
|
|
170
170
|
[d, a.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
|
|
171
171
|
]),
|
|
172
|
-
|
|
172
|
+
v((r(), T(c, {
|
|
173
173
|
class: "tw-py-1",
|
|
174
174
|
"ref-name": "lendButton",
|
|
175
175
|
href: e.lendUrl,
|
|
@@ -179,16 +179,16 @@ function Te(l, n, a, e, O, E) {
|
|
|
179
179
|
"base-class": "tw-inline-flex md:tw-border md:tw-rounded-md tw-px-1.5 tw-py-1",
|
|
180
180
|
onOnHover: e.handleOnHover,
|
|
181
181
|
onMouseleave: n[3] || (n[3] = (t) => e.handleMouseOut("lendButton")),
|
|
182
|
-
onTouchstart: n[4] || (n[4] =
|
|
182
|
+
onTouchstart: n[4] || (n[4] = U((t) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
|
|
183
183
|
}, {
|
|
184
|
-
default:
|
|
184
|
+
default: K(() => n[11] || (n[11] = [
|
|
185
185
|
f(" Lend ")
|
|
186
186
|
])),
|
|
187
187
|
_: 1
|
|
188
188
|
}, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
|
|
189
189
|
[d, ["TopNav", "click-Lend"]]
|
|
190
190
|
]),
|
|
191
|
-
|
|
191
|
+
v((r(), T(c, {
|
|
192
192
|
"ref-name": "takeActionButton",
|
|
193
193
|
"base-class": "tw-hidden md:tw-inline-flex tw-py-1",
|
|
194
194
|
"menu-component": e.KvHeaderTakeActionMenu,
|
|
@@ -199,14 +199,14 @@ function Te(l, n, a, e, O, E) {
|
|
|
199
199
|
onMouseleave: n[5] || (n[5] = (t) => e.handleMouseOut("takeActionButton")),
|
|
200
200
|
onUserTap: e.handleTouchStart
|
|
201
201
|
}, {
|
|
202
|
-
default:
|
|
202
|
+
default: K(() => n[12] || (n[12] = [
|
|
203
203
|
f(" Take action ")
|
|
204
204
|
])),
|
|
205
205
|
_: 1
|
|
206
206
|
}, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
|
|
207
207
|
[d, ["TopNav", "click-take-action"]]
|
|
208
208
|
]),
|
|
209
|
-
|
|
209
|
+
B(c, {
|
|
210
210
|
"ref-name": "aboutUsLink",
|
|
211
211
|
"data-testid": "header-about",
|
|
212
212
|
"base-class": "tw-hidden md:tw-inline-flex tw-py-1",
|
|
@@ -218,73 +218,74 @@ function Te(l, n, a, e, O, E) {
|
|
|
218
218
|
onMouseleave: n[6] || (n[6] = (t) => e.handleMouseOut("aboutUsLink")),
|
|
219
219
|
onUserTap: e.handleTouchStart
|
|
220
220
|
}, {
|
|
221
|
-
default:
|
|
221
|
+
default: K(() => n[13] || (n[13] = [
|
|
222
222
|
f(" About ")
|
|
223
223
|
])),
|
|
224
224
|
_: 1
|
|
225
225
|
}, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
|
|
226
|
-
n[17] || (n[17] =
|
|
227
|
-
a.loggedIn ?
|
|
226
|
+
n[17] || (n[17] = M("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
|
|
227
|
+
a.loggedIn ? v((r(), w("a", {
|
|
228
228
|
key: 0,
|
|
229
229
|
ref: "dashboardLink",
|
|
230
230
|
href: a.myDashboardUrl,
|
|
231
|
-
class:
|
|
231
|
+
class: y(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!a.openMenuItem }])
|
|
232
232
|
}, n[14] || (n[14] = [
|
|
233
233
|
f(" My dashboard ")
|
|
234
|
-
]), 10,
|
|
234
|
+
]), 10, pe)), [
|
|
235
235
|
[d, ["TopNav", "click-Dashboard"]]
|
|
236
|
-
]) :
|
|
237
|
-
|
|
236
|
+
]) : P("", !0),
|
|
237
|
+
v((r(), w("a", {
|
|
238
238
|
ref: "basketLink",
|
|
239
239
|
href: "/basket",
|
|
240
|
-
class:
|
|
240
|
+
class: y(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!a.openMenuItem }]),
|
|
241
241
|
style: { "margin-right": "2px" },
|
|
242
242
|
"data-testid": "header-basket"
|
|
243
243
|
}, [
|
|
244
|
-
|
|
244
|
+
B(I, {
|
|
245
245
|
class: "tw-w-3 tw-h-3 md:tw-w-3.5 md:tw-h-3.5 tw-pointer-events-none",
|
|
246
246
|
count: a.basketCount
|
|
247
247
|
}, null, 8, ["count"]),
|
|
248
|
-
n[15] || (n[15] =
|
|
248
|
+
n[15] || (n[15] = M("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
|
|
249
249
|
], 2)), [
|
|
250
|
-
[
|
|
250
|
+
[V, a.basketCount > 0],
|
|
251
251
|
[d, ["TopNav", "click-Basket"]]
|
|
252
252
|
]),
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
onTouchstart: n[9] || (n[9] = H((t) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
|
|
253
|
+
M("div", {
|
|
254
|
+
class: "md:tw-py-1",
|
|
255
|
+
onMouseenter: n[7] || (n[7] = (t) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
|
|
256
|
+
onMouseleave: n[8] || (n[8] = (t) => e.handleMouseOut(e.AVATAR_MENU_ID)),
|
|
257
|
+
onTouchstart: n[9] || (n[9] = U((t) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
|
|
259
258
|
}, [
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
259
|
+
v(M("div", ye, [
|
|
260
|
+
e.isLegacyPlaceholderAvatar(e.avatarFilename) || !e.avatarFilename ? (r(), T(g, {
|
|
261
|
+
key: 0,
|
|
262
|
+
icon: e.mdiAccountCircle,
|
|
263
|
+
class: "tw-w-3"
|
|
264
|
+
}, null, 8, ["icon"])) : (r(), T(L, {
|
|
265
|
+
key: 1,
|
|
266
|
+
class: "avatar",
|
|
267
|
+
"lender-name": a.lenderName,
|
|
268
|
+
"lender-image-url": a.lenderImageUrl,
|
|
269
|
+
"is-small": ""
|
|
270
|
+
}, null, 8, ["lender-name", "lender-image-url"])),
|
|
271
|
+
M("span", Te, te(e.numeral(e.roundedBalance).format("$0")), 1)
|
|
272
|
+
], 512), [
|
|
273
|
+
[V, a.loggedIn]
|
|
274
|
+
])
|
|
275
|
+
], 32),
|
|
276
|
+
a.loggedIn ? P("", !0) : v((r(), w("a", {
|
|
276
277
|
key: 1,
|
|
277
278
|
ref: "signInLink",
|
|
278
279
|
href: a.loginUrl,
|
|
279
|
-
class:
|
|
280
|
+
class: y(["header-link", { "tw-text-tertiary": !!a.openMenuItem }])
|
|
280
281
|
}, n[16] || (n[16] = [
|
|
281
282
|
f(" Sign in ")
|
|
282
|
-
]), 10,
|
|
283
|
+
]), 10, Ae)), [
|
|
283
284
|
[d, ["TopNav", "click-Sign-in"]]
|
|
284
285
|
])
|
|
285
286
|
], 32);
|
|
286
287
|
}
|
|
287
|
-
const
|
|
288
|
+
const Pe = /* @__PURE__ */ fe(be, [["render", Ie], ["__scopeId", "data-v-3a913e07"]]);
|
|
288
289
|
export {
|
|
289
|
-
|
|
290
|
+
Pe as default
|
|
290
291
|
};
|
package/dist/vue/KvWwwHeader.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.header-fade-enter-active[data-v-
|
|
1
|
+
.header-fade-enter-active[data-v-f1e45d4f]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-f1e45d4f]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-f1e45d4f],.header-fade-leave-to[data-v-f1e45d4f]{opacity:0}.header-fade-leave[data-v-f1e45d4f],.header-fade-enter-to[data-v-f1e45d4f]{opacity:1}.bg-opacity-50[data-v-f1e45d4f]{background-color:rgba(var(--bg-action-highlight),.5)}
|
package/dist/vue/KvWwwHeader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref as
|
|
1
|
+
import { ref as r, shallowRef as B, computed as S, onMounted as x, onBeforeUnmount as A, resolveComponent as w, resolveDirective as K, openBlock as g, createBlock as E, withCtx as b, createElementVNode as k, normalizeStyle as h, createVNode as v, Transition as I, withDirectives as y, vShow as C, createElementBlock as O, normalizeClass as G, resolveDynamicComponent as z, withModifiers as P } from "vue";
|
|
2
2
|
import R from "@kiva/kv-tokens";
|
|
3
3
|
import V from "./KvWwwHeader/KvHeaderLinkBar.js";
|
|
4
4
|
import W from "./KvWwwHeader/KvHeaderLogo.js";
|
|
@@ -8,7 +8,7 @@ import { throttle as q } from "../utils/throttle.js";
|
|
|
8
8
|
import { debounce as F } from "../utils/debounce.js";
|
|
9
9
|
import "./KvWwwHeader.css";
|
|
10
10
|
import J from "../_virtual/_plugin-vue_export-helper.js";
|
|
11
|
-
const Q = "3.
|
|
11
|
+
const Q = "3.7rem", X = ["lendMenu", "aboutUsLink"], Z = {
|
|
12
12
|
components: {
|
|
13
13
|
KvHeaderLinkBar: V,
|
|
14
14
|
KvHeaderLogo: W,
|
|
@@ -69,46 +69,42 @@ const Q = "3.75rem", X = ["lendMenu", "aboutUsLink"], Z = {
|
|
|
69
69
|
"load-lend-menu-data"
|
|
70
70
|
],
|
|
71
71
|
setup(L, { emit: o }) {
|
|
72
|
-
const n =
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
f.value && (t ? (c.value = s, clearTimeout(r), i.value !== t && (d.value = { left: 0, position: "relative" }), i.value = t, a.value = !0, E && (d.value = {
|
|
79
|
-
...E,
|
|
72
|
+
const n = r(!0), e = r(null), a = r(!1), i = B(null), d = r(null), m = r({ left: 0, position: "relative" }), s = r(!1), c = r(null), f = r(!1), l = S(() => {
|
|
73
|
+
var u, t;
|
|
74
|
+
return ((t = (u = d.value) == null ? void 0 : u.$options) == null ? void 0 : t.name) === "KvHeaderMobileMenu";
|
|
75
|
+
}), _ = F((u, t, H) => {
|
|
76
|
+
f.value && (t ? (c.value = u, i.value !== t && (m.value = { left: 0, position: "relative" }), i.value = t, a.value = !0, H && (m.value = {
|
|
77
|
+
...H,
|
|
80
78
|
position: "absolute"
|
|
81
|
-
})) : a.value && (
|
|
82
|
-
|
|
83
|
-
}, 100)));
|
|
84
|
-
}, 50), U = (s) => {
|
|
79
|
+
})) : a.value && (a.value = !1, i.value = null));
|
|
80
|
+
}, 100), T = (u) => {
|
|
85
81
|
var t;
|
|
86
|
-
(t =
|
|
82
|
+
(t = d.value) == null || t.onLoad(u);
|
|
83
|
+
}, U = () => {
|
|
84
|
+
if (!l.value) return _();
|
|
87
85
|
}, D = () => {
|
|
88
|
-
if (!_.value) return M();
|
|
89
|
-
}, N = () => {
|
|
90
86
|
o("load-lend-menu-data");
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
},
|
|
87
|
+
}, N = () => s.value && X.includes(c.value) || !s.value && l.value, M = () => {
|
|
88
|
+
s.value = (window == null ? void 0 : window.innerWidth) < R.breakpoints.md, N() && (i.value = null, a.value = !1);
|
|
89
|
+
}, p = q(M, 100);
|
|
94
90
|
return x(() => {
|
|
95
|
-
|
|
91
|
+
M(), window.addEventListener("resize", p), f.value = !0;
|
|
96
92
|
}), A(() => {
|
|
97
|
-
window.removeEventListener("resize",
|
|
93
|
+
window.removeEventListener("resize", p);
|
|
98
94
|
}), {
|
|
99
95
|
HEADER_HEIGHT: Q,
|
|
100
|
-
emitLendMenuEvent:
|
|
101
|
-
isMobile:
|
|
96
|
+
emitLendMenuEvent: D,
|
|
97
|
+
isMobile: s,
|
|
102
98
|
linksVisible: n,
|
|
103
99
|
menuOpen: a,
|
|
104
|
-
isMobileMenuActive:
|
|
105
|
-
onHover:
|
|
106
|
-
loadMenuData:
|
|
107
|
-
handleOverlayClick:
|
|
100
|
+
isMobileMenuActive: l,
|
|
101
|
+
onHover: _,
|
|
102
|
+
loadMenuData: T,
|
|
103
|
+
handleOverlayClick: U,
|
|
108
104
|
activeHeaderItem: e,
|
|
109
105
|
menuComponent: i,
|
|
110
|
-
menuComponentInstance:
|
|
111
|
-
menuPosition:
|
|
106
|
+
menuComponentInstance: d,
|
|
107
|
+
menuPosition: m
|
|
112
108
|
};
|
|
113
109
|
}
|
|
114
110
|
}, $ = {
|
|
@@ -116,8 +112,8 @@ const Q = "3.75rem", X = ["lendMenu", "aboutUsLink"], Z = {
|
|
|
116
112
|
class: "tw-px-1 tw-py-2 tw-cursor-pointer tw-absolute tw-top-1/2 tw-left-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-transition-all tw-duration-300"
|
|
117
113
|
};
|
|
118
114
|
function ee(L, o, n, e, a, i) {
|
|
119
|
-
const
|
|
120
|
-
return
|
|
115
|
+
const d = w("kv-header-link-bar"), m = w("kv-header-logo"), s = w("kv-page-container"), c = w("kv-theme-provider"), f = K("kv-track-event");
|
|
116
|
+
return g(), E(c, {
|
|
121
117
|
tag: "div",
|
|
122
118
|
class: "tw-bg-primary"
|
|
123
119
|
}, {
|
|
@@ -126,11 +122,11 @@ function ee(L, o, n, e, a, i) {
|
|
|
126
122
|
class: "tw-font-medium tw-relative",
|
|
127
123
|
style: h({ height: e.HEADER_HEIGHT })
|
|
128
124
|
}, [
|
|
129
|
-
v(
|
|
125
|
+
v(s, null, {
|
|
130
126
|
default: b(() => [
|
|
131
|
-
v(
|
|
127
|
+
v(I, { name: "header-fade" }, {
|
|
132
128
|
default: b(() => [
|
|
133
|
-
y(v(
|
|
129
|
+
y(v(d, {
|
|
134
130
|
"logged-in": n.loggedIn,
|
|
135
131
|
"basket-count": n.basketCount,
|
|
136
132
|
"login-url": n.loginUrl,
|
|
@@ -142,13 +138,13 @@ function ee(L, o, n, e, a, i) {
|
|
|
142
138
|
balance: n.balance,
|
|
143
139
|
onItemHover: e.onHover
|
|
144
140
|
}, null, 8, ["logged-in", "basket-count", "login-url", "open-menu-item", "my-dashboard-url", "lender-name", "lender-image-url", "is-mobile", "balance", "onItemHover"]), [
|
|
145
|
-
[
|
|
141
|
+
[C, e.linksVisible]
|
|
146
142
|
])
|
|
147
143
|
]),
|
|
148
144
|
_: 1
|
|
149
145
|
}),
|
|
150
|
-
y((
|
|
151
|
-
v(
|
|
146
|
+
y((g(), O("a", $, [
|
|
147
|
+
v(m)
|
|
152
148
|
])), [
|
|
153
149
|
[f, ["TopNav", "click-Logo"]]
|
|
154
150
|
])
|
|
@@ -156,23 +152,23 @@ function ee(L, o, n, e, a, i) {
|
|
|
156
152
|
_: 1
|
|
157
153
|
})
|
|
158
154
|
], 4),
|
|
159
|
-
v(
|
|
155
|
+
v(I, { name: "header-fade" }, {
|
|
160
156
|
default: b(() => [
|
|
161
157
|
y(k("div", {
|
|
162
|
-
class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen",
|
|
158
|
+
class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen tw-overflow-auto",
|
|
163
159
|
style: h({ top: e.HEADER_HEIGHT }),
|
|
164
|
-
onTouchstart: o[4] || (o[4] = (...
|
|
160
|
+
onTouchstart: o[4] || (o[4] = (...l) => e.handleOverlayClick && e.handleOverlayClick(...l))
|
|
165
161
|
}, [
|
|
166
162
|
k("div", {
|
|
167
|
-
class: G(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
|
|
163
|
+
class: G(["tw-bg-primary tw-overflow-y-auto tw-w-full md:tw-w-auto tw-rounded-none md:tw-rounded-b-sm", { "tw-min-h-dvh": e.isMobileMenuActive }]),
|
|
168
164
|
style: h({
|
|
169
165
|
...e.menuPosition,
|
|
170
166
|
maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.HEADER_HEIGHT})`
|
|
171
167
|
}),
|
|
172
|
-
|
|
173
|
-
|
|
168
|
+
onMouseenter: o[2] || (o[2] = (l) => e.onHover(e.activeHeaderItem, e.menuComponent)),
|
|
169
|
+
onMouseleave: o[3] || (o[3] = (l) => e.onHover())
|
|
174
170
|
}, [
|
|
175
|
-
(
|
|
171
|
+
(g(), E(z(e.menuComponent), {
|
|
176
172
|
ref: "menuComponentInstance",
|
|
177
173
|
"logged-in": n.loggedIn,
|
|
178
174
|
"login-url": n.loginUrl,
|
|
@@ -184,13 +180,13 @@ function ee(L, o, n, e, a, i) {
|
|
|
184
180
|
"is-mobile": e.isMobile,
|
|
185
181
|
"countries-not-lent-to-url": n.countriesNotLentToUrl,
|
|
186
182
|
onLoadLendMenuData: e.emitLendMenuEvent,
|
|
187
|
-
onClosingMenu: o[0] || (o[0] = (
|
|
183
|
+
onClosingMenu: o[0] || (o[0] = (l) => e.onHover()),
|
|
188
184
|
onTouchstart: o[1] || (o[1] = P(() => {
|
|
189
185
|
}, ["stop"]))
|
|
190
186
|
}, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "onLoadLendMenuData"]))
|
|
191
187
|
], 38)
|
|
192
188
|
], 36), [
|
|
193
|
-
[
|
|
189
|
+
[C, e.menuOpen]
|
|
194
190
|
])
|
|
195
191
|
]),
|
|
196
192
|
_: 1
|
|
@@ -199,7 +195,7 @@ function ee(L, o, n, e, a, i) {
|
|
|
199
195
|
_: 1
|
|
200
196
|
});
|
|
201
197
|
}
|
|
202
|
-
const me = /* @__PURE__ */ J(Z, [["render", ee], ["__scopeId", "data-v-
|
|
198
|
+
const me = /* @__PURE__ */ J(Z, [["render", ee], ["__scopeId", "data-v-f1e45d4f"]]);
|
|
203
199
|
export {
|
|
204
200
|
me as default
|
|
205
201
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "6.62.
|
|
3
|
+
"version": "6.62.3",
|
|
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": "15c0df5f2206377bafb9f34d44c72d1649b145cf"
|
|
118
118
|
}
|