webcoreui 0.0.10 → 0.0.12

package/components/Spinner/Spinner.tsx

@@ -1,44 +1,45 @@
-import React from 'react'
-import type { SpinnerProps } from './spinner'
-
-import './spinner.scss'
-
-const Spinner = ({
-    color,
-    width,
-    speed,
-    size,
-    dashArray
-}: SpinnerProps) => {
-    const classes = [
-        'w-spinner',
-        dashArray && 'dashed'
-    ].filter(Boolean).join(' ')
-    
-    const styles = {
-        ...(color && { '--w-spinner-color': color }),
-        ...(width && { '--w-spinner-width': `${width}px;` }),
-        ...(speed && { '--w-spinner-speed': `${speed}s;` }),
-        ...(size && { '--w-spinner-size': `${size}px;` }),
-        ...(dashArray && { '--w-spinner-dash': dashArray }),
-    } as React.CSSProperties
-
-    return (
-        <svg
-            className={classes}
-            viewBox="25 25 50 50"
-            role="status"
-            style={styles}
-        >
-            <circle
-                className="spinner-path"
-                cx="50"
-                cy="50"
-                r="20"
-                fill="none"
-            />
-        </svg>
-    )
-}
-
-export default Spinner
+import React from 'react'
+import type { SpinnerProps } from './spinner'
+
+import styles from './spinner.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Spinner = ({
+    color,
+    width,
+    speed,
+    size,
+    dashArray
+}: SpinnerProps) => {
+    const classes = classNames([
+        styles.spinner,
+        dashArray && styles.dashed
+    ])
+    
+    const stylesVariable = {
+        ...(color && { '--w-spinner-color': color }),
+        ...(width && { '--w-spinner-width': `${width}px;` }),
+        ...(speed && { '--w-spinner-speed': `${speed}s;` }),
+        ...(size && { '--w-spinner-size': `${size}px;` }),
+        ...(dashArray && { '--w-spinner-dash': dashArray }),
+    } as React.CSSProperties
+
+    return (
+        <svg
+            className={classes}
+            viewBox="25 25 50 50"
+            role="status"
+            style={stylesVariable}
+        >
+            <circle
+                className={styles.path}
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+            />
+        </svg>
+    )
+}
+
+export default Spinner

package/components/Spinner/{spinner.scss → spinner.module.scss}

