webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Select/Select.svelte

@@ -1,172 +1,180 @@
-<script lang="ts">
-    import { onMount } from 'svelte'
-    import type { SvelteSelectProps } from './select'
-
-    import Input from '../Input/Input.svelte'
-    import List from '../List/List.svelte'
-    import Modal from '../Modal/Modal.svelte'
-    import Popover from '../Popover/Popover.svelte'
-
-    import { classNames } from '../../utils/classNames'
-    import { debounce } from '../../utils/debounce'
-    import { on } from '../../utils/DOMUtils'
-    import { modal } from '../../utils/modal'
-    import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
-
-    import ChevronDown from '../../icons/chevron-down.svg?raw'
-
-    import styles from './select.module.scss'
-
-    import type { ListEventType, ListProps } from '../List/list'
-
-    const {
-        name,
-        value,
-        placeholder,
-        label,
-        subText,
-        disabled,
-        updateValue = true,
-        position = 'bottom',
-        className,
-        onChange,
-        onClose,
-        ...rest
-    }: SvelteSelectProps = $props()
-
-    let popoverInstance: any
-    let val: string | undefined = $state('')
-    let focusByTab = false
-
-    const classes = classNames([
-        styles.select,
-        disabled && styles.disabled,
-        className
-    ])
-
-    const popoverClasses = classNames([
-        `w-options-${name}`,
-        styles.popover
-    ])
-
-    const inferredValue = rest.itemGroups
-        .map((group: ListProps['itemGroups'][0]) => group.items)
-        .flat()
-        .find((item: ListProps['itemGroups'][0]['items'][0]) => item.value === value)?.name
-
-    val = (value && inferredValue) ? inferredValue : value
-
-    const inputRestProps = Object.fromEntries(
-        Object.entries(rest).filter(([key]) => key.includes('data'))
-    )
-
-    const select = (event: ListEventType) => {
-        closePopover(`.w-options-${name}`)
-
-        if (updateValue) {
-            val = event.name
-        }
-
-        onChange?.({
-            ...event,
-            select: name
-        })
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { SelectEventType, SelectProps } from './select'
+
+    import Input from '../Input/Input.svelte'
+    import List from '../List/List.svelte'
+    import Modal from '../Modal/Modal.svelte'
+    import Popover from '../Popover/Popover.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { debounce } from '../../utils/debounce'
+    import { on } from '../../utils/DOMUtils'
+    import { modal, type ModalCallback } from '../../utils/modal'
+    import { closePopover, popover, type PopoverCallback, type PopoverPosition } from '../../utils/popover'
+
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
+
+    import styles from './select.module.scss'
+
+    import type { ListEventType, ListProps } from '../List/list'
+
+    export type Props = SelectProps & {
+        onChange?: (event: SelectEventType) => void
+        onClose?: (event: ModalCallback | PopoverCallback) => void
     }
-
-    onMount(() => {
-        let observer: ResizeObserver | undefined
-
-        on(document, 'keydown', (event: KeyboardEvent) => {
-            if (event.key === 'Tab') {
-                focusByTab = true
-            }
-        })
-
-        on(document, 'mousedown', () => focusByTab = false)
-
-        if (position === 'modal') {
-            modal({
-                trigger: `.w-select-${name}`,
-                modal: `.w-options-${name}`,
-                onOpen: ({ modal }) => {
-                    const search = modal.querySelector('input')
-
-                    if (search) {
-                        search.focus()
-                    }
-                },
-                onClose(event) {
-                    onClose?.(event)
-                }
-            })
-        } else {
-            const resize = debounce(() => {
-                const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
-
-                if (selectElement) {
-                    const { width } = selectElement.getBoundingClientRect()
-                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
-
-                    dialogElement.style.width = `${width}px`
-                }
-            })
-
-            observer = new ResizeObserver(() => resize())
-            observer.observe(document.body)
-
-            popoverInstance = popover({
-                trigger: `.w-select-${name}`,
-                popover: `.w-options-${name}`,
-                position: position as PopoverPosition,
-                onOpen({ popover }) {
-                    const search = popover.querySelector('input')
-
-                    if (search) {
-                        search.focus()
-                    }
-                },
-                onClose(event) {
-                    onClose?.(event)
-                }
-            })
-        }
-
-        on(`.w-select-${name}`, 'focus', (event: Event) => {
-            if (focusByTab) {
-                (event.currentTarget as HTMLInputElement).click()
-            }
-        })
-
-        return () => {
-            popoverInstance?.remove()
-            observer?.unobserve(document.body)
-        }
-    })
-</script>
-
-<Input
-    type="text"
-    value={val}
-    readonly={true}
-    disabled={disabled}
-    placeholder={placeholder}
-    label={label}
-    subText={subText}
-    className={`w-select-${name}`}
-    labelClassName={classes}
-    {...inputRestProps}
->
-    {@html ChevronDown}
-</Input>
-{#if position === 'modal'}
-    <Modal
-        className={popoverClasses}
-        showCloseIcon={false}
-    >
-        <List onSelect={select} {...rest} />
-    </Modal>
-{:else}
-    <Popover className={popoverClasses}>
-        <List onSelect={select} {...rest} />
-    </Popover>
-{/if}
+
+    const {
+        name,
+        value,
+        placeholder,
+        label,
+        subText,
+        disabled,
+        required,
+        updateValue = true,
+        position = 'bottom',
+        className,
+        onChange,
+        onClose,
+        ...rest
+    }: Props = $props()
+
+    let popoverInstance: any
+    let focusByTab = false
+
+    const classes = $derived(classNames([
+        styles.select,
+        disabled && styles.disabled,
+        className
+    ]))
+
+    const popoverClasses = $derived(classNames([
+        `w-options-${name}`,
+        styles.popover
+    ]))
+
+    const inferredValue = $derived(rest.itemGroups
+        .map((group: ListProps['itemGroups'][0]) => group.items)
+        .flat()
+        .find((item: ListProps['itemGroups'][0]['items'][0]) => item.value === value)?.name)
+
+    let val = $derived((value && inferredValue) ? inferredValue : value)
+
+    const inputRestProps = $derived(
+        Object.fromEntries(
+            Object.entries(rest).filter(([key]) => key.includes('data'))
+        )
+    )
+
+    const select = (event: ListEventType) => {
+        closePopover(`.w-options-${name}`)
+
+        if (updateValue) {
+            val = event.name
+        }
+
+        onChange?.({
+            ...event,
+            select: name
+        })
+    }
+
+    onMount(() => {
+        let observer: ResizeObserver | undefined
+
+        on(document, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Tab') {
+                focusByTab = true
+            }
+        })
+
+        on(document, 'mousedown', () => focusByTab = false)
+
+        if (position === 'modal') {
+            modal({
+                trigger: `.w-select-${name}`,
+                modal: `.w-options-${name}`,
+                onOpen: ({ modal }) => {
+                    const search = modal.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                },
+                onClose(event) {
+                    onClose?.(event)
+                }
+            })
+        } else {
+            const resize = debounce(() => {
+                const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
+
+                if (selectElement) {
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+
+                    dialogElement.style.width = `${width}px`
+                }
+            })
+
+            observer = new ResizeObserver(() => resize())
+            observer.observe(document.body)
+
+            popoverInstance = popover({
+                trigger: `.w-select-${name}`,
+                popover: `.w-options-${name}`,
+                position: position as PopoverPosition,
+                onOpen({ popover }) {
+                    const search = popover.querySelector('input')
+
+                    if (search) {
+                        search.focus()
+                    }
+                },
+                onClose(event) {
+                    onClose?.(event)
+                }
+            })
+        }
+
+        on(`.w-select-${name}`, 'focus', (event: Event) => {
+            if (focusByTab) {
+                (event.currentTarget as HTMLInputElement).click()
+            }
+        })
+
+        return () => {
+            popoverInstance?.remove()
+            observer?.unobserve(document.body)
+        }
+    })
+</script>
+
+<Input
+    type="text"
+    value={val}
+    readonly={true}
+    disabled={disabled}
+    required={required}
+    placeholder={placeholder}
+    label={label}
+    subText={subText}
+    className={`w-select-${name}`}
+    labelClassName={classes}
+    {...inputRestProps}
+>
+    {@html ChevronDown}
+</Input>
+{#if position === 'modal'}
+    <Modal
+        className={popoverClasses}
+        showCloseIcon={false}
+    >
+        <List onSelect={select} {...rest} />
+    </Modal>
+{:else}
+    <Popover className={popoverClasses}>
+        <List onSelect={select} {...rest} />
+    </Popover>
+{/if}

package/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect,useState } from 'react'
-import type { ReactSelectProps } from './select'
+import type { SelectEventType, SelectProps } from './select'
 
 import Input from '../Input/Input.tsx'
 import List from '../List/List.tsx'
