webcoreui 0.0.11 → 0.1.0

package/components/Table/Table.svelte

@@ -1,54 +1,56 @@
-<script lang="ts">
-    import type { TableProps } from './table'
-    import './table.scss'
-
-    export let headings: TableProps['headings'] = []
-    export let footer: TableProps['footer'] = []
-    export let data: TableProps['data'] = []
-    export let hover: TableProps['hover'] = false
-    export let striped: TableProps['striped'] = null
-    export let offsetStripe: TableProps['offsetStripe'] = false
-    export let compact: TableProps['compact'] = false
-    export let className: TableProps['className'] = ''
-
-    const classes = [
-        'w-table',
-        hover && 'hover',
-        striped && `striped-${striped}s`,
-        offsetStripe && 'offset',
-        compact && 'compact',
-        className
-    ].filter(Boolean).join(' ')
-</script>
-
-<div class={classes}>
-    <table>
-        {#if headings?.length}
-            <thead>
-                <tr>
-                    {#each headings as heading}
-                        <th>{heading}</th>
-                    {/each}
-                </tr>
-            </thead>
-        {/if}
-        <tbody>
-            {#each data as row}
-                <tr>
-                    {#each row as column}
-                        <td>{@html column}</td>
-                    {/each}
-                </tr>
-            {/each}
-        </tbody>
-        {#if footer?.length}
-            <tfoot>
-                <tr>
-                    {#each footer as data}
-                        <td>{data}</td>
-                    {/each}
-                </tr>
-            </tfoot>
-        {/if}
-    </table>
-</div>
+<script lang="ts">
+    import type { TableProps } from './table'
+
+    import styles from './table.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let headings: TableProps['headings'] = []
+    export let footer: TableProps['footer'] = []
+    export let data: TableProps['data'] = []
+    export let hover: TableProps['hover'] = false
+    export let striped: TableProps['striped'] = null
+    export let offsetStripe: TableProps['offsetStripe'] = false
+    export let compact: TableProps['compact'] = false
+    export let className: TableProps['className'] = ''
+
+    const classes = classNames([
+        styles.table,
+        hover && styles.hover,
+        striped && styles[`striped-${striped}s`],
+        offsetStripe && styles.offset,
+        compact && styles.compact,
+        className
+    ])
+</script>
+
+<div class={classes}>
+    <table>
+        {#if headings?.length}
+            <thead>
+                <tr>
+                    {#each headings as heading}
+                        <th>{heading}</th>
+                    {/each}
+                </tr>
+            </thead>
+        {/if}
+        <tbody>
+            {#each data as row}
+                <tr>
+                    {#each row as column}
+                        <td>{@html column}</td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+        {#if footer?.length}
+            <tfoot>
+                <tr>
+                    {#each footer as data}
+                        <td>{data}</td>
+                    {/each}
+                </tr>
+            </tfoot>
+        {/if}
+    </table>
+</div>

package/components/Table/Table.tsx

@@ -1,63 +1,64 @@
-import React from 'react'
-import type { TableProps } from './table'
-
-import './table.scss'
-
-const Table = ({
-    headings,
-    footer,
-    data,
-    hover,
-    striped,
-    offsetStripe,
-    compact,
-    className
-}: TableProps) => {
-    const classes = [
-        'w-table',
-        hover && 'hover',
-        striped && `striped-${striped}s`,
-        offsetStripe && 'offset',
-        compact && 'compact',
-        className
-    ].filter(Boolean).join(' ')
-
-    return (
-        <div className={classes}>
-            <table>
-                {headings?.length && (
-                    <thead>
-                        <tr>
-                            {headings.map((heading, index) => (
-                                <th key={index}>{heading}</th>
-                            ))}
-                        </tr>
-                    </thead>
-                )}
-                <tbody>
-                    {data.map((row, rowIndex) => (
-                        <tr key={rowIndex}>
-                            {row.map((column, columnIndex) => (
-                                <td
-                                    key={columnIndex}
-                                    dangerouslySetInnerHTML={{ __html: column }}
-                                />
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
-                {footer?.length && (
-                    <tfoot>
-                        <tr>
-                            {footer.map((data, index) => (
-                                <td key={index}>{data}</td>
-                            ))}
-                        </tr>
-                    </tfoot>
-                )}
-            </table>
-        </div>
-    )
-}
-
-export default Table
+import React from 'react'
+import type { TableProps } from './table'
+
+import styles from './table.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Table = ({
+    headings,
+    footer,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    className
+}: TableProps) => {
+    const classes = classNames([
+        styles.table,
+        hover && styles.hover,
+        striped && styles[`striped-${striped}s`],
+        offsetStripe && styles.offset,
+        compact && styles.compact,
+        className
+    ])
+
+    return (
+        <div className={classes}>
+            <table>
+                {headings?.length && (
+                    <thead>
+                        <tr>
+                            {headings.map((heading, index) => (
+                                <th key={index}>{heading}</th>
+                            ))}
+                        </tr>
+                    </thead>
+                )}
+                <tbody>
+                    {data.map((row, rowIndex) => (
+                        <tr key={rowIndex}>
+                            {row.map((column, columnIndex) => (
+                                <td
+                                    key={columnIndex}
+                                    dangerouslySetInnerHTML={{ __html: column }}
+                                />
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+                {footer?.length && (
+                    <tfoot>
+                        <tr>
+                            {footer.map((data, index) => (
+                                <td key={index}>{data}</td>
+                            ))}
+                        </tr>
+                    </tfoot>
+                )}
+            </table>
+        </div>
+    )
+}
+
+export default Table

package/components/Table/{table.scss → table.module.scss}

@@ -1,65 +1,60 @@
-@import '../../scss/config.scss';
-
-.w-table {
-    overflow-x: auto;
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        text-align: left;
-        font-size: 16px;
-    }
-
-    thead,
-    tfoot {
-        font-family: Bold;
-    }
-
-    th,
-    td {
-        padding: 5px 10px;
-        white-space: nowrap;
-    }
-
-    thead,
-    tr {
-        border-bottom: 1px solid #252525;
-
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-
-    a {
-        text-decoration: underline;
-    }
-
-    tfoot,
-    &.hover tr:hover,
-    &.striped-rows tbody tr:nth-child(odd),
-    &.striped-rows.offset tbody tr:nth-child(even),
-    &.striped-columns td:nth-child(odd),
-    &.striped-columns.offset td:nth-child(even) {
-        background: #111;
-    }
-
-    &.striped-rows tr,
-    &.striped-rows thead,
-    &.striped-columns tr,
-    &.striped-columns thead {
-        border-bottom: 0;
-    }
-
-    &.striped-rows.offset tbody tr:nth-child(odd),
-    &.striped-rows.offset tfoot,
-    &.striped-columns.offset td:nth-child(odd),
-    &.striped-columns tfoot {
-        background: transparent;
-    }
-
-    &.compact {
-        th, td {
-            padding: 3px 10px;
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.table {
+    @include visibility(auto);
+
+    table {
+        @include size('w100%');
+        @include typography(md, left);
+
+        border-collapse: collapse;
+    }
+
+    thead,
+    tfoot {
+        @include typography(bold);
+    }
+
+    th,
+    td {
+        @include spacing(py-xs, px-sm);
+    }
+
+    thead,
+    tr {
+        @include border(bottom, primary-50);
+
+        &:last-child {
+            @include border(bottom, 0);
+        }
+    }
+
+    tfoot,
+    &.hover tr:hover,
+    &.striped-rows tbody tr:nth-child(odd),
+    &.striped-rows.offset tbody tr:nth-child(even),
+    &.striped-columns td:nth-child(odd),
+    &.striped-columns.offset td:nth-child(even),
+    &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
+        @include background(primary-60);
+    }
+
+    &.striped-rows tr,
+    &.striped-columns tr,
+    &.striped-columns thead {
+        @include border(bottom, 0);
+    }
+
+    &.striped-rows.offset tbody tr:nth-child(odd),
+    &.striped-rows.offset tfoot,
+    &.striped-columns.offset td:nth-child(odd),
+    &.striped-columns tfoot {
+        @include background(transparent);
+    }
+
+    &.compact {
+        th, td {
+            @include spacing(py-xxs, px-sm);
+        }
+    }
+}

package/components/Tabs/Tabs.astro

@@ -1,76 +1,76 @@
----
-import type { TabsProps } from './tabs'
-import './tabs.scss'
-
-interface Props extends TabsProps {}
-
-const {
-    items,
-    theme,
-    vertical,
-    even,
-    className
-} = Astro.props
-
-const classes = [
-    'w-tabs',
-    theme && theme,
-    vertical && 'vertical',
-    even && 'even',
-    className
-]
----
-
-<section class:list={classes} data-id="w-tabs">
-    <div class="tabs-wrapper">
-        <div class="tabs">
-            {items.map(item => (
-                <button
-                    data-value={item.value}
-                    class:list={[item.active && 'active']}
-                    disabled={item.disabled}
-                >
-                    <Fragment set:html={item.label} />
-                </button>
-            ))}
-        </div>
-    </div>
-    <div class="tab-content">
-        <slot />
-    </div>
-</section>
-
-<script>
-    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
-
-    Array.from(tabs).forEach(element => {
-        element.addEventListener('click', event => {
-            const target = event.target as HTMLDivElement
-
-            if (target.dataset.value) {
-                const tabContent = target.parentElement
-                    ?.parentElement
-                    ?.nextElementSibling as HTMLDivElement
-
-                Array.from(tabContent.children)
-                    .forEach((element: any) => {
-                        if (element.dataset.tab === target.dataset.value) {
-                            element.dataset.active = true
-                        } else {
-                            element.dataset.active = false
-                        }
-                })
-
-                const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
-
-                Array.from(tabs).forEach((tab: any) => {
-                    tab.classList.remove('active')
-
-                    if (tab.dataset.value === target.dataset.value) {
-                        tab.classList.add('active')
-                    }
-                })
-            }
-        })
-    })
-</script>
+---
+import type { TabsProps } from './tabs'
+import styles from './tabs.module.scss'
+
+interface Props extends TabsProps {}
+
+const {
+    items,
+    theme,
+    vertical,
+    even,
+    className
+} = Astro.props
+
+const classes = [
+    styles.tabs,
+    theme && styles[theme],
+    vertical && styles.vertical,
+    even && styles.even,
+    className
+]
+---
+
+<section class:list={classes} data-id="w-tabs">
+    <div class={styles.wrapper}>
+        <div class={styles.items}>
+            {items.map(item => (
+                <button
+                    data-value={item.value}
+                    data-active={item.active ? 'true' : null}
+                    disabled={item.disabled}
+                >
+                    <Fragment set:html={item.label} />
+                </button>
+            ))}
+        </div>
+    </div>
+    <div class={styles.content}>
+        <slot />
+    </div>
+</section>
+
+<script>
+    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+
+    Array.from(tabs).forEach(element => {
+        element.addEventListener('click', event => {
+            const target = event.target as HTMLDivElement
+
+            if (target.dataset.value) {
+                const tabContent = target.parentElement
+                    ?.parentElement
+                    ?.nextElementSibling as HTMLDivElement
+
+                Array.from(tabContent.children)
+                    .forEach((element: any) => {
+                        if (element.dataset.tab === target.dataset.value) {
+                            element.dataset.active = true
+                        } else {
+                            element.dataset.active = false
+                        }
+                })
+
+                const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
+
+                Array.from(tabs).forEach((tab: any) => {
+                    tab.dataset.active = 'false'
+
+                    if (tab.dataset.value === target.dataset.value) {
+                        tab.dataset.active = 'true'
+                    }
+                })
+            }
+        })
+    })
+</script>

package/components/Tabs/Tabs.svelte

@@ -1,54 +1,56 @@
-<script lang="ts">
-    import type { TabsProps } from './tabs'
-    import './tabs.scss'
-
-    export let items: TabsProps['items'] = []
-    export let theme: TabsProps['theme'] = null
-    export let vertical: TabsProps['vertical'] = false
-    export let even: TabsProps['even'] = false
-    export let className: TabsProps['className'] = ''
-
-    let active = ''
-    let tabContainer: HTMLDivElement
-
-    const classes = [
-        'w-tabs',
-        theme && theme,
-        vertical && 'vertical',
-        even && 'even',
-        className
-    ].filter(Boolean).join(' ')
-
-    const setTab = (tab: string) => {
-        const tabs = tabContainer.querySelectorAll('[data-tab]')
-
-        active = tab
-
-        Array.from(tabs).forEach((item: any) => {
-            item.dataset.active = false
-
-            if (item.dataset.tab === active) {
-                item.dataset.active = true
-            }
-        })
-    }
-</script>
-
-<section class={classes}>
-    <div class="tabs-wrapper">
-        <div class="tabs">
-            {#each items as item}
-                <button
-                    class:active={active ? active === item.value : item.active}
-                    disabled={item.disabled}
-                    on:click={() => setTab(item.value)}
-                >
-                    {@html item.label}
-                </button>
-            {/each}
-        </div>
-    </div>
-    <div class="tab-content" bind:this={tabContainer}>
-        <slot />
-    </div>
-</section>
+<script lang="ts">
+    import type { TabsProps } from './tabs'
+
+    import styles from './tabs.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let items: TabsProps['items'] = []
+    export let theme: TabsProps['theme'] = null
+    export let vertical: TabsProps['vertical'] = false
+    export let even: TabsProps['even'] = false
+    export let className: TabsProps['className'] = ''
+
+    let active = ''
+    let tabContainer: HTMLDivElement
+
+    const classes = classNames([
+        styles.tabs,
+        theme && styles[theme],
+        vertical && styles.vertical,
+        even && styles.even,
+        className
+    ])
+
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.querySelectorAll('[data-tab]')
+
+        active = tab
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === active) {
+                item.dataset.active = true
+            }
+        })
+    }
+</script>
+
+<section class={classes}>
+    <div class={styles.wrapper}>
+        <div class={styles.items}>
+            {#each items as item}
+                <button
+                    data-active={active ? active === item.value : item.active}
+                    disabled={item.disabled}
+                    on:click={() => setTab(item.value)}
+                >
+                    {@html item.label}
+                </button>
+            {/each}
+        </div>
+    </div>
+    <div class={styles.content} bind:this={tabContainer}>
+        <slot />
+    </div>
+</section>