antd-solid 0.0.11 → 0.0.13

package/es/Tree/SingleLevelTree.d.ts

@@ -0,0 +1,28 @@
+import { type Accessor, type Setter, type JSXElement } from 'solid-js';
+import { type CheckNode, type TreeNode, type TreeProps } from '.';
+import { type Key } from '../types';
+interface SingleLevelTreeProps<T extends {} = TreeNode> extends Pick<TreeProps<T>, 'treeData' | 'draggable' | 'onDrop' | 'blockNode' | 'checkable' | 'multiple' | 'checkStrategy' | 'checkOnClick' | 'indentSize' | 'selectable'> {
+    indentSize: number;
+    /**
+     * 缩进次数
+     */
+    indent: number;
+    parentIndexes?: number[];
+    selectedKeys: Accessor<any[]>;
+    setSelectedKeys: Setter<any[] | undefined>;
+    draggableNode: Accessor<T | null>;
+    setDraggableNode: Setter<T | null>;
+    draggableIndexes: Accessor<number[] | null>;
+    setDraggableIndexes: Setter<number[] | null>;
+    isDraggable: (key: T | null) => boolean;
+    expandedKeys: Accessor<any[]>;
+    setExpandedKeys: Setter<any[]>;
+    setCheckedKeys: Setter<any[]>;
+    checkedMap: Accessor<Map<Key, CheckNode<T>>>;
+    getTitle: (node: T) => JSXElement;
+    getKey: (node: T) => Key;
+    getChildren: (node: T) => T[] | undefined;
+    getNodeByIndexes: (indexes: number[]) => T | undefined;
+}
+declare const SingleLevelTree: <T extends {} = TreeNode>(props: SingleLevelTreeProps<T>) => import("solid-js").JSX.Element;
+export default SingleLevelTree;

package/es/Tree/SingleLevelTree.js