@@ -9,8 +9,8 @@ import Popover from '../Popover/Popover.tsx'
 import { classNames } from '../../utils/classNames'
 import { debounce } from '../../utils/debounce'
 import { on } from '../../utils/DOMUtils'
-import { modal } from '../../utils/modal'
-import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+import { modal, type ModalCallback } from '../../utils/modal'
+import { closePopover, popover, type PopoverCallback, type PopoverPosition } from '../../utils/popover'
 
 import ChevronDown from '../../icons/chevron-down.svg?raw'
 
@@ -18,6 +18,11 @@ import styles from './select.module.scss'
 
 import type { ListEventType } from '../List/list'
 
+export type Props = SelectProps & {
+    onChange?: (event: SelectEventType) => void
+    onClose?: (event: ModalCallback | PopoverCallback) => void
+}
+
 const Select = ({
     name,
     value,
@@ -25,13 +30,14 @@ const Select = ({
     label,
     subText,
     disabled,
+    required,
     updateValue = true,
     position = 'bottom',
     className,
     onChange,
     onClose,
     ...rest
-}: ReactSelectProps) => {
+}: Props) => {
     const inferredValue = rest.itemGroups.map(group => group.items)
         .flat()
         .find(item => item.value === value)?.name
@@ -147,6 +153,7 @@ const Select = ({
                 value={val}
                 readOnly={true}
                 disabled={disabled}
+                required={required}
                 placeholder={placeholder}
                 label={label}
                 subText={subText}

package/components/Select/select.ts

@@ -1,5 +1,4 @@
-import type { ModalCallback } from '../../utils/modal'
-import type { PopoverCallback, PopoverPosition } from '../../utils/popover'
+import type { PopoverPosition } from '../../utils/popover'
 
 import type { ListEventType, ListProps } from '../List/list'
 
@@ -14,16 +13,7 @@ export type SelectProps = {
     label?: string
     subText?: string
     disabled?: boolean
+    required?: boolean
     updateValue?: boolean
     position?: PopoverPosition | 'modal'
 } & ListProps
-
-export type SvelteSelectProps = {
-    onChange?: (event: SelectEventType) => void
-    onClose?: (event: ModalCallback | PopoverCallback) => void
-} & SelectProps
-
-export type ReactSelectProps = {
-    onChange?: (event: SelectEventType) => void
-    onClose?: (event: ModalCallback | PopoverCallback) => void
-} & SelectProps

package/components/Sheet/Sheet.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { SheetProps } from './sheet'
 
 import Modal from '../Modal/Modal.astro'
@@ -7,7 +8,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './sheet.module.scss'
 
-interface Props extends SheetProps {}
+export type Props = SheetProps<HTMLAttributes<'dialog'>>
 
 const {
     position,

package/components/Sheet/Sheet.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
-    import type { SvelteSheetProps } from './sheet'
+    import type { SheetProps } from './sheet'
 
-    import Modal from '../Modal/Modal.svelte'
+    import Modal, { type Props as ModalProps } from '../Modal/Modal.svelte'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './sheet.module.scss'
 
+    export type Props = SheetProps & ModalProps
+
     const {
         position,
         className,
         children,
         ...rest
-    }: SvelteSheetProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.sheet,
         position && styles[position],
         className
-    ])
+    ]))
 </script>
 
 <Modal

