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

package/lib/es/breadcrumb/itemFoundation.js

@@ -3,12 +3,9 @@ export default class BreadcrumbItemFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   handleClick(item, e) {
     // Trigger its own onClick first, then trigger the parent
     this._adapter.notifyClick(item, e);
-
     this._adapter.notifyParent(item, e);
   }
-
 }

package/lib/es/breadcrumb/variables.scss

@@ -17,3 +17,7 @@ $color-breadcrumb-restItem-text-default: var(--semi-color-text-2); // 面包屑
 
 $font-breadcrumb_default-fontWeight: $font-weight-regular; // 面包屑文字字重 - 未选中
 $font-breadcrumb_active-fontWeight: $font-weight-bold; // 面包屑文字字重 - 选中
+
+
+$font-breadcrumb_compact-fontSize:$font-size-small; // 面包屑文字大小 - 紧凑
+$font-breadcrumb_loose-fontSize:$font-size-regular; // 面包屑文字大小 - 宽松

package/lib/es/button/button.css

@@ -8,11 +8,11 @@
   border-radius: 0;
   margin-right: 1px;
 }
-.semi-button-split :first-child {
+.semi-button-split .semi-button-first {
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-split :last-child {
+.semi-button-split .semi-button-last {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
   margin-right: unset;
@@ -30,7 +30,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin: 0;
   cursor: pointer;
   user-select: none;
   border: 0 transparent solid;
@@ -53,6 +52,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-danger-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-danger-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
 }
@@ -71,6 +76,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-warning-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-warning-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
 }
@@ -89,6 +100,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-tertiary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-tertiary-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
 }
@@ -104,6 +121,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-primary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-primary-disabled.semi-button-light {
+  background: var(--semi-color-fill-0);
+}
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
 }
@@ -120,6 +143,12 @@
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
+.semi-button-secondary-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-secondary-disabled.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);
 }
@@ -131,12 +160,10 @@
 }
 .semi-button-disabled {
   color: var(--semi-color-disabled-text);
-  background-color: var(--semi-color-disabled-bg);
   cursor: not-allowed;
 }
 .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
   color: var(--semi-color-disabled-text);
-  background-color: var(--semi-color-disabled-bg);
 }
 .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
   color: var(--semi-color-disabled-text);

package/lib/es/button/button.scss

@@ -11,7 +11,6 @@ $module: #{$prefix}-button;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin: 0;
     cursor: pointer;
     user-select: none;
     border: $width-button-border $color-button_primary-border-default solid;
@@ -40,74 +39,117 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
-      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
-      transform: scale($transform-scale-button_danger);
+        transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+        border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+        transform: scale($transform-scale-button_danger);
 
+        &-disabled {
+            background-color: $color-button_disabled_danger-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_danger-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
+
         &:active {
             background-color: $color-button_danger-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_danger_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
         }
     }
+
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
-      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
-      transform:scale($transform_scale-button_warning);
+        transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+        border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+        transform: scale($transform_scale-button_warning);
+
+        &-disabled {
+            background-color: $color-button_disabled_warning-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_warning-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
+
         &:active {
             background-color: $color-button_warning-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_warning_borderless-text-default;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
         }
     }
+
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
-      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
-      transform:scale($transform_scale_button_tertiary);
+        transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+        border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+        transform: scale($transform_scale_button_tertiary);
+
+        &-disabled {
+            background-color: $color-button_disabled_tertiary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_tertiary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_tertiary-bg-active;
         }
+
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_tertiary_solid-text-default;
         }
     }
+
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
         transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
         border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
-      transform:scale($transform_scale-button_primary);
+        transform: scale($transform_scale-button_primary);
+
+        &-disabled {
+            background-color: $color-button_disabled_primary-bg-default;
+
+            &.#{$module}-light {
+                background: $color-button_disabled_light_primary-bg-default;
+            }
+        }
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):active {
             background-color: $color-button_primary-bg-active;
         }
@@ -117,17 +159,27 @@ $module: #{$prefix}-button;
             color: $color-button_primary_borderless-text-default;
         }
     }
+
     &-secondary {
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
-      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
-      transform:scale($transform_scale-button_secondary);
+        transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+        border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+        transform: scale($transform_scale-button_secondary);
+
+        &-disabled {
+            background-color: $color-button_disabled_secondary-bg-default;
+
+            &.#{$module}-light {
+                background-color: $color-button_disabled_light_secondary-bg-default;
+            }
+        }
 
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
+
         &:active {
             background-color: $color-button_secondary-bg-active;
         }
@@ -137,13 +189,14 @@ $module: #{$prefix}-button;
             color: $color-button_secondary_borderless-text-default;
         }
     }
+
     &-disabled {
         color: $color-button_disabled_solid-text-default;
-        background-color: $color-button_disabled-bg-default;
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
-            background-color: $color-button_disabled-bg-hover;
         }
+
         cursor: not-allowed;
 
         &.#{$module}-light,
@@ -151,16 +204,18 @@ $module: #{$prefix}-button;
             color: $color-button_disabled-text-default;
         }
     }
+
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
-      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
-      transform:scale($transform_scale-button_borderless);
+        transition: background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+        transform: scale($transform_scale-button_borderless);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
             border: $width-button_borderless-border $color-button_borderless-border-active solid;
@@ -170,19 +225,21 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
-      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
-      transform:scale($transform_scale-button_light);
+        transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+        border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+        transform: scale($transform_scale-button_light);
 
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;
         }
+
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
             border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
+
     &-size-small {
         height: $height-button_small;
         padding-top: $spacing-button_small-paddingTop;
@@ -190,6 +247,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_small-paddingLeft;
         padding-right: $spacing-button_small-paddingRight;
     }
