plain-design 1.0.0-beta.99 → 3.0.0

package/src/packages/components/Table/plc/use/useTableAutoSpan.tsx

@@ -0,0 +1,112 @@
+import {computed, inject, provide} from "@peryl/react-compose";
+import {Table} from "../../index";
+
+export function useTableAutoSpan(getConfig: () => { data: Record<string, any>[] }) {
+
+  const table = Table.use.inject(null);
+
+  const spans = computed(() => {
+    const { data } = getConfig();
+    const bodyPlcList = table?.bodyPlcList.value;
+    if (!bodyPlcList) {return null;}
+    const rowSpanFields = Array.from(new Set(bodyPlcList.filter(i => i.props.autoRowSpan && !!i.props.field).map(i => i.props.field!)));
+    const colSpanFields = Array.from(new Set(bodyPlcList.filter(i => i.props.autoColSpan && !!i.props.field).map(i => i.props.field!)));
+    // console.log({ data, rowSpanFields, colSpanFields, });
+    const spans = calcSpans(data, { rowSpanFields, colSpanFields });
+    // console.log(spans);
+    return { spans, data };
+  });
+
+  provide('@@TABLE_AUTO_SPAN', spans);
+
+  return spans;
+}
+
+export function injectTableAutoSpan() {
+  return inject('@@TABLE_AUTO_SPAN') as ReturnType<typeof useTableAutoSpan>;
+}
+
+export const calcRowSpans = (data: Record<string, any>[], fields: string[]) => {
+
+  /*结果数组，每行数据都记录下每个字段的span值*/
+  const resultSpanMap: Record<string, number>[] = [];
+
+  /*遍历每一行数据的时候，记录下要合并的字段，如果字段值变了则记录下这条数据的rowIndex到prevIndex[field]，也就是 prevIndex[field] = rowIndex*/
+  const prevIndex: any = fields.reduce((prev, field) => (prev[field] = 0, prev), {} as Record<string, number>);
+
+  /*遍历每一行数据时，先初始化一个rowSpanMap，以这个为原始模板*/
+  const templateRowMap = fields.reduce((prev, field) => (prev[field] = 1, prev), {} as Record<string, number>);
+
+  data.forEach((row, rowIndex) => {
+
+    const rowSpanMap = { ...templateRowMap };
+
+    /*第一条数据任何字段的span都不可能为0，从第二条数据开始，字段值相同的field才会设置span为0实现合并单元格的功能*/
+    if (rowIndex === 0) {
+      resultSpanMap.push(rowSpanMap);
+      return;
+    }
+
+    /*遍历每一个要合并的字段*/
+    fields.forEach((field, fieldIndex) => {
+      if (
+        /*字段值，与上一条数据字段的值相同，并且*/
+        row[field] === data[prevIndex[field]][field] && (
+          /*是第一个合并的字段，或者上一个合并的字段是合并状态*/
+          fieldIndex == 0 || (rowSpanMap[fields[fieldIndex - 1]] === 0)
+        )
+      ) {
+        /*当前字段应该合并*/
+        resultSpanMap[prevIndex[field]][field]++;
+        rowSpanMap[field] = 0;
+      } else {
+        /*字段值不一样，标记新的记录下这个新的rowIndex，后续合并字段都操作这个rowIndex来实现*/
+        prevIndex[field] = rowIndex;
+      }
+    });
+
+    resultSpanMap.push(rowSpanMap);
+  });
+
+  return data.map((_, rowIndex) => resultSpanMap[rowIndex]);
+};
+
+export const calcColSpans = (data: Record<string, any>[], fields: string[]) => {
+  const resultSpanMap: Record<string, any>[] = [];
+
+  data.forEach((row) => {
+    const colSpanMap: Record<string, number> = {};
+    let prevField: any = null;
+    fields.forEach((field, fieldIndex) => {
+
+      /*第一个字段的colSpan不可能为0*/
+      if (fieldIndex === 0) {
+        prevField = field;
+        colSpanMap[field] = 1;
+        return;
+      }
+
+      if (
+        /*当前字段的值与上一个字段的值相等，则当前字段应该合并*/
+        row[prevField] === row[field]
+      ) {
+        colSpanMap[field] = 0;
+        colSpanMap[prevField]++;
+      } else {
+        /*当前字段与上一个字段值不相等，则标记当前字段为新的起始位置*/
+        colSpanMap[field] = 1;
+        prevField = field;
+      }
+
+    });
+    resultSpanMap.push(colSpanMap);
+  });
+
+  return data.map((_, rowIndex) => resultSpanMap[rowIndex]);
+};
+
+export const calcSpans = (data: Record<string, any>[], config: { rowSpanFields?: string[], colSpanFields?: string[] }) => {
+  const rowSpans = !config.rowSpanFields?.length ? null : calcRowSpans(data, config.rowSpanFields);
+  const colSpans = !config.colSpanFields?.length ? null : calcColSpans(data, config.colSpanFields);
+  return data.map((_, rowIndex) => ({ row: rowSpans?.[rowIndex], col: colSpans?.[rowIndex] }));
+};

