@aloudata/aloudata-design 0.4.8-beta.1 → 0.4.8-beta.10

package/dist/Modal/style/index.less

@@ -17,9 +17,10 @@
   .ald-modal-title-container {
     display: flex;
     align-items: center;
+    gap: 12px;
 
     .ald-modal-text-container {
-      margin-left: 12px;
+      // margin-left: 12px;
       flex: 1;
     }
 
@@ -61,12 +62,12 @@
     font-size: 13px;
   }
 
-  .ant-modal-footer{
+  .ant-modal-footer {
     .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
       margin-bottom: 0;
       margin-inline-start: 12px;
     }
-  } 
+  }
 }
 
 .ant-modal-confirm {
@@ -75,15 +76,31 @@
       flex: 1;
       overflow: initial;
       margin-inline-start: 12px;
-  
+
       & + .ant-modal-confirm-content {
         margin-block-start: 16px;
-        margin-left:28px;
+        margin-left: 28px;
       }
     }
   }
 
-  .ant-modal-confirm-btns{
+  .ant-modal-confirm-btns {
     margin-block-start: 16px;
   }
 }
+
+.ald-modal-warning {
+  .ant-modal-confirm-btns {
+    .ald-btn {
+      background-color: @SB40;
+      border-color: @SB40;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: @SB40;
+        border-color: @SB40;
+      }
+    }
+  }
+}

package/dist/Radio/components/Group/index.js

