@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/es/radio/radio.scss

@@ -8,6 +8,7 @@ $inner-width: $width-icon-medium;
 .#{$module} {
     @include box-sizing;
     @include font-size-regular;
+    position: relative;
     display: inline-flex;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
@@ -107,8 +108,8 @@ $inner-width: $width-icon-medium;
         flex-wrap: nowrap;
         border-radius: $radius-radio_cardRadioGroup;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        background: $color-radio_cardRadioGroup-bg-default;
+        border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-default;
         transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -172,7 +173,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 
@@ -241,6 +242,7 @@ $inner-width: $width-icon-medium;
     &-content {
         display: flex;
         flex-direction: column;
+        row-gap: $spacing-radio_content-rowGap;
     }
 
     &:hover {
@@ -416,6 +418,7 @@ $inner-width: $width-icon-medium;
     &-horizontal {
         display: inline-flex;
         flex-wrap: wrap;
+        vertical-align: bottom; // Fix 1573
         gap: $spacing-radio_group_horizontal-marginRight;
     }
 

package/lib/es/radio/radioFoundation.js

@@ -3,12 +3,10 @@ import warning from '../utils/warning';
 export default class RadioFoundation extends BaseFoundation {
   constructor() {
     super(...arguments);
-
     this.handleFocusVisible = event => {
       const {
         target
       } = event;
-
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setFocusVisible(true);
@@ -17,12 +15,10 @@ export default class RadioFoundation extends BaseFoundation {
         warning(true, 'Warning: [Semi Radio] The current browser does not support the focus-visible');
       }
     };
-
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
   }
-
   init() {
     const {
       children,
@@ -30,22 +26,17 @@ export default class RadioFoundation extends BaseFoundation {
       extraId,
       addonId
     } = this._adapter.getProps();
-
     if (children && !addonId) {
       this._adapter.setAddonId();
     }
-
     if (extra && !extraId) {
       this._adapter.setExtraId();
     }
   }
-
   setHover(hover) {
     this._adapter.setHover(hover);
   }
-
   setChecked(checked) {
     this._adapter.setChecked(checked);
   }
-
 }

package/lib/es/radio/radioGroupFoundation.js

@@ -3,29 +3,23 @@ export default class RadioGroupFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     const displayValue = this._getDisplayValue();
-
     this._setValue(displayValue);
   }
-
   _getDisplayValue() {
     const {
       value,
       defaultValue
     } = this.getProps();
     let displayValue;
-
     if ('value' in this.getProps()) {
       displayValue = value;
     } else if ('defaultValue' in this.getProps()) {
       displayValue = defaultValue;
     }
-
     return displayValue;
   }
-
   handleChange(evt) {
     const mode = this.getProp('mode');
     const lastValue = this.getState('value');
@@ -33,19 +27,15 @@ export default class RadioGroupFoundation extends BaseFoundation {
       checked,
       value
     } = evt.target;
-
     const isControlledComponent = this._adapter.isInProps('value');
-
     const cbValue = Object.assign(Object.assign({}, evt), {
       target: Object.assign(Object.assign({}, evt.target), {
         value
       })
     });
-
     if (mode === 'advanced' && !checked) {
       cbValue.target.value = undefined;
     }
-
     if (!isControlledComponent) {
       if (mode === 'advanced' && !checked) {
         this._setValue(undefined);
@@ -53,22 +43,16 @@ export default class RadioGroupFoundation extends BaseFoundation {
         this._setValue(value);
       }
     }
-
     if (mode === 'advanced' || lastValue !== value) {
       this._adapter.notifyChange(cbValue);
     }
-  } // call when prop.value change
-
-
+  }
+  // call when prop.value change
   handlePropValueChange(propValue) {
     this._setValue(propValue);
   }
-
   _setValue(value) {
     this._adapter.setValue(value);
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
   destroy() {}
-
 }

package/lib/es/radio/radioInnerFoundation.js

@@ -3,37 +3,28 @@ export default class RadioInnerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     const checked = this._adapter.getProp('checked');
-
     const defaultChecked = this._adapter.getProp('defaultChecked');
-
     this.setChecked(checked || defaultChecked);
   }
-
   setChecked(checked) {
     this._adapter.setNativeControlChecked(checked);
   }
-
   getChecked() {
     return this._adapter.getProp('checked');
   }
