@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.
Files changed (42) hide show
  1. package/dist/utils/headerMenuTiming.d.ts +6 -0
  2. package/dist/utils/headerMenuTiming.js +9 -0
  3. package/dist/utils/useHeaderMenuGroup.d.ts +27 -0
  4. package/dist/utils/useHeaderMenuGroup.js +68 -0
  5. package/dist/utils/useHeaderMenuPlacement.d.ts +6 -0
  6. package/dist/utils/useHeaderMenuPlacement.js +30 -0
  7. package/dist/utils/useHeaderMenuState.d.ts +10 -0
  8. package/dist/utils/useHeaderMenuState.js +21 -0
  9. package/dist/utils/useHoverIntent.d.ts +5 -0
  10. package/dist/utils/useHoverIntent.js +17 -0
  11. package/dist/utils/useOutsidePointerDown.d.ts +2 -0
  12. package/dist/utils/useOutsidePointerDown.js +19 -0
  13. package/dist/utils/usePointerType.d.ts +5 -0
  14. package/dist/utils/usePointerType.js +19 -0
  15. package/dist/vue/KvCheckoutReceipt.css +1 -1
  16. package/dist/vue/KvCheckoutReceipt.js +20 -21
  17. package/dist/vue/KvLoanTag.js +9 -10
  18. package/dist/vue/KvPopper.vue.d.ts +16 -0
  19. package/dist/vue/KvPopper2.js +42 -9
  20. package/dist/vue/KvTooltip.css +1 -1
  21. package/dist/vue/KvTooltip.js +40 -40
  22. package/dist/vue/KvTooltip2.js +60 -50
  23. package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.css +1 -0
  24. package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.js +35 -0
  25. package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.vue.d.ts +25 -0
  26. package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup2.js +37 -0
  27. package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.css +1 -1
  28. package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.js +29 -75
  29. package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic2.js +37 -92
  30. package/dist/vue/KvWwwHeaderBasic/LinkBar.css +1 -1
  31. package/dist/vue/KvWwwHeaderBasic/LinkBar.js +206 -132
  32. package/dist/vue/KvWwwHeaderBasic/LinkBar.vue.d.ts +226 -185
  33. package/dist/vue/KvWwwHeaderBasic/LinkBar2.js +69 -96
  34. package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/MobileLendMenu.vue.d.ts +9 -1
  35. package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/SearchPanel.js +12 -11
  36. package/dist/vue/KvWwwHeaderBasic/MobileLendMenu/SearchPanel.vue.d.ts +9 -1
  37. package/dist/vue/KvWwwHeaderBasic/SearchBar.js +12 -12
  38. package/dist/vue/KvWwwHeaderBasic/SearchBar.vue.d.ts +9 -1
  39. package/dist/vue/KvWwwHeaderBasic/SearchBar2.js +49 -43
  40. package/package.json +3 -4
  41. package/dist/utils/useHeaderBasicMenuState.d.ts +0 -3197
  42. package/dist/utils/useHeaderBasicMenuState.js +0 -30
@@ -1,52 +1,52 @@
1
1
  import f from "./KvTooltip2.js";