@@ -0,0 +1,299 @@
+import { delegateEvents, createComponent, insert, effect, className, setAttribute, memo, mergeProps, template, use } from 'solid-js/web';
+import { isEmpty, last, uniq } from 'lodash-es';
+import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
+import cs from 'classnames';
+import Checkbox from '../Checkbox/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span class=i-ant-design:caret-down-outlined>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><div class=flex-shrink-0 aria-label=indent></div><div></div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class=i-ant-design:caret-right-outlined>`);
+const SingleLevelTree = props => {
+  return createComponent(For, {
+    get each() {
+      return props.treeData;
+    },
+    children: (item, i) => {
+      let contentRef;
+      const indexes = createMemo(() => [...(props.parentIndexes ?? []), i()]);
+      const children = createMemo(() => props.getChildren(item));
+      /**
+       * 是否是末尾节点
+       */
+      const isEndNode = createMemo(() => isEmpty(children()));
+      const isExpanded = createMemo(() => !isEndNode() && props.expandedKeys().includes(props.getKey(item)));
+      const onCheck = () => {
+        const checked = !props.checkedMap().get(props.getKey(item))?.checked;
+        const key = props.getKey(item);
+        /**
+         * 获取所有受影响的父节点
+         * @param node
+         * @param parentKeys
+         * @returns
+         */
+        const getAllParentKeys = (node, parentKeys = []) => {
+          if (node.parent) {
+            if (checked) {
+              node.parent.checkedChildCount++;
+            }
+            if (node.parent.checkedChildCount === node.parent.totalChildCount) {
+              parentKeys.push(node.parent.key);
+              return getAllParentKeys(node.parent, parentKeys);
+            }
+          }
+          return parentKeys;
+        };
+        /**
+         * 获取所有受影响的子节点
+         * @param node
+         * @param parentKeys
+         * @returns
+         */
+        const getAllChildKeys = (list, onlyEndNode = false) => {
+          if (isEmpty(list)) return [];
+          return list.flatMap(v => {
+            const nextLevelChildren = props.getChildren(v);
+            if (!isEmpty(nextLevelChildren)) {
+              return [...(onlyEndNode ? [] : [props.getKey(v)]), ...getAllChildKeys(nextLevelChildren)];
+            }
+            return [props.getKey(v)];
+          });
+        };
+        if (props.checkStrategy === 'parent') {
+          const parentKeys = getAllParentKeys(props.checkedMap().get(key), [key]);
+          const root = props.checkedMap().get(last(parentKeys));
+          const addKeys = checked ? [root.key] : props.getChildren(root.treeNode)?.map(node => props.getKey(node)).filter(k => !parentKeys.includes(k));
+          const deleteKeys = checked ? getAllChildKeys(props.getChildren(root.treeNode)) : [key, root.key].concat(getAllChildKeys(children()));
+          const deleteChildDict = new Map(deleteKeys.map(k => [k, true]));
+          props.setCheckedKeys(keys => keys.concat(addKeys ?? []).filter(k => !deleteChildDict.has(k)));
+          return;
+        }
+        let updateKeys = [];
+        if (props.checkStrategy === 'all') {
+          updateKeys = [key].concat(getAllChildKeys(children())).concat(getAllParentKeys(props.checkedMap().get(key)));
+        } else if (props.checkStrategy === 'child') {
+          if (isEndNode()) {
+            updateKeys = [key];
+          } else {
+            updateKeys = getAllChildKeys(children(), true);
+          }
+        }
+        if (checked) {
+          props.setCheckedKeys(keys => uniq([...keys, ...updateKeys]));
+        } else {
+          const deleteChildDict = new Map(updateKeys.map(k => [k, true]));
+          props.setCheckedKeys(keys => keys.filter(k => !deleteChildDict.has(k)));
+        }
+      };
+      let dragEnterClientX = 0;
+      const [targetIndexes, setTargetIndexes] = createSignal(untrack(indexes));
+      const [isTarget, setIsTarget] = createSignal(false);
+      const [targetPosition, setTargetPosition] = createSignal('before');
+      const setTargetPositionAndLevelOffset = e => {
+        const middleY = e.target.getBoundingClientRect().top + e.target.clientHeight / 2;
+        const position = e.clientY < middleY ? 'before' : 'after';
+        setTargetPosition(position);
+        if (position === 'after') {
+          if (isExpanded()) {
+            setTargetIndexes([...indexes(), 0]);
+            return;
+          }
+          let isLastNode = props.treeData?.length === i() + 1;
+          if (isLastNode && e.clientX < dragEnterClientX) {
+            const levelOffset = Math.ceil((e.clientX - dragEnterClientX) / props.indentSize);
+            if (levelOffset < 0) {
+              setTargetIndexes(() => {
+                const _indexes = [...indexes()];
+                for (let _i = 0; _i < -levelOffset; _i++) {
+                  if (_i > 0) {
+                    if (_indexes.length < 2) break;
+                    const grandfatherNode = props.getNodeByIndexes(_indexes.slice(0, -1));
+                    isLastNode = grandfatherNode ? props.getChildren(grandfatherNode)?.length === last(_indexes) + 1 : false;
+                    if (!isLastNode) break;
+                  }
+                  _indexes.pop();
+                }
+                _indexes[_indexes.length - 1] = _indexes[_indexes.length - 1] + 1;
+                return _indexes;
+              });
+              return;
+            }
+          }
+          if (isEndNode() && e.clientX > dragEnterClientX) {
+            const levelOffset = (e.clientX - dragEnterClientX) / props.indentSize;
+            if (levelOffset >= 1) {
+              setTargetIndexes([...indexes(), 0]);
+              return;
+            }
+          }
+        } else {
+          // 上一个兄弟节点
+          let prevNode = i() > 0 ? props.treeData?.[i() - 1] : undefined;
+          let isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
+          if (isPrevNodeExpanded && e.clientX > dragEnterClientX) {
+            const levelOffset = Math.floor((e.clientX - dragEnterClientX) / props.indentSize);
+            if (levelOffset > 0) {
+              setTargetIndexes(() => {
+                const _indexes = [...indexes().slice(0, -1), i() - 1];
+                for (let _i = 0; _i < levelOffset; _i++) {
+                  if (_i > 0) {
+                    prevNode = props.getNodeByIndexes(_indexes);
+                    isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
+                    if (!isPrevNodeExpanded) break;
+                  }
+                  _indexes.push(props.getChildren(prevNode).length);
+                }
+                return _indexes;
+              });
+              return;
+            }
+          }
+        }
+        setTargetIndexes(position === 'before' ? indexes() : [...indexes().slice(0, -1), last(indexes()) + 1]);
+      };
+      return [(() => {
+        var _el$ = _tmpl$2(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$6 = _el$4.nextSibling;
+        _el$.addEventListener("drop", () => {
+          setIsTarget(false);
+          props.onDrop?.({
+            dragNode: props.draggableNode(),
+            dragIndexes: props.draggableIndexes(),
+            targetIndexes: targetIndexes()
+          });
+        });
+        _el$.addEventListener("dragleave", () => {
+          setIsTarget(false);
+        });
+        _el$.addEventListener("dragenter", e => {
+          dragEnterClientX = e.clientX;
+          setIsTarget(true);
+          setTargetPositionAndLevelOffset(e);
+        });
+        _el$.addEventListener("dragover", e => {
+          e.preventDefault();
+          setTargetPositionAndLevelOffset(e);
+        });
+        _el$.addEventListener("dragend", () => {
+          props.setDraggableNode(null);
+          props.setDraggableIndexes(null);
+        });
+        _el$.addEventListener("dragstart", () => {
+          props.setDraggableNode(item);
+          props.setDraggableIndexes(indexes());
+        });
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return isExpanded();
+          },
+          get fallback() {
+            return (() => {
+              var _el$7 = _tmpl$3();
+              _el$7.$$click = () => {
+                const key = props.getKey(item);
+                props.setExpandedKeys(l => [...l, key]);
+              };
+              return _el$7;
+            })();
+          },
+          get children() {
+            var _el$5 = _tmpl$();
+            _el$5.$$click = () => {
+              const key = props.getKey(item);
+              props.setExpandedKeys(l => l.filter(k => k !== key));
+            };
+            return _el$5;
+          }
+        }));
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return props.checkable;
+          },
+          get children() {
+            return createComponent(Checkbox, {
+              "class": "mr-8px mt-2px",
+              get checked() {
+                return props.checkedMap().get(props.getKey(item))?.checked;
+              },
+              get indeterminate() {
+                return props.checkedMap().get(props.getKey(item))?.indeterminate;
+              },
+              onChange: onCheck
+            });
+          }
+        }), _el$6);
+        _el$6.$$click = () => {
+          const key = props.getKey(item);
+          if (!props.selectable) return;
+          if (props.multiple) {
+            props.setSelectedKeys(keys => {
+              keys = keys ?? [];
+              if (keys.includes(key)) {
+                return keys.filter(n => n !== key);
+              }
+              return [...keys, key];
+            });
+          } else {
+            props.setSelectedKeys(keys => {
+              return keys?.includes(key) ? [] : [key];
+            });
+          }
+          if (props.checkOnClick) {
+            onCheck();
+          }
+        };
+        var _ref$ = contentRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$6) : contentRef = _el$6;
+        insert(_el$6, () => props.getTitle(item));
+        effect(_p$ => {
+          var _v$ = cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']),
+            _v$2 = `calc(${contentRef?.offsetLeft ?? 0}px + ${contentRef && window.getComputedStyle(contentRef).paddingLeft || '0px'} + ${(targetIndexes().length - indexes().length) * props.indentSize}px)`,
+            _v$3 = props.draggable,
+            _v$4 = cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'),
+            _v$5 = `${props.indent * props.indentSize}px`,
+            _v$6 = cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'),
+            _v$7 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]');
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-tree-target-node-left", _v$2) : _el$.style.removeProperty("--ant-tree-target-node-left"));
+          _v$3 !== _p$.a && setAttribute(_el$, "draggable", _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
+          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
+          _v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
+          _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return memo(() => !!isExpanded())() && !isEndNode();
+        },
+        get children() {
+          return createComponent(SingleLevelTree, mergeProps(props, {
+            get treeData() {
+              return children();
+            },
+            get indent() {
+              return props.indent + 1;
+            },
+            get parentIndexes() {
+              return indexes();
+            }
+          }));
+        }
+      })];
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { SingleLevelTree as default };

