plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +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;

package/src/packages/components/Tree/tree.scss

@@ -0,0 +1,252 @@
+@include comp(tree-node) {
+  display: flex;
+  align-items: center;
+  line-height: 22px;
+  padding-bottom: 1px;
+  position: relative;
+
+  .tree-node-operator > div, .tree-node-content {
+    transition: background-color linear 150ms, color linear 150ms;
+  }
+
+  .tree-node-operator {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    user-select: none;
+    color: plv(text-3);
+
+    & > div:not(:last-child) {
+      margin-right: 4px;
+    }
+
+    .tree-node-connector, .tree-node-expander, .tree-node-checker, .tree-node-draggier {
+      height: 20px;
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 99px;
+
+      &:hover:not(.tree-node-connector) {
+        background-color: plv(background-hover);
+        cursor: pointer;
+      }
+    }
+
+    .tree-node-connector {
+      position: relative;
+
+      &:before, &:after {
+        background-color: #ccc;
+        //background-color: #DCE0E6;
+      }
+
+      &.tree-node-connector-x {
+        &:after {
+          position: absolute;
+          top: 50%;
+          left: 8.5px;
+          height: 1px;
+          width: 6px;
+          content: '';
+          transform: scaleY(0.5);
+        }
+      }
+
+      &.tree-node-connector-y {
+        &:before {
+          position: absolute;
+          content: '';
+          width: 1px;
+          left: 8px;
+          top: 0;
+          bottom: -14px;
+          transform: scaleX(0.5);
+        }
+
+        &.tree-node-connector-y-prev {
+          &:before {
+            height: 50%;
+            bottom: initial;
+          }
+        }
+
+        &.tree-node-connector-y-next {
+          &:before {
+            //height: 50%;
+            //top: initial;
+          }
+        }
+      }
+
+      &.tree-node-connector-hide {
+        opacity: 0;
+      }
+    }
+  }
+
+  .tree-node-content {
+    padding: 5px 8px;
+    color: plv(text-2);
+  }
+
+  .tree-node-operator, .tree-node-content {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    border-radius: plv(border-radius-normal);
+    content: '';
+    transition: background-color ease 0.3s;
+  }
+
+  &:hover:not(.tree-node-current):not(.tree-node-single-check) {
+    cursor: pointer;
+
+    &:after {
+      background-color: plv(background-hover);
+      content: '';
+    }
+  }
+
+  &.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
+
+    .tree-node-operator, .tree-node-content {
+      color: plv(primary-6);
+    }
+
+    &:after {
+      background-color: plv(primary-light-1);
+      content: '';
+    }
+  }
+
+  .tree-node-draggier {
+    &:hover {
+      background-color: plv(background-hover);
+      cursor: move;
+    }
+
+    &.tree-node-draggier-disable {
+      border-radius: 0;
+      background-color: plv(background-hover);
+      @include prefix(icon) {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+@include comp(tree) {
+  display: block;
+  min-height: 80px;
+
+  .tree-inner {
+    display: inline-block;
+    position: relative;
+    min-height: 50px;
+    min-width: 50px;
+  }
+
+  &.tree-display-block {
+    .tree-inner {
+      display: block;
+      min-width: initial;
+
+      @include prefix(tree-node) {
+        .tree-node-content {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  &.tree-scroll {
+    height: 100%;
+
+    .tree-inner {
+      height: 100%;
+    }
+  }
+
+  &:not(.tree-content-wrap) {
+    .tree-node-content {
+      white-space: nowrap;
+    }
+  }
+
+  .tree-no-data, .tree-no-match {
+    text-align: center;
+    padding: 16px 0;
+    color: plv(text-3);
+  }
+
+  &.tree-expander-cover {
+    .tree-node-expander {
+      border-radius: 2px;
+      background-color: plv(secondary-2);
+      transform: scale(0.75);
+    }
+  }
+
+  /*---------------------------------------connector-------------------------------------------*/
+  &:not(.tree-with-connector) {
+    @include prefix(tree-node) {
+      .tree-node-connector {
+        &:before, &:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------size-------------------------------------------*/
+  &.tree-size-large, &.tree-size-normal {
+    @include prefix(tree-node) {
+      line-height: 22px;
+      font-size: plv(font-size-normal);
+      .tree-node-content {
+        padding: 5px 8px;
+      }
+    }
+  }
+  &.tree-size-small, &.tree-size-mini {
+    @include prefix(tree-node) {
+      line-height: 20px;
+      font-size: plv(font-size-small);
+      .tree-node-content {
+        padding: 2px 4px;
+      }
+    }
+  }
+
+  @include sizeMixin(tree, ()) {
+    .tree-node-content {
+      border-radius: plv(box-size-#{$name}-border-radius);
+    }
+  }
+}
+
+@include comp(tree-draggier-indicator) {
+  position: fixed;
+  pointer-events: none;
+  z-index: 10;
+
+  &[data-available=true] {
+    background-color: plv(primary-6);
+  }
+  &[data-available=false] {
+    background-color: plv(error-6);
+  }
+}

package/src/packages/components/TreeCore/TreeCore.type.tsx

@@ -0,0 +1,138 @@
+/**
+ * 树形树形配置
+ * @author  韦胜健
+ * @date    2022/9/20 14:54
+ */
+import {iTreeNode} from "./createTreeNode";
+import {CheckboxStatus} from "../../utils/constant";
+import {eTreeDropType} from "./createTreeDraggier";
+import {ThemeSize} from "../../uses/useStyle";
+
+export interface iTreeProps {
+  /*选中绑定值，单选时为绑定对象，多选是为绑定对象数组*/
+  modelValue?: any,
+  /*展开绑定值，一直都是key字符串数组*/
+  expand?: string[],
+  /*树形数据*/
+  data?: any[] | undefined | null,
+  /*行数据的唯一标识所在字段属性名称*/
+  keyField: undefined | null | string | ((nodeData: any) => string),
+  /*行数据文本字段*/
+  labelField: string | ((nodeData: any) => string),
+  /*行数据子节点字段*/
+  childrenField: string | ((nodeData: any) => any[] | null | undefined),
+  /*当childrenField为函数时，需要实现这个函数，以便于在拖拽移动节点或者懒加载数据的时候给节点设置子节点数据*/
+  setChildrenData?: (nodeData: any, childrenData: any[] | null | undefined) => void,
+  /*行数据是否可以选中*/
+  isCheckAble?: (nodeData: any) => boolean,
+  /*行数据是否为叶子节点*/
+  isLeaf?: (nodeData: any) => boolean,
+  /*自定义筛选函数*/
+  filterMethod?: (nodeData: any, filterText: string) => boolean,
+  /*是否为懒加载子节点数据*/
+  lazy?: boolean,
+  /*加载子节点数据*/
+  getChildrenData?: (treeNode: iTreeNode | null) => Promise<any[] | null>,
+  /*当前高亮的选中行，单选时这个值与modelValue逻辑一致*/
+  current?: string,
+  /*是否为多选*/
+  multiple?: boolean,
+  /*单选的时候绑定值类型，last点击的最后一个节点，all所有父子节点*/
+  singleValueType?: 'last' | 'all',
+  /*只能选中最后一级*/
+  checkLast?: boolean,
+  /*在显示复选框的情况下，是否严格遵循父子互不关联的做法，默认为false*/
+  checkStrictly?: boolean,
+  /*是否每次只展开一个同级的树节点*/
+  according?: boolean,
+  /*展开节点的时候，是否自动展开父节点*/
+  autoExpandParent: boolean,
+  /*关闭节点的时候，是否自动关闭其下所有子节点*/
+  autoCollapseChildren: boolean,
+  /*是否选中(取消选中)节点的时候自动选中(取消选中)其下子节点*/
+  autoCheckChildren: boolean,
+  /*是否在选中(取消选中)节点的时候自动选中(取消选中)其下子节点*/
+  autoCheckParent: boolean,
+  /*是否点击树节点的时候展开子节点*/
+  expandOnClickNode?: boolean,
+  /*是否点击树节点的时候选中节点*/
+  checkOnClickNode?: boolean,
+  /*是否默认展开所有节点*/
+  defaultExpandAll?: boolean,
+  /*节点图标*/
+  getNodeIcon?: (node: iTreeNode) => string,
+  /*是否开启拖拽节点功能*/
+  draggable?: boolean,
+  /*自定义draggier按钮*/
+  customDraggier?: boolean,
+  /*判断节点是否可以拖拽*/
+  isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
+  /*判断节点是否可以放置*/
+  isAllowDroppable?: (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => boolean | void,
+  /*叶子节点图标*/
+  leafIcon: string,
+  /*节点收起时显示图标*/
+  folderCollapseIcon: string,
+  /*节点展开时显示的图标*/
+  folderExpandIcon: string,
+  /*展开按钮一直显示背景*/
+  expanderCover: boolean,
+  /*是否开启整个树的加载状态*/
+  loading?: boolean,
+  /*筛选关键词*/
+  filterText?: string | null | undefined,
+  /*是否为虚拟滚动*/
+  virtual?: boolean,
+  /*虚拟滚动的情况下，节点高度*/
+  virtualSize?: number,
+  /*大小尺寸*/
+  size?: typeof ThemeSize.TYPE
+  /*虚拟滚动下，是否为动态高度*/
+  virtualDynamicSize?: boolean,
+  /*无匹配搜搜词提示文本*/
+  noMatchText?: string,
+  /*无数据提示文本*/
+  noDataText?: string,
+  /*节点图标*/
+  nodeIcon?: (treeNode: iTreeNode) => string
+}
+
+/**
+ * TreeCode内部状态
+ * @author  韦胜健
+ * @date    2022/9/20 14:54
+ */
+export interface iTreeState {
+  /*选中*/
+  checkedMap: Record<string, boolean | undefined>,
+  /*展开*/
+  expandedMap: Record<string, boolean | undefined>,
+  /*加载中*/
+  loadingMap: Record<string, boolean | undefined>,
+  /*懒加载完毕*/
+  loadedMap: Record<string, boolean | undefined>,
+  /*当前高亮选中行*/
+  current: string | undefined,
+
+  setLoading: (treeNode: iTreeNode, flag: boolean) => void,
+  setLoaded: (treeNode: iTreeNode, flag: boolean) => void,
+
+  singleCheckType: { singleValueType: 'all' | 'last', checkLast: boolean },
+}
+
+export type iTreeKeyOrNode = null | undefined | string | iTreeNode | (null | undefined | string | iTreeNode)[]
+
+export type iTreeKey2CheckStatus = Record<string, typeof CheckboxStatus.TYPE>
+
+export interface iTreeNodeComputedData {
+  treeNodeList: iTreeNode[],
+  key2treeNode: Record<string, iTreeNode | undefined>,
+  data: any[] | undefined | null,
+}
+
+export const TreeScopeSlotsOption = {
+  default: (scope: { treeNode: iTreeNode, index: number }) => {},
+  tree: (treeAttrs: any) => {},
+} as const;
+
+export const TreeSlotsOption = ['noData', 'noMatch'] as const;