样式优化

docs/components/table.md

@@ -560,7 +560,31 @@ order: 67
 
 - `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
 - `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
-- `position` 配置弹出位置，只有 `popOver` 模式有用。可选参数：`center`、`left-top`、`right-top`、`left-bottom`、`right-bottom`、`fixed-center`、`fixed-left-top`、`fixed-right-top`、`fixed-left-bottom`、`fixed-right-bottom`。
+- `position` 配置弹出位置，只有 `popOver` 模式有用。
+  可选参数：
+
+  - `center`
+
+  - `left-top`
+  - `right-top`
+  - `left-bottom`
+  - `right-bottom`
+
+  atX-atY-myX-myY  
+  即：对齐目标的位置-对齐自己的位置
+
+  - `left-top-right-bottom` 在目标位置的左上角显示。
+  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
+  - ...
+
+  固定位置
+
+  - `fixed-center`
+  - `fixed-left-top`
+  - `fixed-right-top`
+  - `fixed-left-bottom`
+  - `fixed-right-bottom`。
+
 - `offset` 默认 `{top: 0, left: 0}`，如果要来一定的便宜请设置这个。
 - `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
 - `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。

examples/components/CRUD/PopOver.tsx

@@ -21,7 +21,8 @@ export default {
           trigger: 'hover',
           showIcon: false,
           body: 'Popover 内容：${platform}',
-          position: 'right-bottom'
+          popOverClassName: 'min-w-0',
+          position: 'left-center-right-center right-center-left-center'
         }
       },
       {

scss/_properties.scss

@@ -459,18 +459,7 @@
   --Combo--vertical-item-onHover-borderColor: var(--info);
   --Combo--vertical-item-paddingX: #{px2rem(10px)};
   --Combo--vertical-item-paddingY: #{px2rem(10px)};
-  --Combo--vertical-itemToolbar-bg: var(--info);
+
-  --Combo--vertical-itemToolbar-borderColor: #{darken($info, 5%)};
-  --Combo--vertical-itemToolbar-borderRadius: #{px2rem(3px)};
-  --Combo--vertical-itemToolbar-borderWidth: var(--borderWidth);
-  --Combo--vertical-itemToolbar-color: #{darken($white, 5%)};
-  --Combo--vertical-itemToolbar-height: #{px2rem(25px)};
-  --Combo--vertical-itemToolbar-onHover-color: var(--white);
-  --Combo--vertical-itemToolbar-positionRight: #{px2rem(5px)};
-  --Combo--vertical-itemToolbar-positionTop: var(
-    --Combo--vertical-itemToolbar-height
-  );
-  --Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out;
   --Combo-addBtn-bg: var(--Button--info-bg);
   --Combo-addBtn-border: var(--Button--info-border);
   --Combo-addBtn-borderRadius: var(--Button-borderRadius);

scss/components/form/_combo.scss

@@ -56,6 +56,27 @@
     }
   }
 
+  &-delBtn {
+    color: var(--icon-color);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--icon-onHover-color);
+    }
+  }
+
+  &-tab-delBtn {
+    color: var(--icon-color);
+    cursor: pointer;
+    position: absolute;
+    top: -8px;
+    right: 4px;
+
+    &:hover {
+      color: var(--icon-onHover-color);
+    }
+  }
+
   &-items {
     &:empty {
       display: none;
@@ -115,14 +136,14 @@
       }
     }
 
-    .#{$ns}Combo-itemToolbar {
+    .#{$ns}Combo-delBtn {
       margin-left: var(--gap-xs);
       display: flex;
       white-space: nowrap;
       align-items: flex-start;
       padding-top: var(--Form-label-paddingTop);
 
-      > .is-disabled {
+      &.is-disabled {
         pointer-events: none;
         opacity: var(--Button-onDisabled-opacity);
       }
@@ -178,39 +199,11 @@
       margin: calc(var(--Combo--vertical-item-gap) * 2);
     }
 
