webcoreui 0.0.11 → 0.1.0

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,50 @@
-@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;
-    }
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-spinner-color: var(--w-color-primary);
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+}
+
+.spinner {
+    @include spacing(auto-none);
+
+    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.module.scss

@@ -0,0 +1,82 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-switch-off-color: var(--w-color-primary-50);
+    --w-switch-on-color: var(--w-color-primary);
+}
+
+.switch {
+    @include layout(inline-flex, v-center, sm);
+    cursor: pointer;
+
+    &.reverse {
+        @include layout(row-reverse);
+    }
+
+    &.disabled .toggle {
+        @include background(primary-40);
+        cursor: no-drop;
+
+        &::before {
+            @include background(primary-50);
+        }
+    }
+
+    &.small {
+        input:checked + span::before {
+            transform: translateX(20px);
+        }
+
+        .toggle {
+            @include size(w40px, h20px);
+    
+            &::before {
+                @include size(14px);
+            }
+        }
+
+        .label {
+            @include typography(sm);
+        }
+    }
+
+    &.square .toggle {
+        @include border-radius(md);
+
+        &::before {
+            @include border-radius(md);
+        }
+    }
+
+    input {
+        @include visibility(none);
+
+        &:checked + span {
+            @include background(var(--w-switch-on-color));
+    
+            &::before {
+                transform: translateX(30px);
+            }
+        }
+    }
+
+    .toggle {
+        @include transition(background);
+        @include position(relative);
+        @include size(w60px, h30px);
+        @include border-radius(xl);
+        @include background(var(--w-switch-off-color));
+
+        &::before {
+            @include position(absolute, l3px, b3px);
+            @include size(24px);
+            @include border-radius(max);
+            @include background(primary-70);
+
+            content: '';
+            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

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