webcoreui 0.8.1 → 0.10.0

package/components/Checkbox/Checkbox.svelte

@@ -9,13 +9,16 @@
 
     import styles from './checkbox.module.scss'
 
-    export let checked: SvelteCheckboxProps['checked'] = false
-    export let label: SvelteCheckboxProps['label'] = ''
-    export let subText: SvelteCheckboxProps['subText'] = ''
-    export let disabled: SvelteCheckboxProps['disabled'] = false
-    export let color: SvelteCheckboxProps['color'] = ''
-    export let className: SvelteCheckboxProps['className'] = ''
-    export let onClick: SvelteCheckboxProps['onClick'] = () => {}
+    const {
+        checked,
+        label,
+        subText,
+        disabled,
+        color,
+        className,
+        onClick,
+        ...rest
+    }: SvelteCheckboxProps = $props()
 
     const classes = classNames([
         styles.checkbox,
@@ -38,7 +41,8 @@
             type="checkbox"
             checked={checked}
             disabled={disabled}
-            on:click={onClick}
+            onclick={onClick}
+            {...rest}
         />
         <span class={styles.check}>
             {@html check}

package/components/Checkbox/Checkbox.tsx

@@ -16,7 +16,8 @@ const Checkbox = ({
     disabled,
     color,
     className,
-    onClick
+    onClick,
+    ...rest
 }: ReactCheckboxProps) => {
     const classes = classNames([
         styles.checkbox,
@@ -43,6 +44,7 @@ const Checkbox = ({
                     defaultChecked={checked}
                     disabled={disabled}
                     onClick={onClick}
+                    {...rest}
                 />
                 <span
                     className={styles.check}

package/components/Checkbox/checkbox.module.scss

@@ -52,6 +52,10 @@ body {
 
         svg {
             @include visibility(none);
+
+            path {
+                stroke-width: 4px;
+            }
         }
     }
 

package/components/Checkbox/checkbox.ts

@@ -7,6 +7,7 @@ export type CheckboxProps = {
     disabled?: boolean
     color?: string
     className?: string
+    [key: string]: any
 }
 
 export type SvelteCheckboxProps = {

package/components/Collapsible/Collapsible.astro

@@ -45,10 +45,10 @@ const styleVariables = classNames([
 </div>
 
 <script>
-    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(collapsibles).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-collapsible"]', 'click', (event: Event) => {
             const collapsible = event.currentTarget as HTMLDivElement
             const target = event.target as HTMLDivElement
 
@@ -59,6 +59,9 @@ const styleVariables = classNames([
             if (target.parentElement?.dataset.toggleOff) {
                 collapsible.dataset.toggled = 'false'
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Collapsible/Collapsible.svelte

@@ -1,49 +1,54 @@
-<script lang="ts">
-    import type { CollapsibleProps } from './collapsible'
-
-    import { classNames } from '../../utils/classNames'
-
-    import styles from './collapsible.module.scss'
-
-    export let initialHeight: CollapsibleProps['initialHeight'] = ''
-    export let maxHeight: CollapsibleProps['maxHeight'] = ''
-    export let toggled: CollapsibleProps['toggled'] = false
-    export let className: CollapsibleProps['className'] = ''
-    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
-
-    const classes = classNames([
-        styles.collapsible,
-        maxHeight && styles.animated,
-        className
-    ])
-
-    const styleVariables = classNames([
-        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
-        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
-    ])
-</script>
-
-<div
-    class={classes}
-    data-toggled={toggled ? 'true' : undefined}
->
-    <div
-        class={styles.wrapper}
-        style={styleVariables}
-    >
-        <slot />
-    </div>
-    <div
-        on:click={() => toggled = !toggled}
-        on:keyup={() => toggled = !toggled}
-        role="button"
-        tabindex={0}
-        class={togglesClassName}
-    >
-        {#if toggled}
-            <slot name="off" />
-        {:else}
-            <slot name="on" />
-        {/if}
-    </div>
-</div>
+<script lang="ts">
+    import type { SvelteCollapsibleProps } from './collapsible'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './collapsible.module.scss'
+
+    let {
+        initialHeight,
+        maxHeight,
+        toggled = $bindable(),
+        className,
+        togglesClassName,
+        children,
+        off,
+        on
+    }: SvelteCollapsibleProps = $props()
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        {@render children?.()}
+    </div>
+    <div
+        onclick={() => toggled = !toggled}
+        onkeyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            {@render off?.()}
+        {:else}
+            {@render on?.()}
+        {/if}
+    </div>
+</div>

package/components/Collapsible/collapsible.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type CollapsibleProps = {
     initialHeight?: string
     maxHeight?: string
@@ -6,6 +8,12 @@ export type CollapsibleProps = {
     togglesClassName?: string
 }
 
+export type SvelteCollapsibleProps = {
+    on: Snippet
+    off: Snippet
+    children: Snippet
+} & CollapsibleProps
+
 export type ReactCollapsibleProps = {
     on: React.ReactNode
     off: React.ReactNode

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-    import type { ConditionalWrapperProps } from './conditionalwrapper'
+    import type { SvelteConditionalWrapperProps } from './conditionalwrapper'
 
-    export let condition: ConditionalWrapperProps['condition']
-    export let element: string = 'div'
+    const {
+        condition,
+        element = 'div',
+        children,
+        ...rest
+    }: SvelteConditionalWrapperProps = $props()
 </script>
 
 {#if condition}
-    <svelte:element this={element} {...$$restProps}>
-        <slot />
+    <svelte:element this={element} {...rest}>
+        {@render children?.()}
     </svelte:element>
 {:else}
-    <slot />
+    {@render children?.()}
 {/if}

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,8 +1,14 @@
+import type { Snippet } from 'svelte'
+
 export type ConditionalWrapperProps = {
     condition: boolean
     [key: string]: any
 }
 
+export type SvelteConditionalWrapperProps = {
+    children: Snippet
+} & ConditionalWrapperProps
+
 export type ReactConditionalWrapperProps = {
     wrapper: (_: React.ReactNode) => any
     children: React.ReactNode

package/components/Copy/Copy.astro

@@ -0,0 +1,80 @@
+---
+import type { CopyProps } from './copy'
+
+import Badge from '../Badge/Badge.astro'
+import Icon from '../Icon/Icon.astro'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './copy.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends CopyProps {}
+
+const {
+    tooltip,
+    tooltipPosition,
+    copyIcon = 'copy',
+    copiedIcon = 'circle-check',
+    className,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.copy,
+    className
+])
+---
+
+<Badge
+    {...rest}
+    className={classes}
+    data-tooltip={tooltip}
+    data-position={tooltipPosition}
+>
+    <slot />
+    <div class={styles.icons}>
+        <button
+            class={styles['copy-icon']}
+            data-id="w-copy"
+            aria-label="copy"
+        >
+            {copyIcon?.startsWith('<svg')
+                ? <Fragment set:html={copyIcon} />
+                : <Icon type={copyIcon as IconProps['type']} />
+            }
+        </button>
+        <span class={styles.copied}>
+            {copiedIcon?.startsWith('<svg')
+                ? <Fragment set:html={copiedIcon} />
+                : <Icon type={copiedIcon as IconProps['type']} />
+            }
+        </span>
+    </div>
+</Badge>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        on('[data-id="w-copy"]', 'click', (event: Event) => {
+            const copy = event.currentTarget as HTMLButtonElement
+            const copied = copy.nextElementSibling as HTMLSpanElement
+            const badge = copy.parentElement?.parentElement as HTMLElement
+
+            const text = copy.parentElement?.previousSibling?.textContent?.trim()
+
+            copy.style.opacity = '0'
+            copy.style.pointerEvents = 'none'
+
+            copied.style.opacity = '1'
+            badge.removeAttribute('data-tooltip')
+
+            navigator.clipboard.writeText(text as string)
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/Copy/Copy.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import type { SvelteCopyProps } from './copy'
+
+    import Badge from '../Badge/Badge.svelte'
+
+    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'
+
+    let {
+        tooltip = $bindable(''),
+        tooltipPosition,
+        copyIcon,
+        copiedIcon,
+        className,
+        children,
+        ...rest
+    }: SvelteCopyProps = $props()
+
+    const classes = classNames([
+        styles.copy,
+        className
+    ])
+
+    let copyButton: HTMLButtonElement | undefined = $state()
+    let copiedButton: HTMLSpanElement | undefined = $state()
+
+    const copyText = () => {
+        const text = copyButton
+            ?.parentElement
+            ?.parentElement
+            ?.querySelector('[data-id="text"]')
+            ?.textContent?.trim()
+
+        copyButton!.style.opacity = '0'
+        copyButton!.style.pointerEvents = 'none'
+
+        copiedButton!.style.opacity = '1'
+        tooltip = ''
+
+        navigator.clipboard.writeText(text as string)
+    }
+</script>
+
+<Badge
+    {...rest}
+    className={classes}
+    data-tooltip={tooltip || undefined}
+    data-position={tooltipPosition}
+>
+    <span data-id="text">{@render children?.()}</span>
+    <div class={styles.icons}>
+        <button
+            bind:this={copyButton}
+            class={styles['copy-icon']}
+            onclick={copyText}
+            aria-label="copy"
+        >
+            {@html copyIcon || copy}
+        </button>
+        <span class={styles.copied} bind:this={copiedButton}>
+            {@html copiedIcon || circleCheck}
+        </span>
+    </div>
+</Badge>

package/components/Copy/Copy.tsx

@@ -0,0 +1,74 @@
+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}
+                    aria-label="copy"
+                    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,20 @@
+import type { Snippet } from 'svelte'
+
+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 SvelteCopyProps = {
+    children: Snippet
+} & CopyProps
+
+export type ReactCopyProps = {
+    children: React.ReactNode
+} & CopyProps