@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/radio/radio.scss

@@ -29,6 +29,7 @@ $inner-width: $width-icon-medium;
         width: 100%;
         height: 100%;
         margin: 0;
+        cursor: pointer;
     }
 
     &:hover {
@@ -46,6 +47,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-hover;
+                border-color: $color-radio_checked-border-hover;
             }
         }
     }
@@ -64,6 +66,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-active;
+                border-color: $color-radio_checked-border-active;
             }
         }
     }
@@ -135,6 +138,29 @@ $inner-width: $width-icon-medium;
         &_checked {
             background: $color-radio_cardRadioGroup-bg-checked;
             border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
+
+            &:hover {
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-hover;
+
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_border-hover;
+                }
+            }
+
+            &:active {
+                background: $color-radio_cardRadioGroup-bg-checked;
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-active;
+
+                .#{$module}-inner-checked {
+                    .#{$module}-inner-display {
+                        border-color: $color-radio_cardRadioGroup_checked_border-active;
+                    }
+
+                    &:hover .#{$module}-inner-display {
+                        background: $color-radio_primary-bg-active;
+                    }
+                }
+            }
         }
 
         &_hover {
@@ -146,6 +172,21 @@ $inner-width: $width-icon-medium;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardRadioGroup  {
+            background: $color-radio_cardRadioGroup_disabled-bg-checked;
+            border: $width-radio_cardRadioGroup_checked_disabled-border solid $color-radio_cardRadioGroup_border_disabled-active;
+
+            .#{$module}-inner-checked .#{$module}-inner-display {
+                border-color: $color-radio_cardRadioGroup_checked_disabled-border-default;
+            }
+            
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_disabled-border-hover;
+                }
+            }
+        }
     }
 
     &.#{$module}-disabled:hover,
@@ -158,6 +199,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_checked-bg-disabled;
+                border-color: $color-radio_checked-border-disabled;
             }
         }
     }
@@ -293,7 +335,7 @@ $inner-width: $width-icon-medium;
             &-display {
                 opacity: 0.75;
                 background: $color-radio_disabled-bg-default;
-                border-color: $color-radio_checked-border-disabled;
+                border-color: $color-radio_default-border-disabled;
 
                 &:hover {
                     background: $color-radio_disabled-bg-hover;
@@ -308,6 +350,7 @@ $inner-width: $width-icon-medium;
 
                 &:hover {
                     background: $color-radio_checked-bg-disabled;
+                    border-color: $color-radio_checked-border-disabled;
                 }
             }
         }

package/radio/variables.scss

@@ -3,6 +3,8 @@ $color-radio_default-bg-default: transparent; // 默认态背景颜色
 $color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
 $color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
 $color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
+$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
+$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
 
 $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
 $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
@@ -14,7 +16,8 @@ $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景
 $color-radio_primary-text-default: white; // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
-$color-radio_checked-border-disabled: var(--semi-color-border); // 选中项禁用态描边颜色
+$color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
+$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
 
 $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
 $color-radio_disabled-bg-hover: transparent;
@@ -30,11 +33,17 @@ $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-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
+$color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
-$color-radio_cardRadioGroup_border-active: var(--semi-color-focus-border); // 卡片样式单选选中态描边颜色
+$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); // 卡片样式单选选中态描边颜色 - 悬浮态
+$color-radio_cardRadioGroup_border_disabled-active: var(--semi-color-primary-disabled); // 卡片样式单选选中且禁用时的描边颜色
 $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡片样式单选标题文字颜色
 $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
+$color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
+$color-radio_cardRadioGroup_checked_disabled-border-hover:  var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
 $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
 $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
 $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
@@ -44,6 +53,7 @@ $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式
 $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
 
 $width-radio_cardRadioGroup_checked-border: 1px; // 卡片式单选描边宽度
+$width-radio_cardRadioGroup_checked_disabled-border: 1px; // 卡片式单选选中且禁用时的描边宽度
 $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮态
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态

package/rating/rating.scss

