@aloudata/aloudata-design 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/MemberPicker/style/index.less

@@ -23,9 +23,6 @@
     border-radius: 2px;
     // .memberSelection {
     // }
-    .ald-member-picker-selected-member-tags {
-      border-left: 1px solid var(--colors-gray-400, #dbdbdb);
-    }
 
     .ald-member-picker-selector-footer {
       grid-column: 1 / 3;
@@ -35,6 +32,7 @@
 
 .ald-member-picker-member-selection-wrapper {
   width: 50%;
+  border-right: 1px solid var(--alias-colors-border-default, #e5e7eb);
 }
 
 .ald-member-picker-member-list-wrap {
@@ -52,7 +50,7 @@
   .ald-member-picker-search-input.ald-member-picker-search-input {
     border: none;
     border-bottom: 1px solid var(--colors-gray-300, #e8e8e8) !important;
-    border-radius: 0;
+    border-radius: 0 !important;
     flex: 0 0 32px;
 
     &.ant-input-affix-wrapper-focused {
@@ -73,7 +71,7 @@
   }
 
   .ald-member-picker-member-list {
-    height: 200px;
+    height: 300px;
 
     &.ald-member-picker-member-list-null {
       display: none;
@@ -83,6 +81,7 @@
 
 .ald-member-picker-selected-member-tags-wrap {
   width: 50%;
+  height: 100%;
   max-height: 320px;
   padding: 8px;
 
@@ -103,19 +102,21 @@
 
     .ald-member-picker-selected-member-tag {
       display: flex;
-      padding: 1px 5px;
       justify-content: center;
-      gap: var(--global-number-spacing-spacing-xxs, 4px);
-      border-radius: var(--global-number-radius-radius-sm, 2px);
-      border: 1px solid var(--colors-gray-300, #e8e8e8);
-      font-size: 13px;
-      font-style: normal;
+      align-items: center;
+      border-radius: var(--alias-radius-50, 4px);
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
+      background: var(--alias-colors-bg-accent-gray-subtler-default, #f9fafb);
+      color: var(--alias-colors-text-accent-gray-default, #374151);
+      text-align: center;
+      font-size: 14px;
       font-weight: 400;
-      line-height: 20px;
-      height: 24px;
-      max-width: 100%;
+      line-height: 20px; /* 142.857% */
 
       .ald-member-picker-close {
+        border-left: 1px solid
+          var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
         cursor: pointer;
       }
     }
@@ -131,18 +132,18 @@
   align-items: center;
   gap: var(--global-number-spacing-spacing-sm, 12px);
   align-self: stretch;
-  border-top: 1px solid var(--colors-gray-300, #e8e8e8);
-  background: var(--colors-gray-97, #f8f8f8);
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
 }
 
 .ald-member-picker-option {
-  padding: 0 8px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 32px;
+  height: 36px;
   line-height: 20px;
-  gap: 4px;
+  gap: 6px;
   cursor: pointer;
   justify-content: space-between;
 
@@ -232,8 +233,13 @@
   }
 }
 
+.ald-member-picker-selected-member-tag-user {
+  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+}
+
 .ald-member-picker-nick-label {
-  font-size: 0;
   display: inline-flex;
   gap: 4px;
   flex-wrap: nowrap;
@@ -247,15 +253,14 @@
   }
 
   .ald-member-picker-nick-label-name {
-    color: var(--colors-gray-900, #171717);
-    font-size: 13px;
-    font-style: normal;
+    color: var(--alias-colors-text-default, #1f2937);
+    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
+    line-height: 20px; /* 142.857% */
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: 140px;
+    max-width: 130px;
   }
 }
 

package/dist/Navigator/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/index.less';
 @import '../../Icon/index.less';
 
-@ald-prefix: ant;
+@ald-prefix: ald;
 @header-height: 80px;
 @footer-height: 88px;
 

package/dist/Popconfirm/index.js

@@ -6,7 +6,7 @@ import { Popconfirm } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
-import { AlertTriangleLine } from "../Icon";
+import { AttentionTriangleFill } from "../Icon";
 function MyPopconfirm(props) {
   var _props$okButtonProps = props.okButtonProps,
     okButtonProps = _props$okButtonProps === void 0 ? {} : _props$okButtonProps,
@@ -15,7 +15,7 @@ function MyPopconfirm(props) {
     okType = props.okType,
     rootClassName = props.rootClassName,
     _props$icon = props.icon,
-    icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AlertTriangleLine, {
+    icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AttentionTriangleFill, {
       size: 20,
       color: "#D64343",
       fill: "#fff"

package/dist/Popconfirm/style/index.less

@@ -1,9 +1,41 @@
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
 
+.ant-popover-arrow.ant-popover-arrow.ant-popover-arrow {
+  overflow: visible;
+}
+
+.ant-popover[class] .ant-popover-arrow::before {
+  content: '';
+  width: 10px;
+  display: inline-block;
+  bottom: -6px;
+  position: absolute;
+  left: 4px;
+  height: 10px;
+  border: 1px solid #d1d5db;
+  transform: rotate(45deg);
+  clip-path: none;
+}
+
+.ant-popover[class] .ant-popover-arrow::after {
+  content: '';
+  width: 15px;
+  background-color: #fff;
+  display: inline-block;
+  bottom: -11px;
+  position: absolute;
+  left: 1px;
+  height: 10px;
+  transform: none;
+  box-shadow: none !important;
+}
+
 .ald-pop-confirm.ant-popover.ant-popover .ant-popover-inner {
+  width: 240px;
   padding: 12px;
-  border-radius: 2px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
   box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08),
     0 4px 6px -2px rgba(16, 24, 40, 0.03);
 
@@ -11,29 +43,35 @@
     .ant-popconfirm-message {
       padding-bottom: 12px;
       margin-bottom: 0;
-      align-items: center;
     }
 
     .ant-popconfirm-buttons {
       padding-top: 12px;
+      padding-left: 24px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex-direction: row-reverse;
+      justify-content: start;
     }
   }
 }
 
 .ant-popconfirm-message {
   .ant-popconfirm-message-icon {
-    line-height: 20px;
-    display: flex;
-    align-items: center;
+    display: inline-block;
+    height: 100%;
   }
 
   .ant-popconfirm-message-title {
     font-weight: 400;
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--colors-gray-900, #171717);
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--alias-colors-text-default, #1f2937);
     margin-inline-start: 4px;
-    margin-left: 4px !important;
+    margin-left: 8px !important;
+    width: 190px;
+    word-break: break-all;
   }
 }
 

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/Table/index.js

@@ -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,13 @@ function Table(props, ref) {
       }));
     }));
   }));
+  var onClickRow = useCallback(function (rowData, rowIndex) {
+    return function () {
+      if (typeof onRowClick === 'function') {
+        onRowClick(rowData, rowIndex);
+      }
+    };
+  }, [onRowClick]);
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement(Spin, {
@@ -135,7 +143,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;
 }

package/dist/Table/types.d.ts

@@ -13,6 +13,7 @@ export interface ITableProps<TDataItem extends object> {
     pagination?: IPaginationProps;
     empty?: React.ReactNode;
     rowClassName?: (record: TDataItem, index: number) => string;
+    onRowClick?: (record: TDataItem, index: number) => void;
 }
 export interface ITableRef {
     scrollToFirstRow: () => void;

package/dist/Tabs/index.d.ts

@@ -59,6 +59,11 @@ export interface ITabsProps extends Omit<TabsProps, 'size'> {
      * @default false
      */
     compact?: boolean;
+    /**
+     * @description tabs和content之间是否包含分割线
+     * @default false
+     */
+    hasDividing?: boolean;
 }
 declare function Tabs(props: ITabsProps): React.JSX.Element;
 declare namespace Tabs {

package/dist/Tabs/index.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding", "compact", "hasDividing"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -27,6 +27,8 @@ export default function Tabs(props) {
     _props$padding = props.padding,
     padding = _props$padding === void 0 ? false : _props$padding,
     compact = props.compact,
+    _props$hasDividing = props.hasDividing,
+    hasDividing = _props$hasDividing === void 0 ? true : _props$hasDividing,
     otherProps = _objectWithoutProperties(props, _excluded);
   var headerBackgroundColor = props.headerBackgroundColor;
   var tabsProps = _objectSpread({}, otherProps);
@@ -66,7 +68,8 @@ export default function Tabs(props) {
       'ald-tabs-default': size !== 'small',
       'ald-tabs-monospace': _monospace,
       'ald-tabs-padding': !!padding,
-      'ald-tabs-compact': !!compact
+      'ald-tabs-compact': !!compact,
+      'ald-tabs-no-dividing': !hasDividing
     })
   }, tabsProps));
 }

package/dist/Tabs/style/index.less

@@ -62,6 +62,7 @@
     .ant-tabs-tab {
       font-size: @tabs-font-size-small;
       line-height: @tabs-line-height-small;
+      height: 40px;
     }
 
     .ant-tabs-ink-bar {
@@ -79,6 +80,7 @@
     .ant-tabs-tab {
       font-size: @tabs-font-size;
       line-height: @tabs-line-height;
+      height: 44px;
     }
 
     .ald-tabs-more-icon {
@@ -217,3 +219,9 @@
     padding: 0 var(--tabs-padding) var(--tabs-padding);
   }
 }
+
+.ald-tabs-no-dividing {
+  &.ant-tabs-top > .ant-tabs-nav::before {
+    border-bottom: 0;
+  }
+}

package/dist/TextLink/index.js

@@ -19,7 +19,7 @@ function TextLink(props) {
   var size = propsSize || 'middle';
   var icon = underline ? null : propsIcon;
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames('ald-text-link', className, (_classNames = {}, _defineProperty(_classNames, "ald-text-link-".concat(size), size), _defineProperty(_classNames, "ald-text-link-".concat(type), type), _defineProperty(_classNames, "ald-text-link-".concat(type, "-disabled"), disabled), _defineProperty(_classNames, "ald-text-link-show-underline", underline), _classNames)),
+    className: classNames('ald-text-link', className, (_classNames = {}, _defineProperty(_classNames, "ald-text-link-".concat(size), size), _defineProperty(_classNames, "ald-text-link-".concat(type), type), _defineProperty(_classNames, "ald-text-link-disabled", disabled), _defineProperty(_classNames, "ald-text-link-show-underline", underline), _classNames)),
     onClick: onClick
   }, icon, children);
 }

package/dist/TextLink/style/index.less

@@ -6,4 +6,9 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+
+  &.ald-text-link-disabled {
+    pointer-events: none;
+    cursor: default;
+  }
 }

package/dist/TextLink/style/type.less

@@ -9,7 +9,7 @@
     color: var(--alias-colors-link-hover, #0f59b1);
   }
 
-  &-disabled {
+  &.ald-text-link-disabled {
     color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
   }
 }
@@ -25,7 +25,7 @@
     color: var(--alias-colors-text-selected, #126fdd);
   }
 
-  &-disabled {
+  &.ald-text-link-disabled {
     color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
   }
 }

package/dist/Tree/Tree.js

@@ -111,7 +111,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     virtual: virtual
   }, newProps, {
     prefixCls: prefixCls,
-    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className),
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), _defineProperty(_classNames, "".concat(prefixCls, "-block-node"), blockNode), _defineProperty(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), _defineProperty(_classNames, "".concat(prefixCls, "-large"), size === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, 'ald-draggable-tree', draggable), _classNames), className),
     direction: direction,
     checkable: checkable ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-checkbox-inner")

