@douyinfe/semi-foundation 2.0.9-alpha.2 → 2.1.0-alpha.2

package/lib/es/tabs/tabs.scss

@@ -6,26 +6,26 @@ $module: #{$prefix}-tabs;
 .#{$module} {
     box-sizing: border-box;
     position: relative;
-
+    
     &-left {
         display: flex;
         flex-direction: row;
     }
-
+    
     &-bar {
         position: relative;
         white-space: nowrap;
         outline: none;
-
+        
         &-left {
             display: flex;
             flex-direction: column;
         }
-
+        
         &-extra {
             padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
         }
-
+        
         .#{$module}-tab {
             @include font-size-regular;
             cursor: pointer;
@@ -33,76 +33,92 @@ $module: #{$prefix}-tabs;
             position: relative;
             display: block;
             float: left;
-
+            
             font-weight: $font-tabs_tab-fontWeight;
             color: $color-tabs_tab_line_default-text-default;
-
+            
             user-select: none;
-
+            
             .#{$prefix}-icon {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
             }
-
+            
+            .#{$prefix}-icon-close {
+                margin-right: 0;
+                font-size: 14px;
+                color: var(--semi-color-text-2);
+                margin-left: 10px;
+                cursor: pointer;
+            }
+            
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
-
+            
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab-icon-active;
                 }
             }
         }
-
+        
         .#{$module}-tab-active {
-
+            
             &,
             &:hover {
-                color: $color-tabs_tab_line_selected-text-default;
                 cursor: default;
                 // border-bottom: 2px solid $color-tabs_tab_line_indicator_selected-icon-default;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab_selected-icon-default;
                 }
+                
+                .#{$prefix}-icon-close {
+                    color: var(--semi-color-text-2);
+                }
+            }
+            
+            .#{$prefix}-icon-close:hover {
+                color: var(--semi-color-text-1);
             }
         }
-
+        
         .#{$module}-tab-disabled {
             cursor: not-allowed;
             color: $color-tabs_tab_line_disabled-text-default;
-
+            
             &:hover {
                 color: $color-tabs_tab_line_disabled-text-hover;
                 border-bottom: none;
             }
         }
     }
-
+    
     &-bar-collapse {
         &,
         .#{$module}-bar-overflow-list {
             display: flex;
             align-items: center;
         }
-
+        
         .#{$prefix}-overflow-list {
             flex: 1;
+            
             .#{$prefix}-overflow-list-scroll-wrapper {
                 -ms-overflow-style: none; /* Internet Explorer 10+ */
                 scrollbar-width: none; /* Firefox */
-
+                
                 &::-webkit-scrollbar {
                     display: none; /* Safari and Chrome */
                     width: 0;
@@ -110,98 +126,100 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
         }
-
+        
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
         }
     }
-
+    
     &-bar-dropdown {
         max-height: $height-tabs_overflow_list;
         overflow-y: auto;
     }
-
+    
     &-bar:after {
         content: "";
         height: 0;
         display: block;
         clear: both;
     }
-
+    
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                &:nth-of-type(1){
+                
+                &:nth-of-type(1) {
                     padding-left: 0;
                 }
+                
                 border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
+                
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
-
+                
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_line_tab-marginRight;
                 }
-
+                
                 &-small {
                     padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
                 }
-
+                
                 &-medium {
                     padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &,
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
                 }
             }
         }
-
+        
         &.#{$module}-bar-left {
             border-right: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-
+                
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
-
+                
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
                     background-color: $color-tabs_tab_line_vertical-bg-active;
                 }
-
+                
                 &-small {
                     padding: $spacing-tabs_bar_line_tab_left_small-padding;
                 }
-
+                
                 &-medium {
                     padding: $spacing-tabs_bar_line_tab_left_medium-padding;
                 }
             }
-
+            
             .#{$module}-tab-active {
                 background-color: $color-tabs_tab_line_vertical_selected-bg-default;
-
+                
                 &,
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
@@ -209,47 +227,49 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         // type='bar' extar need specific
         .#{$module}-bar-extra {
             height: $height-tabs_bar_extra_large;
             line-height: $font-tabs_bar_extra_large-lineHeight;
         }
+        
         .#{$module}-bar-line-extra-small {
             height: $height-tabs_bar_extra_small;
             line-height: $font-tabs_bar_extra_small-lineHeight;
         }
     }
