@nutui/nutui-react 3.0.0-beta.1 → 3.0.0-beta.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 (23) hide show
  1. package/dist/cjs/packages/input/style/input.scss +4 -0
  2. package/dist/cjs/packages/input/style/style.css +4 -0
  3. package/dist/cjs/packages/toast/Notification.js +13 -24
  4. package/dist/cjs/packages/toast/style/style.css +56 -30
  5. package/dist/cjs/packages/toast/style/toast.scss +65 -49
  6. package/dist/cjs/packages/toast/toast.js +2 -2
  7. package/dist/cjs/packages/trendarrow/style/style.css +2 -1
  8. package/dist/cjs/packages/trendarrow/style/trendarrow.scss +2 -1
  9. package/dist/es/packages/input/style/input.scss +4 -0
  10. package/dist/es/packages/input/style/style.css +4 -0
  11. package/dist/es/packages/toast/Notification.js +14 -25
  12. package/dist/es/packages/toast/style/style.css +56 -30
  13. package/dist/es/packages/toast/style/toast.scss +65 -49
  14. package/dist/es/packages/toast/toast.d.ts +12 -60
  15. package/dist/es/packages/toast/toast.js +2 -2
  16. package/dist/es/packages/trendarrow/style/style.css +2 -1
  17. package/dist/es/packages/trendarrow/style/trendarrow.scss +2 -1
  18. package/dist/es/packages/trendarrow/trendarrow.d.ts +11 -55
  19. package/dist/nutui.react.umd.js +49 -36
  20. package/dist/style.css +1 -1
  21. package/dist/styles/themes/default.scss +37 -37
  22. package/dist/styles/variables-jrkf.scss +21 -27
  23. package/package.json +1 -1
package/dist/cjs/packages/input/style/input.scss CHANGED
@@ -47,3 +47,7 @@
47
47
  -webkit-text-fill-color: $input-disabled-color;
48
48
  }
49
49
  }
50
+
51
+ .nut-input-clear {
52
+ flex: 0;
53
+ }
package/dist/cjs/packages/input/style/style.css CHANGED
@@ -43,4 +43,8 @@
43
43
  background: none;
44
44
  opacity: 1;
45
45
  -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
46
+ }
47
+
48
+ .nut-input-clear {
49
+ flex: 0;
46
50
  }
package/dist/cjs/packages/toast/Notification.js CHANGED
@@ -92,25 +92,14 @@ var Notification = /*#__PURE__*/ function(_superClass) {
92
92
  value: function renderIcon() {
93
93
  var icon = this.props.icon;
94
94
  if (typeof icon === 'string') {
95
- var iconNode = null;
96
- switch(icon){
97
- case 'success':
98
- iconNode = /*#__PURE__*/ _react.createElement(_iconsreact.Check, null);
99
- break;
100
- case 'loading':
101
- iconNode = /*#__PURE__*/ _react.createElement(_iconsreact.Loading, {
102
- className: "nut-icon-loading"
103
- });
104
- break;
105
- case 'fail':
106
- iconNode = /*#__PURE__*/ _react.createElement(_iconsreact.Failure, null);
107
- break;
108
- case 'warn':
109
- iconNode = /*#__PURE__*/ _react.createElement(_iconsreact.Tips, null);
110
- break;
111
- default:
112
- break;
113
- }
95
+ var iconNode = {
96
+ success: /*#__PURE__*/ _react.createElement(_iconsreact.Success, null),
97
+ fail: /*#__PURE__*/ _react.createElement(_iconsreact.Failure, null),
98
+ warn: /*#__PURE__*/ _react.createElement(_iconsreact.Tips, null),
99
+ loading: /*#__PURE__*/ _react.createElement(_iconsreact.Loading, {
100
+ className: "nut-icon-loading"
101
+ })
102
+ }[icon];
114
103
  return /*#__PURE__*/ _react.createElement("p", {
115
104
  className: "".concat(classPrefix, "-icon-wrapper")
116
105
  }, iconNode);
@@ -136,9 +125,9 @@ var Notification = /*#__PURE__*/ function(_superClass) {
136
125
  var _this = this;
137
126
  var _this_props = this.props, id = _this_props.id, icon = _this_props.icon, title = _this_props.title, content = _this_props.content, position = _this_props.position, size = _this_props.size, closeOnOverlayClick = _this_props.closeOnOverlayClick, lockScroll = _this_props.lockScroll, style = _this_props.style, className = _this_props.className, contentClassName = _this_props.contentClassName, contentStyle = _this_props.contentStyle, wordBreak = _this_props.wordBreak;
138
127
  var show = this.state.show;
139
- var classes = (0, _classnames.default)((0, _define_property._)({
128
+ var classes = (0, _classnames.default)({
140
129
  'nut-toast-has-icon': icon
141
- }, "nut-toast-".concat(size), true));
130
+ });
142
131
  return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_index.default, {
143
132
  visible: show,
144
133
  style: style,
@@ -152,12 +141,12 @@ var Notification = /*#__PURE__*/ function(_superClass) {
152
141
  className: "".concat(classPrefix, " ").concat(classes),
153
142
  id: "toast-".concat(id)
154
143
  }, /*#__PURE__*/ _react.createElement("div", {
155
- className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(wordBreak),
156
- style: contentStyle
144
+ className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(classPrefix, "-inner-").concat(size, " ").concat(classPrefix, "-inner-").concat(wordBreak),
145
+ style: (0, _object_spread._)({}, contentStyle)
157
146
  }, this.renderIcon(), title ? /*#__PURE__*/ _react.createElement("div", {
158
147
  className: "".concat(classPrefix, "-title")
159
148
  }, title) : null, /*#__PURE__*/ _react.createElement("span", {
160
- className: "".concat(classPrefix, "-text")
149
+ className: "".concat(classPrefix, "-text ").concat(content ? '' : "".concat(classPrefix, "-text-empty"))
161
150
  }, content)))));
162
151
  }
163
152
  }
