@bobbykim/mcl-header 0.2.0 → 0.4.0

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { BodyText, ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '@bobbykim/manguito-theme'
+import { computed } from 'vue'
+import type { MenuItemType } from '../common/index.types'
+const props = withDefaults(
+  defineProps<{
+    menuItem: MenuItemType
+    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 emit = defineEmits<{
+  (e: 'menu-click', event: Event, item: MenuItemType): void
+}>()
+const handleLinkClick = (e: Event, item: MenuItemType) => {
+  const { asLink } = props
+  if (!asLink) {
+    e.preventDefault()
+  }
+  emit('menu-click', e, item)
+}
+const colorClass = computed<string>(() => {
+  const { textColor, textSize, dHl, hlColor, fontBold } = props
+  const classArray: string[] = [
+    // generateClass('TEXTCOLOR', textColor),
+    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(' ')
+})
+</script>
+
+<template>
+  <a
+    :class="[colorClass]"
+    class="px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"
+    :href="menuItem.url"
+    :target="menuItem.target ? menuItem.target : '_self'"
+    @click="handleLinkClick($event, menuItem)"
+  >
+    <span class="relative">{{ menuItem.title }}</span>
+  </a>
+</template>

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

@@ -0,0 +1,62 @@
+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<{
+    menuItem: MenuItemType;
+    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;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "menu-click": (event: Event, item: MenuItemType) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    menuItem: MenuItemType;
+    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;
+}>>> & {
+    "onMenu-click"?: ((event: Event, item: MenuItemType) => 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];
+} & {};

package/package.json

@@ -1 +1,27 @@
-{"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"}
+{
+  "name": "@bobbykim/mcl-header",
+  "version": "0.4.0",
+  "description": "",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
+  },
+  "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.16.0"
+  },
+  "gitHead": "5b81953e5108fd166c0b89ebc6a24e6de9499635"
+}

package/tsconfig.json

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

package/tsconfig.ts.json

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

package/lib/common/HamburgerMenu.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ColorPalette } from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-
-const props = withDefaults(
-  defineProps<{
-    color?: ColorPalette
-    displayBorder?: boolean
-    toggle: boolean
-    navColor: ColorPalette
-  }>(),
-  {
-    color: 'dark-2',
-    displayBorder: true,
-  }
-)
-
-const emit = defineEmits(['hbg-click'])
-
-const handleButtonToggle = (e: Event): void => {
-  emit('hbg-click', e)
-}
-
-const hamburgetButtonState = computed({
-  get() {
-    return props.toggle
-  },
-  set(value) {
-    return value
-  },
-})
-
-const getBorderClass = (
-  bColor: ColorPalette,
-  border: boolean,
-  nColor: ColorPalette
-): string => {
-  /**
-   * @bColor - color
-   * @border - displayBorder
-   * @nColor - navColor
-   */
-
-  const classArray: string[] = [
-    generateClass('RINGCOLOR', bColor),
-    generateClass('OFFSETRING', nColor),
-  ]
-
-  if (border) {
-    classArray.push(generateClass('BORDER', bColor))
-    classArray.push('border')
-  }
-  return classArray.join(' ')
-}
-
-const getHamburgerButtonClass = (color: ColorPalette): string => {
-  /**
-   * @color - color
-   */
-  const classArray: string[] = [
-    generateClass('BGCOLOR', color),
-    generateClass('BEFOREBG', color),
-    generateClass('AFTERBG', color),
-  ]
-
-  return classArray.join(' ')
-}
-</script>
-
-<template>
-  <button
-    class="p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button"
-    :class="getBorderClass(color, displayBorder, navColor)"
-    @click="handleButtonToggle"
-  >
-    <input
-      type="checkbox"
-      v-model="hamburgetButtonState"
-      class="hidden hamburger__checkbox"
-    />
-    <div
-      class="relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear"
-      :class="getHamburgerButtonClass(color)"
-    ></div>
-  </button>
-</template>
-
-<style lang="scss" scoped>
-.hamburger__icon {
-  &::before,
-  &::after {
-    position: absolute;
-    left: 0;
-    transition: all 0.3s linear;
-  }
-  &::before {
-    top: -0.5rem;
-  }
-  &::after {
-    top: 0.5rem;
-  }
-}
-.hamburger__button {
-  &:focus .hamburger__icon,
-  &:hover .hamburger__icon {
-    scale: 1.05;
-  }
-}
-.hamburger__checkbox:checked + .hamburger__icon {
-  background-color: transparent;
-}
-.hamburger__checkbox:checked + .hamburger__icon::before {
-  top: 0;
-  transform: rotate(135deg);
-}
-.hamburger__checkbox:checked + .hamburger__icon::after {
-  top: 0;
-  transform: rotate(-135deg);
-}
-</style>

package/lib/common/HamburgerMenu.vue.d.ts

@@ -1,43 +0,0 @@
-import type { ColorPalette } from '@bobbykim/manguito-theme';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: ColorPalette | undefined;
-    displayBorder?: boolean | undefined;
-    toggle: boolean;
-    navColor: ColorPalette;
-}>, {
-    color: string;
-    displayBorder: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "hbg-click": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: ColorPalette | undefined;
-    displayBorder?: boolean | undefined;
-    toggle: boolean;
-    navColor: ColorPalette;
-}>, {
-    color: string;
-    displayBorder: boolean;
-}>>> & {
-    "onHbg-click"?: ((...args: any[]) => any) | undefined;
-}, {
-    color: ColorPalette;
-    displayBorder: 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];
-} & {};