-
+    
     &-bar-card {
         &.#{$module}-bar-top {
-
+            
             &::before {
                 position: absolute;
                 right: 0;
                 left: 0;
                 bottom: 0;
                 border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_default-border-default;
-                content: '';
+                content: "";
             }
+            
             // border-bottom: $border-thickness-control solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 border: $width-tabs_bar_card-border solid transparent;
                 border-bottom: none;
                 border-radius: $radius-tabs_tab_card;
-
+                
                 &:hover {
                     border-bottom: none;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_card_tab-marginRight;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &,
                 &:hover {
                     padding: $spacing-tabs_bar_card_tab_active-paddingTop $spacing-tabs_bar_card_tab_active-paddingRight $spacing-tabs_bar_card_tab_active-paddingBottom $spacing-tabs_bar_card_tab_active-paddingLeft;
@@ -260,26 +280,26 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         &.#{$module}-bar-left {
             border-right: $width-tabs_bar_card-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 border: $width-tabs_bar_card-border solid transparent;
                 border-right: none;
                 border-radius: $radius-tabs_tab_card_left;
-
+                
                 &:hover {
                     border-right: none;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-bottom: $spacing-tabs_bar_card_tab_left-marginBottom;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &:after {
                     content: " ";
                     width: 1px;
@@ -289,7 +309,7 @@ $module: #{$prefix}-tabs;
                     bottom: 0;
                     background: $color-tabs_tab_card_selected-bg-default;
                 }
-
+                
                 &,
                 &:hover {
                     padding: $spacing-tabs_bar_card_tab_left_active-paddingY $spacing-tabs_bar_card_tab_left_active-paddingX;
@@ -300,59 +320,59 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
-
+            
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
-
+            
             &:active {
                 background: $color-tabs_tab_card-bg-active;
             }
         }
     }
-
+    
     &-bar-button {
         border: none;
-
+        
         &.#{$module}-bar-left {
             .#{$module}-tab {
-
+                
                 &:not(:last-of-type) {
                     margin-bottom: $spacing-tabs_bar_button_tab_left-marginBottom;
                 }
             }
         }
-
+        
         &.#{$module}-bar-top {
             .#{$module}-tab {
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_button_tab-marginRight;
                 }
             }
         }
-
+        
         .#{$module}-tab {
             padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
-
+            
             &:hover {
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
-
+            
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
             }
         }
-
+        
         .#{$module}-tab-active {
-
+            
             &,
             &:hover {
                 color: $color-tabs_tab_button_selected-text-default;
@@ -361,19 +381,19 @@ $module: #{$prefix}-tabs;
             }
         }
     }
-
+    
     &-content {
         width: 100%;
         padding: $spacing-tabs_content-paddingY $spacing-tabs_content-paddingX;
         // overflow: hidden;
         // display: flex;
     }
-
+    
     &-content-left {
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-
+    
     &-pane {
         width: 100%;
         overflow: hidden;
@@ -381,7 +401,7 @@ $module: #{$prefix}-tabs;
         // flex-shrink: 0;
         // position: absolute;
     }
-
+    
     &-pane-inactive,
     &-content-no-animated &-pane-inactive {
         display: none;

package/lib/es/tagInput/foundation.d.ts

@@ -14,6 +14,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     notifyTagChange: (v: string[]) => void;
     notifyTagAdd: (v: string[]) => void;
     notifyTagRemove: (v: string, idx: number) => void;
+    notifyKeyDown: (e: TagInputMouseEvent) => void;
 }
 declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     constructor(adapter: TagInputAdapter);

package/lib/es/tagInput/foundation.js

@@ -93,6 +93,8 @@ class TagInputFoundation extends BaseFoundation {
 
         this._onRemove(newTagList, removedTag, length - 1);
       }
+
+      this._adapter.notifyKeyDown(e);
     };
   }
 

package/lib/es/timePicker/ComboxFoundation.js

@@ -31,8 +31,7 @@ export const formatOption = (option, disabledOptions) => {
   };
 };
 