package/src/packages/components/Table/plc/useTablePlc.tsx

@@ -1,13 +1,13 @@
 import {iTablePropsType, iTableSlotsType} from "../table/utils/table.utils";
 import {iTableHooks} from "../table/utils/createTableHooks";
-import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "plain-design-composition";
+import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "@peryl/react-compose";
 import {PlcGroup} from "../../PlcGroup";
 import {TablePlcFixedType, tPlc, tPlcType} from "./utils/plc.utils";
-import {runOnce} from "plain-utils/utils/runOnce";
+import {runOnce} from "@peryl/utils/runOnce";
 import {formatPlcList, tPlcData} from "./formatPlcList";
 import {OpenController} from "../../../utils/OpenController";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {throttle} from "plain-utils/utils/throttle";
+import {createEffects} from "@peryl/utils/createEffects";
+import {throttle} from "@peryl/utils/throttle";
 
 export function useTablePlc(
   {
@@ -47,6 +47,8 @@ export function useTablePlc(
     getPlcTypeArr: null as null | (() => tPlcType[]),
   });
 
+  onBeforeUnmount(() => {state.getTableEl = null;});
+
   hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
 
   (() => {
@@ -107,6 +109,7 @@ export function useTablePlc(
   const virtualFlatPlcList = (() => {
     const state = reactive({ scrollLeft: 0 });
     const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
+    onBeforeUnmount(() => {setScrollLeft.dispose();});
     hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
     return computed((): tPlc[] => {
       if (!plcData.value) {return [];}

package/src/packages/components/Table/plc/utils/plc.render.ts

@@ -1,4 +1,4 @@
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 import {tPlc, tPlcType} from "./plc.utils";
 import {iTableCellRenderScope, iTableNode} from "../../table/utils/table.utils";
 

package/src/packages/components/Table/plc/utils/plc.scope-slots.ts

@@ -1,5 +1,5 @@
 import {iTableCellRenderScope} from "../../table/utils/table.utils";
-import {RenderNode, tScopeSlotsType, tSlotsType} from "plain-design-composition";
+import {RenderNode, tScopeSlotsType, tSlotsType} from "@peryl/react-compose";
 import {tPlcType} from "./plc.utils";
 
 export type PlcRenderFunction = (scope: iTableCellRenderScope) => RenderNode

package/src/packages/components/Table/plc/utils/plc.utils.ts

@@ -1,12 +1,12 @@
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, StyleProperties} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, StyleProperties} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 import {PlcPropsHead, tPlcScopeSlots, tPlcSlots} from "./plc.scope-slots";
 import {FormItemValidatePropsOption} from "../../../Form/validate/validate.utils";
 import {iTableCellRenderScope, iTableNode} from "../../table/utils/table.utils";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {PlainObject} from "plain-utils/utils/event";
-import {omit} from "plain-utils/object/omit";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {PlainObject} from "@peryl/utils/event";
+import {omit} from "@peryl/utils/omit";
+import {createCounter} from "@peryl/utils/createCounter";
 import {iFilterOption} from "../../../FilterService/utils/filter.service.utils";
 import {AsyncFormatter} from "../../../AsyncFormatter";
 import {Formatter} from "../../../Formatter";
@@ -36,6 +36,7 @@ export const PlcGroupPropsOptions = {
   noPadding: { type: Boolean },                                             // 是否不兼容表格的虚拟滚动功能
   colDraggable: { type: Boolean, default: null },                           // 列是否可以拖拽排序
   link: { type: Boolean },                                                  // 超链接样式
+  tip: { type: [String, Function] as PropType<string | (() => any)> },      // 提示说明
 
   hide: { type: Boolean },                                                  // 是否隐藏
   order: { type: [String, Number] },                                        // 列排序
@@ -71,6 +72,8 @@ export const PlcPropsOptions = {
   hideInForm: { type: Boolean },                                            // 是否再表单编辑中显示
   formLabel: { type: String },                                              // 在表单编辑中的label文本
   overflowTooltip: { type: Boolean },                                       // 是否在内容文本溢出之后使用tooltip显示
+  autoRowSpan: { type: Boolean },                                           // 字段值相同则自动合并行
+  autoColSpan: { type: Boolean },                                           // 字段值相同则自动合并列
 
   // 编辑相关
   ...PlcValidatePropsOption,                                                // 校验属性

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.hooks.tsx

@@ -1,10 +1,10 @@
-import {createHooks, createSyncHooks, RenderNode} from "plain-design-composition";
+import {createHooks, createSyncHooks, RenderNode} from "@peryl/react-compose";
 import {iTableCellRenderScope, iTableRowRenderScope} from "../../table/utils/table.utils";
 
 export function createPlcCheckHooks() {
   return {
-    onRenderNormal: createSyncHooks<(data: { scope: iTableCellRenderScope, content: RenderNode }) => void>(),
-    onRenderHead: createSyncHooks<(renderNode: RenderNode) => void>(),
+    onRenderNormal: createSyncHooks<(data: { scope: iTableCellRenderScope, content: RenderNode }) => void>(true),
+    onRenderHead: createSyncHooks<(renderNode: RenderNode) => void>(true),
     onClickRow: createHooks<(data: { rowRenderScope: iTableRowRenderScope }) => void>(),
 
     onTriggerCheckAll: createHooks(),

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.multiple.tsx

@@ -1,12 +1,11 @@
 import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
-import {computed, reactive, toRaw, useModel} from "plain-design-composition";
-import {toArray} from "plain-utils/utils/toArray";
-import {PlainObject} from "plain-utils/utils/event";
+import {createEffectsOfReaction, reactive, toRaw, useModel} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
+import {PlainObject} from "@peryl/utils/event";
 import {iTableRowRenderScope} from "../../table/utils/table.utils";
 import {CheckboxStatus} from "../../../../utils/constant";
 import {Checkbox} from "../../../Checkbox";
 import {iPlcCheckHooks} from "./PlcCheck.hooks";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {iTableRefer} from "../../table/Table";
 import {Badge} from "../../../Badge";
 import {Dropdown} from "../../../Dropdown";
@@ -16,7 +15,7 @@ import {Table} from "../../index";
 import {PlcCheck} from "./PlcCheck";
 import {findReactElement} from "../../../../utils/findReactElement";
 import {$message} from "../../../$message";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {tPlc} from "../../plc/utils/plc.utils";
 import {deepCloneRenderNode} from "../../../../utils/deepCloneRenderNode";
 import {nextPlcExcludeCode, PlcExclusion} from "../PlcExclusion";
@@ -37,21 +36,21 @@ export function usePlcCheckMultiple(
   }
 ) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   /**
    * 双向绑定值
    * @author  韦胜健
    * @date    2022.11.27 16:36
    */
-  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any);
+  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
 
   /**
    * 已经选中的keys
    * @author  韦胜健
    * @date    2022.11.27 16:36
    */
-  const checkKeys = computed(() => {
+  const checkKeys = effectComputed(() => {
     if (!model.value) {return {};}
     return toArray(model.value).reduce((prev, item) => {
       prev[item[props.field]] = true;

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.single.tsx

@@ -1,10 +1,9 @@
 import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
-import {useModel} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iTableRowRenderScope} from "../../table/utils/table.utils";
 import {Radio} from "../../../Radio";
 import {CheckboxStatus} from "../../../../utils/constant";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {iPlcCheckHooks} from "./PlcCheck.hooks";
 import {iTableRefer} from "../../table/Table";
 
@@ -22,14 +21,14 @@ export function usePlcCheckSingle(
   }
 ) {
 
-  const { effects } = createEffects();
+  const { effects } = createEffectsOfReaction();
 
   /**
    * 双向绑定值
    * @author  韦胜健
    * @date    2022.11.27 16:36
    */
-  const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any);
+  const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
 
   const utils = {
     /**

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
 import {usePlc} from "../../plc/use/usePlc";
 import {injectPlainTable} from "../../table/Table";
@@ -7,7 +7,7 @@ import {useWatchAutoClear} from "../../../../utils/watchEffectAutoClear";
 import {createPlcCheckHooks} from "./PlcCheck.hooks";
 import {usePlcCheckMultiple} from "./PlcCheck.multiple";
 import {usePlcCheckSingle} from "./PlcCheck.single";
-import {doNothing} from "plain-utils/utils/doNothing";
+import {doNothing} from "@peryl/utils/doNothing";
 
 export const PlcCheck = designComponent({
   name: 'plc-check',

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.utils.ts

@@ -1,7 +1,7 @@
-import {omit} from "plain-utils/object/omit";
+import {omit} from "@peryl/utils/omit";
 import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
-import {ComponentEvent, ExtractPropTypes, PropType,} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {ComponentEvent, ExtractPropTypes, PropType,} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iTableRowRenderScope} from "../../table/utils/table.utils";
 
 export const PlcCheckPropsOptions = {

package/src/packages/components/Table/standard/PlcDraggier/PlcDraggier.tsx

@@ -1,8 +1,8 @@
-import {designComponent, onBeforeUnmount, PropType, useModel} from "plain-design-composition";
+import {designComponent, onBeforeUnmount, PropType, useModel} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
 import {usePlc} from "../../plc/use/usePlc";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {Icon} from "../../../Icon";
 import {injectPlainTable} from "../../table/Table";
 

package/src/packages/components/Table/standard/PlcExclusion.tsx

@@ -1,6 +1,6 @@
-import {designComponent, PropType} from "plain-design-composition";
+import {designComponent, PropType} from "@peryl/react-compose";
 import {tPlc} from "../plc/utils/plc.utils";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 
 export const PlcExclusion = designComponent({
   name: 'plc-exclusion',

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -1,8 +1,8 @@
-import {classnames, computed, designComponent, onBeforeUnmount, reactive, toRaw, useStyles} from "plain-design-composition";
+import {classnames, computed, designComponent, onBeforeUnmount, reactive, toRaw, useStyles} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {iTableNode} from "../table/utils/table.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {injectPlainTable} from "../table/Table";
 import {usePlc} from "../plc/use/usePlc";
 import {Dropdown} from "../../Dropdown";

package/src/packages/components/Table/standard/PlcIndex.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableOperation, iTableOperationPermitConfig, iTableOuterOperation, iTableOuterOperationConfig, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {Button} from "../../../Button";
 import {ButtonGroup} from "../../../ButtonGroup";
@@ -7,7 +7,7 @@ import {Dropdown} from "../../../Dropdown";
 import './outer-operation.scss';
 import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
 import {iTableOptionKeyboard} from "../../../AutoTable/use/useTableOptionKeyboard";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {Tooltip} from "../../../Tooltip";
 import i18n from "../../../i18n";
 
@@ -38,6 +38,7 @@ export const OuterOperation = designComponent({
         },
       },
     });
+    onBeforeUnmount(() => {state.dropdown = {} as any;});
 
     const permission = (() => {
       const { permit } = props;

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -1,11 +1,11 @@
-import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "plain-design-composition";
+import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableInnerOperation, iTableInnerOperationConfig, iTableOperation, iTableOperationPermitConfig, nextOperationKey, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {iTableCellRenderScope, iTableNode, iTableRowRenderScope} from "../../table/utils/table.utils";
 import {createPlcPropOptions, PlcPropsOptions} from "../../plc/utils/plc.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {injectPlainTable} from "../../table/Table";
-import {delay} from "plain-utils/utils/delay";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {delay} from "@peryl/utils/delay";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {Plc} from "../../plc/plc/Plc";
 import {Button} from "../../../Button";
 import {Dropdown} from "../../../Dropdown";
@@ -14,7 +14,7 @@ import {DropdownOption} from "../../../DropdownOption";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
 import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
 import i18n from "../../../i18n";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 
 export const PlcOperation = designComponent({
   name: 'plc-operation',
@@ -181,9 +181,10 @@ export const PlcOperation = designComponent({
      * @date    2022.11.24 16:25
      */
     const predicateWidth = computed((): number => {
+      const fontSize = ['small', 'mini'].indexOf(table.styleComputed.value.size) > -1 ? 14 : 16;
       if (innerOperationConfigs.value.length === 0) {return 0;}
       return innerOperationConfigs.value.reduce((prev) => {
-        return prev + 2 * 14 + 13;
+        return prev + 2 * fontSize + 13;
       }, 0) + 24;
     });
 
@@ -221,7 +222,12 @@ export const PlcOperation = designComponent({
           }
         });
         const width = maxWidth + state.cellPaddingX * 2;
+        // console.warn({ width });
         if (!state.plcOperationWidth || width > state.plcOperationWidth) {
+          /*console.log({
+            'plcOperationWidth.value': plcOperationWidth.value,
+            'width + 4': width + 4,
+          });*/
           if (width + 4 > plcOperationWidth.value) {
             state.plcOperationWidth = width + 4;
           }

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.utils.tsx

@@ -1,9 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {PlainObject} from "plain-utils/utils/event";
+import {createEnum} from "@peryl/utils/createEnum";
+import {PlainObject} from "@peryl/utils/event";
 import {iTableRowRenderScope} from "../../table/utils/table.utils";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {ThemeStatus} from "../../../../uses/useStyle";
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 
 /**
  * 按钮位置类型

package/src/packages/components/Table/standard/PlcOperation/useOperationPermission.ts

@@ -1,5 +1,5 @@
 import {iTableOperationPermitConfig, iTableOperationPermitData} from "./PlcOperation.utils";
-import {computed} from "plain-design-composition";
+import {computed} from "@peryl/react-compose";
 
 /**
  * 计算operation按钮的权限

package/src/packages/components/Table/standard/PlcTree/PlcTree.autoWidth.tsx

@@ -1,4 +1,4 @@
-import {computed, ExtractPropTypes, reactive} from "plain-design-composition";
+import {computed, ExtractPropTypes, reactive} from "@peryl/react-compose";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
 import {iPlcTreeScopeSlotsType, PlcTreeButtonSize, PlcTreePropsOptions} from "./PlcTree.utils";
 

package/src/packages/components/Table/standard/PlcTree/PlcTree.renderNode.tsx

@@ -1,6 +1,6 @@
 import {iTableCellRenderScope} from "../../table/utils/table.utils";
-import {useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {DropdownOption} from "../../../DropdownOption";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
 import {iPlcTreePropsType, iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";

package/src/packages/components/Table/standard/PlcTree/PlcTree.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, onBeforeUnmount, onMounted, SimpleFunction, watch} from "@peryl/react-compose";
 import {TreeEmitOptions} from "../../../TreeCore/createTreeProps";
 import {PlcEmitsOptions} from "../../plc/utils/plc.utils";
 import {usePlc} from "../../plc/use/usePlc";
@@ -8,10 +8,10 @@ import {usePlcTreeRenderNode} from "./PlcTree.renderNode";
 import {PlcTreePropsOptions, PlcTreeScopeSlotsOptions} from "./PlcTree.utils";
 import {usePlcTreeAutoWidth} from "./PlcTree.autoWidth";
 import {CheckboxStatus} from "../../../../utils/constant";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {iTableNode} from "../../table/utils/table.utils";
-import {findParentElement} from "plain-utils/dom/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
 
 export const PlcTree = designComponent({
   name: 'plc-tree',

package/src/packages/components/Table/standard/PlcTree/PlcTree.utils.ts

@@ -1,5 +1,5 @@
-import {ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
-import {omit} from "plain-utils/object/omit";
+import {ExtractPropTypes, PropType, tScopeSlotsType} from "@peryl/react-compose";
+import {omit} from "@peryl/utils/omit";
 import {TreePropsOptions} from "../../../TreeCore/createTreeProps";
 import {createPlcPropOptions} from "../../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";

package/src/packages/components/Table/standard/PlcTree/PlcTreeHeader.tsx

@@ -1,10 +1,10 @@
-import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "plain-design-composition";
+import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "@peryl/react-compose";
 import Dropdown from "../../../Dropdown";
 import {iTableRefer} from "../../table/Table";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import Icon from "../../../Icon";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const PlcTreeHeader = designComponent({
   props: {

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -1,14 +1,14 @@
-import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "plain-design-composition";
+import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "@peryl/react-compose";
 import {iTreeNode} from "../../../TreeCore/createTreeNode";
 import {iTableNode} from "../../table/utils/table.utils";
 import {iTreeCore} from "../../../TreeCore/createTreeCore";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
 import Checkbox from "../../../Checkbox";
 import Loading from "../../../Loading";
 import Icon from "../../../Icon";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const RenderPlcTreeNode = designComponent({
   props: {
@@ -25,6 +25,7 @@ export const RenderPlcTreeNode = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLDivElement });
 
     const isLeaf = computed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
 
@@ -63,7 +64,7 @@ export const RenderPlcTreeNode = designComponent({
 
     return () => {
       const { treeNode, tableNode } = props;
-      const { leafIcon, folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
+      const { folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
       return (
         <div className={getComponentCls('plc-tree-node')} ref={onRef.el}>
           <div className="tree-node-operator">
@@ -74,7 +75,7 @@ export const RenderPlcTreeNode = designComponent({
               {treeNode.isLoading() ?
                 <Loading type="gamma"/> :
                 <Icon
-                  icon={isLeaf.value || treeNode.empty ? leafIcon : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
+                  icon={isLeaf.value || treeNode.empty ? leafIcon.value : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
                 />}
             </div>
             {props.treeCore.props.multiple && (

package/src/packages/components/Table/table/Table.tsx

@@ -1,14 +1,14 @@
-import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {iTableNode, TableEmitsOptions, TablePropsOptions, TableSizeVariables, TableSlotsOptions} from "./utils/table.utils";
 import {createTableHooks} from "./utils/createTableHooks";
 import {useTablePlc} from "../plc/useTablePlc";
 import {useTableNode} from "./node/useTableNode";
 import {VirtualTable} from "../../VirtualTable";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {PltHeadCell} from "./head/head-cell";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import './table.scss';
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {useFixedShadow} from "./use/useFixedShadow";
 import {useTableScroll} from "./use/useTableScroll";
 import {Validation} from "../../Form/validate/createValidation";
@@ -245,14 +245,18 @@ export const Table = designComponent({
       ),
     });
 
-    hooks.onClickCell.use(({ e, node }) => {
-      event.emit.onClickCell(node, e);
-      hooks.onClickRow.exec({ e, node });
+    hooks.onClickCell.use((val) => {
+      event.emit.onClickCell(val.node, val.e, val.plc);
+      hooks.onClickRow.exec({ e: val.e, node: val.node });
     });
 
-    hooks.onDblclickCell.use(({ e, node }) => {
-      event.emit.onDblclickCell(node, e);
-      hooks.onDblclickRow.exec({ e, node });
+    hooks.onDblclickCell.use((val) => {
+      event.emit.onDblclickCell(val.node, val.e, val.plc);
+      hooks.onDblclickRow.exec({ e: val.e, node: val.node });
+    });
+
+    hooks.onContextmenuCell.use((val) => {
+      event.emit.onContextmenuCell(val.node, val.e, val.plc);
     });
 
     hooks.onClickHeadCell.use(({ e, plc }) => {!plc.props.disableAutoEmitClickTitle && event.emit.onClickHead(plc, e);});