plain-design 1.0.0-beta.99 → 3.0.0

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, iHTMLElement, iMouseEvent, onBeforeUnmount, PropType, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {computed, designComponent, iHTMLElement, iMouseEvent, onBeforeUnmount, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
 import {tPlc} from "../../plc/utils/plc.utils";
 import {iTableNode} from "../utils/table.utils";
 import {eFormValidateTrigger} from "../../../Form/validate/validate.utils";
@@ -8,8 +8,9 @@ import {Table} from "../Table";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 import {useCellValue} from "./useCellValue";
 import {createTooltip} from "../../../useTooltip";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {usePopup} from "../../../usePopup";
+import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
 
 export const PltCell = designComponent({
   name: 'plt-cell',
@@ -23,6 +24,9 @@ export const PltCell = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLElement });
 
     const popup = usePopup();
+
+    const tableAutoSpan = injectTableAutoSpan();
+
     /**
      * 单元格校验
      * @author  韦胜健
@@ -51,6 +55,11 @@ export const PltCell = designComponent({
       props.table.hooks.onDblclickCell.exec({ e, node: props.node, plc: props.plc });
     };
 
+    const onContextmenu = (e: iMouseEvent) => {
+      // if (bodyCell.value().editable) {return;}
+      props.table.hooks.onContextmenuCell.exec({ e, node: props.node, plc: props.plc });
+    };
+
     /**
      * 鼠标进入单元格
      * @author  韦胜健
@@ -70,7 +79,9 @@ export const PltCell = designComponent({
      * @author  韦胜健
      * @date    2022/12/5 20:35
      */
-    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false });
+    const { effects: cellValueEffects } = createEffects();
+    onBeforeUnmount(() => cellValueEffects.clear());
+    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
 
     /**
      * 单元格样式类名
@@ -143,7 +154,7 @@ export const PltCell = designComponent({
              * 则不显示overflowTooltip
              */
             if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
