@bobbykim/mcl-header 0.5.0 → 0.6.0

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

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-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 } from '../common/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<{
-  (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()
-  const navKebab = navLower.replaceAll(' ', '-')
-  return `nav-${navKebab}`
-})
-const handleNavAccordionGroupName = computed<string>(() => {
-  const { navAccordionGroup } = props
-  const toLowerCase = navAccordionGroup.toLocaleLowerCase()
-  const toKebabCase = toLowerCase.replaceAll(' ', '-')
-  return `accordion-${toKebabCase}`
-})
-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()
-  emit('child-click', e, item)
-}
-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]
-        @click=""
-      >
-        <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

@@ -1,78 +0,0 @@
-import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType, MenuItemType } from '../common/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, {
-    "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;
-    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;
-}>>> & {
-    "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;
-    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

@@ -1,165 +0,0 @@
-<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 } from '../common/index.types'
-
-const props = withDefaults(
-  defineProps<{
-    navItem: MenuCollapseType
-    bgColor?: ColorPalette
-    menuTextSize?: BodyText
-    menuTextColor?: ColorPalette
-    menuTextBold?: boolean
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    asLink?: boolean
-  }>(),
-  {
-    menuTextSize: 'md',
-    bgColor: 'light-1',
-    menuTextColor: 'dark-3',
-    menuTextBold: false,
-    displayHighlight: true,
-    highlightColor: 'primary',
-    asLink: true,
-  }
-)
-
-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[]>()
-
-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, 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()
-  emit('child-click', e, item)
-}
-</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, navItem.title, dropdownState)
-            "
-          >
-            <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 transition-all duration-200 ease-linear"
-          :class="[
-            generateClass('BGCOLOR', bgColor),
-            generateClass('HVBGCOLOR', highlightColor),
-            generateClass('FCBGCOLOR', highlightColor),
-            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

@@ -1,69 +0,0 @@
-import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType, MenuItemType } from '../common/index.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    navItem: MenuCollapseType;
-    bgColor?: ColorPalette | undefined;
-    menuTextSize?: BodyText | undefined;
-    menuTextColor?: ColorPalette | undefined;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    menuTextSize: string;
-    bgColor: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    asLink: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "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;
-    menuTextSize?: BodyText | undefined;
-    menuTextColor?: ColorPalette | undefined;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    menuTextSize: string;
-    bgColor: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    asLink: boolean;
-}>>> & {
-    "onChild-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
-    "onLabel-click"?: ((event: Event, title: string, open: boolean) => any) | undefined;
-}, {
-    bgColor: 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/NavLink.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import type { MenuItemType } from '../common/index.types'
-
-const props = withDefaults(
-  defineProps<{
-    navItem: MenuItemType
-    menuTextSize?: BodyText
-    menuTextColor?: ColorPalette
-    menuTextBold?: boolean
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    asLink?: boolean
-  }>(),
-  {
-    menuTextSize: 'md',
-    menuTextColor: 'dark-3',
-    menuTextBold: false,
-    displayHighlight: true,
-    highlightColor: 'primary',
-    asLink: true,
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'nav-link', event: Event, item: MenuItemType): void
-}>()
-
-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(' ')
-}
-const handleNavLinkClick = (e: Event, item: MenuItemType) => {
-  const { asLink } = props
-  !asLink && e.preventDefault()
-  emit('nav-link', e, item)
-}
-</script>
-
-<template>
-  <div>
-    <a
-      :href="navItem.url"
-      :target="navItem.target"
-      v-html="navItem.title"
-      class="tracking-wider outline-none nav__text"
-      :class="getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)"
-      @click="handleNavLinkClick($event, navItem)"
-    ></a>
-    <div
-      v-if="displayHighlight"
-      class="relative -top-[2px] h-[6px] nav__decorator"
-      :class="generateClass('BEFOREBG', highlightColor)"
-    ></div>
-  </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/NavLink.vue.d.ts

@@ -1,62 +0,0 @@
-import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuItemType } from '../common/index.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    navItem: MenuItemType;
-    menuTextSize?: BodyText | undefined;
-    menuTextColor?: ColorPalette | undefined;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    asLink: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "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;
-    menuTextBold?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    asLink: boolean;
-}>>> & {
-    "onNav-link"?: ((event: Event, item: MenuItemType) => any) | undefined;
-}, {
-    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];
-} & {};