webcoreui 0.6.0 → 0.7.0

package/components/Kbd/kbd.module.scss

@@ -0,0 +1,8 @@
+@import '../../scss/config.scss';
+
+.kbd {
+    @include background(primary-50);
+    @include border-radius(md);
+    @include typography(md, regular);
+    @include spacing(py-xs, px-xs);
+}

package/components/Kbd/kbd.ts

@@ -0,0 +1,26 @@
+export type KbdProps = {
+    keys?: ('cmd'
+        | 'shift'
+        | 'ctrl'
+        | 'option'
+        | 'enter'
+        | 'del'
+        | 'esc'
+        | 'tab'
+        | 'capslock'
+        | 'up'
+        | 'down'
+        | 'left'
+        | 'right'
+        | 'pageup'
+        | 'pagedown'
+        | 'home'
+        | 'end'
+        | 'help'
+        | 'space')[]
+    className?: string
+}
+
+export type ReactKbdProps = {
+    children?: React.ReactNode
+} & KbdProps

package/components/Kbd/keyMap.ts

@@ -0,0 +1,21 @@
+export const keyMap = {
+    cmd: '⌘',
+    shift: '⇧',
+    ctrl: '⌃',
+    option: '⌥',
+    enter: '↵',
+    del: '⌫',
+    esc: '⎋',
+    tab: '⇥',
+    capslock: '⇪',
+    up: '↑',
+    down: '↓',
+    left: '←',
+    right: '→',
+    pageup: '⇞',
+    pagedown: '⇟',
+    home: '↖',
+    end: '↘',
+    help: '?',
+    space: '␣'
+}

package/components/Pagination/Pagination.astro

@@ -150,6 +150,7 @@ const generatedPages = pages?.length
                 const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
                 const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
                 const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
+                const previousPage = currentPage
 
                 const pageElements = Array
                     .from(pagination.children)
@@ -179,6 +180,7 @@ const generatedPages = pages?.length
 
                 dispatch('paginate', {
                     page: currentPage,
+                    direction: previousPage > currentPage ? 'prev' : 'next',
                     ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
                     target: element,
                     trusted: event.isTrusted

package/components/Pagination/Pagination.svelte

@@ -45,6 +45,8 @@
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
+
         if (to === 'prev') {
             calculatedCurrentPage = calculatedCurrentPage - 1
         } else if (to === 'next') {
@@ -57,6 +59,7 @@
 
         onChange?.({
             page: calculatedCurrentPage,
+            direction: previousPage > calculatedCurrentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -87,7 +90,7 @@
                 theme={theme}
                 onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                     ? () => paginate('prev')
-                    : null
+                    : undefined
                 }
             >
                 {#if showChevrons || type === 'arrows'}
@@ -107,7 +110,7 @@
                         theme={theme}
                         onClick={calculatedCurrentPage !== index + 1
                             ? () => paginate(index + 1)
-                            : null
+                            : undefined
                         }
                     >
                         {page.label}
@@ -129,7 +132,7 @@
                 theme={theme}
                 onClick={!disableNext
                     ? () => paginate('next')
-                    : null
+                    : undefined
                 }
             >
                 {#if type !== 'arrows'}

package/components/Pagination/Pagination.tsx

@@ -53,6 +53,7 @@ const Pagination = ({
         }))
 
     const paginate = (to: string | number) => {
+        const previousPage = calculatedCurrentPage
         let currentPage = calculatedCurrentPage
 
         if (to === 'prev') {
@@ -69,6 +70,7 @@ const Pagination = ({
 
         onChange?.({
             page: currentPage,
+            direction: previousPage > currentPage ? 'prev' : 'next',
             ...(label && { label })
         })
     }
@@ -104,7 +106,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!(disablePrevious || (calculatedCurrentPage === 1 && !previousLink))
                                 ? () => paginate('prev')
-                                : null
+                                : undefined
                             }
                         >
                             {(showChevrons || type === 'arrows') && (
@@ -122,7 +124,7 @@ const Pagination = ({
                                     theme={theme}
                                     onClick={calculatedCurrentPage !== index + 1
                                         ? () => paginate(index + 1)
-                                        : null
+                                        : undefined
                                     }
                                 >
                                     {page.label}
@@ -144,7 +146,7 @@ const Pagination = ({
                             theme={theme}
                             onClick={!disableNext
                                 ? () => paginate('next')
-                                : null
+                                : undefined
                             }
                         >
                             {type !== 'arrows' && nextPageLabel}

package/components/Pagination/pagination.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from '../Button/button'
 
 export type PaginationEventType = {
     page: number
+    direction: 'prev' | 'next'
     label?: string | number | undefined
 }
 

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 @@
+@import '../../scss/config.scss';
+
+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 @@
+@import '../../scss/config.scss';
+
+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);
+            }
+        }
+    }
+}

package/components/Stepper/stepper.ts

@@ -0,0 +1,17 @@
+import type { IconProps } from '../Icon/icon'
+
+export type StepperProps = {
+    items: {
+        icon?: IconProps['type'] | string
+        title?: string
+        subTitle?: string
+        completed?: boolean
+        active?: boolean
+    }[]
+    color?: string
+    completedColor?: string
+    activeColor?: string
+    borderless?: boolean
+    vertical?: boolean
+    className?: string
+}

package/icons/close.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+<path d="M23 1L1 23M1 1L23 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12H12M12 12H1M12 12V1M12 12V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>