@bobbykim/manguito-theme 0.4.0 → 0.6.0

package/README.md

@@ -19,9 +19,7 @@ npx tailwindcss init -p
 tailwind.config.cjs
 
 ```cjs
-const {
-  mclTheme,
-} = require('./src/components/manguito-theme/themeVariables.cjs')
+const { mclTheme } = require('@bobbykim/manguito-theme/themeVariables.cjs')
 module.exports = {
   content: [
     './src/**/*.{vue,ts,js,cjs}',

package/index.ts

@@ -9,7 +9,10 @@ import type { ClassType, InputType } from './theme/index.js'
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
 import DropdownContent from './lib/dropdown/DropdownContent.vue'
 import Collapse from './lib/collapse/Collapse.vue'
-import type { CollapseEvent } from './lib/collapse/index.types'
+import Sidebar from './lib/sidebar/Sidebar.vue'
+import Modal from './lib/modal/Modal.vue'
+
+import HamburgerMenu from './lib/nav/HamburgerMenu.vue'
 
 const generateClass = (type: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)
@@ -31,5 +34,14 @@ const generateClass = (type: ClassType, value: InputType): string => {
 
 export default generateClass
 
-export { DropdownContainer, DropdownContent, Collapse, CollapseEvent }
+export {
+  DropdownContainer,
+  DropdownContent,
+  Collapse,
+  HamburgerMenu,
+  Sidebar,
+  Modal,
+}
 export * from './lib/directives'
+export * from './theme/theme.types'
+export * from './lib/collapse/index.types'

package/lib/collapse/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, watch, Transition } from 'vue'
 import type { CollapseEvent } from './index.types'
 const props = withDefaults(
   defineProps<{
@@ -15,43 +15,42 @@ const props = withDefaults(
 )
 const emit = defineEmits(['toggle'])
 const toggle = ref<boolean>(props.visible)
-const contentRef = ref<HTMLAreaElement>()
-const slotHeight = ref<number>()
 
 const handleToggleEvent = (e: Event): void => {
   toggle.value = !toggle.value
   emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
 }
-const initObserver = (): ResizeObserver => {
-  const observer = new ResizeObserver(() => {
-    if (contentRef.value) {
-      slotHeight.value = contentRef.value.scrollHeight
-      return
-    }
-    slotHeight.value = 0
-  })
-  return observer
+
+/**
+ * @TransitionFunctions
+ * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
+ */
+const onEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '0'
+  const endWidth = getComputedStyle(el).height
+  el.style.height = '0px'
+  el.offsetHeight // force repaint
+  el.style.height = endWidth
+  el.style.opacity = '1'
 }
-const slotHeightVal = computed(() => {
-  return {
-    height: contentRef.value && toggle.value ? slotHeight.value + 'px' : '0px',
-  }
-})
+const onAfterEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '1'
+}
+const onLeave = (el: any) => {
+  el.style.height = getComputedStyle(el).height
+  el.offsetHeight // force repaint
+  el.style.height = '0px'
+  el.style.opacity = '0'
+}
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
-// lifecycle hooks
-onMounted(() => {
-  if (typeof window !== undefined) {
-    initObserver().observe(contentRef.value as Element)
-  }
-})
-onBeforeUnmount(() => {
-  initObserver().disconnect()
-})
 </script>
 
 <template>
@@ -63,23 +62,28 @@ onBeforeUnmount(() => {
       :accordion="accordion"
       :visible="toggle"
     ></button>
-    <div
-      class="overflow-hidden transition-[height] duration-500"
-      :style="slotHeightVal"
-      :class="[toggle ? 'ease-in' : 'ease-out']"
+    <transition
+      name="collapse"
+      tag="div"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+      class="overflow-hidden"
     >
-      <div
-        ref="contentRef"
-        class="transition-opacity duration-500"
-        :class="[
-          toggle ? 'opacity-100 ease-in' : 'opacity-0 ease-out',
-          className,
-        ]"
-      >
-        <slot />
+      <div v-show="toggle">
+        <div :class="[className]">
+          <slot />
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.collapse-enter-active,
+.collapse-leave-active {
+  transition-property: height, opacity;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+}
+</style>

package/lib/directives/index.ts

@@ -1,4 +1,8 @@
-import { Directive } from 'vue'
+import { Directive, DirectiveBinding, h, render, createVNode } from 'vue'
+import generateClass from '../..'
+import type { Direction } from '../..'
+import tooltip from '../tooltip'
+import type { TooltipElementType, TooltipValueType } from './index.types'
 
 export const vClickOutside: Directive = {
   mounted(el, binding) {
@@ -14,6 +18,29 @@ export const vClickOutside: Directive = {
   },
 }
 
+export const vToggle: Directive = {
+  mounted(el, binding) {
+    el.__ClickToggleHandler = (e: Event): void => {
+      const eTarget = e.target as HTMLElement
+      let target: HTMLElement
+      if (eTarget.tagName === 'A') {
+        const targetId = eTarget.getAttribute('href')
+        const formattedTargetId =
+          targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+        target = document.getElementById(formattedTargetId as string)!
+      } else {
+        target = document.getElementById(binding.arg as string)!
+      }
+      target.click()
+      return
+    }
+    el.addEventListener('click', el.__ClickToggleHandler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__ClickToggleHandler)
+  },
+}
+
 export const vCollapse: Directive = {
   mounted(el, binding) {
     el.__HandleToggler = (event: Event): void => {
@@ -23,9 +50,7 @@ export const vCollapse: Directive = {
         const targetId = eTarget.getAttribute('href')
         const formattedTargetId =
           targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
-        target = document.getElementById(
-          formattedTargetId as string
-        ) as HTMLElement
+        target = document.getElementById(formattedTargetId as string)!
       } else {
         target = document.getElementById(binding.arg as string) as HTMLElement
       }
@@ -55,3 +80,109 @@ export const vCollapse: Directive = {
     el.removeEventListener('click', el.__HandleToggler)
   },
 }
+
+export const vTooltip: Directive<TooltipElementType, TooltipValueType> = {
+  mounted(el, binding) {
+    el.__HandleTooltip = (
+      el: HTMLElement,
+      binding: DirectiveBinding<TooltipValueType>
+    ) => {
+      // parent element class
+      el.classList.add('relative', 'group', 'overflow-visible')
+
+      // handle tooltip text
+      let tooltipText: string | null | undefined
+      if (el.hasAttribute('title')) {
+        tooltipText = el.getAttribute('title')
+      }
+      if (
+        !el.hasAttribute('title') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value === 'string'
+      ) {
+        tooltipText = binding.value
+      }
+      if (
+        !el.hasAttribute('title') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.title === 'string'
+      ) {
+        tooltipText = binding.value.title
+      }
+      // handle tooltip color
+      let tooltipColor: string | null | undefined
+      if (el.hasAttribute('color')) {
+        tooltipColor = el.getAttribute('color')
+      }
+      if (
+        !el.hasAttribute('color') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.color === 'string'
+      ) {
+        tooltipColor = binding.value.color
+      }
+      // handle tooltip text color
+      let tooltipTextColor: string | null | undefined
+      if (el.hasAttribute('text-color')) {
+        tooltipTextColor = el.getAttribute('text-color')
+      }
+      if (
+        !el.hasAttribute('text-color') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.textColor === 'string'
+      ) {
+        tooltipTextColor = binding.value.textColor
+      }
+      // handle tooltip width
+      let tooltipWidth: string | number | null | undefined
+      if (el.hasAttribute('width')) {
+        tooltipWidth = el.getAttribute('width')
+      }
+      if (
+        !el.hasAttribute('width') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.width === ('number' || 'string')
+      ) {
+        tooltipWidth = binding.value.width
+      }
+      // handle custom class names
+      let tooltipClassName: string | undefined
+      if (
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.className === 'string'
+      ) {
+        tooltipClassName = binding.value.className
+      }
+      let tooltipDirection: Direction | undefined
+      const modifierArray: string[] = Object.keys(binding.modifiers)
+      // handle direction
+      if (modifierArray.length > 0) {
+        tooltipDirection = modifierArray[0] as Direction
+      }
+      const vnode = createVNode(tooltip, {
+        direction: tooltipDirection,
+        title: tooltipText,
+        color: tooltipColor,
+        textColor: tooltipTextColor,
+        width: tooltipWidth,
+        customClass: tooltipClassName,
+      })
+      render(vnode, el)
+    }
+    el.__UnmountTooltip = (el: Element) => {
+      render(null, el)
+    }
+    el.__HandleTooltip(el, binding)
+  },
+  updated(el, binding) {
+    el.__HandleTooltip(el, binding)
+  },
+  unmounted(el) {
+    el.__UnmountTooltip(el)
+  },
+}

package/lib/directives/index.types.ts

@@ -0,0 +1,15 @@
+import type { ColorPalette } from '../..'
+
+export interface TooltipElementType extends HTMLElement {
+  __HandleTooltip: Function
+  __UnmountTooltip: Function
+}
+
+interface TooltipValueObjectType {
+  title?: string
+  color?: ColorPalette
+  textColor?: ColorPalette
+  width?: number | string
+  className?: string
+}
+export type TooltipValueType = TooltipValueObjectType | string

package/lib/modal/Modal.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, {
+  ColorPalette,
+  vClickOutside,
+  VerticalAlignment,
+} from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    modalId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: VerticalAlignment
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'center',
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openModal = (): void => {
+  toggle.value = true
+}
+const closeModal = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handlePlacementVar = computed(() => {
+  let placementVariable: number
+  if (props.placement === 'top') {
+    placementVariable = 25
+  } else if (props.placement === 'bottom') {
+    placementVariable = 75
+  } else {
+    placementVariable = 50
+  }
+  return { '--vertical-placement': placementVariable + '%' }
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  close: closeModal,
+  open: openModal,
+})
+</script>
+
+<template>
+  <div :style="handlePlacementVar">
+    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeModal"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      name="slide-down"
+      tag="div"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        class="vertical-placement fixed w-full max-w-md z-[110] px-xs"
+      >
+        <div
+          v-click-outside="closeModal"
+          :class="[generateClass('BGCOLOR', color), className]"
+          class="relative overscroll-contain overflow-y-scroll max-h-[80vh] md:max-h-[60vh]"
+        >
+          <div v-if="!noHeader" class="sticky top-0">
+            <slot name="header" :close="closeModal" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs border-b-2"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeModal">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+          <slot name="body" :close="closeModal" :status="toggle" />
+          <div class="sticky bottom-0">
+            <slot name="footer" :close="closeModal" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.vertical-placement {
+  top: var(--vertical-placement);
+  left: 50%;
+  transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-down-enter-active {
+  animation: slide-down 300ms ease;
+}
+.slide-down-leave-active {
+  animation: slide-down reverse 300ms ease;
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%) translateX(-50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+  }
+}
+</style>

package/lib/nav/HamburgerMenu.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '../../index'
+
+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/sidebar/Sidebar.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    sidebarId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: DirectionX
+    width?: string | number
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'left',
+    width: 300,
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+const headerRef = ref<HTMLElement>()
+const footerRef = ref<HTMLElement>()
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openSidebar = (): void => {
+  toggle.value = true
+}
+const closeSidebar = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handleStyleVariables = computed(() => {
+  return {
+    '--sidebar-width': `${props.width}px`,
+    '--header-height':
+      headerRef.value && toggle.value
+        ? headerRef.value.scrollHeight + 'px'
+        : '0px',
+    '--footer-height':
+      footerRef.value && toggle.value
+        ? footerRef.value.scrollHeight + 'px'
+        : '0px',
+  }
+})
+const sidebarClass = computed(() => {
+  return props.placement === 'left' ? 'sidebar-left' : 'sidebar-right'
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  open: openSidebar,
+  close: closeSidebar,
+})
+</script>
+
+<template>
+  <div :style="handleStyleVariables">
+    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeSidebar"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      :name="sidebarClass"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        v-click-outside="closeSidebar"
+        class="sidebar-body fixed h-full overflow-hidden inset-y-0 shadow z-[110]"
+        :class="[placement === 'left' ? 'left-0' : 'right-0']"
+      >
+        <div
+          class="relative h-full overscroll-contain overflow-y-scroll"
+          :class="[generateClass('BGCOLOR', color), className]"
+        >
+          <div v-if="!noHeader" class="sticky top-0" ref="headerRef">
+            <slot name="header" :close="closeSidebar" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeSidebar">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+
+          <div class="sidebar-body-height">
+            <slot name="body" :close="closeSidebar" :status="toggle" />
+          </div>
+
+          <div class="sticky bottom-0" ref="footerRef">
+            <slot name="footer" :close="closeSidebar" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-body {
+  width: 100%;
+}
+.sidebar-body-height {
+  min-height: calc(100vh - var(--header-height) - var(--footer-height));
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-left-enter-active,
+.sidebar-left-leave-active,
+.sidebar-right-enter-active,
+.sidebar-right-leave-active {
+  transition-property: transform, opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.sidebar-left-enter-from,
+.sidebar-left-leave-to {
+  transform: translateX(-100%);
+}
+.sidebar-right-enter-from,
+.sidebar-right-leave-to {
+  transform: translateX(100%);
+}
+
+@media screen and (min-width: 768px) {
+  .sidebar-body {
+    width: var(--sidebar-width);
+  }
+  .sidebar-left-enter-from,
+  .sidebar-left-leave-to {
+    transform: translateX(calc(-1 * var(--sidebar-width)));
+  }
+  .sidebar-right-enter-from,
+  .sidebar-right-leave-to {
+    transform: translateX(var(--sidebar-width));
+  }
+}
+</style>

package/lib/tooltip/index.ts

@@ -0,0 +1,75 @@
+import { PropType, defineComponent, h, computed } from 'vue'
+import type { Direction, ColorPalette } from '../../'
+import generateClass from '../../'
+
+export default defineComponent({
+  props: {
+    direction: {
+      type: String as PropType<Direction>,
+      default: 'right',
+    },
+    color: {
+      type: String as PropType<ColorPalette>,
+      default: 'dark-3',
+    },
+    textColor: {
+      type: String as PropType<ColorPalette>,
+      default: 'white',
+    },
+    width: {
+      type: [Number, String],
+      default: 80,
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const defaultClassList: string =
+      'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip'
+    const colorClass = computed<string>(() => {
+      /**
+       * @param {ColorPalette} color - props
+       * @param {ColorPalette} textolor - props
+       */
+      const { color, textColor } = props
+      const classArray: string[] = [
+        generateClass('BGCOLOR', color),
+        generateClass('TEXTCOLOR', textColor),
+      ]
+      return classArray.join(' ')
+    })
+    const tooltipWidth = computed(() => {
+      return { width: `${props.width}px` }
+    })
+    const tooltipDirection = computed<string>(() => {
+      switch (props.direction) {
+        case 'left':
+          return 'tooltip-left'
+        case 'top':
+          return 'tooltip-top'
+        case 'bottom':
+          return 'tooltip-bottom'
+        default:
+          return 'tooltip-right'
+      }
+    })
+    return () =>
+      h('div', {
+        class: [
+          defaultClassList,
+          props.customClass,
+          tooltipDirection.value,
+          colorClass.value,
+        ],
+        role: 'tooltip',
+        innerHTML: props.title,
+        style: [tooltipWidth.value],
+      })
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
@@ -17,5 +17,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "79700f8b34204a6ecbe2f56d75f74a64c331055c"
+  "gitHead": "eb0833dd47a9dd0bb326bee28daf2bee4e421279"
 }

package/theme/index.ts

@@ -7,7 +7,7 @@ import type {
   Range,
   OpacityRange,
   SpacingLevel,
-  Position,
+  Alignment,
 } from './theme.types'
 
 /**
@@ -102,7 +102,7 @@ export type InputType =
   | Range<1, 12>
   | OpacityRange
   | SpacingLevel
-  | Position
+  | Alignment
 
 class GenerateMCLClass extends MCLTheme {
   classType: ClassType
@@ -449,7 +449,7 @@ class GenerateMCLClass extends MCLTheme {
   }
   // handle text align classes
   getTextAlignClass(): string {
-    return MCLTheme.textAlign[this.classValue as Position]
+    return MCLTheme.textAlign[this.classValue as Alignment]
   }
   // handle border width classes
   getBorderWidthClass(): string {

package/theme/theme.ts

@@ -11,7 +11,7 @@ import type {
   Range,
   OpacityRange,
   SpacingLevel,
-  Position,
+  Alignment as Position,
 } from './theme.types'
 
 export type ColorClass = {

package/theme/theme.types.ts

@@ -37,12 +37,15 @@ export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
 export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 // Font weight
 export type FontWeight = 'light' | 'normal' | 'bold'
-// border positions
-export type Position = 'left' | 'center' | 'right'
+// alignment
+export type Alignment = 'left' | 'center' | 'right'
+export type VerticalAlignment = 'top' | 'center' | 'bottom'
 // link targets
 export type CtaTarget = '_self' | '_blank'
 // Highlight positions
-export type Location = 'left' | 'right' | 'top' | 'bottom'
+export type Direction = 'left' | 'right' | 'top' | 'bottom'
+export type DirectionY = 'top' | 'bottom'
+export type DirectionX = 'left' | 'right'
 // available ranges
 type _RangeArray<
   T extends number,
@@ -60,7 +63,6 @@ export type Range<T extends number, R extends number> = IntRange<
 
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
-export type Directions = 'left' | 'right'
 export type ColumnWidth = 25 | 50 | 75 | 100
 export type CrossOrigin = 'use-credentials' | 'anonymous'
 export type InputType = 'text' | 'email' | 'password'

package/themeVariables.cjs

@@ -70,7 +70,7 @@ const mclTheme = plugin.withOptions(
               },
             },
             [`.btn.btn-invert.btn-${e(key)}`]: {
-              [`@apply border-2 bg-white border-${key} text-${key}`]: {},
+              [`@apply border-2 bg-transparent border-${key} text-${key}`]: {},
               '&:hover': {
                 [`@apply bg-${key} text-white bg-opacity-100`]: {},
               },
@@ -141,6 +141,48 @@ const mclTheme = plugin.withOptions(
           ),
         }
       }, {})
+      const tooltipColors = Object.keys(colors).reduce((accumulator, key) => {
+        // const invalidKeys = ['current', 'transparent', 'inherit']
+        // if (invalidKeys.includes(key)) {
+        //   return
+        // }
+        if (typeof colors[key] === 'string') {
+          return {
+            ...accumulator,
+            [`.tooltip.tooltip-top.bg-${e(key)}`]: {
+              [`@apply after:border-t-${key}`]: {},
+            },
+            [`.tooltip.tooltip-bottom.bg-${e(key)}`]: {
+              [`@apply after:border-b-${key}`]: {},
+            },
+            [`.tooltip.tooltip-right.bg-${e(key)}`]: {
+              [`@apply after:border-r-${key}`]: {},
+            },
+            [`.tooltip.tooltip-left.bg-${e(key)}`]: {
+              [`@apply after:border-l-${key}`]: {},
+            },
+          }
+        }
+        const colorShades = Object.keys(colors[key])
+        return {
+          ...accumulator,
+          ...colorShades.reduce((acc, level) => ({
+            ...acc,
+            [`.tooltip.tooltip-top.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-t-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-bottom.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-b-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-right.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-r-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-left.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-l-${key}-${level}`]: {},
+            },
+          })),
+        }
+      }, {})
 
       addBase({
         body: {
@@ -417,11 +459,80 @@ const mclTheme = plugin.withOptions(
               left: '0',
             },
           },
+        '.tooltip': {
+          '@apply font-normal text-sm transition-opacity duration-200 p-2xs absolute rounded text-center drop-shadow-md':
+            {},
+        },
+        '.tooltip.tooltip-top': {
+          left: '50%',
+          bottom: '110%',
+          transform: 'translateX(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '100%',
+            left: '50%',
+            'margin-left': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-t-dark-3 after:border-x-transparent after:border-b-transparent':
+            {},
+        },
+        '.tooltip.tooltip-bottom': {
+          left: '50%',
+          top: '110%',
+          transform: 'translateX(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            'margin-left': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-t-transparent after:border-x-transparent after:border-b-dark-3':
+            {},
+        },
+        '.tooltip.tooltip-left': {
+          top: '50%',
+          right: '110%',
+          transform: 'translateY(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '50%',
+            left: '100%',
+            'margin-top': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-y-transparent after:border-r-transparent after:border-l-dark-3':
+            {},
+        },
+        '.tooltip.tooltip-right': {
+          top: '50%',
+          left: '110%',
+          transform: 'translateY(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '50%',
+            right: '100%',
+            'margin-top': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-y-transparent after:border-l-transparent after:border-r-dark-3':
+            {},
+        },
       })
 
       addUtilities(listColors)
       addUtilities(btnColors)
       addUtilities(linkColors)
+      addUtilities(tooltipColors)
     }
   },
   (options = {}) => {