@kiva/kv-components 8.17.1 → 8.18.1
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/index.js +232 -227
- package/dist/utils/imageUtils.d.ts +19 -0
- package/dist/utils/imageUtils.js +70 -23
- package/dist/vue/KvImageUpload.css +1 -0
- package/dist/vue/KvImageUpload.js +72 -0
- package/dist/vue/KvImageUpload2.js +150 -0
- package/dist/vue/KvPieChartV2.vue.d.ts +1 -1
- package/dist/vue/KvWwwHeaderBasic/LinkBar.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/LinkBar.js +40 -40
- package/dist/vue/KvWwwHeaderBasic/LinkBar.vue.d.ts +3 -0
- package/dist/vue/KvWwwHeaderBasic/LinkBar2.js +82 -67
- package/dist/vue/KvWwwHeaderBasic/MobileMenu.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/MobileMenu.js +18 -17
- package/dist/vue/KvWwwHeaderBasic/MobileMenu.vue.d.ts +3 -0
- package/dist/vue/KvWwwHeaderBasic/MobileMenu2.js +13 -10
- package/dist/vue/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import p from "./KvImageUpload2.js";
|
|
2
|
+
import { resolveComponent as f, openBlock as i, createElementBlock as n, createElementVNode as a, normalizeClass as l, normalizeStyle as g, renderSlot as b, createVNode as c, withModifiers as w, createCommentVNode as m } from "vue";
|
|
3
|
+
import "./KvImageUpload.css";
|
|
4
|
+
import u from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const v = { class: "tw-flex tw-flex-col" }, h = ["src", "alt"], C = ["accept", "aria-label"];
|
|
6
|
+
function k(d, t, s, e, I, _) {
|
|
7
|
+
const r = f("kv-material-icon");
|
|
8
|
+
return i(), n("div", v, [
|
|
9
|
+
a("div", {
|
|
10
|
+
class: l(["kv-image-upload tw-relative", e.shapeClass]),
|
|
11
|
+
style: g(e.containerStyle)
|
|
12
|
+
}, [
|
|
13
|
+
e.previewImage ? (i(), n("img", {
|
|
14
|
+
key: 0,
|
|
15
|
+
src: e.previewImage,
|
|
16
|
+
alt: s.imageAlt,
|
|
17
|
+
class: l(["tw-w-full tw-h-full tw-object-cover", e.shapeClass])
|
|
18
|
+
}, null, 10, h)) : b(d.$slots, "fallback-image", { key: 1 }, () => [
|
|
19
|
+
a("div", {
|
|
20
|
+
class: l(["kv-image-upload__placeholder tw-w-full tw-h-full tw-bg-eco-green-1 tw-p-0.5", e.shapeClass])
|
|
21
|
+
}, [
|
|
22
|
+
a("div", {
|
|
23
|
+
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])
|
|
24
|
+
}, [
|
|
25
|
+
c(r, {
|
|
26
|
+
icon: e.mdiCameraPlusOutline,
|
|
27
|
+
class: "tw-w-3.5"
|
|
28
|
+
}, null, 8, ["icon"]),
|
|
29
|
+
t[3] || (t[3] = a("span", { class: "tw-text-label" }, " Add a photo ", -1))
|
|
30
|
+
], 2)
|
|
31
|
+
], 2)
|
|
32
|
+
], !0),
|
|
33
|
+
a("input", {
|
|
34
|
+
ref: "fileInput",
|
|
35
|
+
type: "file",
|
|
36
|
+
accept: e.acceptAttr,
|
|
37
|
+
"aria-label": e.inputLabel,
|
|
38
|
+
class: "tw-absolute tw-inset-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer",
|
|
39
|
+
onChange: t[0] || (t[0] = (...o) => e.handleFileChange && e.handleFileChange(...o))
|
|
40
|
+
}, null, 40, C),
|
|
41
|
+
e.previewImage || s.showEditIcon ? (i(), n("button", {
|
|
42
|
+
key: 2,
|
|
43
|
+
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 }]),
|
|
44
|
+
type: "button",
|
|
45
|
+
"aria-hidden": "true",
|
|
46
|
+
tabindex: "-1",
|
|
47
|
+
onClick: t[1] || (t[1] = w((...o) => e.openFileInput && e.openFileInput(...o), ["stop"]))
|
|
48
|
+
}, [
|
|
49
|
+
c(r, {
|
|
50
|
+
icon: e.mdiPencil,
|
|
51
|
+
class: "tw-w-2"
|
|
52
|
+
}, null, 8, ["icon"])
|
|
53
|
+
], 2)) : m("", !0),
|
|
54
|
+
e.previewImage ? (i(), n("button", {
|
|
55
|
+
key: 3,
|
|
56
|
+
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 }]),
|
|
57
|
+
type: "button",
|
|
58
|
+
"aria-label": "Remove Image",
|
|
59
|
+
onClick: t[2] || (t[2] = w((...o) => e.removeImage && e.removeImage(...o), ["stop"]))
|
|
60
|
+
}, [
|
|
61
|
+
c(r, {
|
|
62
|
+
icon: e.mdiClose,
|
|
63
|
+
class: "tw-w-2"
|
|
64
|
+
}, null, 8, ["icon"])
|
|
65
|
+
], 2)) : m("", !0)
|
|
66
|
+
], 6)
|
|
67
|
+
]);
|
|
68
|
+
}
|
|
69
|
+
const A = /* @__PURE__ */ u(p, [["render", k], ["__scopeId", "data-v-ea802cf6"]]);
|
|
70
|
+
export {
|
|
71
|
+
A as default
|
|
72
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { toRefs as S, ref as u, watch as x, computed as l } from "vue";
|
|
2
|
+
import { mdiPencil as F, mdiClose as w, mdiCameraPlusOutline as I } from "@mdi/js";
|
|
3
|
+
import C from "./KvMaterialIcon.js";
|
|
4
|
+
import { DEFAULT_ACCEPTED_IMAGE_TYPES as b, validateImageFile as R, cropResizeImageToDataUrl as T } from "../utils/imageUtils.js";
|
|
5
|
+
const U = {
|
|
6
|
+
components: {
|
|
7
|
+
KvMaterialIcon: C
|
|
8
|
+
},
|
|
9
|
+
props: {
|
|
10
|
+
/**
|
|
11
|
+
* URL of an initial image to preview.
|
|
12
|
+
*/
|
|
13
|
+
imageUrl: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: ""
|
|
16
|
+
},
|
|
17
|
+
/**
|
|
18
|
+
* Target crop aspect ratio (width / height). `1` = square, `4 / 3` ≈ 1.333.
|
|
19
|
+
*/
|
|
20
|
+
aspectRatio: {
|
|
21
|
+
type: Number,
|
|
22
|
+
default: 1
|
|
23
|
+
},
|
|
24
|
+
/**
|
|
25
|
+
* Preview shape. `square (default), circle`
|
|
26
|
+
*/
|
|
27
|
+
shape: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: "square",
|
|
30
|
+
validator(e) {
|
|
31
|
+
return ["square", "circle"].includes(e);
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
/**
|
|
35
|
+
* Maximum allowed file size, in megabytes.
|
|
36
|
+
*/
|
|
37
|
+
maxSizeMb: {
|
|
38
|
+
type: Number,
|
|
39
|
+
default: 1
|
|
40
|
+
},
|
|
41
|
+
/**
|
|
42
|
+
* Output resolution used when generating the preview.
|
|
43
|
+
*/
|
|
44
|
+
maxDimension: {
|
|
45
|
+
type: Number,
|
|
46
|
+
default: 1e3
|
|
47
|
+
},
|
|
48
|
+
/**
|
|
49
|
+
* Maximum rendered preview size, in pixels (height; width follows aspectRatio).
|
|
50
|
+
* Note: the parent element must supply a width; this component sets only
|
|
51
|
+
* max-width/max-height + aspect-ratio and will not stretch to fill a sizeless container.
|
|
52
|
+
*/
|
|
53
|
+
previewSize: {
|
|
54
|
+
type: Number,
|
|
55
|
+
default: 200
|
|
56
|
+
},
|
|
57
|
+
/**
|
|
58
|
+
* Accepted MIME types for both the file input and validation.
|
|
59
|
+
*/
|
|
60
|
+
acceptedFileTypes: {
|
|
61
|
+
type: Array,
|
|
62
|
+
default: () => [...b]
|
|
63
|
+
},
|
|
64
|
+
/**
|
|
65
|
+
* Whether to show the edit (pencil) affordance in the blank state, before an image is
|
|
66
|
+
* selected. Off by default. Once an image is present the edit icon always shows
|
|
67
|
+
* (bottom-right, below the remove icon), regardless of this prop.
|
|
68
|
+
*/
|
|
69
|
+
showEditIcon: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: !1
|
|
72
|
+
},
|
|
73
|
+
/**
|
|
74
|
+
* Alt text for the preview image.
|
|
75
|
+
*/
|
|
76
|
+
imageAlt: {
|
|
77
|
+
type: String,
|
|
78
|
+
default: "Image preview"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
emits: [
|
|
82
|
+
/**
|
|
83
|
+
* Emitted with `{ file }` when a valid file is selected or dropped.
|
|
84
|
+
*/
|
|
85
|
+
"file-uploaded",
|
|
86
|
+
/**
|
|
87
|
+
* Emitted when the current image is removed.
|
|
88
|
+
*/
|
|
89
|
+
"file-removed",
|
|
90
|
+
/**
|
|
91
|
+
* Emitted with `{ type, message }` when validation or processing fails.
|
|
92
|
+
*/
|
|
93
|
+
"file-error"
|
|
94
|
+
],
|
|
95
|
+
setup(e, { emit: r }) {
|
|
96
|
+
const { imageUrl: c } = S(e), a = u(c.value || ""), s = u(null);
|
|
97
|
+
x(c, (t) => {
|
|
98
|
+
a.value = t || "";
|
|
99
|
+
});
|
|
100
|
+
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(() => ({
|
|
101
|
+
aspectRatio: String(e.aspectRatio),
|
|
102
|
+
maxHeight: `${e.previewSize}px`,
|
|
103
|
+
maxWidth: `${e.previewSize * e.aspectRatio}px`
|
|
104
|
+
})), v = () => {
|
|
105
|
+
var t;
|
|
106
|
+
(t = s.value) == null || t.click();
|
|
107
|
+
}, y = () => {
|
|
108
|
+
a.value = "", r("file-removed");
|
|
109
|
+
}, h = async (t) => {
|
|
110
|
+
const { valid: o, error: i } = R(t, {
|
|
111
|
+
maxSizeMb: e.maxSizeMb,
|
|
112
|
+
acceptedFileTypes: e.acceptedFileTypes
|
|
113
|
+
});
|
|
114
|
+
if (!o && i) {
|
|
115
|
+
r("file-error", i);
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
try {
|
|
119
|
+
a.value = await T(t, {
|
|
120
|
+
aspectRatio: e.aspectRatio,
|
|
121
|
+
maxDimension: e.maxDimension
|
|
122
|
+
}), r("file-uploaded", { file: t });
|
|
123
|
+
} catch {
|
|
124
|
+
r("file-error", { type: "other", message: "Failed to read file" });
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
return {
|
|
128
|
+
mdiPencil: F,
|
|
129
|
+
mdiClose: w,
|
|
130
|
+
mdiCameraPlusOutline: I,
|
|
131
|
+
fileInput: s,
|
|
132
|
+
previewImage: a,
|
|
133
|
+
isCircle: m,
|
|
134
|
+
shapeClass: d,
|
|
135
|
+
acceptAttr: p,
|
|
136
|
+
inputLabel: f,
|
|
137
|
+
containerStyle: g,
|
|
138
|
+
openFileInput: v,
|
|
139
|
+
removeImage: y,
|
|
140
|
+
handleFileChange: (t) => {
|
|
141
|
+
var n;
|
|
142
|
+
const o = t.target, i = (n = o.files) == null ? void 0 : n[0];
|
|
143
|
+
i && (h(i), o.value = "");
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
export {
|
|
149
|
+
U as default
|
|
150
|
+
};
|
|
@@ -115,8 +115,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
115
115
|
}>> & Readonly<{}>, {
|
|
116
116
|
values: KvPieChartV2Item[];
|
|
117
117
|
loading: boolean;
|
|
118
|
-
initialDelay: number;
|
|
119
118
|
strokeWidth: number;
|
|
119
|
+
initialDelay: number;
|
|
120
120
|
unit: PieChartUnit;
|
|
121
121
|
shownSegments: number;
|
|
122
122
|
segmentGap: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.link-bar[data-v-
|
|
1
|
+
.link-bar[data-v-d90acda7]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-d90acda7]{position:absolute;top:50%;left:50%;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}@media (min-width: 45.875rem){.link-bar[data-v-d90acda7]{display:grid;-moz-column-gap:1rem;column-gap:1rem;grid-template-areas:"logo lend right" "search search search";grid-template-columns:1fr auto auto;grid-template-rows:4rem auto;row-gap:.5rem}.link-bar__logo[data-v-d90acda7]{position:static;--tw-translate-x: 0;--tw-translate-y: 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));grid-area:logo;justify-self:start}.link-bar__lend[data-v-d90acda7]{grid-area:lend}.link-bar__search[data-v-d90acda7]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-d90acda7]{grid-area:right}}@media (min-width: 64rem){.link-bar[data-v-d90acda7]{-moz-column-gap:1.25rem;column-gap:1.25rem;grid-template-areas:"logo lend search right";grid-template-columns:auto auto 1fr auto;grid-template-rows:4rem}.link-bar__search[data-v-d90acda7]{margin-bottom:0}}.header-link[data-v-d90acda7]{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-d90acda7]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as d, openBlock as a, createElementBlock as i, createElementVNode as
|
|
1
|
+
import M from "./LinkBar2.js";
|
|
2
|
+
import { resolveComponent as d, openBlock as a, createElementBlock as i, createElementVNode as r, withModifiers as g, createVNode as l, withCtx as w, createTextVNode as s, Fragment as y, renderList as p, toDisplayString as m, createCommentVNode as v, withDirectives as x, vShow as L, createBlock as B } from "vue";
|
|
3
3
|
import "./LinkBar.css";
|
|
4
4
|
import O from "../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const S = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, T = ["href", "data-testid", "onClick"], D = ["href"], U = { class: "tw-hidden md:tw-flex tw-items-center" }, H = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none" },
|
|
5
|
+
const S = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml-auto md:tw-ml-0 tw-gap-1 md:tw-gap-2 lg:tw-gap-2.5" }, T = ["href", "data-testid", "onClick"], D = ["href"], U = { class: "tw-hidden md:tw-flex tw-items-center" }, H = { class: "tw-bg-secondary tw-rounded-xs tw-py-0.5 tw-px-1 tw-mr-1 tw-leading-none" }, A = { class: "tw-relative tw-flex md:tw-hidden tw-items-center tw-text-eco-green-4" }, I = {
|
|
6
6
|
key: 0,
|
|
7
7
|
class: "tw-absolute tw-w-4 tw-h-4 tw-pt-0.5 tw-flex tw-items-center tw-justify-center tw-text-white tw-text-small tw-font-medium tw-pointer-events-none"
|
|
8
8
|
}, K = { class: "tw-hidden md:tw-block" }, N = {
|
|
@@ -15,30 +15,30 @@ const S = { class: "link-bar__right tw-flex tw-items-center tw-justify-end tw-ml
|
|
|
15
15
|
key: 2,
|
|
16
16
|
class: "tw-w-3 tw-h-3 tw-rounded-full tw-overflow-hidden"
|
|
17
17
|
};
|
|
18
|
-
function V(
|
|
19
|
-
const c = d("kv-material-icon"), b = d("kv-header-logo"), u = d("kv-header-dropdown-link"), f = d("search-bar"), _ = d("kv-button"),
|
|
18
|
+
function V(k, n, o, e, j, X) {
|
|
19
|
+
const c = d("kv-material-icon"), b = d("kv-header-logo"), u = d("kv-header-dropdown-link"), f = d("search-bar"), _ = d("kv-button"), h = d("kv-loading-placeholder"), C = d("kv-user-avatar");
|
|
20
20
|
return a(), i("div", {
|
|
21
21
|
class: "link-bar tw-min-h-[4rem] tw-font-medium tw-relative",
|
|
22
22
|
onTouchstart: n[12] || (n[12] = (...t) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...t))
|
|
23
23
|
}, [
|
|
24
|
-
|
|
24
|
+
r("button", {
|
|
25
25
|
type: "button",
|
|
26
26
|
"aria-label": "Open menu",
|
|
27
27
|
class: "header-link link-bar__hamburger tw-inline-flex md:tw-hidden",
|
|
28
28
|
onMouseover: n[0] || (n[0] = (t) => e.handleOnHover("menuButton", e.MobileMenu)),
|
|
29
|
-
onTouchstart: n[1] || (n[1] =
|
|
29
|
+
onTouchstart: n[1] || (n[1] = g((t) => e.handleTouchStart("menuButton", e.MobileMenu), ["stop", "prevent"]))
|
|
30
30
|
}, [
|
|
31
|
-
|
|
31
|
+
l(c, { icon: e.mdiMenu }, null, 8, ["icon"])
|
|
32
32
|
], 32),
|
|
33
|
-
|
|
33
|
+
r("a", {
|
|
34
34
|
href: "/",
|
|
35
35
|
"aria-label": "Kiva home",
|
|
36
36
|
class: "link-bar__logo tw-px-1 tw-py-2 tw-cursor-pointer",
|
|
37
37
|
onClick: n[2] || (n[2] = (...t) => e.onLogoClick && e.onLogoClick(...t))
|
|
38
38
|
}, [
|
|
39
|
-
|
|
39
|
+
l(b)
|
|
40
40
|
]),
|
|
41
|
-
|
|
41
|
+
l(u, {
|
|
42
42
|
class: "link-bar__lend",
|
|
43
43
|
"ref-name": "lendButton",
|
|
44
44
|
href: e.lendUrl,
|
|
@@ -50,28 +50,28 @@ function V(v, n, o, e, j, X) {
|
|
|
50
50
|
onMouseleave: n[3] || (n[3] = (t) => e.handleMouseOut("lendButton")),
|
|
51
51
|
onUserTap: e.handleTouchStart
|
|
52
52
|
}, {
|
|
53
|
-
default:
|
|
53
|
+
default: w(() => n[13] || (n[13] = [
|
|
54
54
|
s(" Lend ")
|
|
55
55
|
])),
|
|
56
56
|
_: 1
|
|
57
57
|
}, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
|
|
58
|
-
|
|
58
|
+
l(f, {
|
|
59
59
|
class: "link-bar__search tw-min-w-0 tw-hidden md:tw-block",
|
|
60
60
|
"search-suggestions": o.searchSuggestions,
|
|
61
61
|
"app-origin": o.appOrigin,
|
|
62
62
|
"is-mobile": o.isMobile,
|
|
63
|
-
onLoadSearchData: n[4] || (n[4] = (t) =>
|
|
64
|
-
onSearchSubmit: n[5] || (n[5] = (t) =>
|
|
63
|
+
onLoadSearchData: n[4] || (n[4] = (t) => k.$emit("load-search-data")),
|
|
64
|
+
onSearchSubmit: n[5] || (n[5] = (t) => k.$emit("search-submit", t))
|
|
65
65
|
}, null, 8, ["search-suggestions", "app-origin", "is-mobile"]),
|
|
66
|
-
|
|
67
|
-
(a(!0), i(
|
|
66
|
+
r("div", S, [
|
|
67
|
+
(a(!0), i(y, null, p(e.visiblePrimaryLinks, (t) => (a(), i("a", {
|
|
68
68
|
key: t.id,
|
|
69
69
|
href: t.href,
|
|
70
70
|
class: "header-link tw-hidden md:tw-block",
|
|
71
71
|
"data-testid": `header-link-${t.id}`,
|
|
72
72
|
onClick: (F) => e.onPrimaryClick(t)
|
|
73
73
|
}, m(t.label), 9, T))), 128)),
|
|
74
|
-
|
|
74
|
+
l(u, {
|
|
75
75
|
"ref-name": "aboutLink",
|
|
76
76
|
class: "tw-hidden md:tw-block",
|
|
77
77
|
"menu-component": e.AboutMenu,
|
|
@@ -83,79 +83,79 @@ function V(v, n, o, e, j, X) {
|
|
|
83
83
|
onMouseleave: n[6] || (n[6] = (t) => e.handleMouseOut("aboutLink")),
|
|
84
84
|
onUserTap: e.handleTouchStart
|
|
85
85
|
}, {
|
|
86
|
-
default:
|
|
86
|
+
default: w(() => n[14] || (n[14] = [
|
|
87
87
|
s(" About ")
|
|
88
88
|
])),
|
|
89
89
|
_: 1
|
|
90
90
|
}, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
|
|
91
|
-
o.loggedIn ?
|
|
91
|
+
o.loggedIn ? v("", !0) : (a(), i("a", {
|
|
92
92
|
key: 0,
|
|
93
93
|
href: o.loginUrl,
|
|
94
94
|
class: "header-link",
|
|
95
95
|
"data-testid": "header-login",
|
|
96
96
|
onClick: n[7] || (n[7] = (...t) => e.onLoginClick && e.onLoginClick(...t))
|
|
97
97
|
}, "Log in", 8, D)),
|
|
98
|
-
|
|
99
|
-
key: 1,
|
|
98
|
+
x(r("a", {
|
|
100
99
|
href: "/basket",
|
|
101
100
|
class: "header-link tw-flex tw-items-center",
|
|
102
101
|
"data-testid": "header-basket",
|
|
103
102
|
onClick: n[8] || (n[8] = (...t) => e.onBasketClick && e.onBasketClick(...t))
|
|
104
103
|
}, [
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
r("span", U, [
|
|
105
|
+
r("span", H, m(o.basketCount), 1),
|
|
107
106
|
n[15] || (n[15] = s(" Basket "))
|
|
108
107
|
]),
|
|
109
|
-
|
|
110
|
-
o.isBasketDataLoading ?
|
|
111
|
-
|
|
108
|
+
r("span", A, [
|
|
109
|
+
o.isBasketDataLoading ? v("", !0) : (a(), i("span", I, m(o.basketCount), 1)),
|
|
110
|
+
l(c, {
|
|
112
111
|
icon: e.mdiBriefcase,
|
|
113
112
|
class: "tw-w-4 tw-h-4 tw-pointer-events-none"
|
|
114
113
|
}, null, 8, ["icon"]),
|
|
115
|
-
n[16] || (n[16] =
|
|
114
|
+
n[16] || (n[16] = r("span", { class: "tw-sr-only" }, "Basket", -1))
|
|
116
115
|
])
|
|
117
|
-
], 512)
|
|
116
|
+
], 512), [
|
|
118
117
|
[L, o.basketCount > 0 || o.isBasketDataLoading]
|
|
119
|
-
])
|
|
120
|
-
|
|
121
|
-
|
|
118
|
+
]),
|
|
119
|
+
r("div", K, [
|
|
120
|
+
l(_, {
|
|
122
121
|
variant: "secondary",
|
|
123
122
|
href: "/donate/supportus",
|
|
124
123
|
class: "tw-whitespace-nowrap",
|
|
125
124
|
"data-testid": "header-support-kiva",
|
|
126
125
|
onClick: e.onSupportKivaClick
|
|
127
126
|
}, {
|
|
128
|
-
default:
|
|
127
|
+
default: w(() => n[17] || (n[17] = [
|
|
129
128
|
s(" Support Kiva ")
|
|
130
129
|
])),
|
|
131
130
|
_: 1
|
|
132
131
|
}, 8, ["onClick"])
|
|
133
132
|
]),
|
|
134
133
|
o.loggedIn ? (a(), i("div", {
|
|
135
|
-
key:
|
|
134
|
+
key: 1,
|
|
136
135
|
ref: "avatarMenu",
|
|
136
|
+
"data-testid": "header-avatar-menu",
|
|
137
137
|
class: "tw-flex tw-items-center tw-gap-1 tw-cursor-pointer tw-py-1",
|
|
138
138
|
onMouseenter: n[9] || (n[9] = (t) => e.handleOnHover("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX())),
|
|
139
139
|
onMouseleave: n[10] || (n[10] = (t) => e.handleMouseOut("avatarMenu")),
|
|
140
|
-
onTouchstart: n[11] || (n[11] =
|
|
140
|
+
onTouchstart: n[11] || (n[11] = g((t) => e.handleTouchStart("avatarMenu", e.MyKivaMenu, e.getAvatarMenuPosition(), e.getAvatarTriggerCenterX()), ["stop"]))
|
|
141
141
|
}, [
|
|
142
142
|
o.isUserDataLoading ? (a(), i("div", N, [
|
|
143
|
-
|
|
143
|
+
l(h)
|
|
144
144
|
])) : (a(), i("span", E, m(e.formattedBalance), 1)),
|
|
145
145
|
o.isUserDataLoading ? (a(), i("div", P, [
|
|
146
|
-
|
|
147
|
-
])) : (a(), B(
|
|
146
|
+
l(h)
|
|
147
|
+
])) : (a(), B(C, {
|
|
148
148
|
key: 3,
|
|
149
149
|
class: "tw-w-3 tw-h-3",
|
|
150
150
|
"lender-name": o.lenderName,
|
|
151
151
|
"lender-image-url": o.lenderImageUrl,
|
|
152
152
|
"is-small": ""
|
|
153
153
|
}, null, 8, ["lender-name", "lender-image-url"]))
|
|
154
|
-
], 544)) :
|
|
154
|
+
], 544)) : v("", !0)
|
|
155
155
|
])
|
|
156
156
|
], 32);
|
|
157
157
|
}
|
|
158
|
-
const Q = /* @__PURE__ */ O(
|
|
158
|
+
const Q = /* @__PURE__ */ O(M, [["render", V], ["__scopeId", "data-v-d90acda7"]]);
|
|
159
159
|
export {
|
|
160
160
|
Q as default
|
|
161
161
|
};
|
|
@@ -196,6 +196,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
196
196
|
};
|
|
197
197
|
}>, {
|
|
198
198
|
onClose: () => void;
|
|
199
|
+
onAboutToggle: ({ open }: {
|
|
200
|
+
open: boolean;
|
|
201
|
+
}) => void;
|
|
199
202
|
onLinkClick: (action: string) => void;
|
|
200
203
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "closing-menu"[], "closing-menu", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
201
204
|
loggedIn: {
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { defineAsyncComponent as
|
|
2
|
-
import { mdiMenu as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { PRIMARY_LINKS as
|
|
11
|
-
import
|
|
12
|
-
const
|
|
1
|
+
import { defineAsyncComponent as r, inject as P, ref as d, computed as i } from "vue";
|
|
2
|
+
import { mdiMenu as D, mdiChevronDown as x, mdiBriefcase as R } from "@mdi/js";
|
|
3
|
+
import $ from "numeral";
|
|
4
|
+
import E from "../KvMaterialIcon.js";
|
|
5
|
+
import H from "../KvUserAvatar.js";
|
|
6
|
+
import _ from "../KvLoadingPlaceholder.js";
|
|
7
|
+
import j from "../KvButton.js";
|
|
8
|
+
import F from "../KvWwwHeader/KvHeaderLogo.js";
|
|
9
|
+
import G from "../KvWwwHeader/KvHeaderDropdownLink.js";
|
|
10
|
+
import { PRIMARY_LINKS as W } from "../../utils/headerNavLinks.js";
|
|
11
|
+
import X from "./SearchBar.js";
|
|
12
|
+
const v = r(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), p = r(() => import("./AboutMenu.js")), Y = r(() => import("./MyKivaMenu.js")), q = r(() => import("./MobileMenu.js")), ie = {
|
|
13
13
|
name: "LinkBar",
|
|
14
14
|
components: {
|
|
15
|
-
KvMaterialIcon:
|
|
16
|
-
KvUserAvatar:
|
|
17
|
-
KvLoadingPlaceholder:
|
|
18
|
-
KvButton:
|
|
19
|
-
KvHeaderLogo:
|
|
20
|
-
KvHeaderDropdownLink:
|
|
21
|
-
SearchBar:
|
|
15
|
+
KvMaterialIcon: E,
|
|
16
|
+
KvUserAvatar: H,
|
|
17
|
+
KvLoadingPlaceholder: _,
|
|
18
|
+
KvButton: j,
|
|
19
|
+
KvHeaderLogo: F,
|
|
20
|
+
KvHeaderDropdownLink: G,
|
|
21
|
+
SearchBar: X
|
|
22
22
|
},
|
|
23
23
|
props: {
|
|
24
24
|
loggedIn: { type: Boolean, default: !1 },
|
|
@@ -41,74 +41,89 @@ const d = l(() => import("../KvWwwHeader/LendMenu/KvLendMenu.js")), m = l(() =>
|
|
|
41
41
|
openMenuItem: { type: [Object, Function], default: null }
|
|
42
42
|
},
|
|
43
43
|
emits: ["item-hover", "load-search-data", "search-submit"],
|
|
44
|
-
setup(t, { emit:
|
|
45
|
-
const
|
|
46
|
-
}),
|
|
47
|
-
function
|
|
44
|
+
setup(t, { emit: l }) {
|
|
45
|
+
const o = P("$kvTrackEvent", () => {
|
|
46
|
+
}), a = d(null), u = d(null);
|
|
47
|
+
function g() {
|
|
48
48
|
const e = u.value, n = e == null ? void 0 : e.getBoundingClientRect();
|
|
49
49
|
return n ? t.isMobile ? { right: "0" } : { right: `${window.innerWidth - n.right}px` } : null;
|
|
50
50
|
}
|
|
51
|
-
function
|
|
51
|
+
function b() {
|
|
52
52
|
if (t.isMobile) return null;
|
|
53
53
|
const e = u.value, n = e == null ? void 0 : e.getBoundingClientRect();
|
|
54
54
|
return n ? n.left + n.width / 2 : null;
|
|
55
55
|
}
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
const h = i(() => W.filter((e) => e.visibility === "visitor" ? !t.loggedIn : e.visibility === "loggedIn" ? t.loggedIn : !0)), k = i(() => t.isMobile ? void 0 : "/lend-by-category"), y = i(() => $(Math.floor(t.balance)).format("$0")), M = i(() => t.openMenuItem === v ? t.openMenuItem : null), B = i(() => t.openMenuItem === p ? t.openMenuItem : null), L = {
|
|
57
|
+
menuButton: { action: "hover-Mobile-menu", label: "Mobile" },
|
|
58
|
+
lendButton: { action: "hover-Lend-menu", label: "Lend" },
|
|
59
|
+
aboutLink: { action: "hover-About-menu", label: "About" },
|
|
60
|
+
avatarMenu: { action: "hover-User-menu", label: "User" }
|
|
61
|
+
}, I = {
|
|
62
|
+
menuButton: { action: "close-Mobile-menu", label: "Mobile" }
|
|
63
|
+
};
|
|
64
|
+
function s(e) {
|
|
65
|
+
const n = L[e];
|
|
66
|
+
n && o("TopNav", n.action, n.label);
|
|
67
|
+
}
|
|
68
|
+
function m(e) {
|
|
69
|
+
const n = I[e];
|
|
70
|
+
n && o("TopNav", n.action, n.label);
|
|
71
|
+
}
|
|
72
|
+
function T(e, n, c = null, f = null) {
|
|
73
|
+
navigator.maxTouchPoints || (a.value !== e && s(e), a.value = e, l("item-hover", e, n, c, f));
|
|
59
74
|
}
|
|
60
|
-
function
|
|
61
|
-
navigator.maxTouchPoints ||
|
|
75
|
+
function C(e) {
|
|
76
|
+
navigator.maxTouchPoints || a.value === e && (m(e), a.value = null, l("item-hover"));
|
|
62
77
|
}
|
|
63
|
-
function
|
|
64
|
-
|
|
78
|
+
function S(e, n, c = null, f = null) {
|
|
79
|
+
a.value === e ? (m(e), a.value = null, l("item-hover")) : (s(e), a.value = e, l("item-hover", e, n, c, f));
|
|
65
80
|
}
|
|
66
|
-
function
|
|
67
|
-
e.target === e.currentTarget &&
|
|
81
|
+
function N(e) {
|
|
82
|
+
e.target === e.currentTarget && l("item-hover");
|
|
68
83
|
}
|
|
69
|
-
function
|
|
70
|
-
|
|
84
|
+
function K(e) {
|
|
85
|
+
o(e.track[0], e.track[1]);
|
|
71
86
|
}
|
|
72
|
-
function
|
|
73
|
-
|
|
87
|
+
function U() {
|
|
88
|
+
o("TopNav", "click-Log-in");
|
|
74
89
|
}
|
|
75
|
-
function
|
|
76
|
-
|
|
90
|
+
function A() {
|
|
91
|
+
o("TopNav", "click-Basket");
|
|
77
92
|
}
|
|
78
|
-
function
|
|
79
|
-
|
|
93
|
+
function O() {
|
|
94
|
+
o("TopNav", "click-Support-Kiva");
|
|
80
95
|
}
|
|
81
|
-
function
|
|
82
|
-
|
|
96
|
+
function w() {
|
|
97
|
+
o("TopNav", "click-Logo");
|
|
83
98
|
}
|
|
84
99
|
return {
|
|
85
|
-
mdiMenu:
|
|
86
|
-
mdiChevronDown:
|
|
87
|
-
mdiBriefcase:
|
|
88
|
-
KvLendMenu:
|
|
89
|
-
AboutMenu:
|
|
90
|
-
MyKivaMenu:
|
|
91
|
-
MobileMenu:
|
|
100
|
+
mdiMenu: D,
|
|
101
|
+
mdiChevronDown: x,
|
|
102
|
+
mdiBriefcase: R,
|
|
103
|
+
KvLendMenu: v,
|
|
104
|
+
AboutMenu: p,
|
|
105
|
+
MyKivaMenu: Y,
|
|
106
|
+
MobileMenu: q,
|
|
92
107
|
avatarMenu: u,
|
|
93
|
-
getAvatarMenuPosition:
|
|
94
|
-
getAvatarTriggerCenterX:
|
|
95
|
-
visiblePrimaryLinks:
|
|
96
|
-
lendUrl:
|
|
97
|
-
formattedBalance:
|
|
98
|
-
lendOpenItem:
|
|
99
|
-
aboutOpenItem:
|
|
100
|
-
handleOnHover:
|
|
101
|
-
handleMouseOut:
|
|
102
|
-
handleTouchStart:
|
|
103
|
-
handleEmptySpaceClick:
|
|
104
|
-
onPrimaryClick:
|
|
105
|
-
onLoginClick:
|
|
106
|
-
onBasketClick:
|
|
107
|
-
onSupportKivaClick:
|
|
108
|
-
onLogoClick:
|
|
108
|
+
getAvatarMenuPosition: g,
|
|
109
|
+
getAvatarTriggerCenterX: b,
|
|
110
|
+
visiblePrimaryLinks: h,
|
|
111
|
+
lendUrl: k,
|
|
112
|
+
formattedBalance: y,
|
|
113
|
+
lendOpenItem: M,
|
|
114
|
+
aboutOpenItem: B,
|
|
115
|
+
handleOnHover: T,
|
|
116
|
+
handleMouseOut: C,
|
|
117
|
+
handleTouchStart: S,
|
|
118
|
+
handleEmptySpaceClick: N,
|
|
119
|
+
onPrimaryClick: K,
|
|
120
|
+
onLoginClick: U,
|
|
121
|
+
onBasketClick: A,
|
|
122
|
+
onSupportKivaClick: O,
|
|
123
|
+
onLogoClick: w
|
|
109
124
|
};
|
|
110
125
|
}
|
|
111
126
|
};
|
|
112
127
|
export {
|
|
113
|
-
|
|
128
|
+
ie as default
|
|
114
129
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.mobile-link[data-v-
|
|
1
|
+
.mobile-link[data-v-bc7e1655]{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mobile-link[data-v-bc7e1655]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}#header-basic-mobile-about-container[data-v-bc7e1655] button{padding-top:0;padding-bottom:0}#header-basic-mobile-about-container[data-v-bc7e1655] nav{padding-bottom:0}
|