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

package/dist/Radio/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/index.less';
 
-@radio-icon-button-padding-large: 8px;
-@radio-icon-button-padding-middle: 7px;
+@radio-icon-button-padding-large: 6px;
+@radio-icon-button-padding-middle: 6px;
 @radio-icon-button-padding-small: 7px;
 @radio-group-height-large: 36px;
 @radio-group-height-middle: 32px;
@@ -48,11 +48,23 @@
 .ald-radio-inner {
   position: relative;
   display: inline-block;
-  width: 15px;
-  height: 15px;
-  border: 1px solid @BG60;
-  background-color: @BG100;
+  width: 16px;
+  height: 16px;
+  border: 1px solid
+    var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+  background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
   border-radius: 50%;
+
+  &:hover {
+    border: 1px solid
+      var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
+  }
+
+  &:active {
+    border: 1px solid
+      var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+    background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+  }
 }
 
 .ald-radio-desc {
@@ -62,46 +74,59 @@
   justify-content: center;
   color: #171717;
   font-weight: 400;
-  font-size: 13px;
+  font-size: 14px;
   line-height: 20px;
   user-select: none;
 }
 // 绘制选中时的圆圈样式
 .ald-radio-checked > .ald-radio-inner {
-  border: 1px solid @B40;
-  background: @B95;
-  transition: background 0.5s ease;
+  background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+  border: 0;
+  transform: background 0.5s ease;
 
   &::after {
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 7px;
-    height: 7px;
-    background-color: @B40;
+    width: 5px;
+    height: 5px;
+    background-color: var(--alias-colors-icon-inverse-default, #fff);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     content: '';
   }
+
+  &:hover {
+    background-color: var(--alias-colors-bg-selected-strong-hover, #0f59b1);
+  }
+
+  &:active {
+    background-color: var(--alias-colors-bg-selected-strong-press, #0b4385);
+  }
 }
 
 // 禁用状态下的样式
 .ald-radio-disabled > .ald-radio-inner {
-  background-color: @NL90;
-  border: 1px solid @BG60;
+  background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
+
+  &::after {
+    background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+    border: 0;
+  }
 }
 
 .ald-radio-disabled.ald-radio-checked > .ald-radio-inner {
-  border: 1px solid @B40;
-  background: @B95;
+  border: 0;
+  background: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
 
   &::after {
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 7px;
-    height: 7px;
-    background: @B40;
+    width: 5px;
+    height: 5px;
+    background: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
     border-radius: 50%;
     transform: translate(-50%, -50%);
     content: '';
@@ -110,24 +135,10 @@
 // 禁用的样式
 .ald-radio-label.ald-radio-wrapper-disabled {
   cursor: default;
-  opacity: 0.5;
-
-  // .ald-radio-desc {
-  //   color: @NL60;
-  // }
-}
-
-.ald-radio-button-wrapper-border-primary,
-.ald-radio-button-wrapper-border,
-.ald-radio-icon-button-wrapper-border,
-.ald-radio-icon-button-wrapper-border-primary,
-.ald-radio-button-wrapper-filter,
-.ald-radio-icon-button-wrapper-filter {
-  &.ald-radio-label.ald-radio-wrapper-disabled {
-    opacity: 0.5;
 
+  &.ald-radio-button-wrapper-filled {
     .ald-radio-desc {
-      color: @NL20;
+      color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
     }
   }
 }
@@ -162,16 +173,26 @@
   left: 0;
   z-index: 1;
   width: 0;
-  height: 100%;
-  background: @BG100;
-  border: 1px solid @BG60;
-  border-radius: @border-radius-middle;
-  transition: width, left, height 0.3s, 0.3s, 0.3s ease;
-}
+  height: calc(100% - 2px - 2px); // 减去上下边距
+  margin: 2px;
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border: 1px solid
+    var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+  border-radius: var(--alias-radius-75, 6px);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  // transition: width, left, height 0.3s, 0.3s, 0.3s ease;
+  cursor: pointer;
 
-.ald-radio-filled-slider-filter {
-  background: @B90;
-  border: 0;
+  &:hover {
+    border: 1px solid
+      var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
+  }
+
+  &:active {
+    border: 1px solid
+      var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+    background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+  }
 }
 
 // button状态下的样式
@@ -284,7 +305,7 @@
     align-items: center;
     justify-content: center;
     height: 100%;
-    background-color: @BG90;
+    background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
     cursor: pointer;
 
     &:first-of-type {
@@ -360,7 +381,7 @@
 
       &.ald-radio-label {
         .ald-radio-desc {
-          font-size: @font-size-middle + 1;
+          font-size: 20px;
         }
       }
     }
@@ -444,10 +465,6 @@
     .ald-radio-icon-button-wrapper-filter {
       border-radius: @border-radius-small;
     }
-
-    .ald-radio-filled-slider {
-      border-radius: @border-radius-small;
-    }
   }
 
   &.ald-radio-group.ald-radio-group-large {
@@ -465,7 +482,7 @@
 
       &.ald-radio-label {
         .ald-radio-desc {
-          font-size: 20px;
+          font-size: 24px;
         }
       }
     }
@@ -508,9 +525,5 @@
     .ald-radio-icon-button-wrapper-filter {
       border-radius: @border-radius-large;
     }
-
-    .ald-radio-filled-slider {
-      border-radius: @border-radius-large;
-    }
   }
 }

package/dist/Select/components/{MultipleOption.d.ts → Option.d.ts}

@@ -1,9 +1,9 @@
-import { DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
+import { SelectOptionType } from '../index';
 interface IMultipleOptionProps {
     selected: boolean;
     disabled?: boolean;
-    option: DefaultOptionType;
+    option: SelectOptionType;
     onChange?: (selected: boolean) => void;
     className?: string;
 }

package/dist/Select/components/{MultipleOption.js → Option.js}

@@ -1,28 +1,31 @@
 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); }
 import classnames from 'classnames';
 import React from 'react';
-import Checkbox from "../../Checkbox";
+import { CheckLightLine } from "../../Icon";
 export default function MultipleList(params) {
-  var _option$label;
   var disabled = params.disabled,
     option = params.option,
     selected = params.selected,
     onChange = params.onChange,
     className = params.className;
+  var label = option.label,
+    icon = option.icon;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('ald-multiple-option', className, {
-      'ald-multiple-option-disabled': disabled
+    className: classnames('ald-option', className, {
+      'ald-option-disabled': disabled,
+      'ald-option-selected': selected
     }),
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: selected,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "ald-multiple-option-label",
-    title: _typeof(option.label) !== 'object' ? (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString() : ''
-  }, option.label));
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: "ald-option-icon-wrap"
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: "ald-option-label",
+    title: _typeof(label) !== 'object' ? label === null || label === void 0 ? void 0 : label.toString() : ''
+  }, label), selected && /*#__PURE__*/React.createElement(CheckLightLine, {
+    size: 16
+  }));
 }

