@bobbykim/manguito-theme 0.18.0 → 0.19.0

package/lib/header/HeaderHorizontal.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { useWindowScroll } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import type { ColorPalette } from '../../'
-import generateClass from '../../'
-import NavDrawer from './NavDrawer.vue'
-import type { HeaderStickyOptionType } from './index.types'
-
-const props = withDefaults(
-  defineProps<{
-    bgColor?: ColorPalette
-    mobileMenuBgColor?: ColorPalette
-    drawerBtnColor?: ColorPalette
-    drawerBtnBorder?: boolean
-    fadeInOnScroll?: boolean
-    scrollDistance?: number
-    sticky?: HeaderStickyOptionType
-  }>(),
-  {
-    bgColor: 'light-1',
-    mobileMenuBgColor: 'light-2',
-    drawerBtnColor: 'dark-1',
-    drawerBtnBorder: true,
-    fadeInOnScroll: true,
-    scrollDistance: 50,
-    sticky: 'all',
-  }
-)
-
-const slots = defineSlots<{
-  content: any
-  'content-right': any
-  'mobile-content'(props: { headerClose: () => void }): any
-}>()
-const navOpen = ref<boolean>(false)
-const { y } = useWindowScroll()
-const emit = defineEmits<{
-  (e: 'toggle-drawer', event: Event, open: boolean): void
-}>()
-
-const closeNav = (): void => {
-  navOpen.value = false
-}
-
-const toggleNavButton = (e: Event): void => {
-  navOpen.value = !navOpen.value
-  emit('toggle-drawer', e, navOpen.value)
-}
-
-/**
- * @TransitionFunctions
- * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
- */
-const onEnter = (el: any) => {
-  el.style.height = 'auto'
-  const endWidth = getComputedStyle(el).height
-  el.style.height = '0px'
-  el.offsetHeight // force repaint
-  el.style.height = endWidth
-}
-const onAfterEnter = (el: any) => {
-  el.style.height = 'auto'
-}
-const onLeave = (el: any) => {
-  el.style.height = getComputedStyle(el).height
-  el.offsetHeight // force repaint
-  el.style.height = '0px'
-}
-
-const handleHeaderClass = computed<string>(() => {
-  const { bgColor, sticky } = props
-  const classArray: string[] = [generateClass('BGCOLOR', bgColor)]
-  if (sticky === 'all') {
-    classArray.push('sticky top-0')
-    return classArray.join(' ')
-  }
-  if (sticky === 'tablet') {
-    classArray.push('md:sticky top-0')
-    return classArray.join(' ')
-  }
-  if (sticky === 'pc') {
-    classArray.push('lg:sticky top-0')
-    return classArray.join(' ')
-  }
-  return classArray.join(' ')
-})
-
-const handleFadeInOnScroll = computed(() => {
-  const { fadeInOnScroll, scrollDistance } = props
-  if (!fadeInOnScroll) {
-    return ''
-  }
-  return y.value >= scrollDistance
-    ? 'lg:shadow-md bg-opacity-70'
-    : 'bg-opacity-100'
-})
-
-defineExpose({
-  headerClose: closeNav,
-})
-</script>
-
-<template>
-  <header
-    class="w-full items-center z-50 transition ease-in duration-500 delay-150"
-    :class="[handleFadeInOnScroll, handleHeaderClass]"
-  >
-    <nav
-      class="flex flex-wrap items-center py-xs md:py-2xs mx-xs md:mx-sm align-middle justify-between sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]"
-    >
-      <div class="min-h-[24px]">
-        <slot name="content"></slot>
-      </div>
-      <div class="ml-auto">
-        <NavDrawer
-          :color="drawerBtnColor"
-          :display-border="drawerBtnBorder"
-          class="block lg:hidden"
-          @hbg-click="toggleNavButton"
-          :toggle="navOpen"
-          :nav-color="bgColor"
-        ></NavDrawer>
-        <div v-if="slots['content-right']" class="hidden lg:block">
-          <slot name="content-right"></slot>
-        </div>
-      </div>
-    </nav>
-    <!-- mobile menu -->
-
-    <div class="overflow-hidden lg:hidden">
-      <transition
-        name="collapse"
-        @enter="onEnter"
-        @after-enter="onAfterEnter"
-        @leave="onLeave"
-      >
-        <div
-          class="bg-opacity-80 rounded-md my-2xs mx-xs overflow-hidden"
-          v-if="navOpen"
-          :class="generateClass('BGCOLOR', mobileMenuBgColor)"
-        >
-          <div v-if="slots['mobile-content']">
-            <slot name="mobile-content" :header-close="closeNav"></slot>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </header>
-</template>
-
-<style scoped lang="scss">
-.collapse-enter-active {
-  transition: height 0.5s ease-in;
-}
-.collapse-leave-active {
-  transition: height 0.5s ease-out;
-}
-</style>

package/lib/header/HeaderHorizontal.vue.d.ts

