webcoreui 0.0.8 → 0.0.10

package/components/Card/card.ts

@@ -1,8 +1,15 @@
 export type CardProps = {
     element?: string
     title?: string
+    titleTag?: string
     compact?: boolean
     className?: string
     secondary?: boolean
     [key: string]: any
 }
+
+export type ReactCardProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<CardProps, 'titleTag' | 'element'>

package/components/Checkbox/Checkbox.astro

@@ -0,0 +1,51 @@
+---
+import type { CheckboxProps } from './checkbox'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import check from '../../icons/check.svg?raw'
+
+import './checkbox.scss'
+
+interface Props extends CheckboxProps {}
+
+const {
+    checked,
+    label,
+    subText,
+    disabled,
+    boxed,
+    color
+} = Astro.props
+
+const classes = [
+    'w-checkbox',
+    boxed && 'boxed',
+    label && subText && 'col'
+]
+
+const style = color
+    ? `--w-checkbox-color: ${color};`
+    : null
+---
+
+<label class:list={classes} style={style}>
+    <ConditionalWrapper condition={!!(label && subText)}>
+        <div class="checkbox-wrapper" slot="wrapper">
+            children
+        </div>
+        <input type="checkbox" checked={checked} disabled={disabled} />
+        <span class="check">
+            <Fragment set:html={check} />
+        </span>
+        {label && (
+            <span class="label">
+                <Fragment set:html={label} />
+            </span>
+        )}
+    </ConditionalWrapper>
+    {label && subText && (
+        <span class="sub-text">
+            <Fragment set:html={subText} />
+        </span>
+    )}
+</label>

package/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { CheckboxProps } from './checkbox'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    
+    import check from '../../icons/check.svg?raw'
+    
+    import './checkbox.scss'
+    
+    export let checked: CheckboxProps['checked'] = false
+    export let label: CheckboxProps['label'] = ''
+    export let subText: CheckboxProps['subText'] = ''
+    export let disabled: CheckboxProps['disabled'] = false
+    export let boxed: CheckboxProps['boxed'] = false
+    export let color: CheckboxProps['color'] = ''
+    export let onClick: () => any = () => {}
+
+    const classes = [
+        'w-checkbox',
+        boxed && 'boxed',
+        label && subText && 'col'
+    ].filter(Boolean).join(' ')
+    
+    const style = color
+        ? `--w-checkbox-color: ${color};`
+        : null
+</script>
+
+<label class={classes} style={style}>
+    <ConditionalWrapper
+        condition={!!(label && subText)}
+        element="div"
+        class="checkbox-wrapper"
+    >
+        <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            on:click={onClick}
+        />
+        <span class="check">
+            {@html check}
+        </span>
+        {#if label}
+            <span class="label">
+                {@html label}
+            </span>
+        {/if}
+    </ConditionalWrapper>
+    {#if label && subText}
+        <span class="sub-text">{@html subText}</span>
+    {/if}
+</label>

package/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import type { ReactCheckboxProps } from './checkbox'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import check from '../../icons/check.svg?raw'
+
+import './checkbox.scss'
+
+const Checkbox = ({
+    checked,
+    label,
+    subText,
+    disabled,
+    boxed,
+    color,
+    onClick
+}: ReactCheckboxProps) => {
+    const classes = [
+        'w-checkbox',
+        boxed && 'boxed',
+        label && subText && 'col'
+    ].filter(Boolean).join(' ')
+    
+    const style = color
+        ? { '--w-checkbox-color': color } as React.CSSProperties
+        : undefined
+
+    return (
+        <label className={classes} style={style}>
+            <ConditionalWrapper
+                condition={!!(label && subText)}
+                wrapper={children => (
+                    <div className="checkbox-wrapper">
+                        {children}
+                    </div>
+                )}
+            >
+                <input
+                    type="checkbox"
+                    defaultChecked={checked}
+                    disabled={disabled}
+                    onClick={onClick}
+                />
+                <span
+                    className="check"
+                    dangerouslySetInnerHTML={{ __html: check }}
+                />
+                {label && (
+                    <span
+                        className="label"
+                        dangerouslySetInnerHTML={{ __html: label }}
+                    />
+                )}
+            </ConditionalWrapper>
+            {label && subText && (
+                <span
+                    className="sub-text"
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
+            )}
+        </label>
+    )
+}
+
+export default Checkbox

package/components/Checkbox/checkbox.scss

@@ -0,0 +1,85 @@
+@import '../../scss/config.scss';
+
+.w-checkbox {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+
+    &.col {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 5px;
+
+        .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+    }
+
+    &.boxed {
+        border: 1px solid #252525;
+        border-radius: 5px;
+        padding: 20px;
+    }
+
+    input {
+        display: none;
+
+        &:checked + span {
+            background-color: var(--w-checkbox-color);
+
+            svg {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                display: block;
+                color: #252525;
+                width: 10px;
+                height: 10px;
+            }
+        }
+
+        &:disabled + span {
+            background-color: #333;
+            border-color: #333;
+            cursor: no-drop;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+    }
+
+    .check {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        border: 1px solid var(--w-checkbox-color);
+        border-radius: 2px;
+        position: relative;
+
+        svg {
+            display: none;
+        }
+    }
+
+    .sub-text {
+        margin-left: 25px;
+        font-size: 14px;
+        color: #BBB;
+
+        a {
+            @include Transition(color);
+            color: #BBB;
+
+            &:hover {
+                color: #FFF;
+            }
+        }
+    }
+}

package/components/Checkbox/checkbox.ts

@@ -0,0 +1,12 @@
+export type CheckboxProps = {
+    checked?: boolean
+    label?: string
+    subText?: string
+    disabled?: boolean
+    boxed?: boolean
+    color?: string
+}
+
+export type ReactCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
-import type { ConditionalWrapperProps } from './conditionalwrapper'
+import type { ReactConditionalWrapperProps } from './conditionalwrapper'
 
-type ExtendedConditionalWrapperProps = {
-  condition: ConditionalWrapperProps['condition']
-  wrapper: (_: React.ReactNode) => any
-  children: React.ReactNode
-};
-
-const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
   condition ? wrapper(children) : children
 
 export default ConditionalWrapper

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,3 +1,8 @@
 export type ConditionalWrapperProps = {
     condition: boolean
 }
+
+export type ReactConditionalWrapperProps = {
+    wrapper: (_: React.ReactNode) => any
+    children: React.ReactNode
+} & ConditionalWrapperProps

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.astro

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

package/components/Radio/Radio.svelte

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