webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/Spoiler/Spoiler.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
-import type { ReactSpoilerProps } from './spoiler'
+import type { SpoilerProps } from './spoiler'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './spoiler.module.scss'
 
+export type Props = SpoilerProps & {
+    children: React.ReactNode
+}
+
 const Spoiler = ({
     color,
     animated = true,
@@ -12,7 +16,7 @@ const Spoiler = ({
     tooltip,
     tooltipPosition,
     children
-}: ReactSpoilerProps) => {
+}: Props) => {
     const classes = classNames([
         styles.spoiler,
         animated && styles.anim,

package/components/Spoiler/spoiler.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type SpoilerProps = {
     color?: string
     animated?: boolean
@@ -7,11 +5,3 @@ export type SpoilerProps = {
     tooltip?: string
     tooltipPosition?: 'bottom' | null
 }
-
-export type SvelteSpoilerProps = {
-    children: Snippet
-} & SpoilerProps
-
-export type ReactSpoilerProps = {
-    children: React.ReactNode
-} & SpoilerProps

package/components/Stepper/Stepper.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './stepper.module.scss'
 
-interface Props extends StepperProps {}
+export type Props = StepperProps
 
 const {
     items,

package/components/Stepper/Stepper.svelte

@@ -7,6 +7,8 @@
 
     import styles from './stepper.module.scss'
 
+    export type Props = StepperProps
+
     const {
         items,
         color,
@@ -15,7 +17,7 @@
         borderless,
         vertical,
         className
-    }: StepperProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.stepper,

package/components/Stepper/Stepper.tsx

@@ -7,6 +7,8 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './stepper.module.scss'
 
+export type Props = StepperProps
+
 const Stepper = ({
     items,
     color,
@@ -15,7 +17,7 @@ const Stepper = ({
     borderless,
     vertical,
     className
-}: StepperProps) => {
+}: Props) => {
     const classes = classNames([
         styles.stepper,
         borderless && styles.borderless,

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,7 +28,7 @@
         onClick,
         onChange,
         ...rest
-    }: SvelteSwitchProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.switch,
@@ -37,12 +47,11 @@
 
 <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.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,7 +17,7 @@
         compact,
         maxHeight,
         className
-    }: TableProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.table,

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,11 +17,21 @@
         even,
         className,
         children
-    }: SvelteTabsProps = $props()
+    }: Props = $props()
 
     let active = $state('')
     let tabContainer: HTMLDivElement | undefined = $state()
 
+    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],
@@ -25,29 +40,47 @@
         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>