webcoreui 0.6.1 → 0.8.0

package/components/Skeleton/skeleton.module.scss

@@ -0,0 +1,68 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-skeleton-color: var(--w-color-primary-60);
+    --w-skeleton-wave-color: var(--w-color-primary-50);
+}
+
+.skeleton {
+    @include background(var(--w-skeleton-color));
+    @include size(100%);
+
+    text-indent: -9999px;
+
+    &.wave {
+        @include position(relative);
+        @include visibility(hidden);
+
+        &::after {
+            @include position(absolute, t0);
+            @include visibility(block);
+            @include size('w200px', 'h100%');
+
+            content: '';
+            left: -200px;
+            animation: wave 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+            background: linear-gradient(
+                to right,
+                transparent 0%,
+                var(--w-skeleton-wave-color) 50%,
+                transparent 100%
+            );
+        }
+    }
+
+    &.pulse {
+        animation: pulse 1.3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+    }
+
+    &.rounded {
+        @include border-radius();
+    }
+
+    &.circle {
+        @include border-radius(max);
+    }
+}
+
+@keyframes wave {
+    from {
+        left: -200px;
+    }
+    to   {
+        left: 100%;
+    }
+}
+
+
+@keyframes pulse {
+    0% {
+        @include visibility(1);
+    }
+    50% {
+        @include visibility(.7);
+    }
+    100% {
+        @include visibility(1);
+    }
+}

package/components/Skeleton/skeleton.ts

@@ -0,0 +1,9 @@
+export type SkeletonProps = {
+    animate?: 'wave' | 'pulse' | false
+    type?: 'rounded' | 'rectangular' | 'circle'
+    width?: number
+    height?: number
+    color?: string
+    waveColor?: string
+    className?: string
+}

package/components/Slider/slider.module.scss

@@ -1,68 +1,68 @@
-@import '../../scss/config.scss';
-
-body {
-    --w-slider-background: var(--w-color-primary-50);
-    --w-slider-color: var(--w-color-primary);
-    --w-slider-thumb: var(--w-color-primary-50);
-}
-
-.slider {
-    @include border-radius(xl);
-    @include size('w100%');
-    @include visibility(hidden);
-    @include size(h10px);
-    @include spacing(m0);
-
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-
-    &[disabled]::-webkit-slider-runnable-track {
-        @include background(primary-50);
-    }
-    
-    &[disabled]::-moz-range-track {
-        @include background(primary-50);
-    }
-
-    &[disabled]::-webkit-slider-thumb {
-        @include background(primary-50);
-        @include border(primary-30);
-        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
-    }
-
-    &[disabled]::-moz-range-thumb {
-        @include background(primary-50);
-        @include border(primary-30);
-        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
-    }
-}
-
-.slider::-webkit-slider-runnable-track {
-    @include background(var(--w-slider-background));
-}
-
-.slider::-moz-range-track {
-    @include background(var(--w-slider-background));
-    @include size(h10px);
-}
-
-.slider::-webkit-slider-thumb {
-    @include background(var(--w-slider-thumb));
-    @include size(10px);
-    @include border-radius(max);
-    @include border(var(--w-slider-color));
-
-    -webkit-appearance: none;
-    appearance: none;
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
-}
-
-.slider::-moz-range-thumb {
-    @include background(var(--w-slider-thumb));
-    @include size(9px);
-    @include border-radius(max);
-    @include border(var(--w-slider-color));
-
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+}
+
+.slider {
+    @include border-radius(xl);
+    @include size('w100%');
+    @include visibility(hidden);
+    @include size(h10px);
+    @include spacing(m0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+}
+
+.slider::-webkit-slider-runnable-track {
+    @include background(var(--w-slider-background));
+}
+
+.slider::-moz-range-track {
+    @include background(var(--w-slider-background));
+    @include size(h10px);
+}
+
+.slider::-webkit-slider-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}
+
+.slider::-moz-range-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}

package/components/Spoiler/Spoiler.astro

@@ -0,0 +1,50 @@
+---
+import type { SpoilerProps } from './spoiler'
+
+import styles from './spoiler.module.scss'
+
+interface Props extends SpoilerProps {}
+
+const {
+    color,
+    animated = true,
+    block,
+    tooltip,
+    tooltipPosition
+} = Astro.props
+
+const classes = [
+    styles.spoiler,
+    animated && styles.anim,
+    block && styles.block
+]
+
+const style = color
+    ? `--w-spoiler-color: ${color};`
+    : null
+---
+
+<span
+    class:list={classes}
+    style={style}
+    data-tooltip={tooltip}
+    data-position={tooltipPosition}
+    data-id="w-spoiler"
+    role="button"
+    tabindex="0"
+>
+    <slot />
+</span>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    on('[data-id="w-spoiler"]', 'click', (event: Event) => {
+        const target = event.currentTarget as HTMLDivElement
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }, true)
+</script>