-function generateOptions(length, disabledOptions, hideDisabledOptions) {
-  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+function generateOptions(length, disabledOptions, hideDisabledOptions, step = 1) {
   const arr = [];
 
   for (let value = 0; value < length; value += step) {

package/lib/es/timePicker/foundation.js

@@ -37,12 +37,11 @@ class TimePickerFoundation extends BaseFoundation {
     return position || rtlDirection || strings.DEFAULT_POSITION[type];
   }
 
-  isDisabledHMS(_ref) {
-    let {
-      hours,
-      minutes,
-      seconds
-    } = _ref;
+  isDisabledHMS({
+    hours,
+    minutes,
+    seconds
+  }) {
     const {
       disabledHours,
       disabledMinutes,
@@ -139,8 +138,7 @@ class TimePickerFoundation extends BaseFoundation {
     return _format;
   }
 
-  handlePanelChange(result) {
-    let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  handlePanelChange(result, index = 0) {
     // console.log(result, index);
     const formatToken = this.getValidFormat();
     const dateFnsLocale = this.getProp('dateFnsLocale');
@@ -172,8 +170,7 @@ class TimePickerFoundation extends BaseFoundation {
     }
   }
 
-  refreshProps() {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  refreshProps(props = {}) {
     const {
       value,
       timeZone,
@@ -297,15 +294,12 @@ class TimePickerFoundation extends BaseFoundation {
     return undefined;
   }
 
-  validateStr() {
-    let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  validateStr(inputValue = '') {
     const dates = this.parseInput(inputValue);
     return this.validateDates(dates);
   }
 
-  validateDates() {
-    let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
+  validateDates(dates = []) {
     let invalid = _someInstanceProperty(dates).call(dates, d => isNaN(Number(d)));
 
     if (!invalid) {
@@ -375,8 +369,7 @@ class TimePickerFoundation extends BaseFoundation {
     return [];
   }
 
-  parseValue() {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  parseValue(value = []) {
     const formatToken = this.getValidFormat();
     const dateFnsLocale = this.getProp('dateFnsLocale');
     let _value = value;
@@ -419,9 +412,7 @@ class TimePickerFoundation extends BaseFoundation {
     this._adapter.notifyChange(_value, str);
   }
 
-  _hasChanged() {
-    let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let oldDates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  _hasChanged(dates = [], oldDates = []) {
     const formatToken = this.getValidFormat();
     const dateFnsLocale = this.getProp('dateFnsLocale');
     return dates.length !== oldDates.length || _someInstanceProperty(dates).call(dates, (date, index) => {

package/lib/es/timePicker/utils/index.js

@@ -15,10 +15,7 @@ import { zhCN as defaultLocale } from 'date-fns/locale';
  * @returns {Date}
  */
 
-export const parseToDate = function (input) {
-  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
-  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
-
+export const parseToDate = (input, formatToken = strings.DEFAULT_FORMAT, dateFnsLocale = defaultLocale) => {
   if (input instanceof Date) {
     return input;
   } else if (typeof input === 'number' || !isNaN(Number(input))) {
@@ -41,11 +38,7 @@ export const parseToDate = function (input) {
  * @returns {number}
  */
 
-export const parseToTimestamp = function (input) {
-  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
-  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
-  return Number(parseToDate(input, formatToken, dateFnsLocale));
-};
+export const parseToTimestamp = (input, formatToken = strings.DEFAULT_FORMAT, dateFnsLocale = defaultLocale) => Number(parseToDate(input, formatToken, dateFnsLocale));
 /**
  *
  * @param {Date|number} dateOrTimestamp
@@ -53,13 +46,9 @@ export const parseToTimestamp = function (input) {
  * @returns {string}
  */
 
-export const formatToString = function (dateOrTimestamp) {
-  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
-  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
-  return format(dateOrTimestamp, formatToken, {
-    locale: dateFnsLocale
-  });
-};
+export const formatToString = (dateOrTimestamp, formatToken = strings.DEFAULT_FORMAT, dateFnsLocale = defaultLocale) => format(dateOrTimestamp, formatToken, {
+  locale: dateFnsLocale
+});
 export const hourIsDisabled = (disabledHours, hour) => {
   if (typeof disabledHours === 'function') {
     const disabledOptions = disabledHours();

package/lib/es/timePicker/utils/localeDate.js

@@ -13,18 +13,12 @@ const replace = function replace(str, replacements) {
   return _str;
 };
 
-export function localeFormat(date, format) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+export function localeFormat(date, format, locale = {}, options = {}) {
   let str = dateFnsFormat(date, format, options);
   str = replace(str, locale);
   return str;
 }
-export function localeParse(dateString, format) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let defaultDate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  let options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-
+export function localeParse(dateString, format, locale = {}, defaultDate = null, options = {}) {
   // const invertedLocale = invert(locale);
   const _dateString = replace(dateString, locale);
 

package/lib/es/timeline/timeline.css

@@ -81,6 +81,7 @@
   position: relative;
   margin: 0 0 0 25px;
   word-break: break-word;
+  color: var(--semi-color-text-0);
 }
 .semi-timeline-item-content-extra, .semi-timeline-item-content-time {
   font-size: 12px;

package/lib/es/timeline/timeline.scss

@@ -94,6 +94,7 @@ $module: #{$prefix}-timeline;
             position: relative;
             margin: $spacing-none $spacing-none $spacing-none $spacing-timeline_content-marginLeft;
             word-break: break-word;
+            color: $color-timeline_item_content-text-default;
 
             &-extra,
             &-time {

package/lib/es/timeline/variables.scss

@@ -6,6 +6,7 @@ $color-timeline_dot_info-bg-default: var(--semi-color-tertiary-light-active); //
 $color-timeline_tail-border: var(--semi-color-text-3); // 时间轴连线颜色
 $color-timeline_time_default-text-default: var(--semi-color-text-2); // 时间轴文字颜色 - 默认
 $color-timeline_item_head-bg: transparent; // 时间轴头部背景颜色
+$color-timeline_item_content-text-default: var(--semi-color-text-0); // 时间轴标题文字颜色
 
 $spacing-timeline-margin: $spacing-none; // 时间轴整体外边距
 $spacing-timeline-padding: $spacing-tight; // 时间轴整体内边距