plain-design 1.0.0-beta.35 → 1.0.0-beta.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.35",
+  "version": "1.0.0-beta.37",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.181",
+    "plain-design-composition": "^0.0.185",
     "react": "^18.0.1",
     "react-dom": "^18.0.1"
   },
@@ -34,7 +34,7 @@
     "color": "^4.2.3",
     "dayjs": "^1.10.4",
     "plain-icons": "0.0.7",
-    "plain-utils": "^0.1.48",
+    "plain-utils": "0.1.56",
     "react-flip-move": "^3.0.4",
     "react-transition-group": "^4.4.1"
   },
@@ -69,7 +69,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.182",
+    "plain-design-composition": "^0.0.185",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/$object/createObjectService.tsx

@@ -19,23 +19,27 @@ import {ClientZoom} from "../../utils/ClientZoom";
 export function createObjectService(defaultConfig: iObjectServiceDefaultConfig) {
 
   const publicDialogOption: iDialogServiceOption = {
+    headAlign: 'left',
     title: i18n('base.selectData').d('选择数据'),
     confirmButton: true,
     cancelButton: true,
     maxHeight: ' ',
-    maxWidth: '60vw',
+    maxWidth: ' ',
+    width: '50vw'
   };
 
   function processShowRows(option: TableOptionSpace.iTableOption) {
-    const { clientHeight } = ClientZoom.getClientSize();
-    const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
-    const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
-    const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
-
-    option.config.showRows = showRows;
-    option.pagination.state.size = option.config.showRows;
-    option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
-    option.fill.state.showRows = showRows;
+    if (option.useConfig.showRows == null) {
+      const { clientHeight } = ClientZoom.getClientSize();
+      const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
+      const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
+      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+
+      option.config.showRows = showRows;
+      option.pagination.state.size = option.config.showRows;
+      option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
+      option.fill.state.showRows = showRows;
+    }
   }
 
   function processPermit(option: TableOptionSpace.iTableOption) {
@@ -92,7 +96,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       },
     };
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -101,16 +105,11 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       })
     );
 
-    (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
-    effects.push(
-      config.option.hooks.onDblclickRow.use(async () => {
-        await delay();
-        handler.handleConfirm();
-      })
-    );
-
     const close = $dialog({
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: handler.handleConfirm,
@@ -124,6 +123,14 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       }
     });
 
+    !serviceConfig.readonly && (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
+    effects.push(
+      config.option.hooks.onDblclickRow.use(async () => {
+        await delay();
+        handler.handleConfirm();
+      })
+    );
+
     return dfd.promise;
   }
 
