@kiva/kv-components 9.1.0 → 9.2.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/utils/headerMenuTiming.d.ts +6 -0
- package/dist/utils/headerMenuTiming.js +9 -0
- package/dist/utils/useHeaderMenuGroup.d.ts +27 -0
- package/dist/utils/useHeaderMenuGroup.js +68 -0
- package/dist/utils/useHeaderMenuPlacement.d.ts +6 -0
- package/dist/utils/useHeaderMenuPlacement.js +30 -0
- package/dist/utils/useHeaderMenuState.d.ts +10 -0
- package/dist/utils/useHeaderMenuState.js +21 -0
- package/dist/utils/useHoverIntent.d.ts +5 -0
- package/dist/utils/useHoverIntent.js +17 -0
- package/dist/utils/useOutsidePointerDown.d.ts +2 -0
- package/dist/utils/useOutsidePointerDown.js +19 -0
- package/dist/utils/usePointerType.d.ts +5 -0
- package/dist/utils/usePointerType.js +19 -0
- package/dist/vue/KvCheckoutReceipt.css +1 -1
- package/dist/vue/KvCheckoutReceipt.js +20 -21
- package/dist/vue/KvLoanTag.js +9 -10
- package/dist/vue/KvPopper.vue.d.ts +16 -0
- package/dist/vue/KvPopper2.js +42 -9
- package/dist/vue/KvTooltip.css +1 -1
- package/dist/vue/KvTooltip.js +40 -40
- package/dist/vue/KvTooltip2.js +60 -50
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.css +1 -0
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.js +35 -0
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.vue.d.ts +25 -0
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup2.js +37 -0
- package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js +29 -75
- package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic2.js +37 -92
- package/dist/vue/KvWwwHeaderBasic/LinkBar.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/LinkBar.js +206 -132
- package/dist/vue/KvWwwHeaderBasic/LinkBar.vue.d.ts +226 -185
- package/dist/vue/KvWwwHeaderBasic/LinkBar2.js +69 -96
- package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/MobileLendMenu.vue.d.ts +9 -1
- package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/SearchPanel.js +12 -11
- package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/SearchPanel.vue.d.ts +9 -1
- package/dist/vue/KvWwwHeaderBasic/SearchBar.js +12 -12
- package/dist/vue/KvWwwHeaderBasic/SearchBar.vue.d.ts +9 -1
- package/dist/vue/KvWwwHeaderBasic/SearchBar2.js +49 -43
- package/package.json +3 -4
- package/dist/utils/useHeaderBasicMenuState.d.ts +0 -3197
- package/dist/utils/useHeaderBasicMenuState.js +0 -30
package/dist/vue/KvTooltip.js
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
import f from "./KvTooltip2.js";
|
|
2
|
-
import { resolveComponent as
|
|
2
|
+
import { resolveComponent as c, openBlock as l, createBlock as v, normalizeClass as w, withCtx as u, createElementVNode as i, normalizeStyle as n, createElementBlock as p, renderSlot as s, createCommentVNode as a } from "vue";
|
|
3
3
|
import "./KvTooltip.css";
|
|
4
4
|
import k from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
5
|
const y = {
|
|
6
6
|
key: 0,
|
|
7
|
-
class: "tw-
|
|
8
|
-
}
|
|
9
|
-
function b(
|
|
10
|
-
const
|
|
11
|
-
return
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
class: "tw-font-medium tw-mb-1.5"
|
|
8
|
+
};
|
|
9
|
+
function b(e, t, r, o, C, h) {
|
|
10
|
+
const d = c("kv-popper");
|
|
11
|
+
return l(), v(d, {
|
|
12
|
+
ref: "popperRef",
|
|
13
|
+
controller: r.controller,
|
|
14
|
+
"popper-modifiers": o.popperModifiers,
|
|
15
|
+
"popper-placement": r.placement,
|
|
16
|
+
persistent: !!e.$slots.action,
|
|
17
|
+
"transition-type": "kvfastfade",
|
|
18
|
+
class: w(["tooltip-pane tw-absolute tw-rounded tw-z-popover", o.paneClass]),
|
|
19
|
+
onHide: t[0] || (t[0] = (m) => o.handleKvPopperVisibility(!1)),
|
|
20
|
+
onShow: t[1] || (t[1] = (m) => o.handleKvPopperVisibility(!0))
|
|
14
21
|
}, {
|
|
15
|
-
default:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}, {
|
|
26
|
-
default: n(() => [
|
|
27
|
-
i("div", {
|
|
28
|
-
class: "tw-p-2.5",
|
|
29
|
-
style: w({ maxWidth: r.maxWidth })
|
|
30
|
-
}, [
|
|
31
|
-
o.$slots.title ? (p(), _("div", y, [
|
|
32
|
-
d(o.$slots, "title", {}, void 0, !0)
|
|
33
|
-
])) : u("", !0),
|
|
34
|
-
i("div", h, [
|
|
35
|
-
d(o.$slots, "default", {}, void 0, !0)
|
|
36
|
-
])
|
|
37
|
-
], 4),
|
|
38
|
-
e[2] || (e[2] = i("div", {
|
|
39
|
-
class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
|
|
40
|
-
"x-arrow": ""
|
|
41
|
-
}, null, -1))
|
|
22
|
+
default: u(() => [
|
|
23
|
+
i("div", {
|
|
24
|
+
class: "tw-p-2.5",
|
|
25
|
+
style: n({ maxWidth: r.maxWidth })
|
|
26
|
+
}, [
|
|
27
|
+
e.$slots.title ? (l(), p("div", y, [
|
|
28
|
+
s(e.$slots, "title", {}, void 0, !0)
|
|
29
|
+
])) : a("", !0),
|
|
30
|
+
i("div", null, [
|
|
31
|
+
s(e.$slots, "default", {}, void 0, !0)
|
|
42
32
|
]),
|
|
43
|
-
|
|
44
|
-
|
|
33
|
+
e.$slots.action ? (l(), p("div", {
|
|
34
|
+
key: 1,
|
|
35
|
+
class: "tooltip-action tw-mt-1.5",
|
|
36
|
+
style: n(o.defaultTheme)
|
|
37
|
+
}, [
|
|
38
|
+
s(e.$slots, "action", { close: o.dismiss }, void 0, !0)
|
|
39
|
+
], 4)) : a("", !0)
|
|
40
|
+
], 4),
|
|
41
|
+
t[2] || (t[2] = i("div", {
|
|
42
|
+
class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
|
|
43
|
+
"x-arrow": ""
|
|
44
|
+
}, null, -1))
|
|
45
45
|
]),
|
|
46
46
|
_: 3
|
|
47
|
-
}, 8, ["
|
|
47
|
+
}, 8, ["controller", "popper-modifiers", "popper-placement", "persistent", "class"]);
|
|
48
48
|
}
|
|
49
|
-
const
|
|
49
|
+
const K = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-eed4fc1b"]]);
|
|
50
50
|
export {
|
|
51
|
-
|
|
51
|
+
K as default
|
|
52
52
|
};
|
package/dist/vue/KvTooltip2.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { toRefs as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { toRefs as y, computed as n, ref as b, watch as E } from "vue";
|
|
2
|
+
import { defaultTheme as T } from "@kiva/kv-tokens";
|
|
3
|
+
import S from "./KvPopper.js";
|
|
4
|
+
const x = ["light", "dark"], p = {
|
|
5
|
+
default: "light",
|
|
6
|
+
ecoGreenLight: "light",
|
|
7
|
+
ecoGreenDark: "dark",
|
|
8
|
+
ecoLightMarigold: "light",
|
|
9
|
+
ecoStoneLight: "light"
|
|
10
|
+
}, L = {
|
|
6
11
|
name: "KvTooltip",
|
|
7
12
|
components: {
|
|
8
|
-
KvPopper:
|
|
9
|
-
KvThemeProvider: S
|
|
13
|
+
KvPopper: S
|
|
10
14
|
},
|
|
11
15
|
props: {
|
|
12
16
|
controller: {
|
|
@@ -32,63 +36,69 @@ const K = {
|
|
|
32
36
|
type: Boolean,
|
|
33
37
|
default: !1
|
|
34
38
|
},
|
|
39
|
+
/**
|
|
40
|
+
* Fixed neutral color of the tooltip. Defaults to `light`.
|
|
41
|
+
* Use `dark` over light surfaces and `light` over dark surfaces.
|
|
42
|
+
*/
|
|
43
|
+
variant: {
|
|
44
|
+
type: String,
|
|
45
|
+
default: void 0,
|
|
46
|
+
validator(e) {
|
|
47
|
+
return e === void 0 || x.indexOf(e) !== -1;
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
/**
|
|
51
|
+
* @deprecated Use `variant` instead. Themed tooltips are being removed:
|
|
52
|
+
* `ecoGreenDark` maps to `dark`, every other value maps to `light`.
|
|
53
|
+
*/
|
|
35
54
|
theme: {
|
|
36
55
|
type: String,
|
|
37
|
-
default:
|
|
56
|
+
default: void 0,
|
|
38
57
|
validator(e) {
|
|
39
|
-
return
|
|
40
|
-
"default",
|
|
41
|
-
"ecoGreenLight",
|
|
42
|
-
"ecoGreenDark",
|
|
43
|
-
"ecoLightMarigold",
|
|
44
|
-
"ecoStoneLight"
|
|
45
|
-
].indexOf(e) !== -1;
|
|
58
|
+
return Object.keys(p).indexOf(e) !== -1;
|
|
46
59
|
}
|
|
47
60
|
}
|
|
48
61
|
},
|
|
49
|
-
emits: ["tool-tip-visible"],
|
|
50
|
-
setup(e, { emit:
|
|
62
|
+
emits: ["tool-tip-visible", "dismiss"],
|
|
63
|
+
setup(e, { emit: l }) {
|
|
51
64
|
const {
|
|
52
|
-
modifiers:
|
|
53
|
-
showTooltip:
|
|
54
|
-
theme:
|
|
55
|
-
|
|
56
|
-
|
|
65
|
+
modifiers: s,
|
|
66
|
+
showTooltip: f,
|
|
67
|
+
theme: a,
|
|
68
|
+
variant: d
|
|
69
|
+
} = y(e), c = n(() => ({
|
|
70
|
+
...s.value,
|
|
57
71
|
preventOverflow: {
|
|
58
|
-
...
|
|
72
|
+
...s.value.preventOverflow,
|
|
59
73
|
padding: 10
|
|
60
74
|
}
|
|
61
|
-
})),
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
const
|
|
65
|
-
if (
|
|
66
|
-
const
|
|
67
|
-
|
|
75
|
+
})), r = b(null), v = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, m = (t) => {
|
|
76
|
+
l("tool-tip-visible", t);
|
|
77
|
+
}, g = (t = !0) => {
|
|
78
|
+
const o = v();
|
|
79
|
+
if (o) {
|
|
80
|
+
const i = t ? "mouseover" : "mouseout";
|
|
81
|
+
o.dispatchEvent(new MouseEvent(i, { bubbles: !0 }));
|
|
68
82
|
}
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return b(s, (t) => {
|
|
77
|
-
o(!!t);
|
|
83
|
+
}, h = () => {
|
|
84
|
+
var t;
|
|
85
|
+
(t = r.value) == null || t.dismiss(), l("dismiss");
|
|
86
|
+
}, u = n(() => d.value ? d.value : a.value ? p[a.value] : "light"), w = n(() => u.value === "dark" ? "tooltip-pane--dark tw-bg-gray-800 tw-text-white" : "tooltip-pane--light tw-bg-white tw-text-gray-800");
|
|
87
|
+
return E(f, (t) => {
|
|
88
|
+
var o, i;
|
|
89
|
+
t ? (o = r.value) == null || o.open() : (i = r.value) == null || i.dismiss();
|
|
78
90
|
}), {
|
|
79
|
-
defaultTheme:
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
themeStyle: y,
|
|
88
|
-
triggerHover: o
|
|
91
|
+
defaultTheme: T,
|
|
92
|
+
dismiss: h,
|
|
93
|
+
handleKvPopperVisibility: m,
|
|
94
|
+
paneClass: w,
|
|
95
|
+
popperModifiers: c,
|
|
96
|
+
popperRef: r,
|
|
97
|
+
resolvedVariant: u,
|
|
98
|
+
triggerHover: g
|
|
89
99
|
};
|
|
90
100
|
}
|
|
91
101
|
};
|
|
92
102
|
export {
|
|
93
|
-
|
|
103
|
+
L as default
|
|
94
104
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@media(min-width:45.875rem){.menu-group[data-v-22583929]{align-self:stretch}.menu-group[data-v-22583929]:hover:after{content:"";position:absolute;top:4rem;height:calc(var(--nav-height, 4rem) - 4rem);left:calc(var(--trigger-gap-left, 0px) - var(--trigger-width, 0px) / 2);width:var(--trigger-width, 0px)}}.menu-panel[data-v-22583929]{position:absolute;z-index:1400;overflow-y:auto;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1));top:var(--nav-height, 4rem);max-height:0;visibility:hidden;opacity:0;transition:opacity var(--menu-close-fade) ease var(--menu-open-delay),visibility 0s calc(var(--menu-open-delay) + var(--menu-close-fade)),max-height 0s calc(var(--menu-open-delay) + var(--menu-close-fade)),min-height 0s calc(var(--menu-open-delay) + var(--menu-close-fade))}.menu-group:has(>[aria-expanded=true])>.menu-panel[data-v-22583929],[data-pointer=mouse] .menu-group:hover>.menu-panel[data-v-22583929]{visibility:visible;opacity:1;max-height:calc(100dvh - var(--nav-height, 4rem));transition:opacity .3s ease var(--menu-open-delay),visibility 0s var(--menu-open-delay),max-height 0s var(--menu-open-delay),min-height 0s var(--menu-open-delay)}.menu-panel--full[data-v-22583929],.menu-panel--drawer[data-v-22583929]{inset-inline:0}.menu-panel--card[data-v-22583929]{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;border-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));right:var(--trigger-gap-right, 0px);translate:clamp(calc(100% - var(--trigger-gap-left, 0px)),50%,var(--trigger-gap-right, 0px)) 0;max-width:100%}.menu-panel--drawer[data-v-22583929]{border-radius:0}.menu-group:has(>[aria-expanded=true])>.menu-panel--drawer[data-v-22583929],[data-pointer=mouse] .menu-group:hover>.menu-panel--drawer[data-v-22583929]{max-height:none;min-height:100dvh}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import s from "./HeaderMenuGroup2.js";
|
|
2
|
+
import { openBlock as d, createElementBlock as i, renderSlot as t, createElementVNode as l, normalizeClass as u, createCommentVNode as a } from "vue";
|
|
3
|
+
import "./HeaderMenuGroup.css";
|
|
4
|
+
import p from "../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const m = ["id"];
|
|
6
|
+
function f(e, o, r, g, v, F) {
|
|
7
|
+
return d(), i("div", {
|
|
8
|
+
ref: "root",
|
|
9
|
+
class: "menu-group tw-flex tw-items-center",
|
|
10
|
+
onPointerenter: o[0] || (o[0] = (...n) => e.onPointerEnter && e.onPointerEnter(...n)),
|
|
11
|
+
onPointerleave: o[1] || (o[1] = (...n) => e.onPointerLeave && e.onPointerLeave(...n)),
|
|
12
|
+
onFocusin: o[2] || (o[2] = (...n) => e.onFocusIn && e.onFocusIn(...n)),
|
|
13
|
+
onFocusout: o[3] || (o[3] = (...n) => e.onFocusOut && e.onFocusOut(...n)),
|
|
14
|
+
onKeydown: o[4] || (o[4] = (...n) => e.onKeydown && e.onKeydown(...n))
|
|
15
|
+
}, [
|
|
16
|
+
t(e.$slots, "default", {
|
|
17
|
+
trigger: e.trigger,
|
|
18
|
+
toggle: e.toggle,
|
|
19
|
+
expanded: e.expanded
|
|
20
|
+
}, void 0, !0),
|
|
21
|
+
l("div", {
|
|
22
|
+
id: r.panelId,
|
|
23
|
+
class: u(["menu-panel", `menu-panel--${r.variant}`])
|
|
24
|
+
}, [
|
|
25
|
+
e.approached ? t(e.$slots, "panel", {
|
|
26
|
+
key: 0,
|
|
27
|
+
close: e.close
|
|
28
|
+
}, void 0, !0) : a("", !0)
|
|
29
|
+
], 10, m)
|
|
30
|
+
], 544);
|
|
31
|
+
}
|
|
32
|
+
const E = /* @__PURE__ */ p(s, [["render", f], ["__scopeId", "data-v-22583929"]]);
|
|
33
|
+
export {
|
|
34
|
+
E as default
|
|
35
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
|
+
panelId: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
variant: {
|
|
7
|
+
type: () => "full" | "card" | "drawer";
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
11
|
+
panelId: {
|
|
12
|
+
type: StringConstructor;
|
|
13
|
+
required: true;
|
|
14
|
+
};
|
|
15
|
+
variant: {
|
|
16
|
+
type: () => "full" | "card" | "drawer";
|
|
17
|
+
default: string;
|
|
18
|
+
};
|
|
19
|
+
}>> & Readonly<{
|
|
20
|
+
onOpen?: (...args: any[]) => any;
|
|
21
|
+
onClose?: (...args: any[]) => any;
|
|
22
|
+
}>, {
|
|
23
|
+
variant: "card" | "full" | "drawer";
|
|
24
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
25
|
+
export default _default;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { inject as t, shallowRef as s, toRef as l, watch as i } from "vue";
|
|
2
|
+
import { HEADER_MENU_STATE as E } from "../../utils/useHeaderMenuState.js";
|
|
3
|
+
import { HEADER_MENU_PLACEMENT as c } from "../../utils/useHeaderMenuPlacement.js";
|
|
4
|
+
import { useHeaderMenuGroup as d } from "../../utils/useHeaderMenuGroup.js";
|
|
5
|
+
const A = {
|
|
6
|
+
name: "HeaderMenuGroup",
|
|
7
|
+
props: {
|
|
8
|
+
/**
|
|
9
|
+
* Id for the panel element, referenced by the trigger's aria-controls. Also identifies the
|
|
10
|
+
* group in the shared toggled state.
|
|
11
|
+
*/
|
|
12
|
+
panelId: { type: String, required: !0 },
|
|
13
|
+
/**
|
|
14
|
+
* Panel shape: 'full' spans the nav, 'drawer' is the full-screen mobile drawer, 'card'
|
|
15
|
+
* centers under the trigger and clamps to the nav's edges.
|
|
16
|
+
*/
|
|
17
|
+
variant: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: "card"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
emits: ["open", "close"],
|
|
23
|
+
setup(n, { emit: p }) {
|
|
24
|
+
const e = t(E);
|
|
25
|
+
if (!e) throw new Error("HeaderMenuGroup requires a HEADER_MENU_STATE provider");
|
|
26
|
+
const a = t(c, null), r = s(null), o = d({
|
|
27
|
+
panelId: l(n, "panelId"),
|
|
28
|
+
rootRef: r,
|
|
29
|
+
menus: e,
|
|
30
|
+
placement: a
|
|
31
|
+
});
|
|
32
|
+
return i(o.expanded, (u) => p(u ? "open" : "close"), { flush: "sync" }), { root: r, ...o };
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
A as default
|
|
37
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.header-fade-enter-active[data-v-
|
|
1
|
+
.header-fade-enter-active[data-v-25e697e2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-25e697e2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-25e697e2],.header-fade-leave-to[data-v-25e697e2]{opacity:0}.header-fade-leave[data-v-25e697e2],.header-fade-enter-to[data-v-25e697e2]{opacity:1}
|
|
@@ -1,30 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as
|
|
1
|
+
import u from "./KvWwwHeaderBasic2.js";
|
|
2
|
+
import { resolveComponent as o, openBlock as g, createBlock as c, withCtx as r, createElementVNode as b, normalizeStyle as k, createVNode as l, Transition as v, withDirectives as f, vShow as w } from "vue";
|
|
3
3
|
import "./KvWwwHeaderBasic.css";
|
|
4
|
-
import
|
|
5
|
-
function
|
|
6
|
-
const
|
|
7
|
-
return
|
|
4
|
+
import _ from "../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
function h(i, t, e, a, L, I) {
|
|
6
|
+
const s = o("link-bar"), d = o("kv-page-container"), m = o("kv-theme-provider");
|
|
7
|
+
return g(), c(m, {
|
|
8
8
|
tag: "div",
|
|
9
9
|
class: "tw-bg-primary"
|
|
10
10
|
}, {
|
|
11
|
-
default:
|
|
12
|
-
|
|
13
|
-
ref: "navRef",
|
|
11
|
+
default: r(() => [
|
|
12
|
+
b("nav", {
|
|
14
13
|
class: "tw-font-medium tw-relative",
|
|
15
|
-
style:
|
|
14
|
+
style: k({ minHeight: a.MIN_HEADER_HEIGHT })
|
|
16
15
|
}, [
|
|
17
|
-
|
|
18
|
-
default:
|
|
19
|
-
|
|
20
|
-
default:
|
|
21
|
-
|
|
16
|
+
l(d, null, {
|
|
17
|
+
default: r(() => [
|
|
18
|
+
l(v, { name: "header-fade" }, {
|
|
19
|
+
default: r(() => [
|
|
20
|
+
f(l(s, {
|
|
21
|
+
ref: "linkBarRef",
|
|
22
22
|
"logged-in": e.loggedIn,
|
|
23
23
|
"basket-count": e.basketCount,
|
|
24
24
|
balance: e.balance,
|
|
25
25
|
"user-id": e.userId,
|
|
26
26
|
"is-borrower": e.isBorrower,
|
|
27
27
|
"is-trustee": e.isTrustee,
|
|
28
|
+
"trustee-id": e.trusteeId,
|
|
29
|
+
"most-recent-borrowed-loan-id": e.mostRecentBorrowedLoanId,
|
|
28
30
|
"lender-name": e.lenderName,
|
|
29
31
|
"lender-image-url": e.lenderImageUrl,
|
|
30
32
|
"is-user-data-loading": e.isUserDataLoading,
|
|
@@ -34,16 +36,15 @@ function L(t, o, e, n, C, D) {
|
|
|
34
36
|
"login-url": e.loginUrl,
|
|
35
37
|
"my-dashboard-url": e.myDashboardUrl,
|
|
36
38
|
"countries-not-lent-to-url": e.countriesNotLentToUrl,
|
|
37
|
-
"app-origin":
|
|
38
|
-
"search-suggestions":
|
|
39
|
-
"is-mobile":
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
[b, n.linksVisible]
|
|
39
|
+
"app-origin": a.resolvedAppOrigin,
|
|
40
|
+
"search-suggestions": a.effectiveSuggestions,
|
|
41
|
+
"is-mobile": a.isMobile,
|
|
42
|
+
onLoadLendMenuData: t[0] || (t[0] = (n) => i.$emit("load-lend-menu-data")),
|
|
43
|
+
onLoadSearchData: t[1] || (t[1] = (n) => i.$emit("load-search-data")),
|
|
44
|
+
onSearchSubmit: t[2] || (t[2] = (n) => i.$emit("search-submit", n)),
|
|
45
|
+
onLoginClick: t[3] || (t[3] = (n) => i.$emit("login-click", n))
|
|
46
|
+
}, null, 8, ["logged-in", "basket-count", "balance", "user-id", "is-borrower", "is-trustee", "trustee-id", "most-recent-borrowed-loan-id", "lender-name", "lender-image-url", "is-user-data-loading", "is-basket-data-loading", "use-esi-avatar", "show-m-g-upsell-link", "login-url", "my-dashboard-url", "countries-not-lent-to-url", "app-origin", "search-suggestions", "is-mobile"]), [
|
|
47
|
+
[w, a.linksVisible]
|
|
47
48
|
])
|
|
48
49
|
]),
|
|
49
50
|
_: 1
|
|
@@ -51,59 +52,12 @@ function L(t, o, e, n, C, D) {
|
|
|
51
52
|
]),
|
|
52
53
|
_: 1
|
|
53
54
|
})
|
|
54
|
-
], 4)
|
|
55
|
-
r(g, { name: "header-fade" }, {
|
|
56
|
-
default: a(() => [
|
|
57
|
-
v(s("div", {
|
|
58
|
-
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",
|
|
59
|
-
style: d({ top: n.navHeight }),
|
|
60
|
-
onTouchstart: o[9] || (o[9] = (...i) => n.handleOverlayClick && n.handleOverlayClick(...i))
|
|
61
|
-
}, [
|
|
62
|
-
s("div", {
|
|
63
|
-
ref: "menuPanelRef",
|
|
64
|
-
class: h(["tw-bg-primary tw-overflow-y-auto", n.menuPanelClass]),
|
|
65
|
-
style: d({
|
|
66
|
-
...n.menuPosition,
|
|
67
|
-
maxHeight: n.isMobileMenuActive ? "auto" : `calc(100dvh - ${n.navHeight})`
|
|
68
|
-
}),
|
|
69
|
-
onMouseenter: o[7] || (o[7] = (i) => n.setMenu(n.menuItem, n.menuComponent)),
|
|
70
|
-
onMouseleave: o[8] || (o[8] = (i) => n.setMenu())
|
|
71
|
-
}, [
|
|
72
|
-
(m(), u(y(n.menuComponent), {
|
|
73
|
-
ref: "menuComponentInstance",
|
|
74
|
-
"logged-in": e.loggedIn,
|
|
75
|
-
"login-url": e.loginUrl,
|
|
76
|
-
"user-id": e.userId,
|
|
77
|
-
"is-borrower": e.isBorrower,
|
|
78
|
-
"is-trustee": e.isTrustee,
|
|
79
|
-
"trustee-id": e.trusteeId,
|
|
80
|
-
"most-recent-borrowed-loan-id": e.mostRecentBorrowedLoanId,
|
|
81
|
-
"my-dashboard-url": e.myDashboardUrl,
|
|
82
|
-
"show-m-g-upsell-link": e.showMGUpsellLink,
|
|
83
|
-
"is-mobile": n.isMobile,
|
|
84
|
-
"countries-not-lent-to-url": e.countriesNotLentToUrl,
|
|
85
|
-
"use-mobile-mega-menu": !0,
|
|
86
|
-
"app-origin": n.resolvedAppOrigin,
|
|
87
|
-
"search-suggestions": n.effectiveSuggestions,
|
|
88
|
-
onLoadLendMenuData: n.emitLendMenuEvent,
|
|
89
|
-
onLoadSearchData: o[3] || (o[3] = (i) => t.$emit("load-search-data")),
|
|
90
|
-
onSearchSubmit: o[4] || (o[4] = (i) => t.$emit("search-submit", i)),
|
|
91
|
-
onClosingMenu: o[5] || (o[5] = (i) => n.setMenu()),
|
|
92
|
-
onTouchstart: o[6] || (o[6] = M(() => {
|
|
93
|
-
}, ["stop"]))
|
|
94
|
-
}, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "trustee-id", "most-recent-borrowed-loan-id", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "app-origin", "search-suggestions", "onLoadLendMenuData"]))
|
|
95
|
-
], 38)
|
|
96
|
-
], 36), [
|
|
97
|
-
[b, n.menuOpen]
|
|
98
|
-
])
|
|
99
|
-
]),
|
|
100
|
-
_: 1
|
|
101
|
-
})
|
|
55
|
+
], 4)
|
|
102
56
|
]),
|
|
103
57
|
_: 1
|
|
104
58
|
});
|
|
105
59
|
}
|
|
106
|
-
const
|
|
60
|
+
const U = /* @__PURE__ */ _(u, [["render", h], ["__scopeId", "data-v-25e697e2"]]);
|
|
107
61
|
export {
|
|
108
|
-
|
|
62
|
+
U as default
|
|
109
63
|
};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { ref as o, computed as
|
|
2
|
-
import { gql as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { useBreakpoints as
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
const S = "4rem", Y = G`
|
|
1
|
+
import { ref as o, computed as S, onMounted as h } from "vue";
|
|
2
|
+
import { gql as b } from "@apollo/client/core";
|
|
3
|
+
import v from "../KvThemeProvider.js";
|
|
4
|
+
import B from "../KvPageContainer.js";
|
|
5
|
+
import { useBreakpoints as w } from "../../utils/useBreakpoints.js";
|
|
6
|
+
import k from "./LinkBar.js";
|
|
7
|
+
const N = "4rem", I = b`
|
|
9
8
|
query loanSearchSuggestions {
|
|
10
9
|
lend {
|
|
11
10
|
loanSearchSuggestions {
|
|
@@ -15,12 +14,12 @@ const S = "4rem", Y = G`
|
|
|
15
14
|
}
|
|
16
15
|
}
|
|
17
16
|
}
|
|
18
|
-
`,
|
|
17
|
+
`, _ = {
|
|
19
18
|
name: "KvWwwHeaderBasic",
|
|
20
19
|
components: {
|
|
21
|
-
KvThemeProvider:
|
|
22
|
-
KvPageContainer:
|
|
23
|
-
LinkBar:
|
|
20
|
+
KvThemeProvider: v,
|
|
21
|
+
KvPageContainer: B,
|
|
22
|
+
LinkBar: k
|
|
24
23
|
},
|
|
25
24
|
props: {
|
|
26
25
|
loggedIn: { type: Boolean, default: !1 },
|
|
@@ -45,96 +44,42 @@ const S = "4rem", Y = G`
|
|
|
45
44
|
mostRecentBorrowedLoanId: { type: Number, default: null }
|
|
46
45
|
},
|
|
47
46
|
emits: ["load-lend-menu-data", "load-search-data", "search-submit", "login-click"],
|
|
48
|
-
setup(
|
|
49
|
-
const { isMobile:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
} = V(), l = o(null), w = o(null), r = o(null), y = o(S), c = o(null), L = o(!0), b = o(d.appOrigin);
|
|
58
|
-
let u = null;
|
|
59
|
-
const m = o([]);
|
|
60
|
-
let p = !1;
|
|
61
|
-
const U = s(
|
|
62
|
-
() => m.value.length ? m.value : d.searchSuggestions
|
|
63
|
-
), g = s(() => {
|
|
64
|
-
var t, e;
|
|
65
|
-
return ((e = (t = l.value) == null ? void 0 : t.$options) == null ? void 0 : e.name) === "MobileMenu";
|
|
66
|
-
}), h = s(() => {
|
|
67
|
-
var t, e;
|
|
68
|
-
return ((e = (t = l.value) == null ? void 0 : t.$options) == null ? void 0 : e.name) === "MyKivaMenu";
|
|
69
|
-
}), q = s(() => {
|
|
70
|
-
var t, e;
|
|
71
|
-
return ((e = (t = l.value) == null ? void 0 : t.$options) == null ? void 0 : e.name) === "AboutMenu";
|
|
72
|
-
}), C = s(() => g.value ? "tw-w-full tw-min-h-dvh tw-rounded-none" : h.value ? "tw-w-auto tw-rounded-b tw-border tw-border-t-0 tw-border-tertiary" : q.value ? "tw-w-full md:tw-w-auto tw-rounded-none !tw-rounded-b md:tw-border md:tw-border-t-0 md:tw-border-tertiary" : "tw-w-full md:tw-w-auto tw-rounded-none !md:tw-rounded-b");
|
|
73
|
-
function E(t, e, n, i = null) {
|
|
74
|
-
c.value = i, f(t, e, n);
|
|
47
|
+
setup(n) {
|
|
48
|
+
const { isMobile: d, checkIsMobile: f } = w(), i = o(null), p = o(!0), s = o(n.appOrigin), l = o([]);
|
|
49
|
+
let r = !1;
|
|
50
|
+
const g = S(
|
|
51
|
+
() => l.value.length ? l.value : n.searchSuggestions
|
|
52
|
+
);
|
|
53
|
+
function c(u) {
|
|
54
|
+
var e, t;
|
|
55
|
+
(t = (e = i.value) == null ? void 0 : e.loadMenuData) == null || t.call(e, u);
|
|
75
56
|
}
|
|
76
|
-
|
|
77
|
-
if (!t || c.value == null) return;
|
|
78
|
-
await P();
|
|
79
|
-
const e = w.value;
|
|
80
|
-
if (!e) return;
|
|
81
|
-
const n = e.offsetWidth, i = c.value, a = Math.max(0, window.innerWidth - (i + n / 2));
|
|
82
|
-
v.value = { right: `${a}px`, position: "absolute" };
|
|
83
|
-
});
|
|
84
|
-
function R() {
|
|
85
|
-
M("load-lend-menu-data");
|
|
86
|
-
}
|
|
87
|
-
function T(t) {
|
|
88
|
-
var e, n;
|
|
89
|
-
(n = (e = l.value) == null ? void 0 : e.onLoad) == null || n.call(e, t);
|
|
90
|
-
}
|
|
91
|
-
async function _(t) {
|
|
57
|
+
async function m(u) {
|
|
92
58
|
var e;
|
|
93
|
-
if (!
|
|
94
|
-
|
|
59
|
+
if (!r) {
|
|
60
|
+
r = !0;
|
|
95
61
|
try {
|
|
96
|
-
const { data:
|
|
97
|
-
|
|
62
|
+
const { data: t } = await u.query({ query: I }), y = ((e = t == null ? void 0 : t.lend) == null ? void 0 : e.loanSearchSuggestions) ?? [];
|
|
63
|
+
l.value = y.filter((a) => !!a).map((a) => ({ group: a.group ?? "", label: a.label ?? "", query: a.query ?? void 0 }));
|
|
98
64
|
} catch {
|
|
99
|
-
|
|
65
|
+
r = !1;
|
|
100
66
|
}
|
|
101
67
|
}
|
|
102
68
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
return K(() => {
|
|
107
|
-
!d.appOrigin && typeof window < "u" && (b.value = window.location.origin), k(), O(), r.value && typeof ResizeObserver < "u" && (u = new ResizeObserver(() => {
|
|
108
|
-
r.value && (y.value = `${r.value.offsetHeight}px`);
|
|
109
|
-
}), u.observe(r.value));
|
|
110
|
-
}), $(() => {
|
|
111
|
-
u == null || u.disconnect(), u = null;
|
|
69
|
+
return h(() => {
|
|
70
|
+
!n.appOrigin && typeof window < "u" && (s.value = window.location.origin), f();
|
|
112
71
|
}), {
|
|
113
|
-
MIN_HEADER_HEIGHT:
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
menuComponent: A,
|
|
122
|
-
menuItem: N,
|
|
123
|
-
menuPosition: v,
|
|
124
|
-
isMobileMenuActive: g,
|
|
125
|
-
menuPanelClass: C,
|
|
126
|
-
menuComponentInstance: l,
|
|
127
|
-
menuPanelRef: w,
|
|
128
|
-
pinMenuOpen: H,
|
|
129
|
-
setMenu: f,
|
|
130
|
-
onItemHover: E,
|
|
131
|
-
handleOverlayClick: x,
|
|
132
|
-
emitLendMenuEvent: R,
|
|
133
|
-
loadMenuData: T,
|
|
134
|
-
loadSearchSuggestions: _
|
|
72
|
+
MIN_HEADER_HEIGHT: N,
|
|
73
|
+
linkBarRef: i,
|
|
74
|
+
linksVisible: p,
|
|
75
|
+
resolvedAppOrigin: s,
|
|
76
|
+
effectiveSuggestions: g,
|
|
77
|
+
isMobile: d,
|
|
78
|
+
loadMenuData: c,
|
|
79
|
+
loadSearchSuggestions: m
|
|
135
80
|
};
|
|
136
81
|
}
|
|
137
82
|
};
|
|
138
83
|
export {
|
|
139
|
-
|
|
84
|
+
_ as default
|
|
140
85
|
};
|