plain-design 1.0.0-beta.98 → 3.0.0

package/src/packages/components/Tag/tag.scss

@@ -14,7 +14,7 @@
     padding: 0 4px;
   }
 
-  .#{componentName(loading)}, .#{componentName(icon)} {
+  & > .#{componentName(loading)}, & > .#{componentName(icon)}, & > .tag-close-wrapper {
     &:last-child {
       cursor: pointer;
       margin-left: 4px;
@@ -24,4 +24,13 @@
       margin-right: 4px !important;
     }
   }
+
+  .tag-close-wrapper {
+    vertical-align: middle;
+    height: 1em;
+    width: 1em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, useClasses, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClasses, useStyles} from "@peryl/react-compose";
 import {getPrimaryColor} from "../PageThemeUtils";
 import './theme-color.scss';
 

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import Dropdown from "../Dropdown";
 import {ThemeColor} from "../ThemeColor";
 import PageThemeUtils from "../PageThemeUtils";

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

@@ -1,9 +1,8 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import i18n from "../i18n";
 import Tooltip from "../Tooltip";
 import PageThemeUtils from "../PageThemeUtils";
 import Icon from "../Icon";
-import './theme-dark-selector.scss';
 
 export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',

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

@@ -1,13 +1,13 @@
 import './theme-editor.scss';
-import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import Icon from "../Icon";
 import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {Select} from '../Select';
 import {SelectOption} from "../SelectOption";
 import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
 import ClientZoom from "../ClientZoom";
-import {addWindowListener} from 'plain-utils/dom/addWindowListener';
+import {addWindowListener} from '@peryl/utils/addWindowListener';
 import i18n from "../i18n";
 import Button from "../Button";
 

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

@@ -1,9 +1,8 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import Icon from "../Icon";
 import i18n from "../i18n";
-import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',

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

@@ -1,11 +1,10 @@
-import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
 import Icon from "../Icon";
 import {ThemeShape} from "../../uses/useStyle";
 import PageThemeUtils from "../PageThemeUtils";
