@douyinfe/semi-foundation 2.19.1-alpha.0 → 2.19.2-alpha.0

package/anchor/anchor.scss

@@ -18,8 +18,6 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
-        box-sizing: border-box;
-        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -65,12 +63,6 @@ $module: #{$prefix}-anchor;
     }
 
     &-link {
-        padding-left: $spacing-anchor_link-paddingLeft;
-
-        &-wrapper {
-            padding-right: $width-anchor-outline;
-            margin: $width-anchor-outline 0;
-        }
 
         &-title {
             cursor: pointer;
@@ -93,6 +85,7 @@ $module: #{$prefix}-anchor;
 
             &:focus-visible {
                 outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
             }
 
             &-disabled {

package/anchor/rtl.scss

@@ -11,7 +11,6 @@ $module: #{$prefix}-anchor;
         }
 
         &-link {
-            padding-right: $spacing-anchor_link-paddingLeft;
             padding-left: auto;
         }
     }

package/anchor/variables.scss

@@ -30,4 +30,5 @@ $radius-anchor_slide: 1px; // 滑轨圆角
 
 // Witdh
 $width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outlineOffset: -2px; // anchor轮廓 outline-offset 宽度
 $width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

package/button/button.scss

@@ -202,6 +202,9 @@ $module: #{$prefix}-button;
     }
 
     &-group {
+        display: flex;
+        flex-wrap: wrap;
+
         & > .#{$module} {
             margin: 0;
             padding-left: 0;
@@ -257,16 +260,50 @@ $module: #{$prefix}-button;
                 border-top-left-radius: $radius-button_group;
                 border-bottom-left-radius: $radius-button_group;
             }
-            &:not(:last-child) {
-                .#{$prefix}-button-content {
-                    border-right: $width-button_group-border $color-button_group-border-default solid;
-                }
-            }
             &:last-child {
                 border-top-right-radius: $radius-button_group;
                 border-bottom-right-radius: $radius-button_group;
             }
         }
+
+        &-line {
+            display: inline-flex;
+            align-items: center;
+            background-color: $color-button_group-border-default;
+
+            &-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;
+            }
+
+            &::before {
+                display: block;
+                content: '';
+                width: $width-button_group-border;
+                height: $height-button_group_line_default;
+                background-color: $color-button_group-border-default;
+            }
+        }
     }
 }
 

package/button/variables.scss

@@ -141,6 +141,7 @@ $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
+$height-button_group_line_default: 20px; // 分割线高度 - 默认
 
 $width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小

package/calendar/eventUtil.ts

@@ -98,7 +98,7 @@ export interface DateObj {
 
 export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -106,8 +106,8 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
         const date = addDays(start, ind);
         dateObj.ind = ind;
         dateObj.date = date;
-        dateObj.dayString = format(date, 'd', { locale });
-        dateObj.weekday = format(date, 'EEE', { locale });
+        dateObj.dayString = format(date, 'd', { locale, weekStartsOn });
+        dateObj.weekday = format(date, 'EEE', { locale, weekStartsOn });
         dateObj.isToday = isSameDay(date, today);
         dateObj.isWeekend = checkWeekend(date);
         if (mode === 'month') {
@@ -129,7 +129,7 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
  */
 export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale);
+    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +250,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * filter out event that is not in the week range
  */
 // eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -308,8 +308,9 @@ export const parseWeeklyAllDayEvent = (
     event: EventObject[],
     startDate: Date,
     weekStart: Date,
-    parsed: Array<Array<ParsedRangeEvent>>
-) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate), 1), parsed);
+    parsed: Array<Array<ParsedRangeEvent>>,
+    weekStartsOn: weeekStartsOnEnum
+) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 
 export const collectDailyEvents = (events: ParsedRangeEvent[][]) => {

package/calendar/foundation.ts

@@ -190,8 +190,8 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getWeeklyData(value: Date, dateFnsLocale: Locale) {
         const data = {} as WeeklyData;
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
         const { weekStartsOn } = this.getProps();
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
         data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
@@ -199,10 +199,10 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getRangeData(value: Date, dateFnsLocale: Locale) {
         const data = {} as { month: string; week: Array<DateObj> };
-        const { range } = this.getProps();
+        const { range, weekStartsOn } = this.getProps();
         const len = differenceInCalendarDays(range[1], range[0]);
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
-        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale);
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
+        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setRangeData(data);
         return data;
     }
@@ -211,7 +211,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const monthStart = startOfMonth(value);
         const data = {} as MonthData;
         const { weekStartsOn } = this.getProps();
-        const numberOfWeek = getWeeksInMonth(value);
+        const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
             data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
         });
