@bobbykim/mcl-header 0.8.0 → 0.8.2
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/README.md +3 -3
- package/dist/mcl-header.js +41 -26
- package/dist/mcl-header.umd.cjs +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
## Demo
|
|
4
4
|
|
|
5
|
-
[MCL Storybook Page](https://manguito-component-library.
|
|
5
|
+
[MCL Storybook Page](https://manguito-component-library.bobbykim.dev/)
|
|
6
6
|
|
|
7
|
-
- [MCL Header A](https://manguito-component-library.
|
|
8
|
-
- [MCL Header B](https://manguito-component-library.
|
|
7
|
+
- [MCL Header A](https://manguito-component-library.bobbykim.dev/?path=/docs/sections-header-mclheadera--mclheadera)
|
|
8
|
+
- [MCL Header B](https://manguito-component-library.bobbykim.dev/?path=/docs/sections-header-mclheaderb--mclheaderb)
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
package/dist/mcl-header.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-e72ce0b4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-e72ce0b4]:before,.nav__text:hover+.nav__decorator[data-v-e72ce0b4]:before{width:100%}.nav__decorator[data-v-1a311f8c]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1a311f8c]:before,.nav__text:hover+.nav__decorator[data-v-1a311f8c]:before{width:100%}.nav__decorator[data-v-d390be01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d390be01]:before,.nav__text:hover+.nav__decorator[data-v-d390be01]: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: "pt-2xs
|
|
4
|
+
const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "relative pt-2xs" }, ie = { class: "relative flex flex-col" }, ae = ["href", "target", "onClick"], re = /* @__PURE__ */ R({
|
|
5
5
|
__name: "NavCollapse",
|
|
6
6
|
props: {
|
|
7
7
|
navId: {},
|
|
@@ -37,7 +37,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
37
37
|
return (a, s) => (r(), d("div", le, [
|
|
38
38
|
o("div", oe, [
|
|
39
39
|
o("button", {
|
|
40
|
-
class: y(["nav__text
|
|
40
|
+
class: y(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none", b(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
|
|
41
41
|
onClick: s[0] || (s[0] = (n) => x(n, e.navItem.title))
|
|
42
42
|
}, [
|
|
43
43
|
o("span", null, M(e.navItem.title), 1),
|
|
@@ -68,13 +68,13 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
68
68
|
o("div", ne, [
|
|
69
69
|
e.showHighlight ? (r(), d("div", {
|
|
70
70
|
key: 0,
|
|
71
|
-
class: y(["
|
|
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
73
|
o("div", ie, [
|
|
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,
|
|
77
|
-
class: y(["pb-2xs
|
|
77
|
+
class: y(["w-full pb-2xs last:pb-0", [
|
|
78
78
|
w(t).textColorVariant({ color: e.menuTextColor }),
|
|
79
79
|
w(t).bodyTextVariant({ size: e.menuTextSize })
|
|
80
80
|
]]),
|
|
@@ -93,7 +93,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
93
93
|
for (const [k, g] of L)
|
|
94
94
|
T[k] = g;
|
|
95
95
|
return T;
|
|
96
|
-
}, se = /* @__PURE__ */ F(re, [["__scopeId", "data-v-
|
|
96
|
+
}, se = /* @__PURE__ */ F(re, [["__scopeId", "data-v-e72ce0b4"]]), ce = ["onClick"], ue = ["href", "target", "onClick"], de = /* @__PURE__ */ R({
|
|
97
97
|
__name: "NavDropdown",
|
|
98
98
|
props: {
|
|
99
99
|
navItem: {},
|
|
@@ -132,7 +132,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
132
132
|
toggler: I(({ toggle: s, dropdownState: n }) => [
|
|
133
133
|
o("div", null, [
|
|
134
134
|
o("button", {
|
|
135
|
-
class: y(["nav__text
|
|
135
|
+
class: y(["nav__text flex items-center gap-3xs align-middle tracking-wider outline-none", f(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
|
|
136
136
|
onClick: (m) => (s(m), x(m, e.navItem.title, n))
|
|
137
137
|
}, [
|
|
138
138
|
o("span", null, M(e.navItem.title), 1),
|
|
@@ -149,7 +149,10 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
149
149
|
], 10, ce),
|
|
150
150
|
e.showHighlight ? (r(), d("div", {
|
|
151
151
|
key: 0,
|
|
152
|
-
class: y([
|
|
152
|
+
class: y([
|
|
153
|
+
"nav__decorator relative -top-0.5 h-1.5",
|
|
154
|
+
w(t).beforeBgColorVariant({ color: e.highlightColor })
|
|
155
|
+
])
|
|
153
156
|
}, null, 2)) : $("", !0)
|
|
154
157
|
])
|
|
155
158
|
]),
|
|
@@ -163,7 +166,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
163
166
|
ref_for: !0,
|
|
164
167
|
ref_key: "navItemRef",
|
|
165
168
|
ref: C,
|
|
166
|
-
class: y(["px-xs py-2xs
|
|
169
|
+
class: y(["block w-full px-xs py-2xs transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50", [
|
|
167
170
|
w(t).bgColorVariant({ color: e.bgColor }),
|
|
168
171
|
w(t).hoverBgColorVariant({ color: e.highlightColor }),
|
|
169
172
|
w(t).focusBgColorVariant({ color: e.highlightColor }),
|
|
@@ -180,7 +183,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
180
183
|
})
|
|
181
184
|
], 32));
|
|
182
185
|
}
|
|
183
|
-
}), he = /* @__PURE__ */ F(de, [["__scopeId", "data-v-
|
|
186
|
+
}), he = /* @__PURE__ */ F(de, [["__scopeId", "data-v-1a311f8c"]]), fe = ["href", "target", "innerHTML"], me = /* @__PURE__ */ R({
|
|
184
187
|
__name: "NavLink",
|
|
185
188
|
props: {
|
|
186
189
|
navItem: {},
|
|
@@ -217,7 +220,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
217
220
|
}, null, 2)) : $("", !0)
|
|
218
221
|
]));
|
|
219
222
|
}
|
|
220
|
-
}), U = /* @__PURE__ */ F(me, [["__scopeId", "data-v-d390be01"]]), ge = { class: "flex flex-shrink-0 items-center self-center" }, ke = { class: "h-md md:h-lg lg:h-xl
|
|
223
|
+
}), U = /* @__PURE__ */ F(me, [["__scopeId", "data-v-d390be01"]]), ge = { class: "flex flex-shrink-0 items-center self-center" }, ke = { class: "mr-2xs h-md align-middle md:mr-sm md:h-lg lg:h-xl" }, xe = ["href", "target"], Ce = ["src", "alt"], ve = ["src", "alt"], be = { class: "ml-2 flex flex-col justify-center" }, ye = ["href", "target"], we = ["innerHTML"], Te = { class: "hidden flex-wrap lg:flex" }, Be = {
|
|
221
224
|
key: 0,
|
|
222
225
|
class: "hidden lg:block"
|
|
223
226
|
}, Le = { class: "flex flex-col items-center justify-center p-xs" }, Ie = { key: 0 }, Xe = /* @__PURE__ */ R({
|
|
@@ -293,7 +296,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
293
296
|
key: 0,
|
|
294
297
|
src: e.logoSmall,
|
|
295
298
|
alt: e.logoAlt,
|
|
296
|
-
class: "inline-block lg:hidden
|
|
299
|
+
class: "inline-block h-full lg:hidden"
|
|
297
300
|
}, null, 8, ve)) : $("", !0)
|
|
298
301
|
], 8, xe)
|
|
299
302
|
]),
|
|
@@ -419,7 +422,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
419
422
|
const { navId: i, navLocation: l } = k, h = i.toLowerCase().replaceAll(" ", "-");
|
|
420
423
|
return `nav-${l}-${h}`;
|
|
421
424
|
}), s = S(() => {
|
|
422
|
-
const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
|
|
425
|
+
const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [
|
|
426
|
+
t.bodyTextVariant({ size: l })
|
|
427
|
+
];
|
|
423
428
|
if (!u) {
|
|
424
429
|
const K = [
|
|
425
430
|
t.textColorVariant({ color: i }),
|
|
@@ -429,7 +434,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
429
434
|
z.push(K.join(" "));
|
|
430
435
|
}
|
|
431
436
|
if (u) {
|
|
432
|
-
const K = t.beforeBgColorVariant({
|
|
437
|
+
const K = t.beforeBgColorVariant({
|
|
438
|
+
color: h
|
|
439
|
+
});
|
|
433
440
|
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);
|
|
434
441
|
const O = [
|
|
435
442
|
t.textColorVariant({ color: h }),
|
|
@@ -444,7 +451,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
444
451
|
if (!i)
|
|
445
452
|
return "";
|
|
446
453
|
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 ";
|
|
447
|
-
return h.push(
|
|
454
|
+
return h.push(
|
|
455
|
+
B + z + t.beforeBgColorVariant({ color: l })
|
|
456
|
+
), h.join(" ");
|
|
448
457
|
}), m = S(() => {
|
|
449
458
|
const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B, navLocation: z } = k;
|
|
450
459
|
let K = l === "xl" ? "lg" : l === "lg" ? "md" : l === "md" ? "sm" : "xs";
|
|
@@ -461,7 +470,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
461
470
|
A.push(O.join(" "));
|
|
462
471
|
}
|
|
463
472
|
if (u) {
|
|
464
|
-
const O = t.beforeBgColorVariant({
|
|
473
|
+
const O = t.beforeBgColorVariant({
|
|
474
|
+
color: h
|
|
475
|
+
}), X = "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 ", Y = z === "desktop" ? "before:left-0 before:transition-[width] " : "before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";
|
|
465
476
|
A.push(X + Y + O);
|
|
466
477
|
const Z = [
|
|
467
478
|
t.textColorVariant({ color: h }),
|
|
@@ -476,7 +487,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
476
487
|
closeCollapse: x
|
|
477
488
|
}), (i, l) => (r(), d("div", null, [
|
|
478
489
|
o("button", {
|
|
479
|
-
class: y(["px-xs py-2xs
|
|
490
|
+
class: y(["relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute", [s.value]]),
|
|
480
491
|
onClick: l[0] || (l[0] = (u) => v(u, e.menuItem.title))
|
|
481
492
|
}, [
|
|
482
493
|
o("div", ze, [
|
|
@@ -512,7 +523,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
512
523
|
href: u.url,
|
|
513
524
|
target: u.target,
|
|
514
525
|
onClick: (B) => b(B, u),
|
|
515
|
-
class: y(["
|
|
526
|
+
class: y(["relative block w-full overflow-x-hidden px-2xs py-3xs transition-colors duration-300 ease-linear before:absolute", [m.value]])
|
|
516
527
|
}, [
|
|
517
528
|
o("span", $e, M(u.title), 1)
|
|
518
529
|
], 10, Ve)
|
|
@@ -540,7 +551,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
540
551
|
const { asLink: x } = T;
|
|
541
552
|
x || f.preventDefault(), k("menu-click", f, c);
|
|
542
553
|
}, C = S(() => {
|
|
543
|
-
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, a = [
|
|
554
|
+
const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, a = [
|
|
555
|
+
t.bodyTextVariant({ size: c })
|
|
556
|
+
];
|
|
544
557
|
if (!x) {
|
|
545
558
|
const s = [
|
|
546
559
|
t.textColorVariant({ color: f }),
|
|
@@ -550,7 +563,9 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
550
563
|
a.push(s.join(" "));
|
|
551
564
|
}
|
|
552
565
|
if (x) {
|
|
553
|
-
const s = t.beforeBgColorVariant({
|
|
566
|
+
const s = t.beforeBgColorVariant({
|
|
567
|
+
color: v
|
|
568
|
+
});
|
|
554
569
|
a.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);
|
|
555
570
|
const m = [
|
|
556
571
|
t.textColorVariant({ color: v }),
|
|
@@ -562,7 +577,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
562
577
|
return b && a.push("font-bold"), a.join(" ");
|
|
563
578
|
});
|
|
564
579
|
return (f, c) => (r(), d("a", {
|
|
565
|
-
class: y([[C.value], "px-xs py-2xs
|
|
580
|
+
class: y([[C.value], "relative block w-full px-xs py-2xs text-center transition-colors duration-300 ease-linear before:absolute"]),
|
|
566
581
|
href: e.menuItem.url,
|
|
567
582
|
target: e.menuItem.target ? e.menuItem.target : "_self",
|
|
568
583
|
onClick: c[0] || (c[0] = (x) => g(x, e.menuItem))
|
|
@@ -570,7 +585,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
570
585
|
o("span", Ae, M(e.menuItem.title), 1)
|
|
571
586
|
], 10, He));
|
|
572
587
|
}
|
|
573
|
-
}), Se = { class: "p-md text-center" }, Me = ["href", "target"], De = ["src", "alt"], Ne = ["href", "target"], je = ["innerHTML"], Re = { class: "flex flex-col" }, Ke = { key: 0 }, Oe = { class: "flex flex-col justify-between
|
|
588
|
+
}), Se = { class: "p-md text-center" }, Me = ["href", "target"], De = ["src", "alt"], Ne = ["href", "target"], je = ["innerHTML"], Re = { class: "flex flex-col" }, Ke = { key: 0 }, Oe = { class: "flex h-full flex-col justify-between" }, Ee = { class: "p-md text-center" }, We = ["href", "target"], Fe = ["src", "alt"], Ge = ["href", "target"], Ue = ["innerHTML"], qe = { class: "flex flex-col" }, Je = { key: 0 }, Ye = /* @__PURE__ */ R({
|
|
574
589
|
__name: "MclHeaderB",
|
|
575
590
|
props: {
|
|
576
591
|
logo: {},
|
|
@@ -645,7 +660,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
645
660
|
o("img", {
|
|
646
661
|
src: e.logo,
|
|
647
662
|
alt: e.logoAlt,
|
|
648
|
-
class: "h-full
|
|
663
|
+
class: "inline-block h-full max-h-xl"
|
|
649
664
|
}, null, 8, De)
|
|
650
665
|
], 8, Me)
|
|
651
666
|
]),
|
|
@@ -656,7 +671,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
656
671
|
onClick: a
|
|
657
672
|
}, [
|
|
658
673
|
o("h3", {
|
|
659
|
-
class: y([m.value, "text-center
|
|
674
|
+
class: y([m.value, "mb-md text-center"]),
|
|
660
675
|
innerHTML: e.title
|
|
661
676
|
}, null, 10, je)
|
|
662
677
|
], 8, Ne)
|
|
@@ -718,7 +733,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
718
733
|
o("img", {
|
|
719
734
|
src: e.logo,
|
|
720
735
|
alt: e.logoAlt,
|
|
721
|
-
class: "h-full
|
|
736
|
+
class: "inline-block h-full max-h-xl"
|
|
722
737
|
}, null, 8, Fe)
|
|
723
738
|
], 8, We)
|
|
724
739
|
]),
|
|
@@ -729,7 +744,7 @@ const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne
|
|
|
729
744
|
onClick: a
|
|
730
745
|
}, [
|
|
731
746
|
o("h3", {
|
|
732
|
-
class: y([m.value, "text-center
|
|
747
|
+
class: y([m.value, "mb-md text-center"]),
|
|
733
748
|
innerHTML: e.title
|
|
734
749
|
}, null, 10, Ue)
|
|
735
750
|
], 8, Ge)
|
package/dist/mcl-header.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-
|
|
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:"pt-2xs relative"},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 gap-3xs flex items-center 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(["w-md absolute -left-4 h-full 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(["pb-2xs w-full 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-df8e19a8"]]),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 gap-3xs flex items-center 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(["px-xs py-2xs block w-full 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-4dc15d31"]]),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-d390be01"]]),G={class:"flex flex-shrink-0 items-center self-center"},q={class:"h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle"},W=["href","target"],P=["src","alt"],U=["src","alt"],J={class:"flex flex-col justify-center ml-2"},Q=["href","target"],X=["innerHTML"],Y={class:"hidden lg:flex flex-wrap"},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 lg:hidden h-full"},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;let N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs";const 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(["px-xs py-2xs relative block w-full 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(["px-2xs py-3xs relative block w-full overflow-x-hidden 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],"px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"]),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 flex-col justify-between h-full"},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:"h-full inline-block 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,"text-center mb-md"]),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:"h-full inline-block 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,"text-center mb-md"]),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"})}));
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-e72ce0b4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-e72ce0b4]:before,.nav__text:hover+.nav__decorator[data-v-e72ce0b4]:before{width:100%}.nav__decorator[data-v-1a311f8c]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1a311f8c]:before,.nav__text:hover+.nav__decorator[data-v-1a311f8c]:before{width:100%}.nav__decorator[data-v-d390be01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d390be01]:before,.nav__text:hover+.nav__decorator[data-v-d390be01]: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-e72ce0b4"]]),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-1a311f8c"]]),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-d390be01"]]),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;let N=o==="xl"?"lg":o==="lg"?"md":o==="md"?"sm":"xs";const 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"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-header",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "header components based on manguito theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"name": "Bobby Kim",
|
|
21
21
|
"url": "https://www.devbobbykim.com/"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://manguito-component-library.
|
|
23
|
+
"homepage": "https://manguito-component-library.bobbykim.dev/",
|
|
24
24
|
"repository": {
|
|
25
25
|
"type": "git",
|
|
26
26
|
"url": "https://github.com/bobbykim89/manguito-component-library.git"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.0.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.0.2"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|