-
   handleChange(e) {
     const isControlledMode = ('checked' in this.getProps());
     const {
       checked
     } = e.target;
-
     const stopPropagation = () => {
       e.stopPropagation();
     };
-
     const preventDefault = () => {
       e.preventDefault();
     };
-
     const cbValue = {
       target: Object.assign(Object.assign({}, this.getProps()), {
         checked
@@ -41,17 +32,12 @@ export default class RadioInnerFoundation extends BaseFoundation {
       stopPropagation,
       preventDefault
     };
-
     if (isControlledMode) {
       this._adapter.notifyChange(cbValue);
     } else {
       this.setChecked(checked);
-
       this._adapter.notifyChange(cbValue);
     }
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
   destroy() {}
-
 }

package/lib/es/radio/variables.scss

@@ -32,10 +32,13 @@ $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
+$color-radio_cardRadioGroup-bg-default: transparent; // 卡片样式单选默认背景色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
 $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
+$color-radio_cardRadioGroup_disabled-bg-active: transparent; // 卡片样式单选禁用时的背景色 - 按下态
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
+$color-radio_cardRadioGroup_border-default: transparent; // 卡片样式单选默认描边颜色
 $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
 $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
 $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态
@@ -74,6 +77,7 @@ $spacing-radio_addon_buttonRadio_middle-paddingX: $spacing-base; // 中尺寸按
 $spacing-radio_addon_buttonRadio_middle-paddingY: $spacing-extra-tight; // 中尺寸按钮式单选按钮垂直内边距
 $spacing-radio_addon_buttonRadio_marginLeft: $spacing-none; // 按钮式单选按钮左侧外边距
 $spacing-radio_extra-paddingLeft: $width-radio_inner + $spacing-tight; // 单选副标题左侧内边距
+$spacing-radio_content-rowGap: 4px; // 内容行间距
 
 $spacing-radio_group_vertical-marginBottom: $spacing-base-tight; // 垂直布局单选框组底部外边距
 $spacing-radio_card_group_vertical-marginBottom: $spacing-base; // 垂直布局卡片式单选框组底部外边距

package/lib/es/rating/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-rating")
+  PREFIX: `${BASE_CLASS_PREFIX}-rating`
 };
 const strings = {
   SIZE_SET: ['default', 'small']

package/lib/es/rating/foundation.js

@@ -1,18 +1,16 @@
-/* eslint-disable no-param-reassign */
 import BaseFoundation from '../base/foundation';
 import warning from '../utils/warning';
 export default class RatingFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, RatingFoundation.defaultAdapter), adapter));
-
     this.handleStarFocusVisible = event => {
       const {
         target
       } = event;
       const {
         count
-      } = this.getProps(); // when rating 0 is focus visible
-
+      } = this.getProps();
+      // when rating 0 is focus visible
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setEmptyStarFocusVisible(true);
@@ -20,49 +18,40 @@ export default class RatingFoundation extends BaseFoundation {
       } catch (error) {
         warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible');
       }
-    }; // e: FocusEvent
-
-
+    };
+    // e: FocusEvent
     this.handleStarBlur = e => {
       const {
         emptyStarFocusVisible
       } = this.getStates();
-
       if (emptyStarFocusVisible) {
         this._adapter.setEmptyStarFocusVisible(false);
       }
     };
   }
-
   init() {
     const {
       autoFocus,
       disabled
     } = this.getProps();
-
     if (autoFocus && !disabled) {
       this._adapter.focus();
     }
   }
-
   _getScroll(w, top) {
     let ret = top ? w.pageYOffset : w.pageXOffset;
     const method = top ? 'scrollTop' : 'scrollLeft';
-
     if (typeof ret !== 'number') {
-      const d = w.document; // ie6,7,8 standard mode
-
+      const d = w.document;
+      // ie6,7,8 standard mode
       ret = d.documentElement[method];
-
       if (typeof ret !== 'number') {
         // quirks mode
         ret = d.body[method];
       }
     }
-
     return ret;
   }
-
   _getClientPosition(elem) {
     let x, y;
     const doc = elem.ownerDocument;
@@ -80,59 +69,45 @@ export default class RatingFoundation extends BaseFoundation {
       top: y
     };
   }
-
   _getOffsetLeft(el) {
     const pos = this._getClientPosition(el);
-
     const doc = el.ownerDocument;
     const w = doc.defaultView || doc.parentWindow;
     pos.left += this._getScroll(w);
     return pos.left;
   }