-              return emptyOverflowTooltipOption
+              return emptyOverflowTooltipOption;
             } else {
               return {
                 reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
@@ -182,14 +193,32 @@ export const PltCell = designComponent({
       return { update };
     })();
 
+    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
+    let prevSpan = { rowspan: 1, colspan: 1 };
+
     return {
       render: () => {
         const { node, plc } = props;
         const { body, editable } = bodyCell.value();
-        const span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
+        let span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
         if (plc.props.editColSpan != null && node.state.edit) {
           span.colspan = typeof plc.props.editColSpan === "function" ? plc.props.editColSpan(node) : plc.props.editColSpan;
         }
+        if (!!tableAutoSpan.value && (plc.props.autoRowSpan || plc.props.autoColSpan)) {
+          const { spans, data: offsetData } = tableAutoSpan.value;
+          /*要用offsetIndex，而不是props.node.state.index,这个是行数据在所有数据中的真实索引，而不是在虚拟列表数据中的索引*/
+          /*计算的spans仅含有虚拟数据的合并结果*/
+          const offsetIndex = offsetData.indexOf(props.node.data);
+          if (offsetIndex > -1) {
+            const rowSpan = !plc.props.field ? null : spans[offsetIndex].row?.[plc.props.field];
+            if (rowSpan != null) {span.rowspan = rowSpan;}
+            const colSpan = !plc.props.field ? null : spans[offsetIndex].col?.[plc.props.field];
+            if (colSpan != null) {span.colspan = colSpan;}
+          } else {
+            span = prevSpan;
+          }
+        }
+        prevSpan = span;
         if (span.rowspan === 0 || span.colspan === 0) {
           /*rowspan为0时，不会正确合并单元格，如果要合并单元格则不渲染这个td*/
           return null;
@@ -201,6 +230,7 @@ export const PltCell = designComponent({
         // console.log('cell', props.plc.props.title);
         return (
           <td
+            data-span={String(span.rowspan != 1 || span.colspan != 1)}
             ref={onRef.el}
             rowSpan={span.rowspan}
             colSpan={span.colspan}
@@ -208,6 +238,7 @@ export const PltCell = designComponent({
             style={styles.value}
             onClick={onClick}
             onDoubleClick={onDblclick}
+            onContextMenu={onContextmenu}
             onMouseEnter={onEnter}
             onMouseLeave={onLeave}
           >

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

@@ -1,5 +1,5 @@
 import {PltCell} from "./cell";
-import {designComponent, iMouseEvent, PropType, useClasses} from "plain-design-composition";
+import {designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
 import {Table} from "../Table";
 import {iTableNode} from "../utils/table.utils";
 

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

@@ -1,11 +1,13 @@
 import {iTableNode} from "../utils/table.utils";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {computed, reactive, toRaw} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {globalComputed, reactive, toRaw} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {LoadingText} from "../../../../utils/LoadingText";
 import {AsyncFormatter} from "../../../AsyncFormatter";
 import {Formatter} from "../../../Formatter";
 import {renderBodyCell} from "../../plc/utils/plc.render";
+import {iEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * 计算cell渲染所需要的内容
@@ -16,9 +18,11 @@ export function useCellValue(
   {
     optionGetter,
     formEdit,
+    effects,
   }: {
     optionGetter: () => { node: iTableNode, plc: tPlc },
     formEdit: boolean,
+    effects: iEffects,
   }
 ) {
   /**
@@ -26,20 +30,22 @@ export function useCellValue(
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const row = computed(() => {
+  const row = globalComputed(() => {
     const { node } = optionGetter();
     return node.state.edit ? node.state.editRow : node.data;
   });
+  effects.push(() => row.effect.stop());
 
   /**
    * 当前单元格的目标数据
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const sourceValue = computed(() => {
+  const sourceValue = globalComputed(() => {
     const { plc } = optionGetter();
     return !!plc.props.field ? row.value[plc.props.field] : null;
   });
+  effects.push(() => sourceValue.effect.stop());
 
   /**
    * 异步格式化的状态
@@ -58,8 +64,9 @@ export function useCellValue(
       loading: boolean,
     }
   });
+  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
 
-  const targetValue = computed(() => {
+  const targetValue = globalComputed(() => {
     const { plc, node } = optionGetter();
     const { formatter, asyncFormatter, formatterOptions } = plc.props;
     const cellRenderScope = { plc: plc, node: node, row: row.value };
@@ -125,12 +132,14 @@ export function useCellValue(
       return sourceValue.value;
     }
   });
+  effects.push(() => targetValue.effect.stop());
 
-  const bodyCell = computed(() => {
+  const bodyCell = globalComputed(() => {
     const { node, plc } = optionGetter();
     const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
     return () => bc;
   });
+  effects.push(() => bodyCell.effect.stop());
 
   return { bodyCell, targetValue };
 }

package/src/packages/components/Table/table/head/head-cell.tsx

@@ -1,12 +1,14 @@
 import {useHeadCellResize} from "./useHeadCellResize";
-import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
-import {toArray} from "plain-utils/utils/toArray";
+import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 import {Table} from "../Table";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {PlainScroll} from "../../../Scroll";
 import {Icon} from "../../../Icon";
 import {renderHeadCell} from "../../plc/utils/plc.render";
 import {useTooltip} from "../../../useTooltip";
+import Tooltip from "../../../Tooltip";
+import {getFunctionValue} from '@peryl/utils/getFunctionValue';
 
 export const PltHeadCell = designComponent({
   name: 'plt-head-cell',
@@ -77,6 +79,10 @@ export const PltHeadCell = designComponent({
             onMouseLeave={handler.onLeave}
           >
             {content}
+            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
+              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
+              popper: () => getFunctionValue(props.tablePlc.props.tip)
+            }}/>}
             <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
             {sort.value != null && (
               <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -1,9 +1,9 @@
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {addClass} from "plain-utils/dom/addClass";
-import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {addClass} from "@peryl/utils/addClass";
+import {getComponentCls, iMouseEvent} from "@peryl/react-compose";
 import {ClientZoom} from "../../../ClientZoom";
 
 /**

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

@@ -1,6 +1,6 @@
 import {createTableNode, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {computed} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 export function useTableNode({ props, formValidator, dataRef }: { props: iTablePropsType, formValidator: iFormValidator, dataRef: { value: { data: PlainObject[] | undefined } } }) {

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

@@ -24,6 +24,10 @@
       font-weight: 500;
       letter-spacing: 1px;
 
+      .plt-head-cell-tip {
+        color: plv(text-3);
+      }
+
       .plt-head-cell-indicator {
         position: absolute;
         top: 0;

package/src/packages/components/Table/table/use/useFixedShadow.ts

@@ -1,5 +1,5 @@
-import {computed, reactive, SimpleFunction} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {computed, reactive, SimpleFunction} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import {iTableScrollRefer} from "./useTableScroll";
 import {PlainScroll} from "../../../Scroll";
 

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -1,17 +1,17 @@
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useAutoScroll} from "../../../Scroll/useAutoScroll";
 import {PlainScroll} from "../../../Scroll";
 import {TablePlcFixedType, tPlc, tPlcType} from "../../plc/utils/plc.utils";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {IteratePlcHandleType, iteratePlcList} from "../../plc/utils/iteratePlcList";
 import VirtualTable from "../../../VirtualTable";
 import {customDeepClone} from "../../../../utils/customDeepClone";
-import {addClass} from "plain-utils/dom/addClass";
-import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-design-composition";
+import {addClass} from "@peryl/utils/addClass";
+import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "@peryl/react-compose";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -1,13 +1,13 @@
-import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {getComponentCls, iMouseEvent, reactive} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import VirtualTable from "../../../VirtualTable";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableNode} from "../utils/table.utils";
-import {findParentElement} from "plain-utils/dom/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {addClass} from "plain-utils/dom/addClass";
-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 {addClass} from "@peryl/utils/addClass";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {ClientZoom} from "../../../ClientZoom";
 import {createAutoScrollManager} from "../../../createAutoScrollManager";
 

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

@@ -1,8 +1,8 @@
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {findParentElement} from "plain-utils/dom/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "@peryl/react-compose";
 import {Icon} from "../../../Icon";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {useTableDraggierRow} from "./useTableDraggier.row";

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

@@ -1,16 +1,16 @@
 import {iTableHooks} from "../utils/createTableHooks";
-import {computed, onBeforeUnmount, reactive, useRefs} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {computed, onBeforeUnmount, reactive, useRefs} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import {Dialog} from "../../../Dialog";
 import {Form} from "../../../Form";
 import {FormItem} from "../../../FormItem";
 import {iTableNode, iTablePropsType} from "../utils/table.utils";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {useCellValue} from "../body/useCellValue";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {iTableMethods} from "./useTableMethods";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 import i18n from "../../../i18n";
 
 export function useTableFormEditor(
@@ -53,10 +53,13 @@ export function useTableFormEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
+    cellBodyArrayEffects.clear();
     if (!state.optionGetter) {return [];}
     const { node } = state.optionGetter();
-    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true }));
+    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -112,39 +115,44 @@ export function useTableFormEditor(
                 handleCancel={handler.handleCancel}
                 position="right"
                 initialize
-              >
-                <Form
-                  rules={rules}
-                  ref={onRef.form}
-                  column={1}
-                  modelValue={node.state.editRow}
-                  labelAlign="right"
-                  validateMessagePosition="bottom-left"
-                >
-                  {showPlcArray.value.map((plc, index) => {
-                    if (plc.props.editColSpan === 0) {
-                      return null;
-                    }
-                    const { bodyCell } = cellBodyArray.value[index];
-                    const { editable, body } = bodyCell.value();
-                    const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
-                    return (
-                      <FormItem
-                        key={index}
-                        label={plc.props.formLabel || plc.props.title}
-                        field={plc.props.field}
-                        required={plc.props.required}
-                        rules={plc.props.rules}
-                        validator={plc.props.validator}
-                        disabled={!editable}
-                        {...validateAttrs}
-                      >
-                        {body}
-                      </FormItem>
-                    );
-                  })}
-                </Form>
-              </Dialog>
+                v-slots={{
+                  default: () => (
+                    <Form
+                      rules={rules}
+                      ref={onRef.form}
+                      column={1}
+                      modelValue={node.state.editRow}
+                      labelAlign="right"
+                      validateMessagePosition="bottom-left"
+                    >
+                      {showPlcArray.value.map((plc, index) => {
+                        if (plc.props.editColSpan === 0) {
+                          return null;
+                        }
+                        const { bodyCell } = cellBodyArray.value[index];
+                        const { editable, body } = bodyCell.value();
+                        const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
+                        return (
+                          <FormItem
+                            key={index}
+                            label={plc.props.formLabel || plc.props.title}
+                            field={plc.props.field}
+                            required={plc.props.required}
+                            rules={plc.props.rules}
+                            validator={plc.props.validator}
+                            tip={plc.props.tip}
+                            disabled={!editable}
+                            {...validateAttrs}
+                          >
+                            {body}
+                          </FormItem>
+                        );
+                      })}
+                    </Form>
+                  ),
+                  foot: () => props.formEditorFootRender?.(node.state.editRow)
+                }}
+              />
             );
           },
         }));

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

@@ -1,5 +1,5 @@
-import {reactive} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {reactive} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 import {iTableHooks} from "../utils/createTableHooks";
 import {LoadingMask} from "../../../LoadingMask";
 import {iTablePropsType} from "../utils/table.utils";

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

@@ -1,7 +1,7 @@
 import {getPlcDisplayValue, tPlc} from "../../plc/utils/plc.utils";
 import {createTableNode, iTableNode} from "../utils/table.utils";
-import {toRaw} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {toRaw} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 export function useTableMethods(

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

@@ -1,11 +1,11 @@
 import {iTableNode, iTablePropsType} from "../utils/table.utils";
 import {iTableHooks} from "../utils/createTableHooks";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {PlainObject} from "plain-utils/utils/event";
-import {computed, reactive, RenderNode, useRefs} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {PlainObject} from "@peryl/utils/event";
+import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../../../Dialog";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {Table} from "../Table";
 import {Plc} from "../../../Plc";
 import {Form} from "../../../Form";
@@ -15,7 +15,7 @@ import {useCellValue} from "../body/useCellValue";
 import {iTableMethods} from "./useTableMethods";
 import {PlcCheck} from "../../standard/PlcCheck/PlcCheck";
 import $message from "../../../$message";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 import i18n from "../../../i18n";
 
 /**
@@ -64,11 +64,13 @@ export function useTableModifyEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
     if (!state.optionGetter) {return [];}
     const { node } = state;
     if (!node) {return [];}
-    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true }));
+    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -124,6 +126,7 @@ export function useTableModifyEditor(
                   required={plc.props.required}
                   rules={plc.props.rules}
                   validator={plc.props.validator}
+                  tip={plc.props.tip}
                   disabled={!editable}
                   {...validateAttrs}
                 >
@@ -142,6 +145,7 @@ export function useTableModifyEditor(
     initialize: (() => {
       let hasInitialized = false;
       return () => {
+        /*已经初始化过就不用再初始化了*/
         if (hasInitialized) {return;}
         hasInitialized = true;
         effects.push(hooks.onRender.use(
@@ -187,6 +191,8 @@ export function useTableModifyEditor(
     },
   };
 
+  onBeforeUnmount(() => effects.clear());
+
   return { methods, state };
 }
 

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

@@ -1,6 +1,6 @@
 import {PlainScroll} from "../../../Scroll";
 import VirtualTable from "../../../VirtualTable";
-import {reactive, watch} from "plain-design-composition";
+import {reactive, watch} from "@peryl/react-compose";
 
 export function useTableScroll(
   {

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,7 +1,7 @@
-import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "plain-design-composition";
-import {tPlcType} from "../../plc/utils/plc.utils";
+import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
 import {iTableMessyData, iTableNode} from "./table.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
 
 export const createTableHooks = () => {
@@ -25,9 +25,11 @@ export const createTableHooks = () => {
     /*双击行动作*/
     onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*单击单元格动作*/
-    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*双击单元格动作*/
-    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*右击单元格动作*/
+    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*鼠标进入单元格*/
     onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
     /*鼠标离开单元格*/

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

@@ -1,12 +1,12 @@
 import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
 import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
 import {PlainScroll} from "../../../Scroll";
 import {tPlcCacheStateData} from "../../plc/use/usePlcPropsState";
 import {tPlcData} from "../../plc/formatPlcList";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 /**
@@ -39,6 +39,7 @@ export const TablePropsOptions = {
   spanMethod: { type: Function as PropType<TablePropsSpanMethod> },     // 合并表体单元格的方法
   size: { ...StyleProps["size"] },                                      // 表格尺寸
   loading: { type: Boolean },                                           // 开启加载状态
+  formEditorFootRender: { type: Function as PropType<(formData: PlainObject) => any> },// 表单编辑器的foot渲染内容
 
   rowClassFunc: { type: Function as PropType<TablePropsRowClassFunc> },// 行 className 的计算函数
   cellClassFunc: { type: Function as PropType<TablePropsCellClassFunc> },// 单元格 className 的计算函数
@@ -93,8 +94,9 @@ export const TableEmitsOptions = {
 
   onClickRow: (node: iTableNode, e: iMouseEvent) => true,
   onDblclickRow: (node: iTableNode, e: iMouseEvent) => true,
-  onClickCell: (node: iTableNode, e: iMouseEvent) => true,
-  onDblclickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
   onClickHead: (plc: tPlcType, e: iMouseEvent) => true,
 
   onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {iTagColor, TagColor} from "./tag.utils";
 import Icon from "../Icon";
@@ -24,6 +24,8 @@ export const Tag = designComponent({
   },
   setup({ props, event: { emit }, slots }) {
 
+    const { refs, onRef } = useRefs({ closeWrapper: {} as typeof HTMLSpanElement });
+
     const status = Object.keys(ThemeStatus);
 
     const colors = computed((): iTagColor => {
@@ -60,7 +62,10 @@ export const Tag = designComponent({
 
     const handler = {
       onClick: (e: iMouseEvent) => {
-        if (e.currentTarget === e.target) {emit.onClick(e);}
+        if (refs.closeWrapper == e.target || (!!refs.closeWrapper && refs.closeWrapper.contains(e.target as HTMLElement))) {
+          return;
+        }
+        emit.onClick(e);
       },
       onClose: (e: iMouseEvent) => emit.onClose(e),
     };
@@ -70,7 +75,7 @@ export const Tag = designComponent({
         {!!props.icon && <Icon icon={props.icon}/>}
         {!!props.loading && <Loading type="beta"/>}
         <span>{slots.default(props.label as any)}</span>
-        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
+        {!!props.closeable && <span ref={onRef.closeWrapper} className="tag-close-wrapper"><Icon icon="pi-close" onClick={handler.onClose}/></span>}
       </span>
     );
   },