plain-design 1.0.0-beta.22 → 1.0.0-beta.23

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -1,176 +1,176 @@
-import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClasses, useRefs} from "plain-design-composition";
-import {Tree} from "./index";
-import {iTreeNode} from "../TreeCore/createTreeNode";
-import {Loading} from "../Loading";
-import {Icon} from "../Icon";
-import {Checkbox} from "../Checkbox";
-import {CheckboxStatus} from "../../utils/constant";
-import {i18n} from "../i18n";
-
-export const RenderTreeNode = designComponent({
-  props: {
-    multiple: { type: Boolean },
-    treeNode: { type: Object as PropType<iTreeNode>, required: true },
-    dataVid: { type: Number },
-  },
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
-
-    const tree = Tree.use.inject();
-
-    /**
-     * 判断某个连接线connector是否显示的依据是，这个connector的level所对应的那个层级的parent，是否为最后一个子节点
-     * @author  韦胜健
-     * @date    2022/9/21 16:43
-     */
-    /*const levelParentIsLastChild = computed(() => {
-      return props.treeNode.parents().reverse().map(treeNode => {
-        return !!treeNode.parent ? treeNode.index === treeNode.parent.childrenData()!.length - 1 : (treeNode.index === tree.treeNodeComputedData.value.treeNodeList.length - 1);
-      });
-    });*/
-
-    const classes = useClasses(() => [
-      getComponentCls('tree-node'),
-      {
-        'tree-node-current': tree.state.current === props.treeNode.key,
-        'tree-node-lead': isLeaf.value,
-        'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
-        'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
-        'tree-node-disable-check': !props.treeNode.isCheckAble(),
-      }
-    ]);
-
-    const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
-    const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
-    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
-
-    const connectorClassesList = computed(() => {
-
-      const { treeNode } = props;
-
-      if (treeNode.level === 0) {
-        return [];
-      }
-
-      const classesList: string[] = [];
-
-      if (isLastChild(treeNode)) {
-        classesList.push('tree-node-connector-x tree-node-connector-y tree-node-connector-y-prev');
-      } else if (isFirstChild(treeNode)) {
-        classesList.push('tree-node-connector-x tree-node-connector-y tree-node-connector-y-next');
-      } else {
-        classesList.push('tree-node-connector-x tree-node-connector-y');
-      }
-
-      /*由左到右，由小到大*/
-      const parents = treeNode.parents();
-      /*第一层不要connector*/
-      parents.pop();
-
-      parents.forEach(p => {
-        classesList.push(isLastChild(p) ? 'tree-node-connector-hide' : 'tree-node-connector-y');
-      });
-
-      return classesList.reverse();
-    });
-
-    const handler = {
-      /**
-       * 处理点击展开图标
-       * @author  韦胜健
-       * @date    2022.9.21 21:54
-       */
-      onClickExpandIcon: () => {
-        if (props.treeNode.empty) {return;}
-        tree.hooks.onClickExpandIcon.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      /**
-       * 处理点击节点内容
-       * @author  韦胜健
-       * @date    2022.9.21 21:54
-       */
-      onClickNodeContent: () => {
-        if (props.treeNode.empty) {return;}
-        if (tree.draggier.value?.isDragging()) {return;}
-        tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      /**
-       * 处理点击复选框
-       * @author  韦胜健
-       * @date    2022.9.21 21:55
-       */
-      onClickCheckbox: () => {
-        if (props.treeNode.empty) {return;}
-        tree.hooks.onClickCheckbox.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
-        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
-      })),
-      onMousemoveRow: computed(() => !tree.draggier.value || !tree.draggier.value.onMousemoveRow ? undefined : (e: iMouseEvent) => {
-        tree.draggier.value!.onMousemoveRow!(e, props.treeNode);
-      })
-    };
-
-    return () => (
-      <div className={classes.value} ref={onRef.el} data-vid={props.dataVid} onMouseMove={handler.onMousemoveRow.value}>
-        {/*{(() => {console.log('render', props.treeNode.key);})()}*/}
-        <div className="tree-node-operator">
-          {connectorClassesList.value.map((classes, index) => (
-            <div key={index} className={classnames([classes, 'tree-node-connector'])}/>
-          ))}
-          <div className="tree-node-expander" onClick={handler.onClickExpandIcon}>
-            {
-              props.treeNode.isLoading() ?
-                <Loading type="gamma"/> :
-                <Icon
-                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? tree.props.leafIcon : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
-                />
-            }
-          </div>
-          {tree.props.draggable && !tree.props.customDraggier && (
-            <div
-              className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
-              onMouseDown={handler.onMousedownDraggier.value}
-            >
-              <Icon icon="pi-menu"/>
-            </div>
-          )}
-          {tree.props.multiple && (
-            <div className="tree-node-checker">
-              <Checkbox
-                checkStatus={checkStatus.value}
-                disabled={!props.treeNode.isCheckAble()}
-                onClick={handler.onClickCheckbox}
-              />
-            </div>
-          )}
-          {(() => {
-            const { nodeIcon } = tree.props;
-            const icon = nodeIcon?.(props.treeNode);
-            return !icon ? null : (
-              <div className="tree-node-icon">
-                <Icon icon={icon}/>
-              </div>
-            );
-          })()}
-        </div>
-        <div className="tree-node-content" onClick={handler.onClickNodeContent}>
-          {props.treeNode.empty ? i18n('base.noData').d('暂无数据') : (() => {
-            const scope = { treeNode: props.treeNode, index: props.treeNode.flatIndex, };
-            return tree.props.renderContent ? tree.props.renderContent(scope) : tree.scopeSlots.default(scope, props.treeNode.label()) as any;
-          })()}
-        </div>
-      </div>
-    );
-  },
-});
-
-const isLastChild = (node: iTreeNode) => {
-  const children = node.parent!.children()!;
-  return children[children.length - 1]!.key === node.key;
-};
-const isFirstChild = (node: iTreeNode) => {
-  const children = node.parent!.children()!;
-  return children[0]!.key === node.key;
-};
+import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClasses, useRefs} from "plain-design-composition";
+import {Tree} from "./index";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import {Loading} from "../Loading";
+import {Icon} from "../Icon";
+import {Checkbox} from "../Checkbox";
+import {CheckboxStatus} from "../../utils/constant";
+import {i18n} from "../i18n";
+
+export const RenderTreeNode = designComponent({
+  props: {
+    multiple: { type: Boolean },
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    dataVid: { type: Number },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const tree = Tree.use.inject();
+
+    /**
+     * 判断某个连接线connector是否显示的依据是，这个connector的level所对应的那个层级的parent，是否为最后一个子节点
+     * @author  韦胜健
+     * @date    2022/9/21 16:43
+     */
+    /*const levelParentIsLastChild = computed(() => {
+      return props.treeNode.parents().reverse().map(treeNode => {
+        return !!treeNode.parent ? treeNode.index === treeNode.parent.childrenData()!.length - 1 : (treeNode.index === tree.treeNodeComputedData.value.treeNodeList.length - 1);
+      });
+    });*/
+
+    const classes = useClasses(() => [
+      getComponentCls('tree-node'),
+      {
+        'tree-node-current': tree.state.current === props.treeNode.key,
+        'tree-node-lead': isLeaf.value,
+        'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
+        'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
+        'tree-node-disable-check': !props.treeNode.isCheckAble(),
+      }
+    ]);
+
+    const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
+    const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
+
+    const connectorClassesList = computed(() => {
+
+      const { treeNode } = props;
+
+      if (treeNode.level === 0) {
+        return [];
+      }
+
+      const classesList: string[] = [];
+
+      if (isLastChild(treeNode)) {
+        classesList.push('tree-node-connector-x tree-node-connector-y tree-node-connector-y-prev');
+      } else if (isFirstChild(treeNode)) {
+        classesList.push('tree-node-connector-x tree-node-connector-y tree-node-connector-y-next');
+      } else {
+        classesList.push('tree-node-connector-x tree-node-connector-y');
+      }
+
+      /*由左到右，由小到大*/
+      const parents = treeNode.parents();
+      /*第一层不要connector*/
+      parents.pop();
+
+      parents.forEach(p => {
+        classesList.push(isLastChild(p) ? 'tree-node-connector-hide' : 'tree-node-connector-y');
+      });
+
+      return classesList.reverse();
+    });
+
+    const handler = {
+      /**
+       * 处理点击展开图标
+       * @author  韦胜健
+       * @date    2022.9.21 21:54
+       */
+      onClickExpandIcon: () => {
+        if (props.treeNode.empty) {return;}
+        tree.hooks.onClickExpandIcon.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      /**
+       * 处理点击节点内容
+       * @author  韦胜健
+       * @date    2022.9.21 21:54
+       */
+      onClickNodeContent: () => {
+        if (props.treeNode.empty) {return;}
+        if (tree.draggier.value?.isDragging()) {return;}
+        tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      /**
+       * 处理点击复选框
+       * @author  韦胜健
+       * @date    2022.9.21 21:55
+       */
+      onClickCheckbox: () => {
+        if (props.treeNode.empty) {return;}
+        tree.hooks.onClickCheckbox.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
+        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+      onMousemoveRow: computed(() => !tree.draggier.value || !tree.draggier.value.onMousemoveRow ? undefined : (e: iMouseEvent) => {
+        tree.draggier.value!.onMousemoveRow!(e, props.treeNode);
+      })
+    };
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} data-vid={props.dataVid} onMouseMove={handler.onMousemoveRow.value}>
+        {/*{(() => {console.log('render', props.treeNode.key);})()}*/}
+        <div className="tree-node-operator">
+          {connectorClassesList.value.map((classes, index) => (
+            <div key={index} className={classnames([classes, 'tree-node-connector'])}/>
+          ))}
+          <div className="tree-node-expander" onClick={handler.onClickExpandIcon}>
+            {
+              props.treeNode.isLoading() ?
+                <Loading type="gamma"/> :
+                <Icon
+                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? tree.props.leafIcon : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
+                />
+            }
+          </div>
+          {tree.props.draggable && !tree.props.customDraggier && (
+            <div
+              className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
+              onMouseDown={handler.onMousedownDraggier.value}
+            >
+              <Icon icon="pi-menu"/>
+            </div>
+          )}
+          {tree.props.multiple && (
+            <div className="tree-node-checker">
+              <Checkbox
+                checkStatus={checkStatus.value}
+                disabled={!props.treeNode.isCheckAble()}
+                onClick={handler.onClickCheckbox}
+              />
+            </div>
+          )}
+          {(() => {
+            const { nodeIcon } = tree.props;
+            const icon = nodeIcon?.(props.treeNode);
+            return !icon ? null : (
+              <div className="tree-node-icon">
+                <Icon icon={icon}/>
+              </div>
+            );
+          })()}
+        </div>
+        <div className="tree-node-content" onClick={handler.onClickNodeContent}>
+          {props.treeNode.empty ? i18n('base.noData').d('暂无数据') : (() => {
+            const scope = { treeNode: props.treeNode, index: props.treeNode.flatIndex, };
+            return tree.props.renderContent ? tree.props.renderContent(scope) : tree.scopeSlots.default(scope, props.treeNode.label()) as any;
+          })()}
+        </div>
+      </div>
+    );
+  },
+});
+
+const isLastChild = (node: iTreeNode) => {
+  const children = node.parent!.children()!;
+  return children[children.length - 1]!.key === node.key;
+};
+const isFirstChild = (node: iTreeNode) => {
+  const children = node.parent!.children()!;
+  return children[0]!.key === node.key;
+};

package/src/packages/components/Tree/index.tsx

@@ -1,129 +1,129 @@
-import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
-import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
-import {createTreeCore} from "../TreeCore/createTreeCore";
-import {RenderTreeNode} from "./RenderTreeNode";
-import './tree.scss';
-import {iTreeNode} from "../TreeCore/createTreeNode";
-import {VirtualList} from "../VirtualList";
-import {Scroll} from "../Scroll";
-import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
-import {StyleProps, useStyle} from "../../uses/useStyle";
-import {Empty} from "../Empty";
-import {LoadingMask} from "../LoadingMask";
-import {PlainObject} from "plain-utils/utils/event";
-
-export const Tree = designComponent({
-  name: '-tree',
-  provideRefer: true,
-  props: {
-    ...StyleProps,
-    modelValue: {},
-    expand: { type: Array as PropType<string[]> },        // 展开绑定值
-    showConnector: { type: Boolean, default: true, },     // 是否显示连接线
-    displayBlock: { type: Boolean },                      // 块级显示
-    height: { type: String },                             // 固定高度，可以是百分比。会自动添加一个scroll容器作为滚动展示，(虚拟滚动会自动加上scroll，此时高度默认为100%)
-    renderContent: { type: Function as PropType<(scope: { treeNode: iTreeNode }) => void> }, // 代替作用域插槽自定义渲染内容
-    scroll: { type: Boolean },                            // 是否使用滚动容器
-    innerAttrs: { type: Object as PropType<PlainObject> },// inner 节点属性类型
-    contentWrap: { type: Boolean },                       // 节点内容是否换行显示，默认不换行
-    ...TreePropsOptions,
-  },
-  emits: {
-    ...TreeEmitOptions,
-  },
-  slots: TreeSlotsOption,
-  scopeSlots: TreeScopeSlotsOption,
-  setup({ props, event, scopeSlots, slots }) {
-
-    const { styleComputed } = useStyle();
-
-    const treeCore = createTreeCore({
-      props,
-      event,
-      draggable: {
-        rowClass: getComponentCls('tree-node'),
-        contentClass: 'tree-node-content',
-      }
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('tree'),
-      `tree-size-${styleComputed.value.size}`,
-      {
-        'tree-with-connector': props.showConnector,
-        'tree-display-block': props.displayBlock || props.scroll || props.virtual,
-        'tree-scroll': props.scroll || props.virtual,
-        'tree-content-wrap': props.contentWrap,
-        'tree-no-data': treeCore.isNoData.value,
-        'tree-no-match': treeCore.isNoMatch.value,
-        'tree-expander-cover': props.expanderCover,
-      }
-    ]);
-
-    onMounted(() => {
-      !!props.defaultExpandAll && treeCore.methods.expandAll();
-      treeCore.hooks.onMounted.exec(undefined);
-    });
-
-    onBeforeUnmount(() => {
-      treeCore.dispose();
-    });
-
-    return {
-      refer: {
-        ...treeCore,
-        props,
-        scopeSlots,
-      },
-      render: () => (
-        <div className={classes.value}>
-          <div {...mergeAttrs(
-            { class: 'tree-inner' },
-            props.innerAttrs,
-          )}>
-            {(() => {
-              if (treeCore.isNoData.value) {
-                return slots.noData(<div className="tree-no-data"><Empty noData label={props.noDataText}/></div>);
-              }
-              if (treeCore.isNoMatch.value) {
-                return slots.noMatch(<div className="tree-no-match"><Empty noMatch label={props.noMatchText}/></div>);
-              }
-              if (props.virtual) {
-                return (
-                  <VirtualList data={treeCore.flatNodeComputedData.value} ref={treeCore.onRef.list} size={props.virtualSize != null ? props.virtualSize : TreeSizeToRowHeight[styleComputed.value.size]} dynamicSize={props.virtualDynamicSize}>
-                    {{
-                      content: ({ data }: { data: { item: iTreeNode, index: number }[] }) => (
-                        <div className="tree-node-list">
-                          {data.map(({ item }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>)}
-                        </div>
-                      )
-                    }}
-                  </VirtualList>
-                );
-              } else {
-                const content = (
-                  <div className="tree-node-list">
-                    {treeCore.flatNodeComputedData.value.map((item) => (
-                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>
-                    ))}
-                  </div>
-                );
-                return props.scroll ? <Scroll ref={treeCore.onRef.scroll}>{content}</Scroll> : content;
-              }
-            })()}
-          </div>
-          <LoadingMask modelValue={treeCore.isLoading.isLoading}/>
-        </div>
-      )
-    };
-  },
-});
-
-export const TreeSizeToRowHeight = {
-  mini: 25,
-  small: 25,
-  normal: 33,
-  large: 33,
-} as const;
-
-export default Tree;
+import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
+import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
+import {createTreeCore} from "../TreeCore/createTreeCore";
+import {RenderTreeNode} from "./RenderTreeNode";
+import './tree.scss';
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import {VirtualList} from "../VirtualList";
+import {Scroll} from "../Scroll";
+import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {Empty} from "../Empty";
+import {LoadingMask} from "../LoadingMask";
+import {PlainObject} from "plain-utils/utils/event";
+
+export const Tree = designComponent({
+  name: '-tree',
+  provideRefer: true,
+  props: {
+    ...StyleProps,
+    modelValue: {},
+    expand: { type: Array as PropType<string[]> },        // 展开绑定值
+    showConnector: { type: Boolean, default: true, },     // 是否显示连接线
+    displayBlock: { type: Boolean },                      // 块级显示
+    height: { type: String },                             // 固定高度，可以是百分比。会自动添加一个scroll容器作为滚动展示，(虚拟滚动会自动加上scroll，此时高度默认为100%)
+    renderContent: { type: Function as PropType<(scope: { treeNode: iTreeNode }) => void> }, // 代替作用域插槽自定义渲染内容
+    scroll: { type: Boolean },                            // 是否使用滚动容器
+    innerAttrs: { type: Object as PropType<PlainObject> },// inner 节点属性类型
+    contentWrap: { type: Boolean },                       // 节点内容是否换行显示，默认不换行
+    ...TreePropsOptions,
+  },
+  emits: {
+    ...TreeEmitOptions,
+  },
+  slots: TreeSlotsOption,
+  scopeSlots: TreeScopeSlotsOption,
+  setup({ props, event, scopeSlots, slots }) {
+
+    const { styleComputed } = useStyle();
+
+    const treeCore = createTreeCore({
+      props,
+      event,
+      draggable: {
+        rowClass: getComponentCls('tree-node'),
+        contentClass: 'tree-node-content',
+      }
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('tree'),
+      `tree-size-${styleComputed.value.size}`,
+      {
+        'tree-with-connector': props.showConnector,
+        'tree-display-block': props.displayBlock || props.scroll || props.virtual,
+        'tree-scroll': props.scroll || props.virtual,
+        'tree-content-wrap': props.contentWrap,
+        'tree-no-data': treeCore.isNoData.value,
+        'tree-no-match': treeCore.isNoMatch.value,
+        'tree-expander-cover': props.expanderCover,
+      }
+    ]);
+
+    onMounted(() => {
+      !!props.defaultExpandAll && treeCore.methods.expandAll();
+      treeCore.hooks.onMounted.exec(undefined);
+    });
+
+    onBeforeUnmount(() => {
+      treeCore.dispose();
+    });
+
+    return {
+      refer: {
+        ...treeCore,
+        props,
+        scopeSlots,
+      },
+      render: () => (
+        <div className={classes.value}>
+          <div {...mergeAttrs(
+            { class: 'tree-inner' },
+            props.innerAttrs,
+          )}>
+            {(() => {
+              if (treeCore.isNoData.value) {
+                return slots.noData(<div className="tree-no-data"><Empty noData label={props.noDataText}/></div>);
+              }
+              if (treeCore.isNoMatch.value) {
+                return slots.noMatch(<div className="tree-no-match"><Empty noMatch label={props.noMatchText}/></div>);
+              }
+              if (props.virtual) {
+                return (
+                  <VirtualList data={treeCore.flatNodeComputedData.value} ref={treeCore.onRef.list} size={props.virtualSize != null ? props.virtualSize : TreeSizeToRowHeight[styleComputed.value.size]} dynamicSize={props.virtualDynamicSize}>
+                    {{
+                      content: ({ data }: { data: { item: iTreeNode, index: number }[] }) => (
+                        <div className="tree-node-list">
+                          {data.map(({ item }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>)}
+                        </div>
+                      )
+                    }}
+                  </VirtualList>
+                );
+              } else {
+                const content = (
+                  <div className="tree-node-list">
+                    {treeCore.flatNodeComputedData.value.map((item) => (
+                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>
+                    ))}
+                  </div>
+                );
+                return props.scroll ? <Scroll ref={treeCore.onRef.scroll}>{content}</Scroll> : content;
+              }
+            })()}
+          </div>
+          <LoadingMask modelValue={treeCore.isLoading.isLoading}/>
+        </div>
+      )
+    };
+  },
+});
+
+export const TreeSizeToRowHeight = {
+  mini: 25,
+  small: 25,
+  normal: 33,
+  large: 33,
+} as const;
+
+export default Tree;