@@ -263,12 +263,13 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
     // ================== Weekly Event ==================
 
     _parseWeeklyEvents(events: ParsedEvents['allDay'], weekStart: Date) {
+        const { weekStartsOn } = this.getProps();
         let parsed = [[]] as ParsedRangeEvent[][];
-        const filtered = filterWeeklyEvents(events, weekStart);
+        const filtered = filterWeeklyEvents(events, weekStart, weekStartsOn);
         [...filtered.keys()].sort((a, b) => sortDate(a, b)).forEach(item => {
             const startDate = new Date(item);
             const curr = filtered.get(item).filter(event => isSameDay(event.date, startDate));
-            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed);
+            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed, weekStartsOn);
         });
         return parsed;
     }
@@ -332,7 +333,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getParseMonthlyEvents(itemLimit: number) {
         const parsed: any = {};
-        const { displayValue, events } = this.getProps();
+        const { displayValue, events, weekStartsOn } = this.getProps();
         const currDate = this._getDate();
         const firstDayOfMonth = startOfMonth(displayValue);
         const lastDayOfMonth = endOfMonth(displayValue);
@@ -354,31 +355,30 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
             // WeekInd calculation error, need to consider the boundary situation at the beginning/end of the month
             // When the date falls within the month
             if (isSameMonth(item.date, displayValue)) {
-                const weekInd = getWeekOfMonth(item.date) - 1;
+                const weekInd = getWeekOfMonth(item.date, { weekStartsOn }) - 1;
                 this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 return;
             }
             // When the date is within the previous month
             if (isBefore(item.date, firstDayOfMonth)) {
-                if (isSameWeek(item.date, firstDayOfMonth)) {
+                if (isSameWeek(item.date, firstDayOfMonth, { weekStartsOn })) {
                     this.pushDayEventIntoWeekMap(item, 0, parsed);
                 }
                 return;
             }
             // When the date is within the next month
             if (isAfter(item.date, lastDayOfMonth)) {
-                if (isSameWeek(item.date, lastDayOfMonth)) {
-                    const weekInd = getWeekOfMonth(lastDayOfMonth) - 1;
+                if (isSameWeek(item.date, lastDayOfMonth, { weekStartsOn })) {
+                    const weekInd = getWeekOfMonth(lastDayOfMonth, { weekStartsOn }) - 1;
                     this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 }
                 return;
             }
         });
-
         Object.keys(parsed).forEach(key => {
             const week = parsed[key];
             parsed[key] = {};
-            const weekStart = startOfWeek(week[0].date);
+            const weekStart = startOfWeek(week[0].date, { weekStartsOn });
             const weekMap = convertEventsArrToMap(week, 'start', startOfDay);
             // When there are multiple events in a week, multiple events should be parsed
             // const oldParsedWeeklyEvent = this._parseWeeklyEvents(weekMap, weekStart);

package/checkbox/checkbox.scss

@@ -11,13 +11,14 @@ $module: #{$prefix}-checkbox;
     // box-sizing: border-box;
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
     border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
     transform: scale($transform_scale-checkbox);
+    column-gap: $spacing-checkbox_label-paddingLeft;
 
     input[type="checkbox"] {
         position: absolute;
@@ -29,11 +30,17 @@ $module: #{$prefix}-checkbox;
         opacity: 0;
     }
 
+    &-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_extra-marginTop;
+    }
+
     &-addon {
         display: flex;
         flex: 1;
         align-items: center;
-        padding-left: $spacing-checkbox_label-paddingLeft;
         color: $color-checkbox_label-text-default;
         line-height: $font-checkbox_label-lineHeight;
         user-select: none;
@@ -192,7 +199,6 @@ $module: #{$prefix}-checkbox;
                 background: $color-checkbox_cardType_inner-bg-default;
             }
 
-            margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
 
@@ -202,7 +208,6 @@ $module: #{$prefix}-checkbox;
             // input focus/blur cannot take effect when display: none
             opacity: 0;
             width: 0;
-            margin-right: 0;
         }
 
         .#{$module}-addon {
@@ -210,8 +215,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_addon-size;
             line-height: $font-checkbox_cardType_addon-lineHeight;
             color: $color-checkbox_cardType_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
         }
 
         .#{$module}-extra {
