@douyinfe/semi-foundation 2.28.1 → 2.28.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/datePicker/foundation.ts +4 -0
  2. package/datePicker/monthsGridFoundation.ts +3 -3
  3. package/lib/cjs/datePicker/foundation.d.ts +2 -0
  4. package/lib/cjs/datePicker/foundation.js +4 -1
  5. package/lib/cjs/datePicker/monthsGridFoundation.js +3 -3
  6. package/lib/cjs/table/table.css +7 -6
  7. package/lib/cjs/table/table.scss +1 -0
  8. package/lib/cjs/table/variables.scss +3 -3
  9. package/lib/es/datePicker/foundation.d.ts +2 -0
  10. package/lib/es/datePicker/foundation.js +4 -1
  11. package/lib/es/datePicker/monthsGridFoundation.js +3 -3
  12. package/lib/es/table/table.css +7 -6
  13. package/lib/es/table/table.scss +1 -0
  14. package/lib/es/table/variables.scss +3 -3
  15. package/package.json +2 -2
  16. package/table/table.scss +1 -0
  17. package/table/variables.scss +3 -3
package/datePicker/foundation.ts CHANGED
@@ -175,12 +175,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
175
175
  export interface DatePickerFoundationState {
176
176
  panelShow: boolean;
177
177
  isRange: boolean;
178
+ /** value of trigger input */
178
179
  inputValue: string;
179
180
  value: Date[];
180
181
  cachedSelectedValue: Date[];
181
182
  prevTimeZone: string | number;
182
183
  rangeInputFocus: RangeType;
183
184
  autofocus: boolean;
185
+ /** value of inset input */
184
186
  insetInputValue: InsetInputValue;
185
187
  triggerDisabled: boolean
186
188
  }
@@ -248,7 +250,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
248
250
 
249
251
  const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
250
252
  this._adapter.updatePrevTimezone(prevTimeZone);
253
+ // reset input value when value update
251
254
  this._adapter.updateInputValue(null);
255
+ this._adapter.updateInsetInputValue(null);
252
256
  this._adapter.updateValue(result);
253
257
  this.resetCachedSelectedValue(result);
254
258
  this.initRangeInputFocus(result);
package/datePicker/monthsGridFoundation.ts CHANGED
@@ -266,10 +266,10 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
266
266
  const selectedDate = values.find(item => item) as Date;
267
267
  // 如果日期不完整且输入日期不在面板范围内，则更新面板
