@aloudata/aloudata-design 2.7.1 → 2.7.3

package/dist/Table/style/index.less

@@ -3,6 +3,8 @@
 @import '../../Spin/style/index.less';
 @import '../../ScrollArea/style/index.less';
 @import '../../Empty/style/index.less';
+@import '../../Checkbox/style/index.less';
+@import '../../TextLink/style/index.less';
 
 @header-height: 40px;
 
@@ -163,6 +165,29 @@
     display: flex;
     align-items: center;
     color: var(--alias-colors-text-subtle, #4b5563);
+
+    &.ald-table-th-sortable {
+      cursor: pointer;
+    }
+
+    .ald-table-sort-th-inner {
+      display: flex;
+      column-gap: 4px;
+      align-items: center;
+      width: 100%;
+    }
+
+    .ald-table-sort-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .ald-table-sort-btn {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+    }
   }
 
   .ald-table-td-default {
@@ -225,11 +250,20 @@
 
     .ald-table-expand-btn {
       width: 16px;
+      height: 100%;
       cursor: pointer;
       margin-right: 6px;
       display: flex;
-      height: 100%;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
+
+      &-inner {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+      }
     }
 
     .ald-table-td-default {
@@ -255,13 +289,6 @@
   }
 }
 
-.ald-table-pagination {
-  padding-top: 16px;
-  display: flex;
-  justify-content: end;
-  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
-}
-
 .ald-table-loading {
   position: absolute;
   top: 50%;
@@ -312,3 +339,45 @@
     margin-top: 20px;
   }
 }
+
+/** 选择行 **/
+.ald-table-row-selection-all {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+
+/** Footer **/
+.ald-table-footer {
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+}
+
+.ald-table-footer-row-selection {
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+  font-size: 14px;
+  line-height: 20px;
+
+  .ald-table-footer-row-selection-selected-num {
+    cursor: inherit !important;
+  }
+}
+
+.ald-table-footer-row-selection-btn {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.ald-table-pager {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1 1 auto;
+}

package/dist/Table/types.d.ts

@@ -16,6 +16,8 @@ export interface ITableProps<TDataItem extends object> {
     onRowClick?: (record: TDataItem, index: number) => void;
     onError?: (errorInfo: ITableCellErrorInfo) => void;
     expandable?: ITableExpandable<TDataItem> | boolean;
+    onSort?: (columnKey: string, order: 'ascend' | 'descend' | null) => void;
+    rowSelection?: IRowSelection<TDataItem>;
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {
@@ -42,6 +44,19 @@ export interface ITableColumn<TDataItem = unknown> {
     noPadding?: boolean;
     align?: 'left' | 'center' | 'right';
     fixed?: 'left' | 'right';
+    sortOrder?: 'ascend' | 'descend' | null;
+}
+export interface IRowSelection<TDataItem extends object> {
+    fixed?: boolean;
+    selectedRowKeys?: string[];
+    defaultSelectedRowKeys?: string[];
+    items?: IRowSelectionBtnItem<TDataItem>[];
+    onChange?: (selectedRowKeys: string[], selectedRows: TDataItem[]) => void;
+}
+export interface IRowSelectionBtnItem<TDataItem extends object> {
+    key: string;
+    label: string;
+    onClick: (selectedRowKeys: string[], selectedRows: TDataItem[], e: React.MouseEvent) => void;
 }
 export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
     columnWidths: number[];
@@ -52,4 +67,10 @@ export interface ITableExpandable<TDataItem = unknown> {
     defaultExpandedRowKeys?: string[];
     expandedRowKeys?: string[];
     onExpand?: (record: TDataItem, isExpanded: boolean) => void;
+    expandIcon?: (params: IExpandIconProps<TDataItem>) => React.ReactNode;
+}
+export interface IExpandIconProps<TDataItem = unknown> {
+    record: TDataItem;
+    onExpand: (record: TDataItem, isExpanded: boolean) => void;
+    isExpanded: boolean;
 }

package/dist/User/index.js

@@ -15,8 +15,10 @@ function User(_ref) {
     size = _ref$size === void 0 ? 'middle' : _ref$size,
     nicknameClassName = _ref.nicknameClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-user', "ald-user-".concat(size))
+    className: classNames('ald-user', "ald-user-".concat(size)),
+    title: nickname
   }, /*#__PURE__*/React.createElement(Avatar, {
+    className: 'ald-user-avatar',
     src: src,
     size: getAvatarSize(size || 'middle')
   }), /*#__PURE__*/React.createElement("div", {

package/dist/User/style/index.less

@@ -34,4 +34,15 @@
       line-height: 20px; /* 142.857% */
     }
   }
+
+  .ald-user-text {
+    white-space: nowrap;
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .ald-user-avatar {
+    flex-shrink: 0;
+  }
 }