plain-design 1.0.0-beta.99 → 3.0.0

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

@@ -1,93 +1,94 @@
-import {computed, designComponent, PropType, useModel} from "plain-design-composition";
-import {InputGroup} from "../InputGroup";
-import {InputNumber} from "../InputNumber";
-import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
-
-export const NumberRange = designComponent({
-  name: 'number-range',
-  props: {
-    start: { type: [String, Number] },
-    end: { type: [String, Number] },
-    startAttrs: { type: Object as PropType<PlainObject> },
-    endAttrs: { type: Object as PropType<PlainObject> },
-    noGroupWrapper: { type: Boolean },
-  },
-  emits: {
-    onUpdateStart: (val?: string | number) => true,
-    onUpdateEnd: (val?: string | number) => true,
-    onBlur: () => true,
-    onEnter: () => true,
-    onClear: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const startModel = useModel(() => props.start, emit.onUpdateStart);
-    const endModel = useModel(() => props.end, emit.onUpdateEnd);
-
-    const placeValue = computed(() => {
-      let start = startModel.value == null ? '' : String(startModel.value).trim();
-      let end = endModel.value == null ? '' : String(endModel.value).trim();
-      return start + end;
-    });
-
-    const checkRange = () => {
-      let start = startModel.value;
-      let end = endModel.value;
-      let startNum = Number(start);
-      let endNum = Number(end);
-      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
-        return;
-      }
-      if (startNum > endNum) {
-        [startNum, endNum] = [endNum, startNum];
-        startModel.value = startNum;
-        endModel.value = endNum;
-      }
-    };
-
-    const handler = {
-      onBlur: (): void => {
-        checkRange();
-        emit.onBlur();
-      },
-      onEnter: () => {
-        checkRange();
-        emit.onEnter();
-      },
-      onClear: () => {
-        startModel.value = undefined;
-        endModel.value = undefined;
-        emit.onClear();
-      },
-    };
-
-    return () => {
-      const content = (
-        <Input
-          suffixIcon="pi-original-size"
-          placeValue={placeValue.value}
-          clearHandler={handler.onClear}
-        >
-          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.startAttrs || {},
-            inputAttrs: {
-              ...props.startAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.endAttrs || {},
-            inputAttrs: {
-              ...props.endAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-        </Input>
-      );
-      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
-    };
-  },
-});
-
-export default NumberRange;
+import {computed, designComponent, PropType, useModel} from "@peryl/react-compose";
+import {InputGroup} from "../InputGroup";
+import {InputNumber} from "../InputNumber";
+import {Input} from "../Input";
+import {PlainObject} from "@peryl/utils/event";
+
+export const NumberRange = designComponent({
+  name: 'number-range',
+  props: {
+    start: { type: [String, Number] },
+    end: { type: [String, Number] },
+    startAttrs: { type: Object as PropType<PlainObject> },
+    endAttrs: { type: Object as PropType<PlainObject> },
+    noGroupWrapper: { type: Boolean },
+  },
+  emits: {
+    onUpdateStart: (val?: string | number) => true,
+    onUpdateEnd: (val?: string | number) => true,
+    onBlur: () => true,
+    onClear: () => true,
+    onEnterStart: () => true,
+    onEnterEnd: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const startModel = useModel(() => props.start, emit.onUpdateStart);
+    const endModel = useModel(() => props.end, emit.onUpdateEnd);
+
+    const placeValue = computed(() => {
+      let start = startModel.value == null ? '' : String(startModel.value).trim();
+      let end = endModel.value == null ? '' : String(endModel.value).trim();
+      return start + end;
+    });
+
+    const checkRange = () => {
+      let start = startModel.value;
+      let end = endModel.value;
+      let startNum = Number(start);
+      let endNum = Number(end);
+      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
+        return;
+      }
+      if (startNum > endNum) {
+        [startNum, endNum] = [endNum, startNum];
+        startModel.value = startNum;
+        endModel.value = endNum;
+      }
+    };
+
+    const handler = {
+      onBlur: (): void => {
+        checkRange();
+        emit.onBlur();
+      },
+      onEnter: (type: 'start' | 'end') => {
+        checkRange();
+        type === "start" ? emit.onEnterStart() : emit.onEnterEnd();
+      },
+      onClear: () => {
+        startModel.value = undefined;
+        endModel.value = undefined;
+        emit.onClear();
+      },
+    };
+
+    return () => {
+      const content = (
+        <Input
+          suffixIcon="pi-original-size"
+          placeValue={placeValue.value}
+          clearHandler={handler.onClear}
+        >
+          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('start')} {...{
+            ...props.startAttrs || {},
+            inputAttrs: {
+              ...props.startAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={() => handler.onEnter('end')} {...{
+            ...props.endAttrs || {},
+            inputAttrs: {
+              ...props.endAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+        </Input>
+      );
+      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
+    };
+  },
+});
+
+export default NumberRange;

package/src/packages/components/Object/createObjectHooks.tsx

@@ -1,4 +1,4 @@
-import {createHooks, createRenderHook, iMouseEvent} from "plain-design-composition";
+import {createHooks, createRenderHook, iMouseEvent} from "@peryl/react-compose";
 
 export function createObjectHooks() {
   return {

package/src/packages/components/Object/createObjectRender.multiple.tsx

@@ -1,9 +1,8 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useModel, useRefs} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {delay} from "plain-utils/utils/delay";
+import {createEffectsOfReaction, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {delay} from "@peryl/utils/delay";
 import {SelectOption} from "../SelectOption";
 import {iSelectProps} from "../Select/select.utils";
 import i18n from "../i18n";
@@ -16,7 +15,7 @@ import i18n from "../i18n";
 export function createObjectRenderMultiple(
   { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
     /**
@@ -32,9 +31,9 @@ export function createObjectRenderMultiple(
       await delay();
       selectHandler.reset();
     }
-  });
+  }, effects);
 
-  const { refs, onRef } = useRefs({ select: Select });
+  const { refs, onRef } = useRefs({ select: Select }, { effects });
 
   const publicHandler = {
     /**
@@ -110,7 +109,7 @@ export function createObjectRenderMultiple(
         publicHandler.onSelect(modelValue);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -224,10 +223,10 @@ export function createObjectRenderMultiple(
       },
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({ ...handler, }));
+    const popperAttrs = effectComputed(() => ({ ...handler, }));
 
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       ...checkHandler,
       modelValue: state.value,
       onUpdateModelValue: onSelectChange,
@@ -243,6 +242,7 @@ export function createObjectRenderMultiple(
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
       noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
+
     return { state, popperAttrs, onSelectChange, selectAttrs, reset };
 
   })();

package/src/packages/components/Object/createObjectRender.single.tsx

@@ -1,9 +1,8 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useRefs, watch} from "plain-design-composition";
+import {createEffectsOfReaction, reactive, useRefs} from "@peryl/react-compose";
 import {convertRowToSelected, convertSelectedToRow} from "../$object/object.conver";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {SelectOption} from "../SelectOption";
 import i18n from "../i18n";
 
@@ -15,9 +14,9 @@ import i18n from "../i18n";
 export function createObjectRenderSingle(
   { props, event, hooks, classes, inputSlots, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
 
-  const { refs, onRef } = useRefs({ select: Select });
+  const { refs, onRef } = useRefs({ select: Select }, { effects });
 
   const publicHandler = {
     /**
@@ -38,8 +37,12 @@ export function createObjectRenderSingle(
       if (!selected) {
         publicHandler.onClear();
       } else {
-        const newRow = convertSelectedToRow(selected, props.map);
-        !!props.row && Object.assign(props.row, newRow);
+        if (props.bindRowModel) {
+          event.emit.onUpdateRow(selected);
+        } else {
+          const newRow = convertSelectedToRow(selected, props.map);
+          !!props.row && Object.assign(props.row, newRow);
+        }
       }
       inputHandler.state.inputValue = selected?.[props.labelField];
       event.emit.onSelect(selected);
@@ -78,7 +81,7 @@ export function createObjectRenderSingle(
         hooks.onInputChange.exec(val);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -94,6 +97,7 @@ export function createObjectRenderSingle(
         clearHandler: publicHandler.onClear
       });
     });
+
     return { state, inputAttrs };
   })();
 
@@ -105,7 +109,7 @@ export function createObjectRenderSingle(
   const selectHandler = (() => {
 
     /*将row转化为selected对象，用来辅助getSelectValue实现功能*/
-    const row2selected = computed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
+    const row2selected = effectComputed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
 
     /*获取当前select的modelValue以及要渲染的select options数组*/
     const getSelectValue = (): { value: any, option: null | iObjectSelectOption[] } => {
@@ -120,9 +124,7 @@ export function createObjectRenderSingle(
     const state = reactive(getSelectValue());
 
     /*当绑定值变化时，重新计算select的modelValue以及option数组*/
-    effects.push(
-      watch(() => props.modelValue, () => {Object.assign(state, getSelectValue());})
-    );
+    effectWatch(() => props.modelValue, () => {Object.assign(state, getSelectValue());});
 
     /**
      * 根据搜索关键词加载数据
@@ -143,16 +145,17 @@ export function createObjectRenderSingle(
       onClose: () => {Object.assign(state, getSelectValue());},
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({
+    const popperAttrs = effectComputed(() => ({
       ...handler,
     }));
+
     /*监听select的选中选项动作*/
     const onSelectChange = (code: string | null) => {
       const selected = !code ? null : state.option?.find(i => i.val === code)?.data;
       publicHandler.onSelect(selected);
     };
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       onUpdateModelValue: onSelectChange,
       loading: loading.value,
       class: classes.value,
@@ -165,6 +168,7 @@ export function createObjectRenderSingle(
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
       noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
+
     return { state, popperAttrs, onSelectChange, selectAttrs };
   })();
 

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "@peryl/react-compose";
 import {Select} from "../Select";
 import {Icon} from "../Icon";
 import './object.scss';
@@ -8,8 +8,8 @@ import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createObjectRenderMultiple} from "./createObjectRender.multiple";
 import {createObjectRenderSingle} from "./createObjectRender.single";
 import {$configuration} from "../$configuration";
-import {debounce} from "plain-utils/utils/debounce";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {debounce} from "@peryl/utils/debounce";
+import {createEffects} from "@peryl/utils/createEffects";
 import {eFilterOperator} from "../FilterService/utils/filter.service.utils";
 import {useEdit} from "../../uses/useEdit";
 import {stopPopup} from "../usePopup/utils/stopPopup";

package/src/packages/components/Object/object.utils.ts

@@ -1,5 +1,5 @@
-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 {iObjectServicePickConfig} from "../$object/object.service.utils";
 import {iObjectService} from "../$object/createObjectService";
 import {iObjectHooks} from "./createObjectHooks";
@@ -9,8 +9,9 @@ import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
 export const ObjectPropsOption = {
   ...EditProps,
   modelValue: { type: [Array, String, Number] as PropType<any[] | string | number> },       // 双向绑定值，单选的时候是显示值，多选时为绑定的数组
-  option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },                       // TableOption对象
+  option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },      // TableOption对象
   row: { type: Object as PropType<PlainObject> },                                           // 行对象或者说是表单对象，单选完毕时会根据map将选中行的字段值更新到row对象上
+  bindRowModel: { type: Boolean },                                                          // 绑定row，在单选的情况下选中行数据时，会将行数据通过onUpdateRow事件派发以更新v-model:row的绑定值
   map: { type: Object as PropType<iObjectServicePickConfig['map']> },                       // 映射关系，选择完毕时会根据map将值映射到结果对象中
   multiple: { type: Boolean },                                                              // 是否为多选
   service: { type: Object as PropType<iObjectService> },                                    // 自定义服务
@@ -27,6 +28,7 @@ export type iObjectPropsType = ExtractPropTypes<typeof ObjectPropsOption>
 
 export const ObjectEmitsOption = {
   onUpdateModelValue: (val?: string | number | any[]) => true,
+  onUpdateRow: (val?: PlainObject) => true,
   onFocus: (e: FocusEvent) => true,
   onBlur: (e: FocusEvent) => true,
   onSelect: (selected: any) => true,

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {Select} from "../Select";
 import {OvPropsOption} from "./ov.utils";
 import {usePublicOv} from "./usePublicOv";

package/src/packages/components/Ov/ov.utils.ts

@@ -1,4 +1,4 @@
-import {ExtractPropTypes, PropType} from "plain-design-composition";
+import {ExtractPropTypes, PropType} from "@peryl/react-compose";
 import {iOvService} from "../$ov/createOvService";
 
 export const OvPropsOption = {

package/src/packages/components/Ov/usePublicOv.tsx

@@ -1,4 +1,4 @@
-import {reactive, watch} from "plain-design-composition";
+import {reactive, watch} from "@peryl/react-compose";
 import {iOvMeta} from "../$ov/ov.utils";
 import $configuration from "../$configuration";
 import {iOvPropsType} from "./ov.utils";

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

@@ -1,7 +1,8 @@
-import {designComponent, getComponentCls, useClassCache, useModel} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache, useModel} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {Box} from "../Box";
 import './page-card.scss';
+import {EditProps, useEdit} from "../../uses/useEdit";
 
 export const PageCard = designComponent({
   name: 'page-card',
@@ -12,6 +13,7 @@ export const PageCard = designComponent({
     collapsable: { type: Boolean },
     full: { type: Boolean },
     ...StyleProps,
+    ...EditProps,
   },
   slots: ['default'],
   emits: {
@@ -22,6 +24,7 @@ export const PageCard = designComponent({
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { styleComputed } = useStyle();
+    useEdit();
 
     const classes = useClassCache(() => [
       getComponentCls('page-card'),

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

@@ -1,6 +1,7 @@
-import {designComponent, getComponentCls, PropType, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClassCache} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import PageCard from "../PageCard";
+import {EditProps, useEdit} from "../../uses/useEdit";
 
 export const PageCardContent = designComponent({
   name: 'page-card-content',
@@ -9,6 +10,7 @@ export const PageCardContent = designComponent({
     full: { type: Boolean },
     noPadding: { type: Boolean },
     ...StyleProps,
+    ...EditProps,
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -16,6 +18,7 @@ export const PageCardContent = designComponent({
     const pageCard = PageCard.use.inject();
 
     const { styleComputed } = useStyle();
+    useEdit();
 
     const classes = useClassCache(() => [
       getComponentCls('page-card-content'),

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import Icon from "../Icon";
 import PageCard from "../PageCard";

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

@@ -1,4 +1,4 @@
-import {designComponent, onBeforeUnmount} from "plain-design-composition";
+import {designComponent, onBeforeUnmount} from "@peryl/react-compose";
 import {usePageRenderContext} from "../usePageRenderContext";
 
 export const PageRenderList = designComponent({

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

@@ -1,11 +1,11 @@
-import {computed, getComponentCls, reactive} from "plain-design-composition";
+import {getComponentCls, globalComputed, reactive} from "@peryl/react-compose";
 import {createCache} from "../../utils/createCache";
 import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {DeepPartial} from "../../utils/type";
 import {iApplicationConfiguration} from "../Application/utils/application.utils";
 import {BaseColors, iThemeConfiguration} from "../Application/theme/theme";
 import {deepmerge} from "./deepmerge";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export const PageThemeUtils = (() => {
 
@@ -27,7 +27,7 @@ export const PageThemeUtils = (() => {
     zoom: zoomCache.get(),
   });
 
-  const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
+  const configuration = globalComputed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
     if (!config.theme) {config.theme = {};}
     if (!config.theme.base) {config.theme.base = {};}

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

@@ -1,8 +1,8 @@
-import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {EditProps, useEdit} from "../../uses/useEdit";
-import {classnames} from "plain-utils/dom/classnames";
-import {delay} from "plain-utils/utils/delay";
+import {classnames} from "@peryl/utils/classnames";
+import {delay} from "@peryl/utils/delay";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 import {Icon} from "../Icon";

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import './paragraph.scss';
 import {ParagraphItem} from "../ParagraphItem";
 import {i18n} from "../i18n";

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
 
 export const ParagraphItem = designComponent({
   name: 'paragraph-item',

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

@@ -1,13 +1,13 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {injectPlainTable} from "../Table/table/Table";
-import {$image} from "../$image";
 import {FileServiceUploadConfig} from "../$file";
 import $configuration from "../$configuration";
 import {formatImagePath, Image} from "../Image";
 import {usePlc} from "../Table/plc/use/usePlc";
 import ImageUploader from "../ImageUploader";
+import {$previewer} from "../$previewer";
 
 export const PlcImage = designComponent({
   name: 'plc-image',
@@ -35,8 +35,8 @@ export const PlcImage = designComponent({
 
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
-    const preview = (index: number) => {
-      $image.preview((table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)), index);
+    const preview = (index: number, e: iMouseEvent) => {
+      $previewer.preview({ current: index, urls: (table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)) }, e.currentTarget as any);
     };
 
     return usePlc({
@@ -56,7 +56,7 @@ export const PlcImage = designComponent({
             minHeight={size.value}
             hideTips
             fit="cover"
-            onClick={() => preview(node.state.index)}
+            onClick={(e) => preview(node.state.index, e)}
           />
         ),
         edit: ({ row, plc }) => !plc.props.field ? null :
@@ -75,7 +75,7 @@ export const PlcImage = designComponent({
               row[props.imgKeyField!] = null;
             }}
             onUploadSuccess={(resp: any) => {
-              row[props.imgKeyField!] = resp.data.id;
+              row[props.imgKeyField!] = resp.result.id;
             }}
           />
       }

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

@@ -1,9 +1,9 @@
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {usePlc} from "../Table/plc/use/usePlc";
 import _Object from "../Object";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 import {ObjectPropsOption} from "../Object/object.utils";
 import {iFilterConfigObject} from "../FilterService/filter/fitler.object";
 

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {OvPropsOption} from "../Ov/ov.utils";
 import {usePublicOv} from "../Ov/usePublicOv";
 import {PlcSelect} from "../Table/editor/PlcSelect";

package/src/packages/components/Popup/PopupProvider.tsx

@@ -1,5 +1,4 @@
-import {createProvider} from "../../utils/createProvider";
-import {getComponentCls} from "plain-design-composition";
+import {createProvider, getComponentCls} from "@peryl/react-compose";
 import {iPopupAnimation, iPopupTrigger, iPopupUseOption} from "../usePopup/utils/popup.utils";
 
 /**

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "@peryl/react-compose";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -6,7 +6,7 @@ import {useReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
 import {ThemeSize, ThemeStatus} from "../../uses/useStyle";
 import {Scroll} from "../Scroll";
 import {decodePlacement} from "../usePopup/utils/decodePlacement";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import './popup.scss';
 import {EditProps} from "../../uses/useEdit";
 import {iPopupProviderMeta, PopupProvider} from "./PopupProvider";