lumen-plus 0.0.1

package/dist/components/Textarea/Textarea.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { X } from 'lucide'
+
+    interface TextareaProps {
+        value?: string
+        rows?: number
+        autosize?: boolean
+        placeholder?: string
+        disabled?: boolean
+        readonly?: boolean
+        clearable?: boolean
+        maxlength?: number
+        oninput?: (value: string) => void
+        onchange?: (value: string) => void
+        class?: string
+    }
+
+    let {
+        value = $bindable(''),
+        rows = 3,
+        autosize = false,
+        placeholder,
+        disabled = false,
+        readonly = false,
+        clearable = false,
+        maxlength,
+        oninput,
+        onchange,
+        class: cls = '',
+        ...attrs
+    }: TextareaProps = $props()
+
+    let textareaRef: HTMLTextAreaElement | null = $state(null)
+
+    const classes = $derived(`lm-textarea${disabled ? ' is-disabled' : ''}${readonly ? ' is-readonly' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleInput = (e: Event): void => {
+        value = (e.target as HTMLTextAreaElement).value
+        if (autosize && textareaRef) {
+            textareaRef.style.height = 'auto'
+            textareaRef.style.height = `${textareaRef.scrollHeight}px`
+        }
+        oninput?.(value)
+    }
+
+    const handleChange = (): void => {
+        onchange?.(value)
+    }
+
+    const handleClear = (): void => {
+        value = ''
+        onchange?.(value)
+    }
+</script>
+
+<div class={classes}>
+    <textarea
+        bind:this={textareaRef}
+        class="lm-textarea__input"
+        bind:value
+        rows={autosize ? 1 : rows}
+        {placeholder}
+        {disabled}
+        {readonly}
+        {maxlength}
+        oninput={handleInput}
+        onchange={handleChange}
+        {...attrs}
+    ></textarea>
+    {#if clearable && value && !readonly && !disabled}
+        <button type="button" class="lm-textarea__clear" aria-label="Clear" onclick={handleClear}>
+            <Icon icon={X} size={16} />
+        </button>
+    {/if}
+</div>

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

@@ -0,0 +1,16 @@
+interface TextareaProps {
+    value?: string;
+    rows?: number;
+    autosize?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    maxlength?: number;
+    oninput?: (value: string) => void;
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

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

package/dist/components/Textarea/index.js

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

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

@@ -0,0 +1,25 @@
+/** Textarea 属性 */
+export interface TextareaProps {
+    /** 绑定值 */
+    value?: string;
+    /** 行数 */
+    rows?: number;
+    /** 是否自适应高度 */
+    autosize?: boolean;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 最大长度 */
+    maxlength?: number;
+    /** 输入事件 */
+    oninput?: (value: string) => void;
+    /** 变化事件 */
+    onchange?: (value: string) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Textarea/types.js

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

package/dist/components/TimePicker/TimePicker.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+    import { createDropdownTransition } from '../../utils'
+    import { onMount, tick } from 'svelte'
+    import Icon from '../Icon'
+    import { Clock, X, ChevronDown } from 'lucide'
+
+    interface Props {
+        modelValue?: string
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        readonly?: boolean
+        format?: string
+        size?: 'small' | 'default' | 'large'
+        showMenuArrow?: boolean
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(''),
+        placeholder = '选择时间',
+        disabled = false,
+        clearable = false,
+        readonly = false,
+        format = 'HH:mm:ss',
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let inputRef: HTMLElement | null = $state(null)
+
+    let panelReady = $state(false)
+
+    let hourColRef: HTMLUListElement | null = $state(null)
+    let minuteColRef: HTMLUListElement | null = $state(null)
+    let secondColRef: HTMLUListElement | null = $state(null)
+
+    const genTimeList = (len: number): string[] => Array.from({ length: len }, (_, i) => i.toString().padStart(2, '0'))
+    const hours = genTimeList(24)
+    const minutes = genTimeList(60)
+    const seconds = genTimeList(60)
+
+    const showSeconds = $derived(format.includes('ss'))
+
+    const CELL_HEIGHT = 32
+
+    const parseTime = (val: string): { h: string; m: string; s: string } => {
+        if (!val) return { h: '00', m: '00', s: '00' }
+        const [h = '00', m = '00', s = '00'] = val.split(':')
+        return { h, m, s }
+    }
+
+    let selectedTime = $state(parseTime(modelValue))
+
+    $effect(() => {
+        selectedTime = parseTime(modelValue)
+    })
+
+    const setNow = (): void => {
+        const now = new Date()
+        selectedTime = {
+            h: now.getHours().toString().padStart(2, '0'),
+            m: now.getMinutes().toString().padStart(2, '0'),
+            s: now.getSeconds().toString().padStart(2, '0'),
+        }
+        updateModelValue()
+    }
+
+    const handleToggle = (): void => {
+        if (disabled || readonly) return
+
+        const nextVisible = !visible
+        visible = nextVisible
+
+        // 默认值：打开面板时若无值，自动定位到当前时间
+        if (nextVisible && !modelValue) {
+            setNow()
+        }
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') visible = false
+        else if (e.key === 'Enter' || e.key === ' ') handleToggle()
+    }
+
+    const handleSelect = (type: 'h' | 'm' | 's', value: string): void => {
+        selectedTime = { ...selectedTime, [type]: value }
+        updateModelValue()
+        if (visible) scrollToValue(type, value, 'auto')
+    }
+
+    const updateModelValue = (): void => {
+        const { h, m, s } = selectedTime
+        modelValue = showSeconds ? `${h}:${m}:${s}` : `${h}:${m}`
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = ''
+        selectedTime = { h: '00', m: '00', s: '00' }
+        visible = false
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    const handleNow = (): void => {
+        setNow()
+        if (visible) {
+            scrollToValue('h', selectedTime.h, 'auto')
+            scrollToValue('m', selectedTime.m, 'auto')
+            if (showSeconds) scrollToValue('s', selectedTime.s, 'auto')
+        }
+    }
+
+    const getColEl = (type: 'h' | 'm' | 's'): HTMLUListElement | null => {
+        if (type === 'h') return hourColRef
+        if (type === 'm') return minuteColRef
+        return secondColRef
+    }
+
+    const getListByType = (type: 'h' | 'm' | 's'): string[] => {
+        if (type === 'h') return hours
+        if (type === 'm') return minutes
+        return seconds
+    }
+
+    const programmaticScrollTimers: Partial<Record<'h' | 'm' | 's', ReturnType<typeof setTimeout>>> = {}
+    let programmaticScrolling = $state<{ h: boolean; m: boolean; s: boolean }>({ h: false, m: false, s: false })
+
+    const scrollToValue = (type: 'h' | 'm' | 's', value: string, behavior: ScrollBehavior = 'auto'): void => {
+        const el = getColEl(type)
+        if (!el) return
+        const list = getListByType(type)
+        const index = Math.max(0, list.indexOf(value))
+        const targetTop = index * CELL_HEIGHT
+        if (Math.abs(el.scrollTop - targetTop) < 1) return
+
+        if (programmaticScrollTimers[type]) clearTimeout(programmaticScrollTimers[type])
+        programmaticScrolling = { ...programmaticScrolling, [type]: true }
+
+        el.scrollTo({
+            top: targetTop,
+            behavior,
+        })
+
+        // 给滚动事件一点时间触发，避免吸附逻辑把值重置（例如打开面板时）
+        programmaticScrollTimers[type] = setTimeout(() => {
+            programmaticScrolling = { ...programmaticScrolling, [type]: false }
+        }, 80)
+    }
+
+    const snapTimers: Partial<Record<'h' | 'm' | 's', ReturnType<typeof setTimeout>>> = {}
+
+    const handleColumnScroll = (type: 'h' | 'm' | 's', el: HTMLUListElement): void => {
+        if (!panelReady || programmaticScrolling[type]) return
+        if (snapTimers[type]) clearTimeout(snapTimers[type])
+
+        snapTimers[type] = setTimeout(() => {
+            const list = getListByType(type)
+            const rawIndex = Math.round(el.scrollTop / CELL_HEIGHT)
+            const index = Math.min(Math.max(rawIndex, 0), list.length - 1)
+            const value = list[index]
+
+            if (selectedTime[type] !== value) {
+                selectedTime = { ...selectedTime, [type]: value }
+                updateModelValue()
+            }
+
+            const targetTop = index * CELL_HEIGHT
+            if (Math.abs(el.scrollTop - targetTop) >= 1) {
+                el.scrollTo({ top: targetTop, behavior: 'auto' })
+            }
+        }, 120)
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    $effect(() => {
+        if (!visible) {
+            panelReady = false
+            return
+        }
+
+        panelReady = false
+
+        // 等待面板渲染后再对齐滚动位置
+        void tick().then(() => {
+            scrollToValue('h', selectedTime.h, 'auto')
+            scrollToValue('m', selectedTime.m, 'auto')
+            if (showSeconds) scrollToValue('s', selectedTime.s, 'auto')
+            panelReady = true
+        })
+    })
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    const classes = $derived(['lm-time-picker', disabled && 'is-disabled', size !== 'default' && `lm-time-picker--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div
+        class="lm-time-picker__input"
+        class:is-focus={visible}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={visible}
+        aria-controls="time-picker-listbox"
+        onclick={handleToggle}
+        onkeydown={handleKeydown}
+    >
+        <span class="lm-time-picker__prefix">
+            <Icon icon={Clock} size={16} />
+        </span>
+        <span class="lm-time-picker__value" class:is-placeholder={!modelValue}>
+            {modelValue || placeholder}
+        </span>
+        {#if clearable && modelValue && !disabled}
+            <button type="button" class="lm-time-picker__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-time-picker__arrow" class:is-open={visible}>
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible}
+        <div class="lm-time-picker__dropdown" id="time-picker-listbox" role="listbox" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-time-picker__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            <div class="lm-time-picker__panel">
+                <ul
+                    bind:this={hourColRef}
+                    class="lm-time-picker__column"
+                    role="group"
+                    aria-label="小时"
+                    onscroll={(e: Event) => handleColumnScroll('h', e.currentTarget as HTMLUListElement)}
+                >
+                    {#each hours as h}
+                        <li class="lm-time-picker__cell" class:is-selected={selectedTime.h === h} role="option" aria-selected={selectedTime.h === h} onmousedown={() => handleSelect('h', h)}>
+                            {h}
+                        </li>
+                    {/each}
+                </ul>
+                <ul
+                    bind:this={minuteColRef}
+                    class="lm-time-picker__column"
+                    role="group"
+                    aria-label="分钟"
+                    onscroll={(e: Event) => handleColumnScroll('m', e.currentTarget as HTMLUListElement)}
+                >
+                    {#each minutes as m}
+                        <li class="lm-time-picker__cell" class:is-selected={selectedTime.m === m} role="option" aria-selected={selectedTime.m === m} onmousedown={() => handleSelect('m', m)}>
+                            {m}
+                        </li>
+                    {/each}
+                </ul>
+                {#if showSeconds}
+                    <ul
+                        bind:this={secondColRef}
+                        class="lm-time-picker__column"
+                        role="group"
+                        aria-label="秒"
+                        onscroll={(e: Event) => handleColumnScroll('s', e.currentTarget as HTMLUListElement)}
+                    >
+                        {#each seconds as s}
+                            <li class="lm-time-picker__cell" class:is-selected={selectedTime.s === s} role="option" aria-selected={selectedTime.s === s} onmousedown={() => handleSelect('s', s)}>
+                                {s}
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
+            <div class="lm-time-picker__footer">
+                <button type="button" class="lm-time-picker__btn lm-time-picker__btn--text" onclick={handleNow}>此刻</button>
+                <button type="button" class="lm-time-picker__btn" onclick={() => (visible = false)}>确定</button>
+            </div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,14 @@
+interface Props {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    readonly?: boolean;
+    format?: string;
+    size?: 'small' | 'default' | 'large';
+    showMenuArrow?: boolean;
+    class?: string;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "modelValue">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

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

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

package/dist/components/TimePicker/index.js

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

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface TimelineProps {
+        children?: Snippet
+        class?: string
+    }
+
+    let { children, class: cls = '', ...attrs }: TimelineProps = $props()
+
+    const classes = $derived(cls ? `lm-timeline ${cls}` : 'lm-timeline')
+</script>
+
+<ul class={classes} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</ul>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface TimelineProps {
+    children?: Snippet;
+    class?: string;
+}
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/Timeline/TimelineItem.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { TimelineItemType, TimelineItemSize, TimelineItemPlacement } from './types'
+
+    interface TimelineItemProps {
+        timestamp?: string
+        hideTimestamp?: boolean
+        placement?: TimelineItemPlacement
+        type?: TimelineItemType
+        color?: string
+        size?: TimelineItemSize
+        hollow?: boolean
+        icon?: Snippet
+        dot?: Snippet
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        timestamp = '',
+        hideTimestamp = false,
+        placement = 'bottom',
+        type = 'primary',
+        color,
+        size = 'normal',
+        hollow = false,
+        icon,
+        dot,
+        children,
+        class: cls = '',
+        ...attrs
+    }: TimelineItemProps = $props()
+
+    const classes = $derived(`lm-timeline-item${cls ? ` ${cls}` : ''}`)
+
+    const nodeClasses = $derived(`lm-timeline-item__node lm-timeline-item__node--${type} lm-timeline-item__node--${size}${hollow ? ' is-hollow' : ''}`)
+
+    const nodeStyle = $derived(color ? `border-color: ${color}; ${hollow ? '' : `background-color: ${color}`}` : undefined)
+</script>
+
+<li class={classes} {...attrs}>
+    <div class="lm-timeline-item__tail"></div>
+
+    <div class={nodeClasses} style={nodeStyle}>
+        {#if dot}
+            {@render dot()}
+        {:else if icon}
+            {@render icon()}
+        {/if}
+    </div>
+
+    <div class="lm-timeline-item__wrapper">
+        {#if !hideTimestamp && placement === 'top'}
+            <div class="lm-timeline-item__timestamp is-top">{timestamp}</div>
+        {/if}
+
+        <div class="lm-timeline-item__content">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+
+        {#if !hideTimestamp && placement === 'bottom'}
+            <div class="lm-timeline-item__timestamp is-bottom">{timestamp}</div>
+        {/if}
+    </div>
+</li>

package/dist/components/Timeline/TimelineItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { TimelineItemType, TimelineItemSize, TimelineItemPlacement } from './types';
+interface TimelineItemProps {
+    timestamp?: string;
+    hideTimestamp?: boolean;
+    placement?: TimelineItemPlacement;
+    type?: TimelineItemType;
+    color?: string;
+    size?: TimelineItemSize;
+    hollow?: boolean;
+    icon?: Snippet;
+    dot?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

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

@@ -0,0 +1,5 @@
+import Timeline from './Timeline.svelte';
+import TimelineItem from './TimelineItem.svelte';
+export { Timeline, TimelineItem };
+export type { TimelineProps, TimelineItemProps, TimelineItemType, TimelineItemSize, TimelineItemPlacement } from './types';
+export default Timeline;

package/dist/components/Timeline/index.js

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

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+/** TimelineItem 类型 */
+export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** TimelineItem 尺寸 */
+export type TimelineItemSize = 'normal' | 'large';
+/** TimelineItem 时间戳位置 */
+export type TimelineItemPlacement = 'top' | 'bottom';
+/** Timeline 属性 */
+export interface TimelineProps {
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** TimelineItem 属性 */
+export interface TimelineItemProps {
+    /** 时间戳 */
+    timestamp?: string;
+    /** 是否隐藏时间戳 */
+    hideTimestamp?: boolean;
+    /** 时间戳位置 */
+    placement?: TimelineItemPlacement;
+    /** 节点类型 */
+    type?: TimelineItemType;
+    /** 节点颜色 */
+    color?: string;
+    /** 节点尺寸 */
+    size?: TimelineItemSize;
+    /** 是否空心 */
+    hollow?: boolean;
+    /** 图标插槽 */
+    icon?: Snippet;
+    /** 自定义节点插槽 */
+    dot?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Timeline/types.js

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