@bobbykim/mcl-header 0.2.0

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

@@ -0,0 +1,150 @@
+import type { BodyText, ColorPalette, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
+import type { MenuCollapseType, MenuItemType } from './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;
+    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;
+    secondaryColor?: ColorPalette | undefined;
+    hamburgerBorder?: boolean | undefined;
+    fadeInOnScroll?: boolean | undefined;
+    scrollDistance?: number | undefined;
+}>, {
+    logoAsLink: boolean;
+    logoLinkTarget: string;
+    titleSize: string;
+    titleColor: string;
+    titleAsLink: boolean;
+    titleLinkTarget: string;
+    menuItemAsLink: boolean;
+    menuTextSize: string;
+    menuTextColor: string;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    bgColor: string;
+    mobileMenuBgColor: string;
+    secondaryColor: string;
+    hamburgerBorder: 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<{
+    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;
+    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;
+    secondaryColor?: ColorPalette | undefined;
+    hamburgerBorder?: boolean | undefined;
+    fadeInOnScroll?: boolean | undefined;
+    scrollDistance?: number | undefined;
+}>, {
+    logoAsLink: boolean;
+    logoLinkTarget: string;
+    titleSize: string;
+    titleColor: string;
+    titleAsLink: boolean;
+    titleLinkTarget: string;
+    menuItemAsLink: boolean;
+    menuTextSize: string;
+    menuTextColor: string;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    bgColor: string;
+    mobileMenuBgColor: string;
+    secondaryColor: string;
+    hamburgerBorder: 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;
+}, {
+    titleColor: ColorPalette;
+    bgColor: ColorPalette;
+    menuTextSize: BodyText;
+    menuTextColor: ColorPalette;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    logoAsLink: boolean;
+    logoLinkTarget: CtaTarget;
+    titleSize: HeadingSize;
+    titleAsLink: boolean;
+    titleLinkTarget: CtaTarget;
+    menuItemAsLink: boolean;
+    mobileMenuBgColor: ColorPalette;
+    secondaryColor: ColorPalette;
+    hamburgerBorder: boolean;
+    fadeInOnScroll: boolean;
+    scrollDistance: number;
+}, {}>, {
+    "nav-slot"?(_: {}): any;
+    "mobile-slot"?(_: {
+        closeNav: () => 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;
+    };
+};

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type {
+  BodyText,
+  CollapseEvent,
+  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'
+
+const props = withDefaults(
+  defineProps<{
+    navId: string
+    navAccordionGroup: string
+    navItem: MenuCollapseType
+    bgColor?: ColorPalette
+    hoverBgColor?: ColorPalette
+    menuTextSize?: BodyText
+    menuTextColor?: ColorPalette
+    menuTextBold?: boolean
+    displayHighlight?: boolean
+    highlightColor?: ColorPalette
+    asLink?: boolean
+  }>(),
+  {
+    menuTextSize: 'md',
+    bgColor: 'light-2',
+    hoverBgColor: 'dark-1',
+    menuTextColor: 'dark-3',
+    menuTextBold: false,
+    displayHighlight: true,
+    highlightColor: 'primary',
+    asLink: true,
+  }
+)
+
+const emit = defineEmits(['nav-link'])
+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 navItemClick = (e: Event, item: MenuItemType) => {
+  const { asLink } = props
+  !asLink && e.preventDefault()
+  const customEvent: NavChildClickEventType = {
+    event: e,
+    item,
+  }
+  emit('nav-link', customEvent)
+}
+const getMenuItemClass = (
+  size: BodyText,
+  color: ColorPalette,
+  bold: boolean
+): string => {
+  /**
+   * @param {BodyText} size - menuTextSize
+   * @param {ColorPalette} color - menuTextColor
+   * @param {boolean} bold - menuTextBold
+   */
+  const classArray: string[] = [
+    generateClass('BODYTEXT', size),
+    generateClass('TEXTCOLOR', color),
+  ]
+  if (bold) {
+    classArray.push('font-bold')
+  }
+  return classArray.join(' ')
+}
+</script>
+
+<template>
+  <div class="flex flex-col w-full">
+    <div class="self-center">
+      <button
+        class="tracking-wider align-middle outline-none nav__text flex items-center gap-3xs"
+        :class="getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)"
+        v-collapse:[handleNavId]
+      >
+        <span>
+          {{ navItem.title }}
+        </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+          class="h-[0.8rem] fill-current"
+          :class="[
+            toggle ? 'rotate-180' : 'rotate-0',
+            'transition-transform duration-300 ease-in',
+          ]"
+        >
+          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+          <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"
+          />
+        </svg>
+      </button>
+      <div
+        v-if="displayHighlight"
+        class="relative -top-[2px] h-[6px] nav__decorator"
+        :class="generateClass('BEFOREBG', highlightColor)"
+      ></div>
+    </div>
+    <collapse
+      :id="handleNavId"
+      :visible="false"
+      :accordion="handleNavAccordionGroupName"
+      @open="toggleAction"
+      @close="toggleAction"
+    >
+      <div class="relative pt-2xs">
+        <div
+          v-if="displayHighlight"
+          class="absolute w-md bg-opacity-25 -left-4 h-full"
+          :class="generateClass('BGCOLOR', highlightColor)"
+        ></div>
+        <div class="relative flex flex-col">
+          <a
+            v-for="(item, idx) in navItem.children"
+            :href="item.url"
+            :target="item.target"
+            class="w-full pb-2xs last:pb-0"
+            :key="idx"
+            :class="[
+              generateClass('TEXTCOLOR', menuTextColor),
+              generateClass('BODYTEXT', menuTextSize),
+            ]"
+            @click="navItemClick($event, item)"
+          >
+            {{ item.title }}
+          </a>
+        </div>
+      </div>
+    </collapse>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav__decorator {
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    transition: width 0.3s linear;
+  }
+}
+.nav__text:focus + .nav__decorator::before,
+.nav__text:hover + .nav__decorator::before {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,76 @@
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
+import type { MenuCollapseType } from './index.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    navId: string;
+    navAccordionGroup: string;
+    navItem: MenuCollapseType;
+    bgColor?: ColorPalette | undefined;
+    hoverBgColor?: ColorPalette | undefined;
+    menuTextSize?: BodyText | undefined;
+    menuTextColor?: ColorPalette | undefined;
+    menuTextBold?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    asLink?: boolean | undefined;
+}>, {
+    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<{
+    navId: string;
+    navAccordionGroup: string;
+    navItem: MenuCollapseType;
+    bgColor?: ColorPalette | undefined;
+    hoverBgColor?: ColorPalette | undefined;
+    menuTextSize?: BodyText | undefined;
+    menuTextColor?: ColorPalette | undefined;
+    menuTextBold?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    asLink?: boolean | undefined;
+}>, {
+    menuTextSize: string;
+    bgColor: string;
+    hoverBgColor: string;
+    menuTextColor: string;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    asLink: boolean;
+}>>> & {
+    "onNav-link"?: ((...args: any[]) => any) | undefined;
+}, {
+    bgColor: ColorPalette;
+    hoverBgColor: ColorPalette;
+    menuTextSize: BodyText;
+    menuTextColor: ColorPalette;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    asLink: boolean;
+}, {}>;
+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];
+} & {};

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass, {
+  DropdownContainer,
+  DropdownContent,
+} from '@bobbykim/manguito-theme'
+import { ref } from 'vue'
+import type {
+  MenuCollapseType,
+  MenuItemType,
+  NavChildClickEventType,
+} from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    navItem: MenuCollapseType
+    bgColor?: ColorPalette
+    hoverBgColor?: ColorPalette
+    menuTextSize?: BodyText
+    menuTextColor?: ColorPalette
+    menuTextBold?: boolean
+    displayHighlight?: boolean
+    highlightColor?: ColorPalette
+    asLink?: boolean
+  }>(),
+  {
+    menuTextSize: 'md',
+    bgColor: 'light-1',
+    hoverBgColor: 'dark-1',
+    menuTextColor: 'dark-3',
+    menuTextBold: false,
+    displayHighlight: true,
+    highlightColor: 'primary',
+    asLink: true,
+  }
+)
+
+const emit = defineEmits(['nav-link'])
+const navIndexRef = ref<number>(-1)
+const navItemRef = ref<HTMLButtonElement[]>()
+
+const getMenuItemClass = (
+  size: BodyText,
+  color: ColorPalette,
+  bold: boolean
+): string => {
+  /**
+   * @param {BodyText} size - menuTextSize
+   * @param {ColorPalette} color - menuTextColor
+   * @param {boolean} bold - menuTextBold
+   */
+  const classArray: string[] = [
+    generateClass('BODYTEXT', size),
+    generateClass('TEXTCOLOR', color),
+  ]
+  if (bold) {
+    classArray.push('font-bold')
+  }
+  return classArray.join(' ')
+}
+type KeyDirection = 'up' | 'down'
+const navKeyUp = (direction: KeyDirection): void => {
+  const itemLength: number = props.navItem.children.length
+  if (navItemRef.value === undefined) {
+    return
+  }
+  if (direction === 'down' && navIndexRef.value < itemLength - 1) {
+    navIndexRef.value++
+  }
+  if (direction === 'up' && navIndexRef.value > 0) {
+    navIndexRef.value--
+  }
+  navItemRef.value[navIndexRef.value].focus()
+}
+const dropdownButtonClick = (e: Event): void => {
+  // resets index
+  navIndexRef.value = -1
+}
+const navItemClick = (e: Event, item: MenuItemType) => {
+  const { asLink } = props
+  !asLink && e.preventDefault()
+  const customEvent: NavChildClickEventType = {
+    event: e,
+    item,
+  }
+  emit('nav-link', customEvent)
+}
+</script>
+
+<template>
+  <div @keyup.down="navKeyUp('down')" @keyup.up="navKeyUp('up')">
+    <dropdown-container>
+      <template #toggler="{ toggle, dropdownState }">
+        <div>
+          <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)"
+          >
+            <span>
+              {{ navItem.title }}
+            </span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              class="h-[0.8rem] fill-current"
+              :class="[
+                dropdownState ? 'rotate-180' : 'rotate-0',
+                'transition-transform duration-300 ease-in',
+              ]"
+            >
+              <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+              <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"
+              />
+            </svg>
+          </button>
+          <div
+            v-if="displayHighlight"
+            class="relative -top-[2px] h-[6px] nav__decorator"
+            :class="generateClass('BEFOREBG', highlightColor)"
+          ></div>
+        </div>
+      </template>
+      <dropdown-content
+        v-slot="{ itemClick }"
+        className="border drop-shadow-sm"
+      >
+        <a
+          v-for="(item, idx) in navItem.children"
+          :href="item.url"
+          :target="item.target"
+          :key="idx"
+          ref="navItemRef"
+          class="px-xs py-2xs block w-full hover:bg-opacity-50 focus:bg-opacity-50"
+          :class="[
+            generateClass('BGCOLOR', bgColor),
+            generateClass('HVBGCOLOR', hoverBgColor),
+            generateClass('FCBGCOLOR', hoverBgColor),
+            generateClass('TEXTCOLOR', menuTextColor),
+            generateClass('BODYTEXT', menuTextSize),
+          ]"
+          @click="itemClick(), navItemClick($event, item)"
+        >
+          {{ item.title }}
+        </a>
+      </dropdown-content>
+    </dropdown-container>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav__decorator {
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    transition: width 0.3s linear;
+  }
+}
+.nav__text:focus + .nav__decorator::before,
+.nav__text:hover + .nav__decorator::before {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,72 @@
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
+import type { MenuCollapseType } from './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;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    asLink?: boolean | undefined;
+}>, {
+    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<{
+    navItem: MenuCollapseType;
+    bgColor?: ColorPalette | undefined;
+    hoverBgColor?: ColorPalette | undefined;
+    menuTextSize?: BodyText | undefined;
+    menuTextColor?: ColorPalette | undefined;
+    menuTextBold?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    asLink?: boolean | undefined;
+}>, {
+    menuTextSize: string;
+    bgColor: string;
+    hoverBgColor: string;
+    menuTextColor: string;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    asLink: boolean;
+}>>> & {
+    "onNav-link"?: ((...args: any[]) => any) | undefined;
+}, {
+    bgColor: ColorPalette;
+    hoverBgColor: ColorPalette;
+    menuTextSize: BodyText;
+    menuTextColor: ColorPalette;
+    menuTextBold: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    asLink: boolean;
+}, {}>;
+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];
+} & {};