webcoreui 0.0.8 → 0.0.10

package/components/Radio/Radio.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import type { ReactRadioProps } from './radio'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import './radio.scss'
+
+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}
+                            defaultChecked={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,17 @@
+export type RadioProps = {
+    items: {
+        label: string
+        value: string
+        subText?: string
+        selected?: boolean
+        disabled?: boolean
+    }[]
+    name: string
+    color?: string
+    inline?: boolean
+    className?: string
+}
+
+export type ReactRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps

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>

package/components/Rating/Rating.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import type { RatingProps } from './rating'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import './rating.scss'
+
+const Rating = ({
+    score,
+    total = 5,
+    showText,
+    text = '{0} out of {1}',
+    showEmpty = true,
+    outline = true,
+    reviewCount,
+    reviewText = '{0} reviews',
+    reviewLink,
+    reviewTarget,
+    color,
+    emptyColor,
+    size,
+    className
+}: RatingProps) => {
+    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 })
+    } as React.CSSProperties
+ 
+    const translatedText = text
+        .replace('{0}', `${score}`)
+        .replace('{1}', `${total}`)
+
+    const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
+
+    return (
+        <span className={classes} style={styles}>
+            <span className="score">{Array(score).fill('★').join('')}</span>
+            {showEmpty && (
+                <span className={total === 10 ? 'empty ten-star' : 'empty'}>
+                    {Array(total - score).fill('★').join('')}
+                </span>
+            )}
+            {showText && (
+                <span className={reviewCount ? 'text m' : 'text'}>
+                    {translatedText}
+                </span>
+            )}
+            {reviewCount && '•'}
+            {reviewCount && (
+                <ConditionalWrapper condition={!!reviewLink} wrapper={children => (
+                    <a href={reviewLink} target={reviewTarget}>
+                        {children}
+                    </a>
+                )}>
+                    <span className="text">{translatedReviewText}</span>
+                </ConditionalWrapper>
+            )}
+        </span>
+    )
+}
+
+export default Rating

package/components/Rating/rating.scss

@@ -0,0 +1,37 @@
+@import '../../scss/config.scss';
+
+.w-rating {
+    display: inline-flex;
+    align-items: center;
+    color: var(--w-rating-color);
+    font-size: var(--w-rating-size);
+
+    &.outline .empty {
+        transform: scale(.88);
+        color: black;
+        text-shadow: -1px 0 var(--w-rating-color), 0 1px var(--w-rating-color), 1px 0 var(--w-rating-color), 0 -1px var(--w-rating-color);
+        letter-spacing: 2px;
+    }
+
+    .empty {
+        color: var(--w-rating-empty-color);
+
+        &.ten-star {
+            margin-left: -3px;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+    }
+    
+    .text {
+        font-size: 16px;
+        color: #BBB;
+        margin-left: 5px;
+
+        &.m {
+            margin-right: 5px;
+        }
+    }
+}

package/components/Rating/rating.ts

@@ -0,0 +1,16 @@
+export type RatingProps = {
+    score: number
+    total?: number
+    showText?: boolean
+    text?: string
+    showEmpty?: boolean
+    outline?: boolean
+    reviewCount?: number
+    reviewText?: string
+    reviewLink?: string
+    reviewTarget?: string
+    color?: string
+    emptyColor?: string
+    size?: number
+    className?: string
+}

package/components/Spinner/Spinner.astro

@@ -0,0 +1,42 @@
+---
+import type { SpinnerProps } from './spinner'
+import './spinner.scss'
+
+interface Props extends SpinnerProps {}
+
+const {
+    color,
+    width,
+    speed,
+    size,
+    dashArray,
+} = Astro.props
+
+const classes = [
+    'w-spinner',
+    dashArray && 'dashed'
+]
+
+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(' ')
+---
+
+<svg
+    class:list={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>

package/components/Spinner/Spinner.svelte

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

package/components/Spinner/Spinner.tsx

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

package/components/Spinner/spinner.scss

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

package/components/Spinner/spinner.ts

@@ -0,0 +1,7 @@
+export type SpinnerProps = {
+    color?: string
+    width?: number
+    speed?: number
+    size?: number
+    dashArray?: number
+}

package/components/Switch/Switch.astro

@@ -0,0 +1,38 @@
+---
+import type { SwitchProps } from './switch'
+import './switch.scss'
+
+interface Props extends SwitchProps {}
+
+const {
+    label,
+    toggled,
+    offColor,
+    onColor,
+    reverse,
+    small,
+    square,
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    'w-switch',
+    reverse && 'reverse',
+    small && 'small',
+    square && 'square',
+    disabled && 'disabled',
+    className
+]
+
+const styles = [
+    offColor && `--w-switch-off-color: ${offColor};`,
+    onColor && `--w-switch-on-color: ${onColor};`
+].filter(Boolean).join(' ')
+---
+
+<label class:list={classes} style={styles || null}>
+    <input type="checkbox" checked={toggled} disabled={disabled} />
+    <span class="toggle"></span>
+    {label && <span class="label">{label}</span>}
+</label>

package/components/Switch/Switch.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { SwitchProps } from './switch'
+    import './switch.scss'
+    
+    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 = () => {}
+    
+    const classes = [
+        'w-switch',
+        reverse && 'reverse',
+        small && 'small',
+        square && 'square',
+        disabled && 'disabled',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const styles = [
+        offColor && `--w-switch-off-color: ${offColor};`,
+        onColor && `--w-switch-on-color: ${onColor};`
+    ].filter(Boolean).join(' ')
+</script>
+
+<label class={classes} style={styles || null}>
+    <input
+        type="checkbox"
+        checked={toggled}
+        disabled={disabled}
+        on:click={onClick}
+    />
+    <span class="toggle"></span>
+    {#if label}
+        <span class="label">{label}</span>
+    {/if}
+</label>