webcoreui 0.0.11 → 0.1.0

package/components/Progress/Progress.astro

@@ -1,40 +1,42 @@
----
-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>
+---
+import type { ProgressProps } from './progress'
+
+import styles from './progress.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends ProgressProps {}
+
+const {
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+} = Astro.props
+
+const classes = [
+    styles['w-progress'],
+    size && styles[size],
+    striped && styles.striped,
+    square && styles.square,
+    className
+]
+
+const styleVariables = classNames([
+    color && `--w-progress-color: ${color};`,
+    background && `--w-progress-background: ${background};`,
+    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+])
+---
+
+<div class:list={classes} style={styleVariables}>
+    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+        {label && `${value}%`}
+    </div>
+</div>

package/components/Progress/Progress.svelte

@@ -1,38 +1,40 @@
-<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>
+<script lang="ts">
+    import type { ProgressProps } from './progress'
+
+    import styles from './progress.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    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 = classNames([
+        styles['w-progress'],
+        size && styles[size],
+        striped && styles.striped,
+        square && styles.square,
+        className
+    ])
+
+    const styleVariables = classNames([
+        color && `--w-progress-color: ${color};`,
+        background && `--w-progress-background: ${background};`,
+        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+    ])
+</script>
+
+<div class={classes} style={styleVariables || null}>
+    <div class={styles.progress} style={`--w-progress-width: ${value}%;`}>
+        {#if label}
+            {`${value}%`}
+        {/if}
+    </div>
+</div>

package/components/Progress/Progress.tsx

@@ -1,47 +1,48 @@
-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
-
+import React from 'react'
+import type { ProgressProps } from './progress'
+
+import styles from './progress.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Progress = ({
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+}: ProgressProps) => {
+    const classes = classNames([
+        styles['w-progress'],
+        size && styles[size],
+        striped && styles.striped,
+        square && styles.square,
+        className
+    ])
+
+    const styleVariables = {
+        ...(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={styleVariables}>
+            <div className={styles.progress} style={percent}>
+                {label && `${value}%`}
+            </div>
+        </div>
+    )
+}
+
+export default Progress
+

package/components/Progress/progress.module.scss

@@ -0,0 +1,70 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-progress-color: var(--w-color-primary);
+    --w-progress-background: var(--w-color-primary-50);
+    --w-progress-stripe-light: var(--w-color-primary);
+    --w-progress-stripe-dark: var(--w-color-primary-10);
+}
+
+.w-progress {
+    @include size('w100%', h10px);
+    @include border-radius(xl);
+    @include visibility(hidden);
+    @include typography(bold, xxs);
+    @include background(var(--w-progress-background));
+
+    color: var(--w-progress-background);
+    
+    &.medium {
+        @include size(h15px);
+        @include typography(xs);
+    }
+
+    &.large {
+        @include size(h20px);
+        @include typography(sm);
+    }
+
+    &.square {
+        @include border-radius(sm);
+
+        .progress {
+            @include border-radius(sm);
+        }
+    }
+
+    &.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);
+        @include size('h100%');
+        @include border-radius(xl);
+        @include layout(flex, center);
+        @include background(var(--w-progress-color));
+
+        width: var(--w-progress-width);
+    }
+}

package/components/Radio/Radio.astro

