@nutui/nutui-react 3.0.0 → 3.0.1

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 (147) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/packages/actionsheet/style/style.css +12 -0
  3. package/dist/cjs/packages/address/style/style.css +12 -0
  4. package/dist/cjs/packages/calendar/style/style.css +12 -0
  5. package/dist/cjs/packages/cascader/style/style.css +12 -0
  6. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  7. package/dist/cjs/packages/datepicker/datepicker.js +8 -6
  8. package/dist/cjs/packages/datepicker/style/style.css +12 -0
  9. package/dist/cjs/packages/datepickerview/datepickerview.d.ts +3 -0
  10. package/dist/cjs/packages/datepickerview/datepickerview.js +118 -0
  11. package/dist/cjs/packages/datepickerview/index.d.ts +3 -0
  12. package/dist/cjs/packages/{subsidenavbar → datepickerview}/index.js +2 -2
  13. package/dist/cjs/packages/datepickerview/style/datepickerview.scss +4 -0
  14. package/dist/cjs/packages/datepickerview/style/index.js +1 -0
  15. package/dist/cjs/packages/datepickerview/style/style.css +8 -0
  16. package/dist/cjs/packages/datepickerview/types.d.ts +15 -0
  17. package/dist/cjs/packages/datepickerview/types.js +4 -0
  18. package/dist/cjs/packages/dialog/dialogwrap.js +3 -0
  19. package/dist/cjs/packages/dialog/style/dialog.scss +0 -1
  20. package/dist/cjs/packages/dialog/style/style.css +0 -1
  21. package/dist/cjs/packages/drag/style/drag.scss +1 -0
  22. package/dist/cjs/packages/drag/style/style.css +1 -0
  23. package/dist/cjs/packages/imagepreview/style/style.css +12 -0
  24. package/dist/cjs/packages/input/style/input.scss +6 -4
  25. package/dist/cjs/packages/input/style/style.css +4 -0
  26. package/dist/cjs/packages/numberkeyboard/style/style.css +12 -0
  27. package/dist/cjs/packages/nutui.react.build.d.ts +11 -15
  28. package/dist/cjs/packages/nutui.react.build.js +8 -16
  29. package/dist/cjs/packages/nutui.react.d.ts +16 -22
  30. package/dist/cjs/packages/nutui.react.js +13 -23
  31. package/dist/cjs/packages/nutui.react.scss.d.ts +5 -7
  32. package/dist/cjs/packages/nutui.react.scss.js +5 -7
  33. package/dist/cjs/packages/overlay/style/overlay.scss +0 -4
  34. package/dist/cjs/packages/picker/style/style.css +12 -0
  35. package/dist/cjs/packages/popover/style/style.css +12 -0
  36. package/dist/cjs/packages/popup/style/popup.scss +12 -4
  37. package/dist/cjs/packages/popup/style/style.css +12 -0
  38. package/dist/cjs/packages/shortpassword/shortpassword.js +5 -7
  39. package/dist/cjs/packages/shortpassword/style/shortpassword.scss +10 -0
  40. package/dist/cjs/packages/shortpassword/style/style.css +21 -0
  41. package/dist/cjs/packages/tabbar/style/style.css +6 -0
  42. package/dist/cjs/packages/tabbaritem/style/style.css +6 -0
  43. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +6 -0
  44. package/dist/cjs/packages/timeselect/style/style.css +12 -0
  45. package/dist/cjs/packages/tour/style/style.css +12 -0
  46. package/dist/es/packages/actionsheet/style/style.css +12 -0
  47. package/dist/es/packages/address/style/style.css +12 -0
  48. package/dist/es/packages/calendar/style/style.css +12 -0
  49. package/dist/es/packages/cascader/style/style.css +12 -0
  50. package/dist/es/packages/configprovider/types.d.ts +1 -1
  51. package/dist/es/packages/datepicker/datepicker.js +8 -6
  52. package/dist/es/packages/datepicker/style/style.css +12 -0
  53. package/dist/es/packages/datepickerview/datepickerview.d.ts +3 -0
  54. package/dist/es/packages/datepickerview/datepickerview.js +106 -0
  55. package/dist/es/packages/datepickerview/index.d.ts +3 -0
  56. package/dist/es/packages/datepickerview/index.js +2 -0
  57. package/dist/es/packages/datepickerview/style/datepickerview.scss +4 -0
  58. package/dist/es/packages/datepickerview/style/index.js +1 -0
  59. package/dist/es/packages/datepickerview/style/style.css +8 -0
  60. package/dist/es/packages/datepickerview/types.d.ts +15 -0
  61. package/dist/es/packages/datepickerview/types.js +1 -0
  62. package/dist/es/packages/dialog/dialogwrap.js +3 -0
  63. package/dist/es/packages/dialog/style/dialog.scss +0 -1
  64. package/dist/es/packages/dialog/style/style.css +0 -1
  65. package/dist/es/packages/drag/style/drag.scss +1 -0
  66. package/dist/es/packages/drag/style/style.css +1 -0
  67. package/dist/es/packages/imagepreview/style/style.css +12 -0
  68. package/dist/es/packages/input/style/input.scss +6 -4
  69. package/dist/es/packages/input/style/style.css +4 -0
  70. package/dist/es/packages/numberkeyboard/style/style.css +12 -0
  71. package/dist/es/packages/nutui.react.build.d.ts +11 -15
  72. package/dist/es/packages/nutui.react.build.js +11 -15
  73. package/dist/es/packages/overlay/style/overlay.scss +0 -4
  74. package/dist/es/packages/picker/style/style.css +12 -0
  75. package/dist/es/packages/popover/style/style.css +12 -0
  76. package/dist/es/packages/popup/style/popup.scss +12 -4
  77. package/dist/es/packages/popup/style/style.css +12 -0
  78. package/dist/es/packages/shortpassword/shortpassword.js +5 -7
  79. package/dist/es/packages/shortpassword/style/shortpassword.scss +10 -0
  80. package/dist/es/packages/shortpassword/style/style.css +21 -0
  81. package/dist/es/packages/tabbar/style/style.css +6 -0
  82. package/dist/es/packages/tabbaritem/style/style.css +6 -0
  83. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +6 -0
  84. package/dist/es/packages/timeselect/style/style.css +12 -0
  85. package/dist/es/packages/tour/style/style.css +12 -0
  86. package/dist/nutui.react.umd.js +942 -1008
  87. package/dist/style.css +1 -1
  88. package/dist/style.scss +41 -43
  89. package/dist/styles/variables-jmapp.scss +0 -50
  90. package/dist/styles/variables-jrkf.scss +0 -50
  91. package/dist/styles/variables.scss +0 -49
  92. package/package.json +1 -1
  93. package/dist/cjs/packages/sidenavbar/context.d.ts +0 -1
  94. package/dist/cjs/packages/sidenavbar/context.js +0 -12
  95. package/dist/cjs/packages/sidenavbar/index.d.ts +0 -3
  96. package/dist/cjs/packages/sidenavbar/index.js +0 -12
  97. package/dist/cjs/packages/sidenavbar/sidenavbar.d.ts +0 -14
  98. package/dist/cjs/packages/sidenavbar/sidenavbar.js +0 -70
  99. package/dist/cjs/packages/sidenavbar/style/index.js +0 -2
  100. package/dist/cjs/packages/sidenavbar/style/sidenavbar.scss +0 -89
  101. package/dist/cjs/packages/sidenavbar/style/style.css +0 -443
  102. package/dist/cjs/packages/sidenavbar/utils.d.ts +0 -3
  103. package/dist/cjs/packages/sidenavbar/utils.js +0 -23
  104. package/dist/cjs/packages/sidenavbaritem/index.d.ts +0 -3
  105. package/dist/cjs/packages/sidenavbaritem/index.js +0 -12
  106. package/dist/cjs/packages/sidenavbaritem/sidenavbaritem.d.ts +0 -11
  107. package/dist/cjs/packages/sidenavbaritem/sidenavbaritem.js +0 -34
  108. package/dist/cjs/packages/sidenavbaritem/style/index.js +0 -1
  109. package/dist/cjs/packages/sidenavbaritem/style/sidenavbaritem.scss +0 -13
  110. package/dist/cjs/packages/sidenavbaritem/style/style.css +0 -14
  111. package/dist/cjs/packages/subsidenavbar/index.d.ts +0 -3
  112. package/dist/cjs/packages/subsidenavbar/style/css.js +0 -1
  113. package/dist/cjs/packages/subsidenavbar/style/index.js +0 -1
  114. package/dist/cjs/packages/subsidenavbar/style/style.css +0 -20
  115. package/dist/cjs/packages/subsidenavbar/style/subsidenavbar.scss +0 -26
  116. package/dist/cjs/packages/subsidenavbar/subsidenavbar.d.ts +0 -13
  117. package/dist/cjs/packages/subsidenavbar/subsidenavbar.js +0 -88
  118. package/dist/es/packages/sidenavbar/context.d.ts +0 -1
  119. package/dist/es/packages/sidenavbar/context.js +0 -2
  120. package/dist/es/packages/sidenavbar/index.d.ts +0 -3
  121. package/dist/es/packages/sidenavbar/index.js +0 -2
  122. package/dist/es/packages/sidenavbar/sidenavbar.d.ts +0 -38
  123. package/dist/es/packages/sidenavbar/sidenavbar.js +0 -58
  124. package/dist/es/packages/sidenavbar/style/css.js +0 -1
  125. package/dist/es/packages/sidenavbar/style/index.js +0 -2
  126. package/dist/es/packages/sidenavbar/style/sidenavbar.scss +0 -89
  127. package/dist/es/packages/sidenavbar/style/style.css +0 -443
  128. package/dist/es/packages/sidenavbar/utils.d.ts +0 -3
  129. package/dist/es/packages/sidenavbar/utils.js +0 -14
  130. package/dist/es/packages/sidenavbaritem/index.d.ts +0 -3
  131. package/dist/es/packages/sidenavbaritem/index.js +0 -2
  132. package/dist/es/packages/sidenavbaritem/sidenavbaritem.d.ts +0 -11
  133. package/dist/es/packages/sidenavbaritem/sidenavbaritem.js +0 -23
  134. package/dist/es/packages/sidenavbaritem/style/css.js +0 -1
  135. package/dist/es/packages/sidenavbaritem/style/index.js +0 -1
  136. package/dist/es/packages/sidenavbaritem/style/sidenavbaritem.scss +0 -13
  137. package/dist/es/packages/sidenavbaritem/style/style.css +0 -14
  138. package/dist/es/packages/subsidenavbar/index.d.ts +0 -3
  139. package/dist/es/packages/subsidenavbar/index.js +0 -2
  140. package/dist/es/packages/subsidenavbar/style/css.js +0 -1
  141. package/dist/es/packages/subsidenavbar/style/index.js +0 -1
  142. package/dist/es/packages/subsidenavbar/style/style.css +0 -20
  143. package/dist/es/packages/subsidenavbar/style/subsidenavbar.scss +0 -26
  144. package/dist/es/packages/subsidenavbar/subsidenavbar.d.ts +0 -13
  145. package/dist/es/packages/subsidenavbar/subsidenavbar.js +0 -77
  146. /package/dist/cjs/packages/{sidenavbar → datepickerview}/style/css.js +0 -0
  147. /package/dist/{cjs/packages/sidenavbaritem → es/packages/datepickerview}/style/css.js +0 -0
