@aloudata/aloudata-design 0.4.8 → 0.4.9

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,83 @@
   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-button-wrapper-filter,
+.ald-radio-icon-button-wrapper-filter {
+  &.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,11 +164,16 @@
   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;
 }
 
+.ald-radio-filled-slider-filter {
+  background: @B90;
+  border: 0;
+}
+
 // button状态下的样式
 .ald-radio-group-button,
 .ald-radio-group-icon-button {
@@ -156,21 +195,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 +223,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid @NL90;
+      border-right: 1px solid @BG60;
       border-radius: 0 6px 6px 0;
     }
 
@@ -199,24 +244,41 @@
 
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
-  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
-    background: @B98;
-    transition: background 0.5s ease;
+  .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.3s ease;
 
     .ald-radio-desc {
       position: relative;
       color: @NL0;
-      transition: text-shadow 0.5s ease;
+      transition: text-shadow 0.3s ease, color 0.3s ease;
+    }
+  }
+
+  .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.3s ease;
+
+    .ald-radio-desc {
+      position: relative;
+      color: @ND0;
+      transition: text-shadow 0.3s ease, color 0.3s ease;
     }
   }
 
   // filled样式的button
-  .ald-radio-button-wrapper-filled {
+  .ald-radio-button-wrapper-filled,
+  .ald-radio-button-wrapper-filter {
     padding: 0 @radio-button-padding;
   }
 
   .ald-radio-button-wrapper-filled,
-  .ald-radio-icon-button-wrapper-filled {
+  .ald-radio-icon-button-wrapper-filled,
+  .ald-radio-button-wrapper-filter,
+  .ald-radio-icon-button-wrapper-filter {
     position: relative;
     display: flex;
     align-items: center;
@@ -246,6 +308,15 @@
     .ald-radio-checked > .ald-radio-inner::after {
       width: 0;
     }
+
+    .ald-radio-desc {
+      font-weight: 600;
+    }
+  }
+
+  .ald-radio-button-wrapper-filter,
+  .ald-radio-icon-button-wrapper-filter {
+    background-color: @BG100;
   }
 
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
@@ -254,25 +325,63 @@
 
     .ald-radio-desc {
       position: relative;
+      font-weight: 600;
+      z-index: 2;
+      color: @NL0;
+    }
+  }
+
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-filter,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filter {
+    position: relative;
+    border-radius: @border-radius-middle;
+
+    .ald-radio-desc {
+      position: relative;
+      font-weight: 600;
       z-index: 2;
       color: @NL0;
     }
   }
+
   // 各种大小
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
 
-    .ald-radio-icon-button-wrapper-filled {
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+
+    .ald-radio-icon-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-middle;
+
+      &.ald-radio-label {
+        .ald-radio-desc {
+          font-size: @font-size-middle + 1;
+        }
+      }
     }
 
-    .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,
+    .ald-radio-icon-button-wrapper-filter {
+      padding: 0 @radio-icon-button-padding-middle;
+
+      &.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 +389,46 @@
   &.ald-radio-group-small {
     height: @radio-group-height-small;
 
-    .ald-radio-icon-button-wrapper-filled {
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
+    .ald-radio-icon-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-small;
+
+      &.ald-radio-label {
+        .ald-radio-desc {
+          font-size: 14px;
+        }
+      }
     }
 
-    .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;
+
+      &.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 {
@@ -307,6 +440,11 @@
       }
     }
 
+    .ald-radio-button-wrapper-filter,
+    .ald-radio-icon-button-wrapper-filter {
+      border-radius: @border-radius-small;
+    }
+
     .ald-radio-filled-slider {
       border-radius: @border-radius-small;
     }
@@ -315,22 +453,46 @@
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
 
-    .ald-radio-icon-button-wrapper-filled {
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
+    .ald-radio-icon-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-large;
+
+      &.ald-radio-label {
+        .ald-radio-desc {
+          font-size: 20px;
+        }
+      }
     }
 
-    .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 {
@@ -342,6 +504,11 @@
       }
     }
 
+    .ald-radio-button-wrapper-filter,
+    .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

@@ -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"