@aloudata/aloudata-design 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/Select/style/index.less

@@ -47,6 +47,9 @@
       align-items: center;
       transition: none;
       padding-right: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      position: relative;
 
       .ant-select-selection-search {
         display: flex;
@@ -59,14 +62,21 @@
       // 多选中存在这个样式
       .ant-select-selection-overflow {
         align-self: normal;
+        flex-wrap: nowrap;
+        margin-left: 6px;
+        min-width: 52px;
+        height: 100%;
 
         .ant-select-selection-overflow-item {
           align-items: center;
           line-height: inherit;
-          height: 100%;
+          flex: 1;
+          min-width: 0;
+          // height: 100%;
 
           & > span {
             display: inline-flex;
+            min-width: 0;
           }
 
           .ant-select-selection-item {
@@ -89,6 +99,8 @@
           }
 
           &.ant-select-selection-overflow-item-rest {
+            flex: none;
+
             .ant-select-selection-item {
               border: none;
               background: none;
@@ -111,10 +123,16 @@
             }
           }
 
+          &.ant-select-selection-overflow-item-suffix {
+            flex: none;
+          }
+
           .ald-select-multiple-tag-default {
             color: inherit;
-            display: inline-flex;
-            align-items: center;
+            min-width: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
           }
 
           .ant-select-selection-search-input {
@@ -123,12 +141,6 @@
             caret-color: var(--alias-colors-text-selected, #126fdd);
           }
         }
-
-        .ant-select-selection-overflow-item:first-of-type {
-          .ald-select-multiple-tag-default::before {
-            content: '';
-          }
-        }
       }
 
       .ant-select-selection-placeholder {

package/dist/Select/style/layout.less

@@ -12,17 +12,20 @@
     }
 
     .ant-select-arrow {
-      position: initial;
-      margin: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
     }
 
     .ant-select-clear {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
       transform: none;
       opacity: 1;
       align-items: center;
       flex: none;
-      position: relative;
-      margin-left: 8px;
       right: 0;
 
       &::before {
@@ -30,7 +33,6 @@
         top: 0;
         bottom: 0;
         margin: auto 0;
-        left: -8px;
         content: '';
         height: 14px;
         width: 1px;

package/dist/Select/style/selectDropdown.less

@@ -10,8 +10,7 @@
     overflow-y: overlay;
     border: 1px solid var(--alias-colors-border-strong, #d1d5db);
     background: var(--alias-colors-bg-skeleton-subtler, #fff);
-    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
-      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
     padding: 4px 0;
   }
 }

package/dist/Select/style/size.less

@@ -26,14 +26,13 @@
     }
 
     .ant-select {
-      padding-right: @select-padding-horizontal-small;
-
       .ant-select-selector {
         height: @selector-height-small;
         line-height: @selector-height-small;
         padding-left: calc(
           @select-padding-horizontal-small + var(--ald-select-prefix-width)
         );
+        padding-right: @select-padding-horizontal-small;
 
         .ant-select-selection-item {
           line-height: inherit;
@@ -59,15 +58,89 @@
           );
         }
       }
+
+      &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+        .ant-select-selector {
+          padding-right: calc(
+            @select-padding-horizontal-small + @select-icon-use-width-small
+          );
+        }
+      }
+
+      .ant-select-arrow {
+        right: @select-padding-horizontal-small;
+      }
+
+      .ant-select-clear {
+        right: @select-padding-horizontal-small;
+
+        &::before {
+          left: -@selector-gap-small;
+        }
+      }
     }
 
     .ald-select-prefix-select {
+      // 单选值容器
       .ant-select-selection-item {
-        margin-left: @selector-item-margin-left-small;
+        margin-left: @selector-gap-small;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-small;
       }
 
       .ant-select-selection-placeholder {
-        margin-left: @selector-item-margin-left-small;
+        margin-left: @selector-gap-small;
+      }
+    }
+
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-small + @select-icon-use-width-small
+            );
+          }
+
+          .ant-select-arrow {
+            right: @select-padding-horizontal-small;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-small;
+
+            &::before {
+              left: -@selector-gap-small;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-small + @selector-gap-small +
+                @select-icon-use-width-small + @select-icon-use-width-small
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-small + @select-icon-use-width-small +
+                @selector-gap-small
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-small;
+
+            &::before {
+              left: -@selector-gap-small;
+            }
+          }
+        }
       }
     }
   }