package/components/Sheet/Sheet.tsx

@@ -1,18 +1,19 @@
-import React from 'react'
-import type { ReactSheetProps } from './sheet'
+import type { SheetProps } from './sheet'
 
-import Modal from '../Modal/Modal.tsx'
+import Modal, { type Props as ModalProps } from '../Modal/Modal.tsx'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './sheet.module.scss'
 
+export type Props = SheetProps & ModalProps
+
 const Sheet = ({
     position,
     className,
     children,
     ...rest
-}: ReactSheetProps) => {
+}: Props) => {
     const classes = classNames([
         styles.sheet,
         position && styles[position],

package/components/Sheet/sheet.ts

@@ -1,14 +1,7 @@
-import type {
-    ModalProps,
-    ReactModalProps,
-    SvelteModalProps
-} from '../Modal/modal'
+import type { ModalProps } from '../Modal/modal'
 
-export type SheetProps = {
+export type SheetProps<T extends object = object> = {
     position?: 'left'
         | 'top'
         | 'bottom'
-} & ModalProps
-
-export type SvelteSheetProps = SheetProps & SvelteModalProps
-export type ReactSheetProps = SheetProps & ReactModalProps
+} & ModalProps<T>

package/components/Sidebar/Sidebar.astro

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

package/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteSidebarProps } from './sidebar'
+    import type { Snippet } from 'svelte'
+    import type { SidebarProps } from './sidebar'
 
     import Badge from '../Badge/Badge.svelte'
 
@@ -7,16 +8,20 @@
 
     import styles from './sidebar.module.scss'
 
+    export type Props = SidebarProps & {
+        children?: Snippet
+    }
+
     const {
         groups,
         children,
         className
-    }: SvelteSidebarProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.sidebar,
         className
-    ])
+    ]))
 </script>
 
 <aside class={classes}>