@@ -56,6 +56,10 @@ $module: #{$prefix}-rating;
             font-size: $font-rating_item_default-fontSize;
         }
 
+        &-wrapper {
+            position: relative;
+        }
+
         &-first,
         &-second {
             color: $color-rating-bg-default;

package/scrollList/itemFoundation.ts

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import isElement from '../utils/isElement';
-import { slice, find, findIndex } from 'lodash-es';
+import { slice, find, findIndex } from 'lodash';
 import { append, prepend } from '../utils/dom';
 
 export interface Item {

package/select/foundation.ts

@@ -2,7 +2,7 @@
 /* eslint-disable max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import KeyCode from '../utils/keyCode';
-import { isNumber, isString, isEqual, omit } from 'lodash-es';
+import { isNumber, isString, isEqual, omit } from 'lodash';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import { BasicOptionProps } from './optionFoundation';

package/sideSheet/sideSheetFoundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { get, noop } from 'lodash-es';
+import { get, noop } from 'lodash';
 import KeyCode from '../utils/keyCode';
 import { Motion } from '../utils/type';
 

package/table/bodyFoundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { get, includes, isMap, findLastIndex, isObject } from 'lodash-es';
+import { get, includes, isMap, findLastIndex, isObject } from 'lodash';
 import { strings } from './constants';
 import { getRecordKey, genExpandedRowKey, getRecordChildren, expandBtnShouldInRow } from './utils';
 

package/table/foundation.ts

@@ -18,7 +18,7 @@ import {
     isMap,
     slice,
     isEqual
-} from 'lodash-es';
+} from 'lodash';
 import memoizeOne from 'memoize-one';
 
 import { ArrayElement } from '../utils/type';

package/table/utils.ts

@@ -15,7 +15,7 @@ import {
     includes,
     toString,
     isFunction
-} from 'lodash-es';
+} from 'lodash';
 import { strings, numbers } from './constants';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import Logger from '../utils/Logger';

package/tabs/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { noop } from 'lodash-es';
+import { noop } from 'lodash';
 
 export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     collectPane: () => void;

package/tagInput/foundation.ts

@@ -5,7 +5,7 @@ import {
     isNumber,
     isFunction,
     isUndefined
-} from 'lodash-es';
+} from 'lodash';
 import getSplitedArray from './utils/getSplitedArray';
 
 export type TagInputChangeEvent = any;

package/tagInput/utils/getSplitedArray.ts

@@ -1,4 +1,4 @@
-import { isString, isArray, isNumber } from 'lodash-es';
+import { isString, isArray, isNumber } from 'lodash';
 
 /**
  * Get the splited array.

package/timePicker/foundation.ts

@@ -10,7 +10,7 @@ import {
     transformToArray,
     isTimeFormatLike
 } from './utils';
-import { split } from 'lodash-es';
+import { split } from 'lodash';
 import { isValid, format } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from '../utils/date-fns-extra';
 import isNullOrUndefined from '../utils/isNullOrUndefined';

package/timePicker/utils/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { format, parse } from 'date-fns';
-import { toNumber } from 'lodash-es';
+import { toNumber } from 'lodash';
 import { strings } from '../constants';
 import isNullOrUndefined from '../../utils/isNullOrUndefined';
 import { zhCN as defaultLocale } from 'date-fns/locale';

package/toast/toastFoundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isNumber, noop } from 'lodash-es';
+import { isNumber, noop } from 'lodash';
 import { Motion } from '../utils/type';
 
 

package/tooltip/foundation.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable prefer-destructuring, max-lines-per-function, one-var, max-len, @typescript-eslint/restrict-plus-operands */
 /* argus-disable unPkgSensitiveInfo */
-import { get, isEmpty } from 'lodash-es';
+import { get, isEmpty } from 'lodash';
 import { DOMRectLikeType } from '../utils/dom';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { ArrayElement } from '../utils/type';

package/transfer/foundation.ts

@@ -1,4 +1,4 @@
-import { omit } from 'lodash-es';
+import { omit } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BasicValue as BasicTreeValue } from '../tree/foundation';
 import { strings } from './constants';

package/transfer/transferUtlls.ts

@@ -1,4 +1,4 @@
-import { omit } from 'lodash-es';
+import { omit } from 'lodash';
 import { strings } from './constants';
 
 export function _generateGroupedData(dataSource: any[]): any[] {

package/tree/foundation.ts

@@ -3,7 +3,7 @@
  * https://github.com/react-component/tree
  */
 
-import { isUndefined, difference, pick, cloneDeep, get } from 'lodash-es';
+import { isUndefined, difference, pick, cloneDeep, get } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     flattenTreeData,

package/tree/treeUtil.ts

@@ -3,7 +3,7 @@
  * https://github.com/react-component/tree/blob/master/src/util.tsx
  */
 
-import { difference, uniq, max, isObject, isNull, isUndefined, isEmpty, pick, get } from 'lodash-es';
+import { difference, uniq, max, isObject, isNull, isUndefined, isEmpty, pick, get } from 'lodash';
 
 export interface KeyEntities {
     [x: string]: any;
@@ -441,7 +441,7 @@ export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnl
             res.push(key);
         });
     } else {
-        res = Array.from(keyList).filter((key: string) => keyEntities[key] && !isValid(keyEntities[key].children)) as string[];
+        res = (Array.from(keyList) as string[]).filter(key => keyEntities[key] && !isValid(keyEntities[key].children));
     }
     return res;
 }

