@bobbykim/mcl-header 0.5.1 → 0.6.0

package/lib/mcl-header-b/MclHeaderB.vue

@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import type {
-  BodyText,
-  ColorPalette,
-  CtaTarget,
-  HeadingSize,
-} from '@bobbykim/manguito-theme'
-import generateClass, { HeaderVertical } from '@bobbykim/manguito-theme'
-import { computed, ref } from 'vue'
-import type { MenuCollapseType, MenuItemType } from '../common/index.types'
-import NavCollapseVertical from './NavCollapseVertical.vue'
-import NavLinkVertical from './NavLinkVertical.vue'
-
-const props = withDefaults(
-  defineProps<{
-    logo: 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
-    drawerBtnColor?: ColorPalette
-    drawerBtnBorder?: boolean
-    headerWidth?: number
-  }>(),
-  {
-    logoAlt: '',
-    titleBlockAsLink: false,
-    titleBlockLinkTarget: '_self',
-    titleSize: 'md',
-    titleColor: 'dark-3',
-    menuItemAsLink: false,
-    menuTextSize: 'md',
-    menuTextColor: 'dark-3',
-    menuTextBold: false,
-    displayHighlight: true,
-    highlightColor: 'primary',
-    bgColor: 'light-1',
-    drawerBtnColor: 'dark-1',
-    drawerBtnBorder: true,
-    headerWidth: 160,
-  }
-)
-const slots = defineSlots<{
-  default: any
-  'content-bottom': 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 componentRef = ref<InstanceType<typeof HeaderVertical>>()
-const collapseRef = ref<InstanceType<typeof NavCollapseVertical>[]>()
-const handleDrawerClick = (e: Event, status: boolean) => {
-  emit('toggle-drawer', e, status)
-}
-const closeDrawer = (): void => {
-  componentRef.value?.headerClose()
-}
-const closeCollapse = (): void => {
-  for (let i = 0; i < collapseRef.value!.length; i++) {
-    collapseRef.value![i].closeCollapse()
-  }
-}
-const handleTitleClick = (e: Event) => {
-  const { titleBlockAsLink, titleBlockLink, titleBlockLinkTarget } = props
-  if (!titleBlockAsLink) {
-    e.preventDefault()
-  }
-  emit('title-click', e, titleBlockLink, titleBlockLinkTarget)
-  closeDrawer()
-  closeCollapse()
-}
-const handleMenuClick = (e: Event, item: MenuItemType) => {
-  const { menuItemAsLink } = props
-  if (!menuItemAsLink) {
-    e.preventDefault()
-  }
-  emit('menu-click', e, item)
-  closeDrawer()
-  closeCollapse()
-}
-const handleCollapseMenuClick = (e: Event, title: string, visible: boolean) => {
-  emit('collapse-click', e, title, visible)
-}
-const titleTextClass = computed<string>(() => {
-  const { titleSize, titleColor } = props
-  const classArray = [
-    generateClass('H3', titleSize),
-    generateClass('TEXTCOLOR', titleColor),
-  ]
-  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: closeDrawer,
-})
-</script>
-
-<template>
-  <HeaderVertical
-    :bg-color="bgColor"
-    :drawer-btn-color="drawerBtnColor"
-    :drawer-btn-border="drawerBtnBorder"
-    :header-width="headerWidth"
-    @toggle-drawer="handleDrawerClick"
-    ref="componentRef"
-  >
-    <template #default>
-      <slot name="default"></slot>
-    </template>
-    <template #content>
-      <div>
-        <!-- logo block -->
-        <div class="p-md text-center">
-          <a
-            :href="titleBlockLink"
-            :target="titleBlockLinkTarget"
-            @click="handleTitleClick"
-          >
-            <img
-              :src="logo"
-              :alt="logoAlt"
-              class="h-full inline-block max-h-xl"
-            />
-          </a>
-        </div>
-        <!-- title block -->
-        <div>
-          <a
-            :href="titleBlockLink"
-            :target="titleBlockLinkTarget"
-            @click="handleTitleClick"
-          >
-            <h3
-              :class="titleTextClass"
-              class="text-center mb-md"
-              v-html="title"
-            ></h3>
-          </a>
-        </div>
-        <!-- menu item block -->
-        <ul class="flex flex-col">
-          <li v-for="(item, index) in menuItems" :key="`menu-${index}`">
-            <NavLinkVertical
-              v-if="!hasChildren(item)"
-              :menu-item="(item as MenuItemType)"
-              :as-link="menuItemAsLink"
-              :text-color="menuTextColor"
-              :text-size="menuTextSize"
-              :font-bold="menuTextBold"
-              :d-hl="displayHighlight"
-              :hl-color="highlightColor"
-              @menu-click="handleMenuClick"
-            />
-            <NavCollapseVertical
-              v-else
-              ref="collapseRef"
-              :nav-id="item.title"
-              nav-location="desktop"
-              :nav-accordion-group="title"
-              :menu-item="(item as MenuCollapseType)"
-              :as-link="menuItemAsLink"
-              :text-color="menuTextColor"
-              :text-size="menuTextSize"
-              :font-bold="menuTextBold"
-              :d-hl="displayHighlight"
-              :hl-color="highlightColor"
-              @child-click="handleMenuClick"
-              @label-click="handleCollapseMenuClick"
-            />
-          </li>
-        </ul>
-      </div>
-    </template>
-    <template #content-bottom>
-      <div v-if="slots['content-bottom']">
-        <slot name="content-bottom"></slot>
-      </div>
-    </template>
-    <template #mobile-content="{ headerClose }">
-      <!-- mobile content -->
-      <div class="flex flex-col justify-between h-full">
-        <div>
-          <!-- logo block -->
-          <div class="p-md text-center">
-            <a
-              :href="titleBlockLink"
-              :target="titleBlockLinkTarget"
-              @click="handleTitleClick"
-            >
-              <img
-                :src="logo"
-                :alt="logoAlt"
-                class="h-full inline-block max-h-xl"
-              />
-            </a>
-          </div>
-          <!-- title block -->
-          <div>
-            <a
-              :href="titleBlockLink"
-              :target="titleBlockLinkTarget"
-              @click="handleTitleClick"
-            >
-              <h3
-                :class="titleTextClass"
-                class="text-center mb-md"
-                v-html="title"
-              ></h3>
-            </a>
-          </div>
-          <!-- menu item block -->
-          <ul class="flex flex-col">
-            <li v-for="(item, index) in menuItems" :key="`menu-${index}`">
-              <NavLinkVertical
-                v-if="!hasChildren(item)"
-                :menu-item="(item as MenuItemType)"
-                :as-link="menuItemAsLink"
-                :text-color="menuTextColor"
-                :text-size="menuTextSize"
-                :font-bold="menuTextBold"
-                :d-hl="displayHighlight"
-                :hl-color="highlightColor"
-                @menu-click="handleMenuClick"
-              />
-              <NavCollapseVertical
-                v-else
-                :nav-id="item.title"
-                nav-location="mobile"
-                :nav-accordion-group="title"
-                :menu-item="(item as MenuCollapseType)"
-                :as-link="menuItemAsLink"
-                :text-color="menuTextColor"
-                :text-size="menuTextSize"
-                :font-bold="menuTextBold"
-                :d-hl="displayHighlight"
-                :hl-color="highlightColor"
-                @child-click="handleMenuClick"
-                @label-click="handleCollapseMenuClick"
-              />
-            </li>
-          </ul>
-        </div>
-        <div v-if="slots['mobile-bottom']">
-          <slot name="mobile-bottom" :headerClose="headerClose"></slot>
-        </div>
-      </div>
-    </template>
-  </HeaderVertical>
-</template>

package/lib/mcl-header-b/MclHeaderB.vue.d.ts

@@ -1,138 +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;
-    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;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    headerWidth?: number | undefined;
-}>, {
-    logoAlt: string;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: string;
-    titleSize: string;
-    titleColor: string;
-    menuItemAsLink: boolean;
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    bgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    headerWidth: 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;
-    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;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    headerWidth?: number | undefined;
-}>, {
-    logoAlt: string;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: string;
-    titleSize: string;
-    titleColor: string;
-    menuItemAsLink: boolean;
-    menuTextSize: string;
-    menuTextColor: string;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    bgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    headerWidth: 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;
-    drawerBtnColor: ColorPalette;
-    drawerBtnBorder: boolean;
-    headerWidth: number;
-    titleColor: ColorPalette;
-    menuTextSize: BodyText;
-    menuTextColor: ColorPalette;
-    menuTextBold: boolean;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    logoAlt: string;
-    titleSize: HeadingSize;
-    titleBlockAsLink: boolean;
-    titleBlockLinkTarget: CtaTarget;
-    menuItemAsLink: boolean;
-}, {}>, Readonly<{
-    default: any;
-    'content-bottom': any;
-    'mobile-bottom'(props: {
-        headerClose: () => void;
-    }): any;
-}> & {
-    default: any;
-    'content-bottom': 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;
-    };
-};

