webcoreui 0.10.1 → 1.0.0

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/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/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.10.1",
+    "version": "1.0.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -19,29 +19,29 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.9.4",
-        "@astrojs/node": "9.0.2",
-        "@astrojs/react": "4.1.6",
-        "@astrojs/svelte": "7.0.4",
-        "@eslint/js": "9.18.0",
-        "@typescript-eslint/parser": "8.21.0",
-        "astro": "5.1.10",
-        "astro-eslint-parser": "1.1.0",
-        "eslint": "9.18.0",
+        "@astrojs/node": "9.1.3",
+        "@astrojs/react": "4.2.1",
+        "@astrojs/svelte": "7.0.7",
+        "@eslint/js": "9.23.0",
+        "@typescript-eslint/parser": "8.27.0",
+        "astro": "5.5.4",
+        "astro-eslint-parser": "1.2.2",
+        "eslint": "9.23.0",
         "eslint-plugin-astro": "1.3.1",
         "eslint-plugin-react": "7.37.4",
         "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "2.46.1",
+        "eslint-plugin-svelte": "3.3.3",
         "husky": "9.1.7",
         "jsdom": "26.0.0",
-        "lint-staged": "15.4.2",
+        "lint-staged": "15.5.0",
         "react": "19.0.0",
         "react-dom": "19.0.0",
-        "sass": "1.83.4",
+        "sass": "1.86.0",
         "sass-true": "8.1.0",
-        "svelte": "5.19.2",
-        "svelte-eslint-parser": "0.43.0",
-        "typescript": "5.7.3",
-        "typescript-eslint": "8.21.0",
+        "svelte": "5.25.3",
+        "svelte-eslint-parser": "1.1.0",
+        "typescript": "5.8.2",
+        "typescript-eslint": "8.27.0",
         "vite-tsconfig-paths": "5.1.4",
         "vitest": "3.0.4"
     },

package/react.d.ts

@@ -26,6 +26,7 @@ import type { ReactListProps as WReactListProps } from './components/List/list'
 import type { ReactMasonryProps as WReactMasonryProps } from './components/Masonry/masonry'
 import type { ReactMenuProps as WReactMenuProps } from './components/Menu/menu'
 import type { ReactModalProps as WReactModalProps } from './components/Modal/modal'
+import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
 import type { ReactPaginationProps as WReactPaginationProps } from './components/Pagination/pagination'
 import type { ReactPopoverProps as WReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
@@ -37,6 +38,7 @@ import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/she
 import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
+import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { ReactSpoilerProps as WReactSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
@@ -82,6 +84,7 @@ declare module 'webcoreui/react' {
 	export const Masonry: FC<WReactMasonryProps>
 	export const Menu: FC<WReactMenuProps>
 	export const Modal: FC<WReactModalProps>
+	export const OTPInput: FC<WOTPInputProps>
 	export const Pagination: FC<WReactPaginationProps>
 	export const Popover: FC<WReactPopoverProps>
 	export const Progress: FC<WProgressProps>
@@ -93,6 +96,7 @@ declare module 'webcoreui/react' {
 	export const Sidebar: FC<WReactSidebarProps>
 	export const Skeleton: FC<WSkeletonProps>
 	export const Slider: FC<WReactSliderProps>
+	export const SpeedDial: FC<WSpeedDialProps>
 	export const Spinner: FC<WSpinnerProps>
 	export const Spoiler: FC<WReactSpoilerProps>
 	export const Stepper: FC<WStepperProps>
@@ -132,6 +136,7 @@ declare module 'webcoreui/react' {
 	export type MasonryProps = WReactMasonryProps
 	export type MenuProps = WReactMenuProps
 	export type ModalProps = WReactModalProps
+	export type OTPInputProps = WOTPInputProps
 	export type PaginationProps = WReactPaginationProps
 	export type PopoverProps = WReactPopoverProps
 	export type ProgressProps = WProgressProps
@@ -143,6 +148,7 @@ declare module 'webcoreui/react' {
 	export type SidebarProps = WReactSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WReactSliderProps
+	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WReactSpoilerProps
 	export type StepperProps = WStepperProps

package/react.js

@@ -25,6 +25,7 @@ import ListComponent from './components/List/List.tsx'
 import MasonryComponent from './components/Masonry/Masonry.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
 import ModalComponent from './components/Modal/Modal.tsx'
+import OTPInputComponent from './components/OTPInput/OTPInput.tsx'
 import PaginationComponent from './components/Pagination/Pagination.tsx'
 import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
@@ -36,6 +37,7 @@ import SheetComponent from './components/Sheet/Sheet.tsx'
 import SidebarComponent from './components/Sidebar/Sidebar.tsx'
 import SkeletonComponent from './components/Skeleton/Skeleton.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
+import SpeedDialComponent from './components/SpeedDial/SpeedDial.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
 import StepperComponent from './components/Stepper/Stepper.tsx'
@@ -75,6 +77,7 @@ export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const OTPInput = OTPInputComponent
 export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
@@ -86,6 +89,7 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
+export const SpeedDial = SpeedDialComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent