@douyinfe/semi-foundation 2.5.0 → 2.6.0

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 (65) hide show
  1. package/button/button.scss +11 -0
  2. package/button/constants.ts +2 -2
  3. package/button/variables.scss +4 -0
  4. package/cascader/cascader.scss +2 -2
  5. package/cascader/foundation.ts +19 -0
  6. package/cascader/variables.scss +2 -1
  7. package/datePicker/foundation.ts +4 -4
  8. package/datePicker/inputFoundation.ts +0 -1
  9. package/datePicker/monthFoundation.ts +1 -0
  10. package/form/form.scss +7 -1
  11. package/form/foundation.ts +40 -36
  12. package/form/interface.ts +1 -1
  13. package/input/input.scss +2 -1
  14. package/lib/cjs/button/button.css +9 -0
  15. package/lib/cjs/button/button.scss +11 -0
  16. package/lib/cjs/button/constants.d.ts +9 -1
  17. package/lib/cjs/button/variables.scss +4 -0
  18. package/lib/cjs/cascader/cascader.css +1 -1
  19. package/lib/cjs/cascader/cascader.scss +2 -2
  20. package/lib/cjs/cascader/foundation.d.ts +19 -0
  21. package/lib/cjs/cascader/foundation.js +22 -0
  22. package/lib/cjs/cascader/variables.scss +2 -1
  23. package/lib/cjs/datePicker/foundation.d.ts +4 -4
  24. package/lib/cjs/datePicker/inputFoundation.d.ts +0 -1
  25. package/lib/cjs/datePicker/monthFoundation.d.ts +1 -0
  26. package/lib/cjs/form/form.css +4 -0
  27. package/lib/cjs/form/form.scss +7 -1
  28. package/lib/cjs/form/foundation.d.ts +6 -6
  29. package/lib/cjs/form/foundation.js +51 -52
  30. package/lib/cjs/form/interface.d.ts +1 -1
  31. package/lib/cjs/input/input.css +1 -0
  32. package/lib/cjs/input/input.scss +2 -1
  33. package/lib/cjs/table/table.css +1 -2
  34. package/lib/cjs/table/table.scss +4 -5
  35. package/lib/cjs/table/variables.scss +1 -0
  36. package/lib/cjs/tag/tag.css +1 -0
  37. package/lib/cjs/tag/tag.scss +1 -0
  38. package/lib/es/button/button.css +9 -0
  39. package/lib/es/button/button.scss +11 -0
  40. package/lib/es/button/constants.d.ts +9 -1
  41. package/lib/es/button/variables.scss +4 -0
  42. package/lib/es/cascader/cascader.css +1 -1
  43. package/lib/es/cascader/cascader.scss +2 -2
  44. package/lib/es/cascader/foundation.d.ts +19 -0
  45. package/lib/es/cascader/foundation.js +22 -1
  46. package/lib/es/cascader/variables.scss +2 -1
  47. package/lib/es/datePicker/foundation.d.ts +4 -4
  48. package/lib/es/datePicker/inputFoundation.d.ts +0 -1
  49. package/lib/es/datePicker/monthFoundation.d.ts +1 -0
  50. package/lib/es/form/form.css +4 -0
  51. package/lib/es/form/form.scss +7 -1
  52. package/lib/es/form/foundation.d.ts +6 -6
  53. package/lib/es/form/foundation.js +51 -52
  54. package/lib/es/form/interface.d.ts +1 -1
  55. package/lib/es/input/input.css +1 -0
  56. package/lib/es/input/input.scss +2 -1
  57. package/lib/es/table/table.css +1 -2
  58. package/lib/es/table/table.scss +4 -5
  59. package/lib/es/table/variables.scss +1 -0
  60. package/lib/es/tag/tag.css +1 -0
  61. package/lib/es/tag/tag.scss +1 -0
  62. package/package.json +3 -3
  63. package/table/table.scss +4 -5
  64. package/table/variables.scss +1 -0
  65. package/tag/tag.scss +1 -0
