@bobbykim/mcl-header 0.8.5 → 0.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +52 -4
- package/dist/mcl-header.js +89 -81
- package/dist/mcl-header.umd.cjs +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -62,6 +62,8 @@ $: ComponentInternalInstance;
|
|
|
62
62
|
$data: {};
|
|
63
63
|
$props: {
|
|
64
64
|
readonly bgColor?: ColorPalette | undefined;
|
|
65
|
+
readonly navLabel?: string | undefined;
|
|
66
|
+
readonly menuLabel?: string | undefined;
|
|
65
67
|
readonly mobileMenuBgColor?: ColorPalette | undefined;
|
|
66
68
|
readonly drawerBtnColor?: ColorPalette | undefined;
|
|
67
69
|
readonly showDrawerBorder?: boolean | undefined;
|
|
@@ -86,6 +88,8 @@ $emit: (event: "toggle-drawer", event: Event, open: boolean) => void;
|
|
|
86
88
|
$el: HTMLElement;
|
|
87
89
|
$options: ComponentOptionsBase<Readonly<{
|
|
88
90
|
bgColor?: ColorPalette;
|
|
91
|
+
navLabel?: string;
|
|
92
|
+
menuLabel?: string;
|
|
89
93
|
mobileMenuBgColor?: ColorPalette;
|
|
90
94
|
drawerBtnColor?: ColorPalette;
|
|
91
95
|
showDrawerBorder?: boolean;
|
|
@@ -100,6 +104,8 @@ headerClose: () => void;
|
|
|
100
104
|
"toggle-drawer": (event: Event, open: boolean) => any;
|
|
101
105
|
}, string, {
|
|
102
106
|
bgColor: ColorPalette;
|
|
107
|
+
navLabel: string;
|
|
108
|
+
menuLabel: string;
|
|
103
109
|
mobileMenuBgColor: ColorPalette;
|
|
104
110
|
drawerBtnColor: ColorPalette;
|
|
105
111
|
showDrawerBorder: boolean;
|
|
@@ -128,6 +134,8 @@ $nextTick: nextTick;
|
|
|
128
134
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
|
|
129
135
|
} & Readonly<{
|
|
130
136
|
bgColor: ColorPalette;
|
|
137
|
+
navLabel: string;
|
|
138
|
+
menuLabel: string;
|
|
131
139
|
mobileMenuBgColor: ColorPalette;
|
|
132
140
|
drawerBtnColor: ColorPalette;
|
|
133
141
|
showDrawerBorder: boolean;
|
|
@@ -136,6 +144,8 @@ scrollDistance: number;
|
|
|
136
144
|
sticky: HeaderStickyOptionType;
|
|
137
145
|
}> & Omit<Readonly<{
|
|
138
146
|
bgColor?: ColorPalette;
|
|
147
|
+
navLabel?: string;
|
|
148
|
+
menuLabel?: string;
|
|
139
149
|
mobileMenuBgColor?: ColorPalette;
|
|
140
150
|
drawerBtnColor?: ColorPalette;
|
|
141
151
|
showDrawerBorder?: boolean;
|
|
@@ -144,7 +154,7 @@ scrollDistance?: number;
|
|
|
144
154
|
sticky?: HeaderStickyOptionType;
|
|
145
155
|
}> & Readonly<{
|
|
146
156
|
"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
|
|
147
|
-
}>, "bgColor" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef< {
|
|
157
|
+
}>, "bgColor" | "navLabel" | "menuLabel" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef< {
|
|
148
158
|
headerClose: () => void;
|
|
149
159
|
}> & {} & ComponentCustomProperties & {} & {
|
|
150
160
|
$slots: Readonly<{
|
|
@@ -197,6 +207,8 @@ $: ComponentInternalInstance;
|
|
|
197
207
|
$data: {};
|
|
198
208
|
$props: {
|
|
199
209
|
readonly bgColor?: ColorPalette | undefined;
|
|
210
|
+
readonly navLabel?: string | undefined;
|
|
211
|
+
readonly menuLabel?: string | undefined;
|
|
200
212
|
readonly drawerBtnColor?: ColorPalette | undefined;
|
|
201
213
|
readonly showDrawerBorder?: boolean | undefined;
|
|
202
214
|
readonly headerWidth?: number | undefined;
|
|
@@ -218,6 +230,8 @@ $emit: (event: "toggle-drawer", event: Event, open: boolean) => void;
|
|
|
218
230
|
$el: HTMLElement;
|
|
219
231
|
$options: ComponentOptionsBase<Readonly<{
|
|
220
232
|
bgColor?: ColorPalette;
|
|
233
|
+
navLabel?: string;
|
|
234
|
+
menuLabel?: string;
|
|
221
235
|
drawerBtnColor?: ColorPalette;
|
|
222
236
|
showDrawerBorder?: boolean;
|
|
223
237
|
headerWidth?: number;
|
|
@@ -229,6 +243,8 @@ headerClose: () => void;
|
|
|
229
243
|
"toggle-drawer": (event: Event, open: boolean) => any;
|
|
230
244
|
}, string, {
|
|
231
245
|
bgColor: ColorPalette;
|
|
246
|
+
navLabel: string;
|
|
247
|
+
menuLabel: string;
|
|
232
248
|
drawerBtnColor: ColorPalette;
|
|
233
249
|
showDrawerBorder: boolean;
|
|
234
250
|
headerWidth: number;
|
|
@@ -254,17 +270,21 @@ $nextTick: nextTick;
|
|
|
254
270
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
|
|
255
271
|
} & Readonly<{
|
|
256
272
|
bgColor: ColorPalette;
|
|
273
|
+
navLabel: string;
|
|
274
|
+
menuLabel: string;
|
|
257
275
|
drawerBtnColor: ColorPalette;
|
|
258
276
|
showDrawerBorder: boolean;
|
|
259
277
|
headerWidth: number;
|
|
260
278
|
}> & Omit<Readonly<{
|
|
261
279
|
bgColor?: ColorPalette;
|
|
280
|
+
navLabel?: string;
|
|
281
|
+
menuLabel?: string;
|
|
262
282
|
drawerBtnColor?: ColorPalette;
|
|
263
283
|
showDrawerBorder?: boolean;
|
|
264
284
|
headerWidth?: number;
|
|
265
285
|
}> & Readonly<{
|
|
266
286
|
"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
|
|
267
|
-
}>, "bgColor" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef< {
|
|
287
|
+
}>, "bgColor" | "navLabel" | "menuLabel" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef< {
|
|
268
288
|
headerClose: () => void;
|
|
269
289
|
}> & {} & ComponentCustomProperties & {} & {
|
|
270
290
|
$slots: Readonly<{
|
|
@@ -443,6 +463,10 @@ declare type __VLS_Props = {
|
|
|
443
463
|
showHighlight?: boolean;
|
|
444
464
|
highlightColor?: ColorPalette;
|
|
445
465
|
bgColor?: ColorPalette;
|
|
466
|
+
/** aria-label of the nav landmark(s). Defaults to "Main". */
|
|
467
|
+
navLabel?: string;
|
|
468
|
+
/** Accessible name of the mobile menu button. Defaults to "Menu". */
|
|
469
|
+
menuLabel?: string;
|
|
446
470
|
mobileMenuBgColor?: ColorPalette;
|
|
447
471
|
drawerBtnColor?: ColorPalette;
|
|
448
472
|
showDrawerBorder?: boolean;
|
|
@@ -467,6 +491,10 @@ declare type __VLS_Props_2 = {
|
|
|
467
491
|
showHighlight?: boolean;
|
|
468
492
|
highlightColor?: ColorPalette;
|
|
469
493
|
bgColor?: ColorPalette;
|
|
494
|
+
/** aria-label of the nav landmark(s). Defaults to "Main". */
|
|
495
|
+
navLabel?: string;
|
|
496
|
+
/** Accessible name of the mobile menu button. Defaults to "Menu". */
|
|
497
|
+
menuLabel?: string;
|
|
470
498
|
drawerBtnColor?: ColorPalette;
|
|
471
499
|
showDrawerBorder?: boolean;
|
|
472
500
|
headerWidth?: number;
|
|
@@ -491,6 +519,8 @@ declare function __VLS_template(): {
|
|
|
491
519
|
$data: {};
|
|
492
520
|
$props: {
|
|
493
521
|
readonly bgColor?: ColorPalette | undefined;
|
|
522
|
+
readonly navLabel?: string | undefined;
|
|
523
|
+
readonly menuLabel?: string | undefined;
|
|
494
524
|
readonly mobileMenuBgColor?: ColorPalette | undefined;
|
|
495
525
|
readonly drawerBtnColor?: ColorPalette | undefined;
|
|
496
526
|
readonly showDrawerBorder?: boolean | undefined;
|
|
@@ -515,6 +545,8 @@ declare function __VLS_template(): {
|
|
|
515
545
|
$el: HTMLElement;
|
|
516
546
|
$options: ComponentOptionsBase<Readonly<{
|
|
517
547
|
bgColor?: ColorPalette;
|
|
548
|
+
navLabel?: string;
|
|
549
|
+
menuLabel?: string;
|
|
518
550
|
mobileMenuBgColor?: ColorPalette;
|
|
519
551
|
drawerBtnColor?: ColorPalette;
|
|
520
552
|
showDrawerBorder?: boolean;
|
|
@@ -529,6 +561,8 @@ declare function __VLS_template(): {
|
|
|
529
561
|
"toggle-drawer": (event: Event, open: boolean) => any;
|
|
530
562
|
}, string, {
|
|
531
563
|
bgColor: ColorPalette;
|
|
564
|
+
navLabel: string;
|
|
565
|
+
menuLabel: string;
|
|
532
566
|
mobileMenuBgColor: ColorPalette;
|
|
533
567
|
drawerBtnColor: ColorPalette;
|
|
534
568
|
showDrawerBorder: boolean;
|
|
@@ -557,6 +591,8 @@ declare function __VLS_template(): {
|
|
|
557
591
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
|
|
558
592
|
} & Readonly<{
|
|
559
593
|
bgColor: ColorPalette;
|
|
594
|
+
navLabel: string;
|
|
595
|
+
menuLabel: string;
|
|
560
596
|
mobileMenuBgColor: ColorPalette;
|
|
561
597
|
drawerBtnColor: ColorPalette;
|
|
562
598
|
showDrawerBorder: boolean;
|
|
@@ -565,6 +601,8 @@ declare function __VLS_template(): {
|
|
|
565
601
|
sticky: HeaderStickyOptionType;
|
|
566
602
|
}> & Omit<Readonly<{
|
|
567
603
|
bgColor?: ColorPalette;
|
|
604
|
+
navLabel?: string;
|
|
605
|
+
menuLabel?: string;
|
|
568
606
|
mobileMenuBgColor?: ColorPalette;
|
|
569
607
|
drawerBtnColor?: ColorPalette;
|
|
570
608
|
showDrawerBorder?: boolean;
|
|
@@ -573,7 +611,7 @@ declare function __VLS_template(): {
|
|
|
573
611
|
sticky?: HeaderStickyOptionType;
|
|
574
612
|
}> & Readonly<{
|
|
575
613
|
"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
|
|
576
|
-
}>, "bgColor" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef< {
|
|
614
|
+
}>, "bgColor" | "navLabel" | "menuLabel" | "mobileMenuBgColor" | "drawerBtnColor" | "showDrawerBorder" | "fadeInOnScroll" | "scrollDistance" | "sticky" | "headerClose"> & ShallowUnwrapRef< {
|
|
577
615
|
headerClose: () => void;
|
|
578
616
|
}> & {} & ComponentCustomProperties & {} & {
|
|
579
617
|
$slots: Readonly<{
|
|
@@ -615,6 +653,8 @@ declare function __VLS_template_2(): {
|
|
|
615
653
|
$data: {};
|
|
616
654
|
$props: {
|
|
617
655
|
readonly bgColor?: ColorPalette | undefined;
|
|
656
|
+
readonly navLabel?: string | undefined;
|
|
657
|
+
readonly menuLabel?: string | undefined;
|
|
618
658
|
readonly drawerBtnColor?: ColorPalette | undefined;
|
|
619
659
|
readonly showDrawerBorder?: boolean | undefined;
|
|
620
660
|
readonly headerWidth?: number | undefined;
|
|
@@ -636,6 +676,8 @@ declare function __VLS_template_2(): {
|
|
|
636
676
|
$el: HTMLElement;
|
|
637
677
|
$options: ComponentOptionsBase<Readonly<{
|
|
638
678
|
bgColor?: ColorPalette;
|
|
679
|
+
navLabel?: string;
|
|
680
|
+
menuLabel?: string;
|
|
639
681
|
drawerBtnColor?: ColorPalette;
|
|
640
682
|
showDrawerBorder?: boolean;
|
|
641
683
|
headerWidth?: number;
|
|
@@ -647,6 +689,8 @@ declare function __VLS_template_2(): {
|
|
|
647
689
|
"toggle-drawer": (event: Event, open: boolean) => any;
|
|
648
690
|
}, string, {
|
|
649
691
|
bgColor: ColorPalette;
|
|
692
|
+
navLabel: string;
|
|
693
|
+
menuLabel: string;
|
|
650
694
|
drawerBtnColor: ColorPalette;
|
|
651
695
|
showDrawerBorder: boolean;
|
|
652
696
|
headerWidth: number;
|
|
@@ -672,17 +716,21 @@ declare function __VLS_template_2(): {
|
|
|
672
716
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
|
|
673
717
|
} & Readonly<{
|
|
674
718
|
bgColor: ColorPalette;
|
|
719
|
+
navLabel: string;
|
|
720
|
+
menuLabel: string;
|
|
675
721
|
drawerBtnColor: ColorPalette;
|
|
676
722
|
showDrawerBorder: boolean;
|
|
677
723
|
headerWidth: number;
|
|
678
724
|
}> & Omit<Readonly<{
|
|
679
725
|
bgColor?: ColorPalette;
|
|
726
|
+
navLabel?: string;
|
|
727
|
+
menuLabel?: string;
|
|
680
728
|
drawerBtnColor?: ColorPalette;
|
|
681
729
|
showDrawerBorder?: boolean;
|
|
682
730
|
headerWidth?: number;
|
|
683
731
|
}> & Readonly<{
|
|
684
732
|
"onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
|
|
685
|
-
}>, "bgColor" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef< {
|
|
733
|
+
}>, "bgColor" | "navLabel" | "menuLabel" | "drawerBtnColor" | "showDrawerBorder" | "headerClose" | "headerWidth"> & ShallowUnwrapRef< {
|
|
686
734
|
headerClose: () => void;
|
|
687
735
|
}> & {} & ComponentCustomProperties & {} & {
|
|
688
736
|
$slots: Readonly<{
|
package/dist/mcl-header.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-1ce9ae01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1ce9ae01]:before,.nav__text:hover+.nav__decorator[data-v-1ce9ae01]:before{width:100%}.nav__decorator[data-v-a36072d4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-a36072d4]:before,.nav__text:hover+.nav__decorator[data-v-a36072d4]:before{width:100%}.nav__decorator[data-v-65d3897d]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-65d3897d]:before,.nav__text:hover+.nav__decorator[data-v-65d3897d]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
2
|
import { defineComponent as R, ref as H, computed as S, openBlock as r, createElementBlock as d, createElementVNode as o, normalizeClass as y, toDisplayString as M, unref as w, createCommentVNode as $, createVNode as D, withCtx as I, Fragment as N, renderList as j, withKeys as G, useSlots as P, createBlock as V, renderSlot as E } from "vue";
|
|
3
3
|
import { generateClass as t, Collapse as Q, DropdownContainer as p, DropdownContent as _, HeaderHorizontal as ee, AccordionGroup as W, HeaderVertical as te } from "@bobbykim/manguito-theme";
|
|
4
|
-
const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "relative pt-2xs" },
|
|
4
|
+
const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "relative pt-2xs" }, ae = { class: "relative flex flex-col" }, ie = ["href", "target", "onClick"], re = /* @__PURE__ */ R({
|
|
5
5
|
__name: "NavCollapse",
|
|
6
6
|
props: {
|
|
7
7
|
navId: {},
|
|
@@ -18,23 +18,23 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
18
18
|
emits: ["child-click", "label-click"],
|
|
19
19
|
setup(e, { emit: L }) {
|
|
20
20
|
const T = e, k = L, g = H(!1), C = S(() => {
|
|
21
|
-
const { navId:
|
|
22
|
-
return `nav-${
|
|
23
|
-
}), f = H(), c = (
|
|
24
|
-
g.value =
|
|
25
|
-
}, x = (
|
|
26
|
-
f.value?.toggle(), k("label-click",
|
|
27
|
-
}, v = (
|
|
21
|
+
const { navId: i } = T;
|
|
22
|
+
return `nav-${i.toLowerCase().replaceAll(" ", "-")}`;
|
|
23
|
+
}), f = H(), c = (i) => {
|
|
24
|
+
g.value = i;
|
|
25
|
+
}, x = (i, s) => {
|
|
26
|
+
f.value?.toggle(), k("label-click", i, s, g.value);
|
|
27
|
+
}, v = (i, s) => {
|
|
28
28
|
const { asLink: n } = T;
|
|
29
|
-
n ||
|
|
30
|
-
}, b = (
|
|
29
|
+
n || i.preventDefault(), k("child-click", i, s);
|
|
30
|
+
}, b = (i, s, n) => {
|
|
31
31
|
const m = [
|
|
32
|
-
t.bodyTextVariant({ size:
|
|
32
|
+
t.bodyTextVariant({ size: i }),
|
|
33
33
|
t.textColorVariant({ color: s })
|
|
34
34
|
];
|
|
35
35
|
return n && m.push("font-bold"), m.join(" ");
|
|
36
36
|
};
|
|
37
|
-
return (
|
|
37
|
+
return (i, s) => (r(), d("div", le, [
|
|
38
38
|
o("div", oe, [
|
|
39
39
|
o("button", {
|
|
40
40
|
class: y(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none", b(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
|
|
@@ -70,7 +70,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
70
70
|
key: 0,
|
|
71
71
|
class: y(["absolute -left-4 h-full w-md bg-opacity-25", w(t).bgColorVariant({ color: e.highlightColor })])
|
|
72
72
|
}, null, 2)) : $("", !0),
|
|
73
|
-
o("div",
|
|
73
|
+
o("div", ae, [
|
|
74
74
|
(r(!0), d(N, null, j(e.navItem.children, (n, m) => (r(), d("a", {
|
|
75
75
|
href: n.url,
|
|
76
76
|
target: n.target,
|
|
@@ -79,8 +79,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
79
79
|
w(t).bodyTextVariant({ size: e.menuTextSize })
|
|
80
80
|
]]),
|
|
81
81
|
key: m,
|
|
82
|
-
onClick: (
|
|
83
|
-
}, M(n.title), 11,
|
|
82
|
+
onClick: (a) => v(a, n)
|
|
83
|
+
}, M(n.title), 11, ie))), 128))
|
|
84
84
|
])
|
|
85
85
|
])
|
|
86
86
|
]),
|
|
@@ -107,25 +107,25 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
107
107
|
},
|
|
108
108
|
emits: ["label-click", "child-click"],
|
|
109
109
|
setup(e, { emit: L }) {
|
|
110
|
-
const T = e, k = L, g = H(-1), C = H(), f = (b,
|
|
110
|
+
const T = e, k = L, g = H(-1), C = H(), f = (b, i, s) => {
|
|
111
111
|
const n = [
|
|
112
112
|
t.bodyTextVariant({ size: b }),
|
|
113
|
-
t.textColorVariant({ color:
|
|
113
|
+
t.textColorVariant({ color: i })
|
|
114
114
|
];
|
|
115
115
|
return s && n.push("font-bold"), n.join(" ");
|
|
116
116
|
}, c = (b) => {
|
|
117
|
-
const
|
|
118
|
-
C.value !== void 0 && (b === "down" && g.value <
|
|
119
|
-
}, x = (b,
|
|
120
|
-
g.value = -1, k("label-click", b,
|
|
121
|
-
}, v = (b,
|
|
117
|
+
const i = T.navItem.children.length;
|
|
118
|
+
C.value !== void 0 && (b === "down" && g.value < i - 1 && g.value++, b === "up" && g.value > 0 && g.value--, C.value[g.value].focus());
|
|
119
|
+
}, x = (b, i, s) => {
|
|
120
|
+
g.value = -1, k("label-click", b, i, s);
|
|
121
|
+
}, v = (b, i) => {
|
|
122
122
|
const { asLink: s } = T;
|
|
123
|
-
s || b.preventDefault(), k("child-click", b,
|
|
123
|
+
s || b.preventDefault(), k("child-click", b, i);
|
|
124
124
|
};
|
|
125
|
-
return (b,
|
|
125
|
+
return (b, i) => (r(), d("div", {
|
|
126
126
|
onKeyup: [
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
i[0] || (i[0] = G((s) => c("down"), ["down"])),
|
|
128
|
+
i[1] || (i[1] = G((s) => c("up"), ["up"]))
|
|
129
129
|
]
|
|
130
130
|
}, [
|
|
131
131
|
D(w(p), null, {
|
|
@@ -143,7 +143,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
143
143
|
n ? "rotate-180" : "rotate-0",
|
|
144
144
|
"transition-transform duration-300 ease-in"
|
|
145
145
|
]])
|
|
146
|
-
}, [...
|
|
146
|
+
}, [...i[2] || (i[2] = [
|
|
147
147
|
o("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1)
|
|
148
148
|
])], 2))
|
|
149
149
|
], 10, ce),
|
|
@@ -173,7 +173,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
173
173
|
w(t).textColorVariant({ color: e.menuTextColor }),
|
|
174
174
|
w(t).bodyTextVariant({ size: e.menuTextSize })
|
|
175
175
|
]]),
|
|
176
|
-
onClick: (
|
|
176
|
+
onClick: (a) => (s(), v(a, n))
|
|
177
177
|
}, M(n.title), 11, ue))), 128))
|
|
178
178
|
]),
|
|
179
179
|
_: 1
|
|
@@ -243,6 +243,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
243
243
|
showHighlight: { type: Boolean, default: !0 },
|
|
244
244
|
highlightColor: { default: "primary" },
|
|
245
245
|
bgColor: { default: "light-1" },
|
|
246
|
+
navLabel: {},
|
|
247
|
+
menuLabel: {},
|
|
246
248
|
mobileMenuBgColor: { default: "light-2" },
|
|
247
249
|
drawerBtnColor: { default: "dark-1" },
|
|
248
250
|
showDrawerBorder: { type: Boolean, default: !0 },
|
|
@@ -254,14 +256,14 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
254
256
|
const k = e, g = H(), C = P(), f = T, c = () => {
|
|
255
257
|
g.value?.headerClose();
|
|
256
258
|
}, x = (n) => {
|
|
257
|
-
const { titleBlockAsLink: m, titleBlockLink:
|
|
258
|
-
m || n.preventDefault(), f("title-click", n,
|
|
259
|
+
const { titleBlockAsLink: m, titleBlockLink: a, titleBlockLinkTarget: l } = k;
|
|
260
|
+
m || n.preventDefault(), f("title-click", n, a, l), c();
|
|
259
261
|
}, v = (n, m) => {
|
|
260
|
-
const { menuItemAsLink:
|
|
261
|
-
|
|
262
|
-
}, b = (n, m,
|
|
263
|
-
f("collapse-click", n, m,
|
|
264
|
-
},
|
|
262
|
+
const { menuItemAsLink: a } = k;
|
|
263
|
+
a || n.preventDefault(), f("menu-click", n, m), c();
|
|
264
|
+
}, b = (n, m, a) => {
|
|
265
|
+
f("collapse-click", n, m, a);
|
|
266
|
+
}, i = (n, m) => [
|
|
265
267
|
t.h2Variant({ size: n }),
|
|
266
268
|
t.textColorVariant({ color: m })
|
|
267
269
|
].join(" "), s = (n) => {
|
|
@@ -271,6 +273,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
271
273
|
return L({
|
|
272
274
|
headerClose: c
|
|
273
275
|
}), (n, m) => (r(), V(w(ee), {
|
|
276
|
+
"nav-label": e.navLabel,
|
|
277
|
+
"menu-label": e.menuLabel,
|
|
274
278
|
ref_key: "componentRef",
|
|
275
279
|
ref: g,
|
|
276
280
|
"bg-color": e.bgColor,
|
|
@@ -307,18 +311,18 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
307
311
|
onClick: x
|
|
308
312
|
}, [
|
|
309
313
|
o("h2", {
|
|
310
|
-
class: y(["inline-block align-middle tracking-wider",
|
|
314
|
+
class: y(["inline-block align-middle tracking-wider", i(e.titleSize, e.titleColor)]),
|
|
311
315
|
innerHTML: e.title
|
|
312
316
|
}, null, 10, we)
|
|
313
317
|
], 8, ye),
|
|
314
318
|
o("ul", Te, [
|
|
315
|
-
(r(!0), d(N, null, j(e.menuItems, (
|
|
319
|
+
(r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
|
|
316
320
|
class: "mr-xs last:mr-0",
|
|
317
321
|
key: `menu-${l}`
|
|
318
322
|
}, [
|
|
319
|
-
s(
|
|
323
|
+
s(a) ? (r(), V(he, {
|
|
320
324
|
key: 1,
|
|
321
|
-
"nav-item":
|
|
325
|
+
"nav-item": a,
|
|
322
326
|
"menu-text-color": e.menuTextColor,
|
|
323
327
|
"menu-text-size": e.menuTextSize,
|
|
324
328
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -330,7 +334,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
330
334
|
onLabelClick: b
|
|
331
335
|
}, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "bg-color", "as-link"])) : (r(), V(U, {
|
|
332
336
|
key: 0,
|
|
333
|
-
"nav-item":
|
|
337
|
+
"nav-item": a,
|
|
334
338
|
"menu-text-color": e.menuTextColor,
|
|
335
339
|
"menu-text-size": e.menuTextSize,
|
|
336
340
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -354,14 +358,14 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
354
358
|
D(w(W), null, {
|
|
355
359
|
default: I(() => [
|
|
356
360
|
o("ul", Le, [
|
|
357
|
-
(r(!0), d(N, null, j(e.menuItems, (
|
|
361
|
+
(r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
|
|
358
362
|
class: "mb-2xs last:mb-0",
|
|
359
363
|
key: `mobile-${l}`
|
|
360
364
|
}, [
|
|
361
|
-
s(
|
|
365
|
+
s(a) ? (r(), V(se, {
|
|
362
366
|
key: 1,
|
|
363
|
-
"nav-id":
|
|
364
|
-
"nav-item":
|
|
367
|
+
"nav-id": a.title,
|
|
368
|
+
"nav-item": a,
|
|
365
369
|
"menu-text-color": e.menuTextColor,
|
|
366
370
|
"menu-text-size": e.menuTextSize,
|
|
367
371
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -372,7 +376,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
372
376
|
onLabelClick: b
|
|
373
377
|
}, null, 8, ["nav-id", "nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"])) : (r(), V(U, {
|
|
374
378
|
key: 0,
|
|
375
|
-
"nav-item":
|
|
379
|
+
"nav-item": a,
|
|
376
380
|
"menu-text-color": e.menuTextColor,
|
|
377
381
|
"menu-text-size": e.menuTextSize,
|
|
378
382
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -392,7 +396,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
392
396
|
])
|
|
393
397
|
]),
|
|
394
398
|
_: 3
|
|
395
|
-
}, 8, ["bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
|
|
399
|
+
}, 8, ["nav-label", "menu-label", "bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
|
|
396
400
|
}
|
|
397
401
|
}), ze = { class: "relative flex items-center justify-center gap-2" }, Ve = ["href", "target", "onClick"], $e = { class: "relative" }, q = /* @__PURE__ */ R({
|
|
398
402
|
__name: "NavCollapseVertical",
|
|
@@ -409,25 +413,25 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
409
413
|
},
|
|
410
414
|
emits: ["label-click", "child-click"],
|
|
411
415
|
setup(e, { expose: L, emit: T }) {
|
|
412
|
-
const k = e, g = H(!1), C = H(), f = T, c = (
|
|
413
|
-
g.value =
|
|
416
|
+
const k = e, g = H(!1), C = H(), f = T, c = (a) => {
|
|
417
|
+
g.value = a;
|
|
414
418
|
}, x = () => {
|
|
415
419
|
C.value?.close();
|
|
416
|
-
}, v = (
|
|
417
|
-
C.value?.toggle(), f("label-click",
|
|
418
|
-
}, b = (
|
|
420
|
+
}, v = (a, l) => {
|
|
421
|
+
C.value?.toggle(), f("label-click", a, l, g.value);
|
|
422
|
+
}, b = (a, l) => {
|
|
419
423
|
const { asLink: u } = k;
|
|
420
|
-
u ||
|
|
421
|
-
},
|
|
422
|
-
const { navId:
|
|
424
|
+
u || a.preventDefault(), f("child-click", a, l), C.value?.close(), x();
|
|
425
|
+
}, i = S(() => {
|
|
426
|
+
const { navId: a, navLocation: l } = k, h = a.toLowerCase().replaceAll(" ", "-");
|
|
423
427
|
return `nav-${l}-${h}`;
|
|
424
428
|
}), s = S(() => {
|
|
425
|
-
const { textColor:
|
|
429
|
+
const { textColor: a, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
|
|
426
430
|
t.bodyTextVariant({ size: l })
|
|
427
431
|
];
|
|
428
432
|
if (!u) {
|
|
429
433
|
const K = [
|
|
430
|
-
t.textColorVariant({ color:
|
|
434
|
+
t.textColorVariant({ color: a }),
|
|
431
435
|
t.hoverTextColorVariant({ color: h }),
|
|
432
436
|
t.focusTextColorVariant({ color: h })
|
|
433
437
|
];
|
|
@@ -440,28 +444,28 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
440
444
|
z.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + K);
|
|
441
445
|
const O = [
|
|
442
446
|
t.textColorVariant({ color: h }),
|
|
443
|
-
t.hoverTextColorVariant({ color:
|
|
444
|
-
t.focusTextColorVariant({ color:
|
|
447
|
+
t.hoverTextColorVariant({ color: a }),
|
|
448
|
+
t.focusTextColorVariant({ color: a })
|
|
445
449
|
];
|
|
446
450
|
z.push(O.join(" "));
|
|
447
451
|
}
|
|
448
452
|
return B && z.push("font-bold"), z.join(" ");
|
|
449
453
|
}), n = S(() => {
|
|
450
|
-
const { dHl:
|
|
451
|
-
if (!
|
|
454
|
+
const { dHl: a, hlColor: l, navLocation: u } = k, h = [];
|
|
455
|
+
if (!a)
|
|
452
456
|
return "";
|
|
453
457
|
const B = "before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ", z = u === "desktop" ? "before:left-0 " : "before:right-0 ";
|
|
454
458
|
return h.push(
|
|
455
459
|
B + z + t.beforeBgColorVariant({ color: l })
|
|
456
460
|
), h.join(" ");
|
|
457
461
|
}), m = S(() => {
|
|
458
|
-
const { textColor:
|
|
459
|
-
t.textColorVariant({ color:
|
|
462
|
+
const { textColor: a, textSize: l, dHl: u, hlColor: h, fontBold: B, navLocation: z } = k, K = l === "xl" ? "lg" : l === "lg" ? "md" : l === "md" ? "sm" : "xs", A = [
|
|
463
|
+
t.textColorVariant({ color: a }),
|
|
460
464
|
t.bodyTextVariant({ size: K })
|
|
461
465
|
];
|
|
462
466
|
if (z === "mobile" && A.push("text-end"), !u) {
|
|
463
467
|
const O = [
|
|
464
|
-
t.textColorVariant({ color:
|
|
468
|
+
t.textColorVariant({ color: a }),
|
|
465
469
|
t.hoverTextColorVariant({ color: h }),
|
|
466
470
|
t.focusTextColorVariant({ color: h })
|
|
467
471
|
];
|
|
@@ -474,8 +478,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
474
478
|
A.push(X + Y + O);
|
|
475
479
|
const Z = [
|
|
476
480
|
t.textColorVariant({ color: h }),
|
|
477
|
-
t.hoverTextColorVariant({ color:
|
|
478
|
-
t.focusTextColorVariant({ color:
|
|
481
|
+
t.hoverTextColorVariant({ color: a }),
|
|
482
|
+
t.focusTextColorVariant({ color: a })
|
|
479
483
|
];
|
|
480
484
|
A.push(Z.join(" "));
|
|
481
485
|
}
|
|
@@ -483,7 +487,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
483
487
|
});
|
|
484
488
|
return L({
|
|
485
489
|
closeCollapse: x
|
|
486
|
-
}), (
|
|
490
|
+
}), (a, l) => (r(), d("div", null, [
|
|
487
491
|
o("button", {
|
|
488
492
|
class: y(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute", [s.value]]),
|
|
489
493
|
onClick: l[0] || (l[0] = (u) => v(u, e.menuItem.title))
|
|
@@ -505,7 +509,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
505
509
|
D(w(Q), {
|
|
506
510
|
ref_key: "collapseRef",
|
|
507
511
|
ref: C,
|
|
508
|
-
id:
|
|
512
|
+
id: i.value,
|
|
509
513
|
onOpen: c,
|
|
510
514
|
onClose: c
|
|
511
515
|
}, {
|
|
@@ -549,7 +553,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
549
553
|
const { asLink: x } = T;
|
|
550
554
|
x || f.preventDefault(), k("menu-click", f, c);
|
|
551
555
|
}, C = S(() => {
|
|
552
|
-
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T,
|
|
556
|
+
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, i = [
|
|
553
557
|
t.bodyTextVariant({ size: c })
|
|
554
558
|
];
|
|
555
559
|
if (!x) {
|
|
@@ -558,21 +562,21 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
558
562
|
t.hoverTextColorVariant({ color: v }),
|
|
559
563
|
t.focusTextColorVariant({ color: v })
|
|
560
564
|
];
|
|
561
|
-
|
|
565
|
+
i.push(s.join(" "));
|
|
562
566
|
}
|
|
563
567
|
if (x) {
|
|
564
568
|
const s = t.beforeBgColorVariant({
|
|
565
569
|
color: v
|
|
566
570
|
});
|
|
567
|
-
|
|
571
|
+
i.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + s);
|
|
568
572
|
const m = [
|
|
569
573
|
t.textColorVariant({ color: v }),
|
|
570
574
|
t.hoverTextColorVariant({ color: f }),
|
|
571
575
|
t.focusTextColorVariant({ color: f })
|
|
572
576
|
];
|
|
573
|
-
|
|
577
|
+
i.push(m.join(" "));
|
|
574
578
|
}
|
|
575
|
-
return b &&
|
|
579
|
+
return b && i.push("font-bold"), i.join(" ");
|
|
576
580
|
});
|
|
577
581
|
return (f, c) => (r(), d("a", {
|
|
578
582
|
class: y([[C.value], "relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),
|
|
@@ -602,6 +606,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
602
606
|
showHighlight: { type: Boolean, default: !0 },
|
|
603
607
|
highlightColor: { default: "primary" },
|
|
604
608
|
bgColor: { default: "light-1" },
|
|
609
|
+
navLabel: {},
|
|
610
|
+
menuLabel: {},
|
|
605
611
|
drawerBtnColor: { default: "dark-1" },
|
|
606
612
|
showDrawerBorder: { type: Boolean, default: !0 },
|
|
607
613
|
headerWidth: { default: 160 }
|
|
@@ -615,7 +621,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
615
621
|
}, b = () => {
|
|
616
622
|
for (let l = 0; l < c.value.length; l++)
|
|
617
623
|
c.value[l].closeCollapse();
|
|
618
|
-
},
|
|
624
|
+
}, i = (l) => {
|
|
619
625
|
const { titleBlockAsLink: u, titleBlockLink: h, titleBlockLinkTarget: B } = k;
|
|
620
626
|
u || l.preventDefault(), C("title-click", l, h, B), v(), b();
|
|
621
627
|
}, s = (l, u) => {
|
|
@@ -629,13 +635,15 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
629
635
|
t.h3Variant({ size: l }),
|
|
630
636
|
t.textColorVariant({ color: u })
|
|
631
637
|
].join(" ");
|
|
632
|
-
}),
|
|
638
|
+
}), a = (l) => {
|
|
633
639
|
const u = l;
|
|
634
640
|
return typeof u.children > "u" ? !1 : u.children.length > 0;
|
|
635
641
|
};
|
|
636
642
|
return L({
|
|
637
643
|
headerClose: v
|
|
638
644
|
}), (l, u) => (r(), V(w(te), {
|
|
645
|
+
"nav-label": e.navLabel,
|
|
646
|
+
"menu-label": e.menuLabel,
|
|
639
647
|
"bg-color": e.bgColor,
|
|
640
648
|
"drawer-btn-color": e.drawerBtnColor,
|
|
641
649
|
"drawer-btn-border": e.showDrawerBorder,
|
|
@@ -653,7 +661,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
653
661
|
o("a", {
|
|
654
662
|
href: e.titleBlockLink,
|
|
655
663
|
target: e.titleBlockLinkTarget,
|
|
656
|
-
onClick:
|
|
664
|
+
onClick: i
|
|
657
665
|
}, [
|
|
658
666
|
o("img", {
|
|
659
667
|
src: e.logo,
|
|
@@ -666,7 +674,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
666
674
|
o("a", {
|
|
667
675
|
href: e.titleBlockLink,
|
|
668
676
|
target: e.titleBlockLinkTarget,
|
|
669
|
-
onClick:
|
|
677
|
+
onClick: i
|
|
670
678
|
}, [
|
|
671
679
|
o("h3", {
|
|
672
680
|
class: y([m.value, "mb-md text-center"]),
|
|
@@ -680,7 +688,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
680
688
|
(r(!0), d(N, null, j(e.menuItems, (h, B) => (r(), d("li", {
|
|
681
689
|
key: `menu-${B}`
|
|
682
690
|
}, [
|
|
683
|
-
|
|
691
|
+
a(h) ? (r(), V(q, {
|
|
684
692
|
key: 1,
|
|
685
693
|
ref_for: !0,
|
|
686
694
|
ref_key: "collapseRef",
|
|
@@ -726,7 +734,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
726
734
|
o("a", {
|
|
727
735
|
href: e.titleBlockLink,
|
|
728
736
|
target: e.titleBlockLinkTarget,
|
|
729
|
-
onClick:
|
|
737
|
+
onClick: i
|
|
730
738
|
}, [
|
|
731
739
|
o("img", {
|
|
732
740
|
src: e.logo,
|
|
@@ -739,7 +747,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
739
747
|
o("a", {
|
|
740
748
|
href: e.titleBlockLink,
|
|
741
749
|
target: e.titleBlockLinkTarget,
|
|
742
|
-
onClick:
|
|
750
|
+
onClick: i
|
|
743
751
|
}, [
|
|
744
752
|
o("h3", {
|
|
745
753
|
class: y([m.value, "mb-md text-center"]),
|
|
@@ -753,7 +761,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
753
761
|
(r(!0), d(N, null, j(e.menuItems, (B, z) => (r(), d("li", {
|
|
754
762
|
key: `menu-${z}`
|
|
755
763
|
}, [
|
|
756
|
-
|
|
764
|
+
a(B) ? (r(), V(q, {
|
|
757
765
|
key: 1,
|
|
758
766
|
"nav-id": B.title,
|
|
759
767
|
"nav-location": "mobile",
|
|
@@ -789,7 +797,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
789
797
|
])
|
|
790
798
|
]),
|
|
791
799
|
_: 3
|
|
792
|
-
}, 8, ["bg-color", "drawer-btn-color", "drawer-btn-border", "header-width"]));
|
|
800
|
+
}, 8, ["nav-label", "menu-label", "bg-color", "drawer-btn-color", "drawer-btn-border", "header-width"]));
|
|
793
801
|
}
|
|
794
802
|
});
|
|
795
803
|
export {
|
package/dist/mcl-header.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-1ce9ae01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1ce9ae01]:before,.nav__text:hover+.nav__decorator[data-v-1ce9ae01]:before{width:100%}.nav__decorator[data-v-a36072d4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-a36072d4]:before,.nav__text:hover+.nav__decorator[data-v-a36072d4]:before{width:100%}.nav__decorator[data-v-65d3897d]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-65d3897d]:before,.nav__text:hover+.nav__decorator[data-v-65d3897d]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
-
(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.MclHeader={},V.Vue,V.ManguitoTheme))})(this,(function(V,e,l){"use strict";const $={class:"flex w-full flex-col"},H={class:"self-center"},A={class:"relative pt-2xs"},M={class:"relative flex flex-col"},D=["href","target","onClick"],j=e.defineComponent({__name:"NavCollapse",props:{navId:{},navItem:{},bgColor:{default:"light-2"},hoverBgColor:{default:"dark-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["child-click","label-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(!1),g=e.computed(()=>{const{navId:r}=b;return`nav-${r.toLowerCase().replaceAll(" ","-")}`}),f=e.ref(),c=r=>{m.value=r},C=(r,i)=>{f.value?.toggle(),k("label-click",r,i,m.value)},x=(r,i)=>{const{asLink:n}=b;n||r.preventDefault(),k("child-click",r,i)},u=(r,i,n)=>{const h=[l.generateClass.bodyTextVariant({size:r}),l.generateClass.textColorVariant({color:i})];return n&&h.push("font-bold"),h.join(" ")};return(r,i)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",H,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",u(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:i[0]||(i[0]=n=>C(n,t.navItem.title))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...i[1]||(i[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],2),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:f,id:g.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("div",A,[t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 h-full w-md bg-opacity-25",e.unref(l.generateClass).bgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,class:e.normalizeClass(["w-full pb-2xs last:pb-0",[e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),key:h,onClick:a=>x(a,n)},e.toDisplayString(n.title),11,D))),128))])])]),_:1},8,["id"])]))}}),z=(t,y)=>{const b=t.__vccOpts||t;for(const[k,m]of y)b[k]=m;return b},R=z(j,[["__scopeId","data-v-1ce9ae01"]]),F=["onClick"],K=["href","target","onClick"],O=z(e.defineComponent({__name:"NavDropdown",props:{navItem:{},bgColor:{default:"light-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(-1),g=e.ref(),f=(u,r,i)=>{const n=[l.generateClass.bodyTextVariant({size:u}),l.generateClass.textColorVariant({color:r})];return i&&n.push("font-bold"),n.join(" ")},c=u=>{const r=b.navItem.children.length;g.value!==void 0&&(u==="down"&&m.value<r-1&&m.value++,u==="up"&&m.value>0&&m.value--,g.value[m.value].focus())},C=(u,r,i)=>{m.value=-1,k("label-click",u,r,i)},x=(u,r)=>{const{asLink:i}=b;i||u.preventDefault(),k("child-click",u,r)};return(u,r)=>(e.openBlock(),e.createElementBlock("div",{onKeyup:[r[0]||(r[0]=e.withKeys(i=>c("down"),["down"])),r[1]||(r[1]=e.withKeys(i=>c("up"),["up"]))]},[e.createVNode(e.unref(l.DropdownContainer),null,{toggler:e.withCtx(({toggle:i,dropdownState:n})=>[e.createElementVNode("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",f(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:h=>(i(h),C(h,t.navItem.title,n))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[n?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...r[2]||(r[2]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],10,F),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createVNode(e.unref(l.DropdownContent),{"custom-class":"border drop-shadow-sm"},{default:e.withCtx(({itemClick:i})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,key:h,ref_for:!0,ref_key:"navItemRef",ref:g,class:e.normalizeClass(["block w-full px-xs py-2xs transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50",[e.unref(l.generateClass).bgColorVariant({color:t.bgColor}),e.unref(l.generateClass).hoverBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).focusBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),onClick:a=>(i(),x(a,n))},e.toDisplayString(n.title),11,K))),128))]),_:1})]),_:1})],32))}}),[["__scopeId","data-v-a36072d4"]]),p=["href","target","innerHTML"],I=z(e.defineComponent({__name:"NavLink",props:{navItem:{},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["nav-link"],setup(t,{emit:y}){const b=t,k=y,m=(f,c,C)=>{const x=[l.generateClass.bodyTextVariant({size:f}),l.generateClass.textColorVariant({color:c})];return C&&x.push("font-bold"),x.join(" ")},g=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("nav-link",f,c)};return(f,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("a",{href:t.navItem.url,target:t.navItem.target,innerHTML:t.navItem.title,class:e.normalizeClass(["nav__text tracking-wider outline-none",m(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:c[0]||(c[0]=C=>g(C,t.navItem))},null,10,p),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-65d3897d"]]),G={class:"flex flex-shrink-0 items-center self-center"},q={class:"mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl"},W=["href","target"],P=["src","alt"],U=["src","alt"],J={class:"ml-2 flex flex-col justify-center"},Q=["href","target"],X=["innerHTML"],Y={class:"hidden flex-wrap lg:flex"},Z={key:0,class:"hidden lg:block"},v={class:"flex flex-col items-center justify-center p-xs"},_={key:0},ee=e.defineComponent({__name:"MclHeaderA",props:{logo:{},logoSmall:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},mobileMenuBgColor:{default:"light-2"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},fadeInOnScroll:{type:Boolean,default:!0},scrollDistance:{default:50}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(),g=e.useSlots(),f=b,c=()=>{m.value?.headerClose()},C=n=>{const{titleBlockAsLink:h,titleBlockLink:a,titleBlockLinkTarget:o}=k;h||n.preventDefault(),f("title-click",n,a,o),c()},x=(n,h)=>{const{menuItemAsLink:a}=k;a||n.preventDefault(),f("menu-click",n,h),c()},u=(n,h,a)=>{f("collapse-click",n,h,a)},r=(n,h)=>[l.generateClass.h2Variant({size:n}),l.generateClass.textColorVariant({color:h})].join(" "),i=n=>{const h=n;return typeof h.children>"u"?!1:h.children.length>0};return y({headerClose:c}),(n,h)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderHorizontal),{ref_key:"componentRef",ref:m,"bg-color":t.bgColor,"drawer-btn-border":t.showDrawerBorder,"drawer-btn-color":t.drawerBtnColor,"fade-in-on-scroll":t.fadeInOnScroll,"mobile-menu-bg-color":t.mobileMenuBgColor},{content:e.withCtx(()=>[e.createElementVNode("div",G,[e.createElementVNode("div",q,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:e.normalizeClass(["h-full",[t.logoSmall?"hidden lg:inline-block":"inline-block"]])},null,10,P),t.logoSmall?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSmall,alt:t.logoAlt,class:"inline-block h-full lg:hidden"},null,8,U)):e.createCommentVNode("",!0)],8,W)]),e.createElementVNode("div",J,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",r(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,X)],8,Q),e.createElementVNode("ul",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mr-xs last:mr-0",key:`menu-${o}`},[i(a)?(e.openBlock(),e.createBlock(O,{key:1,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"bg-color":t.bgColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","bg-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])])])]),"content-right":e.withCtx(()=>[g["content-right"]?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(n.$slots,"content-right")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mb-2xs last:mb-0",key:`mobile-${o}`},[i(a)?(e.openBlock(),e.createBlock(R,{key:1,"nav-id":a.title,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-id","nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])]),_:1}),g["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(n.$slots,"mobile-bottom",{headerClose:c})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-border","drawer-btn-color","fade-in-on-scroll","mobile-menu-bg-color"]))}}),te={class:"relative flex items-center justify-center gap-2"},le=["href","target","onClick"],oe={class:"relative"},T=e.defineComponent({__name:"NavCollapseVertical",props:{navId:{},navLocation:{},menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(!1),g=e.ref(),f=b,c=a=>{m.value=a},C=()=>{g.value?.close()},x=(a,o)=>{g.value?.toggle(),f("label-click",a,o,m.value)},u=(a,o)=>{const{asLink:s}=k;s||a.preventDefault(),f("child-click",a,o),g.value?.close(),C()},r=e.computed(()=>{const{navId:a,navLocation:o}=k,d=a.toLowerCase().replaceAll(" ","-");return`nav-${o}-${d}`}),i=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B}=k,w=[l.generateClass.bodyTextVariant({size:o})];if(!s){const N=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];w.push(N.join(" "))}if(s){const N=l.generateClass.beforeBgColorVariant({color:d});w.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+N);const E=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];w.push(E.join(" "))}return B&&w.push("font-bold"),w.join(" ")}),n=e.computed(()=>{const{dHl:a,hlColor:o,navLocation:s}=k,d=[];if(!a)return"";const B="before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ",w=s==="desktop"?"before:left-0 ":"before:right-0 ";return d.push(B+w+l.generateClass.beforeBgColorVariant({color:o})),d.join(" ")}),h=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B,navLocation:w}=k,N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs",L=[l.generateClass.textColorVariant({color:a}),l.generateClass.bodyTextVariant({size:N})];if(w==="mobile"&&L.push("text-end"),!s){const E=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];L.push(E.join(" "))}if(s){const E=l.generateClass.beforeBgColorVariant({color:d}),we="before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ",Ve=w==="desktop"?"before:left-0 before:transition-[width] ":"before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";L.push(we+Ve+E);const Le=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];L.push(Le.join(" "))}return B&&L.push("font-bold"),L.join(" ")});return y({closeCollapse:C}),(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute",[i.value]]),onClick:o[0]||(o[0]=s=>x(s,t.menuItem.title))},[e.createElementVNode("div",te,[e.createElementVNode("span",null,e.toDisplayString(t.menuItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...o[1]||(o[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))])],2),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:g,id:r.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("ul",{class:e.normalizeClass(["relative",[n.value]])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItem.children,(s,d)=>(e.openBlock(),e.createElementBlock("li",{key:d,class:e.normalizeClass([t.navLocation==="desktop"?"ml-xs":"mr-xs"])},[e.createElementVNode("a",{href:s.url,target:s.target,onClick:B=>u(B,s),class:e.normalizeClass(["relative block w-full overflow-x-hidden px-2xs py-3xs transition-colors duration-300 ease-linear before:absolute",[h.value]])},[e.createElementVNode("span",oe,e.toDisplayString(s.title),1)],10,le)],2))),128))],2)]),_:1},8,["id"])]))}}),ne=["href","target"],ae={class:"relative"},S=e.defineComponent({__name:"NavLinkVertical",props:{menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["menu-click"],setup(t,{emit:y}){const b=t,k=y,m=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("menu-click",f,c)},g=e.computed(()=>{const{textColor:f,textSize:c,dHl:C,hlColor:x,fontBold:u}=b,r=[l.generateClass.bodyTextVariant({size:c})];if(!C){const i=[l.generateClass.textColorVariant({color:f}),l.generateClass.hoverTextColorVariant({color:x}),l.generateClass.focusTextColorVariant({color:x})];r.push(i.join(" "))}if(C){const i=l.generateClass.beforeBgColorVariant({color:x});r.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+i);const h=[l.generateClass.textColorVariant({color:x}),l.generateClass.hoverTextColorVariant({color:f}),l.generateClass.focusTextColorVariant({color:f})];r.push(h.join(" "))}return u&&r.push("font-bold"),r.join(" ")});return(f,c)=>(e.openBlock(),e.createElementBlock("a",{class:e.normalizeClass([[g.value],"relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),href:t.menuItem.url,target:t.menuItem.target?t.menuItem.target:"_self",onClick:c[0]||(c[0]=C=>m(C,t.menuItem))},[e.createElementVNode("span",ae,e.toDisplayString(t.menuItem.title),1)],10,ne))}}),re={class:"p-md text-center"},ie=["href","target"],ce=["src","alt"],se=["href","target"],de=["innerHTML"],fe={class:"flex flex-col"},he={key:0},me={class:"flex h-full flex-col justify-between"},ke={class:"p-md text-center"},Ce=["href","target"],ge=["src","alt"],xe=["href","target"],ue=["innerHTML"],be={class:"flex flex-col"},Be={key:0},ye=e.defineComponent({__name:"MclHeaderB",props:{logo:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},headerWidth:{default:160}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.useSlots(),g=b,f=e.ref(),c=e.ref(),C=(o,s)=>{g("toggle-drawer",o,s)},x=()=>{f.value?.headerClose()},u=()=>{for(let o=0;o<c.value.length;o++)c.value[o].closeCollapse()},r=o=>{const{titleBlockAsLink:s,titleBlockLink:d,titleBlockLinkTarget:B}=k;s||o.preventDefault(),g("title-click",o,d,B),x(),u()},i=(o,s)=>{const{menuItemAsLink:d}=k;d||o.preventDefault(),g("menu-click",o,s),x(),u()},n=(o,s,d)=>{g("collapse-click",o,s,d)},h=e.computed(()=>{const{titleSize:o,titleColor:s}=k;return[l.generateClass.h3Variant({size:o}),l.generateClass.textColorVariant({color:s})].join(" ")}),a=o=>{const s=o;return typeof s.children>"u"?!1:s.children.length>0};return y({headerClose:x}),(o,s)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderVertical),{"bg-color":t.bgColor,"drawer-btn-color":t.drawerBtnColor,"drawer-btn-border":t.showDrawerBorder,"header-width":t.headerWidth,onToggleDrawer:C,ref_key:"componentRef",ref:f},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",re,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ce)],8,ie)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,de)],8,se)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(d,B)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${B}`},[a(d)?(e.openBlock(),e.createBlock(T,{key:1,ref_for:!0,ref_key:"collapseRef",ref:c,"nav-id":d.title,"nav-location":"desktop","menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})])]),"content-bottom":e.withCtx(()=>[m["content-bottom"]?(e.openBlock(),e.createElementBlock("div",he,[e.renderSlot(o.$slots,"content-bottom")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(({headerClose:d})=>[e.createElementVNode("div",me,[e.createElementVNode("div",null,[e.createElementVNode("div",ke,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ge)],8,Ce)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,ue)],8,xe)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(B,w)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${w}`},[a(B)?(e.openBlock(),e.createBlock(T,{key:1,"nav-id":B.title,"nav-location":"mobile","menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})]),m["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(o.$slots,"mobile-bottom",{headerClose:d})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-color","drawer-btn-border","header-width"]))}});V.MclHeaderA=ee,V.MclHeaderB=ye,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})}));
|
|
2
|
+
(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.MclHeader={},V.Vue,V.ManguitoTheme))})(this,(function(V,e,l){"use strict";const $={class:"flex w-full flex-col"},H={class:"self-center"},A={class:"relative pt-2xs"},M={class:"relative flex flex-col"},D=["href","target","onClick"],j=e.defineComponent({__name:"NavCollapse",props:{navId:{},navItem:{},bgColor:{default:"light-2"},hoverBgColor:{default:"dark-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["child-click","label-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(!1),g=e.computed(()=>{const{navId:r}=b;return`nav-${r.toLowerCase().replaceAll(" ","-")}`}),f=e.ref(),c=r=>{m.value=r},C=(r,i)=>{f.value?.toggle(),k("label-click",r,i,m.value)},x=(r,i)=>{const{asLink:n}=b;n||r.preventDefault(),k("child-click",r,i)},u=(r,i,n)=>{const h=[l.generateClass.bodyTextVariant({size:r}),l.generateClass.textColorVariant({color:i})];return n&&h.push("font-bold"),h.join(" ")};return(r,i)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",H,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",u(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:i[0]||(i[0]=n=>C(n,t.navItem.title))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...i[1]||(i[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],2),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:f,id:g.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("div",A,[t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute -left-4 h-full w-md bg-opacity-25",e.unref(l.generateClass).bgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,class:e.normalizeClass(["w-full pb-2xs last:pb-0",[e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),key:h,onClick:a=>x(a,n)},e.toDisplayString(n.title),11,D))),128))])])]),_:1},8,["id"])]))}}),z=(t,y)=>{const b=t.__vccOpts||t;for(const[k,m]of y)b[k]=m;return b},R=z(j,[["__scopeId","data-v-1ce9ae01"]]),F=["onClick"],K=["href","target","onClick"],O=z(e.defineComponent({__name:"NavDropdown",props:{navItem:{},bgColor:{default:"light-1"},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{emit:y}){const b=t,k=y,m=e.ref(-1),g=e.ref(),f=(u,r,i)=>{const n=[l.generateClass.bodyTextVariant({size:u}),l.generateClass.textColorVariant({color:r})];return i&&n.push("font-bold"),n.join(" ")},c=u=>{const r=b.navItem.children.length;g.value!==void 0&&(u==="down"&&m.value<r-1&&m.value++,u==="up"&&m.value>0&&m.value--,g.value[m.value].focus())},C=(u,r,i)=>{m.value=-1,k("label-click",u,r,i)},x=(u,r)=>{const{asLink:i}=b;i||u.preventDefault(),k("child-click",u,r)};return(u,r)=>(e.openBlock(),e.createElementBlock("div",{onKeyup:[r[0]||(r[0]=e.withKeys(i=>c("down"),["down"])),r[1]||(r[1]=e.withKeys(i=>c("up"),["up"]))]},[e.createVNode(e.unref(l.DropdownContainer),null,{toggler:e.withCtx(({toggle:i,dropdownState:n})=>[e.createElementVNode("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none",f(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:h=>(i(h),C(h,t.navItem.title,n))},[e.createElementVNode("span",null,e.toDisplayString(t.navItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[n?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...r[2]||(r[2]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))],10,F),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createVNode(e.unref(l.DropdownContent),{"custom-class":"border drop-shadow-sm"},{default:e.withCtx(({itemClick:i})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.navItem.children,(n,h)=>(e.openBlock(),e.createElementBlock("a",{href:n.url,target:n.target,key:h,ref_for:!0,ref_key:"navItemRef",ref:g,class:e.normalizeClass(["block w-full px-xs py-2xs transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50",[e.unref(l.generateClass).bgColorVariant({color:t.bgColor}),e.unref(l.generateClass).hoverBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).focusBgColorVariant({color:t.highlightColor}),e.unref(l.generateClass).textColorVariant({color:t.menuTextColor}),e.unref(l.generateClass).bodyTextVariant({size:t.menuTextSize})]]),onClick:a=>(i(),x(a,n))},e.toDisplayString(n.title),11,K))),128))]),_:1})]),_:1})],32))}}),[["__scopeId","data-v-a36072d4"]]),G=["href","target","innerHTML"],I=z(e.defineComponent({__name:"NavLink",props:{navItem:{},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["nav-link"],setup(t,{emit:y}){const b=t,k=y,m=(f,c,C)=>{const x=[l.generateClass.bodyTextVariant({size:f}),l.generateClass.textColorVariant({color:c})];return C&&x.push("font-bold"),x.join(" ")},g=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("nav-link",f,c)};return(f,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("a",{href:t.navItem.url,target:t.navItem.target,innerHTML:t.navItem.title,class:e.normalizeClass(["nav__text tracking-wider outline-none",m(t.menuTextSize,t.menuTextColor,t.menuTextBold)]),onClick:c[0]||(c[0]=C=>g(C,t.navItem))},null,10,G),t.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative -top-0.5 h-1.5",e.unref(l.generateClass).beforeBgColorVariant({color:t.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-65d3897d"]]),q={class:"flex flex-shrink-0 items-center self-center"},W={class:"mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl"},P=["href","target"],U=["src","alt"],J=["src","alt"],Q={class:"ml-2 flex flex-col justify-center"},X=["href","target"],Y=["innerHTML"],Z={class:"hidden flex-wrap lg:flex"},p={key:0,class:"hidden lg:block"},v={class:"flex flex-col items-center justify-center p-xs"},_={key:0},ee=e.defineComponent({__name:"MclHeaderA",props:{logo:{},logoSmall:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},navLabel:{},menuLabel:{},mobileMenuBgColor:{default:"light-2"},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},fadeInOnScroll:{type:Boolean,default:!0},scrollDistance:{default:50}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(),g=e.useSlots(),f=b,c=()=>{m.value?.headerClose()},C=n=>{const{titleBlockAsLink:h,titleBlockLink:a,titleBlockLinkTarget:o}=k;h||n.preventDefault(),f("title-click",n,a,o),c()},x=(n,h)=>{const{menuItemAsLink:a}=k;a||n.preventDefault(),f("menu-click",n,h),c()},u=(n,h,a)=>{f("collapse-click",n,h,a)},r=(n,h)=>[l.generateClass.h2Variant({size:n}),l.generateClass.textColorVariant({color:h})].join(" "),i=n=>{const h=n;return typeof h.children>"u"?!1:h.children.length>0};return y({headerClose:c}),(n,h)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderHorizontal),{"nav-label":t.navLabel,"menu-label":t.menuLabel,ref_key:"componentRef",ref:m,"bg-color":t.bgColor,"drawer-btn-border":t.showDrawerBorder,"drawer-btn-color":t.drawerBtnColor,"fade-in-on-scroll":t.fadeInOnScroll,"mobile-menu-bg-color":t.mobileMenuBgColor},{content:e.withCtx(()=>[e.createElementVNode("div",q,[e.createElementVNode("div",W,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:e.normalizeClass(["h-full",[t.logoSmall?"hidden lg:inline-block":"inline-block"]])},null,10,U),t.logoSmall?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSmall,alt:t.logoAlt,class:"inline-block h-full lg:hidden"},null,8,J)):e.createCommentVNode("",!0)],8,P)]),e.createElementVNode("div",Q,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:C},[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",r(t.titleSize,t.titleColor)]),innerHTML:t.title},null,10,Y)],8,X),e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mr-xs last:mr-0",key:`menu-${o}`},[i(a)?(e.openBlock(),e.createBlock(O,{key:1,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"bg-color":t.bgColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","bg-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])])])]),"content-right":e.withCtx(()=>[g["content-right"]?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(n.$slots,"content-right")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(a,o)=>(e.openBlock(),e.createElementBlock("li",{class:"mb-2xs last:mb-0",key:`mobile-${o}`},[i(a)?(e.openBlock(),e.createBlock(R,{key:1,"nav-id":a.title,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onChildClick:x,onLabelClick:u},null,8,["nav-id","nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":a,"menu-text-color":t.menuTextColor,"menu-text-size":t.menuTextSize,"menu-text-bold":t.menuTextBold,"display-highlight":t.showHighlight,"highlight-color":t.highlightColor,"as-link":t.menuItemAsLink,onNavLink:x},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])]),_:1}),g["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(n.$slots,"mobile-bottom",{headerClose:c})])):e.createCommentVNode("",!0)])]),_:3},8,["nav-label","menu-label","bg-color","drawer-btn-border","drawer-btn-color","fade-in-on-scroll","mobile-menu-bg-color"]))}}),te={class:"relative flex items-center justify-center gap-2"},le=["href","target","onClick"],oe={class:"relative"},T=e.defineComponent({__name:"NavCollapseVertical",props:{navId:{},navLocation:{},menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["label-click","child-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.ref(!1),g=e.ref(),f=b,c=a=>{m.value=a},C=()=>{g.value?.close()},x=(a,o)=>{g.value?.toggle(),f("label-click",a,o,m.value)},u=(a,o)=>{const{asLink:s}=k;s||a.preventDefault(),f("child-click",a,o),g.value?.close(),C()},r=e.computed(()=>{const{navId:a,navLocation:o}=k,d=a.toLowerCase().replaceAll(" ","-");return`nav-${o}-${d}`}),i=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B}=k,w=[l.generateClass.bodyTextVariant({size:o})];if(!s){const N=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];w.push(N.join(" "))}if(s){const N=l.generateClass.beforeBgColorVariant({color:d});w.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+N);const E=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];w.push(E.join(" "))}return B&&w.push("font-bold"),w.join(" ")}),n=e.computed(()=>{const{dHl:a,hlColor:o,navLocation:s}=k,d=[];if(!a)return"";const B="before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ",w=s==="desktop"?"before:left-0 ":"before:right-0 ";return d.push(B+w+l.generateClass.beforeBgColorVariant({color:o})),d.join(" ")}),h=e.computed(()=>{const{textColor:a,textSize:o,dHl:s,hlColor:d,fontBold:B,navLocation:w}=k,N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs",L=[l.generateClass.textColorVariant({color:a}),l.generateClass.bodyTextVariant({size:N})];if(w==="mobile"&&L.push("text-end"),!s){const E=[l.generateClass.textColorVariant({color:a}),l.generateClass.hoverTextColorVariant({color:d}),l.generateClass.focusTextColorVariant({color:d})];L.push(E.join(" "))}if(s){const E=l.generateClass.beforeBgColorVariant({color:d}),we="before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ",Ve=w==="desktop"?"before:left-0 before:transition-[width] ":"before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";L.push(we+Ve+E);const Le=[l.generateClass.textColorVariant({color:d}),l.generateClass.hoverTextColorVariant({color:a}),l.generateClass.focusTextColorVariant({color:a})];L.push(Le.join(" "))}return B&&L.push("font-bold"),L.join(" ")});return y({closeCollapse:C}),(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute",[i.value]]),onClick:o[0]||(o[0]=s=>x(s,t.menuItem.title))},[e.createElementVNode("div",te,[e.createElementVNode("span",null,e.toDisplayString(t.menuItem.title),1),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:e.normalizeClass(["h-[0.8rem] fill-current",[m.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},[...o[1]||(o[1]=[e.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)])],2))])],2),e.createVNode(e.unref(l.Collapse),{ref_key:"collapseRef",ref:g,id:r.value,onOpen:c,onClose:c},{default:e.withCtx(()=>[e.createElementVNode("ul",{class:e.normalizeClass(["relative",[n.value]])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItem.children,(s,d)=>(e.openBlock(),e.createElementBlock("li",{key:d,class:e.normalizeClass([t.navLocation==="desktop"?"ml-xs":"mr-xs"])},[e.createElementVNode("a",{href:s.url,target:s.target,onClick:B=>u(B,s),class:e.normalizeClass(["relative block w-full overflow-x-hidden px-2xs py-3xs transition-colors duration-300 ease-linear before:absolute",[h.value]])},[e.createElementVNode("span",oe,e.toDisplayString(s.title),1)],10,le)],2))),128))],2)]),_:1},8,["id"])]))}}),ne=["href","target"],ae={class:"relative"},S=e.defineComponent({__name:"NavLinkVertical",props:{menuItem:{},textColor:{default:"dark-3"},textSize:{default:"md"},fontBold:{type:Boolean,default:!1},dHl:{type:Boolean,default:!0},hlColor:{default:"primary"},asLink:{type:Boolean,default:!0}},emits:["menu-click"],setup(t,{emit:y}){const b=t,k=y,m=(f,c)=>{const{asLink:C}=b;C||f.preventDefault(),k("menu-click",f,c)},g=e.computed(()=>{const{textColor:f,textSize:c,dHl:C,hlColor:x,fontBold:u}=b,r=[l.generateClass.bodyTextVariant({size:c})];if(!C){const i=[l.generateClass.textColorVariant({color:f}),l.generateClass.hoverTextColorVariant({color:x}),l.generateClass.focusTextColorVariant({color:x})];r.push(i.join(" "))}if(C){const i=l.generateClass.beforeBgColorVariant({color:x});r.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full "+i);const h=[l.generateClass.textColorVariant({color:x}),l.generateClass.hoverTextColorVariant({color:f}),l.generateClass.focusTextColorVariant({color:f})];r.push(h.join(" "))}return u&&r.push("font-bold"),r.join(" ")});return(f,c)=>(e.openBlock(),e.createElementBlock("a",{class:e.normalizeClass([[g.value],"relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),href:t.menuItem.url,target:t.menuItem.target?t.menuItem.target:"_self",onClick:c[0]||(c[0]=C=>m(C,t.menuItem))},[e.createElementVNode("span",ae,e.toDisplayString(t.menuItem.title),1)],10,ne))}}),re={class:"p-md text-center"},ie=["href","target"],ce=["src","alt"],se=["href","target"],de=["innerHTML"],fe={class:"flex flex-col"},he={key:0},me={class:"flex h-full flex-col justify-between"},ke={class:"p-md text-center"},Ce=["href","target"],ge=["src","alt"],xe=["href","target"],ue=["innerHTML"],be={class:"flex flex-col"},Be={key:0},ye=e.defineComponent({__name:"MclHeaderB",props:{logo:{},logoAlt:{default:""},title:{},titleSize:{default:"md"},titleColor:{default:"dark-3"},titleBlockAsLink:{type:Boolean,default:!1},titleBlockLinkTarget:{default:"_self"},titleBlockLink:{},menuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"dark-3"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"light-1"},navLabel:{},menuLabel:{},drawerBtnColor:{default:"dark-1"},showDrawerBorder:{type:Boolean,default:!0},headerWidth:{default:160}},emits:["toggle-drawer","title-click","menu-click","collapse-click"],setup(t,{expose:y,emit:b}){const k=t,m=e.useSlots(),g=b,f=e.ref(),c=e.ref(),C=(o,s)=>{g("toggle-drawer",o,s)},x=()=>{f.value?.headerClose()},u=()=>{for(let o=0;o<c.value.length;o++)c.value[o].closeCollapse()},r=o=>{const{titleBlockAsLink:s,titleBlockLink:d,titleBlockLinkTarget:B}=k;s||o.preventDefault(),g("title-click",o,d,B),x(),u()},i=(o,s)=>{const{menuItemAsLink:d}=k;d||o.preventDefault(),g("menu-click",o,s),x(),u()},n=(o,s,d)=>{g("collapse-click",o,s,d)},h=e.computed(()=>{const{titleSize:o,titleColor:s}=k;return[l.generateClass.h3Variant({size:o}),l.generateClass.textColorVariant({color:s})].join(" ")}),a=o=>{const s=o;return typeof s.children>"u"?!1:s.children.length>0};return y({headerClose:x}),(o,s)=>(e.openBlock(),e.createBlock(e.unref(l.HeaderVertical),{"nav-label":t.navLabel,"menu-label":t.menuLabel,"bg-color":t.bgColor,"drawer-btn-color":t.drawerBtnColor,"drawer-btn-border":t.showDrawerBorder,"header-width":t.headerWidth,onToggleDrawer:C,ref_key:"componentRef",ref:f},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",re,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ce)],8,ie)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,de)],8,se)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(d,B)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${B}`},[a(d)?(e.openBlock(),e.createBlock(T,{key:1,ref_for:!0,ref_key:"collapseRef",ref:c,"nav-id":d.title,"nav-location":"desktop","menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":d,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})])]),"content-bottom":e.withCtx(()=>[m["content-bottom"]?(e.openBlock(),e.createElementBlock("div",he,[e.renderSlot(o.$slots,"content-bottom")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(({headerClose:d})=>[e.createElementVNode("div",me,[e.createElementVNode("div",null,[e.createElementVNode("div",ke,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("img",{src:t.logo,alt:t.logoAlt,class:"inline-block h-full max-h-xl"},null,8,ge)],8,Ce)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:t.titleBlockLink,target:t.titleBlockLinkTarget,onClick:r},[e.createElementVNode("h3",{class:e.normalizeClass([h.value,"mb-md text-center"]),innerHTML:t.title},null,10,ue)],8,xe)]),e.createVNode(e.unref(l.AccordionGroup),null,{default:e.withCtx(()=>[e.createElementVNode("ul",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.menuItems,(B,w)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${w}`},[a(B)?(e.openBlock(),e.createBlock(T,{key:1,"nav-id":B.title,"nav-location":"mobile","menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onChildClick:i,onLabelClick:n},null,8,["nav-id","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(S,{key:0,"menu-item":B,"as-link":t.menuItemAsLink,"text-color":t.menuTextColor,"text-size":t.menuTextSize,"font-bold":t.menuTextBold,"d-hl":t.showHighlight,"hl-color":t.highlightColor,onMenuClick:i},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),_:1})]),m["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(o.$slots,"mobile-bottom",{headerClose:d})])):e.createCommentVNode("",!0)])]),_:3},8,["nav-label","menu-label","bg-color","drawer-btn-color","drawer-btn-border","header-width"]))}});V.MclHeaderA=ee,V.MclHeaderB=ye,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-header",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.6",
|
|
4
4
|
"description": "header components based on manguito theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.4.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|