@@ -1,57 +1,57 @@
----
-import type { RadioProps } from './radio'
-import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
-
-import './radio.scss'
-
-interface Props extends RadioProps {}
-
-const {
-    name,
-    items,
-    color,
-    inline,
-    className
-} = Astro.props
-
-const classes = [
-    'w-radio',
-    inline && 'inline',
-    className
-]
-
-const style = color
-    ? `--w-radio-color: ${color};`
-    : null
----
-
-<div class:list={classes} style={style}>
-    {items.map(item => (
-        <label class:list={[
-            item.subText && 'col',
-            item.disabled && 'disabled'
-        ]}>
-            <ConditionalWrapper condition={!!(item.subText)}>
-                <div class="radio-wrapper" slot="wrapper">
-                    children
-                </div>
-                <input
-                    type="radio"
-                    name={name}
-                    value={item.value}
-                    checked={item.selected}
-                    disabled={item.disabled}
-                />
-                <span class="radio" />
-                <span class="label">
-                    <Fragment set:html={item.label} />
-                </span>
-            </ConditionalWrapper>
-            {item.subText && (
-                <span class="sub-text">
-                    <Fragment set:html={item.subText} />
-                </span>
-            )}
-        </label>
-    ))}
-</div>
+---
+import type { RadioProps } from './radio'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './radio.module.scss'
+
+interface Props extends RadioProps {}
+
+const {
+    name,
+    items,
+    color,
+    inline,
+    className
+} = Astro.props
+
+const classes = [
+    styles.radio,
+    inline && styles.inline,
+    className
+]
+
+const style = color
+    ? `--w-radio-color: ${color};`
+    : null
+---
+
+<div class:list={classes} style={style}>
+    {items.map(item => (
+        <label class:list={[
+            item.subText && styles.col,
+            item.disabled && styles.disabled
+        ]}>
+            <ConditionalWrapper condition={!!(item.subText)}>
+                <div class={styles.wrapper} slot="wrapper">
+                    children
+                </div>
+                <input
+                    type="radio"
+                    name={name}
+                    value={item.value}
+                    checked={item.selected}
+                    disabled={item.disabled}
+                />
+                <span class={styles.icon} />
+                <span class={styles.label}>
+                    <Fragment set:html={item.label} />
+                </span>
+            </ConditionalWrapper>
+            {item.subText && (
+                <span class={styles.subtext}>
+                    <Fragment set:html={item.subText} />
+                </span>
+            )}
+        </label>
+    ))}
+</div>

package/components/Radio/Radio.svelte

@@ -1,56 +1,58 @@
-<script lang="ts">
-    import type { RadioProps } from './radio'
-    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
-
-    import './radio.scss'
-
-    export let name: RadioProps['name'] = ''
-    export let items: RadioProps['items'] = []
-    export let color: RadioProps['color'] =  ''
-    export let inline: RadioProps['inline'] = false
-    export let className: RadioProps['className'] = ''
-    export let onChange: () => any = () => {}
-
-    const classes = [
-        'w-radio',
-        inline && 'inline',
-        className
-    ].filter(Boolean).join(' ')
-
-    const style = color
-        ? `--w-radio-color: ${color};`
-        : null
-</script>
-
-<div class={classes} style={style}>
-    {#each items as item}
-        <label
-            class:col={item.subText}
-            class:disabled={item.disabled}
-        >
-            <ConditionalWrapper
-                condition={!!(item.subText)}
-                element="div"
-                class="radio-wrapper"
-            >
-                <input
-                    type="radio"
-                    name={name}
-                    value={item.value}
-                    checked={item.selected}
-                    disabled={item.disabled}
-                    on:change={onChange}
-                />
-                <span class="radio" />
-                <span class="label">
-                    {@html item.label}
-                </span>
-            </ConditionalWrapper>
-            {#if item.subText}
-                <span class="sub-text">
-                    {@html item.subText}
-                </span>
-            {/if}
-        </label>
-    {/each}
-</div>
+<script lang="ts">
+    import type { SvelteRadioProps } from './radio'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './radio.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let name: SvelteRadioProps['name'] = ''
+    export let items: SvelteRadioProps['items'] = []
+    export let color: SvelteRadioProps['color'] =  ''
+    export let inline: SvelteRadioProps['inline'] = false
+    export let className: SvelteRadioProps['className'] = ''
+    export let onChange: SvelteRadioProps['onChange'] = () => {}
+
+    const classes = classNames([
+        styles.radio,
+        inline && styles.inline,
+        className
+    ])
+
+    const style = color
+        ? `--w-radio-color: ${color};`
+        : null
+</script>
+
+<div class={classes} style={style}>
+    {#each items as item}
+        <label class={[
+            item.subText && styles.col,
+            item.disabled && styles.disabled
+        ].filter(Boolean).join(' ')}
+        >
+            <ConditionalWrapper
+                condition={!!(item.subText)}
+                element="div"
+                class={styles.wrapper}
+            >
+                <input
+                    type="radio"
+                    name={name}
+                    value={item.value}
+                    checked={item.selected}
+                    disabled={item.disabled}
+                    on:change={onChange}
+                />
+                <span class={styles.icon} />
+                <span class={styles.label}>
+                    {@html item.label}
+                </span>
+            </ConditionalWrapper>
+            {#if item.subText}
+                <span class={styles.subtext}>
+                    {@html item.subText}
+                </span>
+            {/if}
+        </label>
+    {/each}
+</div>