webcoreui 0.9.0 → 0.10.0

package/components/Copy/copy.ts

@@ -1,5 +1,7 @@
-import { type BadgeProps } from '../Badge/badge'
-import { type IconProps } from '../Icon/icon'
+import type { Snippet } from 'svelte'
+
+import type { BadgeProps } from '../Badge/badge'
+import type { IconProps } from '../Icon/icon'
 
 export type CopyProps = {
     tooltip?: string
@@ -9,6 +11,10 @@ export type CopyProps = {
     className?: string
 } & BadgeProps
 
+export type SvelteCopyProps = {
+    children: Snippet
+} & CopyProps
+
 export type ReactCopyProps = {
     children: React.ReactNode
 } & CopyProps

package/components/DataTable/DataTable.astro

@@ -173,117 +173,120 @@ const hasPagination = data?.length && itemsPerPage
     import { debounce } from '../../utils/debounce'
     import { dispatch, listen } from '../../utils/event'
 
-    const filters = document.querySelectorAll('[data-id="w-data-table-filter"]')
-    const sorts = document.querySelectorAll('[data-id="w-data-table-sort"]')
-
-    Array.from(filters).forEach(filter => {
-        filter.addEventListener('input', debounce((event: Event) => {
-            const target = event.target as HTMLInputElement
-            const filterableColumns = target.dataset.filter
-            const table = target.closest('section')?.querySelector('table') as HTMLTableElement
-            const pagination = target.closest('section')?.querySelector('.w-data-table-pagination') as HTMLUListElement
-            const noResults = table.querySelector('tfoot') as HTMLElement
-            const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
-
-            tableRows.forEach(row => {
-                const rowValue = Array.from(row.querySelectorAll('td'))
-                    .filter(td => filterableColumns?.includes(td.dataset.name || ''))
-                    .map(td => td.innerText)
-                    .join('')
-                    .toLowerCase()
-
-                if (rowValue.includes(target.value.toLowerCase())) {
-                    row.removeAttribute('data-hidden')
-                } else {
-                    row.dataset.hidden = 'true'
-                }
-            })
+    const addEventListeners = () => {
+        const filters = document.querySelectorAll('[data-id="w-data-table-filter"]')
+        const sorts = document.querySelectorAll('[data-id="w-data-table-sort"]')
+
+        Array.from(filters).forEach(filter => {
+            filter.addEventListener('input', debounce((event: Event) => {
+                const target = event.target as HTMLInputElement
+                const filterableColumns = target.dataset.filter
+                const section = target.closest('section')
+                const table = section?.querySelector('table') as HTMLTableElement
+                const pagination = section?.querySelector('.w-data-table-pagination') as HTMLUListElement
+                const noResults = table.querySelector('tfoot') as HTMLElement
+                const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
 
-            const filteredRows = Array.from(
-                table?.querySelectorAll('tbody tr:not([data-hidden])') as NodeListOf<HTMLTableRowElement>
-            )
-
-            if (!filteredRows.length) {
-                noResults.removeAttribute('data-hidden')
-            } else {
-                noResults.dataset.hidden = 'true'
-            }
+                tableRows.forEach(row => {
+                    const rowValue = Array.from(row.querySelectorAll('td'))
+                        .filter(td => filterableColumns?.includes(td.dataset.name || ''))
+                        .map(td => td.innerText)
+                        .join('')
+                        .toLowerCase()
 
-            if (table.dataset.itemsPerPage && filteredRows.length >= Number(table.dataset.itemsPerPage)) {
-                filteredRows.forEach((row, index) => {
-                    if (index >= Number(table.dataset.itemsPerPage)) {
+                    if (rowValue.includes(target.value.toLowerCase())) {
+                        row.removeAttribute('data-hidden')
+                    } else {
                         row.dataset.hidden = 'true'
                     }
                 })
-            }
-
-            if (target.value) {
-                pagination.style.display = 'none'
-            } else {
-                pagination.style.display = 'flex'
 
-                tableRows.forEach(row => {
-                    if (row.dataset.page !== table.dataset.page) {
-                        row.dataset.hidden = 'true'
-                    } else {
-                        row.removeAttribute('data-hidden')
-                    }
-                })
-            }
+                const filteredRows = Array.from(
+                    table?.querySelectorAll('tbody tr:not([data-hidden])') as NodeListOf<HTMLTableRowElement>
+                )
 
-            dispatch('dataTableFilter', {
-                results: filteredRows,
-                numberOfResults: filteredRows.length
-            })
-        }, 400))
-    })
+                if (!filteredRows.length) {
+                    noResults.removeAttribute('data-hidden')
+                } else {
+                    noResults.dataset.hidden = 'true'
+                }
 
-    Array.from(sorts).forEach(sort => {
-        let sortOrder = 1
-
-        sort.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
-            const sortBy = target.parentElement?.dataset.name
-            const table = target.closest('section')?.querySelector('table')
-            const tableBody = table?.querySelector('tbody')
-            const sortedTableRows = Array.from(
-                table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
-            ).sort((a, b) => {
-                let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
-                    ?.innerText.replace(/\s/g, '')
-                let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
-                    ?.innerText.replace(/\s/g, '')
-
-                if (!isNaN(aValue as any)) {
-                    aValue = Number(aValue)
+                if (table.dataset.itemsPerPage && filteredRows.length >= Number(table.dataset.itemsPerPage)) {
+                    filteredRows.forEach((row, index) => {
+                        if (index >= Number(table.dataset.itemsPerPage)) {
+                            row.dataset.hidden = 'true'
+                        }
+                    })
                 }
 
-                if (!isNaN(bValue as any)) {
-                    bValue = Number(bValue)
+                if (target.value) {
+                    pagination.style.display = 'none'
+                } else {
+                    pagination.style.display = 'flex'
+
+                    tableRows.forEach(row => {
+                        if (row.dataset.page !== table.dataset.page) {
+                            row.dataset.hidden = 'true'
+                        } else {
+                            row.removeAttribute('data-hidden')
+                        }
+                    })
                 }
 
-                return aValue > bValue
-                    ? sortOrder * -1
-                    : sortOrder
-            }).map((row, index) => {
-                if (table?.dataset.page) {
-                    row.dataset.page = `${Math.ceil((index + 1) / Number(table.dataset.itemsPerPage))}`
+                dispatch('dataTableFilter', {
+                    results: filteredRows,
+                    numberOfResults: filteredRows.length
+                })
+            }, 400))
+        })
 
-                    if (row.dataset.page !== table.dataset.page) {
-                        row.dataset.hidden = 'true'
-                    } else {
-                        row.removeAttribute('data-hidden')
+        Array.from(sorts).forEach(sort => {
+            let sortOrder = 1
+
+            sort.addEventListener('click', event => {
+                const target = event.target as HTMLButtonElement
+                const sortBy = target.parentElement?.dataset.name
+                const table = target.closest('section')?.querySelector('table')
+                const tableBody = table?.querySelector('tbody')
+                const sortedTableRows = Array.from(
+                    table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
+                ).sort((a, b) => {
+                    let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                        ?.innerText.replace(/\s/g, '')
+                    let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                        ?.innerText.replace(/\s/g, '')
+
+                    if (!isNaN(aValue as any)) {
+                        aValue = Number(aValue)
                     }
-                }
 
-                return row
-            })
+                    if (!isNaN(bValue as any)) {
+                        bValue = Number(bValue)
+                    }
+
+                    return aValue > bValue
+                        ? sortOrder * -1
+                        : sortOrder
+                }).map((row, index) => {
+                    if (table?.dataset.page) {
+                        row.dataset.page = `${Math.ceil((index + 1) / Number(table.dataset.itemsPerPage))}`
+
+                        if (row.dataset.page !== table.dataset.page) {
+                            row.dataset.hidden = 'true'
+                        } else {
+                            row.removeAttribute('data-hidden')
+                        }
+                    }
+
+                    return row
+                })
 
-            tableBody?.replaceChildren(...sortedTableRows)
+                tableBody?.replaceChildren(...sortedTableRows)
 
-            sortOrder = sortOrder === 1 ? -1 : 1
+                sortOrder = sortOrder === 1 ? -1 : 1
+            })
         })
-    })
+    }
 
     listen('selectOnChange', event => {
         const eventName = event.name.toLowerCase().replace(/\s/g, '')
@@ -291,6 +294,10 @@ const hasPagination = data?.length && itemsPerPage
             ?.closest('section') as HTMLElement)
             .querySelector('table') as HTMLTableElement
 
+        if (!table) {
+            return
+        }
+
         const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
 
         const columnToggleListElement = Array.from(event.list.children)
@@ -329,4 +336,7 @@ const hasPagination = data?.length && itemsPerPage
             }
         })
     })
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>