-    > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
+    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-delBtn {
-    > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
-      opacity: 0;
       position: absolute;
-      right: var(--Combo--vertical-itemToolbar-positionRight);
+      opacity: 0;
-      top: calc(var(--Combo--vertical-itemToolbar-positionTop) / 2);
+      top: var(--gap-xs);
-      transition: var(--Combo--vertical-itemToolbar-transion);
+      right: var(--gap-xs);
-      height: var(--Combo--vertical-itemToolbar-height);
-      line-height: var(--Combo--vertical-itemToolbar-height);
-      background: var(--Combo--vertical-itemToolbar-bg);
-      color: var(--Combo--vertical-itemToolbar-color);
-      border-top-left-radius: var(--Combo--vertical-itemToolbar-borderRadius);
-      border-top-right-radius: var(--Combo--vertical-itemToolbar-borderRadius);
-      padding: 0 px2rem(3px);
-      border-style: solid;
-      border-color: var(--Combo--vertical-itemToolbar-borderColor);
-      border-width: var(--Combo--vertical-itemToolbar-borderWidth)
-        var(--Combo--vertical-itemToolbar-borderWidth) 0
-        var(--Combo--vertical-itemToolbar-borderWidth);
-      // margin-top: px2rem(-1px);
-
-      .#{$ns}Combo-toolbarBtn {
-        color: inherit;
-        line-height: var(--Combo--vertical-itemToolbar-height);
-        // font-size: px2rem(14px);
-
-        &:hover {
-          color: var(--Combo--vertical-itemToolbar-onHover-color);
-        }
-      }
-
-      // top: var(--Combo--vertical-itemToolbar-positionTop);
-      // opacity: 1;
     }
 
     &:not(.is-disabled) > .#{$ns}Combo-item:hover,
@@ -218,8 +211,7 @@
       border-color: var(--Combo--vertical-item-onHover-borderColor);
       // border-style: solid;
 
-      > .#{$ns}Combo-itemToolbar {
+      > .#{$ns}Combo-delBtn {
-        top: var(--Combo--vertical-itemToolbar-positionTop);
         opacity: 1;
       }
     }

scss/components/form/_tree.scss

@@ -169,7 +169,7 @@
   &-itemArrow {
     cursor: pointer;
     width: var(--Tree-itemArrowWidth);
-    display: inline-block;
+    display: inline-flex;
     margin-right: px2rem(5px);
 
     // &:before {
@@ -180,7 +180,7 @@
     > svg {
       width: var(--Tree-itemArrowWidth);
       height: var(--Tree-itemArrowWidth);
-      display: inline-block;
+      display: block;
       transition: transform 0.2s;
       top: 0;
       transform: rotate(90deg);
@@ -197,7 +197,7 @@
   }
 
   &-itemIcon {
-    display: inline-block;
+    display: inline-flex;
     margin-right: px2rem(5px);
   }
 
@@ -205,6 +205,7 @@
   &-folderIcon,
   &-leafIcon {
     > svg {
+      top: 0;
       width: px2rem(14px);
       height: px2rem(14px);
     }
@@ -223,8 +224,8 @@
     }
 
     > .#{$ns}Checkbox {
-      line-height: 1;
+      display: inline-flex;
-      display: inline-block;
+      align-self: center;
     }
   }
 

scss/themes/_cxd-variables.scss

@@ -153,6 +153,9 @@ $Wizard-steps-liAfterBorder: none !important;
   --Checkbox-size: #{px2rem(14px)};
   --Checkbox-inner-size: #{px2rem(8px)};
   --Checkbox--full-inner-size: #{px2rem(10px)};
+  --Checkbox--sm-size: #{px2rem(14px)};
+  --Checkbox--sm-inner-size: #{px2rem(8px)};
+  --Checkbox--sm--full-inner-size: #{px2rem(10px)};
   --Radio-size: #{px2rem(16px)};
   --Radio-inner-size: #{px2rem(10px)};
 

src/renderers/Form/Combo.tsx