package/dist/Select/components/SingleOption.d.ts

@@ -2,9 +2,9 @@ import { DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 interface ISelectProps {
     selected: boolean;
-    option: DefaultOptionType;
-    onChange: (selected: boolean) => void;
     disabled?: boolean;
+    option: DefaultOptionType;
+    onChange?: (selected: boolean) => void;
     className?: string;
 }
 export default function SingleOption(params: ISelectProps): React.JSX.Element;

package/dist/Select/components/SingleOption.js

@@ -22,5 +22,7 @@ export default function SingleOption(params) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "ald-single-option-text",
     title: _typeof(option.label) !== 'object' ? (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString() : ''
-  }, option.label));
+  }, option.label), /*#__PURE__*/React.createElement("div", {
+    className: "ald-checked"
+  }));
 }

package/dist/Select/index.d.ts

@@ -1,12 +1,17 @@
 import { RefSelectProps, SelectProps } from 'antd';
+import { type DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 export interface ISelectProps extends Omit<SelectProps, 'mode'> {
     prefix?: React.ReactNode;
     prefixWidth?: number;
     mode?: 'multiple';
     showAllOption?: boolean;
+    type?: 'primary' | 'secondary';
 }
 export type IRefSelectProps = RefSelectProps;
+export interface SelectOptionType extends DefaultOptionType {
+    icon?: React.ReactNode;
+}
 export type IAldRefSelectProps = IRefSelectProps & {
     open: () => void;
     close: () => void;

package/dist/Select/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 = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "prefixWidth", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style", "autoFocus", "showSearch", "showAllOption", "size", "status", "disabled", "prefixCls"];
+var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "prefixWidth", "className", "popupClassName", "listHeight", "notFoundContent", "value", "type", "tagRender", "style", "autoFocus", "showSearch", "showAllOption", "size", "status", "disabled", "prefixCls"];
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -28,16 +28,10 @@ import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo,
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import Empty from "../Empty";
-import { CancelCircleDuotone, FoldDownFill } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
-import MultipleOption from "./components/MultipleOption";
-import SingleOption from "./components/SingleOption";
+import { ArrowDownFill, CloseLightLine } from "../Icon";
+import Option from "./components/Option";
 var DEFAULT_ALL_OPTION_VALUE = 'default_all_option_value';
-var suffixIconSizeMap = {
-  large: 20,
-  middle: 16,
-  small: 14
-};
+var DEFAULT_LIST_ITEM_HEIGHT = 36;
 var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
   if (typeof value !== 'undefined') {
     if (isMultiple) {
@@ -74,6 +68,7 @@ var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultipl
   return [];
 };
 var Select = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _classNames;
   var mode = props.mode,
     options = props.options,
     dropdownRender = props.dropdownRender,
@@ -87,8 +82,6 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     popupClassName = props.popupClassName,
     listHeight = props.listHeight,
-    _props$listItemHeight = props.listItemHeight,
-    listItemHeight = _props$listItemHeight === void 0 ? 36 : _props$listItemHeight,
     _props$notFoundConten = props.notFoundContent,
     notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, {
       image: Empty.PRESENTED_IMAGE_SEARCH_SMALL,
@@ -96,6 +89,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       title: "\u65E0\u641C\u7D22\u7ED3\u679C"
     }) : _props$notFoundConten,
     value = props.value,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'secondary' : _props$type,
     tagRender = props.tagRender,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
@@ -128,6 +123,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   var isMultiple = mode === 'multiple';
+  var listItemHeight = typeof props.listItemHeight === 'number' ? props.listItemHeight : DEFAULT_LIST_ITEM_HEIGHT;
   var innerOptions = useMemo(function () {
     if (showAllOption && isMultiple && options) {
       return [{
@@ -240,7 +236,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   var multipleRender = function multipleRender() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "ald-multiple-option-list"
+      className: "ald-option-list"
     }, /*#__PURE__*/React.createElement(List, {
       data: innerOptions || [],
       "data-id": "list",
@@ -258,7 +254,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
           return selectedOption.value === option.value;
         });
       }
-      return /*#__PURE__*/React.createElement(MultipleOption, {
+      return /*#__PURE__*/React.createElement(Option, {
         key: option.value,
         selected: isSelected,
         className: option.className,
@@ -281,7 +277,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   var singleRender = function singleRender() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "ald-single-option-list"
+      className: "ald-option-list"
     }, /*#__PURE__*/React.createElement(List, {
       data: innerOptions || [],
       "data-id": "list",
@@ -292,7 +288,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       var isSelected = selectedOptions.some(function (selectedOption) {
         return selectedOption.value === option.value;
       });
-      return /*#__PURE__*/React.createElement(SingleOption, {
+      return /*#__PURE__*/React.createElement(Option, {
         key: option.value,
         selected: isSelected,
         className: option.className,
@@ -358,7 +354,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }, label);
   };
   var maxTagPlaceholder = function maxTagPlaceholder(omittedValues) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "\u7B49", omittedValues.length, "\u9879");
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "+", omittedValues.length);
   };
   useEffect(function () {
     if (updatedRef.current) {
@@ -368,26 +364,18 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [value, innerOptions, isMultiple, defaultValue]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-select', className, _defineProperty({
-      'ald-select-multiple': isMultiple,
-      'ald-select-single': !isMultiple,
-      'ald-select-large': size === 'large',
-      'ald-select-small': size === 'small',
-      'ald-select-disabled': mergedDisabled,
-      'ald-select-middle': size !== 'large' && size !== 'small',
-      'ald-select-open': typeof _open === 'boolean' ? _open : isOpen,
-      'ald-select-focus': isFocus
-    }, "ald-select-status-".concat(mergedStatus), mergedStatus), compactItemClassnames, hashId),
+    onMouseDown: function onMouseDown() {
+      if (disabled) return;
+      if (!isOpen && Date.now() - dropDownTimeRef.current > 300) {
+        setIsOpen(!isOpen);
+      }
+    },
+    className: classNames('ald-select', className, (_classNames = {}, _defineProperty(_classNames, "ald-select-".concat(type), type === 'primary' || type === 'secondary'), _defineProperty(_classNames, 'ald-select-multiple', isMultiple), _defineProperty(_classNames, 'ald-select-single', !isMultiple), _defineProperty(_classNames, 'ald-select-large', size === 'large'), _defineProperty(_classNames, 'ald-select-small', size === 'small'), _defineProperty(_classNames, 'ald-select-disabled', mergedDisabled), _defineProperty(_classNames, 'ald-select-middle', size !== 'large' && size !== 'small'), _defineProperty(_classNames, 'ald-select-open', typeof _open === 'boolean' ? _open : isOpen), _defineProperty(_classNames, 'ald-select-focus', isFocus), _defineProperty(_classNames, "ald-select-status-".concat(mergedStatus), mergedStatus), _classNames), compactItemClassnames, hashId),
     spellCheck: false,
     style: Object.assign(styleVar, style)
   }, !!prefix && /*#__PURE__*/React.createElement("span", {
     ref: prefixRef,
-    className: classNames('ald-select-prefix', _defineProperty({}, "ald-select-prefix-".concat(isMultiple ? 'multiple' : 'single'), isMultiple)),
-    onClick: function onClick() {
-      if (!isOpen && Date.now() - dropDownTimeRef.current > 300) {
-        setIsOpen(true);
-      }
-    }
+    className: classNames('ald-select-prefix', _defineProperty({}, "ald-select-prefix-".concat(isMultiple ? 'multiple' : 'single'), isMultiple))
   }, prefix), /*#__PURE__*/React.createElement(AntdSelect, _extends({}, restProps, {
     // @ts-ignore
     status: mergedStatus,
@@ -397,7 +385,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     bordered: false,
     open: typeof _open === 'boolean' ? _open : isOpen,
     disabled: mergedDisabled,
-    maxTagCount: "responsive",
+    maxTagCount: 1,
     ref: selectRef,
     tagRender: tagRender || defaultTagRender,
     onChange: onChange,
@@ -406,17 +394,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames({
       'ald-select-prefix-select': !!prefix || prefix === 0
     }),
-    clearIcon: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
-      color: "#858585",
-      size: 16,
-      fill: "#ffffff"
+    clearIcon: /*#__PURE__*/React.createElement(CloseLightLine, {
+      className: "ald-select-clear-icon"
     }),
     style: {
       width: '100%'
     },
-    suffixIcon: /*#__PURE__*/React.createElement(FoldDownFill, {
-      size: suffixIconSizeMap[size || 'middle'],
-      color: theme.NL50
+    suffixIcon: props.suffixIcon || /*#__PURE__*/React.createElement(ArrowDownFill, {
+      className: "ald-select-suffix-icon"
     }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
       setIsOpen(open);