package/es/Tree/index.d.ts

@@ -0,0 +1,83 @@
+import { type JSXElement, type JSX } from 'solid-js';
+import { type StyleProps } from '../types';
+import { type CheckboxProps } from '../Checkbox';
+export interface CheckNode<T extends {} = TreeNode> extends CheckboxProps {
+    key: any;
+    parent?: CheckNode<T>;
+    treeNode: T;
+    checkedChildCount?: number;
+    totalChildCount?: number;
+}
+export interface TreeNode {
+    key: any;
+    title: JSXElement;
+    children?: TreeNode[] | undefined;
+}
+export interface TreeProps<T extends {} = TreeNode> extends StyleProps {
+    /**
+     * 支持点选多个节点（节点本身）
+     */
+    multiple?: boolean;
+    treeData?: T[];
+    defaultSelectedKeys?: any[] | undefined | null;
+    selectedKeys?: any[] | undefined | null;
+    onSelect?: (selectedKeys: any[]) => void;
+    /**
+     * 是否可选中
+     * 默认 true
+     */
+    selectable?: boolean;
+    defaultExpandedKeys?: any[] | undefined | null;
+    expandedKeys?: any[] | undefined | null;
+    onExpand?: (expandedKeys: any[]) => void;
+    /**
+     * 是否节点占据一行
+     */
+    blockNode?: boolean;
+    defaultExpandAll?: boolean;
+    checkable?: boolean;
+    /**
+     * 设置节点可拖拽
+     */
+    draggable?: boolean;
+    onDrop?: (info: {
+        dragNode: T;
+        dragIndexes: number[];
+        targetIndexes: number[];
+    }) => void;
+    /**
+     * 默认选中复选框的树节点
+     */
+    defaultCheckedKeys?: any[] | undefined | null;
+    checkedKeys?: any[] | undefined | null;
+    onCheck?: (checkedKeys: any[], e: {
+        checked: boolean;
+        halfCheckedKeys: any[];
+    }) => void;
+    /**
+     * 自定义节点 title、key、children 的字段
+     * 默认 { title: 'title', key: 'key', children: 'children' }
+     */
+    fieldNames?: {
+        title?: string | ((node: T) => JSXElement);
+        key?: string | ((node: T) => any);
+        children?: string | ((node: T) => T[] | undefined);
+    };
+    /**
+     * 默认 'all'
+     * 设置勾选策略来指定勾选回调返回的值，all 表示回调函数值为全部选中节点；parent 表示回调函数值为父节点（当父节点下所有子节点都选中时）；child 表示回调函数值为子节点
+     */
+    checkStrategy?: 'all' | 'parent' | 'child';
+    /**
+     * 是否允许点击节点进行勾选，仅在 checkable 为 true 时生效
+     */
+    checkOnClick?: boolean;
+    /**
+     * 缩进宽度
+     * 默认 24
+     */
+    indentSize?: number;
+    fallback?: JSX.Element;
+}
+declare function Tree<T extends {} = TreeNode>(_props: TreeProps<T>): JSX.Element;
+export default Tree;

