lumen-plus 0.0.1

package/dist/components/TreeSelect/TreeSelect.svelte

@@ -0,0 +1,656 @@
+<script lang="ts">
+    import { onMount, onDestroy, tick } from 'svelte'
+    import { slide } from 'svelte/transition'
+    import { createDropdownTransition } from '../../utils'
+    import Icon from '../Icon'
+    import Checkbox from '../../Checkbox/src'
+    import Tag from '../../Tag/src'
+    import { ChevronDown, ChevronRight, X, Check, Loader2 } from 'lucide'
+    import type { TreeSelectNode, TreeSelectProps } from './types'
+
+    let {
+        modelValue = $bindable(),
+        data = [],
+        placeholder = '请选择',
+        disabled = false,
+        clearable = false,
+        multiple = false,
+        collapseTags = false,
+        maxCollapseTags = 1,
+        size = 'default',
+        filterable = false,
+        filterMethod,
+        noMatchText = '无匹配数据',
+        noDataText = '暂无数据',
+        showCheckbox = false,
+        checkStrictly = false,
+        checkOnClickNode = false,
+        defaultExpandAll = false,
+        defaultExpandedKeys = [],
+        leafOnly = true,
+        props: propsConfig,
+        highlightCurrent = false,
+        lazy = false,
+        load,
+        showMenuArrow = true,
+        onvisiblechange,
+        onchange,
+        onnodeclick,
+        onclear,
+        onremove,
+        renderLabel,
+        class: cls = '',
+        ...attrs
+    }: TreeSelectProps = $props()
+
+    // 属性映射
+    const getNodeValue = (node: TreeSelectNode): string | number => {
+        const key = propsConfig?.value ?? 'value'
+        return (node as Record<string, unknown>)[key] as string | number
+    }
+
+    const getNodeLabel = (node: TreeSelectNode): string => {
+        const key = propsConfig?.label ?? 'label'
+        return String((node as Record<string, unknown>)[key] ?? '')
+    }
+
+    const getNodeChildren = (node: TreeSelectNode): TreeSelectNode[] | undefined => {
+        const key = propsConfig?.children ?? 'children'
+        return (node as Record<string, unknown>)[key] as TreeSelectNode[] | undefined
+    }
+
+    const isNodeDisabled = (node: TreeSelectNode): boolean => {
+        const key = propsConfig?.disabled ?? 'disabled'
+        return Boolean((node as Record<string, unknown>)[key])
+    }
+
+    const isNodeLeaf = (node: TreeSelectNode): boolean => {
+        const key = propsConfig?.isLeaf ?? 'isLeaf'
+        const children = getNodeChildren(node)
+        if ((node as Record<string, unknown>)[key] !== undefined) {
+            return Boolean((node as Record<string, unknown>)[key])
+        }
+        return !children || children.length === 0
+    }
+
+    // 状态
+    let visible = $state(false)
+    let filterQuery = $state('')
+    let containerRef: HTMLDivElement | null = $state(null)
+    let inputRef: HTMLInputElement | null = $state(null)
+    let expandedKeys = $state(new Set<string | number>())
+    let loadingKeys = $state(new Set<string | number>())
+    let currentKey = $state<string | number | null>(null)
+    let loadedLazyData = $state(new Map<string | number, TreeSelectNode[]>())
+    let reduceMotion = $state(false)
+
+    const expandCollapseDuration = $derived(reduceMotion ? 0 : 180)
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    // 计算选中值数组
+    const selectedValues = $derived.by((): (string | number)[] => {
+        if (multiple) return Array.isArray(modelValue) ? modelValue : []
+        return modelValue !== undefined && modelValue !== null && !Array.isArray(modelValue) ? [modelValue] : []
+    })
+
+    // 构建扁平节点映射
+    const flattenNodes = $derived.by(() => {
+        const map = new Map<string | number, TreeSelectNode>()
+        const traverse = (nodes: TreeSelectNode[]): void => {
+            for (const node of nodes) {
+                map.set(getNodeValue(node), node)
+                const children = getNodeChildren(node)
+                if (children) traverse(children)
+            }
+        }
+        traverse(data)
+        // 也遍历懒加载的数据
+        loadedLazyData.forEach((children) => traverse(children))
+        return map
+    })
+
+    // 查找节点
+    const findNode = (value: string | number): TreeSelectNode | undefined => {
+        return flattenNodes.get(value)
+    }
+
+    // 获取所有 key
+    const getAllKeys = (nodes: TreeSelectNode[]): (string | number)[] => {
+        const keys: (string | number)[] = []
+        const traverse = (items: TreeSelectNode[]): void => {
+            for (const item of items) {
+                keys.push(getNodeValue(item))
+                const children = getNodeChildren(item)
+                if (children) traverse(children)
+            }
+        }
+        traverse(nodes)
+        return keys
+    }
+
+    // 过滤节点
+    const defaultFilterMethod = (query: string, node: TreeSelectNode): boolean => {
+        return getNodeLabel(node).toLowerCase().includes(query.toLowerCase())
+    }
+
+    const filterNodes = (nodes: TreeSelectNode[], query: string): TreeSelectNode[] => {
+        if (!query) return nodes
+
+        const filter = filterMethod ?? defaultFilterMethod
+        const result: TreeSelectNode[] = []
+
+        for (const node of nodes) {
+            const children = getNodeChildren(node)
+            const filteredChildren = children ? filterNodes(children, query) : []
+            const nodeMatches = filter(query, node)
+
+            if (nodeMatches || filteredChildren.length > 0) {
+                result.push({
+                    ...node,
+                    children: filteredChildren.length > 0 ? filteredChildren : children,
+                })
+            }
+        }
+
+        return result
+    }
+
+    const filteredData = $derived.by(() => {
+        if (!filterable || !filterQuery) return data
+        return filterNodes(data, filterQuery)
+    })
+
+    const hasData = $derived(filteredData.length > 0)
+    const showNoMatch = $derived(filterable && filterQuery && !hasData)
+    const showNoData = $derived(!filterable && data.length === 0)
+
+    // 展开/收起
+    const toggleExpand = async (node: TreeSelectNode, e?: MouseEvent): Promise<void> => {
+        e?.stopPropagation()
+        const value = getNodeValue(node)
+
+        // 懒加载
+        if (lazy && !isNodeLeaf(node) && !loadedLazyData.has(value) && load) {
+            loadingKeys = new Set([...loadingKeys, value])
+            
+            await new Promise<void>((resolve) => {
+                load(node, (children) => {
+                    loadedLazyData = new Map([...loadedLazyData, [value, children]])
+                    loadingKeys = new Set([...loadingKeys].filter((k) => k !== value))
+                    resolve()
+                })
+            })
+        }
+
+        const newExpanded = new Set(expandedKeys)
+        if (newExpanded.has(value)) {
+            newExpanded.delete(value)
+        } else {
+            newExpanded.add(value)
+        }
+        expandedKeys = newExpanded
+    }
+
+    // 选中节点
+    const selectNode = (node: TreeSelectNode): void => {
+        if (isNodeDisabled(node)) return
+
+        const value = getNodeValue(node)
+
+        // leafOnly 模式下只能选择叶子节点（非叶子点击由上层逻辑负责展开/收起）
+        if (leafOnly && !isNodeLeaf(node)) return
+
+        onnodeclick?.(node)
+
+        if (multiple) {
+            const values = Array.isArray(modelValue) ? [...modelValue] : []
+            const index = values.indexOf(value)
+            if (index > -1) {
+                values.splice(index, 1)
+            } else {
+                values.push(value)
+            }
+            modelValue = values
+            onchange?.(values)
+        } else {
+            modelValue = value
+            onchange?.(value)
+            visible = false
+        }
+
+        if (highlightCurrent) {
+            currentKey = value
+        }
+    }
+
+    // 复选框逻辑（支持父子关联或不关联）
+    const handleCheck = (node: TreeSelectNode, checked: boolean): void => {
+        if (isNodeDisabled(node)) return
+
+        // leafOnly 模式下只允许勾选叶子节点
+        if (leafOnly && !isNodeLeaf(node)) return
+
+        const value = getNodeValue(node)
+        let values = Array.isArray(modelValue) ? [...modelValue] : []
+
+        if (checkStrictly) {
+            // 父子不关联
+            if (checked) {
+                if (!values.includes(value)) values.push(value)
+            } else {
+                values = values.filter((v) => v !== value)
+            }
+        } else {
+            // 父子关联
+            const getAllDescendants = (n: TreeSelectNode): (string | number)[] => {
+                const descendants: (string | number)[] = [getNodeValue(n)]
+                const children = getNodeChildren(n)
+                if (children) {
+                    for (const child of children) {
+                        descendants.push(...getAllDescendants(child))
+                    }
+                }
+                return descendants
+            }
+
+            const descendants = getAllDescendants(node)
+
+            if (checked) {
+                for (const d of descendants) {
+                    if (!values.includes(d)) values.push(d)
+                }
+            } else {
+                values = values.filter((v) => !descendants.includes(v))
+            }
+        }
+
+        modelValue = values
+        onchange?.(values)
+    }
+
+    // 是否选中
+    const isSelected = (node: TreeSelectNode): boolean => {
+        return selectedValues.includes(getNodeValue(node))
+    }
+
+    // 是否展开
+    const isExpanded = (node: TreeSelectNode): boolean => {
+        return expandedKeys.has(getNodeValue(node))
+    }
+
+    // 是否正在加载
+    const isLoading = (node: TreeSelectNode): boolean => {
+        return loadingKeys.has(getNodeValue(node))
+    }
+
+    // 获取节点的实际子节点（支持懒加载）
+    const getActualChildren = (node: TreeSelectNode): TreeSelectNode[] | undefined => {
+        const value = getNodeValue(node)
+        if (lazy && loadedLazyData.has(value)) {
+            return loadedLazyData.get(value)
+        }
+        return getNodeChildren(node)
+    }
+
+    // 复选框状态（半选）
+    const getCheckState = (node: TreeSelectNode): 'checked' | 'indeterminate' | 'unchecked' => {
+        const value = getNodeValue(node)
+        if (selectedValues.includes(value)) return 'checked'
+
+        if (!checkStrictly) {
+            const children = getActualChildren(node)
+            if (children && children.length > 0) {
+                const checkedCount = children.filter((c) => selectedValues.includes(getNodeValue(c))).length
+                if (checkedCount === children.length) return 'checked'
+                if (checkedCount > 0) return 'indeterminate'
+            }
+        }
+
+        return 'unchecked'
+    }
+
+    // 显示值
+    const displayLabels = $derived.by(() => {
+        return selectedValues.map((v) => {
+            const node = findNode(v)
+            return node ? getNodeLabel(node) : String(v)
+        })
+    })
+
+    const displayValue = $derived.by(() => {
+        if (multiple) return ''
+        return displayLabels[0] ?? ''
+    })
+
+    // 打开/关闭
+    const open = (): void => {
+        if (disabled) return
+        visible = true
+        onvisiblechange?.(true)
+        if (filterable) {
+            tick().then(() => inputRef?.focus())
+        }
+    }
+
+    const close = (): void => {
+        visible = false
+        filterQuery = ''
+        onvisiblechange?.(false)
+    }
+
+    const toggle = (): void => {
+        if (visible) close()
+        else open()
+    }
+
+    // 清空
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = multiple ? [] : undefined
+        filterQuery = ''
+        onchange?.(multiple ? [] : undefined)
+        onclear?.()
+    }
+
+    // 移除 Tag
+    const handleRemoveTag = (value: string | number): void => {
+        if (disabled) return
+        const values = (Array.isArray(modelValue) ? modelValue : []).filter((v) => v !== value)
+        modelValue = values
+        onchange?.(values)
+        onremove?.(value)
+    }
+
+    // 点击外部关闭
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (containerRef && !containerRef.contains(e.target as Node)) {
+            close()
+        }
+    }
+
+    // 键盘事件
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') {
+            close()
+        } else if (e.key === 'Enter' && !visible) {
+            open()
+        }
+    }
+
+    // 输入过滤
+    const handleFilterInput = (e: Event): void => {
+        const target = e.target as HTMLInputElement
+        filterQuery = target.value
+
+        // 过滤时自动展开匹配的节点
+        if (filterQuery) {
+            const matchedKeys = new Set<string | number>()
+            const findMatchedParents = (nodes: TreeSelectNode[], parents: (string | number)[] = []): void => {
+                for (const node of nodes) {
+                    const value = getNodeValue(node)
+                    const children = getNodeChildren(node)
+                    const currentPath = [...parents, value]
+
+                    const filter = filterMethod ?? defaultFilterMethod
+                    if (filter(filterQuery, node)) {
+                        parents.forEach((p) => matchedKeys.add(p))
+                    }
+
+                    if (children) {
+                        findMatchedParents(children, currentPath)
+                    }
+                }
+            }
+            findMatchedParents(data)
+            expandedKeys = new Set([...expandedKeys, ...matchedKeys])
+        }
+    }
+
+    // 初始化
+    onMount(() => {
+        document.addEventListener('click', handleClickOutside)
+
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+
+        // 默认展开
+        if (defaultExpandAll) {
+            expandedKeys = new Set(getAllKeys(data))
+        } else if (defaultExpandedKeys.length > 0) {
+            expandedKeys = new Set(defaultExpandedKeys)
+        }
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside)
+    })
+
+    // 节点点击处理
+    const handleNodeClick = (node: TreeSelectNode): void => {
+        // 非叶子节点点击：展开/收起（而不是选中）
+        if ((lazy && !isNodeLeaf(node)) || (getActualChildren(node)?.length ?? 0) > 0) {
+            if (!isNodeDisabled(node)) {
+                void toggleExpand(node)
+            }
+            return
+        }
+
+        if (showCheckbox && multiple) {
+            // 有复选框时，点击节点切换复选框
+            if (checkOnClickNode) {
+                const state = getCheckState(node)
+                handleCheck(node, state !== 'checked')
+            }
+        } else {
+            selectNode(node)
+        }
+    }
+
+    const classes = $derived(
+        [
+            'lm-tree-select',
+            disabled && 'is-disabled',
+            visible && 'is-focus',
+            multiple && 'is-multiple',
+            size !== 'default' && `lm-tree-select--${size}`,
+            cls,
+        ]
+            .filter(Boolean)
+            .join(' ')
+    )
+</script>
+
+{#snippet treeNode(node: TreeSelectNode, level: number = 0)}
+    {@const nodeValue = getNodeValue(node)}
+    {@const nodeLabel = getNodeLabel(node)}
+    {@const nodeDisabled = isNodeDisabled(node)}
+    {@const nodeLeaf = isNodeLeaf(node)}
+    {@const children = getActualChildren(node)}
+    {@const hasChildren = children && children.length > 0}
+    {@const expanded = isExpanded(node)}
+    {@const loading = isLoading(node)}
+    {@const selected = isSelected(node)}
+    {@const checkState = showCheckbox ? getCheckState(node) : 'unchecked'}
+    {@const isCurrent = currentKey === nodeValue}
+
+    <div class="lm-tree-select__tree-node" class:is-current={highlightCurrent && isCurrent}>
+        <div
+            class="lm-tree-select__node-content"
+            class:is-selected={selected && !showCheckbox}
+            class:is-disabled={nodeDisabled}
+            style="padding-left: {level * 18 + 8}px"
+            onclick={() => handleNodeClick(node)}
+            onkeydown={(e: KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    handleNodeClick(node)
+                }
+            }}
+            role="treeitem"
+            tabindex={nodeDisabled ? -1 : 0}
+            aria-selected={selected}
+            aria-expanded={hasChildren || (lazy && !nodeLeaf) ? expanded : undefined}
+            aria-disabled={nodeDisabled}
+        >
+            <!-- 展开/收起按钮 -->
+            <button
+                type="button"
+                class="lm-tree-select__expand-icon"
+                class:is-expanded={expanded}
+                class:is-leaf={nodeLeaf && !lazy}
+                onclick={(e: MouseEvent) => toggleExpand(node, e)}
+                aria-label={expanded ? '收起' : '展开'}
+                tabindex="-1"
+            >
+                {#if loading}
+                    <span class="lm-tree-select__loading">
+                        <Icon icon={Loader2} size={14} />
+                    </span>
+                {:else if !nodeLeaf || (lazy && !loadedLazyData.has(nodeValue) && !node.isLeaf)}
+                    <Icon icon={ChevronRight} size={14} />
+                {/if}
+            </button>
+
+            <!-- 复选框 -->
+            {#if showCheckbox && multiple}
+                <span class="lm-tree-select__checkbox" role="presentation">
+                    <Checkbox
+                        checked={checkState === 'checked'}
+                        indeterminate={checkState === 'indeterminate'}
+                        disabled={nodeDisabled}
+                        onchange={(checked) => handleCheck(node, checked)}
+                    />
+                </span>
+            {/if}
+
+            <!-- 节点内容 -->
+            <span class="lm-tree-select__node-label">
+                {#if renderLabel}
+                    {@render renderLabel({ node })}
+                {:else}
+                    {nodeLabel}
+                {/if}
+            </span>
+
+            <!-- 选中标记（单选无复选框模式） -->
+            {#if selected && !showCheckbox && !multiple}
+                <span class="lm-tree-select__check-icon">
+                    <Icon icon={Check} size={14} />
+                </span>
+            {/if}
+        </div>
+
+        <!-- 子节点 -->
+        {#if (hasChildren || loading) && expanded}
+            <div class="lm-tree-select__children" transition:slide={{ duration: expandCollapseDuration }}>
+                {#if children}
+                    {#each children as child (getNodeValue(child))}
+                        {@render treeNode(child, level + 1)}
+                    {/each}
+                {/if}
+            </div>
+        {/if}
+    </div>
+{/snippet}
+
+<div bind:this={containerRef} class={classes} {...attrs}>
+    <!-- 触发器 -->
+    <div
+        class="lm-tree-select__trigger"
+        class:is-focus={visible}
+        onclick={toggle}
+        onkeydown={handleKeydown}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={visible}
+        aria-controls="lm-tree-select-dropdown"
+        aria-haspopup="tree"
+        aria-disabled={disabled}
+    >
+        {#if multiple && selectedValues.length > 0}
+            <!-- 多选 Tags -->
+            <div class="lm-tree-select__tags">
+                {#if collapseTags}
+                    {#each displayLabels.slice(0, maxCollapseTags) as label, i (selectedValues[i])}
+                        <Tag size="small" closable onclose={() => handleRemoveTag(selectedValues[i])}>
+                            {label}
+                        </Tag>
+                    {/each}
+                    {#if selectedValues.length > maxCollapseTags}
+                        <Tag size="small">+{selectedValues.length - maxCollapseTags}</Tag>
+                    {/if}
+                {:else}
+                    {#each displayLabels as label, i (selectedValues[i])}
+                        <Tag size="small" closable onclose={() => handleRemoveTag(selectedValues[i])}>
+                            {label}
+                        </Tag>
+                    {/each}
+                {/if}
+
+                {#if filterable}
+                    <input
+                        bind:this={inputRef}
+                        class="lm-tree-select__filter-input"
+                        type="text"
+                        value={filterQuery}
+                        oninput={handleFilterInput}
+                        onclick={(e: MouseEvent) => e.stopPropagation()}
+                        placeholder={selectedValues.length === 0 ? placeholder : ''}
+                    />
+                {/if}
+            </div>
+        {:else}
+            <!-- 单选显示 -->
+            {#if filterable && visible}
+                <input
+                    bind:this={inputRef}
+                    class="lm-tree-select__input"
+                    type="text"
+                    value={filterQuery}
+                    oninput={handleFilterInput}
+                    {placeholder}
+                />
+            {:else}
+                <span class="lm-tree-select__value" class:is-placeholder={!displayValue}>
+                    {displayValue || placeholder}
+                </span>
+            {/if}
+        {/if}
+
+        <!-- 清空/箭头 -->
+        <span class="lm-tree-select__suffix">
+            {#if clearable && selectedValues.length > 0 && !disabled}
+                <button type="button" class="lm-tree-select__clear" onclick={handleClear} aria-label="清除">
+                    <Icon icon={X} size={14} />
+                </button>
+            {:else}
+                <span class="lm-tree-select__arrow" class:is-open={visible}>
+                    <Icon icon={ChevronDown} size={14} />
+                </span>
+            {/if}
+        </span>
+    </div>
+
+    <!-- 下拉面板 -->
+    {#if visible}
+        <div class="lm-tree-select__dropdown" role="tree" id="lm-tree-select-dropdown" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-tree-select__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <div class="lm-tree-select__dropdown-content">
+                {#if showNoData}
+                    <div class="lm-tree-select__empty">{noDataText}</div>
+                {:else if showNoMatch}
+                    <div class="lm-tree-select__empty">{noMatchText}</div>
+                {:else}
+                    {#each filteredData as node (getNodeValue(node))}
+                        {@render treeNode(node, 0)}
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+import TreeSelect from './TreeSelect.svelte';
+export default TreeSelect;
+export { TreeSelect };
+export type { TreeSelectNode, TreeSelectProps, TreeSelectPropsConfig, TreeSelectSize } from './types';

package/dist/components/TreeSelect/index.js

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