268
268
  if (selectedDate) {
269
- const notLeftMonth = selectedDate?.getMonth() !== monthLeft.pickerDate.getMonth();
270
- const notRightMonth = selectedDate?.getMonth() !== monthRight.pickerDate.getMonth();
269
+ const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
270
+ const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
271
271
 
272
- if (notLeftMonth && notRightMonth) {
272
+ if (notLeftPanelDate && notRightPanelDate) {
273
273
  this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
274
274
  this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
275
275
  }
package/lib/cjs/datePicker/foundation.d.ts CHANGED
@@ -142,12 +142,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
142
142
  export interface DatePickerFoundationState {
143
143
  panelShow: boolean;
144
144
  isRange: boolean;
145
+ /** value of trigger input */
145
146
  inputValue: string;
146
147
  value: Date[];
147
148
  cachedSelectedValue: Date[];
148
149
  prevTimeZone: string | number;
149
150
  rangeInputFocus: RangeType;
150
151
  autofocus: boolean;
152
+ /** value of inset input */
151
153
  insetInputValue: InsetInputValue;
152
154
  triggerDisabled: boolean;
153
155
  }
package/lib/cjs/datePicker/foundation.js CHANGED
@@ -124,10 +124,13 @@ class DatePickerFoundation extends _foundation.default {
124
124
 
125
125
  const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
126
126
 
127
- this._adapter.updatePrevTimezone(prevTimeZone);
127
+ this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
128
+
128
129
 
129
130
  this._adapter.updateInputValue(null);
130
131
 
132
+ this._adapter.updateInsetInputValue(null);
133
+
131
134
  this._adapter.updateValue(result);
132
135
 
133
136
  this.resetCachedSelectedValue(result);
package/lib/cjs/datePicker/monthsGridFoundation.js CHANGED
@@ -200,10 +200,10 @@ class MonthsGridFoundation extends _foundation.default {
200
200
  const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内，则更新面板
201
201
 
202
202
  if (selectedDate) {
203
- const notLeftMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthLeft.pickerDate.getMonth();
204
- const notRightMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthRight.pickerDate.getMonth();
203
+ const notLeftPanelDate = Math.abs((0, _dateFns.differenceInCalendarMonths)(selectedDate, monthLeft.pickerDate)) > 0;
204
+ const notRightPanelDate = Math.abs((0, _dateFns.differenceInCalendarMonths)(selectedDate, monthRight.pickerDate)) > 0;
205
205
 
206
- if (notLeftMonth && notRightMonth) {
206
+ if (notLeftPanelDate && notRightPanelDate) {
207
207
  this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
208
208
  this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
209
209
  }
package/lib/cjs/table/table.css CHANGED
@@ -86,7 +86,7 @@
86
86
  z-index: 102;
87
87
  }
88
88
  .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
89
- background-color: var(--semi-color-bg-2);
89
+ background-color: var(--semi-color-bg-1);
90
90
  }
91
91
  .semi-table-body {
92
92
  overflow: auto;
@@ -103,7 +103,7 @@
103
103
  width: 48px;
104
104
  }
105
105
  .semi-table-thead > .semi-table-row > .semi-table-row-head {
106
- background-color: transparent;
106
+ background-color: var(--semi-color-bg-1);
107
107
  color: var(--semi-color-text-2);
108
108
  font-weight: 600;
109
109
  text-align: left;
@@ -120,10 +120,10 @@
120
120
  .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
121
121
  z-index: 101;
122
122
  position: sticky;
123
- background-color: var(--semi-color-bg-2);
123
+ background-color: var(--semi-color-bg-1);
124
124
  }
125
125
  .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before {
126
- background-color: transparent;
126
+ background-color: var(--semi-color-bg-1);
127
127
  content: "";
128
128
  position: absolute;
129
129
  left: 0;
@@ -200,7 +200,7 @@
200
200
  background-color: var(--semi-color-fill-0);
201
201
  }
202
202
  .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
203
- background-color: var(--semi-color-bg-2);
203
+ background-color: var(--semi-color-bg-1);
204
204
  }
205
205
  .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
206
206
  background-color: var(--semi-color-fill-0);
@@ -224,6 +224,7 @@
224
224
  box-sizing: border-box;
225
225
  position: relative;
226
226
  vertical-align: middle;
227
+ background-color: var(--semi-color-bg-1);
227
228
  }
228
229
  .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
229
230
  border-right: 2px solid var(--semi-color-primary);
@@ -234,7 +235,7 @@
234
235
  .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
235
236
  z-index: 101;
236
237
  position: sticky;
237
- background-color: var(--semi-color-bg-2);
238
+ background-color: var(--semi-color-bg-1);
238
239
  }
239
240
  .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
240
241
  border-right: 1px solid var(--semi-color-border);
package/lib/cjs/table/table.scss CHANGED
@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
238
238
  box-sizing: border-box;
239
239
  position: relative;
240
240
  vertical-align: middle;
241
+ background-color: $color-table_body-bg-default;
241
242
 
242
243
  &.resizing {
243
244
  border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
package/lib/cjs/table/variables.scss CHANGED
@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
47
47
  // Color no need to change
48
48
  $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
49
49
  $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
50
- $color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
50
+ $color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
51
51
  $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
52
52
 
53
53
  $color-table-border-default: var(--semi-color-border); // 表格描边颜色
54
54
  $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
55
55
  $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
56
- $color-table_th-bg-default: transparent; // 表头背景色
56
+ $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
57
57
  $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
58
58
  $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
59
59
 
60
60
  $color-table_pl-bg-default: transparent;
61
- $color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
61
+ $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
62
62
  $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
63
63
  $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
64
64
  $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
package/lib/es/datePicker/foundation.d.ts CHANGED
@@ -142,12 +142,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
142
142
  export interface DatePickerFoundationState {
143
143
  panelShow: boolean;
144
144
  isRange: boolean;
145
+ /** value of trigger input */
145
146
  inputValue: string;
146
147
  value: Date[];
147
148
  cachedSelectedValue: Date[];
148
149
  prevTimeZone: string | number;
149
150
  rangeInputFocus: RangeType;
150
151
  autofocus: boolean;
152
+ /** value of inset input */
151
153
  insetInputValue: InsetInputValue;
152
154
  triggerDisabled: boolean;
153
155
  }
package/lib/es/datePicker/foundation.js CHANGED
@@ -100,10 +100,13 @@ export default class DatePickerFoundation extends BaseFoundation {
100
100
 
101
101
  const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
102
102
 
103
- this._adapter.updatePrevTimezone(prevTimeZone);
103
+ this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
104
+
104
105
 
105
106
  this._adapter.updateInputValue(null);
106
107
 
108
+ this._adapter.updateInsetInputValue(null);
109
+
107
110
  this._adapter.updateValue(result);
108
111
 
109
112
  this.resetCachedSelectedValue(result);
package/lib/es/datePicker/monthsGridFoundation.js CHANGED
@@ -179,10 +179,10 @@ export default class MonthsGridFoundation extends BaseFoundation {
179
179
  const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内，则更新面板
180
180
 
181
181
  if (selectedDate) {
182
- const notLeftMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthLeft.pickerDate.getMonth();
183
- const notRightMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthRight.pickerDate.getMonth();
182
+ const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
183
+ const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
184
184
 
185
- if (notLeftMonth && notRightMonth) {
185
+ if (notLeftPanelDate && notRightPanelDate) {
186
186
  this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
187
187
  this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
188
188
  }
package/lib/es/table/table.css CHANGED
@@ -86,7 +86,7 @@
86
86
  z-index: 102;
87
87
  }
88
88
  .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
89
- background-color: var(--semi-color-bg-2);
89
+ background-color: var(--semi-color-bg-1);
90
90
  }
91
91
  .semi-table-body {
92
92
  overflow: auto;
@@ -103,7 +103,7 @@
103
103
  width: 48px;
104
104
  }
105
105
  .semi-table-thead > .semi-table-row > .semi-table-row-head {
106
- background-color: transparent;
106
+ background-color: var(--semi-color-bg-1);
107
107
  color: var(--semi-color-text-2);
108
108
  font-weight: 600;
109
109
  text-align: left;
@@ -120,10 +120,10 @@
120
120
  .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
121
121
  z-index: 101;
122
122
  position: sticky;
123
- background-color: var(--semi-color-bg-2);
123
+ background-color: var(--semi-color-bg-1);
124
124
  }
125
125
  .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before {
126
- background-color: transparent;
126
+ background-color: var(--semi-color-bg-1);
127
127
  content: "";
128
128
  position: absolute;
129
129
  left: 0;
@@ -200,7 +200,7 @@
200
200
  background-color: var(--semi-color-fill-0);
201
201
  }
202
202
  .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
203
- background-color: var(--semi-color-bg-2);
203
+ background-color: var(--semi-color-bg-1);
204
204
  }
205
205
  .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
206
206
  background-color: var(--semi-color-fill-0);
@@ -224,6 +224,7 @@
224
224
  box-sizing: border-box;
225
225
  position: relative;
226
226
  vertical-align: middle;
227
+ background-color: var(--semi-color-bg-1);
227
228
  }
228
229
  .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
229
230
  border-right: 2px solid var(--semi-color-primary);
@@ -234,7 +235,7 @@
234
235
  .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
235
236
  z-index: 101;
236
237
  position: sticky;
237
- background-color: var(--semi-color-bg-2);
238
+ background-color: var(--semi-color-bg-1);
238
239
  }
239
240
  .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
240
241
  border-right: 1px solid var(--semi-color-border);
package/lib/es/table/table.scss CHANGED
@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
238
238
  box-sizing: border-box;
239
239
  position: relative;
240
240
  vertical-align: middle;
241
+ background-color: $color-table_body-bg-default;
241
242
 
242
243
  &.resizing {
243
244
  border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
package/lib/es/table/variables.scss CHANGED
@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
47
47
  // Color no need to change
48
48
  $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
49
49
  $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
50
- $color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
50
+ $color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
51
51
  $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
52
52
 
53
53
  $color-table-border-default: var(--semi-color-border); // 表格描边颜色
54
54
  $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
55
55
  $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
56
- $color-table_th-bg-default: transparent; // 表头背景色
56
+ $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
57
57
  $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
58
58
  $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
59
59
 
60
60
  $color-table_pl-bg-default: transparent;
61
- $color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
61
+ $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
62
62
  $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
63
63
  $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
64
64
  $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.28.1",
3
+ "version": "2.28.2",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
23
23
  "*.scss",
24
24
  "*.css"
25
25
  ],
26
- "gitHead": "24cfaffcba9337a3f4a3f8530e6e069d8d7b6bf0",
26
+ "gitHead": "d9651593e39ad3333e0f138a678460e959d01bbd",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
package/table/table.scss CHANGED
@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
238
238
  box-sizing: border-box;
239
239
  position: relative;
240
240
  vertical-align: middle;
241
+ background-color: $color-table_body-bg-default;
241
242
 
242
243
  &.resizing {
243
244
  border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
package/table/variables.scss CHANGED
@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
47
47
  // Color no need to change
48
48
  $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
49
49
  $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
50
- $color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
50
+ $color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
51
51
  $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
52
52
 
53
53
  $color-table-border-default: var(--semi-color-border); // 表格描边颜色
54
54
  $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
55
55
  $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
56
- $color-table_th-bg-default: transparent; // 表头背景色
56
+ $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
57
57
  $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
58
58
  $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
59
59
 
60
60
  $color-table_pl-bg-default: transparent;
61
- $color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
61
+ $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
62
62
  $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
63
63
  $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
64
64
  $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认