@@ -8,6 +8,8 @@ $col: #{$form}-col;
8
8
 
9
9
  $checkboxGroup: #{$prefix}-checkboxGroup;
10
10
  $radioGroup: #{$prefix}-radioGroup;
11
+ $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
12
+
11
13
  $switch: #{$prefix}-switch;
12
14
  $rating: #{$prefix}-rating;
13
15
 
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
154
156
  padding-top: $spacing-form_label_posTop-paddingTop;
155
157
  padding-bottom: $spacing-form_label_posTop-paddingBottom;
156
158
  }
157
-
158
159
  }
159
160
 
160
161
  &[x-label-pos="left"] {
@@ -173,6 +174,11 @@ $rating: #{$prefix}-rating;
173
174
  padding-top: $spacing-form_label-paddingTop;
174
175
  padding-bottom: $spacing-form_label-paddingTop;
175
176
  }
177
+ // no need to adjust height for button radio, already 32px
178
+ .#{$buttonRadioGroup} {
179
+ padding-top: 0;
180
+ padding-bottom: 0;
181
+ }
176
182
  .#{$switch},
177
183
  .#{$rating} {
178
184
  vertical-align: middle;
@@ -41,11 +41,11 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
41
41
  setValues(values: any, { isOverride }: {
42
42
  isOverride?: boolean;
43
43
  }): void;
44
- updateStateValue(field: string, value: any, opts: CallOpts): void;
44
+ updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void;
45
45
  getTouched(field?: string): boolean | Record<string, any> | undefined;
46
- updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void;
46
+ updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void;
47
47
  getError(field?: string): any;