-import './theme-shape-selector.scss';
 
 export const ThemeShapeSelector = designComponent({
   name: 'theme-shape-selector',

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

@@ -1,10 +1,9 @@
-import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
 import Icon from "../Icon";
 import PageThemeUtils from "../PageThemeUtils";
-import './theme-size-selector.scss';
 import {ThemeSize} from "../../uses/useStyle";
 
 export const ThemeSizeSelector = designComponent({

package/src/packages/components/TimePicker/createRangeTimeRender.tsx

@@ -1,11 +1,11 @@
 import Input from "../Input";
 import {TimePanel} from "./panel/TimePanel";
 import {tTimeCompositionParams} from "./time.utils";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createRangeTimeRender(params: tTimeCompositionParams,) {
@@ -48,7 +48,7 @@ export function createRangeTimeRender(params: tTimeCompositionParams,) {
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard<iKeyboardEvent>({
       enter: () => popper.methods.toggle(),
       esc: () => popper.methods.hide(),
     })(e),

package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx

@@ -2,11 +2,11 @@ import {tTimeCompositionParams} from "./time.utils";
 import Input from "../Input";
 import {TimeRangePanelType} from "./panel/TimeRangePanel";
 import {TimePanel} from "./panel/TimePanel";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
@@ -71,7 +71,7 @@ export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard<iKeyboardEvent>({
       enter: () => {
         utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
       },

package/src/packages/components/TimePicker/createSingleTimeRender.tsx

@@ -1,22 +1,21 @@
 import {TimePanel} from "./panel/TimePanel";
 import Input from "../Input";
-import {computed, getComponentCls, reactive, useModel, useRefs} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
 import {TimePanelLayout} from "./panel/TimeBasePanel";
-import {debounce} from "plain-utils/utils/debounce";
+import {debounce} from "@peryl/utils/debounce";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
 
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const reference = useRenderReference();
-  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) });
-  const format = computed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
   const state = reactive({
     input: format.value?.getDisplay(),
     hoverColumnType: null as null | TimePanelLayout,

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

@@ -1,4 +1,4 @@
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {TimeBaseColumn} from "./panel/TimeBaseColumn";
 import {TimeBasePanel} from "./panel/TimeBasePanel";
 import {TimePanel} from "./panel/TimePanel";

package/src/packages/components/TimePicker/panel/TimeBaseColumn.tsx

@@ -1,8 +1,8 @@
-import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from 'plain-design-composition';
+import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from '@peryl/react-compose';
 import './time-base-column.scss';
-import {zeroize} from "plain-utils/string/zeroize";
-import {delay} from "plain-utils/utils/delay";
-import {findOne} from "plain-utils/object/findOne";
+import {zeroize} from "@peryl/utils/zeroize";
+import {delay} from "@peryl/utils/delay";
+import {findOne} from "@peryl/utils/findOne";
 import {EditProps, useEdit} from "../../../uses/useEdit";
 import Scroll from "../../Scroll";
 

package/src/packages/components/TimePicker/panel/TimeBasePanel.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls} from '@peryl/react-compose';
 import './time-base-panel.scss';
 import {TimePublicProps} from "./time-panel.utils";
 import {plainDate} from "../../../utils/plainDate";

package/src/packages/components/TimePicker/panel/TimePanel.tsx

@@ -1,8 +1,8 @@
 import './time-range-panel.scss';
 import {TimePublicProps} from "./time-panel.utils";
-import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "@peryl/react-compose";
 import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
 
 export const TimePanelProps = {

package/src/packages/components/TimePicker/panel/TimeRangePanel.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, useModel} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useModel} from "@peryl/react-compose";
 import {TimePublicProps} from "./time-panel.utils";
 import {plainDate} from "../../../utils/plainDate";
 import {TimeBasePanel, TimePanelLayout} from "./TimeBasePanel";

package/src/packages/components/TimePicker/panel/time-panel.utils.ts

@@ -1,4 +1,4 @@
-import {PropType} from "plain-design-composition";
+import {PropType} from "@peryl/react-compose";
 
 export const TimePublicProps = {
   displayFormat: { type: String, },                                                     // 显示值格式化字符串

package/src/packages/components/TimePicker/time.utils.ts

@@ -1,6 +1,6 @@
 import {useTimeHooks} from "./useTimeHooks";
 import {PDate} from "../../utils/plainDate";
-import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "@peryl/react-compose";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
 import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {TimePanelProps} from "./panel/TimePanel";

package/src/packages/components/TimePicker/useRangeTimeRender.tsx

@@ -1,23 +1,23 @@
-import {computed, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {useFocusHandler} from "../../uses/useFocusHandler";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {TimePanelLayout} from "./panel/TimeBasePanel";
 import {TimeRangePanelType} from "./panel/TimeRangePanel";
 import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
-import {debounce} from "plain-utils/utils/debounce";
+import {debounce} from "@peryl/utils/debounce";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 
 export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, }, { effects });
   const reference = useRenderReference();
-  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
-  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
+  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
+  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);
 
   const { isFocus } = useFocusHandler({
+    effects,
     getEls: () => [refs.start, refs.end],
     /**
      * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
@@ -33,7 +33,7 @@ export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern,
     onFocus: emit.onFocus,
   });
 
-  const format = computed((): { start: null | PDate, end: null | PDate } => ({
+  const format = effectComputed((): { start: null | PDate, end: null | PDate } => ({
     start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
     end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
   }));

package/src/packages/components/TimePicker/useTimeHooks.ts

@@ -1,4 +1,4 @@
-import {createSyncHooks, RenderNode} from "plain-design-composition";
+import {createSyncHooks, RenderNode} from "@peryl/react-compose";
 
 export function useTimeHooks() {
   return {

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

@@ -1,9 +1,9 @@
-import {computed, designComponent, getComponentCls, iFocusEvent, iKeyboardEvent, iMouseEvent, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iFocusEvent, iKeyboardEvent, iMouseEvent, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import {useClickWave} from "../../directives/ClickWave";
 import './toggle.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {getKey, KEY} from "../KeyboardService";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import i18n from "../i18n";
 
 export const Toggle = designComponent({
@@ -79,8 +79,8 @@ export const Toggle = designComponent({
         emit.onClick(e);
       },
       keydown: (e: iKeyboardEvent) => {
-        const key = getKey(e);
-        if (key === KEY.space || key === KEY.enter) {
+        const key = getKeyNameByKeyboardEvent(e);
+        if (key === eKeyboardKeys.space || key === eKeyboardKeys.enter) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);

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,5 +1,5 @@
-import {designClassComponent, designComponent, onBeforeMount, PropType, useReference} from "plain-design-composition";
-import {createCounter} from 'plain-utils/utils/createCounter';
+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";
@@ -33,7 +33,7 @@ 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,
@@ -44,6 +44,7 @@ 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(() => {
 
@@ -124,7 +125,7 @@ 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>

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',

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 "plain-utils/dom/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(

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-drive-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 "plain-utils/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"/>

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,