@bobbykim/mcl-header 0.5.0 → 0.6.0

package/dist/mcl-header.umd.cjs

@@ -0,0 +1,2 @@
+(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)}})();
+(function(L,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):(L=typeof globalThis<"u"?globalThis:L||self,e(L.MclHeader={},L.Vue,L.ManguitoTheme))})(this,function(L,e,t){"use strict";const $=k=>(e.pushScopeId("data-v-1b1467b6"),k=k(),e.popScopeId(),k),_={class:"flex flex-col w-full"},S={class:"self-center"},H=[$(()=>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))],R={class:"relative pt-2xs"},A={class:"relative flex flex-col"},D=["href","target","onClick"],X=e.defineComponent({__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:T}){const b=k,p=T,f=e.ref(!1),C=e.computed(()=>{const{navId:n}=b;return`nav-${n.toLowerCase().replaceAll(" ","-")}`}),i=e.computed(()=>{const{navAccordionGroup:n}=b;return`accordion-${n.toLocaleLowerCase().replaceAll(" ","-")}`}),d=n=>{f.value=n},u=(n,r)=>{p("label-click",n,r,f.value)},B=(n,r)=>{const{asLink:o}=b;!o&&n.preventDefault(),p("child-click",n,r)},a=(n,r,o)=>{const m=[t("BODYTEXT",n),t("TEXTCOLOR",r)];return o&&m.push("font-bold"),m.join(" ")};return(n,r)=>(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",S,[e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["tracking-wider align-middle outline-none nav__text flex items-center gap-3xs",a(n.menuTextSize,n.menuTextColor,n.menuTextBold)]),onClick:r[0]||(r[0]=o=>u(o,n.navItem.title))},[e.createElementVNode("span",null,e.toDisplayString(n.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",[f.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},H,2))],2)),[[e.unref(t.vCollapse),void 0,C.value]]),n.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative -top-[2px] h-[6px] nav__decorator",e.unref(t)("BEFOREBG",n.highlightColor)])},null,2)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(t.Collapse),{id:C.value,visible:!1,accordion:i.value,onOpen:d,onClose:d},{default:e.withCtx(()=>[e.createElementVNode("div",R,[n.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute w-md bg-opacity-25 -left-4 h-full",e.unref(t)("BGCOLOR",n.highlightColor)])},null,2)):e.createCommentVNode("",!0),e.createElementVNode("div",A,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.navItem.children,(o,m)=>(e.openBlock(),e.createElementBlock("a",{href:o.url,target:o.target,class:e.normalizeClass(["w-full pb-2xs last:pb-0",[e.unref(t)("TEXTCOLOR",n.menuTextColor),e.unref(t)("BODYTEXT",n.menuTextSize)]]),key:m,onClick:g=>B(g,o)},e.toDisplayString(o.title),11,D))),128))])])]),_:1},8,["id","accordion"])]))}}),Se="",x=(k,T)=>{const b=k.__vccOpts||k;for(const[p,f]of T)b[p]=f;return b},M=x(X,[["__scopeId","data-v-1b1467b6"]]),j=k=>(e.pushScopeId("data-v-3cd6e9eb"),k=k(),e.popScopeId(),k),F=["onClick"],G=[j(()=>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))],K=["href","target","onClick"],Y=e.defineComponent({__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:T}){const b=k,p=T,f=e.ref(-1),C=e.ref(),i=(a,n,r)=>{const o=[t("BODYTEXT",a),t("TEXTCOLOR",n)];return r&&o.push("font-bold"),o.join(" ")},d=a=>{const n=b.navItem.children.length;C.value!==void 0&&(a==="down"&&f.value<n-1&&f.value++,a==="up"&&f.value>0&&f.value--,C.value[f.value].focus())},u=(a,n,r)=>{f.value=-1,p("label-click",a,n,r)},B=(a,n)=>{const{asLink:r}=b;!r&&a.preventDefault(),p("child-click",a,n)};return(a,n)=>(e.openBlock(),e.createElementBlock("div",{onKeyup:[n[0]||(n[0]=e.withKeys(r=>d("down"),["down"])),n[1]||(n[1]=e.withKeys(r=>d("up"),["up"]))]},[e.createVNode(e.unref(t.DropdownContainer),null,{toggler:e.withCtx(({toggle:r,dropdownState:o})=>[e.createElementVNode("div",null,[e.createElementVNode("button",{class:e.normalizeClass(["tracking-wider align-middle outline-none nav__text flex items-center gap-3xs",i(a.menuTextSize,a.menuTextColor,a.menuTextBold)]),onClick:m=>(r(m),u(m,a.navItem.title,o))},[e.createElementVNode("span",null,e.toDisplayString(a.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",[o?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},G,2))],10,F),a.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative -top-[2px] h-[6px] nav__decorator",e.unref(t)("BEFOREBG",a.highlightColor)])},null,2)):e.createCommentVNode("",!0)])]),default:e.withCtx(()=>[e.createVNode(e.unref(t.DropdownContent),{className:"border drop-shadow-sm"},{default:e.withCtx(({itemClick:r})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.navItem.children,(o,m)=>(e.openBlock(),e.createElementBlock("a",{href:o.url,target:o.target,key:m,ref_for:!0,ref_key:"navItemRef",ref:C,class:e.normalizeClass(["px-xs py-2xs block w-full hover:bg-opacity-50 focus:bg-opacity-50 transition-all duration-200 ease-linear",[e.unref(t)("BGCOLOR",a.bgColor),e.unref(t)("HVBGCOLOR",a.highlightColor),e.unref(t)("FCBGCOLOR",a.highlightColor),e.unref(t)("TEXTCOLOR",a.menuTextColor),e.unref(t)("BODYTEXT",a.menuTextSize)]]),onClick:g=>(r(),B(g,o))},e.toDisplayString(o.title),11,K))),128))]),_:1})]),_:1})],32))}}),Re="",q=x(Y,[["__scopeId","data-v-3cd6e9eb"]]),W=["href","target","innerHTML"],P=e.defineComponent({__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:T}){const b=k,p=T,f=(i,d,u)=>{const B=[t("BODYTEXT",i),t("TEXTCOLOR",d)];return u&&B.push("font-bold"),B.join(" ")},C=(i,d)=>{const{asLink:u}=b;!u&&i.preventDefault(),p("nav-link",i,d)};return(i,d)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("a",{href:i.navItem.url,target:i.navItem.target,innerHTML:i.navItem.title,class:e.normalizeClass(["tracking-wider outline-none nav__text",f(i.menuTextSize,i.menuTextColor,i.menuTextBold)]),onClick:d[0]||(d[0]=u=>C(u,i.navItem))},null,10,W),i.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative -top-[2px] h-[6px] nav__decorator",e.unref(t)("BEFOREBG",i.highlightColor)])},null,2)):e.createCommentVNode("",!0)]))}}),Ae="",I=x(P,[["__scopeId","data-v-94d8fa7b"]]),U={class:"flex flex-shrink-0 items-center self-center"},J={class:"h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle"},Q=["href","target"],Z=["src","alt"],v=["src","alt"],ee={class:"flex flex-col justify-center ml-2"},le=["href","target"],oe=["innerHTML"],te={class:"hidden lg:flex flex-wrap"},ne={key:0,class:"hidden lg:block"},ie={class:"flex flex-col items-center justify-center p-xs"},re={key:0},ae=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},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:T,emit:b}){const p=k,f=e.ref(),C=e.useSlots(),i=b,d=()=>{var o;(o=f.value)==null||o.headerClose()},u=o=>{const{titleBlockAsLink:m,titleBlockLink:g,titleBlockLinkTarget:l}=p;m||o.preventDefault(),i("title-click",o,g,l),d()},B=(o,m)=>{const{menuItemAsLink:g}=p;g||o.preventDefault(),i("menu-click",o,m),d()},a=(o,m,g)=>{i("collapse-click",o,m,g)},n=(o,m)=>[t("H2",o),t("TEXTCOLOR",m)].join(" "),r=o=>{const m=o;return typeof m.children>"u"?!1:m.children.length>0};return T({headerClose:d}),(o,m)=>(e.openBlock(),e.createBlock(e.unref(t.HeaderHorizontal),{ref_key:"componentRef",ref:f,"bg-color":o.bgColor,"drawer-btn-border":o.drawerBtnBorder,"drawer-btn-color":o.drawerBtnColor,"fade-in-on-scroll":o.fadeInOnScroll,"mobile-menu-bg-color":o.mobileMenuBgColor},{content:e.withCtx(()=>[e.createElementVNode("div",U,[e.createElementVNode("div",J,[e.createElementVNode("a",{href:o.titleBlockLink,target:o.titleBlockLinkTarget,onClick:u},[e.createElementVNode("img",{src:o.logo,alt:o.logoAlt,class:e.normalizeClass(["h-full",[o.logoSmall?"hidden lg:inline-block":"inline-block"]])},null,10,Z),o.logoSmall?(e.openBlock(),e.createElementBlock("img",{key:0,src:o.logoSmall,alt:o.logoAlt,class:"inline-block lg:hidden h-full"},null,8,v)):e.createCommentVNode("",!0)],8,Q)]),e.createElementVNode("div",ee,[e.createElementVNode("a",{href:o.titleBlockLink,target:o.titleBlockLinkTarget,onClick:u},[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",n(o.titleSize,o.titleColor)]),innerHTML:o.title},null,10,oe)],8,le),e.createElementVNode("ul",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menuItems,(g,l)=>(e.openBlock(),e.createElementBlock("li",{class:"mr-xs last:mr-0",key:`menu-${l}`},[r(g)?(e.openBlock(),e.createBlock(q,{key:1,"nav-item":g,"menu-text-color":o.menuTextColor,"menu-text-size":o.menuTextSize,"menu-text-bold":o.menuTextBold,"display-highlight":o.displayHighlight,"highlight-color":o.highlightColor,"bg-color":o.bgColor,"as-link":o.menuItemAsLink,onChildClick:B,onLabelClick:a},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":g,"menu-text-color":o.menuTextColor,"menu-text-size":o.menuTextSize,"menu-text-bold":o.menuTextBold,"display-highlight":o.displayHighlight,"highlight-color":o.highlightColor,"as-link":o.menuItemAsLink,onNavLink:B},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))])])])]),"content-right":e.withCtx(()=>[e.unref(C)["content-right"]?(e.openBlock(),e.createElementBlock("div",ne,[e.renderSlot(o.$slots,"content-right")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("ul",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menuItems,(g,l)=>(e.openBlock(),e.createElementBlock("li",{class:"mb-2xs last:mb-0",key:`mobile-${l}`},[r(g)?(e.openBlock(),e.createBlock(M,{key:1,"nav-id":g.title,"nav-item":g,"menu-text-color":o.menuTextColor,"menu-text-size":o.menuTextSize,"menu-text-bold":o.menuTextBold,"display-highlight":o.displayHighlight,"highlight-color":o.highlightColor,"nav-accordion-group":o.title,"as-link":o.menuItemAsLink,onChildClick:B,onLabelClick:a},null,8,["nav-id","nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","nav-accordion-group","as-link"])):(e.openBlock(),e.createBlock(I,{key:0,"nav-item":g,"menu-text-color":o.menuTextColor,"menu-text-size":o.menuTextSize,"menu-text-bold":o.menuTextBold,"display-highlight":o.displayHighlight,"highlight-color":o.highlightColor,"as-link":o.menuItemAsLink,onNavLink:B},null,8,["nav-item","menu-text-color","menu-text-size","menu-text-bold","display-highlight","highlight-color","as-link"]))]))),128))]),e.unref(C)["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",re,[e.renderSlot(o.$slots,"mobile-bottom",{headerClose:d})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-border","drawer-btn-color","fade-in-on-scroll","mobile-menu-bg-color"]))}}),se={class:"relative flex gap-2 items-center justify-center"},ce=[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)],de=["href","target","onClick"],me={class:"relative"},z=e.defineComponent({__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:T,emit:b}){const p=k,f=e.ref(!1),C=e.ref(),i=b,d=l=>{f.value=l},u=()=>{var l;(l=C.value)==null||l.close()},B=(l,c)=>{i("label-click",l,c,f.value)},a=(l,c)=>{var h;const{asLink:s}=p;s||l.preventDefault(),i("child-click",l,c),(h=C.value)==null||h.close(),u()},n=e.computed(()=>{const{navId:l,navLocation:c}=p,h=l.toLowerCase().replaceAll(" ","-");return`nav-${c}-${h}`}),r=e.computed(()=>{const{navAccordionGroup:l,navLocation:c}=p,s=l.toLowerCase().replaceAll(" ","-");return`nav-accordion-group-${c}-${s}`}),o=e.computed(()=>{const{textColor:l,textSize:c,dHl:s,hlColor:h,fontBold:E}=p,y=[t("BODYTEXT",c)];if(!s){const O=[t("TEXTCOLOR",l),t("HVTEXTCOLOR",h),t("FCTEXTCOLOR",h)];y.push(O.join(" "))}if(s){const O=t("BEFOREBG",h),w="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 ";y.push(w+O);const N=[t("TEXTCOLOR",h),t("HVTEXTCOLOR",l),t("FCTEXTCOLOR",l)];y.push(N.join(" "))}return E&&y.push("font-bold"),y.join(" ")}),m=e.computed(()=>{const{dHl:l,hlColor:c,navLocation:s}=p,h=[];if(!l)return"";const E="before:absolute before:w-xs before:h-full before:bg-primary before:bg-opacity-70 ",y=s==="desktop"?"before:left-0 ":"before:right-0 ";return h.push(E+y+t("BEFOREBG",c)),h.join(" ")}),g=e.computed(()=>{const{textColor:l,textSize:c,dHl:s,hlColor:h,fontBold:E,navLocation:y}=p;let O=c==="xl"?"lg":c==="lg"?"md":c==="md"?"sm":"xs";const w=[t("TEXTCOLOR",l),t("BODYTEXT",O)];if(y==="mobile"&&w.push("text-end"),!s){const N=[t("TEXTCOLOR",l),t("HVTEXTCOLOR",h),t("FCTEXTCOLOR",h)];w.push(N.join(" "))}if(s){const N=t("BEFOREBG",h),ze="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=y==="desktop"?"before:left-0 before:transition-[width] ":"before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";w.push(ze+Ve+N);const $e=[t("TEXTCOLOR",h),t("HVTEXTCOLOR",l),t("FCTEXTCOLOR",l)];w.push($e.join(" "))}return E&&w.push("font-bold"),w.join(" ")});return T({closeCollapse:u}),(l,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear",[o.value]]),onClick:c[0]||(c[0]=s=>B(s,l.menuItem.title))},[e.createElementVNode("div",se,[e.createElementVNode("span",null,e.toDisplayString(l.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",[f.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in"]])},ce,2))])],2)),[[e.unref(t.vCollapse),void 0,n.value]]),e.createVNode(e.unref(t.Collapse),{ref_key:"collapseRef",ref:C,id:n.value,accordion:r.value,onOpen:d,onClose:d},{default:e.withCtx(()=>[e.createElementVNode("ul",{class:e.normalizeClass(["relative",[m.value]])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.menuItem.children,(s,h)=>(e.openBlock(),e.createElementBlock("li",{key:h,class:e.normalizeClass([l.navLocation==="desktop"?"ml-xs":"mr-xs"])},[e.createElementVNode("a",{href:s.url,target:s.target,onClick:E=>a(E,s),class:e.normalizeClass(["relative before:absolute w-full px-2xs py-3xs block overflow-x-hidden transition-colors duration-300 ease-linear",[g.value]])},[e.createElementVNode("span",me,e.toDisplayString(s.title),1)],10,de)],2))),128))],2)]),_:1},8,["id","accordion"])]))}}),he=["href","target"],fe={class:"relative"},V=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(k,{emit:T}){const b=k,p=T,f=(i,d)=>{const{asLink:u}=b;u||i.preventDefault(),p("menu-click",i,d)},C=e.computed(()=>{const{textColor:i,textSize:d,dHl:u,hlColor:B,fontBold:a}=b,n=[t("BODYTEXT",d)];if(!u){const r=[t("TEXTCOLOR",i),t("HVTEXTCOLOR",B),t("FCTEXTCOLOR",B)];n.push(r.join(" "))}if(u){const r=t("BEFOREBG",B),o="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.push(o+r);const m=[t("TEXTCOLOR",B),t("HVTEXTCOLOR",i),t("FCTEXTCOLOR",i)];n.push(m.join(" "))}return a&&n.push("font-bold"),n.join(" ")});return(i,d)=>(e.openBlock(),e.createElementBlock("a",{class:e.normalizeClass([[C.value],"px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"]),href:i.menuItem.url,target:i.menuItem.target?i.menuItem.target:"_self",onClick:d[0]||(d[0]=u=>f(u,i.menuItem))},[e.createElementVNode("span",fe,e.toDisplayString(i.menuItem.title),1)],10,he))}}),pe={class:"p-md text-center"},ke=["href","target"],ue=["src","alt"],ge=["href","target"],Ce=["innerHTML"],Be={class:"flex flex-col"},be={key:0},Te={class:"flex flex-col justify-between h-full"},ye={class:"p-md text-center"},Le=["href","target"],Ee=["src","alt"],we=["href","target"],Oe=["innerHTML"],Ne={class:"flex flex-col"},xe={key:0},Ie=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},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:T,emit:b}){const p=k,f=e.useSlots(),C=b,i=e.ref(),d=e.ref(),u=(l,c)=>{C("toggle-drawer",l,c)},B=()=>{var l;(l=i.value)==null||l.headerClose()},a=()=>{for(let l=0;l<d.value.length;l++)d.value[l].closeCollapse()},n=l=>{const{titleBlockAsLink:c,titleBlockLink:s,titleBlockLinkTarget:h}=p;c||l.preventDefault(),C("title-click",l,s,h),B(),a()},r=(l,c)=>{const{menuItemAsLink:s}=p;s||l.preventDefault(),C("menu-click",l,c),B(),a()},o=(l,c,s)=>{C("collapse-click",l,c,s)},m=e.computed(()=>{const{titleSize:l,titleColor:c}=p;return[t("H3",l),t("TEXTCOLOR",c)].join(" ")}),g=l=>{const c=l;return typeof c.children>"u"?!1:c.children.length>0};return T({headerClose:B}),(l,c)=>(e.openBlock(),e.createBlock(e.unref(t.HeaderVertical),{"bg-color":l.bgColor,"drawer-btn-color":l.drawerBtnColor,"drawer-btn-border":l.drawerBtnBorder,"header-width":l.headerWidth,onToggleDrawer:u,ref_key:"componentRef",ref:i},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),content:e.withCtx(()=>[e.createElementVNode("div",null,[e.createElementVNode("div",pe,[e.createElementVNode("a",{href:l.titleBlockLink,target:l.titleBlockLinkTarget,onClick:n},[e.createElementVNode("img",{src:l.logo,alt:l.logoAlt,class:"h-full inline-block max-h-xl"},null,8,ue)],8,ke)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:l.titleBlockLink,target:l.titleBlockLinkTarget,onClick:n},[e.createElementVNode("h3",{class:e.normalizeClass([m.value,"text-center mb-md"]),innerHTML:l.title},null,10,Ce)],8,ge)]),e.createElementVNode("ul",Be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.menuItems,(s,h)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${h}`},[g(s)?(e.openBlock(),e.createBlock(z,{key:1,ref_for:!0,ref_key:"collapseRef",ref:d,"nav-id":s.title,"nav-location":"desktop","nav-accordion-group":l.title,"menu-item":s,"as-link":l.menuItemAsLink,"text-color":l.menuTextColor,"text-size":l.menuTextSize,"font-bold":l.menuTextBold,"d-hl":l.displayHighlight,"hl-color":l.highlightColor,onChildClick:r,onLabelClick:o},null,8,["nav-id","nav-accordion-group","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(V,{key:0,"menu-item":s,"as-link":l.menuItemAsLink,"text-color":l.menuTextColor,"text-size":l.menuTextSize,"font-bold":l.menuTextBold,"d-hl":l.displayHighlight,"hl-color":l.highlightColor,onMenuClick:r},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])])]),"content-bottom":e.withCtx(()=>[e.unref(f)["content-bottom"]?(e.openBlock(),e.createElementBlock("div",be,[e.renderSlot(l.$slots,"content-bottom")])):e.createCommentVNode("",!0)]),"mobile-content":e.withCtx(({headerClose:s})=>[e.createElementVNode("div",Te,[e.createElementVNode("div",null,[e.createElementVNode("div",ye,[e.createElementVNode("a",{href:l.titleBlockLink,target:l.titleBlockLinkTarget,onClick:n},[e.createElementVNode("img",{src:l.logo,alt:l.logoAlt,class:"h-full inline-block max-h-xl"},null,8,Ee)],8,Le)]),e.createElementVNode("div",null,[e.createElementVNode("a",{href:l.titleBlockLink,target:l.titleBlockLinkTarget,onClick:n},[e.createElementVNode("h3",{class:e.normalizeClass([m.value,"text-center mb-md"]),innerHTML:l.title},null,10,Oe)],8,we)]),e.createElementVNode("ul",Ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.menuItems,(h,E)=>(e.openBlock(),e.createElementBlock("li",{key:`menu-${E}`},[g(h)?(e.openBlock(),e.createBlock(z,{key:1,"nav-id":h.title,"nav-location":"mobile","nav-accordion-group":l.title,"menu-item":h,"as-link":l.menuItemAsLink,"text-color":l.menuTextColor,"text-size":l.menuTextSize,"font-bold":l.menuTextBold,"d-hl":l.displayHighlight,"hl-color":l.highlightColor,onChildClick:r,onLabelClick:o},null,8,["nav-id","nav-accordion-group","menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"])):(e.openBlock(),e.createBlock(V,{key:0,"menu-item":h,"as-link":l.menuItemAsLink,"text-color":l.menuTextColor,"text-size":l.menuTextSize,"font-bold":l.menuTextBold,"d-hl":l.displayHighlight,"hl-color":l.highlightColor,onMenuClick:r},null,8,["menu-item","as-link","text-color","text-size","font-bold","d-hl","hl-color"]))]))),128))])]),e.unref(f)["mobile-bottom"]?(e.openBlock(),e.createElementBlock("div",xe,[e.renderSlot(l.$slots,"mobile-bottom",{headerClose:s})])):e.createCommentVNode("",!0)])]),_:3},8,["bg-color","drawer-btn-color","drawer-btn-border","header-width"]))}});L.MclHeaderA=ae,L.MclHeaderB=Ie,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@bobbykim/mcl-header",
-  "version": "0.5.0",
-  "description": "",
+  "version": "0.6.0",
+  "description": "header components based on manguito theme",
   "type": "module",
