@aloudata/aloudata-design 2.19.0-beta.1 → 2.19.0-beta.3

package/dist/AldSelect/BaseSelect.d.ts

@@ -49,7 +49,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, ISelectProps, R
     suffixIcon?: React.ReactNode;
     dropdownAlign?: AlignType;
     placement?: PlacementType;
-    getPopupContainer?: RenderDOMFunc;
+    getPopupContainer?: () => HTMLElement;
     onBlur?: React.FocusEventHandler<HTMLElement>;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;

package/dist/AldSelect/BaseSelect.js

@@ -212,7 +212,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: selectRef,
     id: id,
     onClick: onSelectClick
-  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+  }, /*#__PURE__*/React.createElement(SelectTrigger, _extends({}, restProps, {
     open: !!mergedOpen,
     notFoundContent: notFoundContent,
     menu: showMenu,
@@ -238,7 +238,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onToggleOpen(open);
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: setClassNames('trigger')
   }, prefix && /*#__PURE__*/React.createElement("div", {
     className: setClassNames('prefix')

package/dist/AldSelect/interface.d.ts

@@ -36,7 +36,7 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     style?: React.CSSProperties;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    getPopupContainer?: () => HTMLElement;
     onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     popupMatchSelectWidth?: boolean | number;
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
@@ -84,7 +84,6 @@ export interface LabelInValueType {
     disabled?: boolean;
 }
 export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
-export type RenderDOMFunc = (triggerNode: HTMLElement) => HTMLElement;
 export type DisplayInfoType = 'add' | 'remove' | 'clear';
 export interface DefaultOptionType extends BaseOptionType {
     label?: React.ReactNode;

package/dist/AldSelect/style/color.less

@@ -22,7 +22,7 @@
 
   &-validating,
   &-passed {
-    border-color: var(--interaction-border-success);
+    border-color: var(--border-positive-strong);
   }
 
   &-borderless {

package/dist/Checkbox/style/index.less

@@ -3,7 +3,7 @@
 @checkbox-border-color-normal: var(--interaction-border-neutral-normal);
 @checkbox-border-color-hover: var(--interaction-border-hover);
 @checkbox-border-color-active: var(--interaction-border-active);
-@checkbox-border-color-disabled: var(--interaction-default-normal);
+@checkbox-border-color-disabled: var(--interaction-border-neutral-normal);
 
 @checkbox-inner-bgc-normal: var(--interaction-background-form-field);
 @checkbox-inner-bgc-hover: var(--interaction-background-form-field);
@@ -108,6 +108,7 @@
     .ant-checkbox-disabled {
       .ant-checkbox-inner[class][class] {
         background: @checkbox-inner-bgc-disabled;
+        border-color: @checkbox-border-color-disabled;
       }
     }
   }
@@ -155,7 +156,7 @@
 
     .ant-checkbox-inner {
       background-color: @checkbox-inner-bgc-disabled;
-      border: 0;
+      border: 1px solid @checkbox-border-color-disabled;
 
       &::after {
         top: 3px;

package/dist/ColorPicker/ComplexColorPicker/ColorInput.js

@@ -57,9 +57,6 @@ var ColorInput = function ColorInput(props) {
   }, !disabledFormat && /*#__PURE__*/React.createElement(AldSelect, {
     value: colorFormat,
     borderLess: true,
-    getPopupContainer: function getPopupContainer(current) {
-      return current;
-    },
     popupMatchSelectWidth: 80,
     placement: "bottom-end",
     width: 'auto',

package/dist/ColorPicker/index.d.ts

@@ -7,8 +7,9 @@ export interface IColorPickerProps {
     localStorageKey?: string;
     onChange?: (color: string) => void;
     icon?: React.ReactNode;
+    bordered?: boolean;
     disabled?: boolean;
     mode?: 'simple' | 'complex';
     complexModeProps?: ColorPickerProps;
 }
-export default function ColorPicker({ className, value, icon, onChange, defaultColor, localStorageKey, disabled, mode, complexModeProps, }: IColorPickerProps): React.JSX.Element | null;
+export default function ColorPicker({ className, value, icon, onChange, defaultColor, localStorageKey, disabled, mode, complexModeProps, bordered, }: IColorPickerProps): React.JSX.Element | null;

package/dist/ColorPicker/index.js

@@ -45,7 +45,9 @@ export default function ColorPicker(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? 'simple' : _ref$mode,
-    complexModeProps = _ref.complexModeProps;
+    complexModeProps = _ref.complexModeProps,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -171,14 +173,24 @@ export default function ColorPicker(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: cls('ald-color-picker-wrapper', {
         'ald-color-picker-wrapper-focused': open,
-        'ald-color-picker-wrapper-disabled': disabled
+        'ald-color-picker-wrapper-disabled': disabled,
+        'ald-color-picker-wrapper-borderless': bordered === false
       }),
       onClick: function onClick(e) {
         if (disabled) {
           e.stopPropagation();
         }
       }
-    }, icon || /*#__PURE__*/React.createElement("div", {
+    }, icon ? /*#__PURE__*/React.createElement("div", {
+      className: 'svg'
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'icon'
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: 'line',
+      style: {
+        backgroundColor: value !== null && value !== void 0 ? value : '#4B5563'
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
       className: 'word'
     }, "A", /*#__PURE__*/React.createElement("div", {
       className: 'line',

package/dist/ColorPicker/style/index.less

@@ -17,7 +17,7 @@
     gap: 4px;
     height: 28px;
     background: var(--background-default);
-    border: 1px solid var(--alias-colors-border-accent-gray-subtle-default);
+    border: 1px solid var(--interaction-border-neutral-normal);
     box-sizing: border-box;
     cursor: pointer;
     transition: border 0.5s ease-in-out;
@@ -28,11 +28,25 @@
     }
   }
 
+  .ald-color-picker-wrapper-borderless {
+    border: 1px solid transparent;
+  }
+
+  .ald-color-picker-wrapper-borderless:hover {
+    border: 1px solid transparent !important;
+    box-shadow: none;
+  }
+
   .ald-color-picker-wrapper-focused {
     border: 1px solid var(--interaction-border-normal);
     box-sizing: border-box;
   }
 
+  .ald-color-picker-wrapper-borderless.ald-color-picker-wrapper-focused {
+    border: 1px solid transparent !important;
+    box-shadow: none;
+  }
+
   .word {
     position: relative;
     top: -1px;
@@ -46,6 +60,30 @@
       bottom: 3px;
     }
   }
+
+  .svg {
+    position: relative;
+    top: -1px;
+
+    .icon {
+      margin-bottom: 1px;
+    }
+
+    .icon.bordered {
+      border: 1px solid #d1d5db;
+      border-radius: 3px;
+      padding: 1px;
+    }
+
+    .line {
+      width: 10px;
+      height: 2px;
+      position: absolute;
+      bottom: 3px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
 }
 
 .ald-dropdown-overlay.ald-color-picker-overlay-wrapper {

package/dist/Divider/style/index.less

@@ -10,7 +10,7 @@
     width: 100%;
     height: 100%;
     content: '';
-    background-color: var(--border-default);
+    background-color: var(--global-cool-grey-300);
     mix-blend-mode: multiply;
   }
 

package/dist/InputSearch/index.js

@@ -126,7 +126,7 @@ export default function InputSearch(props) {
       '--init-width': (props.initWidth || defaultWidth) + 'px'
     })
   }, /*#__PURE__*/React.createElement(Input, _extends({
-    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, 'input-search-has-value', currentValue.length !== 0 || inputMode), _defineProperty(_classnames2, 'inputMode', inputMode), _classnames2)),
+    className: classnames((_classnames2 = {}, _defineProperty(_classnames2, 'input-search-has-value', currentValue.length !== 0 || inputMode), _defineProperty(_classnames2, 'input-search-has-content', currentValue.length !== 0), _defineProperty(_classnames2, 'inputMode', inputMode), _classnames2)),
     size: size
     // @ts-ignore
     ,

package/dist/InputSearch/style/index.less

@@ -37,17 +37,13 @@
       background-color: var(--background-neutral-subtle);
     }
 
-    &.ant-input-affix-wrapper-focused,
-    &:hover,
-    &.input-search-has-value {
+    &.ant-input-affix-wrapper-focused:not(.inputMode),
+    &:hover:not(.inputMode),
+    &.input-search-has-value:not(.inputMode) {
       width: 200px !important;
       transition: all 0.2s ease 0.1s !important;
       background-color: var(--background-default);
 
-      &.inputMode {
-        width: 100% !important;
-      }
-
       input {
         background-color: var(--background-default);
       }
@@ -63,8 +59,26 @@
       }
     }
 
-    &.ant-input-affix-wrapper-focused,
-    &.inputSearchHasValue {
+    &.inputMode {
+      width: 100% !important;
+      background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+
+      input {
+        background-color: #fff;
+      }
+
+      ::placeholder {
+        color: var(--alias-colors-text-subtlest, #9ca3af);
+        background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px; /* 133.333% */
+        transition: all 0.2s ease 0.1s !important;
+      }
+    }
+
+    &.input-search-has-content {
       .ant-input-suffix {
         display: flex;
 

package/dist/MemberPicker/style/index.less

@@ -130,11 +130,10 @@
 .ald-member-picker-footer {
   width: 100%;
   display: flex;
-  padding: var(--global-number-spacing-spacing-sm)
-    var(--global-number-spacing-spacing-lg);
+  padding: var(--component-gap-sm) var(--component-gap-lg);
   justify-content: flex-end;
   align-items: center;
-  gap: var(--global-number-spacing-spacing-sm);
+  gap: var(--component-gap-sm);
   align-self: stretch;
   border-top: 1px solid var(--border-default);
   background: var(--background-default);

package/dist/Pagination/PageSizeChanger.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IPageSizeChangerProps {
+    pageSize: number;
+    pageSizeOptions: (string | number)[];
+    onChange: (size: number) => void;
+    className?: string;
+    disabled?: boolean;
+}
+declare const PageSizeChanger: React.FC<IPageSizeChangerProps>;
+export default PageSizeChanger;

package/dist/Pagination/PageSizeChanger.js

@@ -0,0 +1,50 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useContext } from 'react';
+import AldSelect from "../AldSelect";
+import { LocaleContext, getTranslator } from "../locale/default";
+var PageSizeChanger = function PageSizeChanger(_ref) {
+  var pageSize = _ref.pageSize,
+    pageSizeOptions = _ref.pageSizeOptions,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useContext = useContext(LocaleContext),
+    locale = _useContext.locale;
+  var t = getTranslator(locale);
+
+  // 将 pageSizeOptions 转换为 Select 可用的选项格式
+  // 确保当前 pageSize 值在选项中存在
+  var optionSet = new Set([].concat(_toConsumableArray(pageSizeOptions), [pageSize]));
+  var allOptions = Array.from(optionSet).sort(function (a, b) {
+    return Number(a) - Number(b);
+  });
+  var selectOptions = allOptions.map(function (option) {
+    return {
+      label: "".concat(option, " ").concat(t.Pagination.itemsPerPage),
+      value: String(option)
+    };
+  });
+  var handleChange = function handleChange(value) {
+    var newSize = parseInt(value, 10);
+    if (!isNaN(newSize) && newSize !== pageSize) {
+      onChange(newSize);
+    }
+  };
+  var selectProps = {
+    value: String(pageSize),
+    onChange: handleChange,
+    options: selectOptions,
+    width: 112,
+    disabled: disabled,
+    className: "ald-pagination-page-size-changer ".concat(className || '').trim(),
+    placeholder: t.Pagination.selectPageSize
+  };
+  return /*#__PURE__*/React.createElement(AldSelect, selectProps);
+};
+export default PageSizeChanger;

package/dist/Pagination/index.js

@@ -10,16 +10,28 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classnames from 'classnames';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import Button from "../Button";
 import { ChevronLeftLine, ChevronRightLine, Ellipsis } from "../Icon";
+import { LocaleContext, getTranslator } from "../locale/default";
+import PageSizeChanger from "./PageSizeChanger";
 function Pagination(props) {
   var _props$current = props.current,
     currPage = _props$current === void 0 ? 1 : _props$current,
     pageSize = props.pageSize,
     total = props.total,
     onChange = props.onChange,
-    hideOnSinglePage = props.hideOnSinglePage;
+    hideOnSinglePage = props.hideOnSinglePage,
+    _props$showSizeChange = props.showSizeChanger,
+    showSizeChanger = _props$showSizeChange === void 0 ? false : _props$showSizeChange,
+    _props$pageSizeOption = props.pageSizeOptions,
+    pageSizeOptions = _props$pageSizeOption === void 0 ? [10, 20, 30, 50] : _props$pageSizeOption,
+    onShowSizeChange = props.onShowSizeChange,
+    _props$showTotal = props.showTotal,
+    showTotal = _props$showTotal === void 0 ? false : _props$showTotal;
+  var _useContext = useContext(LocaleContext),
+    locale = _useContext.locale;
+  var t = getTranslator(locale);
   var totalPage = getTotalPage(total, pageSize);
   var _useState = useState(getSafeCurrent(totalPage, currPage)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -38,17 +50,52 @@ function Pagination(props) {
         return;
       }
       setCurrent(page);
-      onChange(page);
+      onChange(page, pageSize);
     };
-  }, [onChange, current]);
+  }, [onChange, current, pageSize]);
+  var handlePageSizeChange = useCallback(function (newPageSize) {
+    var newTotalPage = getTotalPage(total, newPageSize);
+    // 确保当前页在有效范围内
+    var safeCurrent = getSafeCurrent(newTotalPage, current);
+    setCurrent(safeCurrent);
+
+    // 调用回调函数
+    if (onShowSizeChange) {
+      onShowSizeChange(safeCurrent, newPageSize);
+    }
+
+    // 也调用 onChange 以保持一致性
+    onChange(safeCurrent, newPageSize);
+  }, [total, current, onShowSizeChange, onChange]);
   var pageRange = getPaginationRange(totalPage, current);
   if (hideOnSinglePage) {
-    if (totalPage <= 1) {
+    if (totalPage <= 1 && !showSizeChanger && !showTotal) {
       return null;
     }
   }
+
+  // 计算当前显示的数据范围
+  var startIndex = (current - 1) * pageSize + 1;
+  var endIndex = Math.min(current * pageSize, total);
+  var range = [startIndex, endIndex];
+  var containerClassName = prefixCls('container');
+
+  // 获取显示总数的函数
+  var getShowTotalContent = function getShowTotalContent() {
+    if (typeof showTotal === 'function') {
+      return showTotal(total, range);
+    }
+    if (showTotal === true) {
+      return t.Pagination.totalItems(total, range);
+    }
+    return null;
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('container')
+    className: containerClassName
+  }, showTotal && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('total')
+  }, getShowTotalContent()), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls('main')
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(ChevronLeftLine, {
       size: 16
@@ -76,6 +123,10 @@ function Pagination(props) {
     }),
     onClick: onChangePage(current + 1),
     disabled: current >= totalPage
+  })), showSizeChanger && /*#__PURE__*/React.createElement(PageSizeChanger, {
+    pageSize: pageSize,
+    pageSizeOptions: pageSizeOptions,
+    onChange: handlePageSizeChange
   }));
 }
 export default Pagination;

package/dist/Pagination/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
+@import '../../AldSelect/style/index.less';
 
 .ald-pagination-container {
   display: flex;
@@ -7,6 +8,12 @@
   gap: 8px;
 }
 
+.ald-pagination-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .ald-pagination-active.ald-btn.ald-btn.ald-btn-secondary {
   &,
   &:focus,
@@ -30,3 +37,9 @@
   font-size: 12px;
   font-weight: 500;
 }
+
+.ald-pagination-total {
+  margin-right: 8px;
+  color: var(--alias-colors-text-secondary, #666);
+  font-size: 14px;
+}

package/dist/Pagination/types.d.ts

@@ -1,7 +1,12 @@
+/// <reference types="react" />
 export interface IPaginationProps {
     current?: number;
     pageSize: number;
     total: number;
-    onChange: (current: number) => void;
+    onChange: (current: number, pageSize?: number) => void;
     hideOnSinglePage?: boolean;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: (string | number)[];
+    onShowSizeChange?: (current: number, size: number) => void;
+    showTotal?: boolean | ((total: number, range: [number, number]) => React.ReactNode);
 }

package/dist/StatusLight/index.js

@@ -18,27 +18,27 @@ function StatusLight(_ref) {
     switch (status) {
       case 'info':
         return /*#__PURE__*/React.createElement(InProgressFill, {
-          color: "var(--non-semantic-content-blue-primary)",
+          color: "var(--non-semantic-background-blue-strong)",
           size: iconSize
         });
       case 'neutral':
         return /*#__PURE__*/React.createElement(CancelledCircleFill, {
-          color: "var(--non-semantic-content-grey-primary)",
+          color: "var(--non-semantic-background-grey-strong)",
           size: iconSize
         });
       case 'danger':
         return /*#__PURE__*/React.createElement(CloseCircleFill, {
-          color: "var(--non-semantic-content-red-primary)",
+          color: "var(--non-semantic-background-red-strong)",
           size: iconSize
         });
       case 'success':
         return /*#__PURE__*/React.createElement(CheckCircleFill, {
-          color: "var(--non-semantic-content-green-primary)",
+          color: "var(--non-semantic-background-green-strong)",
           size: iconSize
         });
       case 'warning':
         return /*#__PURE__*/React.createElement(AttentionCircleFill, {
-          color: "var(--non-semantic-content-orange-primary)",
+          color: "var(--non-semantic-background-orange-strong)",
           size: iconSize
         });
     }

package/dist/Table/components/Header.js

@@ -20,7 +20,7 @@ export default function Header(props) {
     onSort = _ref.onSort;
   var sortIcon = /*#__PURE__*/React.createElement(SortIcon, {
     size: 20,
-    color: 'var(  --interaction-default-normal)'
+    color: 'var(  --interaction-neutral-normal)'
   });
   if (sortOrder === 'ascend') {
     sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, {

package/dist/Table/index.js

@@ -275,7 +275,7 @@ function Table(props, ref) {
       onRowClick(rowData, rowIndex);
     };
   }, [onRowClick]);
-  var isShowPagination = !!(pagination && pagination.total > pagination.pageSize);
+  var isShowPagination = !!(pagination && (pagination.total > pagination.pageSize || pagination.showSizeChanger));
   var isShowRowSelection = rowSelectionInfo.isShowRowSelectionInFooter;
   var isShowFooter = isShowPagination || isShowRowSelection;
 

package/dist/Table/style/index.less

@@ -223,13 +223,13 @@
     .ald-table-tr {
       &.ald-table-row-hover {
         .ald-table-td {
-          background-color: var(--background-neutral-on-subtle);
+          background-color: var(--interaction-ghost-hover);
         }
       }
 
       &.ald-table-row-dragging {
         .ald-table-td {
-          background-color: var(--background-neutral-on-subtle);
+          background-color: var(--interaction-ghost-hover);
         }
       }
     }

package/dist/Tree/style/checkbox.less

@@ -33,7 +33,7 @@
       height: @checkbox-size;
       direction: ltr;
       background-color: @checkbox-check-bg;
-      border: 1px solid var(--alias-colors-border-accent-gray-subtle-default);
+      border: 1px solid var(--interaction-border-neutral-normal);
       border-radius: @checkbox-border-radius;
       border-collapse: separate;
       transition: all 0.3s;
@@ -59,11 +59,11 @@
       }
 
       &:hover {
-        border-color: var(--alias-colors-border-accent-gray-subtle-hover);
+        border-color: var(--interaction-border-hover);
       }
 
       &:active {
-        border-color: var(--alias-colors-border-accent-gray-subtle-default);
+        border-color: var(--interaction-border-neutral-normal);
         background-color: var(--alias-colors-bg-skeleton-strong);
       }
     }