package/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactSidebarProps } from './sidebar'
+import type { SidebarProps } from './sidebar'
 
 import Badge from '../Badge/Badge.tsx'
 
@@ -7,11 +7,15 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './sidebar.module.scss'
 
+export type Props = SidebarProps & {
+    children?: React.ReactNode
+}
+
 const Sidebar = ({
     groups,
     children,
     className
-}: ReactSidebarProps) => {
+}: Props) => {
     const classes = classNames([
         styles.sidebar,
         className

package/components/Sidebar/sidebar.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { ButtonProps } from '../Button/button'
 
 export type SidebarProps = {
@@ -17,11 +15,3 @@ export type SidebarProps = {
     }[]
     className?: string
 }
-
-export type SvelteSidebarProps = {
-    children?: Snippet
-} & SidebarProps
-
-export type ReactSidebarProps = {
-    children?: React.ReactNode
-} & SidebarProps

package/components/Skeleton/Skeleton.astro

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './skeleton.module.scss'
 
-interface Props extends SkeletonProps {}
+export type Props = SkeletonProps
 
 const {
     animate = 'wave',

package/components/Skeleton/Skeleton.svelte

@@ -5,6 +5,8 @@
 
     import styles from './skeleton.module.scss'
 
+    export type Props = SkeletonProps
+
     const {
         animate = 'wave',
         type = 'rounded',
@@ -13,21 +15,21 @@
         color,
         waveColor,
         className
-    }: SkeletonProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         animate && styles[animate],
         styles[type!],
         styles.skeleton,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         width && `max-width: ${width}px;`,
         height && `max-height: ${height}px;`,
         color && `--w-skeleton-color: ${color};`,
         waveColor && `--w-skeleton-wave-color: ${waveColor};`
-    ])
+    ]))
 </script>
 
 <div class={classes} style={styleVariables}>&nbsp;</div>

package/components/Skeleton/Skeleton.tsx

@@ -5,6 +5,8 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './skeleton.module.scss'
 
+export type Props = SkeletonProps
+
 const Skeleton = ({
     animate = 'wave',
     type = 'rounded',
@@ -13,7 +15,7 @@ const Skeleton = ({
     color,
     waveColor,
     className
-}: SkeletonProps) => {
+}: Props) => {
     const classes = classNames([
         animate && styles[animate],
         styles[type],