lumen-plus 0.0.1

package/dist/components/Tree/TreeNode.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+    import type { TreeNode as TreeNodeType } from './types'
+    import { slide } from 'svelte/transition'
+    import Icon from '../Icon'
+    import { ChevronRight } from 'lucide'
+    import Checkbox from '../../Checkbox/src'
+    import TreeNode from './TreeNode.svelte'
+
+    interface TreeNodeProps {
+        node: TreeNodeType
+        level?: number
+        showCheckbox?: boolean
+        expandedKeys?: Set<string | number>
+        checkedKeys?: Set<string | number>
+        currentKey?: string | number | null
+        accordion?: boolean
+        expandOnClickNode?: boolean
+        expandCollapseDuration?: number
+        onnodeclick?: (node: TreeNodeType) => void
+        ontoggle?: (node: TreeNodeType) => void
+        oncheck?: (node: TreeNodeType, checked: boolean) => void
+    }
+
+    let {
+        node,
+        level = 0,
+        showCheckbox = false,
+        expandedKeys = new Set(),
+        checkedKeys = new Set(),
+        currentKey = null,
+        accordion = false,
+        expandOnClickNode = true,
+        expandCollapseDuration = 180,
+        onnodeclick,
+        ontoggle,
+        oncheck,
+    }: TreeNodeProps = $props()
+
+    const hasChildren = $derived(node.children && node.children.length > 0)
+    const isExpanded = $derived(expandedKeys.has(node.id))
+    const isChecked = $derived(checkedKeys.has(node.id))
+    const isCurrent = $derived(currentKey === node.id)
+
+    const handleToggle = (e: MouseEvent | KeyboardEvent): void => {
+        e.stopPropagation()
+        if (node.disabled) return
+        if (hasChildren) ontoggle?.(node)
+    }
+
+    const handleClick = (): void => {
+        if (node.disabled) return
+        if (expandOnClickNode && hasChildren) {
+            ontoggle?.(node)
+        }
+        onnodeclick?.(node)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleClick()
+        }
+    }
+
+    const handleToggleKeyDown = (e: KeyboardEvent): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleToggle(e)
+        }
+    }
+
+    const handleCheck = (): void => {
+        if (!node.disabled) oncheck?.(node, !isChecked)
+    }
+
+    const classes = $derived(`lm-tree-node${isCurrent ? ' is-current' : ''}${node.disabled ? ' is-disabled' : ''}`)
+</script>
+
+<div class={classes}>
+    <div
+        class="lm-tree-node__content"
+        style="padding-left:{level * 18}px"
+        onclick={handleClick}
+        onkeydown={handleKeyDown}
+        role="treeitem"
+        tabindex={node.disabled ? -1 : 0}
+        aria-selected={isCurrent}
+        aria-expanded={hasChildren ? isExpanded : undefined}
+        aria-disabled={node.disabled}
+    >
+        <button
+            type="button"
+            class="lm-tree-node__expand-icon{isExpanded ? ' is-expanded' : ''}{!hasChildren ? ' is-leaf' : ''}"
+            onclick={handleToggle}
+            onkeydown={handleToggleKeyDown}
+            tabindex="-1"
+            aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
+            disabled={node.disabled || !hasChildren}
+        >
+            {#if hasChildren}
+                <Icon icon={ChevronRight} size={14} />
+            {/if}
+        </button>
+
+        {#if showCheckbox}
+            <span class="lm-tree-node__checkbox" role="presentation" onclick={(e: MouseEvent) => e.stopPropagation()}>
+                <Checkbox checked={isChecked} disabled={node.disabled} onchange={handleCheck} />
+            </span>
+        {/if}
+
+        <span class="lm-tree-node__label">{node.label}</span>
+    </div>
+
+    {#if hasChildren && isExpanded}
+        <div class="lm-tree-node__children" role="group" transition:slide={{ duration: expandCollapseDuration }}>
+            {#each node.children as child (child.id)}
+                <TreeNode
+                    node={child}
+                    level={level + 1}
+                    {showCheckbox}
+                    {expandedKeys}
+                    {checkedKeys}
+                    {currentKey}
+                    {accordion}
+                    {expandCollapseDuration}
+                    {onnodeclick}
+                    {ontoggle}
+                    {oncheck}
+                />
+            {/each}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { TreeNode as TreeNodeType } from './types';
+import TreeNode from './TreeNode.svelte';
+interface TreeNodeProps {
+    node: TreeNodeType;
+    level?: number;
+    showCheckbox?: boolean;
+    expandedKeys?: Set<string | number>;
+    checkedKeys?: Set<string | number>;
+    currentKey?: string | number | null;
+    accordion?: boolean;
+    expandOnClickNode?: boolean;
+    expandCollapseDuration?: number;
+    onnodeclick?: (node: TreeNodeType) => void;
+    ontoggle?: (node: TreeNodeType) => void;
+    oncheck?: (node: TreeNodeType, checked: boolean) => void;
+}
+declare const TreeNode: import("svelte").Component<TreeNodeProps, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

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

@@ -0,0 +1,4 @@
+import Tree from './Tree.svelte';
+export { Tree };
+export type { TreeProps, TreeNode, TreeNodeProps } from './types';
+export default Tree;

package/dist/components/Tree/index.js

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

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

@@ -0,0 +1,65 @@
+/** Tree 节点数据 */
+export interface TreeNode {
+    /** 节点标识 */
+    id: string | number;
+    /** 节点标签 */
+    label: string;
+    /** 子节点 */
+    children?: TreeNode[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否叶子节点 */
+    isLeaf?: boolean;
+    /** 额外数据 */
+    [key: string]: any;
+}
+/** Tree 属性 */
+export interface TreeProps {
+    /** 数据源 */
+    data?: TreeNode[];
+    /** 是否显示复选框 */
+    showCheckbox?: boolean;
+    /** 默认展开的节点 */
+    defaultExpandedKeys?: (string | number)[];
+    /** 默认选中的节点 */
+    defaultCheckedKeys?: (string | number)[];
+    /** 是否默认展开所有 */
+    defaultExpandAll?: boolean;
+    /** 是否高亮当前节点 */
+    highlightCurrent?: boolean;
+    /** 是否手风琴模式 */
+    accordion?: boolean;
+    /** 点击节点内容时展开/收起 */
+    expandOnClickNode?: boolean;
+    /** 节点点击事件 */
+    onnodeclick?: (node: TreeNode) => void;
+    /** 选中变化事件 */
+    oncheck?: (checkedKeys: (string | number)[], node: TreeNode) => void;
+    /** 自定义类名 */
+    class?: string;
+}
+/** TreeNode 属性 */
+export interface TreeNodeProps {
+    /** 节点数据 */
+    node: TreeNode;
+    /** 层级 */
+    level?: number;
+    /** 是否显示复选框 */
+    showCheckbox?: boolean;
+    /** 展开的节点 */
+    expandedKeys?: Set<string | number>;
+    /** 选中的节点 */
+    checkedKeys?: Set<string | number>;
+    /** 当前高亮节点 */
+    currentKey?: string | number | null;
+    /** 是否手风琴模式 */
+    accordion?: boolean;
+    /** 点击节点内容时展开/收起 */
+    expandOnClickNode?: boolean;
+    /** 节点点击 */
+    onnodeclick?: (node: TreeNode) => void;
+    /** 展开切换 */
+    ontoggle?: (node: TreeNode) => void;
+    /** 选中切换 */
+    oncheck?: (node: TreeNode, checked: boolean) => void;
+}

package/dist/components/Tree/types.js

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