package/components/Spoiler/Spoiler.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SpoilerProps } from './spoiler'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './spoiler.module.scss'
+
+    export let color: SpoilerProps['color'] = ''
+    export let animated: SpoilerProps['animated'] = true
+    export let block: SpoilerProps['block'] = false
+    export let tooltip: SpoilerProps['tooltip'] = ''
+    export let tooltipPosition: SpoilerProps['tooltipPosition'] = null
+
+    const classes = classNames([
+        styles.spoiler,
+        animated && styles.anim,
+        block && styles.block
+    ])
+
+    const style = color
+        ? `--w-spoiler-color: ${color};`
+        : null
+
+    const toggle = (event: MouseEvent | KeyboardEvent) => {
+        const target = event.currentTarget as HTMLSpanElement
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }
+</script>
+
+<span
+    class={classes}
+    style={style}
+    data-tooltip={tooltip || null}
+    data-position={tooltipPosition}
+    role="button"
+    tabindex="0"
+    on:click={toggle}
+    on:keyup={toggle}
+>
+    <slot />
+</span>

package/components/Spoiler/Spoiler.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import type { ReactSpoilerProps } from './spoiler'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './spoiler.module.scss'
+
+const Spoiler = ({
+    color,
+    animated = true,
+    block,
+    tooltip,
+    tooltipPosition,
+    children
+}: ReactSpoilerProps) => {
+    const classes = classNames([
+        styles.spoiler,
+        animated && styles.anim,
+        block && styles.block
+    ])
+
+    const style = color
+        ? { '--w-spoiler-color': color } as React.CSSProperties
+        : undefined
+
+    const toggle = (event: React.MouseEvent<HTMLSpanElement>) => {
+        const target = event.currentTarget
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }
+
+    return (
+        <span
+            className={classes}
+            style={style}
+            data-tooltip={tooltip}
+            data-position={tooltipPosition}
+            role="button"
+            tabIndex={0}
+            onClick={toggle}
+        >
+            {children}
+        </span>
+    )
+}
+
+export default Spoiler

package/components/Spoiler/spoiler.module.scss

@@ -0,0 +1,40 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-spoiler-color: var(--w-color-primary);
+}
+
+span.spoiler {
+    @include border-radius();
+    @include background(var(--w-spoiler-color));
+    @include typography(hmd);
+    @include visibility(inline);
+
+    color: transparent;
+    user-select: none;
+    cursor: pointer;
+
+    &.anim {
+        @include transition();
+    }
+
+    &.block {
+        @include visibility(block);
+    }
+
+    code {
+        @include border(0);
+    }
+
+    &[data-visible] {
+        @include background(transparent);
+        
+        color: inherit;
+        user-select: auto;
+        cursor: auto;
+
+        code {
+            @include border(primary-50);
+        }
+    }
+}

package/components/Spoiler/spoiler.ts

@@ -0,0 +1,11 @@
+export type SpoilerProps = {
+    color?: string
+    animated?: boolean
+    block?: boolean
+    tooltip?: string
+    tooltipPosition?: 'bottom' | null
+}
+
+export type ReactSpoilerProps = {
+    children: React.ReactNode
+} & SpoilerProps

package/components/Stepper/Stepper.astro

@@ -0,0 +1,61 @@
+---
+import type { StepperProps } from './stepper'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Icon from '../Icon/Icon.astro'
+
+import styles from './stepper.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends StepperProps {}
+
+const {
+    items,
+    color,
+    completedColor,
+    activeColor,
+    borderless,
+    vertical,
+    className
+} = Astro.props
+
+const classes = [
+    styles.stepper,
+    borderless && styles.borderless,
+    vertical && styles.vertical,
+    className
+]
+
+const styleVariables = [
+    color && `--w-stepper-color-border: ${color}`,
+    completedColor && `--w-stepper-color-complete: ${completedColor}`,
+    activeColor && `--w-stepper-color-active: ${activeColor}`
+].filter(Boolean).join(';')
+---
+
+<ol class:list={classes} style={styleVariables}>
+    {items?.map((item, index) => (
+        <li class:list={[
+            index !== 0 && styles.connect,
+            item.active && styles.active,
+            item.completed && styles.completed
+        ]}>
+            <span class={styles.number}>
+                {item.icon ? (
+                    <Fragment>
+                        {item.icon.startsWith('<svg')
+                            ? <Fragment set:html={item.icon} />
+                            : <Icon type={item.icon as IconProps['type']} />
+                        }
+                    </Fragment>
+                ) : index + 1}
+            </span>
+            <ConditionalWrapper condition={!!(item.title && item.subTitle)}>
+                <div slot="wrapper" class={styles.container}>children</div>
+                {item.title && <span>{item.title}</span>}
+                {item.subTitle && <span class={styles.muted}>{item.subTitle}</span>}
+            </ConditionalWrapper>
+        </li>
+    ))}
+</ol>