-
   getStarValue(index, pos) {
     const {
       allowHalf
     } = this.getProps();
-
     const direction = this._adapter.getContext('direction');
-
     const reverse = direction === 'rtl';
     let value = index + 1;
-
     if (allowHalf) {
       const starEle = this._adapter.getStarDOM(index);
-
       const leftDis = this._getOffsetLeft(starEle);
-
       const width = starEle.clientWidth;
-
       if (reverse && pos - leftDis > width / 2) {
         value -= 0.5;
       } else if (!reverse && pos - leftDis < width / 2) {
         value -= 0.5;
       }
     }
-
     return value;
   }
-
   handleHover(event, index) {
     const currValue = this.getStarValue(index, event.pageX);
     const {
       clearedValue,
       hoverValue
     } = this.getStates();
-
     if (currValue !== hoverValue && currValue !== clearedValue) {
       this._adapter.notifyHoverChange(currValue, null);
     }
   }
-
   handleMouseLeave() {
     this._adapter.notifyHoverChange(undefined, null);
   }
-
   handleClick(event, index) {
     const {
       allowClear
@@ -142,24 +117,19 @@ export default class RatingFoundation extends BaseFoundation {
     } = this.getStates();
     const newValue = this.getStarValue(index, event.pageX);
     const isReset = allowClear ? newValue === value : false;
-
     this._adapter.updateValue(isReset ? 0 : newValue);
-
     if (isReset) {
       this._adapter.notifyHoverChange(undefined, newValue);
     } else {
       this._adapter.clearValue(null);
     }
   }
-
   handleFocus(e) {
     this._adapter.notifyFocus(e);
   }
-
   handleBlur(e) {
     this._adapter.notifyBlur(e);
   }
-
   handleKeyDown(event, value) {
     const {
       key
@@ -168,20 +138,16 @@ export default class RatingFoundation extends BaseFoundation {
       count,
       allowHalf
     } = this.getProps();
-
     const direction = this._adapter.getContext('direction');
-
     const reverse = direction === 'rtl';
     const step = allowHalf ? 0.5 : 1;
     let tempValue;
     let newValue;
-
     if (key === 'ArrowRight' || key === 'ArrowUp') {
       tempValue = value + (reverse ? -step : step);
     } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
       tempValue = value + (reverse ? step : -step);
     }
-
     if (tempValue > count) {
       newValue = 0;
     } else if (tempValue < 0) {
@@ -189,19 +155,14 @@ export default class RatingFoundation extends BaseFoundation {
     } else {
       newValue = tempValue;
     }
-
     if (['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(key)) {
       this._adapter.notifyKeyDown(event);
-
       this._adapter.updateValue(newValue);
-
       this.changeFocusStar(newValue, event);
       event.preventDefault();
-
       this._adapter.notifyHoverChange(undefined, null);
     }
   }
-
   changeFocusStar(value, event) {
     const {
       count,
@@ -210,7 +171,6 @@ export default class RatingFoundation extends BaseFoundation {
     } = this.getProps();
     const index = Math.ceil(value) - 1;
     const starElement = [...event.currentTarget.childNodes].map(item => item.childNodes[0].childNodes);
-
     if (index < 0) {
       starElement[count][0].focus({
         preventScroll
@@ -221,17 +181,15 @@ export default class RatingFoundation extends BaseFoundation {
       });
     }
   }
-
 }
 export class RatingItemFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, RatingItemFoundation.defaultAdapter), adapter));
-
     this.handleFocusVisible = (event, star) => {
       const {
         target
-      } = event; // when rating 0 is focus visible
-
+      } = event;
+      // when rating 0 is focus visible
       try {
         if (target.matches(':focus-visible')) {
           if (star === 'first') {
@@ -243,15 +201,13 @@ export class RatingItemFoundation extends BaseFoundation {
       } catch (error) {
         warning(true, 'Warning: [Semi Rating] The current browser does not support the focus-visible');
       }
-    }; // e: FocusEvent
-
-
+    };
+    // e: FocusEvent
     this.handleBlur = (e, star) => {
       const {
         firstStarFocus,
         secondStarFocus
       } = this.getStates();
-
       if (star === 'first') {
         firstStarFocus && this._adapter.setFirstStarFocus(false);
       } else {
@@ -259,5 +215,4 @@ export class RatingItemFoundation extends BaseFoundation {
       }
     };
   }
-
 }

package/lib/es/scrollList/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-scrolllist"),
-  SELECTED: "".concat(BASE_CLASS_PREFIX, "-scrolllist-item-selected")
+  PREFIX: `${BASE_CLASS_PREFIX}-scrolllist`,
+  SELECTED: `${BASE_CLASS_PREFIX}-scrolllist-item-selected`
 };
 const strings = {
   MODE: ['normal', 'wheel']