@aloudata/aloudata-design 0.4.7 → 0.4.8-beta.2

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,8 +35,10 @@ 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') {
@@ -67,7 +69,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

@@ -7,11 +7,14 @@
 @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组件基础样式
 .ald-radio-wrapper {
   display: inline-flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
   justify-content: start;
   height: 20px;
@@ -41,9 +44,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 +58,79 @@
   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-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;
   }
@@ -128,9 +154,9 @@
   left: 0;
   z-index: 1;
   width: 0;
-  height: 100%;
+  height: calc(100% - 2px);
   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 +182,26 @@
       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-button-wrapper-border-primary,
   .ald-radio-icon-button-wrapper-border {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    height: calc(100% - 2px);
     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 +209,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid @NL90;
+      border-right: 1px solid @BG60;
       border-radius: 0 6px 6px 0;
     }
 
@@ -199,8 +230,9 @@
 
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
   .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
-    background: @B98;
+    background: @BG80;
     transition: background 0.5s ease;
 
     .ald-radio-desc {
@@ -210,6 +242,17 @@
     }
   }
 
+  .ald-radio-wrapper-checked.ald-radio-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 +289,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 +301,7 @@
 
     .ald-radio-desc {
       position: relative;
+      font-weight: 400;
       z-index: 2;
       color: @NL0;
     }
@@ -266,6 +314,11 @@
       padding: 0 @radio-icon-button-padding-middle;
     }
 
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-middle - 1;
+    }
+
     .ald-radio-icon-button-wrapper-border {
       padding: 0 @radio-icon-button-padding-middle - 1;
     }
@@ -284,6 +337,11 @@
       padding: 0 @radio-icon-button-padding-small;
     }
 
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-small - 1;
+    }
+
     .ald-radio-icon-button-wrapper-border {
       padding: 0 @radio-icon-button-padding-small - 1;
     }
@@ -296,6 +354,7 @@
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {
@@ -319,6 +378,11 @@
       padding: 0 @radio-icon-button-padding-large;
     }
 
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-large - 1;
+    }
+
     .ald-radio-icon-button-wrapper-border {
       padding: 0 @radio-icon-button-padding-large - 1;
     }
@@ -331,6 +395,7 @@
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {

package/dist/Select/index.js

@@ -135,7 +135,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
 
-    setSelectedOptions(newOptions);
+    if (typeof value === 'undefined') {
+      setSelectedOptions(newOptions);
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange(newOptions.map(function (item) {
       return item.value;
     }), newOptions);
@@ -154,9 +157,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         option: option,
         disabled: option.disabled,
         onChange: function onChange(selected) {
-          if (typeof value === 'undefined') {
-            onMultipleOptionChange(option, selected);
-          }
+          onMultipleOptionChange(option, selected);
         }
       });
     }));
@@ -165,7 +166,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   var onSingleOptionChange = function onSingleOptionChange(option) {
     var _props$onSelect2;
 
-    setSelectedOptions([option]);
+    if (typeof value === 'undefined') {
+      setSelectedOptions([option]);
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange(option.value, option);
     (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 ? void 0 : _props$onSelect2.call(props, option.value, option);
     setIsOpen(false);
@@ -184,9 +188,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         option: option,
         disabled: option.disabled,
         onChange: function onChange() {
-          if (typeof value === 'undefined') {
-            onSingleOptionChange(option);
-          }
+          onSingleOptionChange(option);
         }
       });
     }));
@@ -194,7 +196,18 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var getDropdownRender = function getDropdownRender() {
     if (dropdownRender) {
-      return dropdownRender;
+      if (isMultiple) {
+        var menu = multipleRender();
+        return function () {
+          return dropdownRender(menu);
+        };
+      } else {
+        var _menu = singleRender();
+
+        return function () {
+          return dropdownRender(_menu);
+        };
+      }
     } else if (Array.isArray(options) && options.length > 0) {
       if (!isMultiple) {
         return singleRender;
@@ -243,7 +256,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   useEffect(function () {
-    getSelectedOptionsFromValue(isMultiple, options, value);
+    setSelectedOptions(getSelectedOptionsFromValue(isMultiple, options, value));
   }, [value]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-select', className, {
@@ -272,6 +285,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     maxTagCount: "responsive",
     ref: ref,
     tagRender: tagRender,
+    onChange: onChange,
     popupClassName: classNames('ald-select-popup', popupClassName),
     maxTagPlaceholder: maxTagPlaceholder,
     className: classNames({

package/dist/style/themes/default/index.less

@@ -1,36 +1,36 @@
 @import './themeColor.module.less';
-@font-family:Inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+/* stylelint-disable-next-line at-rule-no-unknown */
+@font-family:inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
 @ald-prefix: ant;
 
-
 // base 不分大小写情况
 @border-radius-base: 8px;
-@line-height-base:20px;
-@font-size-base:14px;
+@line-height-base: 20px;
+@font-size-base: 14px;
 
 // large
-@font-size-large:16px;
-@line-height-large:24px;
-@padding-top-large:6px;
-@padding-bottom-large:6px;
-@padding-left-large:12px;
-@padding-right-large:12px;
-@border-radius-large:8px;
+@font-size-large: 16px;
+@line-height-large: 24px;
+@padding-top-large: 6px;
+@padding-bottom-large: 6px;
+@padding-left-large: 12px;
+@padding-right-large: 12px;
+@border-radius-large: 6px;
 
 // middle
-@font-size-middle:14px;
-@line-height-middle:20px;
-@padding-top-middle:6px;
-@padding-bottom-middle:6px;
-@padding-left-middle:12px;
-@padding-right-middle:12px;
-@border-radius-middle:6px;
+@font-size-middle: 13px;
+@line-height-middle: 20px;
+@padding-top-middle: 6px;
+@padding-bottom-middle: 6px;
+@padding-left-middle: 12px;
+@padding-right-middle: 12px;
+@border-radius-middle: 4px;
 
 // small
-@font-size-small:12px;
-@line-height-small:16px;
-@padding-top-small:6px;
-@padding-bottom-small:6px;
-@padding-left-small:8px;
-@padding-right-small:8px;
-@border-radius-small:4px;
+@font-size-small: 12px;
+@line-height-small: 16px;
+@padding-top-small: 6px;
+@padding-bottom-small: 6px;
+@padding-left-small: 8px;
+@padding-right-small: 8px;
+@border-radius-small: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.4.7",
+  "version": "0.4.8-beta.2",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",
@@ -50,8 +50,8 @@
     ]
   },
   "dependencies": {
-    "@aloudata/icons-react": "^0.1.3",
-    "@aloudata/icons-svg": "^0.1.3",
+    "@aloudata/icons-react": "0.1.5",
+    "@aloudata/icons-svg": "0.1.5",
     "antd": "5.2.0",
     "memoize-one": "^6.0.0",
     "rc-menu": "^9.8.0",