@@ -1,443 +0,0 @@
1
- @charset "UTF-8";
2
- /* #ifdef harmony */
3
- /* #endif */
4
- /* #ifndef harmony */
5
- /* #endif */
6
- .nut-overlay {
7
- position: fixed;
8
- top: 0;
9
- left: 0;
10
- bottom: 0;
11
- right: 0;
12
- width: 100%;
13
- height: 100%;
14
- background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
15
- z-index: var(--nutui-overlay-zIndex, 1000);
16
- }
17
-
18
- .nut-overflow-hidden {
19
- overflow: hidden !important;
20
- }
21
-
22
- @keyframes nut-fade-in {
23
- 0% {
24
- opacity: 0;
25
- }
26
- 1% {
27
- opacity: 0;
28
- }
29
- 100% {
30
- opacity: 1;
31
- }
32
- }
33
- @keyframes nut-fade-out {
34
- 0% {
35
- opacity: 1;
36
- }
37
- 1% {
38
- opacity: 1;
39
- }
40
- 100% {
41
- opacity: 0;
42
- }
43
- }
44
- .nut-overlay-slide-enter-active, .nut-overlay-slide-appear-active {
45
- animation-fill-mode: both;
46
- animation-name: nut-fade-in;
47
- animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
48
- }
49
- .nut-overlay-slide-exit-active {
50
- animation-fill-mode: both;
51
- animation-name: nut-fade-out;
52
- animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
53
- }
54
-
55
- [dir=rtl] .nut-overlay,
56
- .nut-rtl .nut-overlay {
57
- left: auto;
58
- right: 0;
59
- }
60
-
61
- .nut-popup {
62
- position: fixed;
63
- min-height: 46%;
64
- max-height: 100%;
65
- background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
66
- -webkit-overflow-scrolling: touch;
67
- font-size: var(--nutui-font-size-base, 14px);
68
- }
69
- .nut-popup-title {
70
- display: flex;
71
- flex-direction: row;
72
- align-items: center;
73
- justify-content: center;
74
- border-bottom: var(--nutui-popup-title-border-bottom, 0);
75
- padding: var(--nutui-popup-title-padding, 16px);
76
- position: relative;
77
- }
78
- .nut-popup-title-wrapper {
79
- display: flex;
80
- flex-direction: column;
81
- justify-content: center;
82
- align-items: center;
83
- }
84
- .nut-popup-title-title {
85
- color: var(--nutui-color-title, #1a1a1a);
86
- font-weight: var(--nutui-font-weight-bold, 600);
87
- font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
88
- line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
89
- }
90
- .nut-popup-title-description {
91
- color: var(--nutui-color-text, #505259);
92
- font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
93
- font-weight: var(--nutui-font-weight, 400);
94
- }
95
- .nut-popup-title-description-gap {
96
- margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
97
- }
98
- .nut-popup-title-left {
99
- position: absolute;
100
- top: var(--nutui-popup-title-padding, 16px);
101
- left: var(--nutui-popup-title-padding, 16px);
102
- }
103
- .nut-popup-title-right {
104
- position: absolute;
105
- top: var(--nutui-popup-title-padding, 16px);
106
- right: var(--nutui-popup-title-padding, 16px);
107
- z-index: 1;
108
- width: var(--nutui-popup-icon-size, 20px);
109
- height: var(--nutui-popup-icon-size, 20px);
110
- color: var(--nutui-color-title, #1a1a1a);
111
- cursor: pointer;
112
- }
113
- .nut-popup-title-right:active {
114
- opacity: 0.7;
115
- }
116
- .nut-popup-title-right-top-left {
117
- top: var(--nutui-popup-title-padding, 16px);
118
- left: var(--nutui-popup-title-padding, 16px);
119
- }
120
- .nut-popup-title-right-bottom-left {
121
- bottom: var(--nutui-popup-title-padding, 16px);
122
- left: var(--nutui-popup-title-padding, 16px);
123
- }
124
- .nut-popup-title-right-bottom-right {
125
- right: var(--nutui-popup-title-padding, 16px);
126
- bottom: var(--nutui-popup-title-padding, 16px);
127
- }
128
- .nut-popup-center {
129
- top: 50%;
130
- left: 50%;
131
- min-height: 10%;
132
- max-width: 295px;
133
- transform: translate(-50%, -50%);
134
- }
135
- .nut-popup-center.nut-popup-round {
136
- border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
137
- }
138
- .nut-popup-bottom, .nut-popup-top {
139
- max-height: 87%;
140
- }
141
- .nut-popup-bottom {
142
- bottom: 0;
143
- left: 0;
144
- width: 100%;
145
- }
146
- .nut-popup-bottom.nut-popup-round {
147
- border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
148
- }
149
- .nut-popup-right {
150
- top: 0;
151
- right: 0;
152
- width: 100px;
153
- height: 100%;
154
- }
155
- .nut-popup-right.nut-popup-round {
156
- border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
157
- }
158
- .nut-popup-left {
159
- top: 0;
160
- left: 0;
161
- width: 100px;
162
- height: 100%;
163
- }
164
- .nut-popup-left.nut-popup-round {
165
- border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
166
- }
167
- .nut-popup-top {
168
- top: 0;
169
- left: 0;
170
- width: 100%;
171
- }
172
- .nut-popup-top.nut-popup-round {
173
- border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
174
- }
175
- .nut-popup-slide {
176
- /* 从顶部滑出 */
177
- /* 从右侧滑出 */
178
- /* 从底部滑出 */
179
- /* 从左侧滑出 */
180
- }
181
- @keyframes popup-scale-fade-in {
182
- from {
183
- opacity: 0;
184
- transform: scale(0.8);
185
- }
186
- to {
187
- opacity: 1;
188
- transform: scale(1);
189
- }
190
- }
191
- @keyframes popup-scale-fade-out {
192
- from {
193
- opacity: 1;
194
- transform: scale(1);
195
- }
196
- to {
197
- opacity: 0;
198
- transform: scale(0.8);
199
- }
200
- }
201
- .nut-popup-slide-default-enter-active {
202
- animation-fill-mode: both;
203
- animation-name: popup-scale-fade-in;
204
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
205
- }
206
- .nut-popup-slide-default-exit-active {
207
- animation-fill-mode: both;
208
- animation-name: popup-scale-fade-out;
209
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
210
- }
211
- @keyframes popup-fade-in {
212
- from {
213
- opacity: 0;
214
- }
215
- to {
216
- opacity: 1;
217
- }
218
- }
219
- @keyframes popup-fade-out {
220
- from {
221
- opacity: 1;
222
- }
223
- to {
224
- opacity: 0;
225
- }
226
- }
227
- .nut-popup-slide-center-enter-active {
228
- animation-fill-mode: both;
229
- animation-name: popup-fade-in;
230
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
231
- }
232
- .nut-popup-slide-center-exit-active {
233
- animation-fill-mode: both;
234
- animation-name: popup-fade-out;
235
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
236
- }
237
- @keyframes popup-slide-top-enter {
238
- from {
239
- transform: translate3d(0, -100%, 0);
240
- }
241
- }
242
- @keyframes popup-slide-top-exit {
243
- to {
244
- transform: translate3d(0, -100%, 0);
245
- }
246
- }
247
- .nut-popup-slide-top-enter-active, .nut-popup-slide-top-appear-active {
248
- transform: translate3d(0, 0%, 0);
249
- animation-fill-mode: both;
250
- animation-name: popup-slide-top-enter;
251
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
252
- }
253
- .nut-popup-slide-top-exit-active {
254
- animation-fill-mode: both;
255
- animation-name: popup-slide-top-exit;
256
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
257
- }
258
- @keyframes popup-slide-right-enter {
259
- from {
260
- transform: translate3d(100%, 0, 0);
261
- }
262
- }
263
- @keyframes popup-slide-right-exit {
264
- to {
265
- transform: translate3d(100%, 0, 0);
266
- }
267
- }
268
- .nut-popup-slide-right-enter-active, .nut-popup-slide-right-appear-active {
269
- transform: translate3d(0, 0, 0);
270
- animation-fill-mode: both;
271
- animation-name: popup-slide-right-enter;
272
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
273
- }
274
- .nut-popup-slide-right-exit {
275
- animation-fill-mode: both;
276
- animation-name: popup-slide-right-exit;
277
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
278
- }
279
- @keyframes popup-slide-bottom-enter {
280
- from {
281
- transform: translate3d(0, 100%, 0);
282
- }
283
- }
284
- @keyframes slide-bottom-exit {
285
- to {
286
- transform: translate3d(0, 100%, 0);
287
- }
288
- }
289
- .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
290
- transform: translate(0, 0);
291
- animation-fill-mode: both;
292
- animation-name: popup-slide-bottom-enter;
293
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
294
- }
295
- .nut-popup-slide-bottom-exit {
296
- animation-fill-mode: both;
297
- animation-name: slide-bottom-exit;
298
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
299
- }
300
- @keyframes popup-slide-left-enter {
301
- from {
302
- transform: translate3d(-100%, 0, 0);
303
- }
304
- }
305
- @keyframes popup-slide-left-exit {
306
- to {
307
- transform: translate3d(-100%, 0, 0);
308
- }
309
- }
310
- .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
311
- transform: translate(0, 0);
312
- animation-fill-mode: both;
313
- animation-name: popup-slide-left-enter;
314
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
315
- }
316
- .nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
317
- animation-fill-mode: both;
318
- animation-name: popup-slide-left-exit;
319
- animation-duration: var(--nutui-popup-animation-duration, 0.3s);
320
- }
321
- .nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
322
- display: none;
323
- }
324
- .nut-popup .nut-overflow-hidden {
325
- overflow: hidden;
326
- }
327
-
328
- [dir=rtl] .nut-popup-title-left,
329
- .nut-rtl .nut-popup-title-left {
330
- left: auto;
331
- right: var(--nutui-popup-title-padding, 16px);
332
- }
333
- [dir=rtl] .nut-popup-title-right,
334
- .nut-rtl .nut-popup-title-right {
335
- right: auto;
336
- left: var(--nutui-popup-title-padding, 16px);
337
- }
338
- [dir=rtl] .nut-popup-title-right-top-left,
339
- .nut-rtl .nut-popup-title-right-top-left {
340
- left: auto;
341
- right: var(--nutui-popup-title-padding, 16px);
342
- }
343
- [dir=rtl] .nut-popup-title-right-bottom-left,
344
- .nut-rtl .nut-popup-title-right-bottom-left {
345
- left: auto;
346
- right: var(--nutui-popup-title-padding, 16px);
347
- }
348
- [dir=rtl] .nut-popup-title-right-bottom-right,
349
- .nut-rtl .nut-popup-title-right-bottom-right {
350
- right: auto;
351
- left: var(--nutui-popup-title-padding, 16px);
352
- }
353
- [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
354
- .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
355
- transform: rotate(180deg);
356
- }
357
- [dir=rtl] .nut-popup-center,
358
- .nut-rtl .nut-popup-center {
359
- left: auto;
360
- right: 50%;
361
- transform: translate(50%, -50%);
362
- }
363
- [dir=rtl] .nut-popup-bottom,
364
- .nut-rtl .nut-popup-bottom {
365
- left: auto;
366
- right: 0;
367
- }
368
- [dir=rtl] .nut-popup-top,
369
- .nut-rtl .nut-popup-top {
370
- left: auto;
371
- right: 0;
372
- }
373
-
374
- .nut-sidenavbar {
375
- color: #1d1d21;
376
- font-size: 14px;
377
- height: 100%;
378
- overflow: auto;
379
- display: block;
380
- background-color: var(--nutui-sidenavbar-content-bg-color, #ffffff);
381
- }
382
- .nut-sidenavbar .arrow-icon {
383
- position: absolute;
384
- width: 0;
385
- height: 0;
386
- right: 16px;
387
- top: 18px;
388
- cursor: pointer;
389
- }
390
- .nut-sidenavbar .arrow-down {
391
- border-top: 4px solid var(--nutui-color-text-help, #888b94);
392
- border-left: 4px solid transparent;
393
- border-right: 4px solid transparent;
394
- }
395
- .nut-sidenavbar .arrow-up {
396
- border-bottom: 4px solid var(--nutui-color-text-help, #888b94);
397
- border-left: 4px solid transparent;
398
- border-right: 4px solid transparent;
399
- }
400
- .nut-sidenavbar-title {
401
- height: var(--nutui-sidenavbar-item-height, 40px);
402
- padding: var(--nutui-sidenavbar-title-padding, 10px 8px 10px 20px);
403
- background: var(--nutui-sidenavbar-title-background, var(--nutui-color-background, #f2f3f5));
404
- color: var(--nutui-sidenavbar-title-color, var(--nutui-color-title, #1a1a1a));
405
- box-sizing: border-box;
406
- transition: transform 0.5s;
407
- }
408
- .nut-sidenavbar-content {
409
- position: relative;
410
- display: block;
411
- }
412
- .nut-sidenavbar-list.sidenavbar-show .nut-sidenavbar-content {
413
- height: auto;
414
- overflow: inherit;
415
- }
416
- .nut-sidenavbar-list.sidenavbar-hide .nut-sidenavbar-content {
417
- height: 0;
418
- overflow: hidden;
419
- }
420
- .nut-sidenavbar .nut-subsidenavbar-border-bt {
421
- position: relative;
422
- }
423
- .nut-sidenavbar .nut-subsidenavbar-border-bt:after {
424
- content: "";
425
- position: absolute;
426
- width: 100%;
427
- height: 1px;
428
- background: #eeeff2;
429
- transform: scale(1, 0.5);
430
- left: 0;
431
- bottom: 0;
432
- }
433
-
434
- [dir=rtl] .nut-sidenavbar .arrow-icon,
435
- .nut-rtl .nut-sidenavbar .arrow-icon {
436
- right: auto;
437
- left: 16px;
438
- }
439
- [dir=rtl] .nut-sidenavbar .nut-subsidenavbar-border-bt:after,
440
- .nut-rtl .nut-sidenavbar .nut-subsidenavbar-border-bt:after {
441
- left: auto;
442
- right: 0;
443
- }
@@ -1,3 +0,0 @@
1
- import { MouseEventHandler } from 'react';
2
- declare const handleClick: MouseEventHandler<HTMLDivElement>;
3
- export { handleClick };
@@ -1,14 +0,0 @@
1
- var handleClick = function(e) {
2
- e.stopPropagation();
3
- var isIcon = e.target.className.includes('arrow-icon');
4
- var isTitle = e.target.className.includes('-title') || isIcon;
5
- var currentClass = e.currentTarget.className;
6
- var isShow = currentClass.includes('sidenavbar-show');
7
- var arrowIcon = e.currentTarget.querySelector('.arrow-icon');
8
- var iconClass = arrowIcon.className;
9
- if (isTitle) {
10
- e.currentTarget.className = isShow ? currentClass.replace('sidenavbar-show', 'sidenavbar-hide') : currentClass.replace('sidenavbar-hide', 'sidenavbar-show');
11
- arrowIcon.className = isShow ? iconClass.replace('arrow-down', 'arrow-up') : iconClass.replace('arrow-up', 'arrow-down');
12
- }
13
- };
14
- export { handleClick };
@@ -1,3 +0,0 @@
1
- import { SideNavBarItem } from './sidenavbaritem';
2
- export type { SideNavBarItemProps } from './sidenavbaritem';
3
- export default SideNavBarItem;
@@ -1,2 +0,0 @@
1
- import { SideNavBarItem } from "./sidenavbaritem";
2
- export default SideNavBarItem;
@@ -1,11 +0,0 @@
1
- import React, { FunctionComponent } from 'react';
2
- export type SideNavBarItemProps = {
3
- title: string;
4
- value: string | number;
5
- onClick?: ({ title, value, }: {
6
- title: string;
7
- value: string | number;
8
- }) => void;
9
- children?: React.ReactNode;
10
- };
11
- export declare const SideNavBarItem: FunctionComponent<SideNavBarItemProps>;
@@ -1,23 +0,0 @@
1
- import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
2
- import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
3
- import React from "react";
4
- export var SideNavBarItem = function(props) {
5
- var classPrefix = 'nut-subsidenavbar';
6
- var title = props.title, value = props.value, children = props.children, onClick = props.onClick, rest = _object_without_properties(props, [
7
- "title",
8
- "value",
9
- "children",
10
- "onClick"
11
- ]);
12
- var clickFn = function(e) {
13
- e.stopPropagation();
14
- onClick && onClick({
15
- title: title,
16
- value: value
17
- });
18
- };
19
- return /*#__PURE__*/ React.createElement("div", _object_spread({
20
- className: "".concat(classPrefix, "-item ").concat(classPrefix, "-border-bt"),
21
- onClick: clickFn
22
- }, rest), title);
23
- };
@@ -1 +0,0 @@
1
- import './style.css'
@@ -1 +0,0 @@
1
- import './sidenavbaritem.scss';
@@ -1,13 +0,0 @@
1
- .nut-subsidenavbar {
2
- &-item {
3
- height: $sidenavbar-item-height;
4
- color: $sidenavbar-sub-item-color;
5
- padding: $sidenavbar-sub-item-padding;
6
- box-sizing: border-box;
7
- }
8
-
9
- &-list {
10
- background-color: $sidenavbar-sub-list-background;
11
- color: $sidenavbar-sub-list-color;
12
- }
13
- }
@@ -1,14 +0,0 @@
1
- /* #ifdef harmony */
2
- /* #endif */
3
- /* #ifndef harmony */
4
- /* #endif */
5
- .nut-subsidenavbar-item {
6
- height: var(--nutui-sidenavbar-item-height, 40px);
7
- color: var(--nutui-sidenavbar-sub-item-color, var(--nutui-color-text, #505259));
8
- padding: var(--nutui-sidenavbar-sub-item-padding, 10px 8px 10px 55px);
9
- box-sizing: border-box;
10
- }
11
- .nut-subsidenavbar-list {
12
- background-color: var(--nutui-sidenavbar-sub-list-background, #ffffff);
13
- color: var(--nutui-sidenavbar-sub-list-background, var(--nutui-color-text, #505259));
14
- }
@@ -1,3 +0,0 @@
1
- import { SubSideNavBar } from './subsidenavbar';
2
- export type { SubSideNavBarProps } from './subsidenavbar';
3
- export default SubSideNavBar;
@@ -1,2 +0,0 @@
1
- import { SubSideNavBar } from "./subsidenavbar";
2
- export default SubSideNavBar;
@@ -1 +0,0 @@
1
- import './style.css'
@@ -1 +0,0 @@
1
- import './subsidenavbar.scss';
@@ -1,20 +0,0 @@
1
- /* #ifdef harmony */
2
- /* #endif */
3
- /* #ifndef harmony */
4
- /* #endif */
5
- .nut-subsidenavbar-title {
6
- height: var(--nutui-sidenavbar-item-height, 40px);
7
- padding: var(--nutui-sidenavbar-sub-title-padding, 10px 8px 10px 35px);
8
- box-sizing: border-box;
9
- background-color: var(--nutui-sidenavbar-sub-title-background, var(--nutui-color-background-sunken, #f7f8fc));
10
- color: var(--nutui-sidenavbar-sub-title-color, var(--nutui-color-title, #1a1a1a));
11
- box-sizing: border-box;
12
- }
13
- .nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {
14
- height: auto;
15
- overflow: inherit;
16
- }
17
- .nut-subsidenavbar-list.sidenavbar-hide .nut-subsidenavbar-content {
18
- height: 0;
19
- overflow: hidden;
20
- }
@@ -1,26 +0,0 @@
1
- .nut-subsidenavbar {
2
- &-title {
3
- height: $sidenavbar-item-height;
4
- padding: $sidenavbar-sub-title-padding;
5
- box-sizing: border-box;
6
- background-color: $sidenavbar-sub-title-background;
7
- color: $sidenavbar-sub-title-color;
8
- box-sizing: border-box;
9
- }
10
-
11
- &-list {
12
- &.sidenavbar-show {
13
- .nut-subsidenavbar-content {
14
- height: auto;
15
- overflow: inherit;
16
- }
17
- }
18
-
19
- &.sidenavbar-hide {
20
- .nut-subsidenavbar-content {
21
- height: 0;
22
- overflow: hidden;
23
- }
24
- }
25
- }
26
- }
@@ -1,13 +0,0 @@
1
- import React, { FunctionComponent } from 'react';
2
- export type SubSideNavBarProps = {
3
- title: string;
4
- value: string | number;
5
- open?: boolean;
6
- children?: React.ReactNode;
7
- onClick?: ({ title, value, isShow, }: {
8
- title: string;
9
- value: string | number;
10
- isShow: boolean;
11
- }) => void;
12
- };
13
- export declare const SubSideNavBar: FunctionComponent<SubSideNavBarProps>;