@bobbykim/mcl-header 0.2.0

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '@bobbykim/manguito-theme'
+import type { MenuItemType } from './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(['nav-link'])
+
+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) => {
+  const { asLink } = props
+  !asLink && e.preventDefault()
+  emit('nav-link', e)
+}
+</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"
+    ></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

@@ -0,0 +1,62 @@
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme';
+import type { MenuItemType } from './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": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, 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"?: ((...args: any[]) => 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];
+} & {};

package/lib/mcl-header-a/index.types.d.ts

@@ -0,0 +1,20 @@
+import type { CtaTarget } from '@bobbykim/manguito-theme';
+export interface MenuItemType {
+    title: string;
+    url: string;
+    target?: CtaTarget;
+}
+export interface MenuCollapseType {
+    title: string;
+    children: MenuItemType[];
+}
+export interface NavChildClickEventType {
+    event: Event;
+    item: MenuItemType;
+}
+export interface MenuEventType {
+    event: Event;
+    title: string;
+    link: string;
+    target?: CtaTarget;
+}

package/lib/mcl-header-a/index.types.js

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

package/lib/mcl-header-a/index.types.ts

@@ -0,0 +1,24 @@
+import type { CtaTarget } from '@bobbykim/manguito-theme'
+
+export interface MenuItemType {
+  title: string
+  url: string
+  target?: CtaTarget
+}
+
+export interface MenuCollapseType {
+  title: string
+  children: MenuItemType[]
+}
+
+export interface NavChildClickEventType {
+  event: Event
+  item: MenuItemType
+}
+
+export interface MenuEventType {
+  event: Event
+  title: string
+  link: string
+  target?: CtaTarget
+}

package/package.json

@@ -0,0 +1 @@
+{"name":"@bobbykim/mcl-header","version":"0.2.0","description":"","type":"module","main":"index.ts","scripts":{"build":"vue-tsc --project tsconfig.vue.json && tsc"},"author":{"name":"Bobby Kim","url":"https://www.devbobbykim.com/"},"homepage":"https://manguito-component-library.vercel.app/","repository":{"type":"git","url":"https://github.com/bobbykim89/manguito-component-library.git"},"publishConfig":{"access":"public"},"license":"MIT","dependencies":{"@bobbykim/manguito-theme":"^0.14.0"},"gitHead":"4d94a8d34988d926c8d465891fd7aa535cffdf33"}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./**/*.ts"],
+  "exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declaration": true
+  }
+}

package/tsconfig.vue.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./**/*.vue"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}