package/dist/cjs/packages/toast/style/style.css CHANGED
@@ -7,12 +7,20 @@
7
7
  }
8
8
  }
9
9
  .nut-toast {
10
+ /* #ifdef rn */
11
+ position: absolute;
12
+ /* #endif */
13
+ /* #ifndef rn */
10
14
  position: fixed;
15
+ /* #endif */
11
16
  left: 0;
12
17
  top: 0;
18
+ display: flex;
19
+ flex-direction: row;
20
+ justify-content: center;
21
+ align-items: center;
13
22
  width: 100%;
14
23
  height: 100%;
15
- text-align: center;
16
24
  pointer-events: none;
17
25
  z-index: 1300;
18
26
  }
@@ -20,18 +28,24 @@
20
28
  --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
21
29
  --nutui-overlay-zIndex: 1300;
22
30
  }
23
- .nut-toast-small .nut-toast-inner {
24
- font-size: var(--nutui-font-size-s, 12px);
25
- }
26
- .nut-toast-large .nut-toast-inner {
27
- font-size: var(--nutui-font-size-l, 16px);
31
+ .nut-toast-overlay-default-taro {
32
+ /* #ifdef harmony */
33
+ background-color: rgba(0, 0, 0, 0);
34
+ z-index: 1300;
35
+ /* #endif */
36
+ /* #ifndef harmony */
37
+ --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
38
+ --nutui-overlay-zIndex: 1300;
39
+ /* #endif */
28
40
  }
29
41
  .nut-toast-inner {
30
- display: flex;
31
- flex-direction: column;
32
42
  position: absolute;
33
- left: 50%;
34
43
  top: var(--nutui-toast-inner-top, 50%);
44
+ transform: translate(0, -50%);
45
+ display: flex;
46
+ flex-direction: column;
47
+ justify-content: center;
48
+ align-items: center;
35
49
  min-width: 30%;
36
50
  max-width: 95.7%;
37
51
  font-size: var(--nutui-toast-text-font-size, 14px);
@@ -41,18 +55,28 @@
41
55
  background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
42
56
  border-radius: var(--nutui-toast-inner-border-radius, 16px);
43
57
  color: var(--nutui-toast-font-color, #ffffff);
44
- transform: translate(-50%, -50%);
45
58
  }
46
- .nut-toast-inner.normal {
59
+ .nut-toast-inner-normal {
47
60
  word-break: normal;
48
61
  word-wrap: normal;
49
62
  }
50
- .nut-toast-inner.break-word {
63
+ .nut-toast-inner-break-word {
51
64
  word-break: normal;
52
65
  word-wrap: break-word;
53
66
  }
67
+ .nut-toast-inner-small {
68
+ font-size: var(--nutui-font-size-s, 12px);
69
+ }
70
+ .nut-toast-inner-large {
71
+ font-size: var(--nutui-font-size-l, 16px);
72
+ }
54
73
  .nut-toast-center {
55
- top: var(--nutui-toast-inner-top, 50%);
74
+ /* #ifdef rn */
75
+ top: var(--nutui-toast-inner-top, 38%);
76
+ /* #endif */
77
+ /* #ifndef rn */
78
+ top: var(--nutui-toast-inner-top, 48%);
79
+ /* #endif */
56
80
  }
57
81
  .nut-toast-bottom {
58
82
  top: var(--nutui-toast-inner-top, 80%);
@@ -60,40 +84,43 @@
60
84
  .nut-toast-top {
61
85
  top: var(--nutui-toast-inner-top, 20%);
62
86
  }
63
- .nut-toast-text:empty {
87
+ .nut-toast-text {
88
+ color: #ffffff;
89
+ text-align: var(--nutui-toast-inner-text-align, center);
90
+ }
91
+ .nut-toast-text-empty {
64
92
  margin-bottom: -8px;
65
93
  }
66
94
  .nut-toast-title {
67
95
  color: #ffffff;
68
96
  font-size: var(--nutui-toast-title-font-size, 16px);
69
97
  font-weight: 500;
98
+ text-align: var(--nutui-toast-inner-text-align, center);
70
99
  }
71
- .nut-toast-title:empty {
72
- margin-bottom: -8px;
100
+ .nut-toast-icon {
101
+ width: 24px;
102
+ height: 24px;
103
+ color: #ffffff;
73
104
  }
74
- .nut-toast-has-icon .nut-toast-icon-wrapper {
105
+ .nut-toast-icon-wrapper {
75
106
  width: 100%;
76
107
  display: flex;
77
108
  align-items: center;
78
109
  justify-content: center;
79
110
  margin-bottom: 8px;
111
+ color: #ffffff;
80
112
  }
81
- .nut-toast-has-icon .nut-toast-icon-wrapper .nut-icon {
113
+ .nut-toast-icon-wrapper-icon {
82
114
  width: 24px;
83
115
  height: 24px;
84
116
  }
85
- .nut-toast-loading .nut-toast-inner {
86
- display: inline-flex;
87
- flex-direction: column;
88
- justify-content: center;
89
- align-items: center;
90
- }
91
- .nut-toast-loading .nut-toast-icon-wrapper {
92
- animation: rotation 2s linear infinite;
117
+ .nut-toast-rtl {
118
+ left: auto;
119
+ right: 0;
93
120
  }
94
- .nut-toast-loading .nut-toast-icon-wrapper .nut-icon {
95
- width: 24px;
96
- height: 24px;
121
+ .nut-toast-rtl-inner {
122
+ left: auto;
123
+ right: 50%;
97
124
  }
98
125
 
99
126
  [dir=rtl] .nut-toast,
@@ -105,7 +132,6 @@
105
132
  .nut-rtl .nut-toast-inner {
106
133
  left: auto;
107
134
  right: 50%;
108
- transform: translate(50%, -50%);
109
135
  }
110
136
 
111
137
  .toast-fade-enter-active {
package/dist/cjs/packages/toast/style/toast.scss CHANGED
@@ -9,12 +9,20 @@
9
9
  }
10
10
 
11
11
  .nut-toast {
12
+ /* #ifdef rn */
13
+ position: absolute;
14
+ /* #endif */
15
+ /* #ifndef rn */
12
16
  position: fixed;
17
+ /* #endif */
13
18
  left: 0;
14
19
  top: 0;
20
+ display: flex;
21
+ flex-direction: row;
22
+ justify-content: center;
23
+ align-items: center;
15
24
  width: 100%;
16
25
  height: 100%;
17
- text-align: center;
18
26
  pointer-events: none;
19
27
  z-index: 1300;
20
28
 
@@ -23,24 +31,25 @@
23
31
  --nutui-overlay-zIndex: 1300;
24
32
  }
25
33
 
26
- &-small {
27
- .nut-toast-inner {
28
- font-size: $font-size-s;
29
- }
30
- }
31
-
32
- &-large {
33
- .nut-toast-inner {
34
- font-size: $font-size-l;
35
- }
34
+ &-overlay-default-taro {
35
+ /* #ifdef harmony */
36
+ background-color: rgba(0, 0, 0, 0);
37
+ z-index: 1300;
38
+ /* #endif */
39
+ /* #ifndef harmony */
40
+ --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
41
+ --nutui-overlay-zIndex: 1300;
42
+ /* #endif */
36
43
  }
37
44
 
38
45
  &-inner {
39
- display: flex;
40
- flex-direction: column;
41
46
  position: absolute;
42
- left: 50%;
43
47
  top: $toast-inner-top;
48
+ transform: translate(-0, -50%);
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ align-items: center;
44
53
  min-width: 30%;
45
54
  max-width: 95.7%;
46
55
  font-size: $toast-text-font-size;
@@ -50,21 +59,33 @@
50
59
  background: $toast-inner-bg-color;
51
60
  border-radius: $toast-inner-border-radius;
52
61
  color: $toast-font-color;
53
- transform: translate(-50%, -50%);
54
62
 
55
- &.normal {
63
+ &-normal {
56
64
  word-break: normal;
57
65
  word-wrap: normal;
58
66
  }
59
67
 
60
- &.break-word {
68
+ &-break-word {
61
69
  word-break: normal;
62
70
  word-wrap: break-word;
63
71
  }
72
+
73
+ &-small {
74
+ font-size: $font-size-s;
75
+ }
76
+
77
+ &-large {
78
+ font-size: $font-size-l;
79
+ }
64
80
  }
65
81
 
66
82
  &-center {
67
- top: var(--nutui-toast-inner-top, 50%);
83
+ /* #ifdef rn */
84
+ top: var(--nutui-toast-inner-top, 38%);
85
+ /* #endif */
86
+ /* #ifndef rn */
87
+ top: var(--nutui-toast-inner-top, 48%);
88
+ /* #endif */
68
89
  }
69
90
 
70
91
  &-bottom {
@@ -76,7 +97,9 @@
76
97
  }
77
98
 
78
99
  &-text {
79
- &:empty {
100
+ color: #ffffff;
101
+ text-align: $toast-inner-text-align;
102
+ &-empty {
80
103
  margin-bottom: -8px;
81
104
  }
82
105
  }
@@ -85,42 +108,36 @@
85
108
  color: #ffffff;
86
109
  font-size: $toast-title-font-size;
87
110
  font-weight: 500;
88
-
89
- &:empty {
90
- margin-bottom: -8px;
91
- }
111
+ text-align: $toast-inner-text-align;
92
112
  }
93
113
 
94
- &-has-icon {
95
- .nut-toast-icon-wrapper {
96
- width: 100%;
97
- display: flex;
98
- align-items: center;
99
- justify-content: center;
100
- margin-bottom: 8px;
101
-
102
- .nut-icon {
103
- width: 24px;
104
- height: 24px;
105
- }
106
- }
114
+ &-icon {
115
+ width: 24px;
116
+ height: 24px;
117
+ color: #ffffff;
107
118
  }
108
119
 
109
- &-loading {
110
- .nut-toast-inner {
111
- display: inline-flex;
112
- flex-direction: column;
113
- justify-content: center;
114
- align-items: center;
120
+ &-icon-wrapper {
121
+ width: 100%;
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ margin-bottom: 8px;
126
+ color: #ffffff;
127
+
128
+ &-icon {
129
+ width: 24px;
130
+ height: 24px;
115
131
  }
132
+ }
116
133
 
117
- .nut-toast-icon-wrapper {
118
- animation: rotation 2s linear infinite;
134
+ &-rtl {
135
+ left: auto;
136
+ right: 0;
119
137
 
120
- .nut-icon {
121
- width: 24px;
122
- height: 24px;
123
- }
138
+ &-inner {
139
+ left: auto;
140
+ right: 50%;
124
141
  }
125
142
  }
126
143
  }
@@ -133,7 +150,6 @@
133
150
  &-inner {
134
151
  left: auto;
135
152
  right: 50%;
136
- transform: translate(50%, -50%);
137
153
  }
138
154
  }
139
155
 
package/dist/cjs/packages/toast/toast.js CHANGED
@@ -23,11 +23,11 @@ var options = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.Com
23
23
  title: '',
24
24
  size: 'base',
25
25
  icon: null,
26
- onClose: function onClose() {},
27
26
  closeOnOverlayClick: false,
28
27
  lockScroll: false,
29
28
  contentClassName: '',
30
- wordBreak: 'break-all'
29
+ wordBreak: 'break-all',
30
+ onClose: function onClose() {}
31
31
  });
32
32
  function getInstance(props, callback) {
33
33
  if (messageInstance) {
package/dist/cjs/packages/trendarrow/style/style.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .nut-trendarrow {
2
- display: inline-flex;
2
+ display: flex;
3
+ flex-direction: row;
3
4
  align-items: center;
4
5
  color: var(--nutui-color-title, #1a1a1a);
5
6
  font-size: var(--nutui-trendarrow-font-size, 14px);
package/dist/cjs/packages/trendarrow/style/trendarrow.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  .nut-trendarrow {
2
- display: inline-flex;
2
+ display: flex;
3
+ flex-direction: row;
3
4
  align-items: center;
4
5
  color: $color-title;
5
6
  font-size: $trendarrow-font-size;
package/dist/es/packages/input/style/input.scss CHANGED
@@ -47,3 +47,7 @@
47
47
  -webkit-text-fill-color: $input-disabled-color;
48
48
  }
49
49
  }
50
+
51
+ .nut-input-clear {
52
+ flex: 0;
53
+ }
package/dist/es/packages/input/style/style.css CHANGED
@@ -43,4 +43,8 @@
43
43
  background: none;
44
44
  opacity: 1;
45
45
  -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
46
+ }
47
+
48
+ .nut-input-clear {
49
+ flex: 0;
46
50
  }
package/dist/es/packages/toast/Notification.js CHANGED
@@ -7,7 +7,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
7
7
  import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
8
8
  import * as React from "react";
9
9
  import classNames from "classnames";
10
- import { Check, Loading, Failure, Tips } from "@nutui/icons-react";
10
+ import { Success, Loading, Failure, Tips } from "@nutui/icons-react";
11
11
  import { render, unmount } from "../../utils/render";
12
12
  import Overlay from "../overlay/index";
13
13
  var classPrefix = 'nut-toast';
@@ -80,25 +80,14 @@ var Notification = /*#__PURE__*/ function(_superClass) {
80
80
  value: function renderIcon() {
81
81
  var icon = this.props.icon;
82
82
  if (typeof icon === 'string') {
83
- var iconNode = null;
84
- switch(icon){
85
- case 'success':
86
- iconNode = /*#__PURE__*/ React.createElement(Check, null);
87
- break;
88
- case 'loading':
89
- iconNode = /*#__PURE__*/ React.createElement(Loading, {
90
- className: "nut-icon-loading"
91
- });
92
- break;
93
- case 'fail':
94
- iconNode = /*#__PURE__*/ React.createElement(Failure, null);
95
- break;
96
- case 'warn':
97
- iconNode = /*#__PURE__*/ React.createElement(Tips, null);
98
- break;
99
- default:
100
- break;
101
- }
83
+ var iconNode = {
84
+ success: /*#__PURE__*/ React.createElement(Success, null),
85
+ fail: /*#__PURE__*/ React.createElement(Failure, null),
86
+ warn: /*#__PURE__*/ React.createElement(Tips, null),
87
+ loading: /*#__PURE__*/ React.createElement(Loading, {
88
+ className: "nut-icon-loading"
89
+ })
90
+ }[icon];
102
91
  return /*#__PURE__*/ React.createElement("p", {
103
92
  className: "".concat(classPrefix, "-icon-wrapper")
104
93
  }, iconNode);
@@ -124,9 +113,9 @@ var Notification = /*#__PURE__*/ function(_superClass) {
124
113
  var _this = this;
125
114
  var _this_props = this.props, id = _this_props.id, icon = _this_props.icon, title = _this_props.title, content = _this_props.content, position = _this_props.position, size = _this_props.size, closeOnOverlayClick = _this_props.closeOnOverlayClick, lockScroll = _this_props.lockScroll, style = _this_props.style, className = _this_props.className, contentClassName = _this_props.contentClassName, contentStyle = _this_props.contentStyle, wordBreak = _this_props.wordBreak;
126
115
  var show = this.state.show;
127
- var classes = classNames(_define_property({
116
+ var classes = classNames({
128
117
  'nut-toast-has-icon': icon
129
- }, "nut-toast-".concat(size), true));
118
+ });
130
119
  return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Overlay, {
131
120
  visible: show,
132
121
  style: style,
@@ -140,12 +129,12 @@ var Notification = /*#__PURE__*/ function(_superClass) {
140
129
  className: "".concat(classPrefix, " ").concat(classes),
141
130
  id: "toast-".concat(id)
142
131
  }, /*#__PURE__*/ React.createElement("div", {
143
- className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(wordBreak),
144
- style: contentStyle
132
+ className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(classPrefix, "-inner-").concat(size, " ").concat(classPrefix, "-inner-").concat(wordBreak),
133
+ style: _object_spread({}, contentStyle)
145
134
  }, this.renderIcon(), title ? /*#__PURE__*/ React.createElement("div", {
146
135
  className: "".concat(classPrefix, "-title")
147
136
  }, title) : null, /*#__PURE__*/ React.createElement("span", {
148
- className: "".concat(classPrefix, "-text")
137
+ className: "".concat(classPrefix, "-text ").concat(content ? '' : "".concat(classPrefix, "-text-empty"))
149
138
  }, content)))));
150
139
  }
151
140
  }