webcoreui 0.3.0 → 0.4.1

package/utils/popover.ts

@@ -1,7 +1,7 @@
-import { closeModal } from './modal'
 import { debounce } from './debounce'
+import { closeModal } from './modal'
 
-type PopoverPosition = 'top'
+export type PopoverPosition = 'top'
     | 'top-start'
     | 'top-end'
     | 'left'
@@ -14,12 +14,20 @@ type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+type Callback = {
+    trigger: HTMLElement
+    popover: HTMLElement
+    position: PopoverPosition | undefined
+}
+
 type Popover = {
     trigger: string
     popover: string
     position?: PopoverPosition
     offset?: number
     closeOnBlur?: boolean
+    onOpen?: (args: Callback) => unknown
+    onClose?: (args: Callback) => unknown
 }
 
 export const popover = ({
@@ -27,12 +35,14 @@ export const popover = ({
     popover,
     position,
     offset = 10,
-    closeOnBlur = true
+    closeOnBlur = true,
+    onOpen,
+    onClose
 }: Popover) => {
     const triggerDOM = document.querySelector(trigger) as HTMLElement
     const popoverDOM = document.querySelector(popover) as HTMLElement
 
-    if (triggerDOM && popover) {
+    if (triggerDOM && popoverDOM) {
         document.body.appendChild(popoverDOM)
 
         if (position) {
@@ -48,7 +58,7 @@ export const popover = ({
                 - popoverPosition.height
                 - offset
 
-            const bottomSide = triggerPosition.top 
+            const bottomSide = triggerPosition.top
                 + window.scrollY
                 + triggerPosition.height
                 + offset
@@ -128,10 +138,10 @@ export const popover = ({
             }
 
             const { top, left } = positions[position as keyof typeof positions] || positions.bottom
-    
+
             popoverDOM.style.top = `${top}px`
             popoverDOM.style.left = `${left}px`
-            
+
             setTimeout(() => {
                 popoverDOM.dataset.show = popoverDOM.dataset.show === 'true'
                     ? ''
@@ -143,6 +153,12 @@ export const popover = ({
                     popoverDOM.removeAttribute('data-show')
                 }
             }, 300)
+
+            onOpen?.({
+                trigger: triggerDOM,
+                popover: popoverDOM,
+                position
+            })
         }
 
         const handleClose = (event: MouseEvent) => {
@@ -153,6 +169,12 @@ export const popover = ({
 
             if (hidePopover) {
                 popoverDOM.dataset.show = ''
+
+                onClose?.({
+                    trigger: triggerDOM,
+                    popover: popoverDOM,
+                    position
+                })
             }
 
             setTimeout(() => {
@@ -187,7 +209,7 @@ export const popover = ({
 
         return {
             remove() {
-                triggerDOM.removeEventListener('click', handleOpen);
+                triggerDOM.removeEventListener('click', handleOpen)
                 observer.disconnect()
 
                 if (closeOnBlur) {

package/utils/toast.ts

@@ -35,13 +35,17 @@ export const toast = (config: Toast | string) => {
         if (title) {
             const titleElement = htmlElement.querySelector('[data-id="title"]')
 
-            titleElement ? titleElement.innerHTML = title : null
+            if (titleElement) {
+                titleElement.innerHTML = title
+            }
         }
 
         if (content) {
             const contentElement = htmlElement.querySelector('[data-id="body"]')
 
-            contentElement ? contentElement.innerHTML = content : null
+            if (contentElement) {
+                contentElement.innerHTML = content
+            }
         }
 
         setTimeout(() => {