package/dist/Tree/style/index.less

@@ -7,23 +7,23 @@
 @import './checkbox.less';
 
 @tree-font-size-large: 14px;
-@tree-padding-large: 6px 4px;
+@tree-padding-large: 6px;
 @tree-line-height-large: 20px;
 
 @tree-font-size-default: 12px;
 @tree-padding-default: 4px;
 @tree-line-height-default: 16px;
 .aldCheckboxFn();
-
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
 .@{tree-prefix-cls} {
   .antTreeFn(@tree-prefix-cls);
 }
 
 .ald-tree {
-  padding: 3px 0;
+  padding: 0;
 
-  &.draggable-tree {
-    padding: 0;
+  &.ald-draggable-tree {
+    padding: 3px 0;
   }
 
   .ald-tree-treenode.ald-tree-treenode-draggable {

package/dist/Tree/style/mixin.less

@@ -68,7 +68,7 @@
           bottom: 0;
           border: 1px solid @primary-color;
           opacity: 0;
-          animation: ant-tree-node-fx-do-not-use 0.3s;
+          animation: ald-tree-node-fx-do-not-use 0.3s;
           animation-play-state: running;
           animation-fill-mode: forwards;
           content: '';
@@ -165,7 +165,7 @@
       display: inline-block;
       width: 100%;
       height: 100%;
-      // https://github.com/ant-design/ant-design/issues/31884
+
       &::before {
         position: absolute;
         top: 0;
@@ -229,7 +229,6 @@
     }
   }
 
-  // https://github.com/ant-design/ant-design/issues/28217
   &-unselectable &-node-content-wrapper:hover {
     background-color: transparent;
   }
@@ -278,7 +277,6 @@
       background: @component-background;
 
       &-line-icon {
-        // https://github.com/ant-design/ant-design/issues/32813
         vertical-align: -0.15em;
       }
     }
@@ -297,7 +295,7 @@
   }
 }
 
-@keyframes ant-tree-node-fx-do-not-use {
+@keyframes ald-tree-node-fx-do-not-use {
   0% {
     opacity: 0;
   }

package/dist/Tree/style/reset.less

@@ -9,3 +9,18 @@
   list-style: none;
   font-feature-settings: @font-feature-settings-base;
 }
+
+.ald-tree-list-scrollbar {
+  width: 6px;
+
+  .ald-tree-list-scrollbar-thumb {
+    background: #575757 !important;
+    border-radius: var(--scrollbar-size);
+    position: relative;
+    opacity: 0.2 !important;
+
+    &:hover {
+      opacity: 0.6 !important;
+    }
+  }
+}