@douyinfe/semi-foundation 2.1.3 → 2.2.0-beta.0

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/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
+@import './option.scss';
 @import './variables.scss';
 @import './mixin.scss';
-@import './option.scss';
 
 $module: #{$prefix}-select;
 $single: #{$module}-single;

package/sideSheet/variables.scss

@@ -1,5 +1,5 @@
 // Color
-$color-sideSheet_mask-bg: var(--semi-overlay-bg); // 侧边栏打开后蒙层颜色
+$color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
 

package/table/table.scss

@@ -104,7 +104,7 @@ $module: #{$prefix}-table;
 
                     &-left,
                     &-right {
-                        z-index: 1;
+                        z-index: $z-table_fixed_column;
                         position: sticky;
                         background-color: $color-table-bg-default;
 
@@ -247,7 +247,7 @@ $module: #{$prefix}-table;
 
                 &-left,
                 &-right {
-                    z-index: 1;
+                    z-index: $z-table_fixed_column;;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }

package/table/variables.scss

@@ -82,3 +82,6 @@ $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动
 $border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
 $border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
+
+$z-table-fixed: 101!default; // fixed列的zIndex值
+$z-table_fixed_column: $z-table-fixed; // fixed列的zIndex值

package/timeline/timeline.scss

@@ -120,7 +120,11 @@ $module: #{$prefix}-timeline;
             &-head-custom {
                 left: $spacing-timeline_item_head_custom-left;
             }
-
+            &-head{
+                &.#{$module}-item-head-custom{
+                    margin-left: 0;
+                }
+            }
             &-head {
                 margin-left: $spacing-timeline_item_head-marginLeft;
             }

package/tree/treeUtil.ts

@@ -427,7 +427,7 @@ export function normalizedArr(val: any) {
 }
 
 export function normalizeKeyList(keyList: any, keyEntities: KeyEntities, leafOnly = false) {
-    let res: string[] = [];
+    const res: string[] = [];
     const keyListSet = new Set(keyList);
     if (!leafOnly) {
         keyList.forEach((key: string) => {
@@ -441,7 +441,11 @@ 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[];
+        keyList.forEach(key => {
+            if (keyEntities[key] && !isValid(keyEntities[key].children)) {
+                res.push(key);
+            }
+        });
     }
     return res;
 }

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/upload/foundation.ts

@@ -320,6 +320,87 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         });
     }
 
