webcoreui 1.1.0 → 1.2.0

package/utils/DOMUtils.ts

@@ -8,8 +8,8 @@ export const on = (
     callback: any,
     all?: boolean
 ) => {
-    if (all) {
-        const elements = document.querySelectorAll(selector as string)
+    if (all && typeof selector === 'string') {
+        const elements = document.querySelectorAll(selector)
 
         elements?.forEach(element => {
             element.addEventListener(event, callback)
@@ -26,3 +26,28 @@ export const on = (
 
     selector?.addEventListener(event, callback)
 }
+
+export const off = (
+    selector: string | HTMLElement | Document,
+    event: string,
+    fn: any,
+    all?: boolean
+) => {
+    if (all && typeof selector === 'string') {
+        const elements = document.querySelectorAll(selector)
+
+        elements?.forEach(element => {
+            element.removeEventListener(event, fn)
+        })
+
+        return
+    }
+
+    if (typeof selector === 'string') {
+        (get(selector) as HTMLElement)?.removeEventListener(event, fn)
+
+        return
+    }
+
+    selector?.removeEventListener(event, fn)
+}

package/utils/bodyFreeze.ts

@@ -1,5 +1,5 @@
 export const bodyFreeze = (freeze = true) => {
-    const scrollbarWidth = window.innerWidth - document.body.clientWidth
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
 
     if (freeze) {
         document.body.style.paddingRight = `${scrollbarWidth}px`

package/utils/context.ts

@@ -1,9 +1,9 @@
 export const closeContext = (ctx: string | HTMLElement) => {
     const element = typeof ctx === 'string'
-        ? document.querySelector(ctx) as HTMLElement
+        ? document.querySelector(ctx)
         : ctx
 
-    const parent = element?.parentElement as HTMLElement
+    const parent = element?.parentElement
 
     if (!parent) {
         // eslint-disable-next-line no-console

package/utils/getBreakpoint.ts

@@ -0,0 +1,17 @@
+import { isOneOf } from './isOneOf'
+
+const breakpoints = ['xs', 'sm', 'md', 'lg'] as const
+
+export type Breakpoint = typeof breakpoints[number]
+
+export const getBreakpoint = (): Breakpoint => {
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue('--w-breakpoint')
+        .trim()
+
+    if (isOneOf<Breakpoint>(breakpoints)(value)) {
+        return value
+    }
+
+    throw new Error(`Unexpected breakpoint: ${value}`)
+}

package/utils/isOneOf.ts

@@ -0,0 +1,5 @@
+export const isOneOf = <T extends string>(values: readonly T[]) => {
+    return (value: string): value is T => {
+        return (values as readonly string[]).includes(value)
+    }
+}

package/utils/modal.ts

@@ -1,5 +1,12 @@
 import { bodyFreeze } from './bodyFreeze'
 
+export type ModalInstance = {
+    open: (freeze?: boolean) => void
+    close: () => void
+    replaceWith: (modal: ModalInstance) => void
+    remove: () => void
+}
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -12,7 +19,7 @@ export type Modal = {
     onClose?: (args: ModalCallback) => unknown
 }
 
-export const modal = (config: Modal | string) => {
+export const modal = (config: Modal | string): ModalInstance | undefined => {
     const {
         trigger,
         modal,
@@ -23,44 +30,51 @@ export const modal = (config: Modal | string) => {
     const modalSelector = typeof config === 'string' ? config : modal
 
     const triggerDOM = document.querySelector(trigger)
-    const modalDOM = document.querySelector(modalSelector) as HTMLElement
+    const modalDOM = document.querySelector(modalSelector)
 
-    if (modalDOM) {
+    if (modalDOM instanceof HTMLElement) {
         const closeOptions = modalDOM.dataset.close?.split(',')
 
-        const handleClose = {
-            icon() {
-                const close = modalDOM.querySelector('[data-id="close"]')
+        const handleOpen = (_e?: Event, freeze = true) => {
+            modalDOM.dataset.show = 'true'
+
+            if (freeze) {
+                bodyFreeze()
+            }
+
+            onOpen?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
 
-                const listener = () => {
-                    modalDOM.dataset.show = ''
+        const handleClose = (_e?: Event, unfreeze = true) => {
+            modalDOM.dataset.show = ''
 
-                    bodyFreeze(false)
+            if (unfreeze) {
+                bodyFreeze(false)
+            }
 
-                    onClose?.({
-                        trigger: triggerDOM,
-                        modal: modalDOM
-                    })
-                }
+            onClose?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
+
+        const closeHandlers = {
+            icon() {
+                const close = modalDOM.querySelector('[data-id="close"]')
 
                 return {
-                    add: () => close?.addEventListener('click', listener),
-                    remove: () => close?.removeEventListener('click', listener)
+                    add: () => close?.addEventListener('click', handleClose),
+                    remove: () => close?.removeEventListener('click', handleClose)
                 }
             },
 
             esc() {
                 const listener = (event: KeyboardEvent) => {
                     if (modalDOM.dataset.show && event.key === 'Escape') {
-                        modalDOM.dataset.show = ''
-
-                        bodyFreeze(false)
-
-                        onClose?.({
-                            trigger: triggerDOM,
-                            modal: modalDOM
-                        })
-
+                        handleClose()
                     }
                 }
 
@@ -73,50 +87,35 @@ export const modal = (config: Modal | string) => {
             overlay() {
                 const close = modalDOM.nextElementSibling
 
-                const listener = () => {
-                    modalDOM.dataset.show = ''
-
-                    bodyFreeze(false)
-
-                    onClose?.({
-                        trigger: triggerDOM,
-                        modal: modalDOM
-                    })
-                }
-
                 return {
-                    add: () => close?.addEventListener('click', listener),
-                    remove: () => close?.removeEventListener('click', listener)
+                    add: () => close?.addEventListener('click', handleClose),
+                    remove: () => close?.removeEventListener('click', handleClose)
                 }
             }
         }
 
-        const handleOpen = () => {
-            modalDOM.dataset.show = 'true'
-
-            bodyFreeze()
-
-            onOpen?.({
-                trigger: triggerDOM,
-                modal: modalDOM
-            })
-        }
-
         triggerDOM?.addEventListener('click', handleOpen)
 
         closeOptions?.forEach(option => {
-            handleClose[option as keyof typeof handleClose]().add()
+            closeHandlers[option as keyof typeof closeHandlers]().add()
         })
 
         return {
-            open() {
-                handleOpen()
+            open(freeze?: boolean) {
+                handleOpen(undefined, freeze)
+            },
+            close() {
+                handleClose()
+            },
+            replaceWith(modal: ModalInstance) {
+                modal.open(false)
+                handleClose(undefined, false)
             },
             remove() {
                 triggerDOM?.removeEventListener('click', handleOpen)
 
                 closeOptions?.forEach(option => {
-                    handleClose[option as keyof typeof handleClose]().remove()
+                    closeHandlers[option as keyof typeof closeHandlers]().remove()
                 })
             }
         }
@@ -124,9 +123,9 @@ export const modal = (config: Modal | string) => {
 }
 
 export const closeModal = (modal: string) => {
-    const modalDOM = document.querySelector(modal) as HTMLElement
+    const modalDOM = document.querySelector(modal)
 
-    if (modalDOM) {
+    if (modalDOM instanceof HTMLElement) {
         modalDOM.dataset.show = ''
 
         bodyFreeze(false)

package/utils/toast.ts

@@ -23,7 +23,7 @@ export const toast = (config: Toast | string) => {
         title,
         content,
         position
-    } = (typeof config === 'string' ? {} : config) as Toast
+    } = (typeof config === 'string' ? {} : config)
 
     const htmlElement = document.querySelector(element) as HTMLElement