2
- import { resolveComponent as l, openBlock as p, createBlock as v, withCtx as n, createVNode as c, createElementVNode as i, normalizeStyle as w, createElementBlock as _, renderSlot as d, createCommentVNode as u } from "vue";
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-text-primary tw-font-medium tw-mb-1.5"
8
- }, h = { class: "tw-text-primary" };
9
- function b(o, e, r, t, x, V) {
10
- const s = l("kv-popper"), a = l("kv-theme-provider");
11
- return p(), v(a, {
12
- theme: t.themeStyle,
13
- class: "kv-tailwind"
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: n(() => [
16
- c(s, {
17
- ref: "popperRef",
18
- controller: r.controller,
19
- "popper-modifiers": t.popperModifiers,
20
- "popper-placement": r.placement,
21
- "transition-type": "kvfastfade",
22
- class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover",
23
- onHide: e[0] || (e[0] = (m) => t.handleKvPopperVisibility(!1)),
24
- onShow: e[1] || (e[1] = (m) => t.handleKvPopperVisibility(!0))
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
- _: 3
44
- }, 8, ["controller", "popper-modifiers", "popper-placement"])
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, ["theme"]);
47
+ }, 8, ["controller", "popper-modifiers", "popper-placement", "persistent", "class"]);
48
48
  }
49
- const N = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-d5f691f8"]]);
49
+ const K = /* @__PURE__ */ k(f, [["render", b], ["__scopeId", "data-v-eed4fc1b"]]);
50
50
  export {
51
- N as default
51
+ K as default
52
52
  };
@@ -1,12 +1,16 @@
1
- import { toRefs as L, computed as i, ref as w, watch as b } from "vue";
2
- import { stoneLightTheme as l, marigoldLightTheme as p, greenDarkTheme as a, greenLightTheme as f, defaultTheme as m } from "@kiva/kv-tokens";
3
- import M from "./KvPopper.js";
4
- import S from "./KvThemeProvider.js";
5
- const K = {
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: M,
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: "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: u }) {
62
+ emits: ["tool-tip-visible", "dismiss"],
63
+ setup(e, { emit: l }) {
51
64
  const {
52
- modifiers: r,
53
- showTooltip: s,
54
- theme: c
55
- } = L(e), d = i(() => ({
56
- ...r.value,
65
+ modifiers: s,
66
+ showTooltip: f,
67
+ theme: a,
68
+ variant: d
69
+ } = y(e), c = n(() => ({
70
+ ...s.value,
57
71
  preventOverflow: {
58
- ...r.value.preventOverflow,
72
+ ...s.value.preventOverflow,
59
73
  padding: 10
60
74
  }
61
- })), h = w(null), g = () => typeof e.controller == "string" ? document.getElementById(e.controller) : e.controller, v = (t) => {
62
- u("tool-tip-visible", t);
63
- }, o = (t = !0) => {
64
- const n = g();
65
- if (n) {
66
- const T = t ? "mouseover" : "mouseout";
67
- n.dispatchEvent(new MouseEvent(T, { bubbles: !0 }));
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
- }, y = i(() => ({
70
- default: m,
71
- ecoGreenLight: f,
72
- ecoGreenDark: a,
73
- ecoLightMarigold: p,
74
- ecoStoneLight: l
75
- })[c.value]);
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: m,
80
- greenLightTheme: f,
81
- greenDarkTheme: a,
82
- marigoldLightTheme: p,
83
- stoneLightTheme: l,
84
- handleKvPopperVisibility: v,
85
- popperModifiers: d,
86
- popperRef: h,
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
- K as default
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-ec338a13]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-ec338a13]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-ec338a13],.header-fade-leave-to[data-v-ec338a13]{opacity:0}.header-fade-leave[data-v-ec338a13],.header-fade-enter-to[data-v-ec338a13]{opacity:1}.bg-opacity-50[data-v-ec338a13]{background-color:rgba(var(--bg-action-highlight),.5)}
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 k from "./KvWwwHeaderBasic2.js";
2
- import { resolveComponent as l, openBlock as m, createBlock as u, withCtx as a, createElementVNode as s, normalizeStyle as d, createVNode as r, Transition as g, withDirectives as v, vShow as b, normalizeClass as h, resolveDynamicComponent as y, withModifiers as M } from "vue";
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 I from "../../_virtual/_plugin-vue_export-helper.js";
5
- function L(t, o, e, n, C, D) {
6
- const w = l("link-bar"), c = l("kv-page-container"), f = l("kv-theme-provider");
7
- return m(), u(f, {
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: a(() => [
12
- s("nav", {
13
- ref: "navRef",
11
+ default: r(() => [
12
+ b("nav", {
14
13
  class: "tw-font-medium tw-relative",
15
- style: d({ minHeight: n.MIN_HEADER_HEIGHT })
14
+ style: k({ minHeight: a.MIN_HEADER_HEIGHT })
16
15
  }, [
17
- r(c, null, {
18
- default: a(() => [
19
- r(g, { name: "header-fade" }, {
20
- default: a(() => [
21
- v(r(w, {
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": n.resolvedAppOrigin,
38
- "search-suggestions": n.effectiveSuggestions,
39
- "is-mobile": n.isMobile,
40
- "open-menu-item": n.menuComponent,
41
- onItemHover: n.onItemHover,
42
- onLoadSearchData: o[0] || (o[0] = (i) => t.$emit("load-search-data")),
43
- onSearchSubmit: o[1] || (o[1] = (i) => t.$emit("search-submit", i)),
44
- onLoginClick: o[2] || (o[2] = (i) => t.$emit("login-click", i))
45
- }, null, 8, ["logged-in", "basket-count", "balance", "user-id", "is-borrower", "is-trustee", "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", "open-menu-item", "onItemHover"]), [
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 B = /* @__PURE__ */ I(k, [["render", L], ["__scopeId", "data-v-ec338a13"]]);
60
+ const U = /* @__PURE__ */ _(u, [["render", h], ["__scopeId", "data-v-25e697e2"]]);
107
61
  export {
108
- B as default
62
+ U as default
109
63
  };
@@ -1,11 +1,10 @@
1
- import { ref as o, computed as s, watch as D, nextTick as P, onMounted as K, onBeforeUnmount as $ } from "vue";
2
- import { gql as G } from "@apollo/client/core";
3
- import W from "../KvThemeProvider.js";
4
- import z from "../KvPageContainer.js";
5
- import { useBreakpoints as Q } from "../../utils/useBreakpoints.js";
6
- import { useHeaderBasicMenuState as V } from "../../utils/useHeaderBasicMenuState.js";
7
- import X from "./LinkBar.js";
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
- `, oe = {
17
+ `, _ = {
19
18
  name: "KvWwwHeaderBasic",
20
19
  components: {
21
- KvThemeProvider: W,
22
- KvPageContainer: z,
23
- LinkBar: X
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(d, { emit: M }) {
49
- const { isMobile: B, checkIsMobile: k } = Q(), {
50
- menuOpen: I,
51
- menuComponent: A,
52
- menuItem: N,
53
- menuPosition: v,
54
- setMenu: f,
55
- markMounted: O,
56
- pinMenuOpen: H
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
- D(h, async (t) => {
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 (!p) {
94
- p = !0;
59
+ if (!r) {
60
+ r = !0;
95
61
  try {
96
- const { data: n } = await t.query({ query: Y }), i = ((e = n == null ? void 0 : n.lend) == null ? void 0 : e.loanSearchSuggestions) ?? [];
97
- m.value = i.filter((a) => !!a).map((a) => ({ group: a.group ?? "", label: a.label ?? "", query: a.query ?? void 0 }));
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
- p = !1;
65
+ r = !1;
100
66
  }
101
67
  }
102
68
  }
103
- function x() {
104
- g.value || f();
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: S,
114
- navHeight: y,
115
- navRef: r,
116
- linksVisible: L,
117
- resolvedAppOrigin: b,
118
- effectiveSuggestions: U,
119
- isMobile: B,
120
- menuOpen: I,
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
- oe as default
84
+ _ as default
140
85
  };