package/es/Tree/index.js

@@ -0,0 +1,197 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, untrack, createMemo, createSignal, createSelector, Show } from 'solid-js';
+import { isEmpty, get, pull } from 'lodash-es';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import SingleLevelTree from './SingleLevelTree.js';
+import Element from '../Element/index.js';
+
+function Tree(_props) {
+  const props = mergeProps({
+    checkStrategy: 'all',
+    indentSize: 24,
+    selectable: true
+  }, _props);
+  const fieldNames = Object.assign({
+    title: 'title',
+    key: 'key',
+    children: 'children'
+  }, untrack(() => props.fieldNames));
+  const getTitle = node => {
+    const titleFieldName = fieldNames.title;
+    return typeof titleFieldName === 'function' ? titleFieldName(node) : get(node, titleFieldName);
+  };
+  const getKey = node => {
+    const keyFieldName = fieldNames.key;
+    return typeof keyFieldName === 'function' ? keyFieldName(node) : get(node, keyFieldName);
+  };
+  const getChildren = node => {
+    const childrenFieldName = fieldNames.children;
+    return typeof childrenFieldName === 'function' ? childrenFieldName(node) : get(node, childrenFieldName);
+  };
+  const [_selectedKeys, setSelectedKeys] = createControllableValue(props, {
+    defaultValuePropName: 'defaultSelectedKeys',
+    valuePropName: 'selectedKeys',
+    trigger: 'onSelect'
+  });
+  const selectedKeys = createMemo(() => _selectedKeys() ?? []);
+  const [_expandedKeys, setExpandedKeys] = createControllableValue(props, {
+    defaultValuePropName: 'defaultExpandedKeys',
+    valuePropName: 'expandedKeys',
+    trigger: 'onExpand',
+    defaultValue: untrack(() => {
+      if (!props.defaultExpandAll) return [];
+      const collectKeys = list => {
+        if (!list) return [];
+        return list.flatMap(item => [getKey(item), ...collectKeys(getChildren(item))]);
+      };
+      return collectKeys(props.treeData);
+    })
+  });
+  const expandedKeys = createMemo(() => _expandedKeys() ?? []);
+  const [_checkedKeys, setCheckedKeys] = createControllableValue(props, {
+    defaultValuePropName: 'defaultCheckedKeys',
+    valuePropName: 'checkedKeys',
+    trigger: 'onCheck'
+  });
+  // TODO
+  // 由于 treeForEach 中会对 checkedKeys 直接修改，为避免直接修改外部的传值，这里先拷贝一份
+  const checkedKeys = createMemo(() => [...(_checkedKeys() ?? [])]);
+  const checkedMap = createMemo(() => {
+    const map = new Map();
+    const checkedKeyDict = new Map(checkedKeys()?.map(k => [k, true]));
+    const treeForEach = (list, parent) => {
+      let checked = true;
+      let indeterminate = false;
+      let checkedChildCount = 0;
+      list?.forEach(item => {
+        const key = getKey(item);
+        const children = getChildren(item);
+        const checkNode = {
+          key,
+          checked: checkedKeyDict.has(key),
+          indeterminate: false,
+          parent,
+          treeNode: item
+        };
+        // 对外部传值进行修补
+        switch (props.checkStrategy) {
+          case 'all':
+            {
+              if (parent?.checked) {
+                checkNode.checked = true;
+                if (!checkedKeyDict.has(key)) {
+                  checkedKeyDict.set(key, true);
+                  checkedKeys().push(key);
+                }
+              }
+              break;
+            }
+          case 'parent':
+            {
+              if (parent?.checked) {
+                checkNode.checked = true;
+                if (checkedKeyDict.has(key)) {
+                  checkedKeyDict.delete(key);
+                  pull(checkedKeys(), key);
+                } else {
+                  checkedKeyDict.set(key, true);
+                }
+              }
+              break;
+            }
+          case 'child':
+            {
+              if (isEmpty(children)) {
+                if (!checkedKeyDict.has(key) && parent?.checked) {
+                  checkedKeyDict.set(key, true);
+                  checkedKeys().push(key);
+                }
+              } else {
+                if (checkedKeyDict.has(key)) {
+                  checkedKeyDict.delete(key);
+                  pull(checkedKeys(), key);
+                }
+              }
+              break;
+            }
+        }
+        if (isEmpty(children)) {
+          checkNode.checked = !!parent?.checked || checkedKeyDict.has(key);
+        } else {
+          Object.assign(checkNode, treeForEach(children, checkNode));
+          checkNode.totalChildCount = children?.length;
+        }
+        map.set(key, checkNode);
+        if (!checkNode.checked) {
+          checked = false;
+        } else {
+          checkedChildCount++;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (checkNode.checked || checkNode.indeterminate) {
+          indeterminate = true;
+        }
+      });
+      return {
+        checked,
+        indeterminate,
+        totalChildCount: list?.length,
+        checkedChildCount
+      };
+    };
+    treeForEach(props.treeData);
+    return map;
+  });
+  const [draggableNode, setDraggableNode] = createSignal(null);
+  const isDraggable = createSelector(draggableNode);
+  const [draggableIndexes, setDraggableIndexes] = createSignal(null);
+  const getNodeByIndexes = (indexes, treeData) => {
+    if (indexes.length === 0 || !treeData) return;
+    if (indexes.length === 1) return treeData[indexes[0]];
+    return getNodeByIndexes(indexes.slice(1), getChildren(treeData[indexes[0]]));
+  };
+  return createComponent(Show, {
+    get when() {
+      return !isEmpty(props.treeData);
+    },
+    get fallback() {
+      return props.fallback;
+    },
+    get children() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(props.class, 'text-[var(--ant-color-text)]');
+        },
+        get style() {
+          return props.style;
+        },
+        get children() {
+          return createComponent(SingleLevelTree, mergeProps$1(props, {
+            get treeData() {
+              return props.treeData;
+            },
+            indent: 0,
+            selectedKeys: selectedKeys,
+            setSelectedKeys: setSelectedKeys,
+            draggableNode: draggableNode,
+            setDraggableNode: setDraggableNode,
+            draggableIndexes: draggableIndexes,
+            setDraggableIndexes: setDraggableIndexes,
+            isDraggable: isDraggable,
+            expandedKeys: expandedKeys,
+            setExpandedKeys: setExpandedKeys,
+            setCheckedKeys: setCheckedKeys,
+            getTitle: getTitle,
+            getKey: getKey,
+            getChildren: getChildren,
+            checkedMap: checkedMap,
+            getNodeByIndexes: indexes => getNodeByIndexes(indexes, props.treeData)
+          }));
+        }
+      });
+    }
+  });
+}
+
+export { Tree as default };

package/es/TreeFor/index.d.ts

@@ -0,0 +1,31 @@
+import { type Accessor, type JSX } from 'solid-js';
+interface TreeForProps<T> {
+    each: T[] | undefined | null;
+    fallback?: JSX.Element;
+    /**
+     * 下一层的 each
+     */
+    nextEach: (item: T) => T[] | undefined | null;
+    expanded?: (item: T, options: {
+        index: Accessor<number>;
+        parentList: T[] | undefined;
+        parentIndexes: number[] | undefined;
+    }) => boolean;
+    /**
+     * 监听某个 child 隐藏或显示
+     * 某些情况下，父级的显示与否取决于是否 child 是否显示
+     */
+    onChildChange?: (child: T, when: boolean) => void;
+    parentList?: T[] | undefined;
+    parentIndexes?: number[];
+    children: (item: T, options: {
+        index: Accessor<number>;
+        parentList: T[] | undefined;
+        parentIndexes: number[] | undefined;
+        isParent: Accessor<boolean>;
+        isEmptyChildren: Accessor<boolean>;
+        onChildChange?: (child: T, when: boolean) => void;
+    }) => JSX.Element;
+}
+declare function TreeFor<T>(props: TreeForProps<T>): JSX.Element;
+export default TreeFor;