webcoreui 0.0.9 → 0.0.11

package/components/Table/table.ts

@@ -0,0 +1,10 @@
+export type TableProps = {
+    headings?: string[]
+    footer?: string[]
+    data: string[][]
+    hover?: boolean
+    striped?: 'column' | 'row' | null
+    offsetStripe?: boolean
+    compact?: boolean
+    className?: string
+}

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;
+        }
+    }
+}

package/components/Timeline/timeline.ts

@@ -0,0 +1,61 @@
+export type TimelineProps = {
+    theme?: 'fill' | 'stroke' | 'stroke fill' | null
+    alternate?: boolean
+    centered?: boolean
+    color?: string
+    textColor?: string
+    className?: string
+    counter?: 'arabic-indic'
+    | 'armenian'
+    | 'bengali'
+    | 'cambodian'
+    | 'circle'
+    | 'cjk-decimal'
+    | 'cjk-earthly-branch'
+    | 'cjk-heavenly-stem'
+    | 'decimal-leading-zero'
+    | 'devanagari'
+    | 'disc'
+    | 'disclosure-closed'
+    | 'disclosure-open'
+    | 'ethiopic-numeric'
+    | 'georgian'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'hiragana'
+    | 'hiragana-iroha'
+    | 'japanese-formal'
+    | 'kannada'
+    | 'katakana'
+    | 'katakana-iroha'
+    | 'khmer'
+    | 'korean-hangul-formal'
+    | 'korean-hanja-formal'
+    | 'lao'
+    | 'lower-alpha'
+    | 'lower-alpha'
+    | 'lower-armenian'
+    | 'lower-greek'
+    | 'lower-roman'
+    | 'malayalam'
+    | 'mongolian'
+    | 'myanmar'
+    | 'oriya'
+    | 'persian'
+    | 'simp-chinese-formal'
+    | 'square'
+    | 'tamil'
+    | 'telugu'
+    | 'thai'
+    | 'tibetan'
+    | 'trad-chinese-formal'
+    | 'upper-alpha'
+    | 'upper-armenian'
+    | 'upper-roman'
+    | null
+}
+
+export type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps

package/components/TimelineItem/TimelineItem.astro

@@ -0,0 +1,26 @@
+---
+import type { TimelineItemProps } from './timelineitem'
+import './timelineitem.scss'
+
+interface Props extends TimelineItemProps {}
+
+const {
+    title,
+    titleTag = 'span',
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline-item',
+    className
+]
+
+const Title = titleTag
+---
+
+<li class:list={classes}>
+    {title && (
+        <Title class:list="timeline-title">{title}</Title>
+    )}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { TimelineItemProps } from './timelineitem'
+    import './timelineitem.scss'
+
+    export let title: TimelineItemProps['title'] = ''
+    export let titleTag: TimelineItemProps['titleTag'] = 'span'
+    export let className: TimelineItemProps['className'] = ''
+
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<li class={classes}>
+    {#if title}
+        <svelte:element this={titleTag} class="timeline-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { TimelineItemProps } from './timelineitem'
+
+import './timelineitem.scss'
+
+type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>
+
+const TimelineItem = ({
+    title,
+    TitleTag = 'span',
+    className,
+    children
+}: ReactTimelineItemProps) => {
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <li className={classes}>
+            {title && (
+                <TitleTag className="timeline-title">{title}</TitleTag>
+            )}
+            {children}
+        </li>
+    )
+}
+
+export default TimelineItem