webcoreui 0.0.11 → 0.0.12

package/components/Spinner/Spinner.svelte

@@ -1,38 +1,40 @@
-<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>
+<script lang="ts">
+    import type { SpinnerProps } from './spinner'
+
+    import styles from './spinner.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    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 = classNames([
+        styles.spinner,
+        dashArray && styles.dashed
+    ])
+
+    const styleVariables = classNames([
+        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}`,
+    ])
+</script>
+
+<svg
+    class={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styleVariables}
+>
+    <circle
+        class={styles.path}
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>

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

@@ -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>