plain-design 1.0.0-beta.99 → 3.0.0

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -1,18 +1,18 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iHttp} from "../../createHttp";
-import {iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
+import {iAutoTableAiConfig, iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
 import {iUrl, tGetDefaultUrlConfig} from "./TableOption.url";
 import {iTableOperation, iTableOperationPermitConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
 import {iTableRefer} from "../../Table/table/Table";
 import {iTableOptionCacheData} from "../use/useTableOption.cache.utils";
 import {ThemeSize} from "../../../uses/useStyle";
-import {iMouseEvent, RenderNode} from "plain-design-composition";
+import {iMouseEvent, RenderNode} from "@peryl/react-compose";
 import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
 import {FilterFormSingle} from "../../FilterFormSingle";
 import {Pagination} from "../../Pagination";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {iEffects} from 'plain-utils/utils/createEffects';
-import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {iEffects} from '@peryl/utils/createEffects';
+import {iTableNode, iTablePropsType, iTableSortData} from "../../Table/table/utils/table.utils";
 import {eTableOptionEditType} from "./TableOption.utils";
 
 export namespace TableOptionSpace {
@@ -36,12 +36,14 @@ export namespace TableOptionSpace {
     loadOnStart?: boolean,                                              // 是否页面初始化的时候就加载数据
     copyDefaultExcludeKeys: string[],                                   // 复制一行的时候，不复制的属性
     showRows: number,                                                   // 显示的行数（自动计算表格的高度）
+    pageSize?: number,                                                  // 查询的行数
     showRowsMode: 'fixed' | 'auto',                                     // 显示行数的模式，自动根据 加载的数据展示还是固定行数
     sort?: iTableOptionSortParam | iTableOptionSortParam[],             // 排序方式
     getCache: (key: string) => iTableOptionCacheData | undefined,       // 获取缓存配置信息
     setCache: (cacheData: iTableOptionCacheData) => void,               // 保存缓存配置信息
     size?: typeof ThemeSize.TYPE,                                       // 表格尺寸
     filterFormColumn: number,                                           // 查询表单列数
+    ai?: false | Partial<iAutoTableAiConfig>,                           // AI设置
   }
 
   /**
@@ -68,7 +70,8 @@ export namespace TableOptionSpace {
     paginationAttrs?: Partial<typeof Pagination.use.props>,             // 给分页组件传递的属性设置
     parentOption?: Record<string, any>,                                 // 父表的option
     parentMap?: Record<string, any>,                                    // 父表的字段映射
-    minShowRows?: number,                                              // BaseTable的minShowRows
+    minShowRows?: number,                                               // BaseTable的minShowRows
+    tableProps?: Partial<iTablePropsType>,                              // 传递给table的控制属性
     // todo
     noHead?: boolean,                                                   // 不显示表头
   }
@@ -146,6 +149,7 @@ export namespace TableOptionSpace {
     display: () => RenderNode,
     onClear?: (e: iMouseEvent) => void,
     onClick: () => void,
+    noClear?: boolean,
   }
 
   /**

package/src/packages/components/AutoTable/utils/TableOption.url.ts

@@ -1,5 +1,5 @@
 import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {TableOptionSpace} from "./TableOption.space";
 
 /**

package/src/packages/components/AutoTable/utils/TableOption.utils.tsx

@@ -1,9 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iFilterOption} from "../../FilterService/utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {FilterService} from "../../FilterService";
 import {TableOptionSpace} from "./TableOption.space";
-import {iMouseEvent} from "plain-design-composition";
+import {iMouseEvent} from "@peryl/react-compose";
 
 
 /**

package/src/packages/components/AutoTable/utils/buildPlainDefaultUrlConfig.ts

@@ -39,7 +39,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:33
      */
     insert: async (param) => {
-      return processPublicRequest('insert', { ...param, method: 'post' });
+      return processPublicRequest('insert', { ...param, suffixUrl: 'insert', method: 'post' });
     },
     /**
      * 默认使用post请求调用接口base/batch批量插入数据
@@ -47,7 +47,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 22:25
      */
     batchInsert: async (param) => {
-      return processPublicRequest('batchInsert', { ...param, suffixUrl: 'batch', method: 'post' });
+      return processPublicRequest('batchInsert', { ...param, suffixUrl: 'batchInsert', method: 'post' });
     },
     /**
      * 默认使用put方法调用接口base更新数据
@@ -55,7 +55,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:34
      */
     update: async (param) => {
-      return processPublicRequest('update', { ...param, method: 'put' });
+      return processPublicRequest('update', { ...param, suffixUrl: 'update', method: 'post' });
     },
     /**
      * 默认使用put请求，调用接口base/batch批量更新数据
@@ -63,7 +63,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 22:25
      */
     batchUpdate: async (param) => {
-      return processPublicRequest('batchUpdate', { ...param, suffixUrl: 'batch', method: 'put' });
+      return processPublicRequest('batchUpdate', { ...param, suffixUrl: 'batchUpdate', method: 'post' });
     },
     /**
      * 默认使用delete方法调用接口base删除数据
@@ -71,7 +71,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.25 11:34
      */
     delete: async (param) => {
-      return processPublicRequest('delete', { ...param, method: 'delete' });
+      return processPublicRequest('delete', { ...param, suffixUrl: 'delete', method: 'post', });
     },
     /**
      * 批量删除
@@ -79,7 +79,7 @@ export const buildPlainDefaultUrlConfig = (): tGetDefaultUrlConfig => {
      * @date    2022.12.27 21:02
      */
     batchDelete: async (param) => {
-      return processPublicRequest('batchDelete', { ...param, method: 'delete' });
+      return processPublicRequest('batchDelete', { ...param, suffixUrl: 'delete', method: 'post' });
     },
     /**
      * 默认使用post方法调用接口base/default查询默认新建数据

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

@@ -1,6 +1,6 @@
-import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import './auto-width-input.scss';
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 
 const FixInput = fixInputCursor('input');
 

package/src/packages/components/Badge/badge.scss

@@ -19,6 +19,10 @@
       background-color: $color-6;
       border-radius: 100px;
       color: plv(pbfc);
+      z-index: 2;
+      span {
+        transform: scale(0.8);
+      }
     }
 
     &.badge-content-top {

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

@@ -1,5 +1,5 @@
 import './badge.scss';
-import {computed, designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
 
 export const Badge = designComponent({
   name: '-badge',

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

@@ -1,30 +1,31 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
-import {StyleProps, useStyle} from "../../uses/useStyle";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import './box.scss';
-
-export const Box = designComponent({
-  name: "box",
-  props: {
-    ...StyleProps,
-    ...EditProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const { styleComputed } = useStyle();
-    useEdit();
-
-    const classes = useClassCache(() => [
-      getComponentCls('box'),
-      `box-size-${styleComputed.value.size}`,
-      `box-shape-${styleComputed.value.size}`,
-    ]);
-
-    return () => (
-      <div className={classes.value}>
-        {slots.default()}
-      </div>
-    );
-  },
-});
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './box.scss';
+
+export const Box = designComponent({
+  name: "box",
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+    useEdit();
+
+    const classes = useClassCache(() => [
+      getComponentCls('box'),
+      `box-size-${styleComputed.value.size}`,
+      `box-shape-${styleComputed.value.size}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

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

@@ -1,15 +1,16 @@
 import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {throttle} from "plain-utils/utils/throttle";
-import {unit} from "plain-utils/string/unit";
+import {throttle} from "@peryl/utils/throttle";
+import {unit} from "@peryl/utils/unit";
 import {useClickWave} from "../../directives/ClickWave";
 import {Icon} from "../Icon";
 import {Loading} from "../Loading";
 import {ButtonGroup} from "../ButtonGroup";
 import {AutoLoadingObserver} from "../AutoLoadingObserver";
 import {useCollapseStyles} from "../../uses/useCollapseStyles";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export const Button = designComponent({
   name: '-button',
@@ -82,16 +83,22 @@ export const Button = designComponent({
       },
     });
 
+    const { effects: throttleClickEffects } = createEffects();
+    onBeforeUnmount(() => {throttleClickEffects.clear();});
+
     watch(
       () => props.throttleClick,
       (val) => {
+        throttleClickEffects.clear();
         if (!val) {
           return state.handleClick = state.handleClickInner;
         }
         if (val === true) {
           val = 1000;
         }
-        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
+        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
+        throttleClickEffects.push(() => throttleClickHandler.dispose());
+        state.handleClick = throttleClickHandler;
       },
       { immediate: true }
     );

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

@@ -1,8 +1,8 @@
 import './button-group.scss';
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const ButtonGroupDirection = createEnum(['vertical', 'horizontal'] as const);
 

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

@@ -1,6 +1,6 @@
 import './card.scss';
-import {designComponent, getComponentCls, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {useStyle} from "../../uses/useStyle";
 
 export const Card = designComponent({

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

@@ -1,19 +1,19 @@
-import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, isReact, iTouchEvent, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useModel, useRefs, useStyles,} from 'plain-design-composition';
+import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, isReact, iTouchEvent, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useModel, useRefs, useStyles,} from '@peryl/react-compose';
 import './carousel.scss';
 import CarouselItem, {iCarouselItemMeta} from '../CarouselItem';
-import {createCounter} from 'plain-utils/utils/createCounter';
+import {createCounter} from '@peryl/utils/createCounter';
 import {Icon} from '../Icon';
 import {useWatchAutoClear} from '../../utils/watchEffectAutoClear';
 import {findReactElement} from '../../utils/findReactElement';
-import {addElementListener} from 'plain-utils/dom/addElementListener';
-import {createEffects} from "plain-utils/utils/createEffects";
-import {unit} from "plain-utils/string/unit";
-import {doNothing} from "plain-utils/utils/doNothing";
-import {delay} from "plain-utils/utils/delay";
+import {addElementListener} from '@peryl/utils/addElementListener';
+import {createEffects} from "@peryl/utils/createEffects";
+import {unit} from "@peryl/utils/unit";
+import {doNothing} from "@peryl/utils/doNothing";
+import {delay} from "@peryl/utils/delay";
 import {Tooltip} from "../Tooltip";
 import {buildCycleIndexList} from "../../utils/buildCycleIndexList";
 import {ComponentUtils} from "../../utils/ComponentUtils";
-import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
 
 export const Carousel = designComponent({
   name: 'carousel',

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

@@ -1,7 +1,7 @@
-import {cacheComputed, designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, onMounted, useClasses, useRefs} from 'plain-design-composition';
+import {cacheComputed, designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, onMounted, useClasses, useRefs} from '@peryl/react-compose';
 import {Carousel} from '../Carousel';
-import {createEffects} from "plain-utils/utils/createEffects";
-import {addElementListener} from "plain-utils/dom/addElementListener";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addElementListener} from "@peryl/utils/addElementListener";
 import {PreviewerLoading} from "../ImagePreviewer/PreviewerLoading";
 
 export const CarouselItem = designComponent({

package/src/packages/components/Cascade/CascadeKeys.tsx

@@ -0,0 +1,158 @@
+import {computed, designComponent, PropType, reactive, useModel} from "@peryl/react-compose";
+import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import Cascade from "./index";
+import {omit} from "@peryl/utils/omit";
+import {inheritSlots} from "../../utils/inheritSlots";
+import {PlainObject} from "@peryl/utils/event";
+
+/**
+ * 用来编辑key可能冲突的级联数据，仅支持单选不支持多选
+ * @author  韦胜健
+ * @date    2024.8.7 18:43
+ */
+export const CascadeKeys = designComponent({
+  name: 'conflict-cascade',
+  inheritPropsType: Cascade,
+  props: {
+    /*key有冲突的情况下，不支持多选，多选必须保证key为唯一标识不能有冲突，并且singleValueType必须是all*/
+    ...omit(CascadePropsOptions, ['keyField', 'multiple', 'singleValueType', "modelValue"]),
+    /*绑定值一定是数组，可能是nodeData对象数组，也可能是key字符串数组*/
+    modelValue: { type: Array as PropType<(string | PlainObject)[]> },
+    /*keyField一定要存在*/
+    keyField: { type: [String, Function] as PropType<string | ((nodeData: any) => string)>, required: true },
+    /*值类型设置，为true则表明绑定值modelValue为字符串数组，否则为object对象数组*/
+    useKeysValue: { type: Boolean },
+  },
+  emits: CascadeEmitOptions,
+  scopeSlots: {
+    ...TreeScopeSlotsOption,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const dataModel = useModel(() => props.data, emit.onUpdateData);
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const utils = reactive({
+      getDataLabel: computed((): iUseCascadeDataPropsLabelFunction => {
+        const { labelField } = props;
+        return typeof labelField === "function" ? labelField : ((nodeData) => (nodeData as any)[labelField]);
+      }),
+      getDataKey: computed((): iUseCascadeDataPropsValFunction => {
+        const { keyField } = props;
+        return typeof keyField === "function" ? keyField : ((nodeData) => (nodeData as any)[keyField]);
+      }),
+      getDataChildren: computed((): iUseCascadeDataPropsChildrenFunction => {
+        const { childrenField } = props;
+        return typeof childrenField === "function" ? childrenField : ((nodeData) => (nodeData as any)[childrenField]);
+      }),
+      formatData2CascadeData: (nodeData: any, getParent: iCascadeWrapData['getParent'] = (() => undefined)): iCascadeWrapData => {
+        const label = utils.getDataLabel(nodeData);
+        const key = utils.getDataKey(nodeData);
+        const children = utils.getDataChildren(nodeData);
+        const keys: string[] = [...getParent()?.keys || [], key];
+        const ret: iCascadeWrapData = { label, key, nodeData, getParent, keys, keyString: keys.join('.') };
+        if (!!children) {
+          const formatChildren = children.map(child => utils.formatData2CascadeData(child, () => ret));
+          ret.children = formatChildren;
+        }
+        return ret;
+      },
+    });
+
+    const cascadeData = computed((): iCascadeWrapData[] | undefined => props.data?.map(item => utils.formatData2CascadeData(item)));
+
+    const cascadeModelValue = computed((): iCascadeWrapData[] | undefined => {
+      if (!model.value?.length) {return undefined;}
+      const modelValueList = [...model.value];
+      const ret: iCascadeWrapData[] = [];
+
+      let list = cascadeData.value;
+      let itemModelValue = modelValueList.shift();
+      while (itemModelValue && !!list?.length) {
+        const itemModelValueKey = props.useKeysValue ? itemModelValue : utils.getDataKey(itemModelValue);
+        const matchItem = list.find(i => i.key == itemModelValueKey);
+        if (!!matchItem) {
+          ret.push(matchItem);
+          list = matchItem.children || [];
+          itemModelValue = modelValueList.shift();
+        } else {
+          break;
+        }
+      }
+
+      return ret;
+    });
+
+    const handler = {
+      onUpdateData: (newData: iCascadeWrapData[] | undefined | null) => {
+        if (!newData) {dataModel.value = newData;}
+        dataModel.value = cascadeData.value?.map(itemData => itemData.nodeData);
+      },
+      onUpdateModelValue: (val: iCascadeWrapData[] | null | undefined) => {
+        model.value = props.useKeysValue ?
+          val?.map(i => i.key) :
+          val?.map(i => i.nodeData);
+      },
+      setChildrenData: (cascadeWrapData: iCascadeWrapData, childrenData: any[] | null | undefined) => {
+        const { childrenField, setChildrenData } = props;
+        if (typeof childrenField === "string") {
+          (cascadeWrapData.nodeData as any)[childrenField] = childrenData;
+        } else {
+          if (!!setChildrenData) {
+            setChildrenData(cascadeWrapData.nodeData, childrenData);
+          } else {
+            throw new Error('tree: props.setChildrenData is required when childrenField is function');
+          }
+        }
+      },
+      isCheckAble: (cascadeWrapData: iCascadeWrapData) => {return props.isCheckAble!(cascadeWrapData.nodeData);},
+      isLeaf: (cascadeWrapData: iCascadeWrapData) => {return props.isLeaf!(cascadeWrapData.nodeData);},
+      filterMethod: (cascadeWrapData: iCascadeWrapData, filterText: string) => {return props.filterMethod!(cascadeWrapData.nodeData, filterText);},
+    };
+
+    const cascadeAttrs = computed(() => {
+      const { useKeysValue, ..._props } = props;
+      return {
+        ..._props,
+        data: cascadeData.value,
+        onUpdateData: handler.onUpdateData,
+        modelValue: cascadeModelValue.value,
+        onUpdateModelValue: handler.onUpdateModelValue,
+
+        setChildrenData: !props.setChildrenData ? undefined : handler.setChildrenData,
+        isCheckAble: !props.isCheckAble ? undefined : handler.isCheckAble,
+        isLeaf: !props.isLeaf ? undefined : handler.isLeaf,
+        filterMethod: !props.filterMethod ? undefined : handler.filterMethod,
+
+        labelField: "label",
+        keyField: "keyString",
+        childrenField: "children",
+        singleValueType: "all" as const,
+      };
+    });
+
+    return () => (
+      <Cascade{...cascadeAttrs.value} v-slots={inheritSlots({ scopeSlots })}/>
+    );
+  },
+});
+
+
+interface iCascadeWrapData {
+  label: string,
+  key: string,
+  children?: iCascadeWrapData[],
+
+  keys: string[],
+  keyString: string,
+  nodeData: any,
+  getParent: () => iCascadeWrapData | undefined,
+}
+
+interface iUseCascadeDataPropsLabelFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsValFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsChildrenFunction {(nodeData: any): any[] | undefined | null;}

package/src/packages/components/Cascade/cascade.utils.ts

@@ -1,5 +1,5 @@
 import {tCascadeHooks} from "./createCascadeHooks";
-import {ComponentEvent, ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, PropType, tScopeSlotsType} from "@peryl/react-compose";
 import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
 import {Input} from "../Input";
 import {EditProps, tEditControl} from "../../uses/useEdit";

package/src/packages/components/Cascade/createCascadeHooks.ts

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

package/src/packages/components/Cascade/createCascadePopper.tsx

@@ -1,9 +1,9 @@
 import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import {ExtractPropTypes, getComponentCls} from "plain-design-composition";
+import {ExtractPropTypes, getComponentCls} from "@peryl/react-compose";
 import {Input} from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {Tree} from "../Tree";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {CascadePanel} from "../CascadePanel";
 import {CascadePropsOptions} from "./cascade.utils";
 import {Table} from "../Table";
@@ -12,6 +12,7 @@ import {tStyleComputed} from "../../uses/useStyle";
 import {getTableRowHeight} from "../Table/table/utils/table.utils";
 import {PlcIndex} from "../Table/standard/PlcIndex";
 import {createPopupEditor} from "../usePopupEditor";
+import {tEditControl} from "../../uses/useEdit";
 
 export function createCascadePopper(
   {
@@ -31,7 +32,7 @@ export function createCascadePopper(
     getPublicPopperAttrs: () => any,
     onPopperClose: () => void,
     onPopperShow?: () => void,
-    editControl: { editComputed: { value: { editable: boolean } } }
+    editControl: tEditControl
     refs: { input: typeof Input.use.class | null | undefined },
     scopeSlots: any,
     getTreeAttrs: () => any,

package/src/packages/components/Cascade/createCascadeUtils.ts

@@ -1,6 +1,6 @@
-import {computed, ExtractPropTypes} from "plain-design-composition";
+import {computed, ExtractPropTypes} from "@peryl/react-compose";
 import {CascadePropsOptions} from "./cascade.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export function createCascadeUtils({ props }: { props: Readonly<ExtractPropTypes<typeof CascadePropsOptions>> }) {
   /*工具函数，获取对象的显示文本*/

package/src/packages/components/Cascade/createMultipleCascadeRender.tsx

@@ -1,9 +1,8 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {inputScrollEnd} from "../Input/input.utils";
 import {createCascadePopper} from "./createCascadePopper";
 import i18n from "../i18n";
@@ -24,19 +23,19 @@ export function createMultipleCascadeRender(
     cascadeProps,
     styleComputed,
   }: iCascadeCompositionParam) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs, onRef } = useRefs({
     tree: Tree,
     input: Input,
-  });
+  }, { effects });
 
   /**
    * 给多值输入框的显示文本时数组
    * @author  韦胜健
    * @date    2022/10/24 20:27
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null || model.value.length === 0) {return null;}
     return (model.value as PlainObject[]).map(i => utils.getLabel.value(i));
   });

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -1,9 +1,8 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {createCascadePopper} from "./createCascadePopper";
 import {PlcTree} from "../Table/standard/PlcTree/PlcTree";
 import i18n from "../i18n";
@@ -30,12 +29,14 @@ export function createSingleCascadeRender(
     styleComputed,
   }: iCascadeCompositionParam) {
 
+  const { effects, effectComputed } = createEffectsOfReaction();
+
   /**
    * input输入框显示值
    * @author  韦胜健
    * @date    2022/10/24 20:29
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null) {return null;}
     if (props.multiple) {return; }
     return Array.isArray(model.value) ? (model.value as PlainObject[]).map(i => utils.getLabel.value(i)).join('/') : utils.getLabel.value(model.value as PlainObject);
@@ -48,13 +49,11 @@ export function createSingleCascadeRender(
     inputValue: label.value as null | string,
   });
 
-  const { effects } = createEffects();
-
   const { refs, onRef } = useRefs({
     tree: Tree,
     plcTree: PlcTree,
     input: Input,
-  });
+  }, { effects });
 
   const inputHandler = {
     onFocus: (e: FocusEvent) => {
@@ -64,6 +63,7 @@ export function createSingleCascadeRender(
       state.inputValue = null;
     },
     onBlur: (e: FocusEvent) => {
+      if (!event.emit) {return;}
       event.emit.onBlur(e);
       props.inputAttrs?.onBlur?.(e);
       state.isFocus = false;