lumen-plus 0.0.1

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+    import { Tooltip } from '../../Tooltip/src'
+    import type { Snippet } from 'svelte'
+
+    interface SliderProps {
+        modelValue?: number | [number, number]
+        min?: number
+        max?: number
+        step?: number
+        range?: boolean
+        disabled?: boolean
+        vertical?: boolean
+        showTooltip?: boolean
+        formatTooltip?: (value: number) => string | number
+        marks?: Record<number, string | Snippet>
+        label?: Snippet
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(0),
+        min = 0,
+        max = 100,
+        step = 1,
+        range = false,
+        disabled = false,
+        vertical = false,
+        showTooltip = true,
+        formatTooltip = (val: number) => val,
+        marks = {},
+        label,
+        class: cls = '',
+        ...attrs
+    }: SliderProps = $props()
+
+    let trackRef: HTMLDivElement | null = $state(null)
+    let isDragging = $state(false)
+    let activeThumb = $state<0 | 1 | null>(null)
+    let trackRect: DOMRect | null = null
+    let rafPending = false
+    let lastMoveX: number | null = null
+    let lastMoveY: number | null = null
+
+    /** 限制值在范围内 */
+    const clamp = (value: number): number => Math.max(min, Math.min(max, value))
+
+    /** 对齐到步长 */
+    const snapToStep = (value: number): number => {
+        const rounded = Math.round((value - min) / step) * step + min
+        return clamp(rounded)
+    }
+
+    /** 内部值 */
+    let currentValue = $state<number | [number, number]>(0)
+
+    // 同步外部值
+    $effect(() => {
+        if (range) {
+            currentValue = Array.isArray(modelValue) ? [clamp(modelValue[0]), clamp(modelValue[1])] : [min, max]
+        } else {
+            currentValue = clamp((modelValue as number) ?? min)
+        }
+    })
+
+    const classes = $derived(
+        `lm-slider${vertical ? ' is-vertical' : ''}${disabled ? ' is-disabled' : ''}${isDragging ? ' is-dragging' : ''}${cls ? ` ${cls}` : ''}`
+    )
+
+    /** 计算百分比 */
+    const percentage = $derived.by(() => {
+        const rangeSize = max - min
+        if (range) {
+            const [minVal, maxVal] = currentValue as [number, number]
+            return [((minVal - min) / rangeSize) * 100, ((maxVal - min) / rangeSize) * 100]
+        }
+        return (((currentValue as number) - min) / rangeSize) * 100
+    })
+
+    /** 更新值 */
+    const updateValue = (val: number | [number, number]): void => {
+        currentValue = val
+        modelValue = val as typeof modelValue
+    }
+
+    /** 根据位置设置值 */
+    const setValueByClientPosition = (clientX: number, clientY: number, thumbIndex?: 0 | 1): void => {
+        if (!trackRef || disabled) return
+
+        const rect = trackRect ?? trackRef.getBoundingClientRect()
+        const ratio = vertical ? Math.min(1, Math.max(0, 1 - (clientY - rect.top) / rect.height)) : Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+
+        const snappedValue = snapToStep(min + ratio * (max - min))
+
+        if (range) {
+            let [minVal, maxVal] = currentValue as [number, number]
+            let targetThumb = thumbIndex ?? activeThumb
+
+            if (targetThumb === null) {
+                const distToMin = Math.abs(snappedValue - minVal)
+                const distToMax = Math.abs(snappedValue - maxVal)
+                targetThumb = distToMin <= distToMax ? 0 : 1
+                activeThumb = targetThumb
+            }
+
+            if (targetThumb === 0) {
+                minVal = clamp(snappedValue)
+                if (minVal > maxVal) {
+                    ;[minVal, maxVal] = [maxVal, minVal]
+                    activeThumb = 1
+                }
+            } else {
+                maxVal = clamp(snappedValue)
+                if (maxVal < minVal) {
+                    ;[minVal, maxVal] = [maxVal, minVal]
+                    activeThumb = 0
+                }
+            }
+            updateValue([minVal, maxVal])
+        } else {
+            updateValue(clamp(snappedValue))
+        }
+    }
+
+    /** 指针按下 */
+    const handlePointerDown = (event: MouseEvent | TouchEvent, thumbIndex?: 0 | 1): void => {
+        if (disabled) return
+        event.preventDefault()
+        isDragging = true
+        trackRect = trackRef?.getBoundingClientRect() ?? null
+        activeThumb = thumbIndex ?? null
+
+        const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
+        const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
+        setValueByClientPosition(clientX, clientY, activeThumb ?? undefined)
+    }
+
+    /** 指针移动 */
+    const handlePointerMove = (event: MouseEvent | TouchEvent): void => {
+        if (!isDragging || disabled) return
+        event.preventDefault()
+
+        const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX
+        const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY
+        lastMoveX = clientX
+        lastMoveY = clientY
+
+        if (!rafPending) {
+            rafPending = true
+            requestAnimationFrame(() => {
+                rafPending = false
+                if (lastMoveX !== null && lastMoveY !== null) {
+                    setValueByClientPosition(lastMoveX, lastMoveY)
+                }
+            })
+        }
+    }
+
+    /** 指针抬起 */
+    const handlePointerUp = (): void => {
+        if (!isDragging) return
+        isDragging = false
+        activeThumb = null
+        trackRect = null
+        rafPending = false
+        lastMoveX = null
+        lastMoveY = null
+    }
+
+    /** 轨道点击 */
+    const handleTrackClick = (event: MouseEvent): void => {
+        if (disabled || isDragging) return
+        setValueByClientPosition(event.clientX, event.clientY)
+    }
+
+    // 全局事件监听
+    $effect(() => {
+        if (!isDragging) return
+
+        const onMouseMove = (e: MouseEvent): void => handlePointerMove(e)
+        const onMouseUp = (): void => handlePointerUp()
+        const onTouchMove = (e: TouchEvent): void => handlePointerMove(e)
+        const onTouchEnd = (): void => handlePointerUp()
+
+        window.addEventListener('mousemove', onMouseMove)
+        window.addEventListener('mouseup', onMouseUp)
+        window.addEventListener('touchmove', onTouchMove, { passive: false })
+        window.addEventListener('touchend', onTouchEnd)
+
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove)
+            window.removeEventListener('mouseup', onMouseUp)
+            window.removeEventListener('touchmove', onTouchMove)
+            window.removeEventListener('touchend', onTouchEnd)
+        }
+    })
+
+    /** 标记位置 */
+    const markPositions = $derived.by(() => {
+        const entries = Object.entries(marks)
+        if (entries.length === 0) return []
+        const rangeSize = max - min
+        return entries.map(([value, label]) => {
+            const numValue = Number(value)
+            return { value: numValue, label, position: ((numValue - min) / rangeSize) * 100 }
+        })
+    })
+</script>
+
+<div {...attrs} class={classes}>
+    <div bind:this={trackRef} class="lm-slider__track" role="presentation" onclick={handleTrackClick}>
+        {#if range}
+            {@const percentages = percentage as [number, number]}
+            {@const [startPercent, endPercent] = percentages}
+            <div class="lm-slider__fill" style={vertical ? `bottom: ${startPercent}%; height: ${endPercent - startPercent}%` : `left: ${startPercent}%; width: ${endPercent - startPercent}%`}></div>
+
+            {#each [0, 1] as thumbIndex (thumbIndex)}
+                {@const thumbPercent = percentages[thumbIndex]}
+                {@const thumbValue = (currentValue as [number, number])[thumbIndex]}
+                <div
+                    class="lm-slider__thumb"
+                    class:is-active={activeThumb === thumbIndex}
+                    style={vertical ? `bottom: ${thumbPercent}%` : `left: ${thumbPercent}%`}
+                    role="slider"
+                    aria-valuemin={min}
+                    aria-valuemax={max}
+                    aria-valuenow={thumbValue}
+                    aria-disabled={disabled || undefined}
+                    aria-label={thumbIndex === 0 ? 'Minimum value' : 'Maximum value'}
+                    tabindex={disabled ? -1 : 0}
+                    onmousedown={(e: MouseEvent) => handlePointerDown(e, thumbIndex as 0 | 1)}
+                    ontouchstart={(e: TouchEvent) => handlePointerDown(e, thumbIndex as 0 | 1)}
+                >
+                    <Tooltip
+                        content={String(formatTooltip(thumbValue))}
+                        placement={vertical ? 'right' : 'top'}
+                        visible={showTooltip && isDragging && activeThumb === thumbIndex ? true : undefined}
+                        disabled={!showTooltip}
+                        style="width: 100%; height: 100%; display: block;"
+                    >
+                        <div class="lm-slider__thumb-inner"></div>
+                    </Tooltip>
+                </div>
+            {/each}
+        {:else}
+            {@const fillPercent = percentage as number}
+            {@const currentVal = currentValue as number}
+            <div class="lm-slider__fill" style={vertical ? `height: ${fillPercent}%` : `width: ${fillPercent}%`}></div>
+
+            <div
+                class="lm-slider__thumb"
+                class:is-active={isDragging}
+                style={vertical ? `bottom: ${fillPercent}%` : `left: ${fillPercent}%`}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentVal}
+                aria-disabled={disabled || undefined}
+                aria-label="Slider value"
+                tabindex={disabled ? -1 : 0}
+                onmousedown={handlePointerDown}
+                ontouchstart={handlePointerDown}
+            >
+                <Tooltip
+                    content={String(formatTooltip(currentVal))}
+                    placement={vertical ? 'right' : 'top'}
+                    visible={showTooltip && isDragging ? true : undefined}
+                    disabled={!showTooltip}
+                    style="width: 100%; height: 100%; display: block;"
+                >
+                    <div class="lm-slider__thumb-inner"></div>
+                </Tooltip>
+            </div>
+        {/if}
+    </div>
+
+    {#if markPositions.length > 0}
+        <div class="lm-slider__marks">
+            {#each markPositions as mark (mark.value)}
+                <div class="lm-slider__mark" style={vertical ? `bottom: ${mark.position}%` : `left: ${mark.position}%`}>
+                    <div class="lm-slider__mark-point"></div>
+                    <div class="lm-slider__mark-label">
+                        {#if typeof mark.label === 'string'}
+                            {mark.label}
+                        {:else}
+                            {@render mark.label()}
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface SliderProps {
+    modelValue?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    disabled?: boolean;
+    vertical?: boolean;
+    showTooltip?: boolean;
+    formatTooltip?: (value: number) => string | number;
+    marks?: Record<number, string | Snippet>;
+    label?: Snippet;
+    class?: string;
+}
+declare const Slider: import("svelte").Component<SliderProps, {}, "modelValue">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

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

package/dist/components/Slider/index.js

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

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+/** Slider 属性 */
+export interface SliderProps {
+    /** 绑定值 */
+    modelValue?: number | [number, number];
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步长 */
+    step?: number;
+    /** 是否为范围选择 */
+    range?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否垂直 */
+    vertical?: boolean;
+    /** 是否显示提示 */
+    showTooltip?: boolean;
+    /** 格式化提示内容 */
+    formatTooltip?: (value: number) => string | number;
+    /** 标记 */
+    marks?: Record<number, string | Snippet>;
+    /** 标签 */
+    label?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Slider/types.js

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

package/dist/components/Space/Space.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { SpaceDirection, SpaceAlign, SpaceJustify, SpaceSize } from './types'
+
+    interface SpaceProps {
+        direction?: SpaceDirection
+        align?: SpaceAlign
+        justify?: SpaceJustify
+        size?: SpaceSize | number | [number, number]
+        wrap?: boolean
+        fill?: boolean
+        fillRatio?: number
+        spacer?: string | Snippet
+        children?: Snippet
+        class?: string
+    }
+
+    let { direction = 'horizontal', align, justify, size = 'small', wrap = false, fill = false, fillRatio, spacer, children, class: cls = '', ...attrs }: SpaceProps = $props()
+
+    const sizeMap: Record<string, number> = { small: 8, default: 12, large: 16 }
+    
+    const gapValue = $derived.by(() => {
+        if (Array.isArray(size)) {
+            return `${size[1]}px ${size[0]}px`
+        }
+        const g = typeof size === 'number' ? size : sizeMap[size] || 8
+        return `${g}px`
+    })
+
+    const alignValue = $derived(align || (direction === 'horizontal' ? 'center' : 'stretch'))
+
+    const justifyMap: Record<string, string> = {
+        start: 'flex-start',
+        end: 'flex-end',
+        center: 'center',
+        'space-around': 'space-around',
+        'space-between': 'space-between',
+        'space-evenly': 'space-evenly'
+    }
+
+    const justifyValue = $derived(justify ? (justifyMap[justify] || justify) : undefined)
+
+    const classes = $derived(
+        `lm-space lm-space--${direction}${wrap ? ' is-wrap' : ''}${fill ? ' is-fill' : ''}${cls ? ` ${cls}` : ''}`
+    )
+</script>
+
+<div
+    class={classes}
+    style:--lm-space-gap={gapValue}
+    style:--lm-space-align={alignValue}
+    style:--lm-space-justify={justifyValue}
+    style:--lm-space-fill-ratio={fillRatio}
+    {...attrs}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { SpaceDirection, SpaceAlign, SpaceJustify, SpaceSize } from './types';
+interface SpaceProps {
+    direction?: SpaceDirection;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    size?: SpaceSize | number | [number, number];
+    wrap?: boolean;
+    fill?: boolean;
+    fillRatio?: number;
+    spacer?: string | Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Space: import("svelte").Component<SpaceProps, {}, "">;
+type Space = ReturnType<typeof Space>;
+export default Space;
+//# sourceMappingURL=Space.svelte.d.ts.map

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

@@ -0,0 +1,4 @@
+import Space from './Space.svelte';
+export { Space };
+export type { SpaceProps, SpaceDirection, SpaceAlign, SpaceSize } from './types';
+export default Space;

package/dist/components/Space/index.js

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

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Space 方向 */
+export type SpaceDirection = 'horizontal' | 'vertical';
+/** Space 对齐方式（交叉轴） */
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+/** Space 主轴对齐方式 */
+export type SpaceJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+/** Space 尺寸 */
+export type SpaceSize = 'small' | 'default' | 'large';
+/** Space 属性 */
+export interface SpaceProps {
+    /** 方向 */
+    direction?: SpaceDirection;
+    /** 交叉轴对齐方式 */
+    align?: SpaceAlign;
+    /** 主轴对齐方式 */
+    justify?: SpaceJustify;
+    /** 间距大小，可以是预设或自定义数值，也可以是 [水平, 垂直] 数组 */
+    size?: SpaceSize | number | [number, number];
+    /** 是否换行 */
+    wrap?: boolean;
+    /** 是否填充父容器 */
+    fill?: boolean;
+    /** 子元素是否自动填充 */
+    fillRatio?: number;
+    /** 分隔符 */
+    spacer?: string | Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Space/types.js

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

package/dist/components/Statistic/Countdown.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
+
+    interface CountdownProps {
+        title?: string | Snippet
+        value: number | Date
+        format?: string
+        prefix?: string | Snippet
+        suffix?: string | Snippet
+        valueStyle?: string
+        onfinish?: () => void
+        class?: string
+    }
+
+    let { title, value, format = 'HH:mm:ss', prefix, suffix, valueStyle = '', onfinish, class: cls = '', ...attrs }: CountdownProps = $props()
+
+    let remaining = $state(0)
+    let timer: ReturnType<typeof setInterval> | null = null
+
+    const targetTime = $derived(value instanceof Date ? value.getTime() : value)
+
+    const updateRemaining = (): void => {
+        const now = Date.now()
+        remaining = Math.max(0, targetTime - now)
+
+        if (remaining === 0) {
+            stopTimer()
+            onfinish?.()
+        }
+    }
+
+    const startTimer = (): void => {
+        updateRemaining()
+        timer = setInterval(updateRemaining, 1000)
+    }
+
+    const stopTimer = (): void => {
+        if (timer) {
+            clearInterval(timer)
+            timer = null
+        }
+    }
+
+    const formatTime = $derived.by(() => {
+        const totalSeconds = Math.floor(remaining / 1000)
+        const days = Math.floor(totalSeconds / 86400)
+        const hours = Math.floor((totalSeconds % 86400) / 3600)
+        const minutes = Math.floor((totalSeconds % 3600) / 60)
+        const seconds = totalSeconds % 60
+
+        return format
+            .replace('DD', String(days).padStart(2, '0'))
+            .replace('D', String(days))
+            .replace('HH', String(hours).padStart(2, '0'))
+            .replace('H', String(hours))
+            .replace('mm', String(minutes).padStart(2, '0'))
+            .replace('m', String(minutes))
+            .replace('ss', String(seconds).padStart(2, '0'))
+            .replace('s', String(seconds))
+    })
+
+    onMount(() => {
+        startTimer()
+    })
+
+    onDestroy(() => {
+        stopTimer()
+    })
+
+    const classes = $derived(`lm-statistic lm-countdown${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title}
+        <div class="lm-statistic__title">
+            {#if typeof title === 'string'}
+                {title}
+            {:else}
+                {@render title()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-statistic__content" style={valueStyle}>
+        {#if prefix}
+            <span class="lm-statistic__prefix">
+                {#if typeof prefix === 'string'}
+                    {prefix}
+                {:else}
+                    {@render prefix()}
+                {/if}
+            </span>
+        {/if}
+
+        <span class="lm-statistic__value">{formatTime}</span>
+
+        {#if suffix}
+            <span class="lm-statistic__suffix">
+                {#if typeof suffix === 'string'}
+                    {suffix}
+                {:else}
+                    {@render suffix()}
+                {/if}
+            </span>
+        {/if}
+    </div>
+</div>

package/dist/components/Statistic/Countdown.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface CountdownProps {
+    title?: string | Snippet;
+    value: number | Date;
+    format?: string;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    valueStyle?: string;
+    onfinish?: () => void;
+    class?: string;
+}
+declare const Countdown: import("svelte").Component<CountdownProps, {}, "">;
+type Countdown = ReturnType<typeof Countdown>;
+export default Countdown;

package/dist/components/Statistic/Statistic.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface StatisticProps {
+        title?: string | Snippet
+        value?: number | string
+        precision?: number
+        prefix?: string | Snippet
+        suffix?: string | Snippet
+        groupSeparator?: string
+        decimalSeparator?: string
+        valueStyle?: string
+        class?: string
+    }
+
+    let { title, value = 0, precision, prefix, suffix, groupSeparator = ',', decimalSeparator = '.', valueStyle = '', class: cls = '', ...attrs }: StatisticProps = $props()
+
+    const formatValue = $derived.by(() => {
+        if (typeof value === 'string') return value
+        let num = precision !== undefined ? Number(value.toFixed(precision)) : value
+        const parts = num.toString().split('.')
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator)
+        return parts.join(decimalSeparator)
+    })
+
+    const classes = $derived(`lm-statistic${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title}
+        <div class="lm-statistic__title">
+            {#if typeof title === 'string'}
+                {title}
+            {:else}
+                {@render title()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-statistic__content" style={valueStyle}>
+        {#if prefix}
+            <span class="lm-statistic__prefix">
+                {#if typeof prefix === 'string'}
+                    {prefix}
+                {:else}
+                    {@render prefix()}
+                {/if}
+            </span>
+        {/if}
+
+        <span class="lm-statistic__value">{formatValue}</span>
+
+        {#if suffix}
+            <span class="lm-statistic__suffix">
+                {#if typeof suffix === 'string'}
+                    {suffix}
+                {:else}
+                    {@render suffix()}
+                {/if}
+            </span>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface StatisticProps {
+    title?: string | Snippet;
+    value?: number | string;
+    precision?: number;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    groupSeparator?: string;
+    decimalSeparator?: string;
+    valueStyle?: string;
+    class?: string;
+}
+declare const Statistic: import("svelte").Component<StatisticProps, {}, "">;
+type Statistic = ReturnType<typeof Statistic>;
+export default Statistic;