webcoreui 0.0.10 → 0.0.12

package/components/Tabs/Tabs.astro

@@ -1,76 +1,77 @@
----
-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>
+---
+import type { TabsProps } from './tabs'
+import styles from './tabs.module.scss'
+
+interface Props extends TabsProps {}
+
+const {
+    items,
+    theme,
+    vertical,
+    even,
+    className
+} = Astro.props
+
+const classes = [
+    styles.tabs,
+    theme && styles[theme],
+    vertical && styles.vertical,
+    even && styles.even,
+    className
+]
+---
+
+<section class:list={classes} data-id="w-tabs">
+    <div class={styles.wrapper}>
+        <div class={styles.items}>
+            {items.map(item => (
+                <button
+                    data-value={item.value}
+                    data-active={item.active ? 'true' : null}
+                    disabled={item.disabled}
+                >
+                    <Fragment set:html={item.label} />
+                </button>
+            ))}
+        </div>
+    </div>
+    <div class={styles.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>
+
+                // TODO - update logic
+                Array.from(tabs).forEach((tab: any) => {
+                    tab.dataset.active = 'false'
+
+                    if (tab.dataset.value === target.dataset.value) {
+                        tab.dataset.active = 'true'
+                    }
+                })
+            }
+        })
+    })
+</script>

package/components/Tabs/Tabs.svelte