package/treeSelect/foundation.ts

@@ -1,4 +1,4 @@
-import { isNumber, isFunction, get, isUndefined, isString, cloneDeep, isEmpty, difference } from 'lodash-es';
+import { isNumber, isFunction, get, isUndefined, isString, cloneDeep, isEmpty, difference } from 'lodash';
 import { strings } from '../treeSelect/constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {

package/tsconfig.json

@@ -18,7 +18,8 @@
         "strictNullChecks": false,
         "esModuleInterop": true,
         "skipLibCheck": true,
-        "declaration": true
+        "declaration": true,
+        "strict": true
     },
     "include": ["**/*.ts"],
     "exclude": ["node_modules"]

package/utils/classnames.ts

@@ -1,5 +1,5 @@
 import classnames, { Argument } from 'classnames';
-import { split, filter, map } from 'lodash-es';
+import { split, filter, map } from 'lodash';
 
 function addClass(rawCls: Argument, ...srcClss: Argument[]) {
     const clss = split(rawCls as string, /\s+/);

package/utils/getHighlight.ts

@@ -1,5 +1,5 @@
 // Modified version based on 'highlight-words-core'
-import { isString } from 'lodash-es';
+import { isString } from 'lodash';
 
 const escapeRegExpFn = (string: string) => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
 interface ChunkQuery {

package/utils/getMotionObjFromProps.ts

@@ -1,5 +1,5 @@
 import { MotionObject } from "./type";
-import { cloneDeep, isObject } from 'lodash-es';
+import { cloneDeep, isObject } from 'lodash';
 import warning from './warning';
 
 export interface MergeMotionProps {

package/utils/log.ts

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from 'lodash';
 
 const log = (text: any, ...rest: any[]) => {
     if (get(process, 'env.NODE_ENV') === 'development') {

package/utils/object.ts

@@ -10,7 +10,7 @@ import {
     isNumber,
     isObject,
     values
-} from 'lodash-es';
+} from 'lodash';
 
 type Many<T> = T | ReadonlyArray<T>;
 type PropertyName = string | number | symbol;

package/utils/set.ts

@@ -1,4 +1,4 @@
-import { isSet } from 'lodash-es';
+import { isSet } from 'lodash';
 
 export function copySet<T = unknown>(setA: Iterable<T>) {
     return new Set(setA);

package/babel.config.js

@@ -1,33 +0,0 @@
-module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            {
-                modules: false,
-                targets: {
-                    browsers: [
-                        "> 0.5%",
-                        "last 2 versions",
-                        "Firefox ESR",
-                        "not dead",
-                        "not IE 11"
-                    ]
-                }
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-transform-runtime',
-            {
-                corejs: 3
-            },
-        ],
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
-        ],
-    ]
-};

package/icons/icons.scss

@@ -1,39 +0,0 @@
-@import './variables.scss';
-@import "../keyframes/rotate.scss";
-
-$module: #{$prefix}-icon;
-
-.#{$module} {
-    display: inline-block;
-    color: inherit;
-    font-style: normal;
-    line-height: 0;
-    text-align: center;
-    text-transform: none;
-    text-rendering: optimizeLegibility;
-    fill: currentColor;
-
-    &-extra-small {
-        font-size: $width-icon_extra_small;
-    }
-
-    &-small {
-        font-size: $width-icon_small;
-    }
-
-    &-default {
-        font-size: $width-icon_medium;
-    }
-
-    &-large {
-        font-size: $width-icon_large;
-    }
-
-    &-extra-large {
-        font-size: $width-icon_extra_large;
-    }
-}
-
-.#{$module}-spin {
-    animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-animation-rotate;
-}

