webcoreui 0.0.8 → 0.0.10

package/components/Switch/Switch.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import type { ReactSwitchProps } from './switch'
+import './switch.scss'
+
+const Switch = ({
+    label,
+    toggled,
+    offColor,
+    onColor,
+    reverse,
+    small,
+    square,
+    disabled,
+    className,
+    onClick
+}: ReactSwitchProps) => {
+    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 })
+    } as React.CSSProperties
+
+    return (
+        <label className={classes} style={styles || null}>
+            <input
+                type="checkbox"
+                defaultChecked={toggled}
+                disabled={disabled}
+                onClick={onClick}
+            />
+            <span className="toggle"></span>
+            {label && <span className="label">{label}</span>}
+        </label>
+    )
+    
+}
+
+export default Switch

package/components/Switch/switch.scss

@@ -0,0 +1,84 @@
+@import '../../scss/config.scss';
+
+.w-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+
+    &.disabled .toggle {
+        cursor: no-drop;
+        background: #333;
+
+        &::before {
+            background: #252525;
+        }
+    }
+
+    &.small {
+        input:checked + span::before {
+            transform: translateX(20px);
+        }
+
+        .toggle {
+            width: 40px;
+            height: 20px;
+    
+            &::before {
+                height: 14px;
+                width: 14px;
+            }
+        }
+
+        .label {
+            font-size: 14px;
+        }
+    }
+
+    &.square .toggle {
+        border-radius: 5px;
+
+        &::before {
+            border-radius: 5px;
+        }
+    }
+
+    input {
+        display: none;
+
+        &:checked + span {
+            background-color: var(--w-switch-on-color);
+    
+            &::before {
+                transform: translateX(30px);
+            }
+        }
+    }
+
+    .toggle {
+        @include Transition(background);
+        position: relative;
+        width: 60px;
+        height: 30px;
+        background: var(--w-switch-off-color);
+        border-radius: 30px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 24px;
+            width: 24px;
+            left: 3px;
+            bottom: 3px;
+            background: #000;
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+    }
+}
+  
+  

package/components/Switch/switch.ts

@@ -0,0 +1,15 @@
+export type SwitchProps = {
+    label?: string
+    toggled?: boolean
+    offColor?: string
+    onColor?: string
+    reverse?: boolean
+    small?: boolean
+    square?: boolean
+    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;
+        }
+    }
+}