@nutui/nutui-react 1.4.6-beta.0 → 1.4.7-beta.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 (66) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/esm/Button.js +6 -3
  3. package/dist/esm/CheckboxGroup.js +1 -1
  4. package/dist/esm/Elevator.js +1 -0
  5. package/dist/esm/Ellipsis.js +1 -4
  6. package/dist/esm/Form.js +11 -11
  7. package/dist/esm/FormItem.js +2 -2
  8. package/dist/esm/Notify.js +0 -1
  9. package/dist/esm/NumberKeyboard.js +3 -0
  10. package/dist/esm/Popup.js +4 -2
  11. package/dist/esm/Progress.js +6 -72
  12. package/dist/esm/Radio.js +2 -2
  13. package/dist/esm/RadioGroup.js +1 -1
  14. package/dist/esm/SearchBar.js +3 -1
  15. package/dist/esm/Swipe.js +7 -2
  16. package/dist/esm/Swiper.js +7 -2
  17. package/dist/esm/Tabbar.js +1 -1
  18. package/dist/esm/TabbarItem.js +7 -5
  19. package/dist/esm/Tag.js +5 -3
  20. package/dist/esm/{formitem-9d18eb24.js → formitem-bab4c481.js} +18 -4
  21. package/dist/esm/{radio-cf953c7a.js → radio-e3ac1cef.js} +4 -4
  22. package/dist/esm/types/src/packages/button/button.d.ts +1 -0
  23. package/dist/esm/types/src/packages/elevator/elevator.d.ts +3 -1
  24. package/dist/esm/types/src/packages/formitem/formitem.d.ts +1 -0
  25. package/dist/esm/types/src/packages/notify/notify.d.ts +0 -1
  26. package/dist/esm/types/src/packages/numberkeyboard/numberkeyboard.d.ts +1 -0
  27. package/dist/esm/types/src/packages/popup/popup.d.ts +1 -0
  28. package/dist/esm/types/src/packages/progress/progress.d.ts +0 -1
  29. package/dist/esm/types/src/packages/searchbar/searchbar.d.ts +1 -0
  30. package/dist/esm/types/src/packages/swipe/swipe.d.ts +4 -1
  31. package/dist/esm/types/src/packages/tabbar/demo.d.ts +1 -0
  32. package/dist/esm/types/src/packages/tabbaritem/tabbaritem.d.ts +1 -0
  33. package/dist/esm/types/src/packages/tag/tag.d.ts +1 -0
  34. package/dist/locales/base.js +1 -1
  35. package/dist/locales/en-US.js +1 -1
  36. package/dist/locales/id-ID.js +1 -1
  37. package/dist/locales/zh-CN.js +1 -1
  38. package/dist/locales/zh-TW.js +1 -1
  39. package/dist/locales/zh-UG.js +1 -1
  40. package/dist/nutui.react.es.js +296 -336
  41. package/dist/nutui.react.umd.js +296 -336
  42. package/dist/packages/address/address.scss +23 -2
  43. package/dist/packages/button/button.scss +23 -1
  44. package/dist/packages/calendar/calendar.scss +3 -3
  45. package/dist/packages/elevator/elevator.scss +1 -1
  46. package/dist/packages/numberkeyboard/numberkeyboard.scss +10 -2
  47. package/dist/packages/popup/popup.scss +4 -4
  48. package/dist/packages/progress/progress.scss +26 -3
  49. package/dist/packages/radio/radio.scss +1 -1
  50. package/dist/packages/radiogroup/radiogroup.scss +15 -2
  51. package/dist/packages/searchbar/searchbar.scss +35 -7
  52. package/dist/packages/shortpassword/shortpassword.scss +12 -1
  53. package/dist/packages/swiper/swiper.scss +1 -1
  54. package/dist/packages/switch/switch.scss +15 -2
  55. package/dist/packages/tabbar/tabbar.scss +17 -3
  56. package/dist/packages/tabbaritem/tabbaritem.scss +26 -17
  57. package/dist/packages/tag/tag.scss +3 -1
  58. package/dist/style.css +1 -1
  59. package/dist/style.es.js +1 -1
  60. package/dist/styles/theme-dark.scss +1 -0
  61. package/dist/styles/theme-default.scss +1 -0
  62. package/dist/styles/variables.scss +100 -19
  63. package/dist/types/index.d.ts +15 -4
  64. package/package.json +8 -7
  65. package/dist/esm/types/src/packages/icon/icon.taro.d.ts +0 -18
  66. package/dist/styles/temp.scss +0 -2340
