@bobbykim/mcl-header 0.5.1 → 0.6.1

package/dist/mcl-header.js

@@ -0,0 +1,793 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-1b1467b6]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-1b1467b6]:before,.nav__text:hover+.nav__decorator[data-v-1b1467b6]:before{width:100%}.nav__decorator[data-v-3cd6e9eb]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-3cd6e9eb]:before,.nav__text:hover+.nav__decorator[data-v-3cd6e9eb]:before{width:100%}.nav__decorator[data-v-94d8fa7b]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-94d8fa7b]:before,.nav__text:hover+.nav__decorator[data-v-94d8fa7b]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as X, ref as z, computed as H, openBlock as i, createElementBlock as d, createElementVNode as n, withDirectives as W, normalizeClass as B, toDisplayString as R, unref as b, createCommentVNode as E, createVNode as j, withCtx as O, Fragment as A, renderList as S, pushScopeId as U, popScopeId as q, withKeys as F, useSlots as J, createBlock as x, renderSlot as N } from "vue";
+import o, { vCollapse as P, Collapse as Q, DropdownContainer as te, DropdownContent as oe, HeaderHorizontal as ne, HeaderVertical as ie } from "@bobbykim/manguito-theme";
+const ae = (k) => (U("data-v-1b1467b6"), k = k(), q(), k), se = { class: "flex flex-col w-full" }, re = { class: "self-center" }, ue = /* @__PURE__ */ ae(() => /* @__PURE__ */ n("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)), de = [
+  ue
+], ce = { class: "relative pt-2xs" }, he = { class: "relative flex flex-col" }, fe = ["href", "target", "onClick"], me = /* @__PURE__ */ X({
+  __name: "NavCollapse",
+  props: {
+    navId: {},
+    navAccordionGroup: {},
+    navItem: {},
+    bgColor: { default: "light-2" },
+    hoverBgColor: { default: "dark-1" },
+    menuTextSize: { default: "md" },
+    menuTextColor: { default: "dark-3" },
+    menuTextBold: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    asLink: { type: Boolean, default: !0 }
+  },
+  emits: ["child-click", "label-click"],
+  setup(k, { emit: w }) {
+    const L = k, p = w, g = z(!1), T = H(() => {
+      const { navId: t } = L;
+      return `nav-${t.toLowerCase().replaceAll(" ", "-")}`;
+    }), a = H(() => {
+      const { navAccordionGroup: t } = L;
+      return `accordion-${t.toLocaleLowerCase().replaceAll(" ", "-")}`;
+    }), h = (t) => {
+      g.value = t;
+    }, C = (t, s) => {
+      p("label-click", t, s, g.value);
+    }, y = (t, s) => {
+      const { asLink: l } = L;
+      !l && t.preventDefault(), p("child-click", t, s);
+    }, r = (t, s, l) => {
+      const f = [
+        o("BODYTEXT", t),
+        o("TEXTCOLOR", s)
+      ];
+      return l && f.push("font-bold"), f.join(" ");
+    };
+    return (t, s) => (i(), d("div", se, [
+      n("div", re, [
+        W((i(), d("button", {
+          class: B(["tracking-wider align-middle outline-none nav__text flex items-center gap-3xs", r(t.menuTextSize, t.menuTextColor, t.menuTextBold)]),
+          onClick: s[0] || (s[0] = (l) => C(l, t.navItem.title))
+        }, [
+          n("span", null, R(t.navItem.title), 1),
+          (i(), d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 448 512",
+            class: B(["h-[0.8rem] fill-current", [
+              g.value ? "rotate-180" : "rotate-0",
+              "transition-transform duration-300 ease-in"
+            ]])
+          }, de, 2))
+        ], 2)), [
+          [b(P), void 0, T.value]
+        ]),
+        t.displayHighlight ? (i(), d("div", {
+          key: 0,
+          class: B(["relative -top-[2px] h-[6px] nav__decorator", b(o)("BEFOREBG", t.highlightColor)])
+        }, null, 2)) : E("", !0)
+      ]),
+      j(b(Q), {
+        id: T.value,
+        visible: !1,
+        accordion: a.value,
+        onOpen: h,
+        onClose: h
+      }, {
+        default: O(() => [
+          n("div", ce, [
+            t.displayHighlight ? (i(), d("div", {
+              key: 0,
+              class: B(["absolute w-md bg-opacity-25 -left-4 h-full", b(o)("BGCOLOR", t.highlightColor)])
+            }, null, 2)) : E("", !0),
+            n("div", he, [
+              (i(!0), d(A, null, S(t.navItem.children, (l, f) => (i(), d("a", {
+                href: l.url,
+                target: l.target,
+                class: B(["w-full pb-2xs last:pb-0", [
+                  b(o)("TEXTCOLOR", t.menuTextColor),
+                  b(o)("BODYTEXT", t.menuTextSize)
+                ]]),
+                key: f,
+                onClick: (v) => y(v, l)
+              }, R(l.title), 11, fe))), 128))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "accordion"])
+    ]));
+  }
+});
+const G = (k, w) => {
+  const L = k.__vccOpts || k;
+  for (const [p, g] of w)
+    L[p] = g;
+  return L;
+}, ge = /* @__PURE__ */ G(me, [["__scopeId", "data-v-1b1467b6"]]), pe = (k) => (U("data-v-3cd6e9eb"), k = k(), q(), k), ke = ["onClick"], Ce = /* @__PURE__ */ pe(() => /* @__PURE__ */ n("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)), ve = [
+  Ce
+], be = ["href", "target", "onClick"], Te = /* @__PURE__ */ X({
+  __name: "NavDropdown",
+  props: {
+    navItem: {},
+    bgColor: { default: "light-1" },
+    menuTextSize: { default: "md" },
+    menuTextColor: { default: "dark-3" },
+    menuTextBold: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    asLink: { type: Boolean, default: !0 }
+  },
+  emits: ["label-click", "child-click"],
+  setup(k, { emit: w }) {
+    const L = k, p = w, g = z(-1), T = z(), a = (r, t, s) => {
+      const l = [
+        o("BODYTEXT", r),
+        o("TEXTCOLOR", t)
+      ];
+      return s && l.push("font-bold"), l.join(" ");
+    }, h = (r) => {
+      const t = L.navItem.children.length;
+      T.value !== void 0 && (r === "down" && g.value < t - 1 && g.value++, r === "up" && g.value > 0 && g.value--, T.value[g.value].focus());
+    }, C = (r, t, s) => {
+      g.value = -1, p("label-click", r, t, s);
+    }, y = (r, t) => {
+      const { asLink: s } = L;
+      !s && r.preventDefault(), p("child-click", r, t);
+    };
+    return (r, t) => (i(), d("div", {
+      onKeyup: [
+        t[0] || (t[0] = F((s) => h("down"), ["down"])),
+        t[1] || (t[1] = F((s) => h("up"), ["up"]))
+      ]
+    }, [
+      j(b(te), null, {
+        toggler: O(({ toggle: s, dropdownState: l }) => [
+          n("div", null, [
+            n("button", {
+              class: B(["tracking-wider align-middle outline-none nav__text flex items-center gap-3xs", a(r.menuTextSize, r.menuTextColor, r.menuTextBold)]),
+              onClick: (f) => (s(f), C(f, r.navItem.title, l))
+            }, [
+              n("span", null, R(r.navItem.title), 1),
+              (i(), d("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 448 512",
+                class: B(["h-[0.8rem] fill-current", [
+                  l ? "rotate-180" : "rotate-0",
+                  "transition-transform duration-300 ease-in"
+                ]])
+              }, ve, 2))
+            ], 10, ke),
+            r.displayHighlight ? (i(), d("div", {
+              key: 0,
+              class: B(["relative -top-[2px] h-[6px] nav__decorator", b(o)("BEFOREBG", r.highlightColor)])
+            }, null, 2)) : E("", !0)
+          ])
+        ]),
+        default: O(() => [
+          j(b(oe), { className: "border drop-shadow-sm" }, {
+            default: O(({ itemClick: s }) => [
+              (i(!0), d(A, null, S(r.navItem.children, (l, f) => (i(), d("a", {
+                href: l.url,
+                target: l.target,
+                key: f,
+                ref_for: !0,
+                ref_key: "navItemRef",
+                ref: T,
+                class: B(["px-xs py-2xs block w-full hover:bg-opacity-50 focus:bg-opacity-50 transition-all duration-200 ease-linear", [
+                  b(o)("BGCOLOR", r.bgColor),
+                  b(o)("HVBGCOLOR", r.highlightColor),
+                  b(o)("FCBGCOLOR", r.highlightColor),
+                  b(o)("TEXTCOLOR", r.menuTextColor),
+                  b(o)("BODYTEXT", r.menuTextSize)
+                ]]),
+                onClick: (v) => (s(), y(v, l))
+              }, R(l.title), 11, be))), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ], 32));
+  }
+});
+const ye = /* @__PURE__ */ G(Te, [["__scopeId", "data-v-3cd6e9eb"]]), Be = ["href", "target", "innerHTML"], Le = /* @__PURE__ */ X({
+  __name: "NavLink",
+  props: {
+    navItem: {},
+    menuTextSize: { default: "md" },
+    menuTextColor: { default: "dark-3" },
+    menuTextBold: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    asLink: { type: Boolean, default: !0 }
+  },
+  emits: ["nav-link"],
+  setup(k, { emit: w }) {
+    const L = k, p = w, g = (a, h, C) => {
+      const y = [
+        o("BODYTEXT", a),
+        o("TEXTCOLOR", h)
+      ];
+      return C && y.push("font-bold"), y.join(" ");
+    }, T = (a, h) => {
+      const { asLink: C } = L;
+      !C && a.preventDefault(), p("nav-link", a, h);
+    };
+    return (a, h) => (i(), d("div", null, [
+      n("a", {
+        href: a.navItem.url,
+        target: a.navItem.target,
+        innerHTML: a.navItem.title,
+        class: B(["tracking-wider outline-none nav__text", g(a.menuTextSize, a.menuTextColor, a.menuTextBold)]),
+        onClick: h[0] || (h[0] = (C) => T(C, a.navItem))
+      }, null, 10, Be),
+      a.displayHighlight ? (i(), d("div", {
+        key: 0,
+        class: B(["relative -top-[2px] h-[6px] nav__decorator", b(o)("BEFOREBG", a.highlightColor)])
+      }, null, 2)) : E("", !0)
+    ]));
+  }
+});
+const V = /* @__PURE__ */ G(Le, [["__scopeId", "data-v-94d8fa7b"]]), we = { class: "flex flex-shrink-0 items-center self-center" }, Oe = { class: "h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle" }, Ie = ["href", "target"], xe = ["src", "alt"], $e = ["src", "alt"], He = { class: "flex flex-col justify-center ml-2" }, Ee = ["href", "target"], _e = ["innerHTML"], ze = { class: "hidden lg:flex flex-wrap" }, Re = {
+  key: 0,
+  class: "hidden lg:block"
+}, Ae = { class: "flex flex-col items-center justify-center p-xs" }, Se = { key: 0 }, sl = /* @__PURE__ */ X({
+  __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 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    bgColor: { default: "light-1" },
+    mobileMenuBgColor: { default: "light-2" },
+    drawerBtnColor: { default: "dark-1" },
+    drawerBtnBorder: { type: Boolean, default: !0 },
+    fadeInOnScroll: { type: Boolean, default: !0 },
+    scrollDistance: { default: 50 }
+  },
+  emits: ["toggle-drawer", "title-click", "menu-click", "collapse-click"],
+  setup(k, { expose: w, emit: L }) {
+    const p = k, g = z(), T = J(), a = L, h = () => {
+      var l;
+      (l = g.value) == null || l.headerClose();
+    }, C = (l) => {
+      const { titleBlockAsLink: f, titleBlockLink: v, titleBlockLinkTarget: e } = p;
+      f || l.preventDefault(), a("title-click", l, v, e), h();
+    }, y = (l, f) => {
+      const { menuItemAsLink: v } = p;
+      v || l.preventDefault(), a("menu-click", l, f), h();
+    }, r = (l, f, v) => {
+      a("collapse-click", l, f, v);
+    }, t = (l, f) => [
+      o("H2", l),
+      o("TEXTCOLOR", f)
+    ].join(" "), s = (l) => {
+      const f = l;
+      return typeof f.children > "u" ? !1 : f.children.length > 0;
+    };
+    return w({
+      headerClose: h
+    }), (l, f) => (i(), x(b(ne), {
+      ref_key: "componentRef",
+      ref: g,
+      "bg-color": l.bgColor,
+      "drawer-btn-border": l.drawerBtnBorder,
+      "drawer-btn-color": l.drawerBtnColor,
+      "fade-in-on-scroll": l.fadeInOnScroll,
+      "mobile-menu-bg-color": l.mobileMenuBgColor
+    }, {
+      content: O(() => [
+        n("div", we, [
+          n("div", Oe, [
+            n("a", {
+              href: l.titleBlockLink,
+              target: l.titleBlockLinkTarget,
+              onClick: C
+            }, [
+              n("img", {
+                src: l.logo,
+                alt: l.logoAlt,
+                class: B(["h-full", [l.logoSmall ? "hidden lg:inline-block" : "inline-block"]])
+              }, null, 10, xe),
+              l.logoSmall ? (i(), d("img", {
+                key: 0,
+                src: l.logoSmall,
+                alt: l.logoAlt,
+                class: "inline-block lg:hidden h-full"
+              }, null, 8, $e)) : E("", !0)
+            ], 8, Ie)
+          ]),
+          n("div", He, [
+            n("a", {
+              href: l.titleBlockLink,
+              target: l.titleBlockLinkTarget,
+              onClick: C
+            }, [
+              n("h2", {
+                class: B(["inline-block align-middle tracking-wider", t(l.titleSize, l.titleColor)]),
+                innerHTML: l.title
+              }, null, 10, _e)
+            ], 8, Ee),
+            n("ul", ze, [
+              (i(!0), d(A, null, S(l.menuItems, (v, e) => (i(), d("li", {
+                class: "mr-xs last:mr-0",
+                key: `menu-${e}`
+              }, [
+                s(v) ? (i(), x(ye, {
+                  key: 1,
+                  "nav-item": v,
+                  "menu-text-color": l.menuTextColor,
+                  "menu-text-size": l.menuTextSize,
+                  "menu-text-bold": l.menuTextBold,
+                  "display-highlight": l.displayHighlight,
+                  "highlight-color": l.highlightColor,
+                  "bg-color": l.bgColor,
+                  "as-link": l.menuItemAsLink,
+                  onChildClick: y,
+                  onLabelClick: r
+                }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "bg-color", "as-link"])) : (i(), x(V, {
+                  key: 0,
+                  "nav-item": v,
+                  "menu-text-color": l.menuTextColor,
+                  "menu-text-size": l.menuTextSize,
+                  "menu-text-bold": l.menuTextBold,
+                  "display-highlight": l.displayHighlight,
+                  "highlight-color": l.highlightColor,
+                  "as-link": l.menuItemAsLink,
+                  onNavLink: y
+                }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"]))
+              ]))), 128))
+            ])
+          ])
+        ])
+      ]),
+      "content-right": O(() => [
+        b(T)["content-right"] ? (i(), d("div", Re, [
+          N(l.$slots, "content-right")
+        ])) : E("", !0)
+      ]),
+      "mobile-content": O(() => [
+        n("div", null, [
+          n("ul", Ae, [
+            (i(!0), d(A, null, S(l.menuItems, (v, e) => (i(), d("li", {
+              class: "mb-2xs last:mb-0",
+              key: `mobile-${e}`
+            }, [
+              s(v) ? (i(), x(ge, {
+                key: 1,
+                "nav-id": v.title,
+                "nav-item": v,
+                "menu-text-color": l.menuTextColor,
+                "menu-text-size": l.menuTextSize,
+                "menu-text-bold": l.menuTextBold,
+                "display-highlight": l.displayHighlight,
+                "highlight-color": l.highlightColor,
+                "nav-accordion-group": l.title,
+                "as-link": l.menuItemAsLink,
+                onChildClick: y,
+                onLabelClick: r
+              }, null, 8, ["nav-id", "nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "nav-accordion-group", "as-link"])) : (i(), x(V, {
+                key: 0,
+                "nav-item": v,
+                "menu-text-color": l.menuTextColor,
+                "menu-text-size": l.menuTextSize,
+                "menu-text-bold": l.menuTextBold,
+                "display-highlight": l.displayHighlight,
+                "highlight-color": l.highlightColor,
+                "as-link": l.menuItemAsLink,
+                onNavLink: y
+              }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"]))
+            ]))), 128))
+          ]),
+          b(T)["mobile-bottom"] ? (i(), d("div", Se, [
+            N(l.$slots, "mobile-bottom", { headerClose: h })
+          ])) : E("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
+  }
+}), Xe = { class: "relative flex gap-2 items-center justify-center" }, De = /* @__PURE__ */ n("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), Me = [
+  De
+], Ne = ["href", "target", "onClick"], je = { class: "relative" }, K = /* @__PURE__ */ X({
+  __name: "NavCollapseVertical",
+  props: {
+    navId: {},
+    navAccordionGroup: {},
+    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(k, { expose: w, emit: L }) {
+    const p = k, g = z(!1), T = z(), a = L, h = (e) => {
+      g.value = e;
+    }, C = () => {
+      var e;
+      (e = T.value) == null || e.close();
+    }, y = (e, c) => {
+      a("label-click", e, c, g.value);
+    }, r = (e, c) => {
+      var m;
+      const { asLink: u } = p;
+      u || e.preventDefault(), a("child-click", e, c), (m = T.value) == null || m.close(), C();
+    }, t = H(() => {
+      const { navId: e, navLocation: c } = p, m = e.toLowerCase().replaceAll(" ", "-");
+      return `nav-${c}-${m}`;
+    }), s = H(() => {
+      const { navAccordionGroup: e, navLocation: c } = p, u = e.toLowerCase().replaceAll(" ", "-");
+      return `nav-accordion-group-${c}-${u}`;
+    }), l = H(() => {
+      const { textColor: e, textSize: c, dHl: u, hlColor: m, fontBold: $ } = p, I = [o("BODYTEXT", c)];
+      if (!u) {
+        const D = [
+          o("TEXTCOLOR", e),
+          o("HVTEXTCOLOR", m),
+          o("FCTEXTCOLOR", m)
+        ];
+        I.push(D.join(" "));
+      }
+      if (u) {
+        const D = o("BEFOREBG", m), _ = "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.push(_ + D);
+        const M = [
+          o("TEXTCOLOR", m),
+          o("HVTEXTCOLOR", e),
+          o("FCTEXTCOLOR", e)
+        ];
+        I.push(M.join(" "));
+      }
+      return $ && I.push("font-bold"), I.join(" ");
+    }), f = H(() => {
+      const { dHl: e, hlColor: c, navLocation: u } = p, m = [];
+      if (!e)
+        return "";
+      const $ = "before:absolute before:w-xs before:h-full before:bg-primary before:bg-opacity-70 ", I = u === "desktop" ? "before:left-0 " : "before:right-0 ";
+      return m.push($ + I + o("BEFOREBG", c)), m.join(" ");
+    }), v = H(() => {
+      const { textColor: e, textSize: c, dHl: u, hlColor: m, fontBold: $, navLocation: I } = p;
+      let D = c === "xl" ? "lg" : c === "lg" ? "md" : c === "md" ? "sm" : "xs";
+      const _ = [
+        o("TEXTCOLOR", e),
+        o("BODYTEXT", D)
+      ];
+      if (I === "mobile" && _.push("text-end"), !u) {
+        const M = [
+          o("TEXTCOLOR", e),
+          o("HVTEXTCOLOR", m),
+          o("FCTEXTCOLOR", m)
+        ];
+        _.push(M.join(" "));
+      }
+      if (u) {
+        const M = o("BEFOREBG", m), Z = "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 ", ee = I === "desktop" ? "before:left-0 before:transition-[width] " : "before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";
+        _.push(Z + ee + M);
+        const le = [
+          o("TEXTCOLOR", m),
+          o("HVTEXTCOLOR", e),
+          o("FCTEXTCOLOR", e)
+        ];
+        _.push(le.join(" "));
+      }
+      return $ && _.push("font-bold"), _.join(" ");
+    });
+    return w({
+      closeCollapse: C
+    }), (e, c) => (i(), d("div", null, [
+      W((i(), d("button", {
+        class: B(["px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear", [l.value]]),
+        onClick: c[0] || (c[0] = (u) => y(u, e.menuItem.title))
+      }, [
+        n("div", Xe, [
+          n("span", null, R(e.menuItem.title), 1),
+          (i(), d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 448 512",
+            class: B(["h-[0.8rem] fill-current", [
+              g.value ? "rotate-180" : "rotate-0",
+              "transition-transform duration-300 ease-in"
+            ]])
+          }, Me, 2))
+        ])
+      ], 2)), [
+        [b(P), void 0, t.value]
+      ]),
+      j(b(Q), {
+        ref_key: "collapseRef",
+        ref: T,
+        id: t.value,
+        accordion: s.value,
+        onOpen: h,
+        onClose: h
+      }, {
+        default: O(() => [
+          n("ul", {
+            class: B(["relative", [f.value]])
+          }, [
+            (i(!0), d(A, null, S(e.menuItem.children, (u, m) => (i(), d("li", {
+              key: m,
+              class: B([e.navLocation === "desktop" ? "ml-xs" : "mr-xs"])
+            }, [
+              n("a", {
+                href: u.url,
+                target: u.target,
+                onClick: ($) => r($, u),
+                class: B(["relative before:absolute w-full px-2xs py-3xs block overflow-x-hidden transition-colors duration-300 ease-linear", [v.value]])
+              }, [
+                n("span", je, R(u.title), 1)
+              ], 10, Ne)
+            ], 2))), 128))
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["id", "accordion"])
+    ]));
+  }
+}), Ge = ["href", "target"], Fe = { class: "relative" }, Y = /* @__PURE__ */ X({
+  __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(k, { emit: w }) {
+    const L = k, p = w, g = (a, h) => {
+      const { asLink: C } = L;
+      C || a.preventDefault(), p("menu-click", a, h);
+    }, T = H(() => {
+      const { textColor: a, textSize: h, dHl: C, hlColor: y, fontBold: r } = L, t = [o("BODYTEXT", h)];
+      if (!C) {
+        const s = [
+          o("TEXTCOLOR", a),
+          o("HVTEXTCOLOR", y),
+          o("FCTEXTCOLOR", y)
+        ];
+        t.push(s.join(" "));
+      }
+      if (C) {
+        const s = o("BEFOREBG", y), l = "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 ";
+        t.push(l + s);
+        const f = [
+          o("TEXTCOLOR", y),
+          o("HVTEXTCOLOR", a),
+          o("FCTEXTCOLOR", a)
+        ];
+        t.push(f.join(" "));
+      }
+      return r && t.push("font-bold"), t.join(" ");
+    });
+    return (a, h) => (i(), d("a", {
+      class: B([[T.value], "px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"]),
+      href: a.menuItem.url,
+      target: a.menuItem.target ? a.menuItem.target : "_self",
+      onClick: h[0] || (h[0] = (C) => g(C, a.menuItem))
+    }, [
+      n("span", Fe, R(a.menuItem.title), 1)
+    ], 10, Ge));
+  }
+}), Ve = { class: "p-md text-center" }, Ke = ["href", "target"], Ye = ["src", "alt"], We = ["href", "target"], Ue = ["innerHTML"], qe = { class: "flex flex-col" }, Je = { key: 0 }, Pe = { class: "flex flex-col justify-between h-full" }, Qe = { class: "p-md text-center" }, Ze = ["href", "target"], el = ["src", "alt"], ll = ["href", "target"], tl = ["innerHTML"], ol = { class: "flex flex-col" }, nl = { key: 0 }, rl = /* @__PURE__ */ X({
+  __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 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "primary" },
+    bgColor: { default: "light-1" },
+    drawerBtnColor: { default: "dark-1" },
+    drawerBtnBorder: { type: Boolean, default: !0 },
+    headerWidth: { default: 160 }
+  },
+  emits: ["toggle-drawer", "title-click", "menu-click", "collapse-click"],
+  setup(k, { expose: w, emit: L }) {
+    const p = k, g = J(), T = L, a = z(), h = z(), C = (e, c) => {
+      T("toggle-drawer", e, c);
+    }, y = () => {
+      var e;
+      (e = a.value) == null || e.headerClose();
+    }, r = () => {
+      for (let e = 0; e < h.value.length; e++)
+        h.value[e].closeCollapse();
+    }, t = (e) => {
+      const { titleBlockAsLink: c, titleBlockLink: u, titleBlockLinkTarget: m } = p;
+      c || e.preventDefault(), T("title-click", e, u, m), y(), r();
+    }, s = (e, c) => {
+      const { menuItemAsLink: u } = p;
+      u || e.preventDefault(), T("menu-click", e, c), y(), r();
+    }, l = (e, c, u) => {
+      T("collapse-click", e, c, u);
+    }, f = H(() => {
+      const { titleSize: e, titleColor: c } = p;
+      return [
+        o("H3", e),
+        o("TEXTCOLOR", c)
+      ].join(" ");
+    }), v = (e) => {
+      const c = e;
+      return typeof c.children > "u" ? !1 : c.children.length > 0;
+    };
+    return w({
+      headerClose: y
+    }), (e, c) => (i(), x(b(ie), {
+      "bg-color": e.bgColor,
+      "drawer-btn-color": e.drawerBtnColor,
+      "drawer-btn-border": e.drawerBtnBorder,
+      "header-width": e.headerWidth,
+      onToggleDrawer: C,
+      ref_key: "componentRef",
+      ref: a
+    }, {
+      default: O(() => [
+        N(e.$slots, "default")
+      ]),
+      content: O(() => [
+        n("div", null, [
+          n("div", Ve, [
+            n("a", {
+              href: e.titleBlockLink,
+              target: e.titleBlockLinkTarget,
+              onClick: t
+            }, [
+              n("img", {
+                src: e.logo,
+                alt: e.logoAlt,
+                class: "h-full inline-block max-h-xl"
+              }, null, 8, Ye)
+            ], 8, Ke)
+          ]),
+          n("div", null, [
+            n("a", {
+              href: e.titleBlockLink,
+              target: e.titleBlockLinkTarget,
+              onClick: t
+            }, [
+              n("h3", {
+                class: B([f.value, "text-center mb-md"]),
+                innerHTML: e.title
+              }, null, 10, Ue)
+            ], 8, We)
+          ]),
+          n("ul", qe, [
+            (i(!0), d(A, null, S(e.menuItems, (u, m) => (i(), d("li", {
+              key: `menu-${m}`
+            }, [
+              v(u) ? (i(), x(K, {
+                key: 1,
+                ref_for: !0,
+                ref_key: "collapseRef",
+                ref: h,
+                "nav-id": u.title,
+                "nav-location": "desktop",
+                "nav-accordion-group": e.title,
+                "menu-item": u,
+                "as-link": e.menuItemAsLink,
+                "text-color": e.menuTextColor,
+                "text-size": e.menuTextSize,
+                "font-bold": e.menuTextBold,
+                "d-hl": e.displayHighlight,
+                "hl-color": e.highlightColor,
+                onChildClick: s,
+                onLabelClick: l
+              }, null, 8, ["nav-id", "nav-accordion-group", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (i(), x(Y, {
+                key: 0,
+                "menu-item": u,
+                "as-link": e.menuItemAsLink,
+                "text-color": e.menuTextColor,
+                "text-size": e.menuTextSize,
+                "font-bold": e.menuTextBold,
+                "d-hl": e.displayHighlight,
+                "hl-color": e.highlightColor,
+                onMenuClick: s
+              }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
+            ]))), 128))
+          ])
+        ])
+      ]),
+      "content-bottom": O(() => [
+        b(g)["content-bottom"] ? (i(), d("div", Je, [
+          N(e.$slots, "content-bottom")
+        ])) : E("", !0)
+      ]),
+      "mobile-content": O(({ headerClose: u }) => [
+        n("div", Pe, [
+          n("div", null, [
+            n("div", Qe, [
+              n("a", {
+                href: e.titleBlockLink,
+                target: e.titleBlockLinkTarget,
+                onClick: t
+              }, [
+                n("img", {
+                  src: e.logo,
+                  alt: e.logoAlt,
+                  class: "h-full inline-block max-h-xl"
+                }, null, 8, el)
+              ], 8, Ze)
+            ]),
+            n("div", null, [
+              n("a", {
+                href: e.titleBlockLink,
+                target: e.titleBlockLinkTarget,
+                onClick: t
+              }, [
+                n("h3", {
+                  class: B([f.value, "text-center mb-md"]),
+                  innerHTML: e.title
+                }, null, 10, tl)
+              ], 8, ll)
+            ]),
+            n("ul", ol, [
+              (i(!0), d(A, null, S(e.menuItems, (m, $) => (i(), d("li", {
+                key: `menu-${$}`
+              }, [
+                v(m) ? (i(), x(K, {
+                  key: 1,
+                  "nav-id": m.title,
+                  "nav-location": "mobile",
+                  "nav-accordion-group": e.title,
+                  "menu-item": m,
+                  "as-link": e.menuItemAsLink,
+                  "text-color": e.menuTextColor,
+                  "text-size": e.menuTextSize,
+                  "font-bold": e.menuTextBold,
+                  "d-hl": e.displayHighlight,
+                  "hl-color": e.highlightColor,
+                  onChildClick: s,
+                  onLabelClick: l
+                }, null, 8, ["nav-id", "nav-accordion-group", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (i(), x(Y, {
+                  key: 0,
+                  "menu-item": m,
+                  "as-link": e.menuItemAsLink,
+                  "text-color": e.menuTextColor,
+                  "text-size": e.menuTextSize,
+                  "font-bold": e.menuTextBold,
+                  "d-hl": e.displayHighlight,
+                  "hl-color": e.highlightColor,
+                  onMenuClick: s
+                }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
+              ]))), 128))
+            ])
+          ]),
+          b(g)["mobile-bottom"] ? (i(), d("div", nl, [
+            N(e.$slots, "mobile-bottom", { headerClose: u })
+          ])) : E("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["bg-color", "drawer-btn-color", "drawer-btn-border", "header-width"]));
+  }
+});
+export {
+  sl as MclHeaderA,
+  rl as MclHeaderB
+};