lumen-plus 0.0.1

package/dist/components/Tooltip/OverflowTooltip.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { OverflowTooltipProps, TooltipPlacement, TooltipEffect } from './types'
+
+    let {
+        content,
+        text,
+        placement = 'top',
+        disabled = false,
+        showArrow = true,
+        effect: tooltipEffect = 'dark',
+        children,
+        class: cls = '',
+        ...attrs
+    }: OverflowTooltipProps = $props()
+
+    let isOverflowing = $state(false)
+    let tooltipVisible = $state(false)
+    let textRef = $state<HTMLElement | null>(null)
+    let tooltipTimeout: ReturnType<typeof setTimeout> | null = null
+
+    const displayContent = $derived(content ?? String(text ?? ''))
+    const displayText = $derived(String(text ?? ''))
+
+    const checkOverflow = () => {
+        if (textRef) {
+            isOverflowing = textRef.scrollWidth > textRef.clientWidth
+        }
+    }
+
+    const handleMouseEnter = () => {
+        if (disabled) return
+        checkOverflow()
+        if (!isOverflowing) return
+
+        tooltipTimeout = setTimeout(() => {
+            tooltipVisible = true
+        }, 300)
+    }
+
+    const handleMouseLeave = () => {
+        if (tooltipTimeout) {
+            clearTimeout(tooltipTimeout)
+            tooltipTimeout = null
+        }
+        tooltipVisible = false
+    }
+
+    // Re-check on resize or content change
+    $effect(() => {
+        if (textRef) {
+            const observer = new ResizeObserver(() => {
+                checkOverflow()
+            })
+            observer.observe(textRef)
+            return () => observer.disconnect()
+        }
+    })
+
+    const tooltipClasses = $derived(`lm-tooltip__popper is-${placement}${showArrow ? ' has-arrow' : ''}${tooltipEffect === 'light' ? ' is-light' : ''}`)
+</script>
+
+<div {...attrs} class="lm-overflow-tooltip lm-tooltip{cls ? ` ${cls}` : ''}" class:is-visible={tooltipVisible} onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
+    {#if children}
+        <div class="lm-overflow-tooltip__text" bind:this={textRef}>
+            {@render children()}
+        </div>
+    {:else}
+        <span class="lm-overflow-tooltip__text" bind:this={textRef}>
+            {displayText}
+        </span>
+    {/if}
+    {#if tooltipVisible && displayContent}
+        <div class={tooltipClasses} role="tooltip">
+            {displayContent}
+            {#if showArrow}
+                <div class="lm-tooltip__arrow"></div>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/components/Tooltip/OverflowTooltip.svelte.d.ts

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

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface TooltipProps {
+        content?: string
+        placement?: 'top' | 'bottom' | 'left' | 'right'
+        trigger?: 'hover' | 'click'
+        disabled?: boolean
+        showArrow?: boolean
+        effect?: 'dark' | 'light'
+        visible?: boolean
+        children?: Snippet
+        class?: string
+        [key: string]: any
+    }
+
+    let { content = '', placement = 'top', trigger = 'hover', disabled = false, showArrow = true, effect = 'dark', visible = undefined, children, class: cls = '', ...attrs }: TooltipProps = $props()
+
+    let internalVisible = $state(false)
+    let isVisible = $derived(visible !== undefined ? visible : internalVisible)
+
+    const handleMouseEnter = (): void => {
+        if (trigger === 'hover' && !disabled) internalVisible = true
+    }
+
+    const handleMouseLeave = (): void => {
+        if (trigger === 'hover') internalVisible = false
+    }
+
+    const handleClick = (): void => {
+        if (trigger === 'click' && !disabled) internalVisible = !internalVisible
+    }
+
+    const classes = $derived(`lm-tooltip${effect === 'light' ? ' is-light' : ''}${isVisible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const tooltipClasses = $derived(`lm-tooltip__popper is-${placement}${showArrow ? ' has-arrow' : ''}`)
+</script>
+
+<div {...attrs} class={classes} onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave} onclick={handleClick}>
+    {#if children}
+        {@render children()}
+    {/if}
+    {#if isVisible && content}
+        <div class={tooltipClasses} role="tooltip">
+            {content}
+            {#if showArrow}
+                <div class="lm-tooltip__arrow"></div>
+            {/if}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface TooltipProps {
+    content?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    trigger?: 'hover' | 'click';
+    disabled?: boolean;
+    showArrow?: boolean;
+    effect?: 'dark' | 'light';
+    visible?: boolean;
+    children?: Snippet;
+    class?: string;
+    [key: string]: any;
+}
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,6 @@
+import Tooltip from './Tooltip.svelte';
+import OverflowTooltip from './OverflowTooltip.svelte';
+export { Tooltip };
+export { OverflowTooltip };
+export type { TooltipProps, TooltipPlacement, TooltipTrigger, TooltipEffect, OverflowTooltipProps } from './types';
+export default Tooltip;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,5 @@
+import Tooltip from './Tooltip.svelte';
+import OverflowTooltip from './OverflowTooltip.svelte';
+export { Tooltip };
+export { OverflowTooltip };
+export default Tooltip;

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

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+/** Tooltip 位置 */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+/** Tooltip 触发方式 */
+export type TooltipTrigger = 'hover' | 'click';
+/** Tooltip 效果 */
+export type TooltipEffect = 'dark' | 'light';
+/** Tooltip 属性 */
+export interface TooltipProps {
+    /** 提示内容 */
+    content?: string;
+    /** 位置 */
+    placement?: TooltipPlacement;
+    /** 触发方式 */
+    trigger?: TooltipTrigger;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 效果 */
+    effect?: TooltipEffect;
+    /** 是否可见 */
+    visible?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}
+/** OverflowTooltip 属性 */
+export interface OverflowTooltipProps {
+    /** Tooltip 内容（默认取 text） */
+    content?: string;
+    /** 要展示的文本（不传 children 时使用） */
+    text?: string | number | null | undefined;
+    /** 位置 */
+    placement?: TooltipPlacement;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 效果 */
+    effect?: TooltipEffect;
+    /** 子内容（用于自定义渲染，仍会做溢出检测） */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/components/Tooltip/types.js

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

package/dist/components/Transfer/Transfer.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+    import type { TransferItem, TransferDirection } from './types'
+    import Icon from '../Icon'
+    import { ChevronLeft, ChevronRight } from 'lucide'
+    import Checkbox from '../../Checkbox/src'
+
+    interface TransferProps {
+        data?: TransferItem[]
+        modelValue?: (string | number)[]
+        filterable?: boolean
+        filterPlaceholder?: string
+        titles?: [string, string]
+        buttonTexts?: [string, string]
+        disabled?: boolean
+        class?: string
+    }
+
+    let {
+        data = [],
+        modelValue = $bindable([]),
+        filterable = false,
+        filterPlaceholder = '请输入搜索内容',
+        titles = ['列表 1', '列表 2'],
+        buttonTexts = ['', ''],
+        disabled = false,
+        class: cls = '',
+        ...attrs
+    }: TransferProps = $props()
+
+    let leftChecked = $state<Set<string | number>>(new Set())
+    let rightChecked = $state<Set<string | number>>(new Set())
+    let leftFilter = $state('')
+    let rightFilter = $state('')
+
+    // 优化: 直接使用表达式，避免函数调用开销
+    const leftData = $derived(data.filter((item) => !modelValue.includes(item.key)))
+    const rightData = $derived(data.filter((item) => modelValue.includes(item.key)))
+    const filteredLeftData = $derived(leftFilter ? leftData.filter((item) => item.label.toLowerCase().includes(leftFilter.toLowerCase())) : leftData)
+    const filteredRightData = $derived(rightFilter ? rightData.filter((item) => item.label.toLowerCase().includes(rightFilter.toLowerCase())) : rightData)
+
+    // 优化: 缓存 enabledItems 计算
+    const leftEnabledItems = $derived(filteredLeftData.filter((item) => !item.disabled))
+    const rightEnabledItems = $derived(filteredRightData.filter((item) => !item.disabled))
+
+    const isAllLeftChecked = $derived(leftEnabledItems.length > 0 && leftEnabledItems.every((item) => leftChecked.has(item.key)))
+    const isAllRightChecked = $derived(rightEnabledItems.length > 0 && rightEnabledItems.every((item) => rightChecked.has(item.key)))
+
+    const leftCheckedCount = $derived(leftEnabledItems.filter((item) => leftChecked.has(item.key)).length)
+    const rightCheckedCount = $derived(rightEnabledItems.filter((item) => rightChecked.has(item.key)).length)
+
+    const isLeftIndeterminate = $derived(leftCheckedCount > 0 && leftCheckedCount < leftEnabledItems.length)
+    const isRightIndeterminate = $derived(rightCheckedCount > 0 && rightCheckedCount < rightEnabledItems.length)
+
+    const classes = $derived(`lm-transfer${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleCheck = (direction: TransferDirection, key: string | number, checked: boolean): void => {
+        const targetSet = direction === 'left' ? leftChecked : rightChecked
+        const newSet = new Set(targetSet)
+        checked ? newSet.add(key) : newSet.delete(key)
+        direction === 'left' ? (leftChecked = newSet) : (rightChecked = newSet)
+    }
+
+    const handleCheckAll = (direction: TransferDirection, checked: boolean): void => {
+        const items = direction === 'left' ? leftEnabledItems : rightEnabledItems
+        const newSet = checked ? new Set(items.map((item) => item.key)) : new Set<string | number>()
+        direction === 'left' ? (leftChecked = newSet) : (rightChecked = newSet)
+    }
+
+    const moveToRight = (): void => {
+        if (leftChecked.size === 0 || disabled) return
+        modelValue = [...modelValue, ...leftChecked]
+        leftChecked = new Set()
+    }
+
+    const moveToLeft = (): void => {
+        if (rightChecked.size === 0 || disabled) return
+        modelValue = modelValue.filter((key) => !rightChecked.has(key))
+        rightChecked = new Set()
+    }
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-transfer__panel">
+        <div class="lm-transfer__header">
+            <Checkbox checked={isAllLeftChecked} indeterminate={isLeftIndeterminate} disabled={disabled || filteredLeftData.length === 0} onchange={(c: boolean) => handleCheckAll('left', c)} />
+            <span class="lm-transfer__title">{titles[0]}</span>
+            <span class="lm-transfer__count">{leftChecked.size}/{filteredLeftData.length}</span>
+        </div>
+        {#if filterable}
+            <div class="lm-transfer__filter">
+                <input type="text" class="lm-transfer__filter-input" placeholder={filterPlaceholder} bind:value={leftFilter} {disabled} />
+            </div>
+        {/if}
+        <div class="lm-transfer__body">
+            {#if filteredLeftData.length > 0}
+                <ul class="lm-transfer__list">
+                    {#each filteredLeftData as item (item.key)}
+                        <li class="lm-transfer__item{leftChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
+                            <Checkbox checked={leftChecked.has(item.key)} disabled={disabled || item.disabled} onchange={(c: boolean) => handleCheck('left', item.key, c)} label={item.label} />
+                        </li>
+                    {/each}
+                </ul>
+            {:else}
+                <div class="lm-transfer__empty">无数据</div>
+            {/if}
+        </div>
+    </div>
+
+    <div class="lm-transfer__buttons">
+        <button type="button" class="lm-transfer__button" disabled={disabled || leftChecked.size === 0} onclick={moveToRight}>
+            {#if buttonTexts[1]}<span>{buttonTexts[1]}</span>{/if}
+            <Icon icon={ChevronRight} size={14} />
+        </button>
+        <button type="button" class="lm-transfer__button" disabled={disabled || rightChecked.size === 0} onclick={moveToLeft}>
+            <Icon icon={ChevronLeft} size={14} />
+            {#if buttonTexts[0]}<span>{buttonTexts[0]}</span>{/if}
+        </button>
+    </div>
+
+    <div class="lm-transfer__panel">
+        <div class="lm-transfer__header">
+            <Checkbox checked={isAllRightChecked} indeterminate={isRightIndeterminate} disabled={disabled || filteredRightData.length === 0} onchange={(c: boolean) => handleCheckAll('right', c)} />
+            <span class="lm-transfer__title">{titles[1]}</span>
+            <span class="lm-transfer__count">{rightChecked.size}/{filteredRightData.length}</span>
+        </div>
+        {#if filterable}
+            <div class="lm-transfer__filter">
+                <input type="text" class="lm-transfer__filter-input" placeholder={filterPlaceholder} bind:value={rightFilter} {disabled} />
+            </div>
+        {/if}
+        <div class="lm-transfer__body">
+            {#if filteredRightData.length > 0}
+                <ul class="lm-transfer__list">
+                    {#each filteredRightData as item (item.key)}
+                        <li class="lm-transfer__item{rightChecked.has(item.key) ? ' is-checked' : ''}{item.disabled ? ' is-disabled' : ''}">
+                            <Checkbox checked={rightChecked.has(item.key)} disabled={disabled || item.disabled} onchange={(c: boolean) => handleCheck('right', item.key, c)} label={item.label} />
+                        </li>
+                    {/each}
+                </ul>
+            {:else}
+                <div class="lm-transfer__empty">无数据</div>
+            {/if}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+import type { TransferItem } from './types';
+interface TransferProps {
+    data?: TransferItem[];
+    modelValue?: (string | number)[];
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    titles?: [string, string];
+    buttonTexts?: [string, string];
+    disabled?: boolean;
+    class?: string;
+}
+declare const Transfer: import("svelte").Component<TransferProps, {}, "modelValue">;
+type Transfer = ReturnType<typeof Transfer>;
+export default Transfer;

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

@@ -0,0 +1,4 @@
+import Transfer from './Transfer.svelte';
+export default Transfer;
+export { Transfer };
+export type { TransferProps, TransferItem, TransferDirection } from './types';

package/dist/components/Transfer/index.js

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

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

@@ -0,0 +1,16 @@
+export interface TransferItem {
+    key: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export type TransferDirection = 'left' | 'right';
+export interface TransferProps {
+    data?: TransferItem[];
+    modelValue?: (string | number)[];
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    titles?: [string, string];
+    buttonTexts?: [string, string];
+    disabled?: boolean;
+    class?: string;
+}

package/dist/components/Transfer/types.js

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

package/dist/components/Tree/Tree.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import type { TreeNode as TreeNodeType } from './types'
+    import { onMount } from 'svelte'
+    import TreeNode from './TreeNode.svelte'
+
+    interface TreeProps {
+        data?: TreeNodeType[]
+        showCheckbox?: boolean
+        defaultExpandedKeys?: (string | number)[]
+        defaultCheckedKeys?: (string | number)[]
+        defaultExpandAll?: boolean
+        highlightCurrent?: boolean
+        accordion?: boolean
+        expandOnClickNode?: boolean
+        onnodeclick?: (node: TreeNodeType) => void
+        oncheck?: (checkedKeys: (string | number)[], node: TreeNodeType) => void
+        class?: string
+    }
+
+    let {
+        data = [],
+        showCheckbox = false,
+        defaultExpandedKeys = [],
+        defaultCheckedKeys = [],
+        defaultExpandAll = false,
+        highlightCurrent = false,
+        accordion = false,
+        expandOnClickNode = true,
+        onnodeclick,
+        oncheck,
+        class: cls = '',
+        ...attrs
+    }: TreeProps = $props()
+
+    let expandedKeys = $state(new Set<string | number>())
+    let checkedKeys = $state(new Set<string | number>())
+    let currentKey = $state<string | number | null>(null)
+    let reduceMotion = $state(false)
+
+    const expandCollapseDuration = $derived(reduceMotion ? 0 : 180)
+
+    // 初始化展开所有
+    const getAllKeys = (nodes: TreeNodeType[]): (string | number)[] => {
+        const keys: (string | number)[] = []
+        const traverse = (items: TreeNodeType[]): void => {
+            items.forEach((item) => {
+                keys.push(item.id)
+                if (item.children) traverse(item.children)
+            })
+        }
+        traverse(nodes)
+        return keys
+    }
+
+    const buildParentMap = (nodes: TreeNodeType[]): Map<string | number, string | number | null> => {
+        const map = new Map<string | number, string | number | null>()
+        const traverse = (items: TreeNodeType[], parentId: string | number | null): void => {
+            for (const item of items) {
+                map.set(item.id, parentId)
+                if (item.children && item.children.length > 0) {
+                    traverse(item.children, item.id)
+                }
+            }
+        }
+        traverse(nodes, null)
+        return map
+    }
+
+    const parentMap = $derived.by(() => buildParentMap(data))
+
+    // 初始化默认展开和选中的节点
+    $effect(() => {
+        if (defaultExpandAll && data.length > 0) {
+            expandedKeys = new Set(getAllKeys(data))
+        } else if (defaultExpandedKeys.length > 0) {
+            expandedKeys = new Set(defaultExpandedKeys)
+        }
+    })
+
+    $effect(() => {
+        if (defaultCheckedKeys.length > 0) {
+            checkedKeys = new Set(defaultCheckedKeys)
+        }
+    })
+
+    const handleToggle = (node: TreeNodeType): void => {
+        const newKeys = new Set(expandedKeys)
+        if (newKeys.has(node.id)) {
+            newKeys.delete(node.id)
+        } else {
+            if (accordion) {
+                // 手风琴模式：关闭同级其他节点（同一 parent 下）
+                const parentId = parentMap.get(node.id) ?? null
+                for (const key of newKeys) {
+                    const keyParent = parentMap.get(key) ?? null
+                    if (keyParent === parentId) {
+                        newKeys.delete(key)
+                    }
+                }
+            }
+            newKeys.add(node.id)
+        }
+        expandedKeys = newKeys
+    }
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    const handleNodeClick = (node: TreeNodeType): void => {
+        if (highlightCurrent) currentKey = node.id
+        onnodeclick?.(node)
+    }
+
+    const handleCheck = (node: TreeNodeType, checked: boolean): void => {
+        const newKeys = new Set(checkedKeys)
+        if (checked) {
+            newKeys.add(node.id)
+        } else {
+            newKeys.delete(node.id)
+        }
+        checkedKeys = newKeys
+        oncheck?.(Array.from(newKeys), node)
+    }
+
+    const classes = $derived(`lm-tree${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} role="tree" {...attrs}>
+    {#each data as node (node.id)}
+        <TreeNode
+            {node}
+            level={0}
+            {showCheckbox}
+            {expandedKeys}
+            {checkedKeys}
+            {currentKey}
+            {accordion}
+            {expandOnClickNode}
+            {expandCollapseDuration}
+            onnodeclick={handleNodeClick}
+            ontoggle={handleToggle}
+            oncheck={handleCheck}
+        />
+    {/each}
+</div>

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

@@ -0,0 +1,17 @@
+import type { TreeNode as TreeNodeType } from './types';
+interface TreeProps {
+    data?: TreeNodeType[];
+    showCheckbox?: boolean;
+    defaultExpandedKeys?: (string | number)[];
+    defaultCheckedKeys?: (string | number)[];
+    defaultExpandAll?: boolean;
+    highlightCurrent?: boolean;
+    accordion?: boolean;
+    expandOnClickNode?: boolean;
+    onnodeclick?: (node: TreeNodeType) => void;
+    oncheck?: (checkedKeys: (string | number)[], node: TreeNodeType) => void;
+    class?: string;
+}
+declare const Tree: import("svelte").Component<TreeProps, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;