@@ -1,41 +1,41 @@
-@import '../../scss/config.scss';
-
-.w-spinner {
-    margin: 0px auto;
-    width: var(--w-spinner-size);
-    height: var(--w-spinner-size);
-    animation: rotate var(--w-spinner-speed) linear infinite;
-
-    &.dashed .spinner-path {
-        stroke-dasharray: var(--w-spinner-dash);
-        animation: none;
-    }
-
-    .spinner-path {
-        stroke: var(--w-spinner-color);
-        stroke-width: var(--w-spinner-width);
-        animation: dash 1.5s ease-in-out infinite;
-        stroke-linecap: round;
-    }
-}
-
-@keyframes rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124;
-    }
-}
+@import '../../scss/config.scss';
+
+.spinner {
+    margin: 0px auto;
+    width: var(--w-spinner-size);
+    height: var(--w-spinner-size);
+    animation: rotate var(--w-spinner-speed) linear infinite;
+
+    &.dashed .path {
+        stroke-dasharray: var(--w-spinner-dash);
+        animation: none;
+    }
+
+    .path {
+        stroke: var(--w-spinner-color);
+        stroke-width: var(--w-spinner-width);
+        animation: dash 1.5s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}

package/components/Switch/Switch.astro

@@ -1,6 +1,8 @@
 ---
 import type { SwitchProps } from './switch'
-import './switch.scss'
+
+import styles from './switch.module.scss'
+import { classNames } from '../../utils/classNames'
 
 interface Props extends SwitchProps {}
 
@@ -17,22 +19,22 @@ const {
 } = Astro.props
 
 const classes = [
-    'w-switch',
-    reverse && 'reverse',
-    small && 'small',
-    square && 'square',
-    disabled && 'disabled',
+    styles.switch,
+    reverse && styles.reverse,
+    small && styles.small,
+    square && styles.square,
+    disabled && styles.disabled,
     className
 ]
 
-const styles = [
+const styleVariables = classNames([
     offColor && `--w-switch-off-color: ${offColor};`,
     onColor && `--w-switch-on-color: ${onColor};`
-].filter(Boolean).join(' ')
+])
 ---
 
-<label class:list={classes} style={styles || null}>
+<label class:list={classes} style={styleVariables}>
     <input type="checkbox" checked={toggled} disabled={disabled} />
-    <span class="toggle"></span>
-    {label && <span class="label">{label}</span>}
+    <span class={styles.toggle}></span>
+    {label && <span class={styles.label}>{label}</span>}
 </label>

package/components/Switch/Switch.svelte

@@ -1,42 +1,44 @@
 <script lang="ts">
-    import type { SwitchProps } from './switch'
-    import './switch.scss'
+    import type { SvelteSwitchProps } from './switch'
+
+    import styles from './switch.module.scss'
+    import { classNames } from '../../utils/classNames'
     
-    export let label: SwitchProps['label'] = ''
-    export let toggled: SwitchProps['toggled'] = false
-    export let offColor: SwitchProps['offColor'] = ''
-    export let onColor: SwitchProps['onColor'] = ''
-    export let reverse: SwitchProps['reverse'] = false
-    export let small: SwitchProps['small'] = false
-    export let square: SwitchProps['square'] = false
-    export let disabled: SwitchProps['disabled'] = false
-    export let className: SwitchProps['className'] = ''
-    export let onClick: () => any = () => {}
+    export let label: SvelteSwitchProps['label'] = ''
+    export let toggled: SvelteSwitchProps['toggled'] = false
+    export let offColor: SvelteSwitchProps['offColor'] = ''
+    export let onColor: SvelteSwitchProps['onColor'] = ''
+    export let reverse: SvelteSwitchProps['reverse'] = false
+    export let small: SvelteSwitchProps['small'] = false
+    export let square: SvelteSwitchProps['square'] = false
+    export let disabled: SvelteSwitchProps['disabled'] = false
+    export let className: SvelteSwitchProps['className'] = ''
+    export let onClick: SvelteSwitchProps['onClick'] = () => {}
     
-    const classes = [
-        'w-switch',
-        reverse && 'reverse',
-        small && 'small',
-        square && 'square',
-        disabled && 'disabled',
+    const classes = classNames([
+        styles.switch,
+        reverse && styles.reverse,
+        small && styles.small,
+        square && styles.square,
+        disabled && styles.disabled,
         className
-    ].filter(Boolean).join(' ')
+    ])
     
-    const styles = [
+    const styleVariables = classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`
-    ].filter(Boolean).join(' ')
+    ])
 </script>
 
-<label class={classes} style={styles || null}>
+<label class={classes} style={styleVariables || null}>
     <input
         type="checkbox"
         checked={toggled}
         disabled={disabled}
         on:click={onClick}
     />
-    <span class="toggle"></span>
+    <span class={styles.toggle}></span>
     {#if label}
-        <span class="label">{label}</span>
+        <span class={styles.label}>{label}</span>
     {/if}
 </label>

package/components/Switch/Switch.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { ReactSwitchProps } from './switch'
-import './switch.scss'
+
+import styles from './switch.module.scss'
+import { classNames } from '../../utils/classNames'
 
 const Switch = ({
     label,
@@ -14,30 +16,30 @@ const Switch = ({
     className,
     onClick
 }: ReactSwitchProps) => {
-    const classes = [
-        'w-switch',
-        reverse && 'reverse',
-        small && 'small',
-        square && 'square',
-        disabled && 'disabled',
+    const classes = classNames([
+        styles.switch,
+        reverse && styles.reverse,
+        small && styles.small,
+        square && styles.square,
+        disabled && styles.disabled,
         className
-    ].filter(Boolean).join(' ')
+    ])
 
-    const styles = {
+    const styleVariables = {
         ...(offColor && { '--w-switch-off-color': offColor }),
         ...(onColor && { '--w-switch-on-color': onColor })
     } as React.CSSProperties
 
     return (
-        <label className={classes} style={styles || null}>
+        <label className={classes} style={styleVariables || null}>
             <input
                 type="checkbox"
                 defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
             />
-            <span className="toggle"></span>
-            {label && <span className="label">{label}</span>}
+            <span className={styles.toggle}></span>
+            {label && <span className={styles.label}>{label}</span>}
         </label>
     )
     

package/components/Switch/{switch.scss → switch.module.scss}

@@ -1,6 +1,6 @@
 @import '../../scss/config.scss';
 
-.w-switch {
+.switch {
     display: inline-flex;
     align-items: center;
     gap: 10px;
@@ -12,10 +12,10 @@
 
     &.disabled .toggle {
         cursor: no-drop;
-        background: #333;
+        background: var(--w-color-primary-40);
 
         &::before {
-            background: #252525;
+            background: var(--w-color-primary-50);
         }
     }
 
@@ -74,7 +74,7 @@
             width: 24px;
             left: 3px;
             bottom: 3px;
-            background: #000;
+            background: var(--w-color-primary-70);
             border-radius: 50%;
             transition: 0.3s;
         }

package/components/Switch/switch.ts

@@ -1,15 +1,19 @@
 export type SwitchProps = {
     label?: string
-    toggled?: boolean
-    offColor?: string
-    onColor?: string
     reverse?: boolean
+    toggled?: boolean
+    disabled?: boolean
     small?: boolean
     square?: boolean
-    disabled?: boolean
+    onColor?: string
+    offColor?: string
     className?: string
 }
 
+export type SvelteSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps
+
 export type ReactSwitchProps = {
     onClick?: (key: any) => any
 } & SwitchProps

package/components/Table/Table.astro

@@ -0,0 +1,60 @@
+---
+import type { TableProps } from './table'
+import styles from './table.module.scss'
+
+interface Props extends TableProps {}
+
+const {
+    headings,
+    footer,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    className
+} = Astro.props
+
+const classes = [
+    styles.table,
+    hover && styles.hover,
+    striped && styles[`striped-${striped}s`],
+    offsetStripe && styles.offset,
+    compact && styles.compact,
+    className
+]
+---
+
+<div class:list={classes}>
+    <table>
+        {headings?.length && (
+            <thead>
+                <tr>
+                    {headings.map(heading => (
+                        <th>{heading}</th>
+                    ))}
+                </tr>
+            </thead>
+        )}
+        <tbody>
+            {data.map(row => (
+                <tr>
+                    {row.map(column => (
+                        <td>
+                            <Fragment set:html={column} />
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </tbody>
+        {footer?.length && (
+            <tfoot>
+                <tr>
+                    {footer.map(data => (
+                        <td>{data}</td>
+                    ))}
+                </tr>
+            </tfoot>
+        )}
+    </table>
+</div>

package/components/Table/Table.svelte

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,64 @@
+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.module.scss

@@ -0,0 +1,64 @@
+@import '../../scss/config.scss';
+
+.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;
+    }
+
+    thead,
+    tr {
+        border-bottom: 1px solid var(--w-color-primary-50);
+
+        &: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),
+    &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
+        background: var(--w-color-primary-60);
+    }
+
+    &.striped-rows tr,
+    &.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;
+        }
+    }
+}

package/components/Table/table.ts

@@ -0,0 +1,10 @@
+export type TableProps = {
+    headings?: string[]
+    footer?: string[]
+    data: string[][]
+    hover?: boolean
+    striped?: 'column' | 'row' | null
+    offsetStripe?: boolean
+    compact?: boolean
+    className?: string
+}