webcoreui 0.8.1 → 0.9.0

package/components/Copy/Copy.tsx

@@ -0,0 +1,73 @@
+import React, { useRef, useState } from 'react'
+import type { ReactCopyProps } from './copy'
+
+import Badge from '../Badge/Badge.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import circleCheck from '../../icons/circle-check.svg?raw'
+import copy from '../../icons/copy.svg?raw'
+
+import styles from './copy.module.scss'
+
+const Copy = ({
+    tooltip,
+    tooltipPosition,
+    copyIcon,
+    copiedIcon,
+    className,
+    children,
+    ...rest
+}: ReactCopyProps) => {
+    const copyButton = useRef<HTMLButtonElement>(null)
+    const copiedButton = useRef<HTMLSpanElement>(null)
+    const [tooltipText, setTooltipText] = useState(tooltip)
+
+    const classes = classNames([
+        styles.copy,
+        className
+    ])
+
+    const copyText = () => {
+        const copyButtonElement = copyButton.current as HTMLButtonElement
+        const copiedButtonElement = copiedButton.current as HTMLSpanElement
+
+        const text = copyButtonElement.parentElement?.previousSibling?.textContent?.trim()
+            || copyButtonElement.parentElement?.previousElementSibling?.textContent?.trim()
+
+        copyButtonElement.style.opacity = '0'
+        copyButtonElement.style.pointerEvents = 'none'
+
+        copiedButtonElement.style.opacity = '1'
+
+        setTooltipText('')
+
+        navigator.clipboard.writeText(text as string)
+    }
+
+    return (
+        <Badge
+            {...rest}
+            className={classes}
+            data-tooltip={tooltipText || undefined}
+            data-position={tooltipPosition}
+        >
+            {children}
+            <div className={styles.icons}>
+                <button
+                    className={styles['copy-icon']}
+                    ref={copyButton}
+                    onClick={copyText}
+                    dangerouslySetInnerHTML={{ __html: copyIcon || copy }}
+                />
+                <span
+                    className={styles.copied}
+                    ref={copiedButton}
+                    dangerouslySetInnerHTML={{ __html: copiedIcon || circleCheck }}
+                />
+            </div>
+        </Badge>
+    )
+}
+
+export default Copy

package/components/Copy/copy.module.scss

@@ -0,0 +1,37 @@
+@use '../../scss/config.scss' as *;
+
+.copy {
+    @include typography(md);
+
+    svg {
+        @include size(18px);
+
+        cursor: pointer;
+    }
+
+    .icons {
+        @include position(relative);
+        @include size(18px);
+    }
+
+    .copy-icon,
+    .copied {
+        @include position(absolute, t0, l0);
+        @include transition(opacity);
+    }
+
+    .copy-icon {
+        @include background(transparent);
+        @include border(0);
+        @include spacing(p0);
+        
+        color: inherit;
+    }
+
+    .copied {
+        @include visibility(0);
+        
+        pointer-events: none;
+        cursor: auto;
+    }
+}

package/components/Copy/copy.ts

@@ -0,0 +1,14 @@
+import { type BadgeProps } from '../Badge/badge'
+import { type IconProps } from '../Icon/icon'
+
+export type CopyProps = {
+    tooltip?: string
+    tooltipPosition?: 'left' | 'right' | 'bottom' | null
+    copyIcon?: IconProps['type'] | string
+    copiedIcon?: IconProps['type'] | string
+    className?: string
+} & BadgeProps
+
+export type ReactCopyProps = {
+    children: React.ReactNode
+} & CopyProps

package/components/DataTable/DataTable.astro

