@kiva/kv-components 6.49.3 → 6.50.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.
@@ -1 +1 @@
1
- .tooltip-pane[data-v-d21ce029],.tooltip-arrow[data-v-d21ce029]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-d21ce029]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-d21ce029]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-d21ce029]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-d21ce029]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-d21ce029]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-d21ce029]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-d21ce029]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-d21ce029]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-d21ce029]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}
1
+ .tooltip-pane[data-v-88820ac6],.tooltip-arrow[data-v-88820ac6]{box-shadow:0 4px 12px #00000014}.tooltip-arrow[data-v-88820ac6]{margin:.5rem;border-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1))}.tooltip-pane[x-placement^=top][data-v-88820ac6]{margin-bottom:.5rem}.tooltip-pane[x-placement^=top] .tooltip-arrow[data-v-88820ac6]{border-width:8px 8px 0 8px;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:calc(50% - 8px);bottom:-.5rem;margin-top:0;margin-bottom:0}.tooltip-pane[x-placement^=bottom][data-v-88820ac6]{margin-top:.5rem}.tooltip-pane[x-placement^=bottom] .tooltip-arrow[data-v-88820ac6]{border-width:0 8px 8px 8px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;left:calc(50% - 8px);top:-.5rem;margin-bottom:0;margin-top:0}.tooltip-pane[x-placement^=right][data-v-88820ac6]{margin-left:.5rem}.tooltip-pane[x-placement^=right] .tooltip-arrow[data-v-88820ac6]{border-width:8px 8px 8px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);left:-.5rem;margin-left:0;margin-right:0}.tooltip-pane[x-placement^=left][data-v-88820ac6]{margin-right:.5rem}.tooltip-pane[x-placement^=left] .tooltip-arrow[data-v-88820ac6]{border-width:8px 0 8px 8px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;top:calc(50% - 8px);right:-.5rem;margin-left:0;margin-right:0}
@@ -1,14 +1,14 @@
1
- import { toRefs as g, ref as T, computed as y, resolveComponent as i, openBlock as p, createBlock as L, withCtx as d, createVNode as M, createElementVNode as n, createElementBlock as S, renderSlot as a, createCommentVNode as x } from "vue";
2
- import { defaultTheme as l, greenLightTheme as m, greenDarkTheme as s, marigoldLightTheme as c, stoneLightTheme as f, stoneDarkTheme as h, mintTheme as u, darkTheme as v } from "@kiva/kv-tokens";
1
+ import { toRefs as T, computed as a, resolveComponent as p, openBlock as l, createBlock as L, withCtx as d, createVNode as S, createElementVNode as n, normalizeStyle as x, createElementBlock as M, renderSlot as m, createCommentVNode as b } from "vue";
2
+ import { defaultTheme as s, greenLightTheme as c, greenDarkTheme as f, marigoldLightTheme as u, stoneLightTheme as h, stoneDarkTheme as v, mintTheme as w, darkTheme as g } from "@kiva/kv-tokens";
3
3
  import D from "./KvPopper.js";
4
- import b from "./KvThemeProvider.js";
4
+ import E from "./KvThemeProvider.js";
5
5
  import "./KvTooltip.css";
6
- import E from "../_virtual/_plugin-vue_export-helper.js";
7
- const G = {
6
+ import G from "../_virtual/_plugin-vue_export-helper.js";
7
+ const K = {
8
8
  name: "KvTooltip",
9
9
  components: {
10
10
  KvPopper: D,
11
- KvThemeProvider: b
11
+ KvThemeProvider: E
12
12
  },
13
13
  // TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
14
14
  props: {
@@ -18,6 +18,18 @@ const G = {
18
18
  },
19
19
  required: !0
20
20
  },
21
+ maxWidth: {
22
+ type: String,
23
+ default: "250px"
24
+ },
25
+ modifiers: {
26
+ type: Object,
27
+ default: () => ({})
28
+ },
29
+ placement: {
30
+ type: String,
31
+ default: "top"
32
+ },
21
33
  theme: {
22
34
  type: String,
23
35
  default: "default",
@@ -37,76 +49,79 @@ const G = {
37
49
  },
38
50
  setup(e) {
39
51
  const {
40
- theme: t
41
- } = g(e), r = T({
52
+ modifiers: t,
53
+ theme: o
54
+ } = T(e), r = a(() => ({
55
+ ...t.value,
42
56
  preventOverflow: {
57
+ ...t.value.preventOverflow,
43
58
  padding: 10
44
59
  }
45
- }), o = y(() => ({
46
- default: l,
47
- ecoGreenLight: m,
48
- ecoGreenDark: s,
49
- ecoLightMarigold: c,
50
- ecoStoneLight: f,
51
- ecoStoneDark: h,
52
- mint: u,
53
- dark: v
54
- })[t.value]);
60
+ })), i = a(() => ({
61
+ default: s,
62
+ ecoGreenLight: c,
63
+ ecoGreenDark: f,
64
+ ecoLightMarigold: u,
65
+ ecoStoneLight: h,
66
+ ecoStoneDark: v,
67
+ mint: w,
68
+ dark: g
69
+ })[o.value]);
55
70
  return {
56
- defaultTheme: l,
57
- greenLightTheme: m,
58
- greenDarkTheme: s,
59
- marigoldLightTheme: c,
60
- stoneLightTheme: f,
61
- stoneDarkTheme: h,
62
- mintTheme: u,
63
- darkTheme: v,
71
+ defaultTheme: s,
72
+ greenLightTheme: c,
73
+ greenDarkTheme: f,
74
+ marigoldLightTheme: u,
75
+ stoneLightTheme: h,
76
+ stoneDarkTheme: v,
77
+ mintTheme: w,
78
+ darkTheme: g,
64
79
  popperModifiers: r,
65
- themeStyle: o
80
+ themeStyle: i
66
81
  };
67
82
  }
68
- }, K = {
69
- class: "tw-p-2.5",
70
- style: { "max-width": "250px" }
71
- }, $ = {
83
+ }, O = {
72
84
  key: 0,
73
85
  class: "tw-text-primary tw-font-medium tw-mb-1.5"
74
86
  }, B = { class: "tw-text-primary" };
75
- function C(e, t, r, o, w, N) {
76
- const _ = i("kv-popper"), k = i("kv-theme-provider");
77
- return p(), L(k, {
78
- theme: o.themeStyle,
87
+ function C(e, t, o, r, i, k) {
88
+ const _ = p("kv-popper"), y = p("kv-theme-provider");
89
+ return l(), L(y, {
90
+ theme: r.themeStyle,
79
91
  class: "kv-tailwind"
80
92
  }, {
81
93
  default: d(() => [
82
- M(_, {
83
- controller: r.controller,
84
- "popper-modifiers": o.popperModifiers,
85
- "popper-placement": "top",
94
+ S(_, {
95
+ controller: o.controller,
96
+ "popper-modifiers": r.popperModifiers,
97
+ "popper-placement": o.placement,
86
98
  "transition-type": "kvfastfade",
87
99
  class: "tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
88
100
  }, {
89
101
  default: d(() => [
90
- n("div", K, [
91
- e.$slots.title ? (p(), S("div", $, [
92
- a(e.$slots, "title", {}, void 0, !0)
93
- ])) : x("", !0),
102
+ n("div", {
103
+ class: "tw-p-2.5",
104
+ style: x({ maxWidth: o.maxWidth })
105
+ }, [
106
+ e.$slots.title ? (l(), M("div", O, [
107
+ m(e.$slots, "title", {}, void 0, !0)
108
+ ])) : b("", !0),
94
109
  n("div", B, [
95
- a(e.$slots, "default", {}, void 0, !0)
110
+ m(e.$slots, "default", {}, void 0, !0)
96
111
  ])
97
- ]),
112
+ ], 4),
98
113
  t[0] || (t[0] = n("div", {
99
114
  class: "tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid",
100
115
  "x-arrow": ""
101
116
  }, null, -1))
102
117
  ]),
103
118
  _: 3
104
- }, 8, ["controller", "popper-modifiers"])
119
+ }, 8, ["controller", "popper-modifiers", "popper-placement"])
105
120
  ]),
106
121
  _: 3
107
122
  }, 8, ["theme"]);
108
123
  }
109
- const I = /* @__PURE__ */ E(G, [["render", C], ["__scopeId", "data-v-d21ce029"]]);
124
+ const $ = /* @__PURE__ */ G(K, [["render", C], ["__scopeId", "data-v-88820ac6"]]);
110
125
  export {
111
- I as default
126
+ $ as default
112
127
  };
@@ -1 +1 @@
1
- .header-link[data-v-be04b1f7]{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-be04b1f7]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
1
+ .header-link[data-v-e43175cd]{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-e43175cd]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}
@@ -1,4 +1,4 @@
1
- import { defineAsyncComponent as k, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as b, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as g, createVNode as U, createBlock as h, withCtx as I, createTextVNode as w, createElementVNode as D, createCommentVNode as M, toDisplayString as F } from "vue";
1
+ import { defineAsyncComponent as k, ref as l, computed as P, onMounted as z, onUnmounted as W, resolveComponent as g, resolveDirective as j, openBlock as i, createElementBlock as c, withDirectives as d, normalizeClass as b, createVNode as U, createBlock as h, withCtx as T, createTextVNode as w, createElementVNode as D, createCommentVNode as M, toDisplayString as F } from "vue";
2
2
  import { mdiAccountCircle as q, mdiChevronDown as G, mdiMagnify as J, mdiMenu as Q } from "@mdi/js";
3
3
  import X from "numeral";
4
4
  import Y from "../KvMaterialIcon.js";
@@ -8,7 +8,7 @@ import ee from "../KvUserAvatar.js";
8
8
  import { throttle as ne } from "../../utils/throttle.js";
9
9
  import "./KvHeaderLinkBar.css";
10
10
  import te from "../../_virtual/_plugin-vue_export-helper.js";
11
- const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, T = "avatar-menu", ae = {
11
+ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvHeaderMyKivaMenu.js")), re = k(() => import("./LendMenu/KvLendMenu.js")), le = k(() => import("./KvHeaderTakeActionMenu.js")), ie = k(() => import("./KvHeaderAboutMenu.js")), C = 118, y = "avatar-menu", ae = {
12
12
  components: {
13
13
  KvMaterialIcon: Y,
14
14
  KvIconBag: Z,
@@ -57,7 +57,7 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
57
57
  "item-hover"
58
58
  ],
59
59
  setup(u, { emit: e }) {
60
- const t = l(null), n = l(null), x = l(null), K = l(null), A = l(null), f = l(null), y = l(null), H = l(null), a = l(null), o = l(null), m = (r, v, s = null) => {
60
+ const t = l(null), n = l(null), x = l(null), K = l(null), p = l(null), f = l(null), A = l(null), H = l(null), a = l(null), o = l(null), m = (r, v, s = null) => {
61
61
  e("item-hover", r, v, s);
62
62
  }, _ = (r, v, s = null) => {
63
63
  u.isMobile || m(r, v, s);
@@ -70,22 +70,22 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
70
70
  const s = r.left + r.width / 2 - C / 2;
71
71
  return {
72
72
  ...s + C > window.outerWidth ? { right: 0 } : { left: u.isMobile ? 0 : `${s}px` },
73
- borderRadius: "0px 0px 8px 8px",
73
+ borderRadius: u.isMobile ? "auto" : "0px 0px 8px 8px",
74
74
  width: u.isMobile ? "100%" : "auto"
75
75
  };
76
- }, p = () => {
77
- o.value = T, m(t.value, O, E());
76
+ }, I = () => {
77
+ o.value = y, m(t.value, O, E());
78
78
  }, V = (r, v) => {
79
- !o.value || o.value !== r ? (o.value = r, r === T ? p() : m(r, v)) : (o.value = null, m());
79
+ !o.value || o.value !== r ? (o.value = r, r === y ? I() : m(r, v)) : (o.value = null, m());
80
80
  }, L = ne(() => {
81
- u.openMenuItem && p();
81
+ o.value === y && I();
82
82
  }, 50), R = P(() => u.isMobile ? void 0 : "/lend-by-category");
83
83
  return z(() => {
84
84
  import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", L);
85
85
  }), W(() => {
86
86
  window.removeEventListener("resize", L);
87
87
  }), {
88
- AVATAR_MENU_ID: T,
88
+ AVATAR_MENU_ID: y,
89
89
  openMenuId: o,
90
90
  numeral: X,
91
91
  mdiAccountCircle: q,
@@ -97,16 +97,16 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
97
97
  lendButton: n,
98
98
  aboutUsLink: x,
99
99
  partnerWithUsLink: K,
100
- borrowLink: A,
100
+ borrowLink: p,
101
101
  supportKivaLink: f,
102
- basketLink: y,
102
+ basketLink: A,
103
103
  signInLink: H,
104
104
  menuButton: a,
105
105
  lendUrl: R,
106
106
  handleOnHover: _,
107
107
  handleTouchStart: V,
108
108
  handleMouseOut: S,
109
- handleAvatarMenuPosition: p,
109
+ handleAvatarMenuPosition: I,
110
110
  KvHeaderMobileMenu: oe,
111
111
  KvHeaderMyKivaMenu: O,
112
112
  KvLendMenu: re,
@@ -119,18 +119,18 @@ const oe = k(() => import("./KvHeaderMobileMenu.js")), O = k(() => import("./KvH
119
119
  class: "tw-bg-eco-green-1 tw-py-0.5 tw-px-1 tw-text-eco-green-4"
120
120
  }, ve = ["href"];
121
121
  function se(u, e, t, n, x, K) {
122
- const A = b("kv-material-icon"), f = b("KvHeaderDropdownLink"), y = b("kv-icon-bag"), H = b("KvUserAvatar"), a = j("kv-track-event");
122
+ const p = g("kv-material-icon"), f = g("KvHeaderDropdownLink"), A = g("kv-icon-bag"), H = g("KvUserAvatar"), a = j("kv-track-event");
123
123
  return i(), c("div", de, [
124
124
  d((i(), c("button", {
125
125
  ref: "menuButton",
126
- class: g(["header-link tw-inline-flex lg:tw-hidden", {
126
+ class: b(["header-link tw-inline-flex lg:tw-hidden", {
127
127
  "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== n.KvHeaderMobileMenu
128
128
  }]),
129
129
  onMouseover: e[0] || (e[0] = (o) => n.handleOnHover(n.menuButton, n.KvHeaderMobileMenu)),
130
130
  onMouseout: e[1] || (e[1] = (o) => n.handleMouseOut("menuButton")),
131
131
  onTouchstart: e[2] || (e[2] = (o) => n.handleTouchStart("menuButton", n.KvHeaderMobileMenu))
132
132
  }, [
133
- U(A, { icon: n.mdiMenu }, null, 8, ["icon"])
133
+ U(p, { icon: n.mdiMenu }, null, 8, ["icon"])
134
134
  ], 34)), [
135
135
  [a, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
136
136
  ]),
@@ -146,7 +146,7 @@ function se(u, e, t, n, x, K) {
146
146
  onMouseout: e[3] || (e[3] = (o) => n.handleMouseOut("lendButton")),
147
147
  onTouchstart: e[4] || (e[4] = (o) => n.handleTouchStart("lendButton", n.KvLendMenu))
148
148
  }, {
149
- default: I(() => e[10] || (e[10] = [
149
+ default: T(() => e[10] || (e[10] = [
150
150
  w(" Lend ")
151
151
  ])),
152
152
  _: 1
@@ -155,7 +155,7 @@ function se(u, e, t, n, x, K) {
155
155
  ]),
156
156
  d((i(), h(f, {
157
157
  "ref-name": "takeActionButton",
158
- "base-class": "tw-hidden lg:tw-inline-flex",
158
+ "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
159
159
  "menu-component": n.KvHeaderTakeActionMenu,
160
160
  "open-menu-item": t.openMenuItem,
161
161
  "dropdown-icon": n.mdiChevronDown,
@@ -163,7 +163,7 @@ function se(u, e, t, n, x, K) {
163
163
  onOnHover: n.onHover,
164
164
  onMouseout: e[5] || (e[5] = (o) => n.onHover())
165
165
  }, {
166
- default: I(() => e[11] || (e[11] = [
166
+ default: T(() => e[11] || (e[11] = [
167
167
  w(" Take action ")
168
168
  ])),
169
169
  _: 1
@@ -172,7 +172,7 @@ function se(u, e, t, n, x, K) {
172
172
  ]),
173
173
  d((i(), h(f, {
174
174
  "ref-name": "aboutUsLink",
175
- "base-class": "tw-hidden lg:tw-inline-flex",
175
+ "base-class": "tw-hidden lg:tw-inline-flex tw-py-2",
176
176
  "menu-component": n.KvHeaderAboutMenu,
177
177
  "open-menu-item": t.openMenuItem,
178
178
  "dropdown-icon": n.mdiChevronDown,
@@ -180,7 +180,7 @@ function se(u, e, t, n, x, K) {
180
180
  onOnHover: n.onHover,
181
181
  onMouseout: e[6] || (e[6] = (o) => n.onHover())
182
182
  }, {
183
- default: I(() => e[12] || (e[12] = [
183
+ default: T(() => e[12] || (e[12] = [
184
184
  w(" About ")
185
185
  ])),
186
186
  _: 1
@@ -192,7 +192,7 @@ function se(u, e, t, n, x, K) {
192
192
  key: 0,
193
193
  ref: "dashboardLink",
194
194
  href: t.myDashboardUrl,
195
- class: g(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
195
+ class: b(["header-link tw-hidden lg:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
196
196
  }, e[13] || (e[13] = [
197
197
  w(" My dashboard ")
198
198
  ]), 10, ue)), [
@@ -202,9 +202,9 @@ function se(u, e, t, n, x, K) {
202
202
  key: 1,
203
203
  ref: "basketLink",
204
204
  href: "/basket",
205
- class: g(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }])
205
+ class: b(["header-link tw-relative", { "tw-text-tertiary": !!t.openMenuItem }])
206
206
  }, [
207
- U(y, {
207
+ U(A, {
208
208
  class: "tw-w-3 tw-h-3 tw-pointer-events-none",
209
209
  count: t.basketCount
210
210
  }, null, 8, ["count"])
@@ -212,7 +212,7 @@ function se(u, e, t, n, x, K) {
212
212
  [a, ["TopNav", "click-Basket"]]
213
213
  ]) : M("", !0),
214
214
  D("div", {
215
- class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1",
215
+ class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-py-1.5",
216
216
  onMouseover: e[7] || (e[7] = (...o) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...o)),
217
217
  onMouseout: e[8] || (e[8] = (o) => n.handleMouseOut(n.AVATAR_MENU_ID)),
218
218
  onTouchstart: e[9] || (e[9] = (o) => n.handleTouchStart(n.AVATAR_MENU_ID))
@@ -230,7 +230,7 @@ function se(u, e, t, n, x, K) {
230
230
  key: 2,
231
231
  ref: "signInLink",
232
232
  href: t.loginUrl,
233
- class: g(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
233
+ class: b(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
234
234
  }, e[14] || (e[14] = [
235
235
  w(" Sign in ")
236
236
  ]), 10, ve)), [
@@ -238,7 +238,7 @@ function se(u, e, t, n, x, K) {
238
238
  ])
239
239
  ]);
240
240
  }
241
- const pe = /* @__PURE__ */ te(ae, [["render", se], ["__scopeId", "data-v-be04b1f7"]]);
241
+ const He = /* @__PURE__ */ te(ae, [["render", se], ["__scopeId", "data-v-e43175cd"]]);
242
242
  export {
243
- pe as default
243
+ He as default
244
244
  };
@@ -1 +1 @@
1
- .header-fade-enter-active[data-v-07310dbf]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-07310dbf]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-07310dbf],.header-fade-leave-to[data-v-07310dbf]{opacity:0}.header-fade-leave[data-v-07310dbf],.header-fade-enter-to[data-v-07310dbf]{opacity:1}.bg-opacity-50[data-v-07310dbf]{background-color:rgba(var(--bg-action-highlight),.5)}
1
+ .header-fade-enter-active[data-v-e1bd1f5d]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-e1bd1f5d]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-e1bd1f5d],.header-fade-leave-to[data-v-e1bd1f5d]{opacity:0}.header-fade-leave[data-v-e1bd1f5d],.header-fade-enter-to[data-v-e1bd1f5d]{opacity:1}.bg-opacity-50[data-v-e1bd1f5d]{background-color:rgba(var(--bg-action-highlight),.5)}
@@ -1,15 +1,15 @@
1
- import { ref as i, shallowRef as L, resolveComponent as u, resolveDirective as M, openBlock as v, createBlock as h, withCtx as c, createElementVNode as f, createVNode as s, Transition as p, withDirectives as g, vShow as I, createElementBlock as H, normalizeStyle as B, resolveDynamicComponent as D } from "vue";
2
- import U from "./KvWwwHeader/KvHeaderLinkBar.js";
3
- import N from "./KvWwwHeader/KvHeaderLogo.js";
4
- import T from "./KvThemeProvider.js";
1
+ import { ref as i, shallowRef as D, resolveComponent as u, resolveDirective as C, openBlock as c, createBlock as p, withCtx as v, createElementVNode as f, normalizeStyle as g, createVNode as d, Transition as H, withDirectives as _, vShow as I, createElementBlock as L, resolveDynamicComponent as M } from "vue";
2
+ import T from "./KvWwwHeader/KvHeaderLinkBar.js";
3
+ import B from "./KvWwwHeader/KvHeaderLogo.js";
4
+ import U from "./KvThemeProvider.js";
5
5
  import x from "./KvPageContainer.js";
6
6
  import "./KvWwwHeader.css";
7
- import S from "../_virtual/_plugin-vue_export-helper.js";
8
- const E = {
7
+ import N from "../_virtual/_plugin-vue_export-helper.js";
8
+ const G = "3.75rem", S = {
9
9
  components: {
10
- KvHeaderLinkBar: U,
11
- KvHeaderLogo: N,
12
- KvThemeProvider: T,
10
+ KvHeaderLinkBar: T,
11
+ KvHeaderLogo: B,
12
+ KvThemeProvider: U,
13
13
  KvPageContainer: x
14
14
  },
15
15
  props: {
@@ -65,56 +65,54 @@ const E = {
65
65
  emits: [
66
66
  "load-lend-menu-data"
67
67
  ],
68
- setup(C, { emit: t }) {
69
- const e = i(!0), n = i(null), l = i(!1), a = L(null), d = i(null), r = i({ left: 0, position: "relative" });
70
- let m;
68
+ setup(E, { emit: o }) {
69
+ const e = i(!0), n = i(null), l = i(!1), a = D(null), m = i(null), r = i({ left: 0, position: "relative" });
70
+ let s;
71
71
  return {
72
+ HEADER_HEIGHT: G,
72
73
  emitLendMenuEvent: () => {
73
- t("load-lend-menu-data");
74
+ o("load-lend-menu-data");
74
75
  },
75
76
  linksVisible: e,
76
77
  menuOpen: l,
77
- onHover: (k, o, y) => {
78
- o ? (clearTimeout(m), a.value !== o && (r.value = { left: 0, position: "relative" }), a.value = o, l.value = !0, y && (r.value = {
79
- ...y,
78
+ onHover: (k, t, h) => {
79
+ t ? (clearTimeout(s), a.value !== t && (r.value = { left: 0, position: "relative" }), a.value = t, l.value = !0, h && (r.value = {
80
+ ...h,
80
81
  position: "absolute"
81
- })) : l.value && (m = setTimeout(() => {
82
+ })) : l.value && (s = setTimeout(() => {
82
83
  l.value = !1, a.value = null;
83
84
  }, 50));
84
85
  },
85
86
  loadMenuData: (k) => {
86
- var o;
87
- (o = d.value) == null || o.onLoad(k);
87
+ var t;
88
+ (t = m.value) == null || t.onLoad(k);
88
89
  },
89
90
  activeHeaderItem: n,
90
91
  menuComponent: a,
91
- menuComponentInstance: d,
92
+ menuComponentInstance: m,
92
93
  menuPosition: r
93
94
  };
94
95
  }
95
96
  }, K = {
96
- class: "tw-font-medium",
97
- style: { height: "3.75rem" }
98
- }, V = {
99
97
  href: "/",
100
98
  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"
101
- }, P = {
102
- 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",
103
- style: { top: "3.75rem" }
104
99
  };
105
- function z(C, t, e, n, l, a) {
106
- const d = u("kv-header-link-bar"), r = u("kv-header-logo"), m = u("kv-page-container"), _ = u("kv-theme-provider"), b = M("kv-track-event");
107
- return v(), h(_, {
100
+ function R(E, o, e, n, l, a) {
101
+ const m = u("kv-header-link-bar"), r = u("kv-header-logo"), s = u("kv-page-container"), b = u("kv-theme-provider"), w = C("kv-track-event");
102
+ return c(), p(b, {
108
103
  tag: "div",
109
- class: "tw-bg-primary tw-relative"
104
+ class: "tw-bg-primary"
110
105
  }, {
111
- default: c(() => [
112
- f("nav", K, [
113
- s(m, null, {
114
- default: c(() => [
115
- s(p, { name: "header-fade" }, {
116
- default: c(() => [
117
- g(s(d, {
106
+ default: v(() => [
107
+ f("nav", {
108
+ class: "tw-font-medium tw-relative",
109
+ style: g({ height: n.HEADER_HEIGHT })
110
+ }, [
111
+ d(s, null, {
112
+ default: v(() => [
113
+ d(H, { name: "header-fade" }, {
114
+ default: v(() => [
115
+ _(d(m, {
118
116
  "logged-in": e.loggedIn,
119
117
  "basket-count": e.basketCount,
120
118
  "login-url": e.loginUrl,
@@ -131,25 +129,28 @@ function z(C, t, e, n, l, a) {
131
129
  ]),
132
130
  _: 1
133
131
  }),
134
- g((v(), H("a", V, [
135
- s(r)
132
+ _((c(), L("a", K, [
133
+ d(r)
136
134
  ])), [
137
- [b, ["TopNav", "click-Logo"]]
135
+ [w, ["TopNav", "click-Logo"]]
138
136
  ])
139
137
  ]),
140
138
  _: 1
141
139
  })
142
- ]),
143
- s(p, { name: "header-fade" }, {
144
- default: c(() => [
145
- g(f("div", P, [
140
+ ], 4),
141
+ d(H, { name: "header-fade" }, {
142
+ default: v(() => [
143
+ _(f("div", {
144
+ 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",
145
+ style: g({ top: n.HEADER_HEIGHT })
146
+ }, [
146
147
  f("div", {
147
- class: "tw-bg-primary",
148
- style: B(n.menuPosition),
149
- onMouseover: t[0] || (t[0] = (w) => n.onHover(n.activeHeaderItem, n.menuComponent)),
150
- onMouseout: t[1] || (t[1] = (w) => n.onHover())
148
+ class: "tw-bg-primary tw-overflow-y-auto",
149
+ style: g({ ...n.menuPosition, maxHeight: `calc(100vh - ${n.HEADER_HEIGHT})` }),
150
+ onMouseover: o[0] || (o[0] = (y) => n.onHover(n.activeHeaderItem, n.menuComponent)),
151
+ onMouseout: o[1] || (o[1] = (y) => n.onHover())
151
152
  }, [
152
- (v(), h(D(n.menuComponent), {
153
+ (c(), p(M(n.menuComponent), {
153
154
  ref: "menuComponentInstance",
154
155
  "logged-in": e.loggedIn,
155
156
  "login-url": e.loginUrl,
@@ -161,7 +162,7 @@ function z(C, t, e, n, l, a) {
161
162
  onLoadLendMenuData: n.emitLendMenuEvent
162
163
  }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "onLoadLendMenuData"]))
163
164
  ], 36)
164
- ], 512), [
165
+ ], 4), [
165
166
  [I, n.menuOpen]
166
167
  ])
167
168
  ]),
@@ -171,7 +172,7 @@ function z(C, t, e, n, l, a) {
171
172
  _: 1
172
173
  });
173
174
  }
174
- const F = /* @__PURE__ */ S(E, [["render", z], ["__scopeId", "data-v-07310dbf"]]);
175
+ const q = /* @__PURE__ */ N(S, [["render", R], ["__scopeId", "data-v-e1bd1f5d"]]);
175
176
  export {
176
- F as default
177
+ q as default
177
178
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "6.49.3",
3
+ "version": "6.50.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -113,5 +113,5 @@
113
113
  "embla-carousel-fade",
114
114
  "popper.js"
115
115
  ],
116
- "gitHead": "bbbdaa1f86dc87c05f49fd0d922f9a08a1f5061a"
116
+ "gitHead": "07d21f4014a4d7b4b74ce90fbe9a92689a3725c0"
117
117
  }