@@ -83,14 +156,13 @@
     }
 
     .ant-select {
-      padding-right: @select-padding-horizontal-middle;
-
       .ant-select-selector {
         height: @selector-height-middle;
         line-height: @selector-height-middle;
         padding-left: calc(
           @select-padding-horizontal-middle + var(--ald-select-prefix-width)
         );
+        padding-right: @select-padding-horizontal-middle;
 
         .ant-select-selection-item {
           font-size: @select-font-size-middle;
@@ -116,15 +188,89 @@
           );
         }
       }
+
+      &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+        .ant-select-selector {
+          padding-right: calc(
+            @select-padding-horizontal-middle + @select-icon-use-width-middle
+          );
+        }
+      }
+
+      .ant-select-arrow {
+        right: @select-padding-horizontal-middle;
+      }
+
+      .ant-select-clear {
+        right: @select-padding-horizontal-middle;
+
+        &::before {
+          left: -@selector-gap-middle;
+        }
+      }
     }
 
     .ald-select-prefix-select {
+      // 单选值容器
       .ant-select-selection-item {
-        margin-left: @selector-item-margin-left-middle;
+        margin-left: @selector-gap-middle;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-middle;
       }
 
       .ant-select-selection-placeholder {
-        margin-left: @selector-item-margin-left-middle;
+        margin-left: @selector-gap-middle;
+      }
+    }
+
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-middle + @select-icon-use-width-middle
+            );
+          }
+
+          .ant-select-arrow {
+            right: @select-padding-horizontal-middle;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-middle;
+
+            &::before {
+              left: -@selector-gap-middle;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-middle + @selector-gap-middle +
+                @select-icon-use-width-middle + @select-icon-use-width-middle
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-middle + @select-icon-use-width-middle +
+                @selector-gap-middle
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-middle;
+
+            &::before {
+              left: -@selector-gap-middle;
+            }
+          }
+        }
       }
     }
   }
@@ -140,14 +286,13 @@
     }
 
     .ant-select {
-      padding-right: @select-padding-horizontal-large;
-
       .ant-select-selector {
         height: @selector-height-large;
         line-height: @selector-height-large;
         padding-left: calc(
           @select-padding-horizontal-large + var(--ald-select-prefix-width)
         );
+        padding-right: @select-padding-horizontal-large;
 
         .ant-select-selection-item {
           font-size: @select-font-size-large;
@@ -172,6 +317,90 @@
             @select-padding-horizontal-large + var(--ald-select-prefix-width)
           );
         }
+
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large
+            );
+          }
+        }
+
+        .ant-select-arrow {
+          right: @select-padding-horizontal-large;
+        }
+
+        .ant-select-clear {
+          right: @select-padding-horizontal-large;
+
+          &::before {
+            left: -@selector-gap-large;
+          }
+        }
+      }
+    }
+
+    .ald-select-prefix-select {
+      // 单选值容器
+      .ant-select-selection-item {
+        margin-left: @selector-gap-large;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-large;
+      }
+
+      .ant-select-selection-placeholder {
+        margin-left: @selector-gap-large;
+      }
+    }
+
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large
+            );
+          }
+
+          .ant-select-arrow {
+            right: @select-padding-horizontal-large;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-large;
+
+            &::before {
+              left: -@selector-gap-large;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @selector-gap-large +
+                @select-icon-use-width-large + @select-icon-use-width-large
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large +
+                @selector-gap-large
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-large;
+
+            &::before {
+              left: -@selector-gap-large;
+            }
+          }
+        }
       }
     }
   }
@@ -187,16 +416,6 @@
     margin-top: 0;
   }
 