@@ -135,7 +135,7 @@ const hasPagination = data?.length && itemsPerPage
                 {data?.map((row, index) => (
                     <tr
                         data-page={hasPagination ? Math.ceil((index + 1) / itemsPerPage!) : undefined}
-                        data-hidden={hasPagination && index >= itemsPerPage!}
+                        data-hidden={(hasPagination && index >= itemsPerPage!) ? true : undefined}
                     >
                         {row.map((column, index) => (
                             <td data-name={getColumnName(headings?.[index])}>

package/components/Flex/Flex.astro

@@ -0,0 +1,34 @@
+---
+import type { FlexProps } from './flex'
+
+import { classNames } from '../../utils/classNames'
+import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+interface Props extends FlexProps {}
+
+const {
+    element = 'div',
+    gap,
+    alignment,
+    direction,
+    wrap,
+    className,
+    ...rest
+} = Astro.props
+
+const Component = element
+
+const classes = classNames([
+    'flex',
+    getLayoutClasses({ gap, alignment, direction, wrap }),
+    className
+])
+
+const props = {
+    class: classes
+}
+---
+
+<Component {...props} {...rest}>
+    <slot />
+</Component>

package/components/Flex/Flex.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { FlexProps } from './flex'
+
+    import { classNames } from '../../utils/classNames'
+    import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+    export let element: FlexProps['className'] = 'div'
+    export let gap: FlexProps['gap'] = ''
+    export let alignment: FlexProps['alignment'] = {}
+    export let direction: FlexProps['direction'] = ''
+    export let wrap: FlexProps['wrap'] = ''
+    export let className: FlexProps['className'] = ''
+
+    const classes = classNames([
+        'flex',
+        getLayoutClasses({ gap, alignment, direction, wrap }),
+        className
+    ])
+
+    const props = {
+        class: classes
+    }
+</script>
+
+<svelte:element this={element} {...props} {...$$restProps}>
+    <slot />
+</svelte:element>

package/components/Flex/Flex.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import type { ReactFlexProps } from './flex'
+
+import { classNames } from '../../utils/classNames'
+import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+const Flex = ({
+    Element = 'div',
+    gap,
+    alignment,
+    direction,
+    wrap,
+    className,
+    children,
+    ...rest
+}: ReactFlexProps) => {
+    const classes = classNames([
+        'flex',
+        getLayoutClasses({ gap, alignment, direction, wrap }),
+        className
+    ])
+
+    return (
+        <Element className={classes} {...rest}>
+            {children}
+        </Element>
+    )
+}
+
+export default Flex

package/components/Flex/flex.ts

@@ -0,0 +1,22 @@
+import type {
+    Alignment,
+    Direction,
+    Gap,
+    Responsive,
+    Wrap
+} from '../../utils/getLayoutClasses'
+
+export type FlexProps = {
+    element?: string
+    gap?: Responsive<Gap>
+    alignment?: Responsive<Alignment>
+    direction?: Responsive<Direction>
+    wrap?: Responsive<Wrap>
+    className?: string
+    [key: string]: any
+}
+
+export type ReactFlexProps = {
+    Element?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<FlexProps, 'element'>

package/components/Grid/Grid.astro

@@ -0,0 +1,32 @@
+---
+import type { GridProps } from './grid'
+
+import { classNames } from '../../utils/classNames'
+import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+interface Props extends GridProps {}
+
+const {
+    element = 'div',
+    gap,
+    column,
+    className,
+    ...rest
+} = Astro.props
+
+const Component = element
+
+const classes = classNames([
+    'grid',
+    getLayoutClasses({ gap, column }),
+    className
+])
+
+const props = {
+    class: classes
+}
+---
+
+<Component {...props} {...rest}>
+    <slot />
+</Component>

package/components/Grid/Grid.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { GridProps } from './grid'
+
+    import { classNames } from '../../utils/classNames'
+    import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+    export let element: GridProps['className'] = 'div'
+    export let gap: GridProps['gap'] = ''
+    export let column: GridProps['column'] = null
+    export let className: GridProps['className'] = ''
+
+    const classes = classNames([
+        'grid',
+        getLayoutClasses({ gap, column }),
+        className
+    ])
+
+    const props = {
+        class: classes
+    }
+</script>
+
+<svelte:element this={element} {...props} {...$$restProps}>
+    <slot />
+</svelte:element>

package/components/Grid/Grid.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { ReactGridProps } from './grid'
+
+import { classNames } from '../../utils/classNames'
+import { getLayoutClasses } from '../../utils/getLayoutClasses'
+
+const Grid = ({
+    Element = 'div',
+    gap,
+    column,
+    className,
+    children,
+    ...rest
+}: ReactGridProps) => {
+    const classes = classNames([
+        'grid',
+        getLayoutClasses({ gap, column }),
+        className
+    ])
+
+    return (
+        <Element className={classes} {...rest}>
+            {children}
+        </Element>
+    )
+}
+
+export default Grid

package/components/Grid/grid.ts

@@ -0,0 +1,18 @@
+import type {
+    Column,
+    Gap,
+    Responsive
+} from '../../utils/getLayoutClasses'
+
+export type GridProps = {
+    element?: string
+    gap?: Responsive<Gap>
+    column?: Responsive<Column>
+    className?: string
+    [key: string]: any
+}
+
+export type ReactGridProps = {
+    Element?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<GridProps, 'element'>

package/components/Icon/icon.ts

@@ -8,6 +8,7 @@ export type IconProps = {
         | 'circle-close'
         | 'close'
         | 'components'
+        | 'copy'
         | 'file'
         | 'github'
         | 'home'

package/components/Icon/map.ts

@@ -7,6 +7,7 @@ import CircleCheck from '../../icons/circle-check.svg?raw'
 import CircleClose from '../../icons/circle-close.svg?raw'
 import Close from '../../icons/close.svg?raw'
 import Components from '../../icons/components.svg?raw'
+import Copy from '../../icons/copy.svg?raw'
 import File from '../../icons/file.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Home from '../../icons/home.svg?raw'
@@ -28,6 +29,7 @@ const iconMap = {
     'circle-close': CircleClose,
     'close': Close,
     'components': Components,
+    'copy': Copy,
     'file': File,
     'github': Github,
     'home': Home,

package/components/Input/Input.astro

@@ -34,7 +34,7 @@ const useLabel = !!(label || subText || Astro.slots.has('default'))
 <ConditionalWrapper condition={useLabel}>
     <label slot="wrapper" class:list={labelClasses}>
         {label && (
-            <div class={styles.label}>{label}</div>
+            <div class={styles.label} set:html={label} />
         )}
         <ConditionalWrapper condition={Astro.slots.has('default')}>
             <div class={styles.wrapper} slot="wrapper">

package/components/Input/Input.svelte

@@ -10,6 +10,7 @@
     export let type: SvelteInputProps['type'] = 'text'
     export let theme: SvelteInputProps['theme'] = null
     export let label: SvelteInputProps['label'] = ''
+    export let value: SvelteInputProps['value'] = ''
     export let subText: SvelteInputProps['subText'] = ''
     export let className: SvelteInputProps['className'] = ''
     export let labelClassName: SvelteInputProps['labelClassName'] = ''
@@ -38,7 +39,7 @@
     class={labelClasses}
 >
     {#if label}
-        <div class={styles.label}>{label}</div>
+        <div class={styles.label}>{@html label}</div>
     {/if}
     <ConditionalWrapper
         condition={$$slots.default}
@@ -47,12 +48,13 @@
     >
         <slot />
         <input
-            type={type}
             class={classes}
+            bind:value
             on:change={onChange}
             on:keyup={onKeyUp}
             on:input={onInput}
             on:click={onClick}
+            {...{ type }}
             {...$$restProps}
         />
     </ConditionalWrapper>

package/components/Input/Input.tsx

@@ -38,7 +38,10 @@ const Input = ({
             </label>
         )}>
             {label && (
-                <div className={styles.label}>{label}</div>
+                <div
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
             )}
             <ConditionalWrapper condition={!!children} wrapper={children => (
                 <div className={styles.wrapper}>

package/components/List/list.module.scss

@@ -50,6 +50,7 @@
             @include spacing(m0);
             
             padding-bottom: 0;
+            user-select: none;
             
             &:not(:first-child) {
                 @include border(top, primary-50);
@@ -74,7 +75,9 @@
 
         span {
             @include typography(md, primary-20);
+
             pointer-events: none;
+            user-select: none;
         }
     }
 }

package/components/Menu/Menu.svelte

@@ -68,7 +68,11 @@
         </ConditionalWrapper>
 
         {#if items?.length}
-            <button class={styles.hamburger} on:click={toggleMenu}>
+            <button
+                class={styles.hamburger}
+                on:click={toggleMenu}
+                aria-label="menu"
+            >
                 <span class={styles.meat}></span>
                 <span class={styles.meat}></span>
                 <span class={styles.meat}></span>

package/components/Pagination/Pagination.svelte

@@ -74,6 +74,7 @@
         {#each generatedPages as _, index}
             <li>
                 <button
+                    aria-label={`page ${index + 1}`}
                     data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
                     on:click={calculatedCurrentPage !== index + 1
                         ? () => paginate(index + 1)

package/components/Radio/Radio.astro

@@ -12,7 +12,8 @@ const {
     items,
     color,
     inline,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -42,6 +43,7 @@ const style = color
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
+                    {...rest}
                 />
                 <span class={styles.icon} />
                 <span class={styles.label}>

package/components/Radio/Radio.svelte

@@ -27,10 +27,10 @@
 
 <div class={classes} style={style}>
     {#each items as item}
-        <label class={[
+        <label class={classNames([
             item.subText && styles.col,
             item.disabled && styles.disabled
-        ].filter(Boolean).join(' ')}
+        ])}
         >
             <ConditionalWrapper
                 condition={!!(item.subText)}
@@ -44,6 +44,7 @@
                     checked={item.selected}
                     disabled={item.disabled}
                     on:change={onChange}
+                    {...$$restProps}
                 />
                 <span class={styles.icon} />
                 <span class={styles.label}>

package/components/Radio/Radio.tsx

@@ -13,7 +13,8 @@ const Radio = ({
     color,
     inline,
     className,
-    onChange
+    onChange,
+    ...rest
 }: ReactRadioProps) => {
     const classes = classNames([
         styles.radio,
@@ -28,10 +29,10 @@ const Radio = ({
     return (
         <div className={classes} style={style}>
             {items.map((item, index) => (
-                <label className={[
+                <label className={classNames([
                     item.subText && styles.col,
                     item.disabled && styles.disabled
-                ].filter(Boolean).join(' ')} key={index}>
+                ])} key={index}>
                     <ConditionalWrapper
                         condition={!!(item.subText)}
                         wrapper={children => (
@@ -47,6 +48,7 @@ const Radio = ({
                             defaultChecked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}
+                            {...rest}
                         />
                         <span className={styles.icon} />
                         <span

package/components/Radio/radio.ts

@@ -10,6 +10,7 @@ export type RadioProps = {
     color?: string
     inline?: boolean
     className?: string
+    [key: string]: any
 }
 
 export type SvelteRadioProps = {

package/components/Select/Select.astro

@@ -32,11 +32,19 @@ const classes = classNames([
     disabled && styles.disabled,
     className
 ])
+
+const inferredValue = rest.itemGroups.map(group => group.items)
+    .flat()
+    .find(item => item.value === value)?.name
+
+const inputRestProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.includes('data'))
+)
 ---
 
 <Input
     type="text"
-    value={value}
+    value={(value && inferredValue) ? inferredValue : value}
     readonly={true}
     disabled={disabled}
     placeholder={placeholder}
@@ -46,6 +54,7 @@ const classes = classNames([
     data-no-update={!updateValue ? 'true' : undefined}
     data-position={position}
     labelClassName={classes}
+    {...inputRestProps}
 >
     <Fragment set:html={ArrowDown} />
 </Input>
@@ -67,11 +76,21 @@ const classes = classNames([
 
 <script>
     import { debounce } from '../../utils/debounce'
+    import { on } from '../../utils/DOMUtils'
     import { dispatch, listen } from '../../utils/event'
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
     const selects = document.querySelectorAll('[data-id^="w-select"]')
+    let focusByTab = false
+
+    on(document, 'keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Tab') {
+            focusByTab = true
+        }
+    })
+
+    on(document, 'mousedown', () => focusByTab = false)
 
     Array.from(selects).forEach(select => {
         const selectElement = select as HTMLElement
@@ -88,6 +107,9 @@ const classes = classNames([
                     if (search) {
                         search.focus()
                     }
+                },
+                onClose(event) {
+                    dispatch('selectOnClose', event)
                 }
             })
         } else {
@@ -111,10 +133,21 @@ const classes = classNames([
 
                     if (search) {
                         search.focus()
+                    } else {
+                        popover.focus()
                     }
+                },
+                onClose(event) {
+                    dispatch('selectOnClose', event)
                 }
             })
         }
+
+        on(selectElement, 'focus', (event: Event) => {
+            if (focusByTab) {
+                (event.currentTarget as HTMLInputElement).click()
+            }
+        })
     })
 
     listen('listOnSelect', payload => {