@aloudata/aloudata-design 2.6.0 → 2.6.1

package/dist/Table/style/index.less

@@ -6,25 +6,27 @@
 
 @header-height: 40px;
 
-.ald-table-container {
+@ald: ~'ald-table-';
+
+.@{ald}container {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.ald-table-main {
+.@{ald}main {
   width: 100%;
   font-size: 13px;
   line-height: 20px;
   background: #fff;
   color: var(--alias-colors-text-subtle, #4b5563);
 
-  .ald-table-content {
+  .@{ald}content {
     display: flex;
     flex-direction: column;
     border-spacing: 0;
 
-    .ald-table-spin {
+    .@{ald}spin {
       position: absolute;
       top: 0;
       left: 0;
@@ -38,7 +40,7 @@
       }
     }
 
-    .ald-table-spin-mask {
+    .@{ald}spin-mask {
       position: absolute;
       top: 0;
       left: 0;
@@ -50,7 +52,7 @@
     }
   }
 
-  .ald-table-resizer {
+  .@{ald}resizer {
     position: absolute;
     right: 0;
     top: 0;
@@ -63,38 +65,51 @@
     &::after {
       content: '';
       display: block;
-      height: 20px;
-      width: 2px;
+      height: 100%;
+      width: 1px;
       position: absolute;
       top: 50%;
       right: -1px;
+      z-index: 1;
       transform: translateY(-50%);
-      background-color: var(--alias-colors-border-subtle, #f3f4f6);
+      background-color: var(--alias-colors-border-default, #e5e7eb);
     }
   }
 
-  .ald-table-overflow-x {
+  .@{ald}overflow-x {
     overflow-x: hidden;
   }
 
-  .ald-table-tr {
+  .@{ald}tr {
     display: flex;
   }
 
-  .ald-table-th,
-  .ald-table-td {
+  .@{ald}th,
+  .@{ald}td {
     position: relative;
     border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
     flex: 0 0 auto;
 
-    &.ald-table-fixed-left,
-    &.ald-table-fixed-right {
+    &.@{ald}fixed-left,
+    &.@{ald}fixed-right {
       position: sticky;
-      background-color: #fff;
       z-index: 2;
     }
   }
 
+  .@{ald}no-border-tr {
+    .@{ald}td {
+      border-bottom: none;
+    }
+  }
+
+  .@{ald}td {
+    &.@{ald}fixed-left,
+    &.@{ald}fixed-right {
+      background-color: #fff;
+    }
+  }
+
   .fixed-left-shadow {
     &::after {
       position: absolute;
@@ -125,37 +140,37 @@
     }
   }
 
-  &.ald-table-ping-left {
-    .ald-table-fixed-left {
+  &.@{ald}ping-left {
+    .@{ald}fixed-left {
       .fixed-left-shadow();
     }
   }
 
-  &.ald-table-ping-right {
-    .ald-table-fixed-right {
+  &.@{ald}ping-right {
+    .@{ald}fixed-right {
       .fixed-right-shadow();
     }
   }
 
-  .ald-table-th {
-    border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
-    background-color: #fff;
+  .@{ald}th {
+    background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   }
 
-  .ald-table-th-default {
+  .@{ald}th-default {
     font-weight: 500;
     line-height: 16px;
-    padding-left: var(--alias-spacing-200, 16px);
+    padding: @td-padding-size;
     font-size: 12px;
     overflow: hidden;
     height: @header-height;
     display: flex;
     align-items: center;
+    color: var(--alias-colors-text-subtle, #4b5563);
   }
 
-  .ald-table-td-default {
+  .@{ald}td-default {
     line-height: 20px;
-    padding-left: var(--alias-spacing-200, 16px);
+    padding-left: @td-padding-size;
     display: flex;
     align-items: center;
     height: 100%;
@@ -164,27 +179,27 @@
     overflow: hidden;
   }
 
-  .ald-table-td-ellipsis-content {
+  .@{ald}td-ellipsis-content {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .ald-table-sticky {
+  .@{ald}sticky {
     position: sticky;
     top: 0;
     // 需要大于 Spin 的 z-index，Spin 的 z-index 为4
     z-index: 5;
   }
 
-  .ald-table-body {
+  .@{ald}body {
     min-height: 96px;
 
-    .ald-table-tr {
-      &.ald-table-row-hover:hover {
+    .@{ald}tr {
+      &.@{ald}row-hover:hover {
         cursor: pointer;
 
-        .ald-table-td {
+        .@{ald}td {
           background-color: var(
             --alias-colors-bg-interaction-hover,
             rgba(0, 0, 0, 0.05)
@@ -193,9 +208,40 @@
       }
     }
   }
+
+  @td-padding-size: 16px;
+
+  /** Tree Table **/
+  .@{ald}expandable-td {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding-left: @td-padding-size;
+
+    .@{ald}indent-list {
+      display: flex;
+    }
+
+    .@{ald}indent-item {
+      width: 10px;
+    }
+
+    .@{ald}expand-btn {
+      width: 16px;
+      cursor: pointer;
+      margin-right: 6px;
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+
+    .@{ald}td-default {
+      padding-left: 0;
+    }
+  }
 }
 
-.ald-table-align {
+.@{ald}align {
   &-left {
     text-align: left;
     justify-content: left;
@@ -212,51 +258,56 @@
   }
 }
 
-.ald-table-pagination {
-  margin-top: 18px;
+.@{ald}pagination {
+  padding-top: 16px;
   display: flex;
   justify-content: end;
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
 }
 
-.ald-table-loading {
+.@{ald}loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  .ald-table-loading-inner {
+  .@{ald}loading-inner {
     width: 100%;
   }
 }
 
-.ald-table-overflow-hidden {
+.@{ald}overflow-hidden {
   overflow: hidden;
   height: 100%;
 }
 
-.ald-table-header {
+.@{ald}header {
   background-color: #fff;
 }
 
-.ald-table-header-scroll-placeholder {
+.@{ald}header-scroll-placeholder {
   height: @header-height;
   position: sticky;
   right: 0;
-  background-color: #fff;
+  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   z-index: 2;
   flex: 0 0 auto;
 }
 
-.ald-table-body-scroll {
+.@{ald}body-scroll {
   overflow: auto;
   height: 100%;
 
-  &.ald-table-scroll-y {
+  &.@{ald}scroll-y {
     overflow-y: scroll;
   }
 }
 
-.ald-table-empty {
+.@{ald}empty {
   margin-top: 80px;
   overflow: hidden;
+
+  &.@{ald}empty-small {
+    margin-top: 20px;
+  }
 }

package/dist/Table/types.d.ts

@@ -3,7 +3,7 @@ import { IPaginationProps } from '../Pagination/types';
 export interface ITableProps<TDataItem extends object> {
     columns: ITableColumn<TDataItem>[];
     data: TDataItem[];
-    rowKey?: string | ((record: TDataItem) => string | number);
+    rowKey?: TRowKey<TDataItem>;
     columnSizing?: boolean;
     sticky?: boolean | {
         offsetHeader: number;
@@ -15,7 +15,9 @@ export interface ITableProps<TDataItem extends object> {
     rowClassName?: (record: TDataItem, index: number) => string;
     onRowClick?: (record: TDataItem, index: number) => void;
     onError?: (errorInfo: ITableCellErrorInfo) => void;
+    expandable?: ITableExpandable<TDataItem> | boolean;
 }
+export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {
     error: Error;
     stack: React.ErrorInfo['componentStack'];
@@ -44,3 +46,10 @@ export interface ITableColumn<TDataItem = unknown> {
 export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
     columnWidths: number[];
 }
+export interface ITableExpandable<TDataItem = unknown> {
+    childrenColumnName?: string;
+    defaultExpandAllRows?: boolean;
+    defaultExpandedRowKeys?: string[];
+    expandedRowKeys?: string[];
+    onExpand?: (record: TDataItem, isExpanded: boolean) => void;
+}

package/dist/Tabs/index.d.ts

@@ -55,7 +55,7 @@ export interface ITabsProps extends Omit<TabsProps, 'size'> {
      */
     padding?: boolean | number;
     /**
-     * @description tab和content之间的间距，默认16px,仅在tabPosition为top时生效
+     * @description tab和content之间的间距，仅在tabPosition为top时生效
      * @default false
      */
     compact?: boolean;

package/dist/Tabs/index.js

@@ -21,11 +21,11 @@ export default function Tabs(props) {
     adaptHeight = props.adaptHeight,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
-    monospace = props.monospace,
+    propsMonospace = props.monospace,
     _props$tabPosition = props.tabPosition,
     tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
     _props$padding = props.padding,
-    padding = _props$padding === void 0 ? false : _props$padding,
+    propsPadding = _props$padding === void 0 ? false : _props$padding,
     compact = props.compact,
     _props$hasDividing = props.hasDividing,
     hasDividing = _props$hasDividing === void 0 ? true : _props$hasDividing,
@@ -35,20 +35,20 @@ export default function Tabs(props) {
   if (size === 'small') {
     tabsProps.size = size;
   }
-  var _monospace = tabPosition !== 'top' ? false : monospace;
-  var _padding = useMemo(function () {
+  var monospace = tabPosition !== 'top' ? false : propsMonospace;
+  var padding = useMemo(function () {
     if (tabPosition !== 'top') return 0;
-    if (typeof padding === 'number') {
-      return padding;
+    if (typeof propsPadding === 'number') {
+      return propsPadding;
     }
-    if (typeof padding === 'boolean' && padding) {
+    if (typeof propsPadding === 'boolean' && propsPadding) {
       return 20;
     }
     return 0;
-  }, [padding, tabPosition]);
+  }, [propsPadding, tabPosition]);
   var getTabBarGutter = function getTabBarGutter() {
-    if (tabPosition === 'top' && !_monospace) {
-      return 20;
+    if (tabPosition === 'top' && !monospace) {
+      return 24;
     }
     return 0;
   };
@@ -58,7 +58,7 @@ export default function Tabs(props) {
     }, /*#__PURE__*/React.createElement(MoreVerticalLine, null)),
     style: Object.assign(style, {
       '--header-bg-color': headerBackgroundColor,
-      '--tabs-padding': "".concat(_padding, "px")
+      '--tabs-padding': "".concat(padding, "px")
     }),
     tabPosition: tabPosition,
     tabBarGutter: getTabBarGutter(),
@@ -66,8 +66,8 @@ export default function Tabs(props) {
     className: classNames('ald-tabs', className, {
       'ald-adapt-height': adaptHeight,
       'ald-tabs-default': size !== 'small',
-      'ald-tabs-monospace': _monospace,
-      'ald-tabs-padding': !!padding,
+      'ald-tabs-monospace': monospace,
+      'ald-tabs-padding': !!propsPadding,
       'ald-tabs-compact': !!compact,
       'ald-tabs-no-dividing': !hasDividing
     })

package/dist/Tabs/style/index.less

@@ -22,6 +22,7 @@
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL40;
+    font-size: 14px;
 
     .ant-tabs-nav {
       background-color: var(--header-bg-color);