48
- updateStateError(field: string, error: any, opts: CallOpts): void;
48
+ updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void;
49
49
  getFieldSetterApi(): {
50
50
  setValue: (field: string, value: any, opts: CallOpts) => void;
51
51
  setError: (field: string, error: any, opts: CallOpts) => void;
@@ -54,9 +54,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
54
54
  getModifyFormStateApi(): {
55
55
  register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
56
56
  unRegister: (field: string) => void;
57
- updateStateValue: (field: string, value: any, opts: CallOpts) => void;
58
- updateStateError: (field: string, error: any, opts: CallOpts) => void;
59
- updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
57
+ updateStateValue: (field: string, value: any, opts: CallOpts, callback?: () => void) => void;
58
+ updateStateError: (field: string, error: any, opts: CallOpts, callback?: () => void) => void;
59
+ updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void) => void;
60
60
  getValue: (field: string, opts?: CallOpts) => any;
61
61
  getError: (field?: string) => any;
62
62
  getTouched: (field?: string) => boolean | Record<string, any>;
@@ -486,7 +486,7 @@ export default class FormFoundation extends BaseFoundation {
486
486
  } // update formState value
487
487
 
488
488
 
489
- updateStateValue(field, value, opts) {
489
+ updateStateValue(field, value, opts, callback) {
490
490
  const notNotify = opts && opts.notNotify;
491
491
  const notUpdate = opts && opts.notUpdate;
492
492
  const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -518,7 +518,7 @@ export default class FormFoundation extends BaseFoundation {
518
518
  }
519
519
 
520
520
  if (!notUpdate) {
521
- this._adapter.forceUpdate();
521
+ this._adapter.forceUpdate(callback);
522
522
  }
523
523
  } // get touched from formState
524
524
 
@@ -532,7 +532,7 @@ export default class FormFoundation extends BaseFoundation {
532
532
  } // update formState touched
533
533
 
534
534
 
535
- updateStateTouched(field, isTouched, opts) {
535
+ updateStateTouched(field, isTouched, opts, callback) {
536
536
  const notNotify = opts && opts.notNotify;
537
537
  const notUpdate = opts && opts.notUpdate;
538
538
  ObjectUtil.set(this.data.touched, field, isTouched);
@@ -542,7 +542,7 @@ export default class FormFoundation extends BaseFoundation {
542
542
  }
543
543
 
544
544
  if (!notUpdate) {
545
- this._adapter.forceUpdate();
545
+ this._adapter.forceUpdate(callback);
546
546
  }
547
547
  } // get error from formState
548
548
 
@@ -556,7 +556,7 @@ export default class FormFoundation extends BaseFoundation {
556
556
  } // update formState error
557
557
 
558
558
 
559
- updateStateError(field, error, opts) {
559
+ updateStateError(field, error, opts, callback) {
560
560
  const notNotify = opts && opts.notNotify;
561
561
  const notUpdate = opts && opts.notUpdate;
562
562
  ObjectUtil.set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
@@ -567,7 +567,7 @@ export default class FormFoundation extends BaseFoundation {
567
567
  }
568
568
 
569
569
  if (!notUpdate) {
570
- this._adapter.forceUpdate();
570
+ this._adapter.forceUpdate(callback);
571
571
  }
572
572
  } // For internal use in the FormApi Operating Field
573
573
 
@@ -586,22 +586,21 @@ export default class FormFoundation extends BaseFoundation {
586
586
  // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
587
587
  // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
588
588
  // When the user directly calls formA pi.set Value ('peoples', [2,3])
589
- this.updateStateValue(field, newValue, opts);
590
-
591
- let nestedFields = this._getNestedField(field);
592
-
593
- if (nestedFields.size) {
594
- _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
595
- let fieldPath = fieldStaff.field;
596
- let newFieldVal = ObjectUtil.get(_valuesInstanceProperty(this.data), fieldPath);
597
- let nestedBatchUpdateOpts = {
598
- notNotify: true,
599
- notUpdate: true
600
- };
601
- fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
602
- });
603
- } // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
604
-
589
+ this.updateStateValue(field, newValue, opts, () => {
590
+ let nestedFields = this._getNestedField(field);
591
+
592
+ if (nestedFields.size) {
593
+ _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
594
+ let fieldPath = fieldStaff.field;
595
+ let newFieldVal = ObjectUtil.get(_valuesInstanceProperty(this.data), fieldPath);
596
+ let nestedBatchUpdateOpts = {
597
+ notNotify: true,
598
+ notUpdate: true
599
+ };
600
+ fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
601
+ });
602
+ }
603
+ }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
605
604
 
606
605
  if (this.getArrayField(field)) {
607
606
  this.updateArrayField(field, {
@@ -619,21 +618,21 @@ export default class FormFoundation extends BaseFoundation {
619
618
  if (fieldApi) {
620
619
  fieldApi.setError(newError, opts);
621
620
  } else {
622
- this.updateStateError(field, newError, opts);
623
-
624
- let nestedFields = this._getNestedField(field);
625
-
626
- if (nestedFields.size) {
627
- _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
628
- let fieldPath = fieldStaff.field;
629
- let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
630
- let nestedBatchUpdateOpts = {
631
- notNotify: true,
632
- notUpdate: true
633
- };
634
- fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
635
- });
636
- }
621
+ this.updateStateError(field, newError, opts, () => {
622
+ let nestedFields = this._getNestedField(field);
623
+
624
+ if (nestedFields.size) {
625
+ _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
626
+ let fieldPath = fieldStaff.field;
627
+ let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
628
+ let nestedBatchUpdateOpts = {
629
+ notNotify: true,
630
+ notUpdate: true
631
+ };
632
+ fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
633
+ });
634
+ }
635
+ });
637
636
 
638
637
  if (this.getArrayField(field)) {
639
638
  this.updateArrayField(field, {
@@ -649,21 +648,21 @@ export default class FormFoundation extends BaseFoundation {
649
648
  if (fieldApi) {
650
649
  fieldApi.setTouched(isTouched, opts);
651
650
  } else {
652
- this.updateStateTouched(field, isTouched, opts);
653
-
654
- let nestedFields = this._getNestedField(field);
655
-
656
- if (nestedFields.size) {
657
- _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
658
- let fieldPath = fieldStaff.field;
659
- let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
660
- let nestedBatchUpdateOpts = {
661
- notNotify: true,
662
- notUpdate: true
663
- };
664
- fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
665
- });
666
- }
651
+ this.updateStateTouched(field, isTouched, opts, () => {
652
+ let nestedFields = this._getNestedField(field);
653
+
654
+ if (nestedFields.size) {
655
+ _forEachInstanceProperty(nestedFields).call(nestedFields, fieldStaff => {
656
+ let fieldPath = fieldStaff.field;
657
+ let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
658
+ let nestedBatchUpdateOpts = {
659
+ notNotify: true,
660
+ notUpdate: true
661
+ };
662
+ fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
663
+ });
664
+ }
665
+ });
667
666
 
668
667
  if (this.getArrayField(field)) {
669
668
  this.updateArrayField(field, {
@@ -7,7 +7,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
7
7
  cloneDeep: (val: any, ...rest: any[]) => any;
8
8
  notifySubmit: (values: any) => void;
9
9
  notifySubmitFail: (errors: Record<string, any>, values: any) => void;
10
- forceUpdate: () => void;
10
+ forceUpdate: (callback?: () => void) => void;
11
11
  notifyChange: (formState: FormState) => void;
12
12
  notifyValueChange: (values: any, changedValues: any) => void;
13
13
  notifyReset: () => void;
@@ -278,6 +278,7 @@
278
278
  cursor: not-allowed;
279
279
  color: var(--semi-color-disabled-text);
280
280
  background-color: var(--semi-color-disabled-fill);
281
+ -webkit-text-fill-color: var(--semi-color-disabled-text);
281
282
  }
282
283
  .semi-input-wrapper-disabled:hover {
283
284
  background-color: var(--semi-color-disabled-fill);
@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
382
382
  // border: $border-thickness-control $color-input_disabled-border-default solid;
383
383
  color: $color-input_disabled-text-default;
384
384
  background-color: $color-input_disabled-bg-default;
385
-
385
+ // fix issue 670 in safari
386
+ -webkit-text-fill-color: $color-input_disabled-text-default;
386
387
  &:hover {
387
388
  background-color: $color-input_disabled-bg-default;
388
389
  }
@@ -109,7 +109,6 @@
109
109
  word-break: break-all;
110
110
  word-wrap: break-word;
111
111
  position: relative;
112
- user-select: none;
113
112
  }
114
113
  .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 {
115
114
  z-index: 101;
@@ -381,7 +380,7 @@
381
380
  position: relative;
382
381
  z-index: 1;
383
382
  padding: 16px 12px;
384
- color: var(--semi-color-disabled-bg);
383
+ color: var(--semi-color-text-2);
385
384
  font-size: 14px;
386
385
  text-align: center;
387
386
  background: transparent;
@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
100
100
  word-break: break-all;
101
101
  word-wrap: break-word;
102
102
  position: relative;
103
- user-select: none;
104
103
 
105
104
  &.#{$module}-cell-fixed {
106
105
 
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
199
198
  background-color: $color-table_body-bg-hover;
200
199
 
201
200
  &.#{$module}-cell-fixed {
202
-
201
+
203
202
  &-left,
204
203
  &-right {
205
204
  background-color: $color-table_body-bg-default;
206
-
205
+
207
206
  &::before {
208
207
  background-color: $color-table_body-bg-hover;
209
208
  content: "";
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
327
326
  &-wrap {
328
327
  // inline-flex vertical-align baseline 会导致父元素高度异常
329
328
  display: inline-flex;
330
- vertical-align: bottom;
329
+ vertical-align: bottom;
331
330
  }
332
331
 
333
332
  &-disabled {
@@ -467,7 +466,7 @@ $module: #{$prefix}-table;
467
466
  position: relative;
468
467
  z-index: 1;
469
468
  padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
470
- color: $color-table_disabled-bg-default;
469
+ color: $color-table_placeholder-text-default;
471
470
  font-size: #{$font-table_base-fontSize};
472
471
  text-align: center;
473
472
  background: $color-table_pl-bg-default;
@@ -73,6 +73,7 @@ $color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮
73
73
  $color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
74
74
  $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
75
75
  $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
76
+ $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
76
77
 
77
78
  // Other
78
79
  $font-table_base-fontSize: 14px; // 表格默认文本字号
@@ -10,6 +10,7 @@
10
10
  user-select: none;
11
11
  overflow: hidden;
12
12
  white-space: nowrap;
13
+ vertical-align: bottom;
13
14
  }
14
15
  .semi-tag-default, .semi-tag-small {
15
16
  font-size: 12px;
@@ -18,6 +18,7 @@ $types: "ghost", "solid", "light";
18
18
  // hidden avatar tag image
19
19
  overflow: hidden;
20
20
  white-space: nowrap;
21
+ vertical-align: bottom;
21
22
 
22
23
  &-default,
23
24
  &-small {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
8
8
  },
9
9
  "dependencies": {
10
10
  "@babel/runtime-corejs3": "^7.15.4",
11
- "@douyinfe/semi-animation": "2.5.0",
11
+ "@douyinfe/semi-animation": "2.6.0",
12
12
  "async-validator": "^3.5.0",
13
13
  "classnames": "^2.2.6",
14
14
  "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
24
24
  "*.scss",
25
25
  "*.css"
26
26
  ],
27
- "gitHead": "856255d8b5ad895a5fee47c5920aa1835836aff0",
27
+ "gitHead": "d3a844137fb02b81a93320eb5c183636b05a4a68",
28
28
  "devDependencies": {
29
29
  "@babel/plugin-proposal-decorators": "^7.15.8",
30
30
  "@babel/plugin-transform-runtime": "^7.15.8",
package/table/table.scss CHANGED
@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
100
100
  word-break: break-all;
101
101
  word-wrap: break-word;
102
102
  position: relative;
103
- user-select: none;
104
103
 
105
104
  &.#{$module}-cell-fixed {
106
105
 
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
199
198
  background-color: $color-table_body-bg-hover;
200
199
 
201
200
  &.#{$module}-cell-fixed {
202
-
201
+
203
202
  &-left,
204
203
  &-right {
205
204
  background-color: $color-table_body-bg-default;
206
-
205
+
207
206
  &::before {
208
207
  background-color: $color-table_body-bg-hover;
209
208
  content: "";
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
327
326
  &-wrap {
328
327
  // inline-flex vertical-align baseline 会导致父元素高度异常
329
328
  display: inline-flex;
330
- vertical-align: bottom;
329
+ vertical-align: bottom;
331
330
  }
332
331
 
333
332
  &-disabled {
@@ -467,7 +466,7 @@ $module: #{$prefix}-table;
467
466
  position: relative;
468
467
  z-index: 1;
469
468
  padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
470
- color: $color-table_disabled-bg-default;
469
+ color: $color-table_placeholder-text-default;
471
470
  font-size: #{$font-table_base-fontSize};
472
471
  text-align: center;
473
472
  background: $color-table_pl-bg-default;
@@ -73,6 +73,7 @@ $color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮
73
73
  $color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
74
74
  $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
75
75
  $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
76
+ $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
76
77
 
77
78
  // Other
78
79
  $font-table_base-fontSize: 14px; // 表格默认文本字号
package/tag/tag.scss CHANGED
@@ -18,6 +18,7 @@ $types: "ghost", "solid", "light";
18
18
  // hidden avatar tag image
19
19
  overflow: hidden;
20
20
  white-space: nowrap;
21
+ vertical-align: bottom;
21
22
 
22
23
  &-default,
23
24
  &-small {