@@ -18,7 +18,7 @@
18
18
  display: flex;
19
19
  position: absolute;
20
20
  left: 50%;
21
- bottom: 12px;
21
+ bottom: $swiper-pagination-bottom;
22
22
  transform: translateX(-50%);
23
23
  i {
24
24
  width: $swiper-pagination-item-width;
@@ -1,9 +1,11 @@
1
1
  .nut-theme-dark {
2
2
  .nut-switch {
3
3
  background-color: $dark4;
4
+
4
5
  &.switch-close {
5
6
  color: $dark1;
6
7
  }
8
+
7
9
  .switch-button {
8
10
  .close {
9
11
  color: $dark4;
@@ -22,48 +24,59 @@
22
24
  background-repeat: no-repeat;
23
25
  background-position: center center;
24
26
  flex: 0 0 auto; // 防止被压缩
27
+
25
28
  &.switch-close {
26
29
  background-color: $switch-close-bg-color;
30
+
27
31
  .close-line {
28
32
  background: $switch-close--cline-bg-color;
29
33
  border-radius: 2px;
30
34
  }
31
35
  }
36
+
32
37
  .switch-button {
33
38
  display: flex;
34
39
  align-items: center;
35
40
  justify-content: center;
36
41
  border-radius: 50%;
37
- background: $white;
42
+ background: $primary-text-color;
38
43
  transition: transform 0.3s;
44
+
39
45
  .nut-switch__label {
40
- color: $white;
46
+ color: $primary-text-color;
41
47
  font-size: $font-size-1;
48
+
42
49
  &.open {
43
50
  transform: translateX(-16px);
44
51
  }
52
+
45
53
  &.close {
46
54
  transform: translateX(16px);
47
55
  }
48
56
  }
49
57
  }
58
+
50
59
  &-disable {
51
60
  opacity: 0.6;
52
61
  }
62
+
53
63
  &-base {
54
64
  width: $switch-width;
55
65
  height: $switch-height;
56
66
  line-height: $switch-line-height;
67
+
57
68
  .switch-button {
58
69
  height: $switch-inside-height;
59
70
  width: $switch-inside-width;
60
71
  transform: $switch-inside-close-transform;
61
72
  }
73
+
62
74
  &.switch-open {
63
75
  .switch-button {
64
76
  transform: $switch-inside-open-transform;
65
77
  }
66
78
  }
79
+
67
80
  &.switch-close {
68
81
  .close-line {
69
82
  width: 8px;
@@ -3,14 +3,17 @@
3
3
  background: $dark4;
4
4
  }
5
5
  }
6
+
6
7
  .nut-tabbar {
7
8
  border: 0px;
8
9
  box-shadow: $tabbar-box-shadow;
9
10
  border-bottom: $tabbar-border-bottom;
10
11
  border-top: $tabbar-border-top;
12
+ height: $tabbar-height;
11
13
  width: 100%;
12
14
  display: flex;
13
- padding: 7px 0;
15
+ justify-content: center;
16
+ align-items: center;
14
17
  box-sizing: border-box;
15
18
  background: $white;
16
19
 
@@ -26,7 +29,18 @@
26
29
  }
27
30
 
28
31
  &__safebottom {
29
- padding-bottom: constant(safe-area-inset-bottom);
30
- padding-bottom: env(safe-area-inset-bottom);
32
+ bottom: constant(safe-area-inset-bottom);
33
+ bottom: env(safe-area-inset-bottom);
34
+
35
+ &::after {
36
+ content: '';
37
+ z-index: 90;
38
+ position: fixed;
39
+ left: 0;
40
+ bottom: 0;
41
+ height: env(safe-area-inset-bottom);
42
+ width: 100%;
43
+ background-color: #fff;
44
+ }
31
45
  }
32
46
  }
@@ -1,6 +1,8 @@
1
+
1
2
  .nut-theme-dark {
2
3
  .nut-tabbar-item {
3
4
  color: $dark1;
5
+
4
6
  &--active {
5
7
  color: $primary-color;
6
8
  }
@@ -8,14 +10,15 @@
8
10
  }
9
11
 
10
12
  .nut-tabbar-item {
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ align-items: center;
11
17
  flex: 1;
12
18
  text-align: center;
13
19
  text-decoration: none;
14
20
  color: $gray1;
15
21
  height: 100%;
16
- display: flex;
17
- justify-content: center;
18
- align-items: center;
19
22
 
20
23
  &--active {
21
24
  color: $primary-color;
@@ -34,55 +37,61 @@
34
37
  border: 1px solid $white;
35
38
  border-radius: 7px;
36
39
  text-align: center;
37
- top: -2px;
38
- right: -7px;
40
+ top: calc(50% - 6px);
41
+ right: calc(50% - 16px);
39
42
  box-shadow: 0 0 0 1px $white;
40
43
  font-size: $font-size-1;
41
- color: $white;
44
+ color: $primary-text-color;
42
45
  z-index: 1;
43
46
  }
47
+
44
48
  &__dot {
45
49
  position: absolute;
46
50
  width: 7px;
47
51
  height: 7px;
52
+ border: 0;
48
53
  border-radius: 7px;
49
54
  padding: 0px;
50
55
  background: $tabbar-active-color;
51
- text-align: center;
52
- font-size: 12px;
53
- font-weight: normal;
54
- color: #fff;
55
- top: 0;
56
- right: 0;
56
+ top: $tabbar-dot-top;
57
+ right: calc(50% - $tabbar-dot-right);
57
58
  transform: translate(50%, -50%);
58
59
  }
59
60
 
60
61
  &__num {
61
62
  line-height: 1;
62
63
  font-size: $tabbar-item-text-font-size;
63
- color: $white;
64
+ color: $primary-text-color;
64
65
  padding: 1px 2px 2px 3px;
66
+ top: calc(-50% + 6px);
67
+ right: calc(-50%);
65
68
  }
66
69
 
67
70
  &__nums {
68
71
  line-height: 1;
69
72
  font-size: $tabbar-item-text-font-size;
70
- color: $white;
73
+ color: $primary-text-color;
71
74
  padding: 2px 1px 2px 2px;
75
+ top: calc(-50% + 6px);
76
+ right: calc(-50% - 8px);
72
77
  }
78
+
73
79
  &__icon {
74
80
  display: block;
75
81
  background-size: 100% 100%;
76
82
  background-position: center center;
77
83
  }
84
+
78
85
  &--nav-word {
79
- font-size: $font-size-0;
80
- line-height: $tabbar-item-text-line-height;
81
86
  display: block;
87
+ font-size: $font-size-0;
88
+ margin-top: $tabbar-word-margin-top;
82
89
  }
90
+
83
91
  &--big-word {
84
92
  font-size: $font-size-large;
85
- line-height: 1;
93
+ margin-top: 0;
94
+ line-height: $tabbar-item-text-line-height;
86
95
  }
87
96
  }
88
97
  }
@@ -1,11 +1,13 @@
1
+
1
2
  .nut-tag {
2
- padding: 0 4px;
3
+ padding: $tag-padding;
3
4
  display: inline-flex;
4
5
  justify-content: center;
5
6
  align-items: center;
6
7
  font-size: $tag-font-size;
7
8
  border-radius: $tag-default-border-radius;
8
9
  height: $tag-height;
10
+
9
11
  ._icon {
10
12
  vertical-align: middle;
11
13
  margin-left: 4px;