@bobbykim/manguito-theme 0.3.0 → 0.4.0

package/index.ts

@@ -5,9 +5,13 @@ import GenerateMCLClass, {
   scaleType,
 } from './theme'
 import type { ClassType, InputType } from './theme/index.js'
+// base components
+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'
 
 const generateClass = (type: ClassType, value: InputType): string => {
-  console.log('running generate class')
   const mclGenerate = new GenerateMCLClass(type, value)
   if ((<string[]>(<unknown>colorType)).includes(type)) {
     return mclGenerate.generateColorClass()
@@ -26,3 +30,6 @@ const generateClass = (type: ClassType, value: InputType): string => {
 }
 
 export default generateClass
+
+export { DropdownContainer, DropdownContent, Collapse, CollapseEvent }
+export * from './lib/directives'

package/lib/collapse/Collapse.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import type { CollapseEvent } from './index.types'
+const props = withDefaults(
+  defineProps<{
+    collapseId: string
+    accordion?: string
+    className?: string
+    visible?: boolean
+  }>(),
+  {
+    className: '',
+    visible: false,
+  }
+)
+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
+}
+const slotHeightVal = computed(() => {
+  return {
+    height: contentRef.value && toggle.value ? slotHeight.value + 'px' : '0px',
+  }
+})
+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>
+  <div>
+    <button
+      :id="collapseId"
+      @click="handleToggleEvent"
+      class="hidden"
+      :accordion="accordion"
+      :visible="toggle"
+    ></button>
+    <div
+      class="overflow-hidden transition-[height] duration-500"
+      :style="slotHeightVal"
+      :class="[toggle ? 'ease-in' : 'ease-out']"
+    >
+      <div
+        ref="contentRef"
+        class="transition-opacity duration-500"
+        :class="[
+          toggle ? 'opacity-100 ease-in' : 'opacity-0 ease-out',
+          className,
+        ]"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/lib/collapse/index.types.ts

@@ -0,0 +1,3 @@
+export interface CollapseEvent extends Event {
+  visible: boolean
+}

package/lib/directives/index.ts

@@ -0,0 +1,57 @@
+import { Directive } from 'vue'
+
+export const vClickOutside: Directive = {
+  mounted(el, binding) {
+    el.__ClickOutsideHandler = (event: Event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event)
+      }
+    }
+    document.body.addEventListener('click', el.__ClickOutsideHandler)
+  },
+  unmounted(el) {
+    document.body.removeEventListener('click', el.__ClickOutsideHandler)
+  },
+}
+
+export const vCollapse: Directive = {
+  mounted(el, binding) {
+    el.__HandleToggler = (event: Event): void => {
+      const eTarget = event.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
+        ) as HTMLElement
+      } else {
+        target = document.getElementById(binding.arg as string) as HTMLElement
+      }
+      if (!target.hasAttribute('accordion')) {
+        // run when it is not accordion component case
+        target.click()
+        return
+      }
+      const accordionName = target.getAttribute('accordion')
+      const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+        `button[accordion="${accordionName}"]`
+      )
+      // loop through each accordion items and handle reaction for each case
+      for (let i = 0; i < accordionList.length; i++) {
+        const isVisible = accordionList[i].getAttribute('visible')
+        if (accordionList[i].id !== target.id && isVisible === 'true') {
+          accordionList[i].click()
+        }
+        if (accordionList[i].id === target.id) {
+          accordionList[i].click()
+        }
+      }
+    }
+    el.addEventListener('click', el.__HandleToggler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__HandleToggler)
+  },
+}

package/lib/dropdown/DropdownContainer.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { reactive, provide, ref, onMounted } from 'vue'
+import type { InjectType } from './index.types'
+import { vClickOutside } from '../directives'
+
+const emit = defineEmits(['click-outside', 'toggle'])
+const dropdownTarget = ref()
+const dropdownState = reactive<InjectType>({
+  active: false,
+  buttonHeight: 0,
+})
+provide('dropdownState', dropdownState)
+const toggle = (e: Event): void => {
+  dropdownState.active = !dropdownState.active
+  emit('toggle', e)
+}
+const onClickOutside = (e: Event): void => {
+  dropdownState.active = false
+  emit('click-outside', e)
+}
+const onEscape = (): void => {
+  dropdownState.active = false
+}
+onMounted(() => {
+  if (typeof window !== undefined) {
+    dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
+  }
+})
+</script>
+
+<template>
+  <div
+    class="relative"
+    ref="dropdownTarget"
+    v-click-outside="onClickOutside"
+    @keyup.esc="onEscape"
+  >
+    <slot
+      name="toggler"
+      :toggle="toggle"
+      :dropdown-state="dropdownState.active"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/lib/dropdown/DropdownContent.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, inject, Transition } from 'vue'
+import { InjectType } from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    className?: string
+  }>(),
+  {
+    className: '',
+  }
+)
+const contentRef = ref<HTMLAreaElement>()
+const dropdownState = inject<InjectType>('dropdownState', {
+  active: false,
+  buttonHeight: 0,
+})
+const active = computed<boolean>(() => {
+  return dropdownState.active
+})
+const handleItemClick = () => {
+  dropdownState.active = false
+}
+const buttonHeight = computed(() => {
+  return { '--button-height': `${dropdownState.buttonHeight}px` }
+})
+const dropdownDirection = computed<string | undefined>(() => {
+  if (typeof window === undefined) {
+    return
+  }
+  if (!dropdownState.active || !contentRef.value) {
+    return
+  }
+  if (
+    window.innerHeight - contentRef.value.getBoundingClientRect().bottom <
+    0
+  ) {
+    return 'dropup-bottom'
+  }
+})
+</script>
+
+<template>
+  <transition name="dropdown-content">
+    <div
+      v-if="active"
+      ref="contentRef"
+      class="absolute my-2xs max-w-[14rem] w-max overflow-hidden"
+      :class="[dropdownDirection, className]"
+      :style="buttonHeight"
+    >
+      <slot :item-click="handleItemClick" />
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.dropup-bottom {
+  bottom: var(--button-height);
+}
+.dropdown-content-enter-active,
+.dropdown-content-leave-active {
+  transition: all 0.3s;
+}
+.dropdown-content-enter-from,
+.dropdown-content-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/lib/dropdown/index.types.ts

