webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Stepper/stepper.module.scss

@@ -1,14 +1,12 @@
 @use '../../scss/config.scss' as *;
 
-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 {
+    --border: var(--w-stepper-color-border, var(--w-color-primary-50));
+    --active: var(--w-stepper-color-active, var(--w-color-info));
+    --complete: var(--w-stepper-color-complete, var(--w-color-success));
+
     @include layout(flex, default, column);
     @include spacing(0);
     @include size('w100%');
@@ -16,7 +14,7 @@ $size: 20px;
     list-style-type: none;
 
     &:not(.borderless) .number {
-        border: 2px solid var(--w-stepper-color-border);
+        border: 2px solid var(--border);
     }
 
     li {
@@ -31,7 +29,7 @@ $size: 20px;
 
             &::before {
                 @include position(absolute, l16px);
-                @include background(var(--w-stepper-color-border));
+                @include background(var(--border));
                 @include size(w2px);
 
                 top: -50%;
@@ -42,18 +40,18 @@ $size: 20px;
 
             &.completed::before,
             &.active::before {
-                @include background(var(--w-stepper-color-complete));
+                @include background(var(--complete));
             }
         }
 
         &.active .number {
-            border-color: var(--w-stepper-color-active);
-            color: var(--w-stepper-color-active);
+            border-color: var(--active);
+            color: var(--active);
         }
 
         &.completed .number {
-            border-color: var(--w-stepper-color-complete);
-            color: var(--w-stepper-color-complete);
+            border-color: var(--complete);
+            color: var(--complete);
         }
 
         .number {

package/components/Switch/Switch.astro

@@ -1,11 +1,12 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { SwitchProps } from './switch'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './switch.module.scss'
 
-interface Props extends SwitchProps {}
+export type Props = SwitchProps<HTMLAttributes<'textarea'>>
 
 const {
     label,
@@ -36,7 +37,11 @@ const styleVariables = classNames([
 ---
 
 <label class:list={classes} style={styleVariables}>
-    <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
+    <input
+        {...rest}
+        type="checkbox"
+        checked={toggled}
+    />
     <span class={styles.toggle}></span>
     {label && <span class={styles.label} set:html={label} />}
 </label>

package/components/Switch/Switch.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
-    import type { SvelteSwitchProps } from './switch'
+    import type {
+        ChangeEventHandler,
+        HTMLInputAttributes,
+        MouseEventHandler
+    } from 'svelte/elements'
+    import type { SwitchProps } from './switch'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './switch.module.scss'
 
+    export type Props = SwitchProps<HTMLInputAttributes> & {
+        onChange?: ChangeEventHandler<HTMLInputElement>
+        onClick?: MouseEventHandler<HTMLInputElement>
+    }
+
     const {
         label,
         toggled,
@@ -18,31 +28,30 @@
         onClick,
         onChange,
         ...rest
-    }: SvelteSwitchProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switch,
         reverse && styles.reverse,
         small && styles.small,
         square && styles.square,
         disabled && styles.disabled,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`
-    ])
+    ]))
 </script>
 
 <label class={classes} style={styleVariables || null}>
     <input
+        {...rest}
         type="checkbox"
         checked={toggled}
-        disabled={disabled}
         onclick={onClick}
         onchange={onChange}
-        {...rest}
     />
     <span class={styles.toggle}></span>
     {#if label}

package/components/Switch/Switch.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
-import type { ReactSwitchProps } from './switch'
+import type { SwitchProps } from './switch'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './switch.module.scss'
 
+export type Props = SwitchProps<React.InputHTMLAttributes<HTMLInputElement>> & {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
+    onClick?: React.MouseEventHandler<HTMLInputElement>
+}
+
 const Switch = ({
     label,
     toggled,
@@ -16,7 +21,7 @@ const Switch = ({
     disabled,
     className,
     ...rest
-}: ReactSwitchProps) => {
+}: Props) => {
     const classes = classNames([
         styles.switch,
         reverse && styles.reverse,
@@ -34,10 +39,9 @@ const Switch = ({
     return (
         <label className={classes} style={styleVariables || null}>
             <input
+                {...rest}
                 type="checkbox"
                 defaultChecked={toggled}
-                disabled={disabled}
-                {...rest}
             />
             <span className={styles.toggle}></span>
             {label && (

package/components/Switch/switch.module.scss

@@ -1,11 +1,9 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-}
-
 .switch {
+    --off-color: var(--w-switch-off-color, var(--w-color-primary-50));
+    --on-color: var(--w-switch-on-color, var(--w-color-primary));
+
     @include layout(inline-flex, v-center, sm);
     cursor: pointer;
     user-select: none;
@@ -53,7 +51,7 @@ body {
         @include visibility(none);
 
         &:checked + span {
-            @include background(var(--w-switch-on-color));
+            @include background(var(--on-color));
     
             &::before {
                 transform: translateX(30px);
@@ -66,7 +64,7 @@ body {
         @include position(relative);
         @include size(w60px, h30px);
         @include border-radius(xl);
-        @include background(var(--w-switch-off-color));
+        @include background(var(--off-color));
 
         &::before {
             @include transition(transform);

package/components/Switch/switch.ts

@@ -1,24 +1,10 @@
-import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
-
-export type SwitchProps = {
+export type SwitchProps<T extends object = object> = {
     label?: string
     reverse?: boolean
     toggled?: boolean
-    disabled?: boolean
     small?: boolean
     square?: boolean
     onColor?: string
     offColor?: string
     className?: string
-    [key: string]: any
-}
-
-export type SvelteSwitchProps = {
-    onChange?: ChangeEventHandler<HTMLInputElement>
-    onClick?: MouseEventHandler<HTMLInputElement>
-} & SwitchProps
-
-export type ReactSwitchProps = {
-    onChange?: React.ChangeEventHandler<HTMLInputElement>
-    onClick?: React.MouseEventHandler<HTMLInputElement>
-} & SwitchProps
+} & T

package/components/Tab/Tab.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { TabProps } from './tab'
+
+export type Props = TabProps<HTMLAttributes<'section'>>
+
+const {
+    element = 'div',
+    id,
+    active,
+    className,
+    ...rest
+} = Astro.props
+
+const Element = element
+
+const props = {
+    ...rest,
+    'class': className,
+    'data-tab': id,
+    'data-active': active
+}
+---
+
+<Element {...props}><slot /></Element>

package/components/Tab/Tab.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import type { TabProps } from './tab'
+
+    export type Props = TabProps<HTMLAttributes<HTMLElement>> & {
+        children: Snippet
+    }
+
+    const {
+        element = 'div',
+        id,
+        active,
+        className,
+        children,
+        ...rest
+    }: Props = $props()
+</script>
+
+<svelte:element
+    {...rest}
+    {...(className && { class: className })}
+    this={element}
+    data-tab={id}
+    data-active={active}
+>
+    {@render children?.()}
+</svelte:element>

package/components/Tab/Tab.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import type { TabProps } from './tab'
+
+export type Props = TabProps<React.HTMLAttributes<HTMLElement>> & {
+    children: React.ReactNode
+}
+
+const Tab = ({
+    element = 'div',
+    id,
+    active,
+    className,
+    children,
+    ...rest
+}: Props) => {
+    const Element = element as React.ElementType<React.HTMLAttributes<HTMLElement>>
+
+    return (
+        <Element
+            {...rest}
+            className={className}
+            data-tab={id}
+            data-active={active}
+        >
+            {children}
+        </Element>
+    )
+}
+
+export default Tab

package/components/Tab/tab.ts

@@ -0,0 +1,6 @@
+export type TabProps<T extends object = object> = {
+    element?: string
+    id?: string
+    active?: boolean
+    className?: string
+} & T

package/components/Table/Table.astro

@@ -3,7 +3,7 @@ import type { TableProps } from './table'
 
 import styles from './table.module.scss'
 
-interface Props extends TableProps {}
+export type Props = TableProps
 
 const {
     headings,

package/components/Table/Table.svelte

@@ -4,6 +4,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './table.module.scss'
+
+    export type Props = TableProps
 
     const {
         headings,
@@ -15,9 +17,9 @@
         compact,
         maxHeight,
         className
-    }: TableProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
@@ -25,7 +27,7 @@
         compact && styles.compact,
         maxHeight && styles.scroll,
         className
-    ])
+    ]))
 </script>
 
 <div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>

package/components/Table/Table.tsx

@@ -4,6 +4,8 @@ import type { TableProps } from './table'
 import { classNames } from '../../utils/classNames'
 
 import styles from './table.module.scss'
+
+export type Props = TableProps
 
 const Table = ({
     headings,
@@ -15,7 +17,7 @@ const Table = ({
     compact,
     maxHeight,
     className
-}: TableProps) => {
+}: Props) => {
     const classes = classNames([
         styles.table,
         hover && styles.hover,

package/components/Tabs/Tabs.astro

@@ -3,7 +3,7 @@ import type { TabsProps } from './tabs'
 
 import styles from './tabs.module.scss'
 
-interface Props extends TabsProps {}
+export type Props = TabsProps
 
 const {
     items,
@@ -20,6 +20,12 @@ const classes = [
     even && styles.even,
     className
 ]
+
+const hasActive = items.some(item => item.active)
+
+if (!hasActive) {
+    items[0].active = true
+}
 ---
 
 <section class:list={classes} data-id="w-tabs">
@@ -36,45 +42,72 @@ const classes = [
             ))}
         </div>
     </div>
-    <div class={styles.content}>
+    <div
+        class={styles.content}
+        data-id="w-tabs-content"
+        data-active-index={items.findIndex(item => item.active)}
+    >
         <slot />
     </div>
 </section>
 
 <script>
-    import { on } from '../../utils/DOMUtils'
+    import { get, on } from '../../utils/DOMUtils'
+
+    const setActiveTab = () => {
+        const tabContents = get('[data-id="w-tabs-content"]', true) as NodeListOf<HTMLDivElement>
+
+        tabContents.forEach((tabContent) => {
+            const contentChildren = Array.from(tabContent.children) as HTMLElement[]
+
+            if (!contentChildren.some(element => element.dataset.active === 'true')) {
+                const index = Number(tabContent.dataset.activeIndex)
+
+                if (contentChildren[index]) {
+                    contentChildren[index].dataset.active = 'true'
+                }
+            }
+        })
+    }
 
     const addEventListeners = () => {
         on('[data-id="w-tabs"]', 'click', (event: Event) => {
-            const target = event.target as HTMLDivElement
+            const target = event.target as HTMLButtonElement
+
+            if (!target.dataset.value) {
+                return
+            }
 
-            if (target.dataset.value) {
-                const tabContent = target.parentElement
-                    ?.parentElement
-                    ?.nextElementSibling as HTMLDivElement
+            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 btns = Array.from(target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
+            const clickedIndex = btns.indexOf(target)
+            const contentChildren = Array.from(tabContent.children) as HTMLElement[]
+            const hasExplicitTabs = contentChildren.some((element: HTMLElement) => element.dataset.tab)
 
-                const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
+            btns.forEach((tab: HTMLElement, index: number) => {
+                tab.dataset.active = index === clickedIndex ? 'true' : 'false'
 
-                Array.from(tabs).forEach((tab: any) => {
-                    tab.dataset.active = 'false'
+                if (contentChildren[index]) {
+                    const content = contentChildren[index]
 
-                    if (tab.dataset.value === target.dataset.value) {
-                        tab.dataset.active = 'true'
+                    if (hasExplicitTabs) {
+                        content.dataset.active = content.dataset.tab === target.dataset.value ? 'true' : 'false'
+                    } else {
+                        content.dataset.active = index === clickedIndex ? 'true' : 'false'
                     }
-                })
-            }
+                }
+            })
         }, true)
     }
 
-    on(document, 'astro:after-swap', addEventListeners)
-    addEventListeners()
+    const initTabs = () => {
+        setActiveTab()
+        addEventListeners()
+    }
+
+    on(document, 'astro:after-swap', initTabs)
+    initTabs()
 </script>

package/components/Tabs/Tabs.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteTabsProps } from './tabs'
+    import { onMount, type Snippet } from 'svelte'
+    import type { TabsProps } from './tabs'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './tabs.module.scss'
 
+    export type Props = TabsProps & {
+        children: Snippet
+    }
+
     const {
         items,
         theme,
@@ -12,42 +17,70 @@
         even,
         className,
         children
-    }: SvelteTabsProps = $props()
+    }: Props = $props()
 
     let active = $state('')
     let tabContainer: HTMLDivElement | undefined = $state()
 
-    const classes = classNames([
+    const usedInAstro = $derived(tabContainer?.children[0]?.nodeName === 'ASTRO-SLOT')
+    const hasActive = $derived(items.some(item => item.active))
+    const itemsState = $derived.by(() => {
+        if (!hasActive) {
+            items[0].active = true
+        }
+
+        return items
+    })
+
+    const classes = $derived(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
+    const setTab = (tab: string, index: number) => {
+        const contentChildren = usedInAstro
+            ? Array.from(tabContainer!.children[0].children) as HTMLElement[]
+            : Array.from(tabContainer!.children) as HTMLElement[]
 
-        Array.from(tabs).forEach((item: any) => {
-            item.dataset.active = false
+        const hasExplicitTabs = contentChildren.some((el: HTMLElement) => el.dataset.tab)
 
-            if (item.dataset.tab === active) {
-                item.dataset.active = true
+        contentChildren.forEach((item: HTMLElement, i: number) => {
+            if (hasExplicitTabs) {
+                item.dataset.active = item.dataset.tab === tab ? 'true' : 'false'
+            } else {
+                item.dataset.active = i === index ? 'true' : 'false'
             }
         })
+
+        active = tab
     }
+
+    onMount(() => {
+        const contentChildren = usedInAstro
+            ? Array.from(tabContainer!.children[0].children) as HTMLElement[]
+            : Array.from(tabContainer!.children) as HTMLElement[]
+
+        if (!contentChildren.some(element => element.dataset.active === 'true')) {
+            const index = itemsState.findIndex(item => item.active)
+
+            if (contentChildren[index]) {
+                contentChildren[index].dataset.active = 'true'
+            }
+        }
+    })
 </script>
 
 <section class={classes}>
     <div class={styles.wrapper}>
         <div class={styles.items}>
-            {#each items as item}
+            {#each itemsState as item, i}
                 <button
                     data-active={active ? active === item.value : item.active}
                     disabled={item.disabled}
-                    onclick={() => setTab(item.value)}
+                    onclick={() => setTab(item.value, i)}
                 >
                     {@html item.label}
                 </button>