-  .ald-select-prefix-select {
-    .ant-select-selection-item {
-      margin-left: @selector-item-margin-left-large;
-    }
-
-    .ant-select-selection-placeholder {
-      margin-left: @selector-item-margin-left-large;
-    }
-  }
-
   &.ald-select-primary {
     font-weight: 500;
   }

package/dist/Select/style/variables.less

@@ -7,7 +7,8 @@
 @select-line-height-large: 24px;
 @select-padding-horizontal-large: var(--alias-padding-150-minus-1, 12px);
 @selector-height-large: 34px;
-@selector-item-margin-left-large: 8px;
+@selector-gap-large: 8px;
+@select-icon-use-width-large: 24px; //16+8
 
 // medium size
 @select-height-middle: 32px;
@@ -16,7 +17,8 @@
 @select-line-height-middle: 20px;
 @select-padding-horizontal-middle: var(--alias-padding-150-minus-1, 12px);
 @selector-height-middle: 30px;
-@selector-item-margin-left-middle: 6px;
+@selector-gap-middle: 6px;
+@select-icon-use-width-middle: 22px; //16+6
 
 // small size
 @select-height-small: 28px;
@@ -25,4 +27,5 @@
 @select-line-height-small: 16px;
 @select-padding-horizontal-small: var(--alias-padding-150-minus-1, 12px);
 @selector-height-small: 26px;
-@selector-item-margin-left-small: 4px;
+@selector-gap-small: 4px;
+@select-icon-use-width-small: 20px; //16+4

package/dist/Skeleton/style/index.less

@@ -1,11 +1,91 @@
 @import '../../style/index.less';
 
 .ant-skeleton .ant-skeleton-content .ant-skeleton-title[class][class] {
-  height: 8px;
-  background: #f1f1f1;
+  height: 16px;
+  border-radius: var(--alias-radius-75, 6px);
+  background: linear-gradient(
+    90deg,
+    #f2f4f7 -0.95%,
+    #e5e7eb 24.29%,
+    #f2f4f7 48.47%,
+    #e5e7eb 69.5%,
+    #f2f4f7 96.32%
+  );
 }
 
 .ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph[class][class] > li {
-  height: 8px;
-  background: #f1f1f1;
+  height: 16px;
+  border-radius: var(--alias-radius-75, 6px);
+  background: linear-gradient(
+    90deg,
+    #f2f4f7 -0.95%,
+    #e5e7eb 24.29%,
+    #f2f4f7 48.47%,
+    #e5e7eb 69.5%,
+    #f2f4f7 96.32%
+  );
+}
+
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active .ant-skeleton-title,
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active
+  .ant-skeleton-paragraph
+  > li,
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active
+  .ant-skeleton-avatar,
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active
+  .ant-skeleton-button,
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active .ant-skeleton-input,
+.ant-skeleton.ant-skeleton.ant-skeleton.ant-skeleton-active
+  .ant-skeleton-image {
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.15) 37%,
+    rgba(0, 0, 0, 0.06) 63%
+  );
+  background-size: 400% 100%;
+  animation-name: ald-skeleton-loading;
+  animation-duration: 1.4s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+}
+
+@keyframes ald-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.ant-skeleton.ant-skeleton.ant-skeleton-element {
+  .ant-skeleton-button,
+  .ant-skeleton-input {
+    height: 14px;
+
+    &-lg {
+      height: 16px;
+    }
+
+    &-sm {
+      height: 12px;
+    }
+  }
+
+  .ant-skeleton-avatar.ant-skeleton-avatar {
+    width: 32px; //36 28
+    height: 32px;
+
+    &-lg {
+      width: 36px;
+      height: 36px;
+    }
+
+    &-sm {
+      width: 28px;
+      height: 28px;
+    }
+  }
 }

package/dist/Spin/index.js

