@bobbykim/mcl-header 0.8.5 → 0.8.7
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 +92 -83
- 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,12 +273,15 @@ 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,
|
|
277
|
-
"drawer-
|
|
281
|
+
"show-drawer-border": e.showDrawerBorder,
|
|
278
282
|
"drawer-btn-color": e.drawerBtnColor,
|
|
279
283
|
"fade-in-on-scroll": e.fadeInOnScroll,
|
|
284
|
+
"scroll-distance": e.scrollDistance,
|
|
280
285
|
"mobile-menu-bg-color": e.mobileMenuBgColor
|
|
281
286
|
}, {
|
|
282
287
|
content: I(() => [
|
|
@@ -307,18 +312,18 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
307
312
|
onClick: x
|
|
308
313
|
}, [
|
|
309
314
|
o("h2", {
|
|
310
|
-
class: y(["inline-block align-middle tracking-wider",
|
|
315
|
+
class: y(["inline-block align-middle tracking-wider", i(e.titleSize, e.titleColor)]),
|
|
311
316
|
innerHTML: e.title
|
|
312
317
|
}, null, 10, we)
|
|
313
318
|
], 8, ye),
|
|
314
319
|
o("ul", Te, [
|
|
315
|
-
(r(!0), d(N, null, j(e.menuItems, (
|
|
320
|
+
(r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
|
|
316
321
|
class: "mr-xs last:mr-0",
|
|
317
322
|
key: `menu-${l}`
|
|
318
323
|
}, [
|
|
319
|
-
s(
|
|
324
|
+
s(a) ? (r(), V(he, {
|
|
320
325
|
key: 1,
|
|
321
|
-
"nav-item":
|
|
326
|
+
"nav-item": a,
|
|
322
327
|
"menu-text-color": e.menuTextColor,
|
|
323
328
|
"menu-text-size": e.menuTextSize,
|
|
324
329
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -330,7 +335,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
330
335
|
onLabelClick: b
|
|
331
336
|
}, 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
337
|
key: 0,
|
|
333
|
-
"nav-item":
|
|
338
|
+
"nav-item": a,
|
|
334
339
|
"menu-text-color": e.menuTextColor,
|
|
335
340
|
"menu-text-size": e.menuTextSize,
|
|
336
341
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -354,14 +359,14 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
354
359
|
D(w(W), null, {
|
|
355
360
|
default: I(() => [
|
|
356
361
|
o("ul", Le, [
|
|
357
|
-
(r(!0), d(N, null, j(e.menuItems, (
|
|
362
|
+
(r(!0), d(N, null, j(e.menuItems, (a, l) => (r(), d("li", {
|
|
358
363
|
class: "mb-2xs last:mb-0",
|
|
359
364
|
key: `mobile-${l}`
|
|
360
365
|
}, [
|
|
361
|
-
s(
|
|
366
|
+
s(a) ? (r(), V(se, {
|
|
362
367
|
key: 1,
|
|
363
|
-
"nav-id":
|
|
364
|
-
"nav-item":
|
|
368
|
+
"nav-id": a.title,
|
|
369
|
+
"nav-item": a,
|
|
365
370
|
"menu-text-color": e.menuTextColor,
|
|
366
371
|
"menu-text-size": e.menuTextSize,
|
|
367
372
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -372,7 +377,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
372
377
|
onLabelClick: b
|
|
373
378
|
}, 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
379
|
key: 0,
|
|
375
|
-
"nav-item":
|
|
380
|
+
"nav-item": a,
|
|
376
381
|
"menu-text-color": e.menuTextColor,
|
|
377
382
|
"menu-text-size": e.menuTextSize,
|
|
378
383
|
"menu-text-bold": e.menuTextBold,
|
|
@@ -392,7 +397,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
392
397
|
])
|
|
393
398
|
]),
|
|
394
399
|
_: 3
|
|
395
|
-
}, 8, ["bg-color", "drawer-
|
|
400
|
+
}, 8, ["nav-label", "menu-label", "bg-color", "show-drawer-border", "drawer-btn-color", "fade-in-on-scroll", "scroll-distance", "mobile-menu-bg-color"]));
|
|
396
401
|
}
|
|
397
402
|
}), ze = { class: "relative flex items-center justify-center gap-2" }, Ve = ["href", "target", "onClick"], $e = { class: "relative" }, q = /* @__PURE__ */ R({
|
|
398
403
|
__name: "NavCollapseVertical",
|
|
@@ -409,25 +414,25 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
409
414
|
},
|
|
410
415
|
emits: ["label-click", "child-click"],
|
|
411
416
|
setup(e, { expose: L, emit: T }) {
|
|
412
|
-
const k = e, g = H(!1), C = H(), f = T, c = (
|
|
413
|
-
g.value =
|
|
417
|
+
const k = e, g = H(!1), C = H(), f = T, c = (a) => {
|
|
418
|
+
g.value = a;
|
|
414
419
|
}, x = () => {
|
|
415
420
|
C.value?.close();
|
|
416
|
-
}, v = (
|
|
417
|
-
C.value?.toggle(), f("label-click",
|
|
418
|
-
}, b = (
|
|
421
|
+
}, v = (a, l) => {
|
|
422
|
+
C.value?.toggle(), f("label-click", a, l, g.value);
|
|
423
|
+
}, b = (a, l) => {
|
|
419
424
|
const { asLink: u } = k;
|
|
420
|
-
u ||
|
|
421
|
-
},
|
|
422
|
-
const { navId:
|
|
425
|
+
u || a.preventDefault(), f("child-click", a, l), C.value?.close(), x();
|
|
426
|
+
}, i = S(() => {
|
|
427
|
+
const { navId: a, navLocation: l } = k, h = a.toLowerCase().replaceAll(" ", "-");
|
|
423
428
|
return `nav-${l}-${h}`;
|
|
424
429
|
}), s = S(() => {
|
|
425
|
-
const { textColor:
|
|
430
|
+
const { textColor: a, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
|
|
426
431
|
t.bodyTextVariant({ size: l })
|
|
427
432
|
];
|
|
428
433
|
if (!u) {
|
|
429
434
|
const K = [
|
|
430
|
-
t.textColorVariant({ color:
|
|
435
|
+
t.textColorVariant({ color: a }),
|
|
431
436
|
t.hoverTextColorVariant({ color: h }),
|
|
432
437
|
t.focusTextColorVariant({ color: h })
|
|
433
438
|
];
|
|
@@ -440,28 +445,28 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
440
445
|
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
446
|
const O = [
|
|
442
447
|
t.textColorVariant({ color: h }),
|
|
443
|
-
t.hoverTextColorVariant({ color:
|
|
444
|
-
t.focusTextColorVariant({ color:
|
|
448
|
+
t.hoverTextColorVariant({ color: a }),
|
|
449
|
+
t.focusTextColorVariant({ color: a })
|
|
445
450
|
];
|
|
446
451
|
z.push(O.join(" "));
|
|
447
452
|
}
|
|
448
453
|
return B && z.push("font-bold"), z.join(" ");
|
|
449
454
|
}), n = S(() => {
|
|
450
|
-
const { dHl:
|
|
451
|
-
if (!
|
|
455
|
+
const { dHl: a, hlColor: l, navLocation: u } = k, h = [];
|
|
456
|
+
if (!a)
|
|
452
457
|
return "";
|
|
453
458
|
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
459
|
return h.push(
|
|
455
460
|
B + z + t.beforeBgColorVariant({ color: l })
|
|
456
461
|
), h.join(" ");
|
|
457
462
|
}), m = S(() => {
|
|
458
|
-
const { textColor:
|
|
459
|
-
t.textColorVariant({ color:
|
|
463
|
+
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 = [
|
|
464
|
+
t.textColorVariant({ color: a }),
|
|
460
465
|
t.bodyTextVariant({ size: K })
|
|
461
466
|
];
|
|
462
467
|
if (z === "mobile" && A.push("text-end"), !u) {
|
|
463
468
|
const O = [
|
|
464
|
-
t.textColorVariant({ color:
|
|
469
|
+
t.textColorVariant({ color: a }),
|
|
465
470
|
t.hoverTextColorVariant({ color: h }),
|
|
466
471
|
t.focusTextColorVariant({ color: h })
|
|
467
472
|
];
|
|
@@ -474,8 +479,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
474
479
|
A.push(X + Y + O);
|
|
475
480
|
const Z = [
|
|
476
481
|
t.textColorVariant({ color: h }),
|
|
477
|
-
t.hoverTextColorVariant({ color:
|
|
478
|
-
t.focusTextColorVariant({ color:
|
|
482
|
+
t.hoverTextColorVariant({ color: a }),
|
|
483
|
+
t.focusTextColorVariant({ color: a })
|
|
479
484
|
];
|
|
480
485
|
A.push(Z.join(" "));
|
|
481
486
|
}
|
|
@@ -483,7 +488,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
483
488
|
});
|
|
484
489
|
return L({
|
|
485
490
|
closeCollapse: x
|
|
486
|
-
}), (
|
|
491
|
+
}), (a, l) => (r(), d("div", null, [
|
|
487
492
|
o("button", {
|
|
488
493
|
class: y(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute", [s.value]]),
|
|
489
494
|
onClick: l[0] || (l[0] = (u) => v(u, e.menuItem.title))
|
|
@@ -505,7 +510,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
505
510
|
D(w(Q), {
|
|
506
511
|
ref_key: "collapseRef",
|
|
507
512
|
ref: C,
|
|
508
|
-
id:
|
|
513
|
+
id: i.value,
|
|
509
514
|
onOpen: c,
|
|
510
515
|
onClose: c
|
|
511
516
|
}, {
|
|
@@ -549,7 +554,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
549
554
|
const { asLink: x } = T;
|
|
550
555
|
x || f.preventDefault(), k("menu-click", f, c);
|
|
551
556
|
}, C = S(() => {
|
|
552
|
-
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T,
|
|
557
|
+
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, i = [
|
|
553
558
|
t.bodyTextVariant({ size: c })
|
|
554
559
|
];
|
|
555
560
|
if (!x) {
|
|
@@ -558,21 +563,21 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
558
563
|
t.hoverTextColorVariant({ color: v }),
|
|
559
564
|
t.focusTextColorVariant({ color: v })
|
|
560
565
|
];
|
|
561
|
-
|
|
566
|
+
i.push(s.join(" "));
|
|
562
567
|
}
|
|
563
568
|
if (x) {
|
|
564
569
|
const s = t.beforeBgColorVariant({
|
|
565
570
|
color: v
|
|
566
571
|
});
|
|
567
|
-
|
|
572
|
+
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
573
|
const m = [
|
|
569
574
|
t.textColorVariant({ color: v }),
|
|
570
575
|
t.hoverTextColorVariant({ color: f }),
|
|
571
576
|
t.focusTextColorVariant({ color: f })
|
|
572
577
|
];
|
|
573
|
-
|
|
578
|
+
i.push(m.join(" "));
|
|
574
579
|
}
|
|
575
|
-
return b &&
|
|
580
|
+
return b && i.push("font-bold"), i.join(" ");
|
|
576
581
|
});
|
|
577
582
|
return (f, c) => (r(), d("a", {
|
|
578
583
|
class: y([[C.value], "relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),
|
|
@@ -602,6 +607,8 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
602
607
|
showHighlight: { type: Boolean, default: !0 },
|
|
603
608
|
highlightColor: { default: "primary" },
|
|
604
609
|
bgColor: { default: "light-1" },
|
|
610
|
+
navLabel: {},
|
|
611
|
+
menuLabel: {},
|
|
605
612
|
drawerBtnColor: { default: "dark-1" },
|
|
606
613
|
showDrawerBorder: { type: Boolean, default: !0 },
|
|
607
614
|
headerWidth: { default: 160 }
|
|
@@ -615,7 +622,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
615
622
|
}, b = () => {
|
|
616
623
|
for (let l = 0; l < c.value.length; l++)
|
|
617
624
|
c.value[l].closeCollapse();
|
|
618
|
-
},
|
|
625
|
+
}, i = (l) => {
|
|
619
626
|
const { titleBlockAsLink: u, titleBlockLink: h, titleBlockLinkTarget: B } = k;
|
|
620
627
|
u || l.preventDefault(), C("title-click", l, h, B), v(), b();
|
|
621
628
|
}, s = (l, u) => {
|
|
@@ -629,16 +636,18 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
629
636
|
t.h3Variant({ size: l }),
|
|
630
637
|
t.textColorVariant({ color: u })
|
|
631
638
|
].join(" ");
|
|
632
|
-
}),
|
|
639
|
+
}), a = (l) => {
|
|
633
640
|
const u = l;
|
|
634
641
|
return typeof u.children > "u" ? !1 : u.children.length > 0;
|
|
635
642
|
};
|
|
636
643
|
return L({
|
|
637
644
|
headerClose: v
|
|
638
645
|
}), (l, u) => (r(), V(w(te), {
|
|
646
|
+
"nav-label": e.navLabel,
|
|
647
|
+
"menu-label": e.menuLabel,
|
|
639
648
|
"bg-color": e.bgColor,
|
|
640
649
|
"drawer-btn-color": e.drawerBtnColor,
|
|
641
|
-
"drawer-
|
|
650
|
+
"show-drawer-border": e.showDrawerBorder,
|
|
642
651
|
"header-width": e.headerWidth,
|
|
643
652
|
onToggleDrawer: x,
|
|
644
653
|
ref_key: "componentRef",
|
|
@@ -653,7 +662,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
653
662
|
o("a", {
|
|
654
663
|
href: e.titleBlockLink,
|
|
655
664
|
target: e.titleBlockLinkTarget,
|
|
656
|
-
onClick:
|
|
665
|
+
onClick: i
|
|
657
666
|
}, [
|
|
658
667
|
o("img", {
|
|
659
668
|
src: e.logo,
|
|
@@ -666,7 +675,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
666
675
|
o("a", {
|
|
667
676
|
href: e.titleBlockLink,
|
|
668
677
|
target: e.titleBlockLinkTarget,
|
|
669
|
-
onClick:
|
|
678
|
+
onClick: i
|
|
670
679
|
}, [
|
|
671
680
|
o("h3", {
|
|
672
681
|
class: y([m.value, "mb-md text-center"]),
|
|
@@ -680,7 +689,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
680
689
|
(r(!0), d(N, null, j(e.menuItems, (h, B) => (r(), d("li", {
|
|
681
690
|
key: `menu-${B}`
|
|
682
691
|
}, [
|
|
683
|
-
|
|
692
|
+
a(h) ? (r(), V(q, {
|
|
684
693
|
key: 1,
|
|
685
694
|
ref_for: !0,
|
|
686
695
|
ref_key: "collapseRef",
|
|
@@ -726,7 +735,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
726
735
|
o("a", {
|
|
727
736
|
href: e.titleBlockLink,
|
|
728
737
|
target: e.titleBlockLinkTarget,
|
|
729
|
-
onClick:
|
|
738
|
+
onClick: i
|
|
730
739
|
}, [
|
|
731
740
|
o("img", {
|
|
732
741
|
src: e.logo,
|
|
@@ -739,7 +748,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
739
748
|
o("a", {
|
|
740
749
|
href: e.titleBlockLink,
|
|
741
750
|
target: e.titleBlockLinkTarget,
|
|
742
|
-
onClick:
|
|
751
|
+
onClick: i
|
|
743
752
|
}, [
|
|
744
753
|
o("h3", {
|
|
745
754
|
class: y([m.value, "mb-md text-center"]),
|
|
@@ -753,7 +762,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
753
762
|
(r(!0), d(N, null, j(e.menuItems, (B, z) => (r(), d("li", {
|
|
754
763
|
key: `menu-${z}`
|
|
755
764
|
}, [
|
|
756
|
-
|
|
765
|
+
a(B) ? (r(), V(q, {
|
|
757
766
|
key: 1,
|
|
758
767
|
"nav-id": B.title,
|
|
759
768
|
"nav-location": "mobile",
|
|
@@ -789,7 +798,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
789
798
|
])
|
|
790
799
|
]),
|
|
791
800
|
_: 3
|
|
792
|
-
}, 8, ["bg-color", "drawer-btn-color", "drawer-
|
|
801
|
+
}, 8, ["nav-label", "menu-label", "bg-color", "drawer-btn-color", "show-drawer-border", "header-width"]));
|
|
793
802
|
}
|
|
794
803
|
});
|
|
795
804
|
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"},D={class:"relative flex flex-col"},M=["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",D,[(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,M))),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,"show-drawer-border":t.showDrawerBorder,"drawer-btn-color":t.drawerBtnColor,"fade-in-on-scroll":t.fadeInOnScroll,"scroll-distance":t.scrollDistance,"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","show-drawer-border","drawer-btn-color","fade-in-on-scroll","scroll-distance","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,"show-drawer-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","show-drawer-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.7",
|
|
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",
|