plain-design 1.0.0-beta.125 → 1.0.0-beta.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.125",
+  "version": "1.0.0-beta.127",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -40,7 +40,7 @@
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@peryl/react-compose": "0.0.221",
+    "@peryl/react-compose": "0.0.223",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-class-properties": "7.23.3",
     "@babel/preset-env": "7.23.7",

package/src/packages/components/AutoTable/use/useTableOptionKeyboard.tsx

@@ -55,6 +55,7 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
       staticState.clearTableEnterEvent = () => {
         el.removeEventListener('mouseenter', onEnter);
         el.removeEventListener('mouseleave', onLeave);
+        staticState.clearTableEnterEvent = null;
       };
 
       return staticState.clearTableEnterEvent;
@@ -70,7 +71,10 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
         }
       };
       document.body.addEventListener('keydown', onKeydown);
-      staticState.clearTableKeydownEvent = () => {document.body.removeEventListener('keydown', onKeydown);};
+      staticState.clearTableKeydownEvent = () => {
+        document.body.removeEventListener('keydown', onKeydown);
+        staticState.clearTableKeydownEvent = null;
+      };
       return staticState.clearTableKeydownEvent;
     },
   };
@@ -83,6 +87,7 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
   onBeforeUnmount(() => {
     staticState.clearTableEnterEvent?.();
     staticState.clearTableKeydownEvent?.();
+    staticState.listeners.splice(0, staticState.listeners.length);
   });
 
   const on = (name: string, handler: (e: KeyboardEvent) => void) => {

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
+import {computed, designComponent, Fragment, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
@@ -95,9 +95,12 @@ export const FilterFormMultiple = designComponent({
      * @author  韦胜健
      * @date    2023.1.6 16:00
      */
-    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
-      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
-    )));
+    const usingFilterOptions = computed(() => {
+      // console.warn('run usingFilterOptions');
+      return (props.filterOptions || []).map(i => (
+        { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
+      ));
+    });
 
     /**
      * props.filterOptions变化时更新内部状态
@@ -240,7 +243,9 @@ export const FilterFormMultiple = designComponent({
                           <SelectOption label={handler!.label()} val={handler!.name} key={handler!.name}/>
                         ))}
                       </Select>
-                      {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      <Fragment key={filterOption.filterHandler}>
+                        {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      </Fragment>
                     </InputGroup>
                   </FormItem>
                 );

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType, reactive, watch} from "@peryl/react-compose";
+import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
 import {InputGroup} from "../InputGroup";
@@ -48,7 +48,10 @@ export const FilterFormSingle = designComponent({
       }
     };
 
-    const state = reactive(deepcopy(props.initialState) || utils.createState({ filterOptions: props.filterOptions || [] }));
+    const state: iFilterFormSingleState = reactive(
+      deepcopy(props.initialState) ||
+      utils.createState({ filterOptions: props.filterOptions || [] })
+    );
 
     /**
      * 正在使用的目标filterOptions
@@ -146,20 +149,22 @@ export const FilterFormSingle = designComponent({
         <InputGroup style={{ width: props.width }}>
           {slots.prepend()}
           {!props.hideFieldSelector && (
-            <Select width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
+            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
               {(props.filterOptions || []).map((option) => (
                 <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
               ))}
             </Select>
           )}
           {!props.hideHandlerSelector && (
-            <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
+            <Select key={state.field} width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
               {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
                 <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
               ))}
             </Select>
           )}
-          {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          <Fragment key={state.filterHandler}>
+            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          </Fragment>
           {!props.hideSearchButton && (
             <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
           )}

package/src/packages/components/InputGroup/input-group.scss

@@ -33,5 +33,14 @@
         border-left-color: transparent;
       }
     }
+
+    &.#{componentName(input)} + .#{componentName(button)} {
+      margin-left: -1px;
+    }
+
+    &.#{componentName(button)} + .#{componentName(input)},
+    &.#{componentName(button)} + .#{componentName(button)} {
+      margin-left: -1px;
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableOperation, iTableOperationPermitConfig, iTableOuterOperation, iTableOuterOperationConfig, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {Button} from "../../../Button";
 import {ButtonGroup} from "../../../ButtonGroup";
@@ -38,6 +38,7 @@ export const OuterOperation = designComponent({
         },
       },
     });
+    onBeforeUnmount(() => {state.dropdown = {} as any;});
 
     const permission = (() => {
       const { permit } = props;

package/src/packages/styles/global.import.scss

@@ -57,6 +57,7 @@
 @mixin hover($component) {
   &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly):not(.#{$component}-focus) {
     &:hover, &.#{$component}-hover {
+      z-index: 2;
       @content;
     }
   }
@@ -99,21 +100,65 @@
       }
       @content;
 
-      &.mt{margin-top: $margin}
-      &.mb{margin-bottom: $margin}
-      &.ml{margin-left: $margin}
-      &.mr{margin-right: $margin}
-      &.mx{margin-left: $margin;margin-right: $margin}
-      &.my{margin-top: $margin;margin-bottom: $margin}
-      &.margin {margin: $margin}
-
-      &.pt{padding-top: $margin}
-      &.pb{padding-bottom: $margin}
-      &.pl{padding-left: $margin}
-      &.pr{padding-right: $margin}
-      &.px{padding-left: $margin;padding-right: $margin}
-      &.py{padding-top: $margin;padding-bottom: $margin}
-      &.padding {padding: $margin}
+      &.mt {
+        margin-top: $margin
+      }
+
+      &.mb {
+        margin-bottom: $margin
+      }
+
+      &.ml {
+        margin-left: $margin
+      }
+
+      &.mr {
+        margin-right: $margin
+      }
+
+      &.mx {
+        margin-left: $margin;
+        margin-right: $margin
+      }
+
+      &.my {
+        margin-top: $margin;
+        margin-bottom: $margin
+      }
+
+      &.margin {
+        margin: $margin
+      }
+
+      &.pt {
+        padding-top: $margin
+      }
+
+      &.pb {
+        padding-bottom: $margin
+      }
+
+      &.pl {
+        padding-left: $margin
+      }
+
+      &.pr {
+        padding-right: $margin
+      }
+
+      &.px {
+        padding-left: $margin;
+        padding-right: $margin
+      }
+
+      &.py {
+        padding-top: $margin;
+        padding-bottom: $margin
+      }
+
+      &.padding {
+        padding: $margin
+      }
     }
   }
 }