@@ -219,7 +222,6 @@ $module: #{$prefix}-checkbox;
             font-size: $font-checkbox_cardType_extra-size;
             line-height: $font-checkbox_cardType_extra-lineHeight;
             color: $color-checkbox_cardType_extra-text-default;
-            padding-left: 0;
 
             &.#{$module}-cardType_extra_noChildren {
                 margin-top: 0;
@@ -359,9 +361,7 @@ $module: #{$prefix}-checkbox;
         flex-grow: 1;
         flex-basis: 100%;
         box-sizing: border-box;
-        padding-left: $spacing-checkbox_extra-paddingLeft;
         color: $color-checkbox_extra-text-default;
-        margin-top: $spacing-checkbox_extra-marginTop;
     }
 
     &-focus {
@@ -385,28 +385,28 @@ $module: #{$prefix}-checkbox;
     }
 
     &-horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $spacing-checkbox_group_horizontal-marginRight;
+
         .#{$module} {
-            margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
         }
     }
 
     &-vertical {
-        .#{$module} {
-            margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-checkbox_group_vertical_item-marginBottom;
 
-            &:last-of-type {
-                margin-bottom: 0;
-            }
+        &-cardType {
+            row-gap: $spacing-checkbox_card_group_vertical-marginBottom;
         }
 
-        &-cardType {
+
+        &-pureCardType {
             .#{$module} {
-                margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
+                column-gap: 0;
             }
         }
     }

package/checkbox/rtl.scss

@@ -10,45 +10,9 @@ $inner-width: $width-icon-medium;
             left: auto;
             right: 0;
         }
-
-        &-addon {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_label-paddingLeft;
-        }
-
-        &-extra {
-            padding-left: 0;
-            padding-right: $spacing-checkbox_extra-paddingLeft;
-        }
-
-        &-cardType {
-            .#{$module}-inner {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_cardType_inner-marginRight;
-            }
-    
-            .#{$module}-addon {
-                margin-right: 0;
-                padding-right: 0;
-            }
-
-            .#{$module}-extra {
-                padding-right: 0;
-            }
-        }
     }
 
     .#{$module}Group {
         direction: rtl;
