lumen-plus 0.0.1

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types'
+    import { setContext, onMount, onDestroy } from 'svelte'
+    import { CAROUSEL_CONTEXT_KEY, type CarouselContext } from './CarouselContext'
+    import Icon from '../Icon'
+    import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide'
+
+    interface CarouselProps {
+        initialIndex?: number
+        height?: string
+        autoplay?: boolean
+        interval?: number
+        loop?: boolean
+        direction?: CarouselDirection
+        indicatorTrigger?: CarouselIndicatorTrigger
+        indicatorPosition?: CarouselIndicatorPosition
+        arrow?: 'always' | 'hover' | 'never'
+        itemCount?: number
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        initialIndex = 0,
+        height = '300px',
+        autoplay = true,
+        interval = 3000,
+        loop = true,
+        direction = 'horizontal',
+        indicatorTrigger = 'click',
+        indicatorPosition,
+        arrow = 'hover',
+        itemCount = 0,
+        children,
+        class: cls = '',
+        ...attrs
+    }: CarouselProps = $props()
+
+    let activeIndex = $state(0)
+    let timer: ReturnType<typeof setInterval> | null = null
+    let isHovering = $state(false)
+
+    // Initialize activeIndex from prop
+    $effect(() => {
+        if (initialIndex >= 0 && initialIndex < itemCount) {
+            activeIndex = initialIndex
+        }
+    })
+
+    const context: CarouselContext = {
+        get activeIndex() {
+            return activeIndex
+        },
+        get direction() {
+            return direction
+        },
+        registerItem: () => 0,
+    }
+
+    setContext(CAROUSEL_CONTEXT_KEY, context)
+
+    const prev = (): void => {
+        if (itemCount === 0) return
+        if (activeIndex > 0) {
+            activeIndex--
+        } else if (loop) {
+            activeIndex = itemCount - 1
+        }
+    }
+
+    const next = (): void => {
+        if (itemCount === 0) return
+        if (activeIndex < itemCount - 1) {
+            activeIndex++
+        } else if (loop) {
+            activeIndex = 0
+        }
+    }
+
+    const goTo = (index: number): void => {
+        activeIndex = index
+    }
+
+    const handleIndicator = (index: number, trigger: 'hover' | 'click'): void => {
+        if (indicatorTrigger === trigger) {
+            goTo(index)
+        }
+    }
+
+    const startAutoplay = (): void => {
+        if (autoplay && !timer && itemCount > 1) {
+            timer = setInterval(next, interval)
+        }
+    }
+
+    const stopAutoplay = (): void => {
+        if (timer) {
+            clearInterval(timer)
+            timer = null
+        }
+    }
+
+    const handleMouseEnter = (): void => {
+        isHovering = true
+        stopAutoplay()
+    }
+
+    const handleMouseLeave = (): void => {
+        isHovering = false
+        startAutoplay()
+    }
+
+    onMount(() => {
+        startAutoplay()
+    })
+
+    onDestroy(() => {
+        stopAutoplay()
+    })
+
+    const showArrow = $derived(arrow === 'always' || (arrow === 'hover' && isHovering))
+    const classes = $derived(`lm-carousel lm-carousel--${direction}${indicatorPosition === 'outside' ? ' lm-carousel--indicator-outside' : ''}${cls ? ` ${cls}` : ''}`)
+
+    /** 指示器索引数组（缓存避免重复创建） */
+    const indicatorIndices = $derived(Array.from({ length: itemCount }, (_, i) => i))
+</script>
+
+<div class={classes} style="height:{height}" onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave} {...attrs}>
+    <div class="lm-carousel__container" style="transform:{direction === 'horizontal' ? `translateX(-${activeIndex * 100}%)` : `translateY(-${activeIndex * 100}%)`}">
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if showArrow && itemCount > 1}
+        <button type="button" class="lm-carousel__arrow lm-carousel__arrow--prev" onclick={prev} aria-label="Previous slide">
+            <Icon icon={direction === 'horizontal' ? ChevronLeft : ChevronUp} size={18} />
+        </button>
+        <button type="button" class="lm-carousel__arrow lm-carousel__arrow--next" onclick={next} aria-label="Next slide">
+            <Icon icon={direction === 'horizontal' ? ChevronRight : ChevronDown} size={18} />
+        </button>
+    {/if}
+
+    {#if indicatorPosition !== 'none' && itemCount > 1}
+        <div class="lm-carousel__indicators">
+            {#each indicatorIndices as i (i)}
+                <button
+                    type="button"
+                    class="lm-carousel__indicator{activeIndex === i ? ' is-active' : ''}"
+                    onclick={() => handleIndicator(i, 'click')}
+                    onmouseenter={() => handleIndicator(i, 'hover')}
+                    aria-label="Go to slide {i + 1}"
+                ></button>
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/components/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types';
+interface CarouselProps {
+    initialIndex?: number;
+    height?: string;
+    autoplay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    direction?: CarouselDirection;
+    indicatorTrigger?: CarouselIndicatorTrigger;
+    indicatorPosition?: CarouselIndicatorPosition;
+    arrow?: 'always' | 'hover' | 'never';
+    itemCount?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/Carousel/CarouselContext.d.ts

@@ -0,0 +1,6 @@
+export declare const CAROUSEL_CONTEXT_KEY: unique symbol;
+export interface CarouselContext {
+    activeIndex: number;
+    direction: 'horizontal' | 'vertical';
+    registerItem: () => number;
+}

package/dist/components/Carousel/CarouselContext.js

@@ -0,0 +1 @@
+export const CAROUSEL_CONTEXT_KEY = Symbol('carousel');

package/dist/components/Carousel/CarouselItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext } from 'svelte'
+    import { CAROUSEL_CONTEXT_KEY, type CarouselContext } from './CarouselContext'
+
+    interface CarouselItemProps {
+        name?: string
+        label?: string
+        index?: number
+        children?: Snippet
+        class?: string
+    }
+
+    let { name = '', label = '', index = 0, children, class: cls = '', ...attrs }: CarouselItemProps = $props()
+
+    const carousel = getContext<CarouselContext>(CAROUSEL_CONTEXT_KEY)
+
+    const isActive = $derived(index === carousel?.activeIndex)
+    const classes = $derived(`lm-carousel__item${isActive ? ' is-active' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/dist/components/Carousel/CarouselItem.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CarouselItemProps {
+    name?: string;
+    label?: string;
+    index?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1,5 @@
+import Carousel from './Carousel.svelte';
+import CarouselItem from './CarouselItem.svelte';
+export { Carousel, CarouselItem };
+export type { CarouselProps, CarouselItemProps, CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types';
+export default Carousel;

package/dist/components/Carousel/index.js

@@ -0,0 +1,4 @@
+import Carousel from './Carousel.svelte';
+import CarouselItem from './CarouselItem.svelte';
+export { Carousel, CarouselItem };
+export default Carousel;

package/dist/components/Carousel/types.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+/** Carousel 方向 */
+export type CarouselDirection = 'horizontal' | 'vertical';
+/** Carousel 指示器触发方式 */
+export type CarouselIndicatorTrigger = 'hover' | 'click';
+/** Carousel 指示器位置 */
+export type CarouselIndicatorPosition = 'outside' | 'none';
+/** Carousel 属性 */
+export interface CarouselProps {
+    /** 初始索引 */
+    initialIndex?: number;
+    /** 高度 */
+    height?: string;
+    /** 是否自动播放 */
+    autoplay?: boolean;
+    /** 自动播放间隔 */
+    interval?: number;
+    /** 是否循环 */
+    loop?: boolean;
+    /** 方向 */
+    direction?: CarouselDirection;
+    /** 指示器触发方式 */
+    indicatorTrigger?: CarouselIndicatorTrigger;
+    /** 指示器位置 */
+    indicatorPosition?: CarouselIndicatorPosition;
+    /** 是否显示箭头 */
+    arrow?: 'always' | 'hover' | 'never';
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** CarouselItem 属性 */
+export interface CarouselItemProps {
+    /** 名称 */
+    name?: string;
+    /** 标签 */
+    label?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Carousel/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Cascader/Cascader.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { createDropdownTransition } from '../../utils'
+    import Icon from '../Icon'
+    import { ChevronRight, ChevronDown, X, Check } from 'lucide'
+    import type { CascaderOption, CascaderProps as Props } from './types'
+
+    let {
+        modelValue = $bindable([]),
+        options = [],
+        placeholder = '请选择',
+        disabled = false,
+        clearable = false,
+        separator = ' / ',
+        expandTrigger = 'click',
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let inputRef: HTMLElement | null = $state(null)
+    let menus = $state<CascaderOption[][]>([])
+    let activeOptions = $state<CascaderOption[]>([])
+
+    $effect(() => {
+        menus = [options]
+    })
+
+    const getLabelsFromValue = (values: (string | number)[], opts: CascaderOption[]): string[] => {
+        const labels: string[] = []
+        let current = opts
+        for (const val of values) {
+            const opt = current.find((o) => o.value === val)
+            if (opt) {
+                labels.push(opt.label)
+                current = opt.children || []
+            }
+        }
+        return labels
+    }
+
+    const displayValue = $derived(activeOptions.length > 0 ? activeOptions.map((o) => o.label).join(separator) : modelValue.length > 0 ? getLabelsFromValue(modelValue, options).join(separator) : '')
+
+    const initMenus = (): void => {
+        menus = [options]
+        activeOptions = []
+        if (modelValue.length > 0) {
+            let current = options
+            for (const val of modelValue) {
+                const opt = current.find((o) => o.value === val)
+                if (opt) {
+                    activeOptions = [...activeOptions, opt]
+                    if (opt.children?.length) {
+                        menus = [...menus, opt.children]
+                        current = opt.children
+                    }
+                }
+            }
+        }
+    }
+
+    const handleToggle = (): void => {
+        if (disabled) return
+        visible = !visible
+        if (visible) initMenus()
+    }
+
+    const handleOptionClick = (option: CascaderOption, level: number): void => {
+        if (option.disabled) return
+        activeOptions = [...activeOptions.slice(0, level), option]
+        menus = [...menus.slice(0, level + 1)]
+        if (option.children?.length) {
+            menus = [...menus, option.children]
+        } else {
+            modelValue = activeOptions.map((o) => o.value)
+            visible = false
+        }
+    }
+
+    const handleOptionHover = (option: CascaderOption, level: number): void => {
+        if (expandTrigger !== 'hover' || option.disabled) return
+        activeOptions = [...activeOptions.slice(0, level), option]
+        menus = [...menus.slice(0, level + 1)]
+        if (option.children?.length) menus = [...menus, option.children]
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = []
+        activeOptions = []
+        menus = [options]
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') visible = false
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    $effect(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    const isActive = (option: CascaderOption, level: number): boolean => activeOptions[level]?.value === option.value
+
+    const classes = $derived(['lm-cascader', disabled && 'is-disabled', size !== 'default' && `lm-cascader--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div
+        class="lm-cascader__input"
+        class:is-focus={visible}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={visible}
+        aria-controls="cascader-dropdown"
+        aria-haspopup="listbox"
+        onclick={handleToggle}
+        onkeydown={handleKeydown}
+    >
+        <span class="lm-cascader__value" class:is-placeholder={!displayValue}>
+            {displayValue || placeholder}
+        </span>
+        {#if clearable && modelValue.length > 0 && !disabled}
+            <button type="button" class="lm-cascader__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-cascader__arrow" class:is-open={visible}>
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible}
+        <div
+            class="lm-cascader__dropdown"
+            role="listbox"
+            id="cascader-dropdown"
+            transition:dropdownTransition
+        >
+            {#if showMenuArrow}
+                <div class="lm-cascader__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            {#each menus as menu, level}
+                <ul class="lm-cascader__menu" role="group">
+                    {#each menu as option (option.value)}
+                        <li
+                            class="lm-cascader__option"
+                            class:is-active={isActive(option, level)}
+                            class:is-disabled={option.disabled}
+                            role="option"
+                            aria-selected={isActive(option, level)}
+                            onmousedown={() => handleOptionClick(option, level)}
+                            onmouseenter={() => handleOptionHover(option, level)}
+                        >
+                            <span class="lm-cascader__option-label">{option.label}</span>
+                            <span class="lm-cascader__option-suffix" aria-hidden="true">
+                                {#if option.children?.length}
+                                    <Icon icon={ChevronRight} size={14} />
+                                {:else if isActive(option, level) && level === menus.length - 1}
+                                    <Icon icon={Check} size={14} />
+                                {/if}
+                            </span>
+                        </li>
+                    {/each}
+                </ul>
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/components/Cascader/Cascader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CascaderProps as Props } from './types';
+declare const Cascader: import("svelte").Component<Props, {}, "modelValue">;
+type Cascader = ReturnType<typeof Cascader>;
+export default Cascader;

package/dist/components/Cascader/index.d.ts

@@ -0,0 +1,4 @@
+import Cascader from './Cascader.svelte';
+export default Cascader;
+export { Cascader };
+export type { CascaderOption, CascaderProps } from './types';

package/dist/components/Cascader/index.js

@@ -0,0 +1,3 @@
+import Cascader from './Cascader.svelte';
+export default Cascader;
+export { Cascader };

package/dist/components/Cascader/types.d.ts

@@ -0,0 +1,19 @@
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+}
+export interface CascaderProps {
+    modelValue?: (string | number)[];
+    options?: CascaderOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    separator?: string;
+    expandTrigger?: 'click' | 'hover';
+    size?: 'small' | 'default' | 'large';
+    /** 弹层箭头（Popconfirm 风格） */
+    showMenuArrow?: boolean;
+    class?: string;
+}

package/dist/components/Cascader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { Check, Minus } from 'lucide'
+    import type { Snippet } from 'svelte'
+
+    interface CheckboxProps {
+        checked?: boolean
+        value?: string | number
+        disabled?: boolean
+        indeterminate?: boolean
+        size?: 'small' | 'medium' | 'large'
+        label?: string
+        children?: Snippet
+        onchange?: (checked: boolean) => void
+        class?: string
+    }
+
+    let { checked = $bindable(false), value, disabled = false, indeterminate = false, size = 'medium', label, children, onchange, class: cls = '', ...attrs }: CheckboxProps = $props()
+
+    let inputRef: HTMLInputElement | null = $state(null)
+
+    const classes = $derived(`lm-checkbox lm-checkbox--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${indeterminate ? ' is-indeterminate' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleChange = (e: Event): void => {
+        checked = (e.currentTarget as HTMLInputElement).checked
+        onchange?.(checked)
+    }
+
+    $effect(() => {
+        if (inputRef) inputRef.indeterminate = indeterminate
+    })
+</script>
+
+<label class={classes}>
+    <span class="lm-checkbox__input">
+        <input bind:this={inputRef} bind:checked {...attrs} type="checkbox" class="lm-checkbox__original" {value} {disabled} onchange={handleChange} />
+        <span class="lm-checkbox__inner">
+            {#if checked}
+                <Icon icon={Check} size={12} />
+            {:else if indeterminate}
+                <Icon icon={Minus} size={12} />
+            {/if}
+        </span>
+    </span>
+
+    {#if children || label}
+        <span class="lm-checkbox__label">
+            {#if children}
+                {@render children()}
+            {:else if label}
+                {label}
+            {/if}
+        </span>
+    {/if}
+</label>

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface CheckboxProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+    children?: Snippet;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize } from './types';
+export default Checkbox;

package/dist/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox.svelte';
+export { Checkbox };
+export default Checkbox;

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Checkbox 尺寸 */
+export type CheckboxSize = 'small' | 'medium' | 'large';
+/** Checkbox 属性 */
+export interface CheckboxProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 值 */
+    value?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为不确定状态 */
+    indeterminate?: boolean;
+    /** 尺寸 */
+    size?: CheckboxSize;
+    /** 标签文字 */
+    label?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 变化回调 */
+    onchange?: (checked: boolean) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Checkbox/types.js

@@ -0,0 +1 @@
+export {};