webcoreui 0.2.0 → 0.4.0

package/utils/modal.ts

@@ -1,59 +1,122 @@
-export const modal = (element: string) => {
-    const htmlElement = document.querySelector(element) as HTMLElement
+type Callback = {
+    trigger: Element | null
+    modal: HTMLElement
+}
+
+type Modal = {
+    trigger: string
+    modal: string
+    onOpen?: (args: Callback) => unknown
+    onClose?: (args: Callback) => unknown
+}
+
+export const modal = (config: Modal | string) => {
+    const {
+        trigger,
+        modal,
+        onOpen,
+        onClose
+    } = (typeof config === 'string' ? {} : config) as Modal
+
+    const modalSelector = typeof config === 'string' ? config : modal
+
+    const triggerDOM = document.querySelector(trigger)
+    const modalDOM = document.querySelector(modalSelector) as HTMLElement
+
+    if (modalDOM) {
+        const closeOptions = modalDOM.dataset.close?.split(',')
 
-    if (htmlElement) {
         const handleClose = {
-            icon: () => {
-                const close = htmlElement.querySelector('[data-id="close"]')
+            icon() {
+                const close = modalDOM.querySelector('[data-id="close"]')
 
                 const listener = () => {
-                    htmlElement.dataset.show = ''
+                    modalDOM.dataset.show = ''
 
-                    close?.removeEventListener('click', listener)
+                    onClose?.({
+                        trigger: triggerDOM,
+                        modal: modalDOM
+                    })
                 }
 
-                close?.addEventListener('click', listener)
+                return {
+                    add: () => close?.addEventListener('click', listener),
+                    remove: () => close?.removeEventListener('click', listener)
+                }
             },
-    
-            esc: () => {
+
+            esc() {
                 const listener = (event: KeyboardEvent) => {
-                    if (event.key === 'Escape') {
-                        htmlElement.dataset.show = ''
+                    if (modalDOM.dataset.show && event.key === 'Escape') {
+                        modalDOM.dataset.show = ''
+
+                        onClose?.({
+                            trigger: triggerDOM,
+                            modal: modalDOM
+                        })
 
-                        document.removeEventListener('keydown', listener)
                     }
                 }
 
-                document.addEventListener('keydown', listener)
+                return {
+                    add: () => document.addEventListener('keydown', listener),
+                    remove: () => document.removeEventListener('keydown', listener)
+                }
             },
-    
-            overlay: () => {
-                const close = htmlElement.nextElementSibling
+
+            overlay() {
+                const close = modalDOM.nextElementSibling
 
                 const listener = () => {
-                    htmlElement.dataset.show = ''
+                    modalDOM.dataset.show = ''
 
-                    close?.removeEventListener('click', listener)
+                    onClose?.({
+                        trigger: triggerDOM,
+                        modal: modalDOM
+                    })
                 }
 
-                close?.addEventListener('click', listener)
+                return {
+                    add: () => close?.addEventListener('click', listener),
+                    remove: () => close?.removeEventListener('click', listener)
+                }
             }
         }
 
-        const closeOptions = htmlElement.dataset.close?.split(',')
+        const handleOpen = () => {
+            modalDOM.dataset.show = 'true'
+
+            onOpen?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
 
-        htmlElement.dataset.show = 'true'
+        triggerDOM?.addEventListener('click', handleOpen)
 
         closeOptions?.forEach(option => {
-            handleClose[option as keyof typeof handleClose]()
+            handleClose[option as keyof typeof handleClose]().add()
         })
+
+        return {
+            open() {
+                handleOpen()
+            },
+            remove() {
+                triggerDOM?.removeEventListener('click', handleOpen)
+
+                closeOptions?.forEach(option => {
+                    handleClose[option as keyof typeof handleClose]().remove()
+                })
+            }
+        }
     }
 }
 
-export const closeModal = (element: string) => {
-    const htmlElement = document.querySelector(element) as HTMLElement
+export const closeModal = (modal: string) => {
+    const modalDOM = document.querySelector(modal) as HTMLElement
 
-    if (htmlElement) {
-        htmlElement.dataset.show = ''
+    if (modalDOM) {
+        modalDOM.dataset.show = ''
     }
 }

package/utils/popover.ts

@@ -0,0 +1,223 @@
+import { debounce } from './debounce'
+import { closeModal } from './modal'
+
+export type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | '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 = ({
+    trigger,
+    popover,
+    position,
+    offset = 10,
+    closeOnBlur = true,
+    onOpen,
+    onClose
+}: Popover) => {
+    const triggerDOM = document.querySelector(trigger) as HTMLElement
+    const popoverDOM = document.querySelector(popover) as HTMLElement
+
+    if (triggerDOM && popoverDOM) {
+        document.body.appendChild(popoverDOM)
+
+        if (position) {
+            popoverDOM.dataset.position = position.split('-')[0]
+        }
+
+        const handleOpen = () => {
+            const triggerPosition = triggerDOM.getBoundingClientRect()
+            const popoverPosition = popoverDOM.getBoundingClientRect()
+
+            const topSide = triggerPosition.top
+                + window.scrollY
+                - popoverPosition.height
+                - offset
+
+            const bottomSide = triggerPosition.top
+                + window.scrollY
+                + triggerPosition.height
+                + offset
+
+            const leftSide = triggerPosition.left
+                - popoverPosition.width
+                - offset
+
+            const rightSide = triggerPosition.left
+                + triggerPosition.width
+                + offset
+
+            const hcenter = triggerPosition.left
+                - ((popoverPosition.width - triggerPosition.width) / 2)
+
+            const hEnd = triggerPosition.left
+                - (popoverPosition.width - triggerPosition.width)
+
+            const vcenter = triggerPosition.top
+                + window.scrollY
+                - ((popoverPosition.height - triggerPosition.height) / 2)
+
+            const vStart = triggerPosition.top + window.scrollY
+            const vEnd = triggerPosition.top
+                + window.scrollY
+                - (popoverPosition.height - triggerPosition.height)
+
+            const positions = {
+                'top-start': {
+                    top: topSide,
+                    left: triggerPosition.left
+                },
+                'top': {
+                    top: topSide,
+                    left: hcenter
+                },
+                'top-end': {
+                    top: topSide,
+                    left: hEnd
+                },
+                'left-start': {
+                    top: vStart,
+                    left: leftSide
+                },
+                'left': {
+                    top: vcenter,
+                    left: leftSide
+                },
+                'left-end': {
+                    top: vEnd,
+                    left: leftSide
+                },
+                'right-start': {
+                    top: vStart,
+                    left: rightSide
+                },
+                'right': {
+                    top: vcenter,
+                    left: rightSide
+                },
+                'right-end': {
+                    top: vEnd,
+                    left: rightSide
+                },
+                'bottom-start': {
+                    top: bottomSide,
+                    left: triggerPosition.left
+                },
+                'bottom': {
+                    top: bottomSide,
+                    left: hcenter
+                },
+                'bottom-end': {
+                    top: bottomSide,
+                    left: hEnd
+                }
+            }
+
+            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'
+                    ? ''
+                    : 'true'
+            }, 0)
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+
+            onOpen?.({
+                trigger: triggerDOM,
+                popover: popoverDOM,
+                position
+            })
+        }
+
+        const handleClose = (event: MouseEvent) => {
+            const target = event.target as HTMLElement
+            const hidePopover = !popoverDOM.contains(target)
+                && !triggerDOM.contains(target)
+                && popoverDOM.dataset.show
+
+            if (hidePopover) {
+                popoverDOM.dataset.show = ''
+
+                onClose?.({
+                    trigger: triggerDOM,
+                    popover: popoverDOM,
+                    position
+                })
+            }
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        }
+
+        const removeOnResize = debounce(() => {
+            popoverDOM.dataset.show = ''
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        })
+
+        const observer = new ResizeObserver(() => {
+            if (popoverDOM.dataset.show) {
+                removeOnResize()
+            }
+        })
+
+        triggerDOM.addEventListener('click', handleOpen)
+        observer.observe(document.body)
+
+        if (closeOnBlur) {
+            document.addEventListener('click', handleClose)
+        }
+
+        return {
+            remove() {
+                triggerDOM.removeEventListener('click', handleOpen)
+                observer.disconnect()
+
+                if (closeOnBlur) {
+                    document.removeEventListener('click', handleClose)
+                }
+            }
+        }
+    }
+}
+
+export const closePopover = closeModal

package/utils/toast.ts

@@ -6,7 +6,6 @@ type Toast = {
     timeout?: number
     title?: AlertProps['title']
     content?: string
-    theme?: AlertProps['theme']
     position?: ToastProps['position']
 }
 
@@ -23,17 +22,12 @@ export const toast = (config: Toast | string) => {
         timeout,
         title,
         content,
-        theme,
         position
     } = (typeof config === 'string' ? {} : config) as Toast
 
     const htmlElement = document.querySelector(element) as HTMLElement
 
     if (htmlElement) {
-        if (theme) {
-            htmlElement.dataset.theme = theme
-        }
-        
         if (position) {
             htmlElement.dataset.position = position
         }
@@ -41,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(() => {