@@ -145,7 +152,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       selected: (!config.selected ? undefined : deepcopy(convertRowToSelected(config.selected, config.map))) as undefined | PlainObject[]
     });
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -155,7 +162,11 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
     );
 
     $dialog({
+      headAlign: 'left',
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: async () => {

package/src/packages/components/$object/object.service.utils.ts

@@ -1,6 +1,8 @@
 import {PlainObject} from "plain-utils/utils/event";
 import {iObjectConverter} from "./object.conver";
 import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {ComponentPropsType} from "plain-design-composition";
+import {Dialog} from "../Dialog";
 
 /**
  * 创建Object服务需要的默认的配置参数
@@ -17,9 +19,11 @@ export interface iObjectServiceDefaultConfig {
  * @date    2023.1.24 20:14
  */
 export interface iObjectServicePickPublicConfig extends Partial<iObjectServiceDefaultConfig> {
-  option: TableOptionSpace.iTableOption,                                                       // TableOption对象
-  map?: Record<string, string> | [iObjectConverter, iObjectConverter],         // 用来转化选中行与目标行对象的规则
-  beforeCancel?: () => void | boolean | Promise<void | boolean>,              // 取消之前的动作
+  option: TableOptionSpace.iTableOption,                                                        // TableOption对象
+  map?: Record<string, string> | [iObjectConverter, iObjectConverter],                          // 用来转化选中行与目标行对象的规则
+  beforeCancel?: () => void | boolean | Promise<void | boolean>,                                // 取消之前的动作
+  readonly?: boolean,                                                                           // 只读，不需要选择数据，只需要关闭
+  dialogProps?: Partial<ComponentPropsType<typeof Dialog>>                                       // dialog属性
 }
 
 /**

package/src/packages/components/$previewer/ImagePreviewerFixedContainer.tsx

@@ -97,6 +97,7 @@ export const ImagePreviewerFixedContainer = designComponent({
       <div className={classes.value} ref={onRef.el}>
         {state.ready && (
           <ImagePreviewer
+            closable
             option={props.option}
             style={styles.value}
           />

package/src/packages/components/AutoTable/use/useTableOption.table.tsx

@@ -5,7 +5,7 @@ import {PlainObject} from "plain-utils/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
 import {AutoModule} from "../utils/AutoModule";
-import {iMouseEvent} from "plain-design-composition";
+import {Fragment, iMouseEvent} from "plain-design-composition";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -46,8 +46,8 @@ export const useTableOptionTable = AutoModule.createRegistration((
   hooks.onRenderColumns.use({
     processor: ({ list, render }) => {list.push({ key: 'index', seq: 0, render });},
     render: () => <>
-      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size}/>}
-      {render.default()}
+      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size} key="key_standard_index"/>}
+      <Fragment key="key_option_render">{render.default()}</Fragment>
     </>
   });
 

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

@@ -50,6 +50,7 @@ export namespace TableOptionSpace {
    * @date    2022.12.20 10:47
    */
   export interface iTableOptionCustomConfig {
+    title?: string,                                                     // 表格标题
     url?: iUrl,                                                         // 请求配置
     data?: any[],                                                       // 默认数据
     fill?: boolean,                                                     // 是否自动计算高度
@@ -161,6 +162,8 @@ export namespace TableOptionSpace {
    */
   export interface iTableOption {
     config: iTableOptionConfig;
+    useConfig: iTableOptionUseConfig,
+    defaultConfig: iTableOptionDefaultConfig,
     clone: iTableOptionClone;
   }
 

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

@@ -13,6 +13,7 @@ import {delay} from "plain-utils/utils/delay";
 import {Tooltip} from "../Tooltip";
 import {buildCycleIndexList} from "../../utils/buildCycleIndexList";
 import {ComponentUtils} from "../../utils/ComponentUtils";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
 
 export const Carousel = designComponent({
   name: 'carousel',
@@ -294,11 +295,10 @@ export const Carousel = designComponent({
           reset();
         };
 
-        draggierEffects.push(addElementListener(document.body, 'mousemove', touchmove));
-        draggierEffects.push(addElementListener(document.body, 'touchmove', touchmove));
-
-        draggierEffects.push(addElementListener(document.body, 'mouseup', draggierEffects.clear));
-        draggierEffects.push(addElementListener(document.body, 'touchend', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('mousemove', touchmove));
+        draggierEffects.push(addWindowListener('touchmove', touchmove));
+        draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('touchend', draggierEffects.clear));
       };
 
       const reset = () => {

package/src/packages/components/ImagePreviewer/ImagePreviewer.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles, watch} from "plain-design-composition";
 import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "./image-previewer.utils";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
@@ -18,7 +18,8 @@ import {getDeviceInfo} from "../../utils/getDeviceInfo";
 export const ImagePreviewer = designComponent({
   name: 'image-preview-component',
   props: {
-    option: { type: Object as PropType<iImagePreviewerOption>, required: true }
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true },
+    closable: { type: Boolean }
   },
   inheritPropsType: iHTMLDivElement,
   setup({ props }) {
@@ -71,7 +72,8 @@ export const ImagePreviewer = designComponent({
         }
 
         /*当前正在显示的图片元素，关闭时让这个元素显示一个缩小动画*/
-        const sourceImgElement = props.option.imageElement;
+        const currentUrl = props.option.urls[state.current!].url;
+        const sourceImgElement = props.option.imageElement?.getAttribute('src') === currentUrl ? props.option.imageElement : (Array.from(document.querySelectorAll('img')) as HTMLImageElement[]).find(i => i.getAttribute('src') === currentUrl && i !== currentImgElement && !i.hasAttribute('data-ignore'));
 
         const currentRect = getCenterRect({ imageElement: currentImgElement, containerElement: refs.carousel!.refs.el! });
 
@@ -129,17 +131,18 @@ export const ImagePreviewer = designComponent({
 
     const handler = {
       onDoubleClickImage: () => {
-        methods.close();
+        props.closable && methods.close();
       },
-      onChangeCurrent: () => {
-        transformHandler.transformMethods.reset();
-        if (!!props.option.imageElement) {
-          if (props.option.imageElement.style.opacity != props.option.oldSourceImageOpacity) {
-            props.option.imageElement.style.opacity = props.option.oldSourceImageOpacity || "";
-          }
+    };
+
+    watch(() => state.current, () => {
+      transformHandler.transformMethods.reset();
+      if (!!props.option.imageElement) {
+        if (props.option.imageElement.style.opacity != props.option.oldSourceImageOpacity) {
+          props.option.imageElement.style.opacity = props.option.oldSourceImageOpacity || "";
         }
       }
-    };
+    });
 
     const transformHandler = (() => {
       const transformState = reactive({
@@ -191,7 +194,7 @@ export const ImagePreviewer = designComponent({
             if (!!transformState.previousTouchstartTimestamp) {
               if (currentTouchstartTimestamp - transformState.previousTouchstartTimestamp < 200) {
                 /*100ms内点击了两次，自动关闭*/
-                methods.close();
+                props.closable && methods.close();
                 return;
               }
             }
@@ -244,70 +247,71 @@ export const ImagePreviewer = designComponent({
                 transformState.transformData.top = Number((touchState.startTop + (moveY - touchState.startY)).toFixed(2));
                 transformState.transformData.left = Number((touchState.startLeft + (moveX - touchState.startX)).toFixed(2));
               };
-              touchEffects.push(addElementListener(document.body, 'touchmove', touchmove, { passive: false }));
-              touchEffects.push(addElementListener(document.body, 'touchend', touchEffects.clear, { passive: false }));
-              touchEffects.push(addElementListener(document.body, 'mousemove', touchmove, { passive: false }));
-              touchEffects.push(addElementListener(document.body, 'mouseup', touchEffects.clear, { passive: false }));
+              touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+              touchEffects.push(addWindowListener('mousemove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('mouseup', touchEffects.clear, { passive: false }));
             } else {
               if (getDeviceInfo().deviceType === 'mobile' && 'touches' in e && e.touches.length === 1) {
 
                 /*---------------------------------------单指拖拽关闭-------------------------------------------*/
-
-                /*移动端的情况下，如果纵向移动超过一定距离，则一边移动一边缩小，缩小到一定程度关闭预览*/
-                let imageElement = (e.currentTarget as HTMLDivElement).querySelector('img') as HTMLImageElement;
-                let mobileTouchState = {
-                  startX: e.touches[0].clientX,
-                  startY: e.touches[0].clientY,
-                  touching: null as null | { scale: number },
-                };
-                const touchmove = (e: TouchEvent) => {
-                  if (autoClearIfDoubleTouching(e)) {return;}
-                  e.stopPropagation();
-                  e.preventDefault();
-                  let durX = e.touches[0].clientX - mobileTouchState.startX;
-                  let durY = e.touches[0].clientY - mobileTouchState.startY;
-                  if (!mobileTouchState.touching) {
-                    if (durY > durX && durY > 10) {
-                      transformState.mobileClosing = true;
-                      mobileTouchState.touching = { scale: 1 };
-                      /*拖拽结束时的处理动作*/
-                      touchEffects.push(async () => {
-                        transformState.mobileClosing = false;
-
-                        if (mobileTouchState.touching!.scale < 0.9) {
-                          /*取消缩放，改为实际设置大小，是的关闭动画合理*/
-                          methods.close();
-                        } else {
-                          /*取消缩放，还原原来的状态*/
-                          imageElement.style.transition = "all ease 300ms";
-                          imageElement.style.transform = "translate3d(0,0,0) scale(1)";
-                          delay(300).then(() => {
-                            imageElement.style.transition = "";
-                            imageElement.style.transform = "";
-                          });
-                        }
-
-                        mobileTouchState.touching = null;
-                      });
+                if (props.closable) {
+                  /*移动端的情况下，如果纵向移动超过一定距离，则一边移动一边缩小，缩小到一定程度关闭预览*/
+                  let imageElement = (e.currentTarget as HTMLDivElement).querySelector('img') as HTMLImageElement;
+                  let mobileTouchState = {
+                    startX: e.touches[0].clientX,
+                    startY: e.touches[0].clientY,
+                    touching: null as null | { scale: number },
+                  };
+                  const touchmove = (e: TouchEvent) => {
+                    if (autoClearIfDoubleTouching(e)) {return;}
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let durX = e.touches[0].clientX - mobileTouchState.startX;
+                    let durY = e.touches[0].clientY - mobileTouchState.startY;
+                    if (!mobileTouchState.touching) {
+                      if (durY > durX && durY > 10) {
+                        transformState.mobileClosing = true;
+                        mobileTouchState.touching = { scale: 1 };
+                        /*拖拽结束时的处理动作*/
+                        touchEffects.push(async () => {
+                          transformState.mobileClosing = false;
+
+                          if (mobileTouchState.touching!.scale < 0.9) {
+                            /*取消缩放，改为实际设置大小，是的关闭动画合理*/
+                            methods.close();
+                          } else {
+                            /*取消缩放，还原原来的状态*/
+                            imageElement.style.transition = "all ease 300ms";
+                            imageElement.style.transform = "translate3d(0,0,0) scale(1)";
+                            delay(300).then(() => {
+                              imageElement.style.transition = "";
+                              imageElement.style.transform = "";
+                            });
+                          }
+
+                          mobileTouchState.touching = null;
+                        });
+                      }
+                    }
+                    if (!mobileTouchState.touching) {
+                      return;
+                    }
+                    if (durY < 0) {durY = 0;}
+                    if (durY === 0) {
+                      /*移动距离为0，不做缩放移动*/
+                      imageElement.style.transform = '';
+                    } else {
+                      /*按照移动距离进行缩放移动*/
+                      const height = Math.ceil(document.body.clientHeight / 3);
+                      const scale = Number((1 - durY / height).toFixed(2));
+                      mobileTouchState.touching.scale = scale;
+                      imageElement.style.transform = `translate3d(0,${durY}px,0) scale(${scale})`;
                     }
-                  }
-                  if (!mobileTouchState.touching) {
-                    return;
-                  }
-                  if (durY < 0) {durY = 0;}
-                  if (durY === 0) {
-                    /*移动距离为0，不做缩放移动*/
-                    imageElement.style.transform = '';
-                  } else {
-                    /*按照移动距离进行缩放移动*/
-                    const height = Math.ceil(document.body.clientHeight / 3);
-                    const scale = Number((1 - durY / height).toFixed(2));
-                    mobileTouchState.touching.scale = scale;
-                    imageElement.style.transform = `translate3d(0,${durY}px,0) scale(${scale})`;
-                  }
-                };
-                touchEffects.push(addElementListener(document.body, 'touchmove', touchmove, { passive: false }));
-                touchEffects.push(addElementListener(document.body, 'touchend', touchEffects.clear, { passive: false }));
+                  };
+                  touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+                  touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+                }
               }
             }
 
@@ -338,8 +342,8 @@ export const ImagePreviewer = designComponent({
               transformState.mobileScaling = null;
             });
 
-            touchEffects.push(addElementListener(document.body, 'touchmove', touchmove, { passive: false, }));
-            touchEffects.push(addElementListener(document.body, 'touchend', touchEffects.clear, { passive: false }));
+            touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false, }));
+            touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
           }
         },
       };
@@ -510,7 +514,6 @@ export const ImagePreviewer = designComponent({
             v-model={state.current}
             height={props.option.autoHeight ? undefined : `calc(100% - ${props.option.galleryHeight}px)`}
             style={{ paddingBottom: `${props.option.separatorHeight}px` }}
-            onChange={handler.onChangeCurrent}
             disableSwiper={transformHandler.isTransforming.value}
             largeSwitchButton
             switchButton={props.option.swipeButton == false ? false : undefined}
@@ -548,7 +551,6 @@ export const ImagePreviewer = designComponent({
             <ImagePreviewerGallery
               option={props.option}
               v-model={state.current}
-              onChange={handler.onChangeCurrent}
               style={galleryStyles.value}
             />
           )}

package/src/packages/components/ImagePreviewer/ImagePreviewerCarouselImage.tsx

@@ -48,7 +48,7 @@ export const ImagePreviewerCarouselImage = designComponent({
     const preventDefaultDraggier = (e: iMouseEvent) => {e.preventDefault();};
 
     return () => (
-      <img ref={onRef.img} style={styles.value} src={props.src} data-direction={state.direction} onLoad={onLoad} onError={onError} onDragStart={preventDefaultDraggier}/>
+      <img data-ignore="true" ref={onRef.img} style={styles.value} src={props.src} data-direction={state.direction} onLoad={onLoad} onError={onError} onDragStart={preventDefaultDraggier}/>
     );
   },
 });

package/src/packages/components/ImagePreviewer/ImagePreviewerGallery.tsx

@@ -188,7 +188,7 @@ export const ImagePreviewerGallery = designComponent({
                   onMouseUp={(e) => handler.onMouseupItem(e, index)}
                   data-active={String(model.value == index)}
                 >
-                  <img src={item.thumbUrl} onMouseDown={handler.preventDragImage} onLoad={() => handler.onImageLoad(item.thumbUrl)} onError={() => handler.onImageLoad(item.thumbUrl)}/>
+                  <img data-ignore="true" src={item.thumbUrl} onMouseDown={handler.preventDragImage} onLoad={() => handler.onImageLoad(item.thumbUrl)} onError={() => handler.onImageLoad(item.thumbUrl)}/>
                   {/*{<PreviewerLoading/>}*/}
                   {state.readyMap[item.thumbUrl] !== true && <PreviewerLoading/>}
                 </div>

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

@@ -3,17 +3,27 @@ import {OvPropsOption} from "../Ov/ov.utils";
 import {usePublicOv} from "../Ov/usePublicOv";
 import {PlcSelect} from "../Table/editor/PlcSelect";
 import {SelectOption} from "../SelectOption";
+import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
+import {inheritSlots} from "../../utils/inheritSlots";
 
 export const PlcOv = designComponent({
   name: 'plc-ov',
   inheritPropsType: PlcSelect,
   props: OvPropsOption,
-  setup({ props }) {
+  scopeSlots: PlcScopeSlotsOptions,
+  slots: ['default'],
+  setup({ props, slots, scopeSlots }) {
     const { state } = usePublicOv({ props });
     return () => (
-      <PlcSelect>
-        {state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))}
-      </PlcSelect>
+      <PlcSelect
+        v-slots={inheritSlots({
+          slots,
+          scopeSlots,
+          defaultSlots: {
+            default: () => state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))
+          }
+        })}
+      />
     );
   },
 });

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

@@ -3,8 +3,8 @@ import './stack-card.scss';
 import {findReactElement} from "../../utils/findReactElement";
 import StackCardItem from "../StackCardItem";
 import {createEffects} from "plain-utils/utils/createEffects";
-import {addElementListener} from "plain-utils/dom/addElementListener";
 import {delay} from "plain-utils/utils/delay";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
 
 export const StackCard = designComponent({
   name: 'stack-card',
@@ -78,10 +78,10 @@ export const StackCard = designComponent({
           draggierState.left = -durX + staticState.startLeft;
         };
 
-        draggierEffects.push(addElementListener(document.body, 'mousemove', touchmove));
-        draggierEffects.push(addElementListener(document.body, 'mouseup', draggierEffects.clear));
-        draggierEffects.push(addElementListener(document.body, 'touchmove', touchmove));
-        draggierEffects.push(addElementListener(document.body, 'touchend', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('mousemove', touchmove));
+        draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('touchmove', touchmove));
+        draggierEffects.push(addWindowListener('touchend', draggierEffects.clear));
       };
 
       return { draggierState, touchstart };

package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss

@@ -19,6 +19,8 @@
       margin-bottom: $margin;
 
       .table-operation-bar-right {
+        margin-left: 12px;
+
         & > * + * {
           margin-left: calc(#{$margin} - 8px);
         }

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

@@ -128,12 +128,12 @@ export function useTableFormEditor(
                     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}
-                        key={index}
                         disabled={!editable}
                         {...validateAttrs}
                       >

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

@@ -118,12 +118,12 @@ export function useTableModifyEditor(
               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}
-                  key={index}
                   disabled={!editable}
                   {...validateAttrs}
                 >

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -93,10 +93,9 @@ $scrollbarSize: 12px;
       }
 
       &.plt-row-checked {
-        border-bottom-color: plv(primary-light-2);
-
         td {
           background-color: plv(primary-light-1);
+          border-bottom-color: plv(primary-light-2);
         }
       }
     }

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

@@ -15,7 +15,7 @@ export const useDialog = createApplicationService(
     const service = (sourceOption: string | iDialogServiceOption, externalOption?: iDialogServiceOption): () => void => {
       const option = formatOptions(sourceOption, externalOption);
       !option.id && (option.id = nextDialogId());
-      option.minWidth !== null && (option.minWidth = '325px');
+      option.minWidth === null && (option.minWidth = '325px');
 
       getManager().then(async manager => {await manager.service(option);});
 

package/src/packages/utils/inheritSlots.ts

@@ -0,0 +1,28 @@
+import {RenderNode} from "plain-design-composition";
+
+export function inheritSlots<
+  Slots extends Record<string, (() => RenderNode) & { isExist: () => boolean }>,
+  ScopeSlots extends Record<string, ((...args: any[]) => RenderNode) & { isExist: () => boolean }>,
+>(
+  {
+    slots,
+    scopeSlots,
+    defaultSlots,
+    defaultScopeSlots,
+  }: {
+    slots?: Slots,
+    scopeSlots?: ScopeSlots,
+    defaultSlots?: { [k in keyof Slots]: Omit<Slots[k], 'isExist'> },
+    defaultScopeSlots?: { [k in keyof ScopeSlots]: Omit<ScopeSlots[k], 'isExist'> },
+  }
+) {
+  const ret = {} as any;
+
+  !!defaultSlots && Object.entries(defaultSlots).forEach(([key, val]) => {ret[key] = val;});
+  !!defaultScopeSlots && Object.entries(defaultScopeSlots).forEach(([key, val]) => {ret[key] = val;});
+
+  !!slots && Object.keys(slots).forEach((k: keyof Slots) => {if (slots[k].isExist()) {ret[k] = () => slots[k]();}});
+  !!scopeSlots && Object.keys(scopeSlots).forEach((k: keyof ScopeSlots) => {if (scopeSlots[k].isExist()) {ret[k] = (...args: any[]) => scopeSlots[k](...args);}});
+
+  return ret;
+}