@@ -997,7 +997,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 onClick={this.removeItem.bind(this, index)}
                 key="remove"
                 className={cx(
-                  `Combo-toolbarBtn ${!store.removable ? 'is-disabled' : ''}`
+                  `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
                 )}
                 data-tooltip={__('删除')}
                 data-position="bottom"
@@ -1163,34 +1163,19 @@ export default class ComboControl extends React.Component<ComboProps> {
         <div className={cx(`Combo-items`)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
-              const toolbar: Array<any> = [];
+              let delBtn: any = null;
-
-              // if (!disabled && draggable && thelist.length > 1) {
-              //   toolbar.push(
-              //     <a
-              //       key="drag"
-              //       className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
-              //       data-tooltip="拖拽排序"
-              //       data-position="bottom"
-              //     >
-              //       <i className={dragIcon} />
-              //     </a>
-              //   );
-              // }
 
               if (
                 finnalRemovable && // 表达式判断单条是否可删除
                 (!itemRemovableOn ||
                   evalExpression(itemRemovableOn, value) !== false)
               ) {
-                toolbar.push(
+                delBtn = (
                   <a
                     onClick={this.removeItem.bind(this, index)}
                     key="remove"
                     className={cx(
-                      `Combo-toolbarBtn ${
+                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
-                        !store.removable ? 'is-disabled' : ''
-                      }`
                     )}
                     data-tooltip={__('删除')}
                     data-position="bottom"
@@ -1292,9 +1277,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                       </Alert2>
                     )}
                   </div>
-                  {toolbar.length ? (
+                  {delBtn}
-                    <div className={cx(`Combo-itemToolbar`)}>{toolbar}</div>
-                  ) : null}
                 </div>
               );
             })

src/renderers/PopOver.tsx

@@ -41,9 +41,45 @@ export interface SchemaPopOverObject {
   position?:
     | 'center'
     | 'left-top'
+    | 'left-top-left-top'
+    | 'left-top-left-center'
+    | 'left-top-left-bottom'
+    | 'left-top-center-top'
+    | 'left-top-center-center'
+    | 'left-top-center-bottom'
+    | 'left-top-right-top'
+    | 'left-top-right-center'
+    | 'left-top-right-bottom'
     | 'right-top'
+    | 'right-top-left-top'
+    | 'right-top-left-center'
+    | 'right-top-left-bottom'
+    | 'right-top-center-top'
+    | 'right-top-center-center'
+    | 'right-top-center-bottom'
+    | 'right-top-right-top'
+    | 'right-top-right-center'
+    | 'right-top-right-bottom'
     | 'left-bottom'
+    | 'left-bottom-left-top'
+    | 'left-bottom-left-center'
+    | 'left-bottom-left-bottom'
+    | 'left-bottom-center-top'
+    | 'left-bottom-center-center'
+    | 'left-bottom-center-bottom'
+    | 'left-bottom-right-top'
+    | 'left-bottom-right-center'
+    | 'left-bottom-right-bottom'
     | 'right-bottom'
+    | 'right-bottom-left-top'
+    | 'right-bottom-left-center'
+    | 'right-bottom-left-bottom'
+    | 'right-bottom-center-top'
+    | 'right-bottom-center-center'
+    | 'right-bottom-center-bottom'
+    | 'right-bottom-right-top'
+    | 'right-bottom-right-center'
+    | 'right-bottom-right-bottom'
     | 'fixed-center'
     | 'fixed-left-top'
     | 'fixed-right-top'
@@ -90,9 +126,11 @@ export interface PopOverState {
   isOpened: boolean;
 }
 
-export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
+export const HocPopOver = (
-  Component: React.ComponentType<any>
+  config: {
-): any => {
+    targetOutter?: boolean; // 定位目标为整个外层
+  } = {}
+) => (Component: React.ComponentType<any>): any => {
   let lastOpenedInstance: PopOverComponent | null = null;
   class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
     target: HTMLElement;
@@ -304,7 +342,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
           className={cx(`Field--popOverAble`, className, {
             in: this.state.isOpened
           })}
-          ref={this.targetRef}
+          ref={config.targetOutter ? this.targetRef : undefined}
         >
           {(popOver as SchemaPopOverObject)?.showIcon !== false ? (
             <>
@@ -313,6 +351,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
                 key="popover-btn"
                 className={cx('Field-popOverBtn')}
                 {...triggerProps}
+                ref={config.targetOutter ? undefined : this.targetRef}
               >
                 <Icon icon="zoom-in" className="icon" />
               </span>
@@ -320,13 +359,12 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
             </>
           ) : (
             <>
-              <div className={cx('Field-popOverWrap')} {...triggerProps}>
+              <div
-                <Component
+                className={cx('Field-popOverWrap')}
-                  {...this.props}
+                {...triggerProps}
-                  wrapperComponent={''}
+                ref={config.targetOutter ? undefined : this.targetRef}
-                  noHoc
+              >
-                  ref={this.targetRef}
+                <Component {...this.props} wrapperComponent={''} noHoc />
-                />
               </div>
               {this.state.isOpened ? this.renderPopOver() : null}
             </>

src/renderers/Table/TableCell.tsx

@@ -112,7 +112,9 @@ export class TableCell extends React.Component<RendererProps> {
   name: 'table-cell'
 })
 @QuickEdit()
-@PopOverable()
+@PopOverable({
+  targetOutter: true
+})
 @Copyable()
 @observer
 export class TableCellRenderer extends TableCell {