plain-design 1.0.0-beta.16 → 1.0.0-beta.161

package/src/packages/components/Toggle/toggle.scss

@@ -1,79 +1,53 @@
 @include prefix(toggle) {
-  background-color: plv(secondary-2);
-  position: relative;
-  outline: none;
-  display: inline-block;
-  vertical-align: middle;
-  user-select: none;
-  transition: background-color 300ms;
-  cursor: pointer;
-  border-radius: 100px;
-
-  .toggle-inner {
-    content: '';
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    bottom: 2px;
-    background: white;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
-    transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-    border-radius: inherit;
-  }
 
-  &:before {
-    position: absolute;
-    left: 2px;
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
-    border-radius: inherit;
+  &:not(.toggle-input-mode-text) {
     background-color: plv(secondary-2);
-    content: "";
-    transform: scaleX(1);
-    /*transform: scale3d(0, 0, 0);*/
-    transition: transform .3s;
-  }
+    position: relative;
+    outline: none;
+    display: inline-block;
+    vertical-align: middle;
+    user-select: none;
+    transition: background-color 300ms;
+    cursor: pointer;
+    border-radius: 100px;
 
-  @include sizeMixin(toggle, ()) {
-    height: calc(#{$height} - 6px);
-    width: calc((#{$height} - 6px) * 52 / 32);
-
-    &.toggle-on {
-      .toggle-inner {
-        left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-      }
-    }
     .toggle-inner {
-      right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
-    }
-    &.toggle-active {
-      .toggle-inner {
-        right: calc((#{$height} - 6px) / 2);
-      }
-
-      &.toggle-on .toggle-inner {
-        left: calc((#{$height} - 6px) / 2);
-      }
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      background: white;
+      box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
+      transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+      border-radius: inherit;
     }
-  }
 
-  &.toggle-square {
-    &, & > .toggle-inner & > :before {
-      border-radius: plv(box-size-normal-border-radius);;
+    &:before {
+      position: absolute;
+      left: 2px;
+      right: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: inherit;
+      background-color: plv(secondary-2);
+      content: "";
+      transform: scaleX(1);
+      /*transform: scale3d(0, 0, 0);*/
+      transition: transform .3s;
     }
 
     @include sizeMixin(toggle, ()) {
       height: calc(#{$height} - 6px);
-      width: calc((#{$height} - 6px) * 52 / 30);
+      width: calc((#{$height} - 6px) * 52 / 32);
 
       &.toggle-on {
         .toggle-inner {
-          left: calc((#{$height} - 6px) / 2 + 8px);
+          left: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
         }
       }
       .toggle-inner {
-        right: calc((#{$height} - 6px) / 2 + 8px);
+        right: calc((#{$height} - 6px) * 52 / 32 - 2px - (#{$height} - 6px - 4px));
       }
       &.toggle-active {
         .toggle-inner {
@@ -85,63 +59,93 @@
         }
       }
     }
-  }
 
-  &.toggle-on {
-    &, &.toggle-square {
-      &:before {
-        transform: scale3d(0, 0, 0);
+    &.toggle-square {
+      &, & > .toggle-inner & > :before {
+        border-radius: plv(box-size-normal-border-radius);;
       }
 
-      .toggle-inner {
-        right: 2px;
+      @include sizeMixin(toggle, ()) {
+        height: calc(#{$height} - 6px);
+        width: calc((#{$height} - 6px) * 52 / 30);
+
+        &.toggle-on {
+          .toggle-inner {
+            left: calc((#{$height} - 6px) / 2 + 8px);
+          }
+        }
+        .toggle-inner {
+          right: calc((#{$height} - 6px) / 2 + 8px);
+        }
+        &.toggle-active {
+          .toggle-inner {
+            right: calc((#{$height} - 6px) / 2);
+          }
+
+          &.toggle-on .toggle-inner {
+            left: calc((#{$height} - 6px) / 2);
+          }
+        }
       }
     }
-  }
 
-  &.toggle-active {
-    &, &.toggle-square {
-      .toggle-inner {
-        left: 2px;
-      }
+    &.toggle-on {
+      &, &.toggle-square {
+        &:before {
+          transform: scale3d(0, 0, 0);
+        }
 
-      &.toggle-on .toggle-inner {
-        right: 2px;
+        .toggle-inner {
+          right: 2px;
+        }
       }
     }
-  }
 
-  @include statusMixin(toggle) {
-    &.toggle-on {
-      background-color: $color-6;
-    }
-    &:after {
-      border-color: $color-6;
-    }
-    /*&:focus {
-      .toggle-inner {
-        background-color: $color-4;
+    &.toggle-active {
+      &, &.toggle-square {
+        .toggle-inner {
+          left: 2px;
+        }
+
+        &.toggle-on .toggle-inner {
+          right: 2px;
+        }
       }
-    }*/
-  }
+    }
 
-  &.toggle-disabled {
-    cursor: not-allowed;
+    @include statusMixin(toggle) {
+      &.toggle-on {
+        background-color: $color-6;
+      }
+      &:after {
+        border-color: $color-6;
+      }
+      /*&:focus {
+        .toggle-inner {
+          background-color: $color-4;
+        }
+      }*/
+    }
 
-    background-color: plv(secondary-3);
+    &.toggle-disabled {
+      cursor: not-allowed;
 
-    &:before {
       background-color: plv(secondary-3);
-    }
 
-    .toggle-inner {
-      background-color: #eee;
-    }
+      &:before {
+        background-color: plv(secondary-3);
+      }
 
-    &.toggle-on {
-      @include statusMixin(toggle) {
-        background-color: $color-3;
+      .toggle-inner {
+        background-color: #eee;
+      }
+
+      &.toggle-on {
+        @include statusMixin(toggle) {
+          background-color: $color-3;
+        }
       }
     }
   }
+
 }

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, mergeAttrs, nextTick, onMounted, onUpdated, PropType, reactive, useClasses, useModel, useRefs, watch} from "plain-design-composition";
-import {debounce} from "plain-utils/utils/debounce";
+import {designComponent, getComponentCls, mergeAttrs, nextTick, onMounted, onUpdated, PropType, reactive, useClasses, useModel, useRefs, watch} from "@peryl/react-compose";
+import {debounce} from "@peryl/utils/debounce";
 import './tooltip.scss';
 import {ThemeSize} from "../../uses/useStyle";
 import {Popup} from "../Popup";

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

@@ -1,4 +1,5 @@
-import {createCounter, designClassComponent, designComponent, onBeforeMount, PropType, useReference} from "plain-design-composition";
+import {designClassComponent, designComponent, onBeforeMount, PropType, useReference} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
 import React from "react";
 import {CSSTransition, SwitchTransition} from "react-transition-group";
 import {findDOMNode} from "react-dom";

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

@@ -1,4 +1,4 @@
-import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClasses, useRefs} from "plain-design-composition";
+import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClasses, useRefs} from "@peryl/react-compose";
 import {Tree} from "./index";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import {Loading} from "../Loading";
@@ -11,7 +11,7 @@ export const RenderTreeNode = designComponent({
   props: {
     multiple: { type: Boolean },
     treeNode: { type: Object as PropType<iTreeNode>, required: true },
-    dataVid: { type: Number },
+    dataVid: { type: String },
   },
   setup({ props }) {
 
@@ -33,7 +33,8 @@ export const RenderTreeNode = designComponent({
     const classes = useClasses(() => [
       getComponentCls('tree-node'),
       {
-        'tree-node-current': tree.state.current === props.treeNode.key,
+        'tree-node-current': !tree.props.disableCurrent && 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(),
@@ -42,6 +43,8 @@ export const RenderTreeNode = designComponent({
 
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
 
     const connectorClassesList = computed(() => {
 
@@ -122,14 +125,14 @@ export const RenderTreeNode = designComponent({
               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}
+                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? leafIcon.value : 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}
+              onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
             >
               <Icon icon="pi-menu"/>
             </div>
@@ -137,6 +140,7 @@ export const RenderTreeNode = designComponent({
           {tree.props.multiple && (
             <div className="tree-node-checker">
               <Checkbox
+                key={props.treeNode.id}
                 checkStatus={checkStatus.value}
                 disabled={!props.treeNode.isCheckAble()}
                 onClick={handler.onClickCheckbox}
@@ -154,7 +158,7 @@ export const RenderTreeNode = designComponent({
           })()}
         </div>
         <div className="tree-node-content" onClick={handler.onClickNodeContent}>
-          {props.treeNode.empty ? i18n('base.noData').d('暂无数据') : (() => {
+          {props.treeNode.empty ? i18n.$it('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;
           })()}

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, mergeAttrs, onBeforeUnmount, onMounted, PropType, useClasses} from "@peryl/react-compose";
 import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
 import {createTreeCore} from "../TreeCore/createTreeCore";
 import {RenderTreeNode} from "./RenderTreeNode";
@@ -10,7 +10,7 @@ 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";
+import {PlainObject} from "@peryl/utils/event";
 
 export const Tree = designComponent({
   name: '-tree',
@@ -26,6 +26,7 @@ export const Tree = designComponent({
     scroll: { type: Boolean },                            // 是否使用滚动容器
     innerAttrs: { type: Object as PropType<PlainObject> },// inner 节点属性类型
     contentWrap: { type: Boolean },                       // 节点内容是否换行显示，默认不换行
+    virtualRowType: { type: String as PropType<'virtualIndex' | 'realIndex'> }, // 虚拟滚动的行渲染类型，virtualIndex意思为使用虚拟的行索引作为key渲染行，好处是虚拟滚动时完全复用行组件实例；realIndex意味着虚拟滚动时新的行会重新初始化
     ...TreePropsOptions,
   },
   emits: {
@@ -92,9 +93,9 @@ export const Tree = designComponent({
                 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 }[] }) => (
+                      content: ({ data }: { data: { item: iTreeNode, index: number, vIndex: number, vid: string }[] }) => (
                         <div className="tree-node-list">
-                          {data.map(({ item }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>)}
+                          {data.map(({ item, vid, index }, vIndex) => <RenderTreeNode key={(props.virtualRowType === 'realIndex') ? index : vIndex} treeNode={item} dataVid={vid} multiple={props.multiple}/>)}
                         </div>
                       )
                     }}
@@ -104,7 +105,7 @@ export const Tree = designComponent({
                 const content = (
                   <div className="tree-node-list">
                     {treeCore.flatNodeComputedData.value.map((item) => (
-                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.flatIndex} multiple={props.multiple}/>
+                      <RenderTreeNode key={item.key} treeNode={item} dataVid={item.key} multiple={props.multiple}/>
                     ))}
                   </div>
                 );

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

@@ -193,9 +193,16 @@
   }
 
   &.tree-expander-cover {
+    @include comp(tree-node) {
+      &:not(.tree-node-lead) {
+        .tree-node-expander {
+          background-color: plv(secondary-2);
+        }
+      }
+    }
+
     .tree-node-expander {
       border-radius: 2px;
-      background-color: plv(secondary-2);
       transform: scale(0.75);
     }
   }

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

@@ -35,6 +35,8 @@ export interface iTreeProps {
   getChildrenData?: (treeNode: iTreeNode | null) => Promise<any[] | null>,
   /*当前高亮的选中行，单选时这个值与modelValue逻辑一致*/
   current?: string,
+  /*禁用高亮当前选中行*/
+  disableCurrent?: boolean,
   /*是否为多选*/
   multiple?: boolean,
   /*单选的时候绑定值类型，last点击的最后一个节点，all所有父子节点*/
@@ -70,7 +72,7 @@ export interface iTreeProps {
   /*判断节点是否可以放置*/
   isAllowDroppable?: (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => boolean | void,
   /*叶子节点图标*/
-  leafIcon: string,
+  leafIcon: string | ((treeNode: iTreeNode) => string),
   /*节点收起时显示图标*/
   folderCollapseIcon: string,
   /*节点展开时显示的图标*/

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

@@ -1,4 +1,4 @@
-import {computed, ComputedRef, reactive, useModel, useRefs, watchEffect} from "plain-design-composition";
+import {computed, ComputedRef, reactive, useModel, useRefs, watchEffect} from "@peryl/react-compose";
 import {iTreeNodeComputedData, iTreeProps, iTreeState} from "./TreeCore.type";
 import {createTreeUtils} from "./createTreeUtils";
 import {formatNodeData2TreeNode} from "./fromatNodeData";
@@ -10,8 +10,8 @@ import {CheckboxStatus} from "../../utils/constant";
 import {createTreeDraggier} from "./createTreeDraggier";
 import {VirtualList} from "../VirtualList";
 import {Scroll} from "../Scroll";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {toArray} from "plain-utils/utils/toArray";
+import {createEffects} from "@peryl/utils/createEffects";
+import {toArray} from "@peryl/utils/toArray";
 
 export function createTreeCore(
   {

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

@@ -1,21 +1,21 @@
 import Scroll from "../Scroll";
 import {iTreeNode} from "./createTreeNode";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iTreeMethods} from "./createTreeMethods";
-import {getComponentCls, iMouseEvent, nextTick, reactive} from "plain-design-composition";
+import {getComponentCls, iMouseEvent, nextTick, reactive} from "@peryl/react-compose";
 import {iElementRect} from "../../utils/getRowEl";
 import {iTreeUtils} from "./createTreeUtils";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useAutoScrollUtils} from "../useAutoScrollUtils";
-import {findParentElement} from "../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
-import {addClass} from "plain-utils/dom/addClass";
+import {addClass} from "@peryl/utils/addClass";
 import {iTreeHooks} from "./createTreeHooks";
 import {ClientZoom} from "../ClientZoom";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export function createTreeDraggier(
   {

package/src/packages/components/TreeCore/createTreeHooks.ts

@@ -1,4 +1,4 @@
-import {createHooks} from "plain-design-composition";
+import {createHooks} from "@peryl/react-compose";
 import {iTreeNode} from "./createTreeNode";
 import {iTreeDragChangeData} from "./createTreeProps";
 

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

@@ -1,8 +1,8 @@
 import {iTreeUtils} from "./createTreeUtils";
 import {iTreeKeyOrNode, iTreeProps, iTreeState} from "./TreeCore.type";
-import {nextTick, toRaw} from "plain-design-composition";
+import {nextTick, toRaw} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iTreeNode} from "./createTreeNode";
 
 export function createTreeMethods(
@@ -254,6 +254,7 @@ export function createTreeMethods(
      * @date    2022/9/22 19:56
      */
     refreshCheckStatus: async (keyOrNode: iTreeKeyOrNode, emitChange = true) => {
+      if (!props.multiple) {return;}
       const checkKeys: string[] = [];
       const unCheckKeys: string[] = [];
       await nextTick();

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

@@ -53,11 +53,11 @@ export function createTreeNode(
   /*设置子节点数据*/
   const setChildrenData = (childrenData: any[] | null | undefined) => {
     const { childrenField, setChildrenData } = props;
-    if (typeof childrenField === "string") {
-      (data as any)[childrenField] = childrenData;
+    if (!!setChildrenData) {
+      setChildrenData(data, childrenData);
     } else {
-      if (!!setChildrenData) {
-        setChildrenData(data, childrenData);
+      if (typeof childrenField === "string") {
+        (data as any)[childrenField] = childrenData;
       } else {
         throw new Error('tree: props.setChildrenData is required when childrenField is function');
       }
@@ -112,6 +112,8 @@ export function createTreeNode(
     /*默认情况下，没有设置isLeaf来判断节点是否为叶子节点的话，则判断是否存在有子节点数据来判断是否为叶子节点，如果子节点数据是一个空数组也视为非叶子节点*/
     return !props.isLeaf ? !childrenData() : props.isLeaf(data);
   };
+  /*叶子节点的图标*/
+  const leafIcon = () => {return typeof props.leafIcon === "string" ? props.leafIcon : props.leafIcon(self);};
   /*是否已经选中*/
   const checkStatus = (): typeof CheckboxStatus.TYPE => getCheckStatus()[key];
   /*是否可选中*/
@@ -134,8 +136,9 @@ export function createTreeNode(
   };
   /*当前节点的文本是否匹配搜索关键词*/
   const isMatchSearch = () => {
+    if (empty) {return false;}
     const { filterMethod, filterText } = props;
-    if (filterText == null) {
+    if (filterText == null || !filterText.trim().length) {
       return true;
     }
     const label = self.label();
@@ -152,7 +155,7 @@ export function createTreeNode(
       return true;
     }
     /*当前节点有子节点匹配搜索关键词*/
-    const children = self.children();
+    const children = self.children().filter(i => !i.empty);
     if (!!children && children.length > 0 && children.some(i => i.isPassFilter())) {
       return true;
     }
@@ -194,6 +197,7 @@ export function createTreeNode(
     setChildrenData,
     children,
     isLeaf,
+    leafIcon,
     checkStatus,
     isCheckAble,
     isExpanded,
@@ -225,6 +229,7 @@ export interface iTreeNode {
   setChildrenData: (childrenData: any[] | null | undefined) => void,      // 设置节点子数据
   children: () => iTreeNode[],                                            // 子节点
   isLeaf: () => boolean,                                                  // 节点是否为叶子节点
+  leafIcon: () => string,                                                 // 叶子节点的图标
   checkStatus: () => typeof CheckboxStatus.TYPE,                          // 节点的选中状态，check选中，uncheck未选中，minus半选
   isCheckAble: () => boolean,                                             // 节点是否可以选中
   isExpanded: () => boolean,                                              // 节点是否已经展开

package/src/packages/components/TreeCore/createTreeProps.ts

@@ -1,7 +1,7 @@
-import {ComponentEvent, PropType} from "plain-design-composition";
+import {ComponentEvent, PropType} from "@peryl/react-compose";
 import {iTreeProps} from "./TreeCore.type";
 import {iTreeNode} from "./createTreeNode";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const TreePropsOptions = {
   data: { type: Array as PropType<iTreeProps["data"]> },
@@ -15,6 +15,7 @@ export const TreePropsOptions = {
   lazy: { type: Boolean as PropType<iTreeProps["lazy"]> },
   getChildrenData: { type: Function as PropType<iTreeProps["getChildrenData"]> },
   current: { type: String as PropType<iTreeProps["current"]> },
+  disableCurrent: { type: Boolean as PropType<iTreeProps["disableCurrent"]> },
   multiple: { type: Boolean as PropType<iTreeProps["multiple"]> },
   singleValueType: { type: String as PropType<iTreeProps['singleValueType']> },
   checkLast: { type: Boolean as PropType<iTreeProps['checkLast']>, default: null },
@@ -32,7 +33,7 @@ export const TreePropsOptions = {
   customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
   isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
   isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
-  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
+  leafIcon: { type: [String, Function] as PropType<iTreeProps["leafIcon"]>, default: 'pi-drive-file' as string },
   folderCollapseIcon: { type: String as PropType<iTreeProps["folderCollapseIcon"]>, default: 'pi-caret-right' as string },
   folderExpandIcon: { type: String as PropType<iTreeProps["folderExpandIcon"]>, default: 'pi-down' as string },
   expanderCover: { type: Boolean as PropType<iTreeProps["expanderCover"]>, default: true },

package/src/packages/components/TreeCore/createTreeUtils.ts

@@ -1,7 +1,7 @@
 import {iTreeKeyOrNode, iTreeNodeComputedData, iTreeProps} from "./TreeCore.type";
 import {iTreeNode} from "./createTreeNode";
-import {toArray} from "plain-utils/utils/toArray";
-import {iterate as utilsIterate} from "../../utils/iterate";
+import {toArray} from "@peryl/utils/toArray";
+import {iterate as utilsIterate} from "@peryl/utils/iterate";
 import {eTreeDropType} from "./createTreeDraggier";
 
 export function createTreeUtils(

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

@@ -1,4 +1,4 @@
-import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "@peryl/react-compose";
 import {Icon} from "../Icon";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import './tree-node-with-menu.scss';
@@ -14,6 +14,7 @@ export const TreeNodeWithMenu = designComponent({
     treeNode: { type: Object as PropType<iTreeNode>, required: true },
     dropdownOptions: { type: Array as PropType<iTreeNodeWithMenuOption[]> },
     dropdownAttrs: { type: Object as PropType<ComponentPropsType<typeof Dropdown>> },
+    hideButton: { type: Boolean },
   },
   setup({ props }) {
 
@@ -56,6 +57,9 @@ export const TreeNodeWithMenu = designComponent({
       <div className={classes.value}>
         <div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
         {(() => {
+          if (props.hideButton) {
+            return;
+          }
           let btn = (
             <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
               <Icon icon="pi-drag-dot-vertical"/>
@@ -69,7 +73,7 @@ export const TreeNodeWithMenu = designComponent({
                 v-slots={{
                   default: () => btn,
                   popper: () => (
-                    props.dropdownOptions!.map((option, index) => {
+                    props.dropdownOptions?.map((option, index) => {
                       const { renderDefault, renderContent, ...leftOption } = option;
                       const vSlots = {} as any;
                       if (!!renderDefault) {vSlots.default = () => renderDefault();}

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -1,4 +1,4 @@
-import {iMouseEvent, RenderNode} from "plain-design-composition";
+import {iMouseEvent, RenderNode} from "@peryl/react-compose";
 
 export interface iTreeNodeWithMenuOption {
   label?: string,

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

@@ -1,6 +1,6 @@
 import './triangle.scss';
-import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, onMounted, PropType, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 
 const DirectionMap = {
   top: 'bottom',