webcoreui 0.0.9 → 0.0.11

package/components/Progress/Progress.astro

@@ -0,0 +1,40 @@
+---
+import type { ProgressProps } from './progress'
+import './progress.scss'
+
+interface Props extends ProgressProps {}
+
+const {
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+} = Astro.props
+
+const classes = [
+    'w-progress',
+    size,
+    striped && 'striped',
+    square && 'square',
+    className
+]
+
+const styles = [
+    color && `--w-progress-color: ${color};`,
+    background && `--w-progress-background: ${background};`,
+    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+].filter(Boolean).join('')
+---
+
+<div class:list={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {label && `${value}%`}
+    </div>
+</div>

package/components/Progress/Progress.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { ProgressProps } from './progress'
+    import './progress.scss'
+
+    export let value: ProgressProps['value'] = 0
+    export let size: ProgressProps['size'] = null
+    export let label: ProgressProps['label'] = false
+    export let color: ProgressProps['color'] = ''
+    export let background: ProgressProps['background'] = ''
+    export let square: ProgressProps['square'] = false
+    export let striped: ProgressProps['striped'] = false
+    export let stripeLight: ProgressProps['stripeLight'] = ''
+    export let stripeDark: ProgressProps['stripeDark'] = ''
+    export let className: ProgressProps['className'] = ''
+
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-progress-color: ${color};`,
+        background && `--w-progress-background: ${background};`,
+        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+    ].filter(Boolean).join('')
+</script>
+
+<div class={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {#if label}
+            {`${value}%`}
+        {/if}
+    </div>
+</div>

package/components/Progress/Progress.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import type { ProgressProps } from './progress'
+
+import './progress.scss'
+
+const Progress = ({
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+}: ProgressProps) => {
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-progress-color': color }),
+        ...(background && { '--w-progress-background': background }),
+        ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
+        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
+    } as React.CSSProperties
+
+    const percent = {
+        '--w-progress-width': `${value}%`
+    } as React.CSSProperties
+
+    return (
+        <div className={classes} style={styles}>
+            <div className="progress" style={percent}>
+                {label && `${value}%`}
+            </div>
+        </div>
+    )
+}
+
+export default Progress
+

package/components/Progress/progress.scss

@@ -0,0 +1,66 @@
+@import '../../scss/config.scss';
+
+.w-progress {
+    width: 100%;
+    height: 10px;
+    background: var(--w-progress-background);
+    border-radius: 20px;
+    overflow: hidden;
+    color: var(--w-progress-background);
+    font-family: Bold;
+    font-size: 10px;
+    
+    &.medium {
+        height: 15px;
+        font-size: 12px;
+    }
+
+    &.large {
+        height: 20px;
+        font-size: 14px;
+    }
+
+    &.square {
+        border-radius: 2px;
+
+        .progress {
+            border-radius: 2px;
+        }
+    }
+
+    &.striped {
+
+        .progress {
+            background-size: 10px 10px;
+            background-image: linear-gradient(
+                -45deg,
+                var(--w-progress-stripe-light) 25%,
+                var(--w-progress-stripe-dark) 25%,
+                var(--w-progress-stripe-dark) 50%,
+                var(--w-progress-stripe-light) 50%,
+                var(--w-progress-stripe-light) 75%,
+                var(--w-progress-stripe-dark) 75%,
+                var(--w-progress-stripe-dark)
+            );
+        }
+
+        &.medium .progress {
+            background-size: 15px 15px;
+        }
+
+        &.large .progress {
+            background-size: 20px 20px;
+        }
+    }
+
+    .progress {
+        @include Transition(width);
+        width: var(--w-progress-width);
+        height: 100%;
+        background: var(--w-progress-color);
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

package/components/Progress/progress.ts

@@ -0,0 +1,12 @@
+export type ProgressProps = {
+    value: number
+    size?: 'medium' | 'large' | null
+    label?: boolean
+    color?: string
+    background?: string
+    square?: boolean
+    striped?: boolean
+    stripeLight?: string
+    stripeDark?: string
+    className?: string
+}

package/components/Radio/Radio.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
-import type { RadioProps } from './radio'
+import type { ReactRadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import './radio.scss'
 
-type ReactRadioProps = {
-    onChange?: () => any
-} & RadioProps
-
 const Radio = ({
     name,
     items,
@@ -46,7 +42,7 @@ const Radio = ({
                             type="radio"
                             name={name}
                             value={item.value}
-                            checked={item.selected}
+                            defaultChecked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}
                         />

package/components/Radio/radio.ts

@@ -11,3 +11,7 @@ export type RadioProps = {
     inline?: boolean
     className?: string
 }
+
+export type ReactRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps

package/components/Spinner/Spinner.astro

@@ -0,0 +1,42 @@
+---
+import type { SpinnerProps } from './spinner'
+import './spinner.scss'
+
+interface Props extends SpinnerProps {}
+
+const {
+    color,
+    width,
+    speed,
+    size,
+    dashArray,
+} = Astro.props
+
+const classes = [
+    'w-spinner',
+    dashArray && 'dashed'
+]
+
+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}`,
+].filter(Boolean).join(' ')
+---
+
+<svg
+    class:list={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>

package/components/Spinner/Spinner.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { SpinnerProps } from './spinner'
+    import './spinner.scss'
+
+    export let color: SpinnerProps['color'] = ''
+    export let width: SpinnerProps['width'] = 0
+    export let speed: SpinnerProps['speed'] = 0
+    export let size: SpinnerProps['size'] = 0
+    export let dashArray: SpinnerProps['dashArray'] = 0
+
+    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}`,
+    ].filter(Boolean).join(' ')
+</script>
+
+<svg
+    class={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>

package/components/Spinner/Spinner.tsx

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

package/components/Spinner/spinner.scss

@@ -0,0 +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;
+    }
+}

package/components/Spinner/spinner.ts

@@ -0,0 +1,7 @@
+export type SpinnerProps = {
+    color?: string
+    width?: number
+    speed?: number
+    size?: number
+    dashArray?: number
+}

package/components/Switch/Switch.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { SwitchProps } from './switch'
+import type { ReactSwitchProps } from './switch'
 import './switch.scss'
 
-type ReactSwitchProps = {
-    onClick?: () => any
-} & SwitchProps
-
 const Switch = ({
     label,
     toggled,
@@ -36,7 +32,7 @@ const Switch = ({
         <label className={classes} style={styles || null}>
             <input
                 type="checkbox"
-                checked={toggled}
+                defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
             />

package/components/Switch/switch.ts

@@ -9,3 +9,7 @@ export type SwitchProps = {
     disabled?: boolean
     className?: string
 }
+
+export type ReactSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps

package/components/Table/Table.astro

@@ -0,0 +1,60 @@
+---
+import type { TableProps } from './table'
+import './table.scss'
+
+interface Props extends TableProps {}
+
+const {
+    headings,
+    footer,
+    data,
+    hover,
+    striped,
+    offsetStripe,
+    compact,
+    className
+} = Astro.props
+
+const classes = [
+    'w-table',
+    hover && 'hover',
+    striped && `striped-${striped}s`,
+    offsetStripe && 'offset',
+    compact && '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,54 @@
+<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>

package/components/Table/Table.tsx

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

package/components/Table/table.scss

@@ -0,0 +1,65 @@
+@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;
+        }
+    }
+}