package/lib/mcl-header-b/NavCollapseVertical.vue

@@ -1,211 +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'
-type NavLocationType = 'desktop' | 'mobile'
-const props = withDefaults(
-  defineProps<{
-    navId: string
-    navAccordionGroup: string
-    navLocation: NavLocationType
-    menuItem: MenuCollapseType
-    textColor?: ColorPalette
-    textSize?: BodyText
-    fontBold?: boolean
-    dHl?: boolean
-    hlColor?: ColorPalette
-    asLink?: boolean
-  }>(),
-  {
-    textColor: 'dark-3',
-    textSize: 'md',
-    fontBold: false,
-    dHl: true,
-    hlColor: 'primary',
-    asLink: true,
-  }
-)
-const toggle = ref<boolean>(false)
-const collapseRef = ref<InstanceType<typeof Collapse>>()
-const emit = defineEmits<{
-  (e: 'label-click', event: Event, title: string, open: boolean): void
-  (e: 'child-click', event: Event, item: MenuItemType): void
-}>()
-const toggleCollapse = (visible: boolean): void => {
-  toggle.value = visible
-}
-const closeCollapse = () => {
-  collapseRef.value?.close()
-}
-const handleCollapseLabelClick = (e: Event, title: string) => {
-  emit('label-click', e, title, toggle.value)
-}
-const handleChildClick = (e: Event, item: MenuItemType) => {
-  const { asLink } = props
-  if (!asLink) {
-    e.preventDefault()
-  }
-  emit('child-click', e, item)
-  collapseRef.value?.close()
-  closeCollapse()
-}
-const getNavId = computed<string>(() => {
-  const { navId, navLocation } = props
-  const navIdLower = navId.toLowerCase()
-  const navIdKebab = navIdLower.replaceAll(' ', '-')
-  return `nav-${navLocation}-${navIdKebab}`
-})
-const getAccordionGroup = computed<string>(() => {
-  const { navAccordionGroup, navLocation } = props
-  const agKebab = navAccordionGroup.toLowerCase().replaceAll(' ', '-')
-  return `nav-accordion-group-${navLocation}-${agKebab}`
-})
-
-const colorClass = computed<string>(() => {
-  const { textColor, textSize, dHl, hlColor, fontBold } = props
-  const classArray: string[] = [generateClass('BODYTEXT', textSize)]
-  if (!dHl) {
-    const nonHlTextClass: string[] = [
-      generateClass('TEXTCOLOR', textColor),
-      generateClass('HVTEXTCOLOR', hlColor),
-      generateClass('FCTEXTCOLOR', hlColor),
-    ]
-    classArray.push(nonHlTextClass.join(' '))
-  }
-  if (dHl) {
-    const highlightColor: string = generateClass('BEFOREBG', hlColor)
-    const hlClass: string =
-      '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 '
-    classArray.push(hlClass + highlightColor)
-    const hlTextClass: string[] = [
-      generateClass('TEXTCOLOR', hlColor),
-      generateClass('HVTEXTCOLOR', textColor),
-      generateClass('FCTEXTCOLOR', textColor),
-    ]
-    classArray.push(hlTextClass.join(' '))
-  }
-  if (fontBold) {
-    classArray.push('font-bold')
-  }
-  return classArray.join(' ')
-})
-const collapseHighlightClass = computed<string>(() => {
-  const { dHl, hlColor, navLocation } = props
-  const classArray: string[] = []
-  if (!dHl) {
-    return ''
-  }
-  const classNames: string =
-    'before:absolute before:w-xs before:h-full before:bg-primary before:bg-opacity-70 '
-  const hlLocation: string =
-    navLocation === 'desktop' ? 'before:left-0 ' : 'before:right-0 '
-  classArray.push(classNames + hlLocation + generateClass('BEFOREBG', hlColor))
-  return classArray.join(' ')
-})
-const childItemColorClass = computed<string>(() => {
-  const { textColor, textSize, dHl, hlColor, fontBold, navLocation } = props
-  let childBodyText: BodyText =
-    textSize === 'xl'
-      ? 'lg'
-      : textSize === 'lg'
-      ? 'md'
-      : textSize === 'md'
-      ? 'sm'
-      : 'xs'
-  const classArray: string[] = [
-    generateClass('TEXTCOLOR', textColor),
-    generateClass('BODYTEXT', childBodyText),
-  ]
-  if (navLocation === 'mobile') {
-    classArray.push('text-end')
-  }
-  if (!dHl) {
-    const nonHlTextClass: string[] = [
-      generateClass('TEXTCOLOR', textColor),
-      generateClass('HVTEXTCOLOR', hlColor),
-      generateClass('FCTEXTCOLOR', hlColor),
-    ]
-    classArray.push(nonHlTextClass.join(' '))
-  }
-  if (dHl) {
-    const highlightColor: string = generateClass('BEFOREBG', hlColor)
-    const hlClass: string =
-      '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 '
-    const hlLocation: string =
-      navLocation === 'desktop'
-        ? 'before:left-0 before:transition-[width] '
-        : 'before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] '
-    classArray.push(hlClass + hlLocation + highlightColor)
-    const hlTextClass: string[] = [
-      generateClass('TEXTCOLOR', hlColor),
-      generateClass('HVTEXTCOLOR', textColor),
-      generateClass('FCTEXTCOLOR', textColor),
-    ]
-    classArray.push(hlTextClass.join(' '))
-  }
-  if (fontBold) {
-    classArray.push('font-bold')
-  }
-  return classArray.join(' ')
-})
-defineExpose({
-  closeCollapse: closeCollapse,
-})
-</script>
-
-<template>
-  <div>
-    <button
-      v-collapse:[getNavId]
-      class="px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"
-      @click="handleCollapseLabelClick($event, menuItem.title)"
-      :class="[colorClass]"
-    >
-      <div class="relative flex gap-2 items-center justify-center">
-        <span>{{ menuItem.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>
-      </div>
-    </button>
-    <Collapse
-      ref="collapseRef"
-      :id="getNavId"
-      :accordion="getAccordionGroup"
-      @open="toggleCollapse"
-      @close="toggleCollapse"
-    >
-      <ul class="relative" :class="[collapseHighlightClass]">
-        <li
-          v-for="(item, idx) in menuItem.children"
-          :key="idx"
-          :class="[navLocation === 'desktop' ? 'ml-xs' : 'mr-xs']"
-        >
-          <a
-            :href="item.url"
-            :target="item.target"
-            @click="handleChildClick($event, item)"
-            class="relative before:absolute w-full px-2xs py-3xs block overflow-x-hidden transition-colors duration-300 ease-linear"
-            :class="[childItemColorClass]"
-          >
-            <span class="relative">
-              {{ item.title }}
-            </span>
-          </a>
-        </li>
-      </ul>
-    </Collapse>
-  </div>
-</template>

package/lib/mcl-header-b/NavCollapseVertical.vue.d.ts

@@ -1,73 +0,0 @@
-import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
-import type { MenuCollapseType, MenuItemType } from '../common/index.types';
-type NavLocationType = 'desktop' | 'mobile';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    navId: string;
-    navAccordionGroup: string;
-    navLocation: NavLocationType;
-    menuItem: MenuCollapseType;
-    textColor?: ColorPalette | undefined;
-    textSize?: BodyText | undefined;
-    fontBold?: boolean | undefined;
-    dHl?: boolean | undefined;
-    hlColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    textColor: string;
-    textSize: string;
-    fontBold: boolean;
-    dHl: boolean;
-    hlColor: string;
-    asLink: boolean;
-}>, {
-    closeCollapse: () => void;
-}, 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<{
-    navId: string;
-    navAccordionGroup: string;
-    navLocation: NavLocationType;
-    menuItem: MenuCollapseType;
-    textColor?: ColorPalette | undefined;
-    textSize?: BodyText | undefined;
-    fontBold?: boolean | undefined;
-    dHl?: boolean | undefined;
-    hlColor?: ColorPalette | undefined;
-    asLink?: boolean | undefined;
-}>, {
-    textColor: string;
-    textSize: string;
-    fontBold: boolean;
-    dHl: boolean;
-    hlColor: string;
-    asLink: boolean;
-}>>> & {
-    "onChild-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
-    "onLabel-click"?: ((event: Event, title: string, open: boolean) => any) | undefined;
-}, {
-    textColor: ColorPalette;
-    asLink: boolean;
-    textSize: BodyText;
-    fontBold: boolean;
-    dHl: boolean;
-    hlColor: ColorPalette;
-}, {}>;
-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];
-} & {};