+
     &-size-large {
         height: $height-button_large;
         padding-top: $spacing-button_large-paddingTop;
@@ -197,6 +255,7 @@ $module: #{$prefix}-button;
         padding-left: $spacing-button_large-paddingLeft;
         padding-right: $spacing-button_large-paddingRight;
     }
+
     &-block {
         width: 100%;
     }
@@ -260,6 +319,7 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
+
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
@@ -274,24 +334,31 @@ $module: #{$prefix}-button;
             &-primary {
                 background-color: $color-button_primary-bg-default;
             }
+
             &-secondary {
                 background-color: $color-button_secondary-bg-default;
             }
+
             &-tertiary {
                 background-color: $color-button_tertiary-bg-default;
             }
+
             &-warning {
                 background-color: $color-button_warning-bg-default;
             }
+
             &-danger {
                 background-color: $color-button_danger-bg-default;
             }
+
             &-disabled {
                 background-color: $color-button_disabled-bg-default;
             }
+
             &-light {
                 background-color: $color-button_light-bg-default;
             }
+
             &-borderless {
                 background-color: transparent;
             }

package/lib/es/button/constants.js

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

package/lib/es/button/iconButton.css

@@ -18,6 +18,7 @@
   width: 16px;
   height: 16px;
   animation: 0.6s linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-button.semi-button-with-icon-only {
   padding-left: 8px;

package/lib/es/button/iconButton.scss

@@ -25,6 +25,7 @@ $module: #{$prefix}-button;
                 width: 16px;
                 height: 16px;
                 animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation-fill-mode: forwards;
             }
         }
     }

package/lib/es/button/splitButtonGroup.scss

@@ -10,19 +10,20 @@ $icon: #{$module}-with-icon;
     .#{$module} {
         border-radius: 0;
         margin-right: 1px;
-    }
 
-    :first-child {
-        border-top-left-radius: var(--semi-border-radius-small);
-        border-bottom-left-radius: var(--semi-border-radius-small);
-    }
+        &-first {
+            border-top-left-radius: var(--semi-border-radius-small);
+            border-bottom-left-radius: var(--semi-border-radius-small);
+        }
 
-    :last-child {
-        border-top-right-radius: var(--semi-border-radius-small);
-        border-bottom-right-radius: var(--semi-border-radius-small);
-        margin-right: unset;
+        &-last {
+            border-top-right-radius: var(--semi-border-radius-small);
+            border-bottom-right-radius: var(--semi-border-radius-small);
+            margin-right: unset;
+        }
     }
 
+
     &:hover {
         // 因为上面那条规则，导致原来的active被覆盖
         .#{$module}-borderless:active {

package/lib/es/button/variables.scss

@@ -82,6 +82,13 @@ $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用
 $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
 $color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
 $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
+$color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
+$color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
+$color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
+$color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
+$color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
+
+
 
 // light
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
@@ -92,6 +99,12 @@ $color-button_light-border-hover: $color-button_light-border-default; // 浅色
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
 $width-button_light-border: 0; // 浅色按钮描边宽度
 
+$color-button_disabled_light_primary-bg-default: $color-button_light-bg-default; // 禁用 light primary 按钮背景颜色
+$color-button_disabled_light_secondary-bg-default: $color-button_light-bg-default; // 禁用 light secondary 按钮背景颜色
+$color-button_disabled_light_danger-bg-default: $color-button_light-bg-default; // 禁用 light danger 按钮背景颜色
+$color-button_disabled_light_warning-bg-default: $color-button_light-bg-default; // 禁用 light warning 按钮背景颜色
+$color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
+
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮

package/lib/es/calendar/calendar.css

@@ -263,13 +263,13 @@
   justify-content: center;
   align-items: center;
 }
-.semi-calendar-week-grid-row li span {
+.semi-calendar-week-grid-row li > span {
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 26px;
 }
-.semi-calendar-week-grid-row li span:last-child {
+.semi-calendar-week-grid-row li > span:last-child {
   padding: 0 4px;
 }
 .semi-calendar-week .semi-calendar-all-day {

package/lib/es/calendar/calendar.scss

@@ -273,7 +273,7 @@ $module: #{$prefix}-calendar;
                 justify-content: center;
                 align-items: center;
 
-                span {
+                > span {
                     display: flex;
                     align-items: center;
                     justify-content: center;

package/lib/es/calendar/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-calendar")
+  PREFIX: `${BASE_CLASS_PREFIX}-calendar`
 };
 const strings = {
   MODE: ['day', 'week', 'month', 'range']

package/lib/es/calendar/eventUtil.d.ts

@@ -30,17 +30,18 @@ export interface DateObj {
     isSameMonth: boolean;
     month: string;
 }
-export declare type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export declare const calcWeekData: (value: Date, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export declare const calcWeekData: (value: Date, monthStart: Date | null, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
  * @param {object} event
@@ -74,7 +75,7 @@ export declare const filterEvents: (events: Map<string, EventObject[]>, start: D
  * @returns {arr}
  * filter out event that is not in the week range
  */
-export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum) => Map<string, EventObject[]>;
+export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum) => Map<string, EventObject[]>;
 /**
  * @returns {arr}
  * arrange and sort all day event for a range
@@ -84,7 +85,7 @@ export declare const parseRangeAllDayEvent: (event: EventObject[], startDate: Da
  * @returns {arr}
  * arrange and sort weekly all day event
  */
-export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weeekStartsOnEnum) => ParsedRangeEvent[][];
+export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weekStartsOnEnum) => ParsedRangeEvent[][];
 export declare const collectDailyEvents: (events: ParsedRangeEvent[][]) => ParsedRangeEvent[][];
 export declare const renderDailyEvent: (event: EventObject) => {
     startPos: number;