luna-plus 0.0.5

package/dist/TreeSelect/TreeSelect.svelte

@@ -0,0 +1,716 @@
+<script lang="ts">
+  import { onMount, onDestroy, tick } from "svelte";
+  import { slide } from "svelte/transition";
+  import { createDropdownTransition } from "../utils";
+  import Icon from "../Icon/Icon.svelte";
+  import Checkbox from "../Checkbox";
+  import Tag from "../Tag";
+  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/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;