-
-        &-horizontal {
-            .#{$module} {
-                margin-right: 0;
-                margin-left: $spacing-checkbox_group_horizontal-marginRight;
-                &:last-of-type {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 }

package/datePicker/monthsGridFoundation.ts

@@ -542,8 +542,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         type: YearMonthChangeType,
         targetDate: Date
     ) {
-        const { multiple, disabledDate } = this.getProps();
-        const { selected: selectedSet, rangeStart, rangeEnd } = this.getStates();
+        const { multiple, disabledDate, type: dateType } = this.getProps();
+        const { selected: selectedSet, rangeStart, rangeEnd, monthLeft } = this.getStates();
         // FIXME:
         const includeRange = ['dateRange', 'dateTimeRange'].includes(type);
         const options = { closePanel: false };
@@ -552,7 +552,14 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             const selectedDate = new Date(selectedStr);
             const year = targetDate.getFullYear();
             const month = targetDate.getMonth();
-            const fullDate = set(selectedDate, { year, month });
+            let fullDate = set(selectedDate, { year, month });
+            if (dateType === 'dateTime') {
+                /**
+                 * 如果是 type dateTime 切换月份要读取只取的time
+                 * 无论 monthLeft 还是 monthRight 他们的 time 是不变的，所以只取 monthLeft 即可
+                 */
+                fullDate = this._mergeDateAndTime(fullDate, monthLeft.pickerDate);
+            }
             if (disabledDate(fullDate, { rangeStart, rangeEnd })) {
                 return;
             }

package/dropdown/foundation.ts

@@ -34,7 +34,8 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(event.target);

package/dropdown/menuFoundation.ts

@@ -54,7 +54,8 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'Escape':
                 this.handleEscape(menu);

package/lib/cjs/anchor/anchor.css

@@ -19,8 +19,6 @@
   left: 0;
   top: 0;
   height: 100%;
-  box-sizing: border-box;
-  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -56,13 +54,6 @@
   border-radius: 1px;
   content: " ";
 }
-.semi-anchor-link {
-  padding-left: 8px;
-}
-.semi-anchor-link-wrapper {
-  padding-right: 2px;
-  margin: 2px 0;
-}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -83,6 +74,7 @@
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
 }
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
@@ -125,6 +117,5 @@
 }
 .semi-rtl .semi-anchor-link,
 .semi-portal-rtl .semi-anchor-link {
-  padding-right: 8px;
   padding-left: auto;
 }

package/lib/cjs/anchor/anchor.scss

@@ -18,8 +18,6 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
-        box-sizing: border-box;
-        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -65,12 +63,6 @@ $module: #{$prefix}-anchor;
     }
 
     &-link {
-        padding-left: $spacing-anchor_link-paddingLeft;
-
-        &-wrapper {
-            padding-right: $width-anchor-outline;
-            margin: $width-anchor-outline 0;
-        }
 
         &-title {
             cursor: pointer;
@@ -93,6 +85,7 @@ $module: #{$prefix}-anchor;
 
             &:focus-visible {
                 outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+                outline-offset: $width-anchor-outlineOffset;
             }
 
             &-disabled {

package/lib/cjs/anchor/rtl.scss

@@ -11,7 +11,6 @@ $module: #{$prefix}-anchor;
         }
 
         &-link {
-            padding-right: $spacing-anchor_link-paddingLeft;
             padding-left: auto;
         }
     }

package/lib/cjs/anchor/variables.scss

@@ -30,4 +30,5 @@ $radius-anchor_slide: 1px; // 滑轨圆角
 
 // Witdh
 $width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outlineOffset: -2px; // anchor轮廓 outline-offset 宽度
 $width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

package/lib/cjs/button/button.css

@@ -186,6 +186,10 @@
 .semi-button-block {
   width: 100%;
 }
+.semi-button-group {
+  display: flex;
+  flex-wrap: wrap;
+}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -224,13 +228,46 @@
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
-  border-right: 1px var(--semi-color-border) solid;
-}
 .semi-button-group > .semi-button:last-child {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
 }
+.semi-button-group-line {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--semi-color-border);
+}
+.semi-button-group-line-primary {
+  background-color: var(--semi-color-primary);
+}
+.semi-button-group-line-secondary {
+  background-color: var(--semi-color-secondary);
+}
+.semi-button-group-line-tertiary {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-button-group-line-warning {
+  background-color: var(--semi-color-warning);
+}
+.semi-button-group-line-danger {
+  background-color: var(--semi-color-danger);
+}
+.semi-button-group-line-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-group-line-light {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-group-line-borderless {
+  background-color: transparent;
+}
+.semi-button-group-line::before {
+  display: block;
+  content: "";
+  width: 1px;
+  height: 20px;
+  background-color: var(--semi-color-border);
+}
 
 .semi-rtl .semi-button,
 .semi-portal-rtl .semi-button {