@@ -12,9 +12,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { createContext, useRef } from 'react';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import React, { createContext, useRef } from 'react';
 export var RadioGroupContext = /*#__PURE__*/createContext({});
 export default function RadioGroup(props) {
   var children = props.children,
@@ -24,7 +24,9 @@ export default function RadioGroup(props) {
       size = _props$size === void 0 ? 'middle' : _props$size,
       _props$type = props.type,
       type = _props$type === void 0 ? 'radio' : _props$type,
-      className = props.className; // 滑块的ref
+      className = props.className,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled; // 滑块的ref
 
   var sliderRef = useRef(null); // 该hooks与useState相同，但是当props中有value值时，优先使用value的值
 
@@ -63,7 +65,8 @@ export default function RadioGroup(props) {
       radioGroupStyle: radioGroupStyle,
       size: size,
       type: type,
-      sliderRef: sliderRef
+      sliderRef: sliderRef,
+      disabled: disabled
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: getWrapperClass()

package/dist/Radio/components/Radio/index.js

@@ -5,10 +5,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import classNames from 'classnames';
-import React, { useContext, useEffect, useRef } from 'react';
 import _ from 'lodash';
-import { RadioGroupContext } from "../Group";
+import React, { useContext, useEffect, useRef } from 'react';
 import { getUUID } from "../../../_utils/hooks/useId";
+import { RadioGroupContext } from "../Group";
 export default function Radio(props) {
   var groupContext = useContext(RadioGroupContext);
   var labelRef = useRef(null);
@@ -17,7 +17,7 @@ export default function Radio(props) {
   var radioProps = _objectSpread({}, props);
 
   if (!_.isEmpty(groupContext)) {
-    radioProps.disabled = props.disabled;
+    radioProps.disabled = groupContext.disabled || props.disabled;
     radioProps.checked = !props.disabled && groupContext.value === props.value;
   } else {
     radioProps.checked = !('checked' in props) ? props.defaultChecked : radioProps.checked;
@@ -35,14 +35,18 @@ export default function Radio(props) {
     if (groupContext.type === 'button') {
       if (groupContext.radioGroupStyle === 'filled') {
         otherClass = 'ald-radio-button-wrapper-filled';
-      } else {
+      } else if (groupContext.radioGroupStyle === 'border') {
         otherClass = 'ald-radio-button-wrapper-border';
+      } else {
+        otherClass = 'ald-radio-button-wrapper-border-primary';
       }
     } else if (groupContext.type === 'iconButton') {
       if (groupContext.radioGroupStyle === 'filled') {
         otherClass = 'ald-radio-icon-button-wrapper-filled';
-      } else {
+      } else if (groupContext.radioGroupStyle === 'border') {
         otherClass = 'ald-radio-icon-button-wrapper-border';
+      } else {
+        otherClass = 'ald-radio-icon-button-wrapper-border-primary';
       }
     } else {
       // 当type未设置或者是radio时
@@ -67,7 +71,6 @@ export default function Radio(props) {
 
   var onChange = function onChange() {
     if (groupContext !== null && groupContext !== void 0 && groupContext.onChange) {
-      // console.log(e);
       // input事件的value会被toString，所以此处进行一个覆盖
       groupContext.onChange(props.value);
     }

package/dist/Radio/interface/radioGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare type TRadioGroupStyle = 'border' | 'filled';
+export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary';
 export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
 export declare type TRadioType = 'radio' | 'button' | 'iconButton';
 export interface IRadioGroupProps {
@@ -13,6 +13,11 @@ export interface IRadioGroupProps {
      * @default -
      */
     defaultValue?: any;
+    /**
+     * @description 整组禁用
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * @description 设置按钮组的大小，有'large' | 'middle'('default') | 'small
      * @default 'middle'

package/dist/Radio/style/index.less

@@ -1,17 +1,24 @@
 @import '../../style/index.less';
 
-@radio-icon-button-padding-large: 10px;
+@radio-icon-button-padding-large: 8px;
 @radio-icon-button-padding-middle: 9px;
-@radio-icon-button-padding-small: 8px;
+@radio-icon-button-padding-small: 7px;
 @radio-group-height-large: 36px;
 @radio-group-height-middle: 32px;
 @radio-group-height-small: 28px;
 @radio-button-padding: 12px;
+@radio-button-padding-large: 14px;
+@radio-button-padding-small: 10px;
+@radio-button-padding-middle: 12px;
 
 // Radio组件基础样式
+[class^="ald-radio"] {
+  box-sizing: border-box;
+}
+
 .ald-radio-wrapper {
   display: inline-flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
   justify-content: start;
   height: 20px;
@@ -41,9 +48,10 @@
 .ald-radio-inner {
   position: relative;
   display: inline-block;
-  width: 17px;
-  height: 17px;
-  border: 1px solid @NL90;
+  width: 15px;
+  height: 15px;
+  border: 1px solid @BG60;
+  background-color: @BG100;
   border-radius: 50%;
 }
 
@@ -54,57 +62,81 @@
   justify-content: center;
   color: @NL0;
   font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  user-select: none;
 }
 // 绘制选中时的圆圈样式
 .ald-radio-checked > .ald-radio-inner {
-  background-color: @B60;
-  border: 0;
+  border: 1px solid @B40;
+  background: @B95;
   transform: background 0.5s ease;
 
   &::after {
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 6px;
-    height: 6px;
-    background-color: @ND0;
+    width: 7px;
+    height: 7px;
+    background-color: @B40;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     content: '';
   }
 }
+
 // 禁用状态下的样式
 .ald-radio-disabled > .ald-radio-inner {
   background-color: @NL90;
-  border: 0;
+  border: 1px solid @BG60;
 }
 
-.ald-radio-disabled.ald-radio-checked > .ald-radio-inner::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 6px;
-  height: 6px;
-  background: @NL90;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  content: '';
+.ald-radio-disabled.ald-radio-checked > .ald-radio-inner {
+  border: 1px solid @B40;
+  background: @B95;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    background: @B40;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+  }
 }
 // 禁用的样式
 .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-label.ald-radio-wrapper-disabled {
+    opacity: 0.5;
+
+    .ald-radio-desc {
+      color: @NL20;
+    }
+  }
+}
+
 // RadioGroup基础样式
 .ald-radio-group {
   position: relative;
 
   .ald-radio-label .ald-radio-desc {
     color: @NL30;
-    font-weight: 500;
+    font-weight: 600;
     font-size: @font-size-middle;
     font-style: normal;
   }
@@ -130,7 +162,7 @@
   width: 0;
   height: 100%;
   background: @BG100;
-  border: 1px solid @NL90;
+  border: 1px solid @BG60;
   border-radius: @border-radius-middle;
   transition: width, left, height 0.3s, 0.3s, 0.3s ease;
 }
@@ -156,21 +188,27 @@
       color: @NL80;
     }
   }
+
   // border的样式
-  .ald-radio-button-wrapper-border {
+  .ald-radio-button-wrapper-border,
+  .ald-radio-button-wrapper-border-primary {
     padding: 0 @radio-button-padding - 1;
   }
 
   .ald-radio-button-wrapper-border,
-  .ald-radio-icon-button-wrapper-border {
+  .ald-radio-button-wrapper-border-primary,
+  .ald-radio-icon-button-wrapper-border,
+  .ald-radio-icon-button-wrapper-border-primary {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     background: @BG100;
-    border: 1px solid @NL90;
-    border-right: 1px solid transparent;
+    border-top: 1px solid @BG60;
+    border-left: 1px solid @BG60;
+    border-bottom: 1px solid @BG60;
+    overflow: hidden;
     cursor: pointer;
 
     &:first-child {
@@ -178,7 +216,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid @NL90;
+      border-right: 1px solid @BG60;
       border-radius: 0 6px 6px 0;
     }
 
@@ -199,8 +237,10 @@
 
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
-  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
-    background: @B98;
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
+    background: @BG80;
     transition: background 0.5s ease;
 
     .ald-radio-desc {
@@ -210,6 +250,18 @@
     }
   }
 
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
+    background: @B40;
+    transition: background 0.5s ease;
+
+    .ald-radio-desc {
+      position: relative;
+      color: @ND0;
+      transition: text-shadow 0.5s ease;
+    }
+  }
+
   // filled样式的button
   .ald-radio-button-wrapper-filled {
     padding: 0 @radio-button-padding;
@@ -246,6 +298,10 @@
     .ald-radio-checked > .ald-radio-inner::after {
       width: 0;
     }
+
+    .ald-radio-desc {
+      font-weight: 400;
+    }
   }
 
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
@@ -254,6 +310,7 @@
 
     .ald-radio-desc {
       position: relative;
+      font-weight: 400;
       z-index: 2;
       color: @NL0;
     }
@@ -262,17 +319,32 @@
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-middle;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-middle - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-middle - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-middle;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-middle - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-middle 0
+          @radio-icon-button-padding-middle - 1;
       }
     }
   }
@@ -280,22 +352,39 @@
   &.ald-radio-group-small {
     height: @radio-group-height-small;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-small;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-small - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-small - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-small;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-small - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-small 0
+          @radio-icon-button-padding-small - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {
@@ -315,22 +404,39 @@
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-large;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-large - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-large - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-large;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-large - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 20px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-large 0
+          @radio-icon-button-padding-large - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {

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

@@ -5,6 +5,7 @@ interface IMultipleOptionProps {
     disabled?: boolean;
     option: DefaultOptionType;
     onChange?: (selected: boolean) => void;
+    className?: string;
 }
 export default function MultipleList(params: IMultipleOptionProps): JSX.Element;
 export {};

package/dist/Select/components/MultipleOption.js

@@ -1,18 +1,22 @@
 import { Checkbox } from 'antd';
+import classnames from 'classnames';
 import React from 'react';
 export default function MultipleList(params) {
   var disabled = params.disabled,
       option = params.option,
       selected = params.selected,
-      onChange = params.onChange;
+      onChange = params.onChange,
+      className = params.className;
 
   var onClick = function onClick() {
-    //TODO: 这里有bug 等待antd升级 https://github.com/ant-design/ant-design/pull/39078
+    if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected);
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "ald-multiple-option",
+    className: classnames('ald-multiple-option', className, {
+      'ald-multiple-option-disabled': disabled
+    }),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: selected,

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

@@ -5,6 +5,7 @@ interface ISelectProps {
     option: DefaultOptionType;
     onChange: (selected: boolean) => void;
     disabled?: boolean;
+    className?: string;
 }
 export default function SingleOption(params: ISelectProps): JSX.Element;
 export {};

package/dist/Select/components/SingleOption.js

@@ -1,4 +1,5 @@
 import { CheckLine } from '@aloudata/icons-react';
+import classnames from 'classnames';
 import React from 'react';
 import colors from "../../style/themes/default/themeColor.module.less";
 export default function SingleOption(params) {
@@ -6,7 +7,8 @@ export default function SingleOption(params) {
       selected = params.selected,
       option = params.option,
       _params$onChange = params.onChange,
-      onChange = _params$onChange === void 0 ? function () {} : _params$onChange;
+      onChange = _params$onChange === void 0 ? function () {} : _params$onChange,
+      className = params.className;
 
   var onClick = function onClick() {
     if (disabled) return;
@@ -14,7 +16,9 @@ export default function SingleOption(params) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "ald-single-option",
+    className: classnames('ald-single-option', className, {
+      'ald-single-option-disabled': disabled
+    }),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icons-check-line"