@@ -1,84 +0,0 @@
-import type { ColorPalette } from '../../';
-import type { HeaderStickyOptionType } from './index.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    bgColor?: ColorPalette | undefined;
-    mobileMenuBgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    fadeInOnScroll?: boolean | undefined;
-    scrollDistance?: number | undefined;
-    sticky?: HeaderStickyOptionType | undefined;
-}>, {
-    bgColor: string;
-    mobileMenuBgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-    sticky: string;
-}>, {
-    headerClose: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "toggle-drawer": (event: Event, open: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    bgColor?: ColorPalette | undefined;
-    mobileMenuBgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    fadeInOnScroll?: boolean | undefined;
-    scrollDistance?: number | undefined;
-    sticky?: HeaderStickyOptionType | undefined;
-}>, {
-    bgColor: string;
-    mobileMenuBgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-    sticky: string;
-}>>> & {
-    "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-}, {
-    bgColor: ColorPalette;
-    mobileMenuBgColor: ColorPalette;
-    drawerBtnColor: ColorPalette;
-    drawerBtnBorder: boolean;
-    fadeInOnScroll: boolean;
-    scrollDistance: number;
-    sticky: HeaderStickyOptionType;
-}, {}>, Readonly<{
-    content: any;
-    'content-right': any;
-    'mobile-content'(props: {
-        headerClose: () => void;
-    }): any;
-}> & {
-    content: any;
-    'content-right': any;
-    'mobile-content'(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/header/HeaderVertical.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { Transition, computed, ref } from 'vue'
-import type { ColorPalette } from '../../'
-import generateClass from '../../'
-import NavDrawer from './NavDrawer.vue'
-const props = withDefaults(
-  defineProps<{
-    bgColor?: ColorPalette
-    drawerBtnColor?: ColorPalette
-    drawerBtnBorder?: boolean
-    headerWidth?: number
-  }>(),
-  {
-    bgColor: 'light-1',
-    drawerBtnColor: 'dark-1',
-    drawerBtnBorder: true,
-    headerWidth: 160,
-  }
-)
-
-const slots = defineSlots<{
-  default: any
-  content: any
-  'content-bottom': any
-  'mobile-content'(props: { headerClose: () => void }): any
-}>()
-const emit = defineEmits<{
-  (e: 'toggle-drawer', event: Event, open: boolean): void
-}>()
-const navOpen = ref<boolean>(false)
-
-const toggleNavButton = (e: Event): void => {
-  navOpen.value = !navOpen.value
-  emit('toggle-drawer', e, navOpen.value)
-}
-
-const closeNav = (): void => {
-  navOpen.value = false
-}
-
-const componentWidth = computed(() => {
-  return { '--header-width': `${props.headerWidth}px` }
-})
-
-defineExpose({
-  headerClose: closeNav,
-})
-</script>
-
-<template>
-  <section class="lg:flex">
-    <header class="relative" :style="componentWidth">
-      <nav
-        class="hidden lg:block lg:sticky lg:top-0 lg:left-0 lg:h-[100vh] py-sm header-desktop overscroll-contain overflow-y-scroll"
-        :class="[generateClass('BGCOLOR', bgColor)]"
-      >
-        <div class="flex flex-col justify-between h-full">
-          <div>
-            <slot name="content" />
-          </div>
-          <div v-if="slots['content-bottom']">
-            <slot name="content-bottom" />
-          </div>
-        </div>
-      </nav>
-
-      <div class="block fixed lg:hidden top-0 right-0 mr-xs mt-xs z-20">
-        <NavDrawer
-          :color="drawerBtnColor"
-          :display-border="drawerBtnBorder"
-          class="block lg:hidden relative"
-          @hbg-click="toggleNavButton"
-          :toggle="navOpen"
-          :nav-color="bgColor"
-        ></NavDrawer>
-      </div>
-
-      <!-- mobile menu -->
-
-      <div class="block lg:hidden relative">
-        <Transition name="slide-down" appear>
-          <div
-            class="fixed inset-0 overflow-y-scroll overscroll-contain py-lg px-sm"
-            v-if="navOpen"
-            :class="generateClass('BGCOLOR', bgColor)"
-          >
-            <div v-if="slots['mobile-content']" class="h-full">
-              <slot name="mobile-content" :header-close="closeNav" />
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </header>
-    <div class="w-full">
-      <slot />
-    </div>
-  </section>
-</template>
-
-<style scoped lang="scss">
-.header-desktop {
-  width: 100%;
-  @media screen and (min-width: 1024px) {
-    width: var(--header-width);
-  }
-}
-.slide-down-enter-active,
-.slide-down-leave-active {
-  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
-}
-.slide-down-enter-from,
-.slide-down-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-</style>

package/lib/header/HeaderVertical.vue.d.ts

@@ -1,70 +0,0 @@
-import type { ColorPalette } from '../../';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    bgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    headerWidth?: number | undefined;
-}>, {
-    bgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    headerWidth: number;
-}>, {
-    headerClose: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "toggle-drawer": (event: Event, open: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    bgColor?: ColorPalette | undefined;
-    drawerBtnColor?: ColorPalette | undefined;
-    drawerBtnBorder?: boolean | undefined;
-    headerWidth?: number | undefined;
-}>, {
-    bgColor: string;
-    drawerBtnColor: string;
-    drawerBtnBorder: boolean;
-    headerWidth: number;
-}>>> & {
-    "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
-}, {
-    bgColor: ColorPalette;
-    drawerBtnColor: ColorPalette;
-    drawerBtnBorder: boolean;
-    headerWidth: number;
-}, {}>, Readonly<{
-    default: any;
-    content: any;
-    'content-bottom': any;
-    'mobile-content'(props: {
-        headerClose: () => void;
-    }): any;
-}> & {
-    default: any;
-    content: any;
-    'content-bottom': any;
-    'mobile-content'(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/header/NavDrawer.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ColorPalette } from '../../'
-import generateClass from '../../'
-
-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/header/NavDrawer.vue.d.ts

@@ -1,43 +0,0 @@
-import type { ColorPalette } from '../../';
-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").PublicProps, 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];
-} & {};

package/lib/header/index.types.d.ts

@@ -1 +0,0 @@
-export type HeaderStickyOptionType = 'none' | 'tablet' | 'pc' | 'all';

package/lib/header/index.types.js

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

package/lib/header/index.types.ts

@@ -1 +0,0 @@
-export type HeaderStickyOptionType = 'none' | 'tablet' | 'pc' | 'all'