+    // 插入多个文件到指定位置
+    // Insert files to the specified location
+    insertFileToList(files: Array<CustomFile>, index:number): void {
+        const { limit, transformFile, accept, uploadTrigger } = this.getProps();
+        const { fileList } = this.getStates();
+
+        const unAcceptFileList = [];
+
+        // 当次选中的文件
+        // current selected file
+        let currentFileList = Array.from(files);
+        if (typeof accept !== 'undefined') {
+            currentFileList = currentFileList.filter(item => {
+                const isValid = this.checkFileFormat(accept, item);
+                if (!isValid) {
+                    unAcceptFileList.push(item);
+                }
+                return isValid;
+            });
+            if (unAcceptFileList.length !== 0) {
+                this._adapter.notifyAcceptInvalid(unAcceptFileList);
+            }
+            if (currentFileList.length === 0) {
+                return;
+            }
+        }
+        currentFileList = currentFileList.map(file => {
+            if (!file.uid) {
+                file.uid = getUuidv4();
+            }
+
+            if (this.checkFileSize(file)) {
+                file._sizeInvalid = true;
+                file.status = FILE_STATUS_VALID_FAIL;
+                this._adapter.notifySizeError(file, fileList);
+            }
+
+            if (transformFile) {
+                file = transformFile(file);
+            }
+            return file;
+        });
+        const total = fileList.length + currentFileList.length;
+        if (typeof limit !== 'undefined') {
+            // 判断是否超出限制
+            // Determine whether the limit is exceeded
+            if (total > limit) {
+                if (limit === 1) {
+                    // 使用最后面的文件对当前文件进行替换
+                    // Use the last file to replace the current file
+                    currentFileList = currentFileList.slice(-1);
+                    this._adapter.notifyFileSelect(currentFileList);
+                    this._adapter.resetInput();
+                    this.replaceFileList(currentFileList);
+                    return;
+                }
+                // 如果超出了限制，则计算还能添加几个文件，将剩余的文件继续上传
+                // If the limit is exceeded, several files can be added to the calculation, and the remaining files will continue to be uploaded
+                const restNum = limit - fileList.length;
+                currentFileList = currentFileList.slice(0, restNum);
+                this._adapter.notifyExceed(currentFileList);
+            }
+        }
+
+        const fileItemList = currentFileList.map(file => this.buildFileItem(file, uploadTrigger));
+        const newFileList = fileList.slice();
+        if (typeof index !== 'undefined') {
+            newFileList.splice(index, 0, ...fileItemList);
+        } else {
+            newFileList.push(...fileItemList);
+        }
+
+        this._adapter.notifyFileSelect(currentFileList);
+        this._adapter.notifyChange({ fileList: newFileList, currentFile: null });
+        this._adapter.updateFileList(newFileList, () => {
+            if (uploadTrigger === TRIGGER_AUTO) {
+                this.startUpload(fileItemList);
+            }
+        });
+    }
+
     manualUpload(): void {
         // find the list of files that have not been uploaded
         const waitToUploadFileList = this.getState('fileList').filter((item: BaseFileItem) => item.status === FILE_STATUS_WAIT_UPLOAD);

package/upload/rtl.scss

@@ -22,8 +22,6 @@ $module: #{$prefix}-upload;
         }
 
         &-file-card {
-            margin-right: 0;
-            margin-left: $spacing-upload_picture_file_card-marginRight;
 
             &-info {
 
@@ -53,8 +51,6 @@ $module: #{$prefix}-upload;
         &-picture {
 
             &-file-card {
-                margin-right: 0;
-                margin-left: $spacing-upload_picture_file_card-marginRight;
 
                 &-close {
                     right: auto;

package/upload/upload.scss

@@ -99,6 +99,8 @@ $module: #{$prefix}-upload;
             display: flex;
             flex-wrap: wrap;
             flex-shrink: 0;
+            gap: $spacing-upload_picture_file_card-gap;
+            margin-bottom: $spacing-upload_picture_file_card-marginBottom;
 
             p {
                 @include ver-center;
@@ -130,8 +132,6 @@ $module: #{$prefix}-upload;
         justify-content: space-between;
         height: $height-upload_file_card;
         width: $width-upload_file_card;
-        margin-right: $spacing-tight;
-        margin-bottom: $spacing-tight;
         background-color: $color-upload_card-bg;
         cursor: pointer;
 
@@ -292,21 +292,21 @@ $module: #{$prefix}-upload;
             flex-direction: column;
 
             .#{$module}-prompt {
-                order: 2;
+                order: 1;
             }
 
             .#{$module}-add {
-                order: 1;
+                order: 0;
             }
         }
 
         &[x-prompt-pos="right"] {
             .#{$module}-prompt {
-                order: 2;
+                order: 1;
             }
 
             .#{$module}-add {
-                order: 1;
+                order: 0;
             }
         }
 
@@ -353,11 +353,14 @@ $module: #{$prefix}-upload;
         }
 
         &-file-card {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             height: $height-upload_file_pic_card;
             width: $width-upload_file_pic_card;
+            border-radius: $radius-upload_picture_file_card_img;
             position: relative;
-            margin-right: $spacing-upload_picture_file_card-marginRight;
-            margin-bottom: $spacing-upload_picture_file_card-marginBottom;
+            overflow: hidden;
 
             img {
                 height: $width-upload_picture_file_card_img;
@@ -429,6 +432,22 @@ $module: #{$prefix}-upload;
                 color: $color-upload_replace-text;
                 transform: translate3D(-50%, -50%, 0);
             }
+            &-pic-info {
+                display: inline-flex;
+                box-sizing: border-box;
+                justify-content: space-between;
+                align-items: center;
+                position: absolute;
+                width: 100%;
+                height: 24px;
+                padding: 0 10px;
+                bottom: 0;
+                left: 0;
+                color: $color-upload_picture_file_card_pic_info-text;
+                font-size: $font-upload_picture_file_card_pic_info-fontSize;
+                font-weight: $font-upload_picture_file_card_pic_info-fontWeight;
+                background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
+            }
 
             &-icon-loading,
             &-icon-error {
@@ -445,6 +464,10 @@ $module: #{$prefix}-upload;
             &-show-pointer {
                 cursor: pointer;
             }
+
+            &-error {
+                outline: 1px solid $color-upload_picture_file_card_error-border;
+            }
         }
     }
 

package/upload/variables.scss

@@ -22,8 +22,10 @@ $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
 $color-upload_pic_add-bg-hover: var(--semi-color-fill-1); // 图片墙上传背景色 - 悬浮
 $color-upload_pic_add-bg: var(--semi-color-fill-0); // 图片墙上传背景色 - 默认
-$color-upload_pic_remove-bg: var(--semi-overlay-bg); // 图片墙上传移除图标颜色
+$color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
+$color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
+$color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息（序号）文字颜色
 $color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
 $color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
 $color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色
@@ -56,7 +58,7 @@ $spacing-upload_file_card_info_progress-marginTop: 4px; // 上传文件卡片进
 $spacing-upload_file_card_close-marginLeft: $spacing-tight; // 上传文件卡片删除按钮左侧外边距
 $spacing-upload_file_card_close-marginRight: $spacing-tight; // 上传文件卡片删除按钮右侧外边距
 $spacing-upload_file_card_icon-marginRight: $spacing-super-tight; // 上传文件卡片图标右侧外边距
-$spacing-upload_picture_file_card-marginRight: $spacing-tight; // 图片墙上传卡片右侧外边距
+$spacing-upload_picture_file_card-gap: $spacing-tight; // 图片墙卡片之间边距
 $spacing-upload_picture_file_card-marginBottom: $spacing-tight; // 图片墙上传卡片底部外边距
 $spacing-upload_picture_file_card_close-top: 8px; // 图片墙上传卡片删除按钮顶部位置
 $spacing-upload_picture_file_card_close-right: 8px; // 图片墙上传卡片删除右侧位置
@@ -79,3 +81,5 @@ $radius-upload_drag_area: var(--semi-border-radius-small); // 可拖拽上传拖
 $font-upload_file_card_info_name-fontWeight: $font-weight-bold; // 上传文件卡片文件名字重
 $font-upload_file_card_info_size-fontWeight: $font-weight-regular; // 上传文件卡片文件尺寸字重
 $font-upload_drag_area_tips-fontWeight: 600; // 可拖拽上传提示文本字重
+$font-upload_picture_file_card_pic_info-fontSize: 12px; // 图片墙图片信息字体大小
+$font-upload_picture_file_card_pic_info-fontWeight: 600; // 图片墙图片信息文本字重