-  "main": "index.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/mcl-header.umd.cjs",
+  "module": "./dist/mcl-header.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mcl-header.js",
+      "require": "./dist/mcl-header.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
+    "build": "vite build"
   },
   "author": {
     "name": "Bobby Kim",
@@ -21,7 +33,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "^0.17.0"
+    "@bobbykim/manguito-theme": "0.19.0",
+    "vue": "^3.3.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vue-tsc": "^1.8.25"
   },
-  "gitHead": "f4be01699f747aba1f831a1f796f8e41e6fcd676"
+  "gitHead": "b66ad8b5fabf32c0814726f0847ce86399b4115b"
 }

package/CHANGELOG.md

@@ -1,67 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-header@0.3.0...@bobbykim/mcl-header@0.5.0) (2024-03-24)
-
-
-### Features
-
-* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
-* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
-* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
-* **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
-* **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
-* **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
-* **mcl-header-b:** finalize mcl-header-a component ([4a6a627](https://github.com/bobbykim89/manguito-component-library/commit/4a6a6273e6675f8ddbd3a94b0fa21ad06ac7dcad))
-* **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
-* **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
-* **mcl-header:** code refactor ([a761b16](https://github.com/bobbykim89/manguito-component-library/commit/a761b16dbad92a680775fcf46692f02ac026d605))
-* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-header@0.3.0...@bobbykim/mcl-header@0.4.0) (2024-03-21)
-
-
-### Features
-
-* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
-* **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
-* **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
-* **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
-* **mcl-header-b:** finalize mcl-header-a component ([4a6a627](https://github.com/bobbykim89/manguito-component-library/commit/4a6a6273e6675f8ddbd3a94b0fa21ad06ac7dcad))
-* **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
-* **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
-* **mcl-header:** code refactor ([a761b16](https://github.com/bobbykim89/manguito-component-library/commit/a761b16dbad92a680775fcf46692f02ac026d605))
-* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-header@0.2.0...@bobbykim/mcl-header@0.3.0) (2024-02-27)
-
-
-### Features
-
-* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
-
-
-
-
-
-# 0.2.0 (2024-02-27)
-
-
-### Features
-
-* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
-* **mcl-container:** add mcl-container-b with story page ([95b522d](https://github.com/bobbykim89/manguito-component-library/commit/95b522d61a9a86422c5fbb8105a27a3957d453ac))
-* **mcl-header:** init mcl-header package and add mcl-header-a component ([29fe8d7](https://github.com/bobbykim89/manguito-component-library/commit/29fe8d7b62bed93d307f340e9a378f1dfe58a03a))
-* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))

package/index.d.ts

@@ -1,4 +0,0 @@
-import MclHeaderA from './lib/mcl-header-a/MclHeaderA.vue';
-import MclHeaderB from './lib/mcl-header-b/MclHeaderB.vue';
-export * from './lib/common/index.types';
-export { MclHeaderA, MclHeaderB };

package/index.js

@@ -1,4 +0,0 @@
-import MclHeaderA from './lib/mcl-header-a/MclHeaderA.vue';
-import MclHeaderB from './lib/mcl-header-b/MclHeaderB.vue';
-export * from './lib/common/index.types';
-export { MclHeaderA, MclHeaderB };

package/index.ts

@@ -1,5 +0,0 @@
-import MclHeaderA from './lib/mcl-header-a/MclHeaderA.vue'
-import MclHeaderB from './lib/mcl-header-b/MclHeaderB.vue'
-export * from './lib/common/index.types'
-
-export { MclHeaderA, MclHeaderB }

package/lib/common/index.types.d.ts

@@ -1,10 +0,0 @@
-import type { CtaTarget } from '@bobbykim/manguito-theme';
-export interface MenuItemType {
-    title: string;
-    url: string;
-    target?: CtaTarget;
-}
-export interface MenuCollapseType {
-    title: string;
-    children: MenuItemType[];
-}

package/lib/common/index.types.js

@@ -1 +0,0 @@
-export {};

package/lib/common/index.types.ts

@@ -1,12 +0,0 @@
-import type { CtaTarget } from '@bobbykim/manguito-theme'
-
-export interface MenuItemType {
-  title: string
-  url: string
-  target?: CtaTarget
-}
-
-export interface MenuCollapseType {
-  title: string
-  children: MenuItemType[]
-}

package/lib/mcl-header-a/MclHeaderA.vue

@@ -1,251 +0,0 @@
-<script setup lang="ts">
-import type {
-  BodyText,
-  ColorPalette,
-  CtaTarget,
-  HeadingSize,
-} from '@bobbykim/manguito-theme'
-import generateClass, { HeaderHorizontal } from '@bobbykim/manguito-theme'
-import { ref } from 'vue'
-import type { MenuCollapseType, MenuItemType } from '../common/index.types'
-import NavCollapse from './NavCollapse.vue'
-import NavDropdown from './NavDropdown.vue'
-import NavLink from './NavLink.vue'
-
-const props = withDefaults(
-  defineProps<{
-    logo: string
-    logoSmall?: string
-    logoAlt?: string
-    title: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    titleBlockAsLink?: boolean
-    titleBlockLinkTarget?: CtaTarget
-    titleBlockLink: string
-    menuItems: Array<MenuItemType | MenuCollapseType>
-    menuItemAsLink?: boolean
-    menuTextSize?: BodyText
-    menuTextColor?: ColorPalette
-    menuTextBold?: boolean
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    bgColor?: ColorPalette
-    mobileMenuBgColor?: ColorPalette
-    drawerBtnColor?: ColorPalette
-    drawerBtnBorder?: boolean
-    fadeInOnScroll?: boolean
-    scrollDistance?: number
-  }>(),
-  {
-    logoAlt: '',
-    titleSize: 'md',
-    titleColor: 'dark-3',
-    titleBlockAsLink: false,
-    titleBlockLinkTarget: '_self',
-    menuItemAsLink: false,
-    menuTextSize: 'md',
-    menuTextColor: 'dark-3',
-    menuTextBold: false,
-    displayHighlight: true,
-    highlightColor: 'primary',
-    bgColor: 'light-1',
-    mobileMenuBgColor: 'light-2',
-    drawerBtnColor: 'dark-1',
-    drawerBtnBorder: true,
-    fadeInOnScroll: true,
-    scrollDistance: 50,
-  }
-)
-
-const componentRef = ref<InstanceType<typeof HeaderHorizontal>>()
-const slots = defineSlots<{
-  'content-right': any
-  'mobile-bottom'(props: { headerClose: () => void }): any
-}>()
-const emit = defineEmits<{
-  (e: 'toggle-drawer', event: Event, open: boolean): void
-  (e: 'title-click', event: Event, url: string, target: CtaTarget): void
-  (e: 'menu-click', event: Event, item: MenuItemType): void
-  (e: 'collapse-click', event: Event, title: string, visible: boolean): void
-}>()
-
-const closeNav = (): void => {
-  componentRef.value?.headerClose()
-}
-
-const handleTitleClick = (e: Event): void => {
-  const { titleBlockAsLink, titleBlockLink, titleBlockLinkTarget } = props
-  if (!titleBlockAsLink) {
-    e.preventDefault()
-  }
-  emit('title-click', e, titleBlockLink, titleBlockLinkTarget)
-  closeNav()
-}
-const handleMenuItemClick = (e: Event, item: MenuItemType): void => {
-  const { menuItemAsLink } = props
-  if (!menuItemAsLink) {
-    e.preventDefault()
-  }
-  emit('menu-click', e, item)
-  closeNav()
-}
-const handleCollapsableMenuClick = (
-  e: Event,
-  title: string,
-  visible: boolean
-) => {
-  emit('collapse-click', e, title, visible)
-}
-
-const getTitleClass = (size: HeadingSize, color: ColorPalette): string => {
-  /**
-   * @param {HeadingSize} size - titleSize
-   * @param {ColorPalette} color - titleColor
-   */
-  const classArray: string[] = [
-    generateClass('H2', size),
-    generateClass('TEXTCOLOR', color),
-  ]
-  return classArray.join(' ')
-}
-
-const hasChildren = (item: MenuItemType | MenuCollapseType) => {
-  const NavCollapse = item as MenuCollapseType
-  if (typeof NavCollapse.children === 'undefined') {
-    return false
-  }
-  return NavCollapse.children.length > 0
-}
-
-defineExpose({
-  headerClose: closeNav,
-})
-</script>
-
-<template>
-  <HeaderHorizontal
-    ref="componentRef"
-    :bg-color="bgColor"
-    :drawer-btn-border="drawerBtnBorder"
-    :drawer-btn-color="drawerBtnColor"
-    :fade-in-on-scroll="fadeInOnScroll"
-    :mobile-menu-bg-color="mobileMenuBgColor"
-  >
-    <template #content>
-      <div class="flex flex-shrink-0 items-center self-center">
-        <div class="h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle">
-          <a
-            :href="titleBlockLink"
-            :target="titleBlockLinkTarget"
-            @click="handleTitleClick"
-          >
-            <img
-              :src="logo"
-              :alt="logoAlt"
-              class="h-full"
-              :class="[logoSmall ? 'hidden lg:inline-block' : 'inline-block']"
-            />
-            <img
-              v-if="logoSmall"
-              :src="logoSmall"
-              :alt="logoAlt"
-              class="inline-block lg:hidden h-full"
-            />
-          </a>
-        </div>
-        <div class="flex flex-col justify-center ml-2">
-          <a
-            :href="titleBlockLink"
-            :target="titleBlockLinkTarget"
-            @click="handleTitleClick"
-          >
-            <h2
-              class="inline-block align-middle tracking-wider"
-              :class="getTitleClass(titleSize, titleColor)"
-              v-html="title"
-            ></h2>
-          </a>
-          <!-- desktop nav menu -->
-          <ul class="hidden lg:flex flex-wrap">
-            <li
-              class="mr-xs last:mr-0"
-              v-for="(item, index) in menuItems"
-              :key="`menu-${index}`"
-            >
-              <nav-link
-                v-if="!hasChildren(item)"
-                :nav-item="(item as MenuItemType)"
-                :menu-text-color="menuTextColor"
-                :menu-text-size="menuTextSize"
-                :menu-text-bold="menuTextBold"
-                :display-highlight="displayHighlight"
-                :highlight-color="highlightColor"
-                :as-link="menuItemAsLink"
-                @nav-link="handleMenuItemClick"
-              ></nav-link>
-              <nav-dropdown
-                v-else
-                :nav-item="(item as MenuCollapseType)"
-                :menu-text-color="menuTextColor"
-                :menu-text-size="menuTextSize"
-                :menu-text-bold="menuTextBold"
-                :display-highlight="displayHighlight"
-                :highlight-color="highlightColor"
-                :bg-color="bgColor"
-                :as-link="menuItemAsLink"
-                @child-click="handleMenuItemClick"
-                @label-click="handleCollapsableMenuClick"
-              ></nav-dropdown>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </template>
-    <template #content-right>
-      <div v-if="slots['content-right']" class="hidden lg:block">
-        <slot name="content-right"></slot>
-      </div>
-    </template>
-    <template #mobile-content="{ headerClose }">
-      <div>
-        <ul class="flex flex-col items-center justify-center p-xs">
-          <li
-            class="mb-2xs last:mb-0"
-            v-for="(item, index) in menuItems"
-            :key="`mobile-${index}`"
-          >
-            <nav-link
-              v-if="!hasChildren(item)"
-              :nav-item="(item as MenuItemType)"
-              :menu-text-color="menuTextColor"
-              :menu-text-size="menuTextSize"
-              :menu-text-bold="menuTextBold"
-              :display-highlight="displayHighlight"
-              :highlight-color="highlightColor"
-              :as-link="menuItemAsLink"
-              @nav-link="handleMenuItemClick"
-            ></nav-link>
-            <nav-collapse
-              v-else
-              :nav-id="item.title"
-              :nav-item="(item as MenuCollapseType)"
-              :menu-text-color="menuTextColor"
-              :menu-text-size="menuTextSize"
-              :menu-text-bold="menuTextBold"
-              :display-highlight="displayHighlight"
-              :highlight-color="highlightColor"
-              :nav-accordion-group="title"
-              :as-link="menuItemAsLink"
-              @child-click="handleMenuItemClick"
-              @label-click="handleCollapsableMenuClick"
-            ></nav-collapse>
-          </li>
-        </ul>
-        <div v-if="slots['mobile-bottom']">
-          <slot name="mobile-bottom" :header-close="closeNav"></slot>
-        </div>
-      </div>
-    </template>
-  </HeaderHorizontal>
-</template>

package/lib/mcl-header-a/MclHeaderA.vue.d.ts

@@ -1,148 +0,0 @@
-import type { BodyText, ColorPalette, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType, MenuItemType } from '../common/index.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    logo: string;
-    logoSmall?: string | undefined;
-    logoAlt?: string | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    titleBlockAsLink?: boolean | undefined;
-    titleBlockLinkTarget?: CtaTarget | undefined;
-    titleBlockLink: string;
-    menuItems: (MenuItemType | MenuCollapseType)[];
-    menuItemAsLink?: boolean | undefined;
-    menuTextSize?: BodyText | undefined;
-    menuTextColor?: ColorPalette | undefined;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    mobileMenuBgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    fadeInOnScroll?: boolean | undefined;
-    scrollDistance?: number | undefined;
-}>, {
-    logoAlt: string;
-    titleSize: string;
-    titleColor: string;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: string;
-    menuItemAsLink: boolean;
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    bgColor: string;
-    mobileMenuBgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-}>, {
-    headerClose: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "toggle-drawer": (event: Event, open: boolean) => void;
-    "title-click": (event: Event, url: string, target: CtaTarget) => void;
-    "menu-click": (event: Event, item: MenuItemType) => void;
-    "collapse-click": (event: Event, title: string, visible: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    logo: string;
-    logoSmall?: string | undefined;
-    logoAlt?: string | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    titleBlockAsLink?: boolean | undefined;
-    titleBlockLinkTarget?: CtaTarget | undefined;
-    titleBlockLink: string;
-    menuItems: (MenuItemType | MenuCollapseType)[];
-    menuItemAsLink?: boolean | undefined;
-    menuTextSize?: BodyText | undefined;
-    menuTextColor?: ColorPalette | undefined;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    mobileMenuBgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    fadeInOnScroll?: boolean | undefined;
-    scrollDistance?: number | undefined;
-}>, {
-    logoAlt: string;
-    titleSize: string;
-    titleColor: string;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: string;
-    menuItemAsLink: boolean;
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    bgColor: string;
-    mobileMenuBgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-}>>> & {
-    "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-    "onTitle-click"?: ((event: Event, url: string, target: CtaTarget) => any) | undefined;
-    "onMenu-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
-    "onCollapse-click"?: ((event: Event, title: string, visible: boolean) => any) | undefined;
-}, {
-    bgColor: ColorPalette;
-    mobileMenuBgColor: ColorPalette;
-    drawerBtnColor: ColorPalette;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-    titleColor: ColorPalette;
-    menuTextSize: BodyText;
-    menuTextColor: ColorPalette;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    logoAlt: string;
-    titleSize: HeadingSize;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: CtaTarget;
-    menuItemAsLink: boolean;
-}, {}>, Readonly<{
-    'content-right': any;
-    'mobile-bottom'(props: {
-        headerClose: () => void;
-    }): any;
-}> & {
-    'content-right': any;
-    'mobile-bottom'(props: {
-        headerClose: () => void;
-    }): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};