@bobbykim/mcl-header 0.3.0 → 0.5.0

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

@@ -1,18 +1,15 @@
 import type { BodyText, ColorPalette, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType, MenuItemType } from './index.types';
+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;
-    logoAsLink?: boolean | undefined;
-    logoLink: string;
-    logoLinkTarget?: CtaTarget | undefined;
     title: string;
     titleSize?: HeadingSize | undefined;
     titleColor?: ColorPalette | undefined;
-    titleAsLink?: boolean | undefined;
-    titleLink: string;
-    titleLinkTarget?: CtaTarget | undefined;
+    titleBlockAsLink?: boolean | undefined;
+    titleBlockLinkTarget?: CtaTarget | undefined;
+    titleBlockLink: string;
     menuItems: (MenuItemType | MenuCollapseType)[];
     menuItemAsLink?: boolean | undefined;
     menuTextSize?: BodyText | undefined;
@@ -22,17 +19,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightColor?: ColorPalette | undefined;
     bgColor?: ColorPalette | undefined;
     mobileMenuBgColor?: ColorPalette | undefined;
-    secondaryColor?: ColorPalette | undefined;
-    hamburgerBorder?: boolean | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
     fadeInOnScroll?: boolean | undefined;
     scrollDistance?: number | undefined;
 }>, {
-    logoAsLink: boolean;
-    logoLinkTarget: string;
+    logoAlt: string;
     titleSize: string;
     titleColor: string;
-    titleAsLink: boolean;
-    titleLinkTarget: string;
+    titleBlockAsLink: boolean;
+    titleBlockLinkTarget: string;
     menuItemAsLink: boolean;
     menuTextSize: string;
     menuTextColor: string;
@@ -41,28 +37,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightColor: string;
     bgColor: string;
     mobileMenuBgColor: string;
-    secondaryColor: string;
-    hamburgerBorder: boolean;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
     fadeInOnScroll: boolean;
     scrollDistance: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "toggle-menu": (...args: any[]) => void;
-    "menu-click": (...args: any[]) => void;
-    "title-click": (...args: any[]) => void;
-    "logo-click": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    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;
-    logoAsLink?: boolean | undefined;
-    logoLink: string;
-    logoLinkTarget?: CtaTarget | undefined;
     title: string;
     titleSize?: HeadingSize | undefined;
     titleColor?: ColorPalette | undefined;
-    titleAsLink?: boolean | undefined;
-    titleLink: string;
-    titleLinkTarget?: CtaTarget | undefined;
+    titleBlockAsLink?: boolean | undefined;
+    titleBlockLinkTarget?: CtaTarget | undefined;
+    titleBlockLink: string;
     menuItems: (MenuItemType | MenuCollapseType)[];
     menuItemAsLink?: boolean | undefined;
     menuTextSize?: BodyText | undefined;
@@ -72,17 +67,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightColor?: ColorPalette | undefined;
     bgColor?: ColorPalette | undefined;
     mobileMenuBgColor?: ColorPalette | undefined;
-    secondaryColor?: ColorPalette | undefined;
-    hamburgerBorder?: boolean | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
     fadeInOnScroll?: boolean | undefined;
     scrollDistance?: number | undefined;
 }>, {
-    logoAsLink: boolean;
-    logoLinkTarget: string;
+    logoAlt: string;
     titleSize: string;
     titleColor: string;
-    titleAsLink: boolean;
-    titleLinkTarget: string;
+    titleBlockAsLink: boolean;
+    titleBlockLinkTarget: string;
     menuItemAsLink: boolean;
     menuTextSize: string;
     menuTextColor: string;
@@ -91,38 +85,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     highlightColor: string;
     bgColor: string;
     mobileMenuBgColor: string;
-    secondaryColor: string;
-    hamburgerBorder: boolean;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
     fadeInOnScroll: boolean;
     scrollDistance: number;
 }>>> & {
-    "onToggle-menu"?: ((...args: any[]) => any) | undefined;
-    "onMenu-click"?: ((...args: any[]) => any) | undefined;
-    "onTitle-click"?: ((...args: any[]) => any) | undefined;
-    "onLogo-click"?: ((...args: any[]) => any) | undefined;
+    "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;
 }, {
-    titleColor: ColorPalette;
     bgColor: ColorPalette;
+    mobileMenuBgColor: ColorPalette;
+    drawerBtnColor: ColorPalette;
+    drawerBtnBorder: boolean;
+    fadeInOnScroll: boolean;
+    scrollDistance: number;
+    titleColor: ColorPalette;
     menuTextSize: BodyText;
     menuTextColor: ColorPalette;
     menuTextBold: boolean;
     displayHighlight: boolean;
     highlightColor: ColorPalette;
-    logoAsLink: boolean;
-    logoLinkTarget: CtaTarget;
+    logoAlt: string;
     titleSize: HeadingSize;
-    titleAsLink: boolean;
-    titleLinkTarget: CtaTarget;
+    titleBlockAsLink: boolean;
+    titleBlockLinkTarget: CtaTarget;
     menuItemAsLink: boolean;
-    mobileMenuBgColor: ColorPalette;
-    secondaryColor: ColorPalette;
-    hamburgerBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-}, {}>, {
-    "nav-slot"?(_: {}): any;
-    "mobile-slot"?(_: {
-        closeNav: () => void;
+}, {}>, Readonly<{
+    'content-right': any;
+    'mobile-bottom'(props: {
+        headerClose: () => void;
+    }): any;
+}> & {
+    'content-right': any;
+    'mobile-bottom'(props: {
+        headerClose: () => void;
     }): any;
 }>;
 export default _default;

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

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import type {
-  BodyText,
-  CollapseEvent,
-  ColorPalette,
-} from '@bobbykim/manguito-theme'
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
 import generateClass, { Collapse, vCollapse } from '@bobbykim/manguito-theme'
 import { computed, ref } from 'vue'
-import type {
-  MenuCollapseType,
-  MenuItemType,
-  NavChildClickEventType,
-} from './index.types'
+import type { MenuCollapseType, MenuItemType } from '../common/index.types'
 
 const props = withDefaults(
   defineProps<{
@@ -38,34 +30,33 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['nav-link'])
+const emit = defineEmits<{
+  (e: 'child-click', event: Event, item: MenuItemType): void
+  (e: 'label-click', event: Event, title: string, open: boolean): void
+}>()
 const toggle = ref<boolean>(false)
 const handleNavId = computed<string>(() => {
   const { navId } = props
   const navLower = navId.toLowerCase()
-  // @ts-ignore: Unreachable code error
   const navKebab = navLower.replaceAll(' ', '-')
   return `nav-${navKebab}`
 })
 const handleNavAccordionGroupName = computed<string>(() => {
   const { navAccordionGroup } = props
   const toLowerCase = navAccordionGroup.toLocaleLowerCase()
-  // @ts-ignore: Unreachable code error
   const toKebabCase = toLowerCase.replaceAll(' ', '-')
   return `accordion-${toKebabCase}`
 })
-const toggleAction = (e: CollapseEvent): void => {
-  toggle.value = e.visible
-  //   emit('nav-link', { event: e, title: props.navItem.title })
+const toggleAction = (visible: boolean): void => {
+  toggle.value = visible
+}
+const handleCollapseLabelClick = (e: Event, title: string) => {
+  emit('label-click', e, title, toggle.value)
 }
 const navItemClick = (e: Event, item: MenuItemType) => {
   const { asLink } = props
   !asLink && e.preventDefault()
-  const customEvent: NavChildClickEventType = {
-    event: e,
-    item,
-  }
-  emit('nav-link', customEvent)
+  emit('child-click', e, item)
 }
 const getMenuItemClass = (
   size: BodyText,
@@ -95,6 +86,7 @@ const getMenuItemClass = (
         class="tracking-wider align-middle outline-none nav__text flex items-center gap-3xs"
         :class="getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)"
         v-collapse:[handleNavId]
+        @click=""
       >
         <span>
           {{ navItem.title }}

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

@@ -1,5 +1,5 @@
 import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType } from './index.types';
+import type { MenuCollapseType, MenuItemType } from '../common/index.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navId: string;
     navAccordionGroup: string;
@@ -22,8 +22,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     highlightColor: string;
     asLink: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "nav-link": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    "child-click": (event: Event, item: MenuItemType) => void;
+    "label-click": (event: Event, title: string, open: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navId: string;
     navAccordionGroup: string;
     navItem: MenuCollapseType;
@@ -45,7 +46,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     highlightColor: string;
     asLink: boolean;
 }>>> & {
-    "onNav-link"?: ((...args: any[]) => any) | undefined;
+    "onChild-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
+    "onLabel-click"?: ((event: Event, title: string, open: boolean) => any) | undefined;
 }, {
     bgColor: ColorPalette;
     hoverBgColor: ColorPalette;

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

@@ -5,17 +5,12 @@ import generateClass, {
   DropdownContent,
 } from '@bobbykim/manguito-theme'
 import { ref } from 'vue'
-import type {
-  MenuCollapseType,
-  MenuItemType,
-  NavChildClickEventType,
-} from './index.types'
+import type { MenuCollapseType, MenuItemType } from '../common/index.types'
 
 const props = withDefaults(
   defineProps<{
     navItem: MenuCollapseType
     bgColor?: ColorPalette
-    hoverBgColor?: ColorPalette
     menuTextSize?: BodyText
     menuTextColor?: ColorPalette
     menuTextBold?: boolean
@@ -26,7 +21,6 @@ const props = withDefaults(
   {
     menuTextSize: 'md',
     bgColor: 'light-1',
-    hoverBgColor: 'dark-1',
     menuTextColor: 'dark-3',
     menuTextBold: false,
     displayHighlight: true,
@@ -35,7 +29,10 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['nav-link'])
+const emit = defineEmits<{
+  (e: 'label-click', event: Event, title: string, open: boolean): void
+  (e: 'child-click', event: Event, item: MenuItemType): void
+}>()
 const navIndexRef = ref<number>(-1)
 const navItemRef = ref<HTMLButtonElement[]>()
 
@@ -72,18 +69,15 @@ const navKeyUp = (direction: KeyDirection): void => {
   }
   navItemRef.value[navIndexRef.value].focus()
 }
-const dropdownButtonClick = (e: Event): void => {
+const dropdownButtonClick = (e: Event, title: string, state: boolean): void => {
   // resets index
   navIndexRef.value = -1
+  emit('label-click', e, title, state)
 }
 const navItemClick = (e: Event, item: MenuItemType) => {
   const { asLink } = props
   !asLink && e.preventDefault()
-  const customEvent: NavChildClickEventType = {
-    event: e,
-    item,
-  }
-  emit('nav-link', customEvent)
+  emit('child-click', e, item)
 }
 </script>
 
@@ -95,7 +89,10 @@ const navItemClick = (e: Event, item: MenuItemType) => {
           <button
             class="tracking-wider align-middle outline-none nav__text flex items-center gap-3xs"
             :class="getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)"
-            @click="toggle($event), dropdownButtonClick($event)"
+            @click="
+              toggle($event),
+                dropdownButtonClick($event, navItem.title, dropdownState)
+            "
           >
             <span>
               {{ navItem.title }}
@@ -132,11 +129,11 @@ const navItemClick = (e: Event, item: MenuItemType) => {
           :target="item.target"
           :key="idx"
           ref="navItemRef"
-          class="px-xs py-2xs block w-full hover:bg-opacity-50 focus:bg-opacity-50"
+          class="px-xs py-2xs block w-full hover:bg-opacity-50 focus:bg-opacity-50 transition-all duration-200 ease-linear"
           :class="[
             generateClass('BGCOLOR', bgColor),
-            generateClass('HVBGCOLOR', hoverBgColor),
-            generateClass('FCBGCOLOR', hoverBgColor),
+            generateClass('HVBGCOLOR', highlightColor),
+            generateClass('FCBGCOLOR', highlightColor),
             generateClass('TEXTCOLOR', menuTextColor),
             generateClass('BODYTEXT', menuTextSize),
           ]"

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

@@ -1,9 +1,8 @@
 import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType } from './index.types';
+import type { MenuCollapseType, MenuItemType } from '../common/index.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navItem: MenuCollapseType;
     bgColor?: ColorPalette | undefined;
-    hoverBgColor?: ColorPalette | undefined;
     menuTextSize?: BodyText | undefined;
     menuTextColor?: ColorPalette | undefined;
     menuTextBold?: boolean | undefined;
@@ -13,18 +12,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     menuTextSize: string;
     bgColor: string;
-    hoverBgColor: string;
     menuTextColor: string;
     menuTextBold: boolean;
     displayHighlight: boolean;
     highlightColor: string;
     asLink: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "nav-link": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    "label-click": (event: Event, title: string, open: boolean) => void;
+    "child-click": (event: Event, item: MenuItemType) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navItem: MenuCollapseType;
     bgColor?: ColorPalette | undefined;
-    hoverBgColor?: ColorPalette | undefined;
     menuTextSize?: BodyText | undefined;
     menuTextColor?: ColorPalette | undefined;
     menuTextBold?: boolean | undefined;
@@ -34,17 +32,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     menuTextSize: string;
     bgColor: string;
-    hoverBgColor: string;
     menuTextColor: string;
     menuTextBold: boolean;
     displayHighlight: boolean;
     highlightColor: string;
     asLink: boolean;
 }>>> & {
-    "onNav-link"?: ((...args: any[]) => any) | undefined;
+    "onChild-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
+    "onLabel-click"?: ((event: Event, title: string, open: boolean) => any) | undefined;
 }, {
     bgColor: ColorPalette;
-    hoverBgColor: ColorPalette;
     menuTextSize: BodyText;
     menuTextColor: ColorPalette;
     menuTextBold: boolean;

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
 import generateClass from '@bobbykim/manguito-theme'
-import type { MenuItemType } from './index.types'
+import type { MenuItemType } from '../common/index.types'
 
 const props = withDefaults(
   defineProps<{
@@ -23,7 +23,9 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['nav-link'])
+const emit = defineEmits<{
+  (e: 'nav-link', event: Event, item: MenuItemType): void
+}>()
 
 const getMenuItemClass = (
   size: BodyText,
@@ -44,10 +46,10 @@ const getMenuItemClass = (
   }
   return classArray.join(' ')
 }
-const handleNavLinkClick = (e: Event) => {
+const handleNavLinkClick = (e: Event, item: MenuItemType) => {
   const { asLink } = props
   !asLink && e.preventDefault()
-  emit('nav-link', e)
+  emit('nav-link', e, item)
 }
 </script>
 
@@ -59,7 +61,7 @@ const handleNavLinkClick = (e: Event) => {
       v-html="navItem.title"
       class="tracking-wider outline-none nav__text"
       :class="getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)"
-      @click="handleNavLinkClick"
+      @click="handleNavLinkClick($event, navItem)"
     ></a>
     <div
       v-if="displayHighlight"

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

@@ -1,5 +1,5 @@
 import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuItemType } from './index.types';
+import type { MenuItemType } from '../common/index.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navItem: MenuItemType;
     menuTextSize?: BodyText | undefined;
@@ -16,8 +16,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     highlightColor: string;
     asLink: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "nav-link": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    "nav-link": (event: Event, item: MenuItemType) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     navItem: MenuItemType;
     menuTextSize?: BodyText | undefined;
     menuTextColor?: ColorPalette | undefined;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     highlightColor: string;
     asLink: boolean;
 }>>> & {
-    "onNav-link"?: ((...args: any[]) => any) | undefined;
+    "onNav-link"?: ((event: Event, item: MenuItemType) => any) | undefined;
 }, {
     menuTextSize: BodyText;
     menuTextColor: ColorPalette;