package/icons/variables.scss

@@ -1,7 +0,0 @@
-
-$width-icon_extra_small: $width-icon-extra-small; // 图标尺寸 - 超小
-$width-icon_small: $width-icon-small; // 图标尺寸 - 小
-$width-icon_medium: $width-icon-medium; // 图标尺寸 - 中
-$width-icon_large: $width-icon-large; // 图标尺寸 - 大
-$width-icon_extra_large: $width-icon-extra-large; // 图标尺寸 - 超大
-$motion-icon_spin-animationDuration: .6s;

package/lib/es/icons/icons.css

@@ -1,40 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-@keyframes semi-animation-rotate {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.semi-icon {
-  display: inline-block;
-  color: inherit;
-  font-style: normal;
-  line-height: 0;
-  text-align: center;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-  fill: currentColor;
-}
-.semi-icon-extra-small {
-  font-size: 8px;
-}
-.semi-icon-small {
-  font-size: 12px;
-}
-.semi-icon-default {
-  font-size: 16px;
-}
-.semi-icon-large {
-  font-size: 20px;
-}
-.semi-icon-extra-large {
-  font-size: 24px;
-}
-
-.semi-icon-spin {
-  animation: 0.6s linear infinite semi-animation-rotate;
-}

package/lib/es/icons/icons.scss

@@ -1,39 +0,0 @@
-@import './variables.scss';
-@import "../keyframes/rotate.scss";
-
-$module: #{$prefix}-icon;
-
-.#{$module} {
-    display: inline-block;
-    color: inherit;
-    font-style: normal;
-    line-height: 0;
-    text-align: center;
-    text-transform: none;
-    text-rendering: optimizeLegibility;
-    fill: currentColor;
-
-    &-extra-small {
-        font-size: $width-icon_extra_small;
-    }
-
-    &-small {
-        font-size: $width-icon_small;
-    }
-
-    &-default {
-        font-size: $width-icon_medium;
-    }
-
-    &-large {
-        font-size: $width-icon_large;
-    }
-
-    &-extra-large {
-        font-size: $width-icon_extra_large;
-    }
-}
-
-.#{$module}-spin {
-    animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-animation-rotate;
-}

package/lib/es/icons/variables.scss

@@ -1,7 +0,0 @@
-
-$width-icon_extra_small: $width-icon-extra-small; // 图标尺寸 - 超小
-$width-icon_small: $width-icon-small; // 图标尺寸 - 小
-$width-icon_medium: $width-icon-medium; // 图标尺寸 - 中
-$width-icon_large: $width-icon-large; // 图标尺寸 - 大
-$width-icon_extra_large: $width-icon-extra-large; // 图标尺寸 - 超大
-$motion-icon_spin-animationDuration: .6s;