@@ -16,14 +16,13 @@ function CustomSpin(props) {
   if (size === 'middle') {
     spinSize = 'default';
   }
-  return /*#__PURE__*/React.createElement(Spin, _extends({
+  return /*#__PURE__*/React.createElement(Spin, _extends({}, restProps, {
     className: classNames('ald-spin', props.className),
     indicator: /*#__PURE__*/React.createElement(CustomIcon, {
       size: props.size,
       tip: tip,
       direction: direction
-    })
-  }, restProps, {
+    }),
     tip: null,
     size: spinSize
   }));

package/dist/Spin/style/index.less

@@ -13,3 +13,11 @@
     left: 0 !important;
   }
 }
+
+.ant-spin-nested-loading {
+  & > div > .ant-spin.ant-spin-spinning {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/Table/components/Pagination/index.js

@@ -20,7 +20,9 @@ export default function TablePagination(props) {
   }, [scrollToFirstRow, scroll, pagination]);
   return pagination && /*#__PURE__*/React.createElement("div", {
     className: prefixCls('pagination')
-  }, /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
+  }, /*#__PURE__*/React.createElement(Pagination, _extends({
+    hideOnSinglePage: true
+  }, pagination, {
     onChange: onChangePage
   })));
 }

package/dist/Table/index.js

@@ -18,7 +18,7 @@ import Pagination from "./components/Pagination";
 import { getTableColumns, prefixCls } from "./helper";
 import useScrollX from "./hooks/useScroll";
 // 32 行高 + 1 底线高度
-var HEADER_HEIGHT = 33;
+var HEADER_HEIGHT = 41;
 function Table(props, ref) {
   var _classnames;
   var columns = props.columns,
@@ -34,7 +34,8 @@ function Table(props, ref) {
     _props$rowClassName = props.rowClassName,
     rowClassName = _props$rowClassName === void 0 ? function () {
       return '';
-    } : _props$rowClassName;
+    } : _props$rowClassName,
+    onRowClick = props.onRowClick;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
@@ -117,6 +118,19 @@ function Table(props, ref) {
       }));
     }));
   }));
+  var onClickRow = useCallback(function (rowData, rowIndex) {
+    return function () {
+      var _window$getSelection;
+      if (typeof onRowClick !== 'function') {
+        return;
+      }
+      if (((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString().length) !== 0) {
+        // 防止选择文本时触发 onRowClick
+        return;
+      }
+      onRowClick(rowData, rowIndex);
+    };
+  }, [onRowClick]);
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement(Spin, {
@@ -135,7 +149,8 @@ function Table(props, ref) {
   })) : _.map(rows, function (row, rowIndex) {
     return /*#__PURE__*/React.createElement("div", {
       key: row.id,
-      className: classnames(prefixCls('tr'), rowClassName(row.original, rowIndex))
+      className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('row-hover'), typeof onRowClick === 'function'), rowClassName(row.original, rowIndex)),
+      onClick: onClickRow(row.original, rowIndex)
     }, _.map(row.getVisibleCells(), function (cell) {
       return /*#__PURE__*/React.createElement("div", {
         className: prefixCls('td'),

package/dist/Table/style/index.less

@@ -2,6 +2,7 @@
 @import '../../Pagination/style/index.less';
 @import '../../Spin/style/index.less';
 @import '../../ScrollArea/style/index.less';
+@import '../../Empty/style/index.less';
 
 .ald-table-container {
   position: relative;
@@ -104,12 +105,16 @@
     min-height: 200px;
     overflow: auto;
 
-    .ald-table-tr:hover {
-      .ald-table-td {
-        background-color: var(
-          --alias-colors-bg-interaction-hover,
-          rgba(0, 0, 0, 0.05)
-        );
+    .ald-table-tr {
+      &.ald-table-row-hover:hover {
+        cursor: pointer;
+
+        .ald-table-td {
+          background-color: var(
+            --alias-colors-bg-interaction-hover,
+            rgba(0, 0, 0, 0.05)
+          );
+        }
       }
     }
   }
@@ -160,4 +165,5 @@
 
 .ald-table-empty {
   margin-top: 80px;
+  overflow: hidden;
 }