webcoreui 0.0.7 → 0.0.9

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,69 @@
+import React from 'react'
+import type { CheckboxProps } from './checkbox'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import check from '../../icons/check.svg?raw'
+
+import './checkbox.scss'
+
+type ReactCheckboxProps = {
+    onClick?: () => any
+} & CheckboxProps
+
+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"
+                    checked={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,8 @@
+export type CheckboxProps = {
+    checked?: boolean
+    label?: string
+    subText?: string
+    disabled?: boolean
+    boxed?: boolean
+    color?: 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>

package/components/Radio/Radio.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import type { RadioProps } from './radio'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import './radio.scss'
+
+type ReactRadioProps = {
+    onChange?: () => any
+} & RadioProps
+
+const Radio = ({
+    name,
+    items,
+    color,
+    inline,
+    className,
+    onChange
+}: ReactRadioProps) => {
+    const classes = [
+        'w-radio',
+        inline && 'inline',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const style = color
+        ? { '--w-radio-color': color } as React.CSSProperties
+        : undefined
+
+    return (
+        <div className={classes} style={style}>
+            {items.map((item, index) => (
+                <label className={[
+                    item.subText && 'col',
+                    item.disabled && 'disabled'
+                ].filter(Boolean).join(' ')} key={index}>
+                    <ConditionalWrapper
+                        condition={!!(item.subText)}
+                        wrapper={children => (
+                            <div className="radio-wrapper">
+                                {children}
+                            </div>
+                        )}
+                    >
+                        <input
+                            type="radio"
+                            name={name}
+                            value={item.value}
+                            checked={item.selected}
+                            disabled={item.disabled}
+                            onChange={onChange}
+                        />
+                        <span className="radio" />
+                        <span
+                            className="label"
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                        />
+                    </ConditionalWrapper>
+                    {item.subText && (
+                        <span
+                            className="sub-text"
+                            dangerouslySetInnerHTML={{ __html: item.subText }}
+                        />
+                    )}
+                </label>
+            ))}
+        </div>
+    )
+}
+
+export default Radio
+

package/components/Radio/radio.scss

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

package/components/Radio/radio.ts

@@ -0,0 +1,13 @@
+export type RadioProps = {
+    items: {
+        label: string
+        value: string
+        subText?: string
+        selected?: boolean
+        disabled?: boolean
+    }[]
+    name: string
+    color?: string
+    inline?: boolean
+    className?: string
+}

package/components/Rating/Rating.astro

@@ -0,0 +1,66 @@
+---
+import type { RatingProps } from './rating'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import './rating.scss'
+
+interface Props extends RatingProps {}
+
+const {
+    score,
+    total = 5,
+    showText,
+    text = '{0} out of {1}',
+    showEmpty = true,
+    outline = true,
+    reviewCount,
+    reviewText = '{0} reviews',
+    reviewLink,
+    reviewTarget,
+    color,
+    emptyColor,
+    size,
+    className
+} = Astro.props
+
+const classes = [
+    'w-rating',
+    outline && 'outline',
+    className
+]
+
+const styles = [
+    color && `--w-rating-color: ${color};`,
+    size && `--w-rating-size: ${size}px;`,
+    emptyColor && `--w-rating-empty-color: ${emptyColor};`
+].filter(Boolean).join(' ')
+
+const translatedText = text
+    .replace('{0}', `${score}`)
+    .replace('{1}', `${total}`)
+
+const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
+---
+
+<span class:list={classes} style={styles || null}>
+    <span class="score">{Array(score).fill('★').join('')}</span>
+    {showEmpty && (
+        <span class:list={['empty', total === 10 && 'ten-star']}>
+            {Array(total - score).fill('★').join('')}
+        </span>
+    )}
+    {showText && (
+        <span class:list={['text', reviewCount && 'm']}>
+            {translatedText}
+        </span>
+    )}
+    {reviewCount && '•'}
+    {reviewCount && (
+        <ConditionalWrapper condition={!!reviewLink}>
+            <a href={reviewLink} target={reviewTarget} slot="wrapper">
+                children
+            </a>
+            <span class="text">{translatedReviewText}</span>
+        </ConditionalWrapper>
+    )}
+</span>

package/components/Rating/Rating.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import type { RatingProps } from './rating'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    
+    import './rating.scss'
+    
+    export let score: RatingProps['score']
+    export let total: RatingProps['total'] = 5
+    export let showText: RatingProps['showText'] = false
+    export let text: RatingProps['text'] = '{0} out of {1}'
+    export let showEmpty: RatingProps['showEmpty'] = true
+    export let outline: RatingProps['outline'] = true
+    export let reviewCount: RatingProps['reviewCount'] = 0
+    export let reviewText: RatingProps['reviewText'] = '{0} reviews'
+    export let reviewLink: RatingProps['reviewLink'] = ''
+    export let reviewTarget: RatingProps['reviewTarget'] = ''
+    export let color: RatingProps['color'] = ''
+    export let emptyColor: RatingProps['emptyColor'] = ''
+    export let size: RatingProps['size'] = 0
+    export let className: RatingProps['className'] = ''
+    
+    const classes = [
+        'w-rating',
+        outline && 'outline',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const styles = [
+        color && `--w-rating-color: ${color};`,
+        size && `--w-rating-size: ${size}px;`,
+        emptyColor && `--w-rating-empty-color: ${emptyColor};`
+    ].filter(Boolean).join(' ')
+    
+    const translatedText = text!
+        .replace('{0}', `${score}`)
+        .replace('{1}', `${total}`)
+    
+    const translatedReviewText = reviewText?.replace('{0}', `${reviewCount}`)
+</script>
+
+
+<span class={classes} style={styles || null}>
+    <span class="score">{Array(score).fill('★').join('')}</span>
+    {#if showEmpty}
+        <span
+            class="empty"
+            class:ten-star={total === 10}
+        >
+            {Array((total || 5) - score).fill('★').join('')}
+        </span>
+    {/if}
+
+    {#if showText}
+        <span class="text" class:m={reviewCount}>
+            {translatedText}
+        </span>
+    {/if}
+
+    {#if reviewCount}
+        {'•'}
+        <ConditionalWrapper
+            condition={!!reviewLink}
+            element="a"
+            href={reviewLink}
+            target={reviewTarget}
+        >
+            <span class="text">{translatedReviewText}</span>
+        </ConditionalWrapper>
+    {/if}
+</span>