@bobbykim/manguito-theme 0.15.0 → 0.17.0

package/lib/header/HeaderVertical.vue

@@ -0,0 +1,116 @@
+<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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,121 @@
+<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

@@ -0,0 +1,43 @@
+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

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

package/lib/header/index.types.ts

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

package/lib/modal/Modal.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-  ref,
-  computed,
-  watch,
   Transition,
-  onMounted,
+  computed,
   onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
 } from 'vue'
-import generateClass, { vClickOutside } from '../../index.js'
-import type { ColorPalette, VerticalAlignment } from '../../index.js'
-import { observeVisibleAttr } from '../composables/index.js'
+import type { ColorPalette, VerticalAlignment } from '../../'
+import generateClass, { vClickOutside } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
@@ -35,7 +35,15 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['open', 'close'])
+const slots = defineSlots<{
+  header(props: { close: () => void; status: boolean }): any
+  body(props: { close: () => void; status: boolean }): any
+  footer(props: { close: () => void; status: boolean }): any
+}>()
+const emit = defineEmits<{
+  (e: 'open', visible: boolean): void
+  (e: 'close', visible: boolean): void
+}>()
 const modalRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
@@ -52,10 +60,10 @@ const closeModal = (): void => {
   }
 }
 const emitOpenEvent = () => {
-  emit('open', { visible: true })
+  emit('open', true)
 }
 const emitCloseEvent = () => {
-  emit('close', { visible: false })
+  emit('close', false)
 }
 const handlePlacementVar = computed(() => {
   let placementVariable: number
@@ -172,7 +180,7 @@ onBeforeUnmount(() => {
             </slot>
           </div>
           <slot name="body" :close="closeModal" :status="toggle" />
-          <div class="sticky bottom-0">
+          <div class="sticky bottom-0" v-if="slots['footer']">
             <slot name="footer" :close="closeModal" :status="toggle" />
           </div>
         </div>

package/lib/modal/Modal.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColorPalette, VerticalAlignment } from '../../index.js';
+import type { ColorPalette, VerticalAlignment } from '../../';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -23,9 +23,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     close: () => void;
     open: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    open: (visible: boolean) => void;
+    close: (visible: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
     className?: string | undefined;
@@ -45,29 +45,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     backdropColor: string;
     placement: string;
 }>>> & {
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((visible: boolean) => any) | undefined;
+    onClose?: ((visible: boolean) => any) | undefined;
 }, {
     visible: boolean;
     className: string;
+    color: ColorPalette;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
-    color: ColorPalette;
     backdropColor: ColorPalette;
     placement: VerticalAlignment;
-}, {}>, {
-    header?(_: {
+}, {}>, Readonly<{
+    header(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    body(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    footer(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+}> & {
+    header(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
-    body?(_: {
+    body(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
-    footer?(_: {
+    footer(props: {
         close: () => void;
-        status: true;
+        status: boolean;
     }): any;
 }>;
 export default _default;

package/lib/sidebar/Sidebar.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
-  ref,
-  computed,
-  watch,
   Transition,
-  onMounted,
+  computed,
   onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
 } from 'vue'
-import generateClass, { vClickOutside } from '../../index.js'
-import type { ColorPalette, DirectionX } from '../../index.js'
-import { observeVisibleAttr } from '../composables/index.js'
+import type { ColorPalette, DirectionX } from '../../'
+import generateClass, { vClickOutside } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +37,15 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['open', 'close'])
+const slots = defineSlots<{
+  header(props: { close: () => void; status: boolean }): any
+  body(props: { close: () => void; status: boolean }): any
+  footer(props: { close: () => void; status: boolean }): any
+}>()
+const emit = defineEmits<{
+  (e: 'open', visible: boolean): void
+  (e: 'close', visible: boolean): void
+}>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
 const sidebarRef = ref<HTMLElement | undefined>()
@@ -50,16 +58,16 @@ const toggleSidebar = (): void => {
 const openSidebar = (): void => {
   toggle.value = true
 }
-const closeSidebar = (e: Event): void => {
+const closeSidebar = (): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
   }
 }
 const emitOpenEvent = () => {
-  emit('open', { visible: true })
+  emit('open', true)
 }
 const emitCloseEvent = () => {
-  emit('close', { visible: false })
+  emit('close', false)
 }
 const handleStyleVariables = computed(() => {
   return {
@@ -185,7 +193,7 @@ onBeforeUnmount(() => {
             <slot name="body" :close="closeSidebar" :status="toggle" />
           </div>
 
-          <div class="sticky bottom-0" ref="footerRef">
+          <div class="sticky bottom-0" ref="footerRef" v-if="slots['footer']">
             <slot name="footer" :close="closeSidebar" :status="toggle" />
           </div>
         </div>

package/lib/sidebar/Sidebar.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColorPalette, DirectionX } from '../../index.js';
+import type { ColorPalette, DirectionX } from '../../';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
@@ -23,11 +23,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     toggle: () => void;
     open: () => void;
-    close: (e: Event) => void;
+    close: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    open: (visible: boolean) => void;
+    close: (visible: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
     className?: string | undefined;
@@ -49,30 +49,43 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     placement: string;
     width: number;
 }>>> & {
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((visible: boolean) => any) | undefined;
+    onClose?: ((visible: boolean) => any) | undefined;
 }, {
     visible: boolean;
     className: string;
+    color: ColorPalette;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
-    color: ColorPalette;
     backdropColor: ColorPalette;
     placement: DirectionX;
     width: string | number;
-}, {}>, {
-    header?(_: {
-        close: (e: Event) => void;
-        status: true;
+}, {}>, Readonly<{
+    header(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    body(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    footer(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+}> & {
+    header(props: {
+        close: () => void;
+        status: boolean;
     }): any;
-    body?(_: {
-        close: (e: Event) => void;
-        status: true;
+    body(props: {
+        close: () => void;
+        status: boolean;
     }): any;
-    footer?(_: {
-        close: (e: Event) => void;
-        status: true;
+    footer(props: {
+        close: () => void;
+        status: boolean;
     }): any;
 }>;
 export default _default;

package/lib/theme/generateClass.d.ts

@@ -0,0 +1,2 @@
+import type { ClassType, InputType } from '.';
+export declare const generateClass: (type: ClassType, value: InputType) => string;

package/lib/theme/generateClass.js

@@ -0,0 +1,18 @@
+import GenerateMCLClass, { borderWidthType, colorType, scaleType, textType, } from '.';
+export const generateClass = (type, value) => {
+    const mclGenerate = new GenerateMCLClass(type, value);
+    if (colorType.includes(type)) {
+        return mclGenerate.generateColorClass();
+    }
+    if (textType.includes(type)) {
+        return mclGenerate.generateTextClass();
+    }
+    if (borderWidthType.includes(type)) {
+        return mclGenerate.generateBorderWidthClass();
+    }
+    if (scaleType.includes(type)) {
+        return mclGenerate.generateScaleClass();
+    }
+    // return spacing type if all of above is false
+    return mclGenerate.generateSpacingClass();
+};

package/lib/theme/generateClass.ts

@@ -0,0 +1,25 @@
+import type { ClassType, InputType } from '.'
+import GenerateMCLClass, {
+  borderWidthType,
+  colorType,
+  scaleType,
+  textType,
+} from '.'
+
+export const generateClass = (type: ClassType, value: InputType): string => {
+  const mclGenerate = new GenerateMCLClass(type, value)
+  if ((<string[]>(<unknown>colorType)).includes(type)) {
+    return mclGenerate.generateColorClass()
+  }
+  if ((<string[]>(<unknown>textType)).includes(type)) {
+    return mclGenerate.generateTextClass()
+  }
+  if ((<string[]>(<unknown>borderWidthType)).includes(type)) {
+    return mclGenerate.generateBorderWidthClass()
+  }
+  if ((<string[]>(<unknown>scaleType)).includes(type)) {
+    return mclGenerate.generateScaleClass()
+  }
+  // return spacing type if all of above is false
+  return mclGenerate.generateSpacingClass()
+}