@@ -0,0 +1,4 @@
+export type InjectType = {
+  active: boolean
+  buttonHeight: number
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.3.0",
+  "version": "0.4.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": "2c169fa8137650bf3fbc02ef2158c4c4e147a9ce"
+  "gitHead": "79700f8b34204a6ecbe2f56d75f74a64c331055c"
 }

package/theme/index.ts

@@ -21,6 +21,7 @@ export const colorType = [
   'BEFOREBG',
   'AFTERBG',
   'HVBGCOLOR',
+  'FCBGCOLOR',
   'ACTIVEBG',
   'TEXTCOLOR',
   'HVTEXTCOLOR',
@@ -119,6 +120,8 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBgColorClass()
       case 'HVBGCOLOR':
         return this.getHoverBgColorClass()
+      case 'FCBGCOLOR':
+        return this.getFocusBgColorClass()
       case 'BEFOREBG':
         return this.getBeforeBgColorClass()
       case 'AFTERBG':
@@ -274,6 +277,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.hoverBgColor[this.classValue as ColorPalette]
   }
+  getFocusBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.focusBgColor[this.classValue as ColorPalette]
+  }
   getBeforeBgColorClass(): string {
     if (!this.validateColorType) {
       return ' '

package/theme/theme.ts

@@ -60,7 +60,7 @@ abstract class MCLTheme {
     white: 'bg-white',
     transparent: 'bg-transparent',
   }
-  // hover bg color class
+  // hover: bg color class
   protected static hoverBgColor: ColorClass = {
     primary: 'hover:bg-primary',
     secondary: 'hover:bg-secondary',
@@ -80,6 +80,26 @@ abstract class MCLTheme {
     white: 'hover:bg-white',
     transparent: 'hover:bg-transparent',
   }
+  // focus: bg color class
+  protected static focusBgColor: ColorClass = {
+    primary: 'focus:bg-primary',
+    secondary: 'focus:bg-secondary',
+    success: 'focus:bg-success',
+    danger: 'focus:bg-danger',
+    info: 'focus:bg-info',
+    warning: 'focus:bg-warning',
+    'light-1': 'focus:bg-light-1',
+    'light-2': 'focus:bg-light-2',
+    'light-3': 'focus:bg-light-3',
+    'light-4': 'focus:bg-light-4',
+    'dark-1': 'focus:bg-dark-1',
+    'dark-2': 'focus:bg-dark-2',
+    'dark-3': 'focus:bg-dark-3',
+    'dark-4': 'focus:bg-dark-4',
+    black: 'focus:bg-black',
+    white: 'focus:bg-white',
+    transparent: 'focus:bg-transparent',
+  }
   // ::before bg color class
   protected static beforeBgColor: ColorClass = {
     primary: 'before:bg-primary',

package/themeVariables.cjs

@@ -83,6 +83,11 @@ const mclTheme = plugin.withOptions(
                 '@apply ring-0': {},
               },
             },
+            [`.btn.btn-${e(key)}.btn-no-ring`]: {
+              '&:focus': {
+                '@apply ring-0': {},
+              },
+            },
             [`.btn.btn-progress.btn-${e(key)}`]: {
               [`@apply before:bg-${key} border-${key} text-${key} bg-transparent`]:
                 {},
@@ -364,6 +369,12 @@ const mclTheme = plugin.withOptions(
             '@apply ring-0': {},
           },
         },
+        '.btn.btn-no-ring': {
+          '@apply ring-offset-0': {},
+          '&:focus': {
+            '@apply ring-0': {},
+          },
+        },
         '.btn.btn-invert': {
           '@apply border-2 border-primary text-primary bg-white': {},
           '&:hover': {