@kiva/kv-components 10.2.0 → 10.2.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/vue/KvWwwHeaderBasic/HeaderMenuGroup.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.js +10 -10
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.vue.d.ts +9 -0
- package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup2.js +14 -8
- package/dist/vue/KvWwwHeaderBasic/LinkBar.css +1 -1
- package/dist/vue/KvWwwHeaderBasic/LinkBar.js +6 -5
- package/dist/vue/KvWwwHeaderBasic/LinkBar.vue.d.ts +9 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
@media(min-width:45.875rem){.menu-group[data-v-
|
|
1
|
+
@media(min-width:45.875rem){.menu-group[data-v-c41addfb]{align-self:stretch}.menu-group[data-v-c41addfb]: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-c41addfb]{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-c41addfb],[data-pointer=mouse] .menu-group:hover>.menu-panel[data-v-c41addfb]{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-c41addfb],.menu-panel--drawer[data-v-c41addfb]{inset-inline:0}.menu-panel--card[data-v-c41addfb]{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-c41addfb]{border-radius:0}.menu-group:has(>[aria-expanded=true])>.menu-panel--drawer[data-v-c41addfb],[data-pointer=mouse] .menu-group:hover>.menu-panel--drawer[data-v-c41addfb]{max-height:none;min-height:100dvh}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { openBlock as
|
|
1
|
+
import d from "./HeaderMenuGroup2.js";
|
|
2
|
+
import { openBlock as s, createElementBlock as i, renderSlot as t, createElementVNode as l, normalizeClass as u, createCommentVNode as a } from "vue";
|
|
3
3
|
import "./HeaderMenuGroup.css";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
function f(e, o, r, g, v,
|
|
7
|
-
return
|
|
4
|
+
import m from "../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const p = ["id"];
|
|
6
|
+
function f(e, o, r, g, v, w) {
|
|
7
|
+
return s(), i("div", {
|
|
8
8
|
ref: "root",
|
|
9
9
|
class: "menu-group tw-flex tw-items-center",
|
|
10
10
|
onPointerenter: o[0] || (o[0] = (...n) => e.onPointerEnter && e.onPointerEnter(...n)),
|
|
@@ -22,14 +22,14 @@ function f(e, o, r, g, v, F) {
|
|
|
22
22
|
id: r.panelId,
|
|
23
23
|
class: u(["menu-panel", `menu-panel--${r.variant}`])
|
|
24
24
|
}, [
|
|
25
|
-
e.approached ? t(e.$slots, "panel", {
|
|
25
|
+
e.approached || r.prewarm ? t(e.$slots, "panel", {
|
|
26
26
|
key: 0,
|
|
27
27
|
close: e.close
|
|
28
28
|
}, void 0, !0) : a("", !0)
|
|
29
|
-
], 10,
|
|
29
|
+
], 10, p)
|
|
30
30
|
], 544);
|
|
31
31
|
}
|
|
32
|
-
const
|
|
32
|
+
const I = /* @__PURE__ */ m(d, [["render", f], ["__scopeId", "data-v-c41addfb"]]);
|
|
33
33
|
export {
|
|
34
|
-
|
|
34
|
+
I as default
|
|
35
35
|
};
|
|
@@ -7,6 +7,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
7
7
|
type: () => "full" | "card" | "drawer";
|
|
8
8
|
default: string;
|
|
9
9
|
};
|
|
10
|
+
prewarm: {
|
|
11
|
+
type: BooleanConstructor;
|
|
12
|
+
default: boolean;
|
|
13
|
+
};
|
|
10
14
|
}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
11
15
|
panelId: {
|
|
12
16
|
type: StringConstructor;
|
|
@@ -16,10 +20,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
16
20
|
type: () => "full" | "card" | "drawer";
|
|
17
21
|
default: string;
|
|
18
22
|
};
|
|
23
|
+
prewarm: {
|
|
24
|
+
type: BooleanConstructor;
|
|
25
|
+
default: boolean;
|
|
26
|
+
};
|
|
19
27
|
}>> & Readonly<{
|
|
20
28
|
onOpen?: (...args: any[]) => any;
|
|
21
29
|
onClose?: (...args: any[]) => any;
|
|
22
30
|
}>, {
|
|
23
31
|
variant: "card" | "full" | "drawer";
|
|
32
|
+
prewarm: boolean;
|
|
24
33
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
25
34
|
export default _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { inject as t, shallowRef as s, toRef as l, watch as
|
|
2
|
-
import { HEADER_MENU_STATE as
|
|
3
|
-
import { HEADER_MENU_PLACEMENT as
|
|
4
|
-
import { useHeaderMenuGroup as
|
|
1
|
+
import { inject as t, shallowRef as s, toRef as l, watch as d } from "vue";
|
|
2
|
+
import { HEADER_MENU_STATE as f } from "../../utils/useHeaderMenuState.js";
|
|
3
|
+
import { HEADER_MENU_PLACEMENT as i } from "../../utils/useHeaderMenuPlacement.js";
|
|
4
|
+
import { useHeaderMenuGroup as m } from "../../utils/useHeaderMenuGroup.js";
|
|
5
5
|
const A = {
|
|
6
6
|
name: "HeaderMenuGroup",
|
|
7
7
|
props: {
|
|
@@ -17,19 +17,25 @@ const A = {
|
|
|
17
17
|
variant: {
|
|
18
18
|
type: String,
|
|
19
19
|
default: "card"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
/**
|
|
22
|
+
* Mounts the panel content without waiting for an approach. For a panel that opens straight
|
|
23
|
+
* from a click there is no approach to mount on, so its async content would otherwise be
|
|
24
|
+
* fetched only once the panel is already open and visibly empty.
|
|
25
|
+
*/
|
|
26
|
+
prewarm: { type: Boolean, default: !1 }
|
|
21
27
|
},
|
|
22
28
|
emits: ["open", "close"],
|
|
23
29
|
setup(n, { emit: p }) {
|
|
24
|
-
const e = t(
|
|
30
|
+
const e = t(f);
|
|
25
31
|
if (!e) throw new Error("HeaderMenuGroup requires a HEADER_MENU_STATE provider");
|
|
26
|
-
const a = t(
|
|
32
|
+
const a = t(i, null), r = s(null), o = m({
|
|
27
33
|
panelId: l(n, "panelId"),
|
|
28
34
|
rootRef: r,
|
|
29
35
|
menus: e,
|
|
30
36
|
placement: a
|
|
31
37
|
});
|
|
32
|
-
return
|
|
38
|
+
return d(o.expanded, (u) => p(u ? "open" : "close"), { flush: "sync" }), { root: r, ...o };
|
|
33
39
|
}
|
|
34
40
|
};
|
|
35
41
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.link-bar[data-v-
|
|
1
|
+
.link-bar[data-v-80ce9639]{display:flex;align-items:center;gap:.5rem}.link-bar__logo[data-v-80ce9639]{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-80ce9639]{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-80ce9639]{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-80ce9639]{grid-area:lend}.link-bar__search[data-v-80ce9639]{grid-area:search;margin-bottom:.5rem}.link-bar__right[data-v-80ce9639]{grid-area:right;align-self:stretch}}@media(min-width:64rem){.link-bar[data-v-80ce9639]{-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-80ce9639]{margin-bottom:0}}@media(min-width:45.875rem){.link-bar--major-gifts[data-v-80ce9639]{grid-template-areas:"logo lend majorgifts right" "search search search search";grid-template-columns:1fr auto auto auto}}@media(min-width:64rem){.link-bar--major-gifts[data-v-80ce9639]{grid-template-areas:"logo lend majorgifts search right";grid-template-columns:auto auto auto 1fr auto}}.link-bar__major-gifts[data-v-80ce9639]{grid-area:majorgifts}.major-gifts-enter-active[data-v-80ce9639]{overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1)}.major-gifts-enter-from[data-v-80ce9639]{opacity:0;max-width:0}.major-gifts-enter-to[data-v-80ce9639]{opacity:1;max-width:12rem}.header-link[data-v-80ce9639]{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-80ce9639]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}.menu-trigger[data-v-80ce9639]{border:0;background:none;font:inherit;cursor:pointer}.backdrop[data-v-80ce9639]{position:absolute;z-index:1300;top:var(--nav-height, 4rem);inset-inline:0;height:0;background-color:rgba(var(--bg-action-highlight),.5);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)),height 0s calc(var(--menu-open-delay) + var(--menu-close-fade))}.link-bar:has(.menu-group>[aria-expanded=true])>.backdrop[data-v-80ce9639],.link-bar[data-pointer=mouse]:has(.menu-group:hover)>.backdrop[data-v-80ce9639]{visibility:visible;opacity:1;height:100vh;transition:opacity .3s ease var(--menu-open-delay),visibility 0s var(--menu-open-delay),height 0s var(--menu-open-delay)}.chevron[data-v-80ce9639]{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.menu-group:has(>[aria-expanded=true]) .chevron[data-v-80ce9639],[data-pointer=mouse] .menu-group:hover .chevron[data-v-80ce9639]{--tw-rotate: 180deg;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))}.link-bar__basket-count-loader[data-v-80ce9639]{width:1.5ch;height:1.375em;height:1lh}
|
|
@@ -21,7 +21,7 @@ const T = ["data-pointer"], V = ["onClick"], A = ["href"], K = { class: "link-ba
|
|
|
21
21
|
"data-testid": "header-avatar-skeleton"
|
|
22
22
|
};
|
|
23
23
|
function Z(c, n, e, a, $, ee) {
|
|
24
|
-
const u = r("kv-material-icon"), C = r("mobile-menu"), k = r("header-menu-group"),
|
|
24
|
+
const u = r("kv-material-icon"), C = r("mobile-menu"), k = r("header-menu-group"), M = r("kv-header-logo"), x = r("kv-lend-menu"), L = r("search-bar"), p = r("about-menu"), h = r("kv-loading-placeholder"), j = r("kv-button"), B = r("kv-user-avatar"), D = r("my-kiva-menu");
|
|
25
25
|
return o(), s("div", {
|
|
26
26
|
ref: "rootRef",
|
|
27
27
|
class: I(["link-bar tw-min-h-[4rem] tw-font-medium", { "link-bar--major-gifts": e.showMajorGiftsExp }]),
|
|
@@ -32,6 +32,7 @@ function Z(c, n, e, a, $, ee) {
|
|
|
32
32
|
class: "md:tw-hidden",
|
|
33
33
|
"panel-id": "header-basic-menu-drawer",
|
|
34
34
|
variant: "drawer",
|
|
35
|
+
prewarm: e.isMobile,
|
|
35
36
|
onOpen: n[0] || (n[0] = (t) => a.track("hover-Mobile-menu", "Mobile")),
|
|
36
37
|
onClose: n[1] || (n[1] = (t) => a.track("close-Mobile-menu", "Mobile"))
|
|
37
38
|
}, {
|
|
@@ -54,14 +55,14 @@ function Z(c, n, e, a, $, ee) {
|
|
|
54
55
|
}, null, 8, ["logged-in", "login-url", "is-mobile", "show-major-gifts-exp", "onClosingMenu"])
|
|
55
56
|
]),
|
|
56
57
|
_: 1
|
|
57
|
-
}),
|
|
58
|
+
}, 8, ["prewarm"]),
|
|
58
59
|
l("a", {
|
|
59
60
|
href: "/",
|
|
60
61
|
"aria-label": "Kiva home",
|
|
61
62
|
class: "link-bar__logo tw-px-1 tw-py-2 tw-cursor-pointer",
|
|
62
63
|
onClick: n[2] || (n[2] = (...t) => a.onLogoClick && a.onLogoClick(...t))
|
|
63
64
|
}, [
|
|
64
|
-
i(
|
|
65
|
+
i(M)
|
|
65
66
|
]),
|
|
66
67
|
i(k, {
|
|
67
68
|
class: "link-bar__lend",
|
|
@@ -87,7 +88,7 @@ function Z(c, n, e, a, $, ee) {
|
|
|
87
88
|
], 16)
|
|
88
89
|
]),
|
|
89
90
|
panel: d(() => [
|
|
90
|
-
i(
|
|
91
|
+
i(x, {
|
|
91
92
|
ref: "lendMenuInstance",
|
|
92
93
|
"user-id": e.userId,
|
|
93
94
|
"show-m-g-upsell-link": e.showMGUpsellLink,
|
|
@@ -270,7 +271,7 @@ function Z(c, n, e, a, $, ee) {
|
|
|
270
271
|
}, null, -1))
|
|
271
272
|
], 14, T);
|
|
272
273
|
}
|
|
273
|
-
const oe = /* @__PURE__ */ N(S, [["render", Z], ["__scopeId", "data-v-
|
|
274
|
+
const oe = /* @__PURE__ */ N(S, [["render", Z], ["__scopeId", "data-v-80ce9639"]]);
|
|
274
275
|
export {
|
|
275
276
|
oe as default
|
|
276
277
|
};
|
|
@@ -239,6 +239,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
239
239
|
type: () => "full" | "card" | "drawer";
|
|
240
240
|
default: string;
|
|
241
241
|
};
|
|
242
|
+
prewarm: {
|
|
243
|
+
type: BooleanConstructor;
|
|
244
|
+
default: boolean;
|
|
245
|
+
};
|
|
242
246
|
}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
243
247
|
panelId: {
|
|
244
248
|
type: StringConstructor;
|
|
@@ -248,11 +252,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
248
252
|
type: () => "full" | "card" | "drawer";
|
|
249
253
|
default: string;
|
|
250
254
|
};
|
|
255
|
+
prewarm: {
|
|
256
|
+
type: BooleanConstructor;
|
|
257
|
+
default: boolean;
|
|
258
|
+
};
|
|
251
259
|
}>> & Readonly<{
|
|
252
260
|
onOpen?: (...args: any[]) => any;
|
|
253
261
|
onClose?: (...args: any[]) => any;
|
|
254
262
|
}>, {
|
|
255
263
|
variant: "card" | "full" | "drawer";
|
|
264
|
+
prewarm: boolean;
|
|
256
265
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
257
266
|
SearchBar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
258
267
|
searchSuggestions: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "10.2.
|
|
3
|
+
"version": "10.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"dependencies": {
|
|
113
113
|
"fuse.js": "^7.1.0"
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "81ac7dc6b38cd9d9b53334c5ce40b49094524218"
|
|
116
116
|
}
|