@@ -1,54 +1,56 @@
-<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>
+<script lang="ts">
+    import type { TabsProps } from './tabs'
+
+    import styles from './tabs.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    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 = classNames([
+        styles.tabs,
+        theme && styles[theme],
+        vertical && styles.vertical,
+        even && styles.even,
+        className
+    ])
+
+    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={styles.wrapper}>
+        <div class={styles.items}>
+            {#each items as item}
+                <button
+                    data-active={active ? active === item.value : item.active}
+                    disabled={item.disabled}
+                    on:click={() => setTab(item.value)}
+                >
+                    {@html item.label}
+                </button>
+            {/each}
+        </div>
+    </div>
+    <div class={styles.content} bind:this={tabContainer}>
+        <slot />
+    </div>
+</section>

package/components/Tabs/Tabs.tsx

@@ -1,69 +1,70 @@
-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
+import React, { useState, useRef } from 'react'
+import type { ReactTabsProps } from './tabs'
+
+import styles from './tabs.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Tabs = ({
+    items,
+    theme,
+    vertical,
+    even,
+    className,
+    children
+}: ReactTabsProps) => {
+    const tabContainer = useRef<HTMLDivElement>(null)
+    const [active, setActive] = useState('')
+
+    const classes = classNames([
+        styles.tabs,
+        theme && styles[theme],
+        vertical && styles.vertical,
+        even && styles.even,
+        className
+    ])
+
+    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 ? 'true' : undefined
+        }
+
+        return active === item.value ? 'true' : undefined
+    }
+
+    return (
+        <section className={classes}>
+            <div className={styles.wrapper}>
+                <div className={styles.items}>
+                    {items.map((item, index) => (
+                        <button
+                            key={index}
+                            disabled={item.disabled}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                            onClick={() => setTab(item.value)}
+                            data-active={isActive(item)}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className={styles.content} ref={tabContainer}>
+                {children}
+            </div>
+        </section>
+    )
+}
+
+export default Tabs

package/components/Tabs/{tabs.scss → tabs.module.scss}

@@ -1,41 +1,40 @@
 @import '../../scss/config.scss';
 
-.w-tabs {
-
-    &.boxed .tabs,
-    &.outline .tabs {
-        background: #252525;
+.tabs {
+    &.boxed .items,
+    &.outline .items {
+        background: var(--w-color-primary-50);
         border-radius: 5px;
         padding: 5px;
-        width: fit-content;
+        width: max-content;
 
         button {
             @include Transition();
             border-radius: 5px;
             padding: 10px;
 
-            &.active {
+            &[data-active="true"] {
                 border: 0;
-                background: #000;
+                background: var(--w-color-primary-70);
                 padding-bottom: 10px;
             }
         }
     }
 
-    &.outline .tabs {
+    &.outline .items {
         background: transparent;
-        border: 1px solid #252525;
+        border: 1px solid var(--w-color-primary-50);
 
         button {
             margin-bottom: 0;
 
-            &.active {
-                background: #252525;
+            &[data-active="true"] {
+                background: var(--w-color-primary-50);
             }
         }
     }
 
-    &.even .tabs button {
+    &.even .items button {
         flex: 1;
         justify-content: center;
     }
@@ -44,36 +43,36 @@
         display: flex;
         gap: 20px;
 
-        &.boxed .tabs button,
-        &.outline .tabs button {
+        &.boxed .items button,
+        &.outline .items button {
             border-bottom: 0;
         }
         
-        .tabs {
+        .items {
             flex-direction: column;
             gap: 5px;
             
             button {
                 padding: 10px;
-                border-bottom: 2px solid #252525;
+                border-bottom: 2px solid var(--w-color-primary-50);
 
-                &.active {
+                &[data-active="true"] {
                     padding-bottom: 10px;
                 }
             }
         }
 
-        .tab-content {
+        .content {
             margin-top: 0;
         }
     }
 
-    .tabs-wrapper {
+    .wrapper {
         overflow: auto;
     }
 
-    .tabs {
-        border-bottom: 2px solid #252525;
+    .items {
+        border-bottom: 2px solid var(--w-color-primary-50);
         display: flex;
         gap: 10px;
 
@@ -81,13 +80,13 @@
             @include Transition(color);
             background: transparent;
             cursor: pointer;
-            color: #FFF;
+            color: var(--w-color-primary);
             border: 0;
             font-size: 16px;
             padding: 0;
             margin-bottom: -2px;
             padding: 15px 15px;
-            color: #BBB;
+            color: var(--w-color-primary-20);
             display: flex;
             align-items: center;
             gap: 10px;
@@ -100,19 +99,19 @@
             }
 
             &[disabled] {
-                color: #555;
+                color: var(--w-color-primary-30);
                 cursor: no-drop;
             }
             
-            &.active {
-                color: #FFF;
-                border-bottom: 2px solid #FFF;
+            &[data-active="true"] {
+                color: var(--w-color-primary);
+                border-bottom: 2px solid var(--w-color-primary);
                 padding-bottom: 13px;
             }
         }
     }
 
-    .tab-content {
+    .content {
         margin-top: 20px;
     }
 
@@ -126,8 +125,8 @@
 }
 
 @include Media('xs') {
-    .w-tabs {
-        &.even .tabs {
+    .tabs {
+        &.even .items {
             width: auto;
         }
     }

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -0,0 +1,106 @@
+---
+import type { ThemeSwitcherProps } from './themeswitcher'
+import styles from './themeswitcher.module.scss'
+
+interface Props extends ThemeSwitcherProps {}
+
+const {
+    themes,
+    toggle,
+    size,
+    className
+} = Astro.props
+
+const classes = [
+    styles.switcher,
+    toggle && styles.toggle,
+    className
+]
+
+const primaryTheme = themes[Object.keys(themes)[0]]
+const secondaryTheme = themes[Object.keys(themes)[1]]
+const useIcons = Astro.slots.has('primaryIcon') && Astro.slots.has('secondaryIcon') 
+
+const buttonClasses = [
+    styles.switch,
+    useIcons && styles.icons
+]
+---
+
+<div
+    class:list={classes}
+    style={size ? `--w-theme-switcher-size: ${size}px;` : null}
+    data-id="w-theme-switcher"
+    data-primary-theme={primaryTheme}
+    data-secondary-theme={toggle ? secondaryTheme : undefined}
+>
+    {Object.keys(themes as {}).map((theme, index) => (
+        <button
+            style={!useIcons ? `background:${theme};` : undefined}
+            data-theme={themes[theme]}
+            class:list={buttonClasses}
+        >
+            {index === 0 && <slot name="primaryIcon" />}
+            {index !== 0 && <slot name="secondaryIcon" />}
+        </button>
+    ))}
+</div>
+
+<script>
+    import { setCookie, getCookie } from '../../utils/cookies'
+    import { listen, dispatch } from '../../utils/event'
+
+    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
+    
+    let currentTheme = localStorage.getItem('w-theme')
+        || getCookie('w-theme')
+        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
+        || ''
+
+    const setActiveButton = (buttons: HTMLButtonElement[]) => {
+        buttons.forEach(button => button.dataset.active = 'false')
+
+        buttons.forEach(button => {
+            if (button.dataset.theme === currentTheme) {
+                button.dataset.active = 'true'
+            }
+        })
+    }
+
+    Array.from(switchers).forEach(switcher => {
+        const buttons = Array.from(switcher.querySelectorAll('button'))
+
+        setActiveButton(buttons)
+
+        listen('theme-switched', theme => {
+            currentTheme = theme
+
+            setActiveButton(buttons)
+        })
+
+        switcher.addEventListener('click', event => {
+            const target = event.target as HTMLButtonElement
+
+            if (target.nodeName === 'BUTTON') {
+                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
+
+                const theme = toggleTheme
+                    ? toggleTheme === target.dataset.theme
+                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
+                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
+                    : target.dataset.theme as string
+
+                document.body.classList.replace(currentTheme, theme)
+
+                currentTheme = theme
+
+                setActiveButton(buttons)
+                setCookie('w-theme', currentTheme, 30)
+                localStorage.setItem('w-theme', currentTheme)
+
+                dispatch('theme-switched', currentTheme)
+            }
+        })
+    })
+</script>
+