@bobbykim/manguito-theme 0.6.0 → 0.7.0

package/lib/collapse/Collapse.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, watch, Transition } from 'vue'
-import type { CollapseEvent } from './index.types'
+import { ref, watch, Transition, onMounted, onBeforeUnmount } from 'vue'
+import { observeVisibleAttr } from '../composables'
+
 const props = withDefaults(
   defineProps<{
-    collapseId: string
     accordion?: string
     className?: string
     visible?: boolean
@@ -13,12 +13,24 @@ const props = withDefaults(
     visible: false,
   }
 )
-const emit = defineEmits(['toggle'])
+const emit = defineEmits(['open', 'close'])
+const collapseRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 
-const handleToggleEvent = (e: Event): void => {
+const toggleCollapse = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
+}
+const openCollapse = (): void => {
+  toggle.value = true
+}
+const closeCollapse = (): void => {
+  toggle.value = false
+}
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
 }
 
 /**
@@ -45,30 +57,49 @@ const onLeave = (el: any) => {
   el.style.opacity = '0'
 }
 
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false) {
+    emitCloseEvent()
+  }
+})
+defineExpose({
+  toggle: toggleCollapse,
+  close: closeCollapse,
+  open: openCollapse,
+})
+onMounted(() => {
+  if (collapseRef.value) {
+    observer.observe(collapseRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div>
-    <button
-      :id="collapseId"
-      @click="handleToggleEvent"
-      class="hidden"
-      :accordion="accordion"
-      :visible="toggle"
-    ></button>
+  <div :accordion="accordion" :visible="toggle" ref="collapseRef">
     <transition
       name="collapse"
       tag="div"
       @enter="onEnter"
       @after-enter="onAfterEnter"
       @leave="onLeave"
-      class="overflow-hidden"
+      class="overflow-y-clip"
     >
       <div v-show="toggle">
         <div :class="[className]">

package/lib/collapse/index.types.ts

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

package/lib/composables/index.ts

@@ -0,0 +1 @@
+export * from './observeVisible'

package/lib/composables/observeVisible.ts

@@ -0,0 +1,24 @@
+export const observeVisibleAttr = (fn: (...args: any[]) => void) => {
+  const observer = new MutationObserver((mutations) => {
+    let changed = false
+    for (let i = 0; i < mutations.length && !changed; i++) {
+      const mutation = mutations[i]
+      const mutationType = mutation.type
+      const mutationAttribute = mutation.attributeName
+      const mutationTarget = mutation.target
+      if (mutationType === 'attributes') {
+        changed = true
+      } else if (mutationAttribute === 'visible') {
+        changed = true
+      }
+      if (changed) {
+        const visibleAttr =
+          (mutationTarget as HTMLElement).getAttribute('visible') === 'true'
+            ? true
+            : false
+        fn(visibleAttr)
+      }
+    }
+  })
+  return observer
+}

package/lib/directives/index.ts

@@ -31,7 +31,15 @@ export const vToggle: Directive = {
       } else {
         target = document.getElementById(binding.arg as string)!
       }
-      target.click()
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
+      const targetAttr = target.getAttribute('visible')
+      const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+      target.setAttribute('visible', attrAfterToggle)
       return
     }
     el.addEventListener('click', el.__ClickToggleHandler)
@@ -43,6 +51,37 @@ export const vToggle: Directive = {
 
 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)!
+    //   } 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.__HandleToggler = (event: Event): void => {
       const eTarget = event.target as HTMLElement
       let target: HTMLElement
@@ -54,23 +93,36 @@ export const vCollapse: Directive = {
       } else {
         target = document.getElementById(binding.arg as string) as HTMLElement
       }
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
       if (!target.hasAttribute('accordion')) {
         // run when it is not accordion component case
-        target.click()
+        const targetAttr = target.getAttribute('visible')
+        const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+        target.setAttribute('visible', attrAfterToggle)
+        // target.click()
         return
       }
       const accordionName = target.getAttribute('accordion')
       const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
-        `button[accordion="${accordionName}"]`
+        `div[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()
+          accordionList[i].setAttribute('visible', 'false')
+          // accordionList[i].click()
         }
         if (accordionList[i].id === target.id) {
-          accordionList[i].click()
+          const targetAttr = target.getAttribute('visible')
+          const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+          target.setAttribute('visible', attrAfterToggle)
+          // accordionList[i].click()
         }
       }
     }

package/lib/modal/Modal.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, {
   ColorPalette,
   vClickOutside,
   VerticalAlignment,
 } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    modalId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -31,23 +38,31 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
+const modalRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
 
-const handleToggleEvent = (e: Event): void => {
+// const handleToggleEvent = (): void => {
+//   toggle.value = !toggle.value
+// }
+const toggleModal = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
 }
 const openModal = (): void => {
   toggle.value = true
 }
-const closeModal = (e: Event): void => {
+const closeModal = (): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handlePlacementVar = computed(() => {
   let placementVariable: number
   if (props.placement === 'top') {
@@ -70,22 +85,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleModal,
   close: closeModal,
   open: openModal,
 })
+onMounted(() => {
+  if (modalRef.value) {
+    observer.observe(modalRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handlePlacementVar">
-    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handlePlacementVar" :visible="toggle" ref="modalRef">
+    <!-- <button :id="modalId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

package/lib/sidebar/Sidebar.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    sidebarId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -29,15 +36,18 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
+const sidebarRef = ref<HTMLElement | undefined>()
 const headerRef = ref<HTMLElement>()
 const footerRef = ref<HTMLElement>()
 
 const handleToggleEvent = (e: Event): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
+}
+const toggleSidebar = (): void => {
+  toggle.value = !toggle.value
 }
 const openSidebar = (): void => {
   toggle.value = true
@@ -45,9 +55,14 @@ const openSidebar = (): void => {
 const closeSidebar = (e: Event): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handleStyleVariables = computed(() => {
   return {
     '--sidebar-width': `${props.width}px`,
@@ -75,22 +90,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleSidebar,
   open: openSidebar,
   close: closeSidebar,
 })
+onMounted(() => {
+  if (sidebarRef.value) {
+    observer.observe(sidebarRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handleStyleVariables">
-    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handleStyleVariables" :visible="toggle" ref="sidebarRef">
+    <!-- <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.6.0",
+  "version": "0.7.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": "eb0833dd47a9dd0bb326bee28daf2bee4e421279"
+  "gitHead": "576d9aa7a55803b0dd7391bf81d00081848135ec"
 }

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./**/*.vue", "./**/*.ts"],
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}