@aloudata/aloudata-design 0.4.8-beta.11 → 0.4.8-beta.13

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

@@ -70,8 +70,10 @@ export default function RadioGroup(props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: getWrapperClass()
-  }, children, radioGroupStyle === 'filled' && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
-    className: "ald-radio-filled-slider",
+  }, children, (radioGroupStyle === 'filled' || radioGroupStyle === 'filter') && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-radio-filled-slider ', {
+      'ald-radio-filled-slider-filter': radioGroupStyle === 'filter'
+    }),
     ref: sliderRef
   }) : null));
 }

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

@@ -37,6 +37,8 @@ export default function Radio(props) {
         otherClass = 'ald-radio-button-wrapper-filled';
       } else if (groupContext.radioGroupStyle === 'border') {
         otherClass = 'ald-radio-button-wrapper-border';
+      } else if (groupContext.radioGroupStyle === 'filter') {
+        otherClass = 'ald-radio-button-wrapper-filter';
       } else {
         otherClass = 'ald-radio-button-wrapper-border-primary';
       }
@@ -45,6 +47,8 @@ export default function Radio(props) {
         otherClass = 'ald-radio-icon-button-wrapper-filled';
       } else if (groupContext.radioGroupStyle === 'border') {
         otherClass = 'ald-radio-icon-button-wrapper-border';
+      } else if (groupContext.radioGroupStyle === 'filter') {
+        otherClass = 'ald-radio-icon-button-wrapper-filter';
       } else {
         otherClass = 'ald-radio-icon-button-wrapper-border-primary';
       }

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary';
+export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary' | 'filter';
 export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
 export declare type TRadioType = 'radio' | 'button' | 'iconButton';
 export interface IRadioGroupProps {

package/dist/Radio/style/index.less

@@ -12,7 +12,7 @@
 @radio-button-padding-middle: 12px;
 
 // Radio组件基础样式
-[class^="ald-radio"] {
+[class^='ald-radio'] {
   box-sizing: border-box;
 }
 
@@ -120,7 +120,9 @@
 .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-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;
 
@@ -167,6 +169,11 @@
   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 {
@@ -241,34 +248,37 @@
   .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;
+    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.5s ease;
+    transition: background 0.3s ease;
 
     .ald-radio-desc {
       position: relative;
       color: @ND0;
-      transition: text-shadow 0.5s ease;
+      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;
@@ -300,21 +310,41 @@
     }
 
     .ald-radio-desc {
-      font-weight: 400;
+      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,
   .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filled {
     position: relative;
 
     .ald-radio-desc {
       position: relative;
-      font-weight: 400;
+      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;
+    background-color: @B90;
+
+    .ald-radio-desc {
+      position: relative;
+      font-weight: 600;
       z-index: 2;
       color: @NL0;
     }
   }
+
   // 各种大小
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
@@ -325,8 +355,15 @@
       }
     }
 
-    .ald-radio-icon-button-wrapper-filled {
+    .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-button-wrapper-border,
@@ -335,8 +372,9 @@
     }
 
     .ald-radio-icon-button-wrapper-border,
-    .ald-radio-icon-button-wrapper-border-primary {
-      padding: 0 @radio-icon-button-padding-middle - 1;
+    .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;
@@ -358,8 +396,15 @@
       }
     }
 
-    .ald-radio-icon-button-wrapper-filled {
+    .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-button-wrapper-border,
@@ -369,7 +414,7 @@
 
     .ald-radio-icon-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border-primary {
-      padding: 0 @radio-icon-button-padding-small - 1;
+      padding: 0 @radio-icon-button-padding-small;
 
       &.ald-radio-label .ald-radio-desc {
         font-size: 14px;
@@ -396,6 +441,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;
     }
@@ -410,8 +460,15 @@
       }
     }
 
-    .ald-radio-icon-button-wrapper-filled {
+    .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-button-wrapper-border,
@@ -448,6 +505,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/Tabs/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "headerBackgroundColor", "tabPosition", "padding"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding"];
 
 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); }
 
@@ -26,13 +26,14 @@ export default function Tabs(props) {
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
       monospace = props.monospace,
-      headerBackgroundColor = props.headerBackgroundColor,
       _props$tabPosition = props.tabPosition,
       tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
       _props$padding = props.padding,
       padding = _props$padding === void 0 ? false : _props$padding,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var headerBackgroundColor = props.headerBackgroundColor;
+
   var tabsProps = _objectSpread({}, otherProps);
 
   if (size === 'large') {
@@ -55,6 +56,14 @@ export default function Tabs(props) {
     return 0;
   }, [padding, tabPosition]);
 
+  var getTabBarGutter = function getTabBarGutter() {
+    if (tabPosition === 'top' && !_monospace) {
+      return 24;
+    }
+
+    return 0;
+  };
+
   return /*#__PURE__*/React.createElement(AntdTabs, _extends({
     moreIcon: /*#__PURE__*/React.createElement("div", {
       className: "ald-tabs-more-icon"
@@ -66,7 +75,7 @@ export default function Tabs(props) {
       '--tabs-padding': "".concat(_padding, "px")
     }),
     tabPosition: tabPosition,
-    tabBarGutter: _monospace ? 0 : 24,
+    tabBarGutter: getTabBarGutter(),
     popupClassName: classNames(popupClassName, 'ald-tabs-dropdown'),
     className: classNames('ald-tabs', className, {
       'ald-adapt-height': adaptHeight,

package/dist/Tabs/style/index.less

@@ -137,8 +137,12 @@
   }
 
   &.ant-tabs-left {
-    .ant-tabs-nav-list{
-     padding-right: 24px;
+    .ant-tabs-nav-list {
+      padding-right: 24px;
+    }
+
+    .ant-tabs-tab {
+      padding: 8px 0;
     }
   }
 }
@@ -194,12 +198,12 @@
 
 .ald-tabs-padding {
   .ant-tabs-nav {
-    .ant-tabs-nav-wrap{
+    .ant-tabs-nav-wrap {
       margin: 0 var(--tabs-padding);
     }
   }
 
-  .ant-tabs-content-holder{
+  .ant-tabs-content-holder {
     padding: 0 var(--tabs-padding) var(--tabs-padding);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.4.8-beta.11",
+  "version": "0.4.8-beta.13",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",