webcoreui 0.0.9 → 0.0.10

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

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { SwitchProps } from './switch'
+import type { ReactSwitchProps } from './switch'
 import './switch.scss'
 
-type ReactSwitchProps = {
-    onClick?: () => any
-} & SwitchProps
-
 const Switch = ({
     label,
     toggled,
@@ -36,7 +32,7 @@ const Switch = ({
         <label className={classes} style={styles || null}>
             <input
                 type="checkbox"
-                checked={toggled}
+                defaultChecked={toggled}
                 disabled={disabled}
                 onClick={onClick}
             />

package/components/Switch/switch.ts

@@ -9,3 +9,7 @@ export type SwitchProps = {
     disabled?: boolean
     className?: string
 }
+
+export type ReactSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps

package/components/Tabs/Tabs.astro

@@ -0,0 +1,76 @@
+---
+import type { TabsProps } from './tabs'
+import './tabs.scss'
+
+interface Props extends TabsProps {}
+
+const {
+    items,
+    theme,
+    vertical,
+    even,
+    className
+} = Astro.props
+
+const classes = [
+    'w-tabs',
+    theme && theme,
+    vertical && 'vertical',
+    even && 'even',
+    className
+]
+---
+
+<section class:list={classes} data-id="w-tabs">
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {items.map(item => (
+                <button
+                    data-value={item.value}
+                    class:list={[item.active && 'active']}
+                    disabled={item.disabled}
+                >
+                    <Fragment set:html={item.label} />
+                </button>
+            ))}
+        </div>
+    </div>
+    <div class="tab-content">
+        <slot />
+    </div>
+</section>
+
+<script>
+    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+
+    Array.from(tabs).forEach(element => {
+        element.addEventListener('click', event => {
+            const target = event.target as HTMLDivElement
+
+            if (target.dataset.value) {
+                const tabContent = target.parentElement
+                    ?.parentElement
+                    ?.nextElementSibling as HTMLDivElement
+
+                Array.from(tabContent.children)
+                    .forEach((element: any) => {
+                        if (element.dataset.tab === target.dataset.value) {
+                            element.dataset.active = true
+                        } else {
+                            element.dataset.active = false
+                        }
+                })
+
+                const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
+
+                Array.from(tabs).forEach((tab: any) => {
+                    tab.classList.remove('active')
+
+                    if (tab.dataset.value === target.dataset.value) {
+                        tab.classList.add('active')
+                    }
+                })
+            }
+        })
+    })
+</script>

package/components/Tabs/Tabs.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { TabsProps } from './tabs'
+    import './tabs.scss'
+
+    export let items: TabsProps['items'] = []
+    export let theme: TabsProps['theme'] = null
+    export let vertical: TabsProps['vertical'] = false
+    export let even: TabsProps['even'] = false
+    export let className: TabsProps['className'] = ''
+
+    let active = ''
+    let tabContainer: HTMLDivElement
+
+    const classes = [
+        'w-tabs',
+        theme && theme,
+        vertical && 'vertical',
+        even && 'even',
+        className
+    ].filter(Boolean).join(' ')
+
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.querySelectorAll('[data-tab]')
+
+        active = tab
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === active) {
+                item.dataset.active = true
+            }
+        })
+    }
+</script>
+
+<section class={classes}>
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {#each items as item}
+                <button
+                    class:active={active ? active === item.value : item.active}
+                    disabled={item.disabled}
+                    on:click={() => setTab(item.value)}
+                >
+                    {@html item.label}
+                </button>
+            {/each}
+        </div>
+    </div>
+    <div class="tab-content" bind:this={tabContainer}>
+        <slot />
+    </div>
+</section>

package/components/Tabs/Tabs.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useRef } from 'react'
+import type { ReactTabsProps } from './tabs'
+
+import './tabs.scss'
+
+const Tabs = ({
+    items,
+    theme,
+    vertical,
+    even,
+    className,
+    children
+}: ReactTabsProps) => {
+    const tabContainer = useRef<HTMLDivElement>(null)
+    const [active, setActive] = useState('')
+
+    const classes = [
+        'w-tabs',
+        theme && theme,
+        vertical && 'vertical',
+        even && 'even',
+        className
+    ].filter(Boolean).join(' ')
+
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.current!.querySelectorAll('[data-tab]')
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === tab) {
+                item.dataset.active = true
+            }
+        })
+    
+        setActive(tab)
+    }
+
+    const isActive = (item: ReactTabsProps['items'][0]) => {
+        if (!active) {
+            return item.active ? 'active' : undefined
+        }
+
+        return active === item.value ? 'active' : undefined
+    }
+
+    return (
+        <section className={classes}>
+            <div className="tabs-wrapper">
+                <div className="tabs">
+                    {items.map((item, index) => (
+                        <button
+                            key={index}
+                            disabled={item.disabled}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                            onClick={() => setTab(item.value)}
+                            className={isActive(item)}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className="tab-content" ref={tabContainer}>
+                {children}
+            </div>
+        </section>
+    )
+}
+
+export default Tabs

package/components/Tabs/tabs.scss

@@ -0,0 +1,134 @@
+@import '../../scss/config.scss';
+
+.w-tabs {
+
+    &.boxed .tabs,
+    &.outline .tabs {
+        background: #252525;
+        border-radius: 5px;
+        padding: 5px;
+        width: fit-content;
+
+        button {
+            @include Transition();
+            border-radius: 5px;
+            padding: 10px;
+
+            &.active {
+                border: 0;
+                background: #000;
+                padding-bottom: 10px;
+            }
+        }
+    }
+
+    &.outline .tabs {
+        background: transparent;
+        border: 1px solid #252525;
+
+        button {
+            margin-bottom: 0;
+
+            &.active {
+                background: #252525;
+            }
+        }
+    }
+
+    &.even .tabs button {
+        flex: 1;
+        justify-content: center;
+    }
+
+    &.vertical {
+        display: flex;
+        gap: 20px;
+
+        &.boxed .tabs button,
+        &.outline .tabs button {
+            border-bottom: 0;
+        }
+        
+        .tabs {
+            flex-direction: column;
+            gap: 5px;
+            
+            button {
+                padding: 10px;
+                border-bottom: 2px solid #252525;
+
+                &.active {
+                    padding-bottom: 10px;
+                }
+            }
+        }
+
+        .tab-content {
+            margin-top: 0;
+        }
+    }
+
+    .tabs-wrapper {
+        overflow: auto;
+    }
+
+    .tabs {
+        border-bottom: 2px solid #252525;
+        display: flex;
+        gap: 10px;
+
+        button {
+            @include Transition(color);
+            background: transparent;
+            cursor: pointer;
+            color: #FFF;
+            border: 0;
+            font-size: 16px;
+            padding: 0;
+            margin-bottom: -2px;
+            padding: 15px 15px;
+            color: #BBB;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-shrink: 0;
+
+            svg {
+                pointer-events: none;
+                width: 20px;
+                height: 20px;
+            }
+
+            &[disabled] {
+                color: #555;
+                cursor: no-drop;
+            }
+            
+            &.active {
+                color: #FFF;
+                border-bottom: 2px solid #FFF;
+                padding-bottom: 13px;
+            }
+        }
+    }
+
+    .tab-content {
+        margin-top: 20px;
+    }
+
+    [data-tab] {
+        display: none;
+
+        &[data-active="true"] {
+            display: block;
+        }
+    }
+}
+
+@include Media('xs') {
+    .w-tabs {
+        &.even .tabs {
+            width: auto;
+        }
+    }
+}

package/components/Tabs/tabs.ts

@@ -0,0 +1,16 @@
+export type TabsProps = {
+    items: {
+        label: string
+        value: string
+        active?: boolean
+        disabled?: boolean
+    }[]
+    theme?: 'boxed' | 'outline' | null
+    vertical?: boolean
+    even?: boolean
+    className?: string
+}
+
+export type ReactTabsProps = {
+    children: React.ReactNode
+} & TabsProps

package/components/Timeline/Timeline.astro

@@ -0,0 +1,34 @@
+---
+import type { TimelineProps } from './timeline'
+import './timeline.scss'
+
+interface Props extends TimelineProps {}
+
+const {
+    theme,
+    counter,
+    alternate,
+    centered,
+    color,
+    textColor,
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline',
+    theme,
+    alternate && 'alternate',
+    centered && 'centered',
+    className
+]
+
+const styles = [
+    color && `--w-timeline-color: ${color};`,
+    textColor && `--w-timeline-text-color: ${textColor};`,
+    counter && `--w-timeline-counter: ${counter};`,
+].join('')
+---
+
+<ul class:list={classes} style={styles}>
+    <slot />
+</ul>

package/components/Timeline/Timeline.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { TimelineProps } from './timeline'
+    import './timeline.scss'
+
+    export let theme: TimelineProps['theme'] = null
+    export let counter: TimelineProps['counter'] = null
+    export let alternate: TimelineProps['alternate'] = false
+    export let centered: TimelineProps['centered'] = false
+    export let color: TimelineProps['color'] = ''
+    export let textColor: TimelineProps['textColor'] = ''
+    export let className: TimelineProps['className'] = ''
+
+    const classes = [
+        'w-timeline',
+        theme,
+        alternate && 'alternate',
+        centered && 'centered',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-timeline-color: ${color};`,
+        textColor && `--w-timeline-text-color: ${textColor};`,
+        counter && `--w-timeline-counter: ${counter};`,
+    ].join('')
+</script>
+
+<ul class={classes} style={styles}>
+    <slot />
+</ul>

package/components/Timeline/Timeline.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import type { ReactTimelineProps } from './timeline'
+
+import './timeline.scss'
+
+const Timeline = ({
+    theme,
+    counter,
+    alternate,
+    centered,
+    color,
+    textColor,
+    className,
+    children
+}: ReactTimelineProps) => {
+    const classes = [
+        'w-timeline',
+        theme,
+        alternate && 'alternate',
+        centered && 'centered',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-timeline-color': color }),
+        ...(textColor && { '--w-timeline-text-color': textColor }),
+        ...(counter && { '--w-timeline-counter': counter }),
+    } as React.CSSProperties
+
+    return (
+        <ul className={classes} style={styles}>
+            {children}
+        </ul>
+    )
+}
+
+export default Timeline

package/components/Timeline/timeline.scss

@@ -0,0 +1,71 @@
+@import '../../scss/config.scss';
+
+// (circle width + border * 2) / 2 - line width
+$leftOffset: calc(((25px + 4px) / 2) - 1px);
+$rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
+
+.w-timeline {
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    padding: 0 0 0 40px;
+    margin: 0;
+    list-style-type: none;
+    counter-reset: item;
+    position: relative;
+
+    &::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        background: var(--w-timeline-color);
+        height: 100%;
+        left: $leftOffset
+    }
+
+    &.fill li::before {
+        content: '';
+    }
+
+    &.stroke li::before {
+        background: #000;
+        border: 2px solid var(--w-timeline-color);
+    }
+}
+
+@include Media('xs') {
+    .w-timeline {
+        &.alternate {
+            padding: 0;
+    
+            &::before {
+                left: calc(50% - 1px);
+            }
+    
+            li {
+                width: 50%;
+    
+                &:nth-child(odd) {
+                    padding-right: 40px;
+                }
+    
+                &:nth-child(even) {
+                    align-self: flex-end;
+                    padding-left: 40px;
+    
+                    &::before {
+                        left: 25px;
+                    }
+                }
+    
+                &::before {
+                    right: $rightOffset;
+                }
+            }
+        }
+    
+        &.centered li:nth-child(odd) {
+            text-align: right;
+        }
+    }
+}