webcoreui 0.10.1 → 1.1.0-beta.0

package/components/SpeedDial/SpeedDial.astro

@@ -0,0 +1,106 @@
+---
+import type { SpeedDialProps } from './speeddial'
+
+import Button from '../Button/Button.astro'
+import Icon from '../Icon/Icon.astro'
+
+import styles from './speeddial.module.scss'
+
+interface Props extends SpeedDialProps {}
+
+const {
+    items,
+    position,
+    horizontal,
+    circular,
+    theme,
+    icon,
+    triggerOnClick,
+    className
+} = Astro.props
+
+const classes = [
+    styles.dial,
+    position && styles[position],
+    horizontal && styles.horizontal,
+    circular && styles.circular,
+    className
+]
+
+const getTooltipPosition = () => {
+    const positionMap = {
+        'top-left': 'right',
+        'bottom-left': 'right',
+        'horizontal': {
+            'top-left': 'bottom',
+            'top-right': 'bottom'
+        }
+    }
+
+    return horizontal
+        ? positionMap.horizontal[position as keyof typeof positionMap.horizontal]
+        : positionMap[position as keyof typeof positionMap] || 'left'
+}
+---
+
+{!!items?.length && (
+    <div class:list={classes} data-id={triggerOnClick ? 'w-speed-dial' : null}>
+        <Button className={styles.trigger} {...(theme && { theme })}>
+            {icon && (
+                <Fragment>
+                    {icon.startsWith('<svg')
+                        ? <Fragment set:html={icon} />
+                        : <Icon type={icon} size={18} />
+                    }
+                </Fragment>
+            )}
+            {!icon && <span>+</span>}
+        </Button>
+
+        <ul class={styles.list}>
+            {items.map(item => (
+                <li>
+                    <Button
+                        data-tooltip={item.tooltip}
+                        data-position={getTooltipPosition()}
+                        href={item.href}
+                        target={item.target}
+                        className={styles.button}
+                        {...(theme && { theme })}
+                    >
+                        {item.icon.startsWith('<svg')
+                            ? <Fragment set:html={item.icon} />
+                            : <Icon type={item.icon} size={16} />
+                        }
+                    </Button>
+                </li>
+            ))}
+        </ul>
+    </div>
+)}
+
+<script>
+    import { get, on } from '../../utils/DOMUtils'
+
+    const addEventListeners = () => {
+        const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
+        const speedDialContainer = speedDial?.parentElement as HTMLDivElement
+
+        if (speedDial) {
+            on(speedDial, 'click', () => {
+                speedDialContainer.dataset.show = speedDialContainer.dataset.show === 'true'
+                    ? 'false'
+                    : 'true'
+            })
+
+            on(document, 'click', (event: Event) => {
+                if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+                    speedDialContainer.dataset.show = 'false'
+                }
+            })
+        }
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/SpeedDial/SpeedDial.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { SpeedDialProps } from './speeddial'
+
+    import Button from '../Button/Button.svelte'
+
+    import { classNames } from '../../utils/classNames'
+    import { get, on } from '../../utils/DOMUtils'
+
+    import styles from './speeddial.module.scss'
+
+    const {
+        items,
+        position,
+        horizontal,
+        circular,
+        theme,
+        icon,
+        triggerOnClick,
+        className
+    }: SpeedDialProps = $props()
+
+    let show = $state(false)
+
+    const classes = classNames([
+        styles.dial,
+        position && styles[position],
+        horizontal && styles.horizontal,
+        circular && styles.circular,
+        className
+    ])
+
+    const getTooltipPosition = () => {
+        const positionMap = {
+            'top-left': 'right',
+            'bottom-left': 'right',
+            'horizontal': {
+                'top-left': 'bottom',
+                'top-right': 'bottom'
+            }
+        }
+
+        return horizontal
+            ? positionMap.horizontal[position as keyof typeof positionMap.horizontal]
+            : positionMap[position as keyof typeof positionMap] || 'left'
+    }
+
+    const toggle = () => show = !show
+
+    onMount(() => {
+        const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
+
+        const eventListener = (event: Event) => {
+            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+                show = false
+            }
+        }
+
+        on(document, 'click', eventListener)
+
+        return () => {
+            document.removeEventListener('click', eventListener)
+        }
+    })
+</script>
+
+{#if items?.length}
+    <div
+        class={classes}
+        data-id={triggerOnClick ? 'w-speed-dial' : null}
+        data-show={triggerOnClick ? show : null}
+    >
+        <Button
+            className={styles.trigger}
+            onClick={triggerOnClick ? toggle : undefined}
+            {...(theme && { theme })}
+        >
+            {#if icon}
+                {@html icon}
+            {:else}
+                <span>+</span>
+            {/if}
+        </Button>
+
+        <ul class={styles.list}>
+            {#each items as item}
+                <li>
+                    <Button
+                        data-tooltip={item.tooltip}
+                        data-position={getTooltipPosition()}
+                        {...(theme && { theme })}
+                        href={item.href}
+                        target={item.target}
+                        className={styles.button}
+                    >
+                        {@html item.icon}
+                    </Button>
+                </li>
+            {/each}
+        </ul>
+    </div>
+{/if}

package/components/SpeedDial/SpeedDial.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react'
+import type { SpeedDialProps } from './speeddial'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { get, on } from '../../utils/DOMUtils'
+
+import styles from './speeddial.module.scss'
+
+const SpeedDial = ({
+    items,
+    position,
+    horizontal,
+    circular,
+    theme,
+    icon,
+    triggerOnClick,
+    className
+}: SpeedDialProps) => {
+    const [show, setShow] = useState(false)
+
+    const classes = classNames([
+        styles.dial,
+        position && styles[position],
+        horizontal && styles.horizontal,
+        circular && styles.circular,
+        className
+    ])
+
+    const getTooltipPosition = () => {
+        const positionMap = {
+            'top-left': 'right',
+            'bottom-left': 'right',
+            'horizontal': {
+                'top-left': 'bottom',
+                'top-right': 'bottom'
+            }
+        }
+
+        return horizontal
+            ? positionMap.horizontal[position as keyof typeof positionMap.horizontal]
+            : positionMap[position as keyof typeof positionMap] || 'left'
+    }
+
+    const toggle = () => {
+        setShow(!show)
+    }
+
+    useEffect(() => {
+        const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
+
+        const eventListener = (event: Event) => {
+            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+                setShow(false)
+            }
+        }
+
+        on(document, 'click', eventListener)
+
+        return () => {
+            document.removeEventListener('click', eventListener)
+        }
+    }, [])
+
+    if (!items?.length) {
+        return null
+    }
+
+    return (
+        <div
+            className={classes}
+            data-id={triggerOnClick ? 'w-speed-dial' : null}
+            data-show={triggerOnClick ? show : null}
+        >
+            <Button
+                className={styles.trigger}
+                onClick={triggerOnClick ? toggle : undefined}
+                {...(theme && { theme })}
+            >
+                {icon && (
+                    <span dangerouslySetInnerHTML={{ __html: icon }} />
+                )}
+                {!icon && <span>+</span>}
+            </Button>
+
+            <ul className={styles.list}>
+                {items.map((item, index) => (
+                    <li key={index}>
+                        <Button
+                            data-tooltip={item.tooltip}
+                            data-position={getTooltipPosition()}
+                            href={item.href}
+                            target={item.target}
+                            className={styles.button}
+                            dangerouslySetInnerHTML={{ __html: item.icon }}
+                            {...(theme && { theme })}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default SpeedDial

package/components/SpeedDial/speeddial.module.scss

@@ -0,0 +1,94 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-speed-dial-size: 40px;
+}
+
+.dial {
+    @include layout(flex, column-reverse, center, xs);
+    @include position(fixed, b20px, r20px);
+
+    width: fit-content;
+
+    &.top-left,
+    &.top-right {
+        @include position(t20px, bauto);
+        @include layout(column);
+    }
+
+    &.top-left,
+    &.bottom-left {
+        @include position(l20px, rauto);
+        
+        &.horizontal {
+            @include layout(row);
+        }
+    }
+
+    &.circular {
+        .trigger,
+        .button {
+            @include border-radius(max);
+        }
+    }
+
+    &.horizontal {
+        @include layout(row-reverse, v-stretch);
+
+        .list {
+            @include layout(row, v-stretch);
+        }
+    }
+
+    &:not([data-id]):hover .list,
+    &[data-show="true"] .list {
+        @include layout(flex);
+    }
+
+    &:not([data-id]):hover .trigger span,
+    &[data-show="true"] .trigger span {
+        transform: rotate(45deg) translate(1px);
+    }
+}
+
+.trigger {
+    @include layout(flex, column);
+    @include typography(bold);
+    @include size(var(--w-speed-dial-size));
+
+    user-select: none;
+
+    span {
+        @include transition(transform);
+    }
+
+    svg {
+        @include size(18px);
+    }
+}
+
+.list {
+    @include spacing(0);
+    @include layout(flex, column, center, xs);
+    @include visibility(none);
+
+    list-style-type: none;
+    
+    &:hover {
+        @include layout(flex);
+    }
+
+    li {
+        @include spacing(0);
+        @include size('w100%');
+    }
+
+    .button {
+        @include layout(flex, column, xs);
+        @include size(var(--w-speed-dial-size));
+    
+        svg {
+            @include size(16px);
+        }
+    }
+}

package/components/SpeedDial/speeddial.ts

@@ -0,0 +1,18 @@
+import type { ButtonProps } from '../Button/button'
+import type { IconProps } from '../Icon/icon'
+
+export type SpeedDialProps = {
+    items: {
+        icon: IconProps['type'] | string
+        href: string
+        tooltip?: string
+        target?: ButtonProps['target']
+    }[]
+    position?: 'top-left' | 'top-right' | 'bottom-left'
+    horizontal?: boolean
+    circular?: boolean
+    theme?: ButtonProps['theme']
+    icon?: IconProps['type'] | string
+    triggerOnClick?: boolean
+    className?: string
+}

package/components/Switch/Switch.astro

@@ -38,5 +38,5 @@ const styleVariables = classNames([
 <label class:list={classes} style={styleVariables}>
     <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
     <span class={styles.toggle}></span>
-    {label && <span class={styles.label}>{label}</span>}
+    {label && <span class={styles.label} set:html={label} />}
 </label>

package/components/Switch/Switch.svelte

@@ -44,6 +44,6 @@
     />
     <span class={styles.toggle}></span>
     {#if label}
-        <span class={styles.label}>{label}</span>
+        <span class={styles.label}>{@html label}</span>
     {/if}
 </label>

package/components/Switch/Switch.tsx

@@ -42,7 +42,12 @@ const Switch = ({
                 {...rest}
             />
             <span className={styles.toggle}></span>
-            {label && <span className={styles.label}>{label}</span>}
+            {label && (
+                <span
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
+            )}
         </label>
     )
 }

package/components/Timeline/timeline.module.scss

@@ -67,6 +67,17 @@ body {
                     right: $rightOffset;
                 }
             }
+            
+            &.icons > li {
+                &:nth-child(even) > span:first-child {
+                    left: 25px;
+                }
+
+                &:nth-child(odd) > span:first-child {
+                    right: -15px;
+                }
+            }
+
         }
     
         &.centered > li:nth-child(odd) {

package/components/Timeline/timeline.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte'
 
 export type TimelineProps = {
-    theme?: 'fill' | 'stroke' | 'stroke fill'
+    theme?: 'fill' | 'stroke' | 'stroke fill' | 'icons'
     alternate?: boolean
     centered?: boolean
     color?: string

package/components/TimelineItem/TimelineItem.astro

@@ -1,6 +1,8 @@
 ---
 import type { TimelineItemProps } from './timelineitem'
 
+import Icon from '../Icon/Icon.astro'
+
 import styles from './timelineitem.module.scss'
 
 interface Props extends TimelineItemProps {}
@@ -8,11 +10,13 @@ interface Props extends TimelineItemProps {}
 const {
     title,
     titleTag = 'span',
+    icon,
     className
 } = Astro.props
 
 const classes = [
     styles.item,
+    icon && styles['with-icon'],
     className
 ]
 
@@ -20,6 +24,14 @@ const Title = titleTag
 ---
 
 <li class:list={classes}>
+    {icon && (
+        <span class={styles.icon}>
+            {icon.startsWith('<svg')
+                ? <Fragment set:html={icon} />
+                : <Icon type={icon} size={18} />
+            }
+        </span>
+    )}
     {title && (
         <Title class:list={styles.title}>{title}</Title>
     )}

package/components/TimelineItem/TimelineItem.svelte

@@ -8,17 +8,24 @@
     const {
         title,
         titleTag = 'span',
+        icon,
         className,
         children
     }: SvelteTimelineItemProps = $props()
 
     const classes = classNames([
         styles.item,
+        icon && styles['with-icon'],
         className
     ])
 </script>
 
 <li class={classes}>
+    {#if icon}
+        <span class={styles.icon}>
+            {@html icon}
+        </span>
+    {/if}
     {#if title}
         <svelte:element this={titleTag} class={styles.title}>
             {title}

package/components/TimelineItem/TimelineItem.tsx

@@ -8,16 +8,24 @@ import styles from './timelineitem.module.scss'
 const TimelineItem = ({
     title,
     TitleTag = 'span',
+    icon,
     className,
     children
 }: ReactTimelineItemProps) => {
     const classes = classNames([
         styles.item,
+        icon && styles['with-icon'],
         className
     ])
 
     return (
         <li className={classes}>
+            {icon && (
+                <span
+                    className={styles.icon}
+                    dangerouslySetInnerHTML={{ __html: icon }}
+                />
+            )}
             {title && (
                 <TitleTag className={styles.title}>{title}</TitleTag>
             )}

package/components/TimelineItem/timelineitem.module.scss

@@ -4,7 +4,7 @@
     @include position(relative);
     @include spacing(m0);
 
-    &::before {
+    &:not(.with-icon)::before {
         @include position(absolute, t-5px);
         @include size(25px);
         @include border-radius(max);
@@ -19,6 +19,21 @@
         margin-left: -40px;
     }
 
+    .icon {
+        @include position(absolute);
+        @include background(primary-70);
+        @include border(6px, primary-70);
+        @include layout(flex);
+        
+        color: var(--w-timeline-text-color);
+        margin-left: -40px;
+        margin-top: -4px;
+        
+        svg {
+            @include size(18px);
+        }
+    }
+
     .title {
         @include typography(bold, lg);
         @include spacing(mb-sm);

package/components/TimelineItem/timelineitem.ts

@@ -1,8 +1,11 @@
 import type { Snippet } from 'svelte'
 
+import type { IconProps } from '../Icon/icon'
+
 export type TimelineItemProps = {
     title?: string
     titleTag?: string
+    icon?: IconProps['type'] | string
     className?: string
 }
 

package/index.d.ts

@@ -1,4 +1,6 @@
 
+import type { AstroIntegration } from 'astro'
+
 export type Gap = 'none'
     | 'xxs'
     | 'xs'
@@ -177,4 +179,5 @@ declare module 'webcoreui' {
     export const setDefaultTimeout: (time: number) => number
     export const toast: (config: Toast | string) => void
     export const hideToast: (element: string) => void
+    export const webcore: () => AstroIntegration
 }

package/index.js

@@ -8,4 +8,5 @@ export * from './utils/getLayoutClasses.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'
 export * from './utils/popover.ts'
-export * from './utils/toast.ts'
+export * from './utils/toast.ts'
+export * from './utils/webcore.ts'