package/components/Stepper/Stepper.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { StepperProps } from './stepper'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './stepper.module.scss'
+
+    export let items: StepperProps['items'] = []
+    export let color: StepperProps['color'] = ''
+    export let completedColor: StepperProps['completedColor'] = ''
+    export let activeColor: StepperProps['activeColor'] = ''
+    export let borderless: StepperProps['vertical'] = false
+    export let vertical: StepperProps['vertical'] = false
+    export let className: StepperProps['className'] = ''
+
+    const classes = classNames([
+        styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
+        className
+    ])
+
+    const styleVariables = [
+        color && `--w-stepper-color-border: ${color}`,
+        completedColor && `--w-stepper-color-complete: ${completedColor}`,
+        activeColor && `--w-stepper-color-active: ${activeColor}`
+    ].filter(Boolean).join(';')
+</script>
+
+<ol class={classes} style={styleVariables || null}>
+    {#each items as item, index}
+        <li class={classNames([
+            index !== 0 && styles.connect,
+            item.active && styles.active,
+            item.completed && styles.completed
+        ])}>
+            <span class={styles.number}>
+                {#if item.icon}
+                    {@html item.icon}
+                {:else}
+                    {index + 1}
+                {/if}
+            </span>
+            <ConditionalWrapper
+                condition={!!(item.title && item.subTitle)}
+                class={styles.container}
+            >
+                {#if item.title}
+                    <span>{item.title}</span>
+                {/if}
+                {#if item.subTitle}
+                    <span class={styles.muted}>{item.subTitle}</span>
+                {/if}
+            </ConditionalWrapper>
+        </li>
+    {/each}
+</ol>

package/components/Stepper/Stepper.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import type { StepperProps } from './stepper'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './stepper.module.scss'
+
+const Stepper = ({
+    items,
+    color,
+    completedColor,
+    activeColor,
+    borderless,
+    vertical,
+    className
+}: StepperProps) => {
+    const classes = classNames([
+        styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-stepper-color-border': color }),
+        ...(completedColor && { '--w-stepper-color-complete': completedColor }),
+        ...(activeColor && { '--w-stepper-color-active': activeColor })
+    } as React.CSSProperties
+
+    return (
+        <ol className={classes} style={styleVariables}>
+            {items?.map((item, index) => (
+                <li className={classNames([
+                    index !== 0 && styles.connect,
+                    item.active && styles.active,
+                    item.completed && styles.completed
+                ])} key={index}>
+                    <span
+                        className={styles.number}
+                        dangerouslySetInnerHTML={{ __html: item.icon
+                            ? item.icon
+                            : index + 1
+                        }}
+                    />
+                    <ConditionalWrapper
+                        condition={!!(item.title && item.subTitle)}
+                        wrapper={children => <div className={styles.container}>{children}</div>}
+                    >
+                        {item.title && <span>{item.title}</span>}
+                        {item.subTitle && <span className={styles.muted}>{item.subTitle}</span>}
+                    </ConditionalWrapper>
+                </li>
+            ))}
+        </ol>
+    )
+}
+
+export default Stepper

package/components/Stepper/stepper.module.scss

@@ -0,0 +1,102 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-stepper-color-border: var(--w-color-primary-50);
+    --w-stepper-color-active: var(--w-color-info);
+    --w-stepper-color-complete: var(--w-color-success);
+}
+
+$size: 20px;
+
+.stepper {
+    @include layout(flex, default, column);
+    @include spacing(0);
+    @include size('w100%');
+
+    list-style-type: none;
+
+    &:not(.borderless) .number {
+        border: 2px solid var(--w-stepper-color-border);
+    }
+
+    li {
+        @include layout(flex, sm, v-center);
+        @include typography(normal);
+        @include spacing(m0);
+
+        flex: 1;
+
+        &.connect {
+            @include position(relative);
+
+            &::before {
+                @include position(absolute, l16px);
+                @include background(var(--w-stepper-color-border));
+                @include size(w2px);
+
+                top: -50%;
+                bottom: calc(50% + $size);
+
+                content: '';
+            }
+
+            &.completed::before,
+            &.active::before {
+                @include background(var(--w-stepper-color-complete));
+            }
+        }
+
+        &.active .number {
+            border-color: var(--w-stepper-color-active);
+            color: var(--w-stepper-color-active);
+        }
+
+        &.completed .number {
+            border-color: var(--w-stepper-color-complete);
+            color: var(--w-stepper-color-complete);
+        }
+
+        .number {
+            @include size($size);
+            @include border-radius(max);
+            @include layout(flex, center);
+            @include spacing(p-md);
+            @include typography(bold, md);
+
+            svg {
+                @include position(absolute);
+            }
+        }
+
+        .container {
+            @include layout(flex, column);
+        }
+
+        .muted {
+            @include typography(primary-20, md);
+        }
+    }
+}
+
+@include media(xs) {
+    .stepper:not(.vertical) {
+        @include layout(row);
+
+        li {
+            @include layout(column, xs, v-center);
+
+            &.connect::before {
+                @include size(h2px);
+
+                width: auto;
+                top: 16px;
+                left: calc(-50%);
+                right: calc(50% + $size);
+            }
+
+            .container {
+                @include layout(v-center);
+            }
+        }
+    }
+}