@nutui/nutui-react 4.0.0-beta.3 → 4.0.0-beta.5

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 (280) hide show
  1. package/CHANGELOG.md +21 -6
  2. package/dist/cjs/hooks/use-props-value.js +1 -1
  3. package/dist/cjs/hooks/use-touch.js +4 -4
  4. package/dist/cjs/packages/address/cascaderRender.js +1 -1
  5. package/dist/cjs/packages/address/existRender.js +1 -1
  6. package/dist/cjs/packages/animate/animate.js +1 -1
  7. package/dist/cjs/packages/audio/audio.js +1 -1
  8. package/dist/cjs/packages/avatar/avatar.js +1 -1
  9. package/dist/cjs/packages/avatarcropper/avatarcropper.js +1 -1
  10. package/dist/cjs/packages/barrage/barrage.js +1 -1
  11. package/dist/cjs/packages/button/button.js +1 -1
  12. package/dist/cjs/packages/card/card.js +1 -1
  13. package/dist/cjs/packages/cascader/utils.js +4 -4
  14. package/dist/cjs/packages/cell/cell.js +1 -1
  15. package/dist/cjs/packages/cellgroup/cellgroup.js +1 -1
  16. package/dist/cjs/packages/checkboxgroup/checkboxgroup.js +3 -3
  17. package/dist/cjs/packages/circleprogress/circleprogress.js +1 -1
  18. package/dist/cjs/packages/collapseitem/collapseitem.js +1 -1
  19. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  20. package/dist/cjs/packages/countdown/countdown.js +1 -1
  21. package/dist/cjs/packages/datepicker/datepicker.js +1 -1
  22. package/dist/cjs/packages/dialog/dialog.js +2 -2
  23. package/dist/cjs/packages/divider/divider.js +1 -1
  24. package/dist/cjs/packages/drag/drag.js +1 -1
  25. package/dist/cjs/packages/elevator/elevator.js +1 -1
  26. package/dist/cjs/packages/ellipsis/ellipsis.js +1 -1
  27. package/dist/cjs/packages/empty/empty.d.ts +4 -11
  28. package/dist/cjs/packages/empty/empty.js +22 -18
  29. package/dist/cjs/packages/empty/index.d.ts +1 -1
  30. package/dist/cjs/packages/empty/style/empty.scss +97 -31
  31. package/dist/cjs/packages/empty/style/style.css +77 -32
  32. package/dist/cjs/packages/empty/style-jmapp/empty.scss +97 -31
  33. package/dist/cjs/packages/empty/style-jmapp/style.css +77 -32
  34. package/dist/cjs/packages/empty/style-jrkf/empty.scss +97 -31
  35. package/dist/cjs/packages/empty/style-jrkf/style.css +77 -32
  36. package/dist/cjs/packages/fixednav/fixednav.js +1 -1
  37. package/dist/cjs/packages/grid/grid.js +1 -1
  38. package/dist/cjs/packages/griditem/griditem.js +1 -1
  39. package/dist/cjs/packages/indicator/indicator.js +1 -1
  40. package/dist/cjs/packages/infiniteloading/infiniteloading.js +1 -1
  41. package/dist/cjs/packages/input/input.js +1 -1
  42. package/dist/cjs/packages/inputnumber/inputnumber.js +1 -1
  43. package/dist/cjs/packages/loading/loading.js +1 -1
  44. package/dist/cjs/packages/menu/menu.js +1 -1
  45. package/dist/cjs/packages/numberkeyboard/numberkeyboard.js +1 -1
  46. package/dist/cjs/packages/overlay/overlay.js +1 -1
  47. package/dist/cjs/packages/pagination/pagination.js +1 -1
  48. package/dist/cjs/packages/picker/picker.js +1 -1
  49. package/dist/cjs/packages/pickerview/pickerroller.js +1 -1
  50. package/dist/cjs/packages/popover/popover.js +1 -1
  51. package/dist/cjs/packages/price/price.js +1 -1
  52. package/dist/cjs/packages/progress/progress.js +1 -1
  53. package/dist/cjs/packages/quickenter/quickenter.js +2 -2
  54. package/dist/cjs/packages/radio/radio.js +1 -1
  55. package/dist/cjs/packages/radiogroup/radiogroup.js +3 -3
  56. package/dist/cjs/packages/rate/index.d.ts +1 -1
  57. package/dist/cjs/packages/rate/rate.js +54 -8
  58. package/dist/cjs/packages/rate/style/rate.scss +244 -76
  59. package/dist/cjs/packages/rate/style/style.css +198 -68
  60. package/dist/cjs/packages/rate/style-jmapp/rate.scss +244 -76
  61. package/dist/cjs/packages/rate/style-jmapp/style.css +198 -68
  62. package/dist/cjs/packages/rate/style-jrkf/rate.scss +244 -76
  63. package/dist/cjs/packages/rate/style-jrkf/style.css +198 -68
  64. package/dist/cjs/packages/shortpassword/shortpassword.js +1 -1
  65. package/dist/cjs/packages/signature/signature.js +1 -1
  66. package/dist/cjs/packages/skeleton/skeleton.js +1 -1
  67. package/dist/cjs/packages/step/step.js +1 -1
  68. package/dist/cjs/packages/steps/style/style.css +1 -1
  69. package/dist/cjs/packages/sticky/sticky.js +1 -1
  70. package/dist/cjs/packages/switch/switch.js +1 -1
  71. package/dist/cjs/packages/tabbaritem/tabbaritem.js +1 -1
  72. package/dist/cjs/packages/table/table.js +1 -1
  73. package/dist/cjs/packages/tabs/tabs.js +1 -1
  74. package/dist/cjs/packages/textarea/textarea.js +1 -1
  75. package/dist/cjs/packages/timeselect/timeselect.js +1 -1
  76. package/dist/cjs/packages/tour/tour.js +1 -1
  77. package/dist/cjs/packages/trendarrow/trendarrow.js +1 -1
  78. package/dist/cjs/packages/video/video.js +1 -1
  79. package/dist/cjs/packages/virtuallist/utils.js +1 -1
  80. package/dist/cjs/packages/virtuallist/virtuallist.js +1 -1
  81. package/dist/cjs/types/spec/empty/base.d.ts +12 -8
  82. package/dist/cjs/types/spec/empty/base.js +28 -1
  83. package/dist/cjs/types/spec/rate/base.d.ts +3 -0
  84. package/dist/cjs/utils/scale-f.js +1 -3
  85. package/dist/es/hooks/taro/use-custom-event.js +3 -3
  86. package/dist/es/hooks/taro/use-lock-scoll.js +1 -1
  87. package/dist/es/hooks/use-click-away.js +2 -2
  88. package/dist/es/hooks/use-lock-scroll.js +3 -3
  89. package/dist/es/hooks/use-pagination.js +1 -1
  90. package/dist/es/hooks/use-ref-state.js +3 -3
  91. package/dist/es/hooks/use-touch.js +13 -13
  92. package/dist/es/hooks/use-watch.js +1 -1
  93. package/dist/es/locales/en-US.js +4 -4
  94. package/dist/es/locales/id-ID.js +4 -4
  95. package/dist/es/locales/ja-JP.js +4 -4
  96. package/dist/es/locales/tr-TR.js +4 -4
  97. package/dist/es/locales/vi-VN.js +4 -4
  98. package/dist/es/locales/zh-CN.js +4 -4
  99. package/dist/es/locales/zh-TW.js +4 -4
  100. package/dist/es/locales/zh-UG.js +4 -4
  101. package/dist/es/packages/actionsheet/actionsheet.js +8 -8
  102. package/dist/es/packages/address/address.js +10 -10
  103. package/dist/es/packages/address/cascaderRender.js +4 -4
  104. package/dist/es/packages/address/elevatorRender.js +17 -17
  105. package/dist/es/packages/address/existRender.js +5 -5
  106. package/dist/es/packages/address/utils.js +5 -5
  107. package/dist/es/packages/animate/animate.js +4 -4
  108. package/dist/es/packages/animatingnumbers/countup.js +2 -2
  109. package/dist/es/packages/audio/audio.js +26 -26
  110. package/dist/es/packages/avatar/avatar.js +4 -4
  111. package/dist/es/packages/avatarcropper/avatarcropper.js +20 -20
  112. package/dist/es/packages/avatargroup/avatargroup.js +1 -1
  113. package/dist/es/packages/backtop/backtop.js +3 -3
  114. package/dist/es/packages/badge/badge.js +3 -3
  115. package/dist/es/packages/barrage/barrage.js +5 -5
  116. package/dist/es/packages/button/button.js +2 -2
  117. package/dist/es/packages/calendar/calendar.js +12 -12
  118. package/dist/es/packages/calendar/utils.js +7 -7
  119. package/dist/es/packages/calendarcard/calendarcard.js +22 -22
  120. package/dist/es/packages/calendarcard/icon.js +4 -4
  121. package/dist/es/packages/calendarcard/utils.js +5 -5
  122. package/dist/es/packages/calendaritem/calendaritem.js +32 -32
  123. package/dist/es/packages/card/card.js +2 -2
  124. package/dist/es/packages/cascader/cascader.js +15 -15
  125. package/dist/es/packages/cascader/utils.js +6 -6
  126. package/dist/es/packages/cell/cell.js +5 -5
  127. package/dist/es/packages/cellgroup/cellgroup.js +2 -2
  128. package/dist/es/packages/checkbox/checkbox.js +10 -10
  129. package/dist/es/packages/checkboxgroup/checkboxgroup.js +7 -7
  130. package/dist/es/packages/circleprogress/circleprogress.js +5 -5
  131. package/dist/es/packages/col/col.js +2 -2
  132. package/dist/es/packages/collapse/collapse.js +3 -3
  133. package/dist/es/packages/collapse/context.js +2 -2
  134. package/dist/es/packages/collapseitem/collapseitem.js +5 -5
  135. package/dist/es/packages/configprovider/configprovider.js +5 -5
  136. package/dist/es/packages/configprovider/types.d.ts +1 -1
  137. package/dist/es/packages/countdown/countdown.js +12 -12
  138. package/dist/es/packages/datepicker/datepicker.js +12 -12
  139. package/dist/es/packages/datepicker/utils.js +7 -7
  140. package/dist/es/packages/datepickerview/datepickerview.js +5 -5
  141. package/dist/es/packages/dialog/confirm.js +8 -8
  142. package/dist/es/packages/dialog/content.js +5 -5
  143. package/dist/es/packages/dialog/dialog.js +23 -23
  144. package/dist/es/packages/divider/divider.js +3 -3
  145. package/dist/es/packages/drag/drag.js +4 -4
  146. package/dist/es/packages/elevator/elevator.js +14 -14
  147. package/dist/es/packages/ellipsis/ellipsis.js +11 -11
  148. package/dist/es/packages/empty/empty.d.ts +4 -11
  149. package/dist/es/packages/empty/empty.js +23 -19
  150. package/dist/es/packages/empty/index.d.ts +1 -1
  151. package/dist/es/packages/empty/style/empty.scss +97 -31
  152. package/dist/es/packages/empty/style/style.css +77 -32
  153. package/dist/es/packages/empty/style-jmapp/empty.scss +97 -31
  154. package/dist/es/packages/empty/style-jmapp/style.css +77 -32
  155. package/dist/es/packages/empty/style-jrkf/empty.scss +97 -31
  156. package/dist/es/packages/empty/style-jrkf/style.css +77 -32
  157. package/dist/es/packages/fixednav/fixednav.js +8 -8
  158. package/dist/es/packages/form/form.js +6 -6
  159. package/dist/es/packages/form/useform.js +4 -4
  160. package/dist/es/packages/formitem/formitem.js +1 -1
  161. package/dist/es/packages/grid/context.js +1 -1
  162. package/dist/es/packages/grid/grid.js +4 -4
  163. package/dist/es/packages/griditem/griditem.js +6 -6
  164. package/dist/es/packages/hoverbutton/hoverbutton.js +1 -1
  165. package/dist/es/packages/hoverbuttonitem/hoverbuttonitem.js +4 -4
  166. package/dist/es/packages/hoverbuttonitem/utils.js +1 -1
  167. package/dist/es/packages/image/image.js +8 -8
  168. package/dist/es/packages/imagepreview/imagepreview.js +13 -13
  169. package/dist/es/packages/indicator/indicator.js +5 -5
  170. package/dist/es/packages/infiniteloading/infiniteloading.js +13 -13
  171. package/dist/es/packages/input/input.js +13 -13
  172. package/dist/es/packages/inputnumber/inputnumber.js +12 -12
  173. package/dist/es/packages/layout/layout.js +1 -1
  174. package/dist/es/packages/loading/loading.js +3 -3
  175. package/dist/es/packages/menu/menu.js +13 -13
  176. package/dist/es/packages/menuitem/menuitem.js +10 -10
  177. package/dist/es/packages/navbar/navbar.js +7 -7
  178. package/dist/es/packages/noticebar/noticebar.js +25 -25
  179. package/dist/es/packages/notify/Notification.js +1 -1
  180. package/dist/es/packages/notify/notify.js +3 -3
  181. package/dist/es/packages/numberkeyboard/numberkeyboard.js +13 -13
  182. package/dist/es/packages/overlay/overlay.js +6 -6
  183. package/dist/es/packages/pagination/pagination.js +8 -8
  184. package/dist/es/packages/picker/picker.js +15 -15
  185. package/dist/es/packages/pickerview/pickerroller.js +10 -10
  186. package/dist/es/packages/pickerview/pickerview.js +3 -3
  187. package/dist/es/packages/pickerview/utils.js +6 -6
  188. package/dist/es/packages/popover/popover.js +13 -13
  189. package/dist/es/packages/popup/popup.js +22 -22
  190. package/dist/es/packages/price/price.js +8 -8
  191. package/dist/es/packages/progress/progress.js +5 -5
  192. package/dist/es/packages/pulltorefresh/pulltorefresh.js +7 -7
  193. package/dist/es/packages/quickenter/quickenter.js +14 -14
  194. package/dist/es/packages/radio/radio.js +11 -11
  195. package/dist/es/packages/radiogroup/radiogroup.js +6 -6
  196. package/dist/es/packages/range/range.js +7 -7
  197. package/dist/es/packages/range/utils.js +2 -2
  198. package/dist/es/packages/rate/index.d.ts +1 -1
  199. package/dist/es/packages/rate/rate.js +65 -19
  200. package/dist/es/packages/rate/style/rate.scss +244 -76
  201. package/dist/es/packages/rate/style/style.css +198 -68
  202. package/dist/es/packages/rate/style-jmapp/rate.scss +244 -76
  203. package/dist/es/packages/rate/style-jmapp/style.css +198 -68
  204. package/dist/es/packages/rate/style-jrkf/rate.scss +244 -76
  205. package/dist/es/packages/rate/style-jrkf/style.css +198 -68
  206. package/dist/es/packages/resultpage/resultpage.js +1 -1
  207. package/dist/es/packages/row/row.js +4 -4
  208. package/dist/es/packages/safearea/safearea.js +1 -1
  209. package/dist/es/packages/searchbar/searchbar.js +3 -3
  210. package/dist/es/packages/segmented/segmented.js +4 -4
  211. package/dist/es/packages/shortpassword/shortpassword.js +7 -7
  212. package/dist/es/packages/sidebar/sidebar.js +8 -8
  213. package/dist/es/packages/sidebar/utils.js +1 -1
  214. package/dist/es/packages/sidebaritem/sidebaritem.js +1 -1
  215. package/dist/es/packages/signature/signature.js +12 -12
  216. package/dist/es/packages/skeleton/skeleton.js +4 -4
  217. package/dist/es/packages/space/space.js +1 -1
  218. package/dist/es/packages/step/step.js +2 -2
  219. package/dist/es/packages/steps/steps.js +1 -1
  220. package/dist/es/packages/steps/style/style.css +1 -1
  221. package/dist/es/packages/sticky/sticky.js +4 -4
  222. package/dist/es/packages/swipe/swipe.js +16 -16
  223. package/dist/es/packages/swiper/effects/default.js +2 -2
  224. package/dist/es/packages/swiper/effects/focus.js +4 -4
  225. package/dist/es/packages/swiper/swiper.js +14 -14
  226. package/dist/es/packages/swiperitem/swiperitem.js +2 -2
  227. package/dist/es/packages/switch/switch.js +6 -6
  228. package/dist/es/packages/tabbar/tabbar.js +2 -2
  229. package/dist/es/packages/tabbaritem/tabbaritem.js +10 -10
  230. package/dist/es/packages/table/table.js +10 -10
  231. package/dist/es/packages/tabpane/tabpane.js +1 -1
  232. package/dist/es/packages/tabs/tabs.js +10 -10
  233. package/dist/es/packages/tag/tag.js +10 -10
  234. package/dist/es/packages/textarea/textarea.js +12 -12
  235. package/dist/es/packages/timedetail/timedetail.js +3 -3
  236. package/dist/es/packages/timeselect/timeselect.js +6 -6
  237. package/dist/es/packages/toast/Notification.js +1 -1
  238. package/dist/es/packages/toast/toast.js +2 -2
  239. package/dist/es/packages/tour/tour.js +11 -11
  240. package/dist/es/packages/trendarrow/trendarrow.js +4 -4
  241. package/dist/es/packages/uploader/preview.js +8 -8
  242. package/dist/es/packages/uploader/uploader.js +15 -15
  243. package/dist/es/packages/video/video.js +4 -4
  244. package/dist/es/packages/virtuallist/utils.js +5 -5
  245. package/dist/es/packages/virtuallist/virtuallist.js +2 -2
  246. package/dist/es/packages/watermark/watermark.js +2 -2
  247. package/dist/es/types/spec/empty/base.d.ts +15 -11
  248. package/dist/es/types/spec/empty/base.js +13 -1
  249. package/dist/es/types/spec/rate/base.d.ts +9 -0
  250. package/dist/es/utils/clamp.js +1 -1
  251. package/dist/es/utils/date.js +3 -3
  252. package/dist/es/utils/get-rect.js +1 -1
  253. package/dist/es/utils/interceptor.js +1 -1
  254. package/dist/es/utils/is-date.js +1 -1
  255. package/dist/es/utils/is-empty.js +1 -1
  256. package/dist/es/utils/is-function.js +1 -1
  257. package/dist/es/utils/is-object.js +1 -1
  258. package/dist/es/utils/is-promise.js +1 -1
  259. package/dist/es/utils/pad-zero.js +1 -1
  260. package/dist/es/utils/px-check.js +1 -1
  261. package/dist/es/utils/scale-f.js +2 -4
  262. package/dist/es/utils/sleep.js +1 -1
  263. package/dist/es/utils/taro/ConfigurableCSSTransition.js +1 -1
  264. package/dist/es/utils/taro/get-rect-by-id.js +1 -1
  265. package/dist/es/utils/taro/get-rect.js +3 -3
  266. package/dist/es/utils/taro/get-system-info.js +2 -2
  267. package/dist/es/utils/taro/platform.js +4 -4
  268. package/dist/es/utils/upper-case-first.js +1 -1
  269. package/dist/nutui.react.umd.js +1146 -1080
  270. package/dist/style-jmapp.css +1 -1
  271. package/dist/style-jmapp.scss +41 -41
  272. package/dist/style-jrkf.css +1 -1
  273. package/dist/style-jrkf.scss +42 -42
  274. package/dist/style.css +1 -1
  275. package/dist/style.scss +35 -35
  276. package/dist/styles/variables-daojia.scss +25 -12
  277. package/dist/styles/variables-jmapp.scss +42 -17
  278. package/dist/styles/variables-jrkf.scss +24 -20
  279. package/dist/styles/variables.scss +32 -24
  280. package/package.json +1 -1
package/dist/es/packages/rate/style/rate.scss CHANGED
@@ -14,6 +14,37 @@
14
14
  }
15
15
  }
16
16
 
17
+ &-horizontal {
18
+ flex-direction: row;
19
+ align-items: center;
20
+ }
21
+
22
+ &-vertical {
23
+ flex-direction: column;
24
+ align-items: center;
25
+ }
26
+
27
+ &-list {
28
+ display: flex;
29
+ align-items: center;
30
+ }
31
+
32
+ &-label {
33
+ color: $rate-label-color;
34
+ white-space: nowrap;
35
+ }
36
+
37
+ &-labels {
38
+ display: flex;
39
+ width: 100%;
40
+
41
+ &-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: $rate-label-color;
45
+ }
46
+ }
47
+
17
48
  &-item {
18
49
  display: flex;
19
50
  align-items: center;
@@ -33,38 +64,6 @@
33
64
  }
34
65
  }
35
66
 
36
- &-normal {
37
- margin-left: $rate-item-margin;
38
- .nut-icon {
39
- height: $rate-icon-size;
40
- width: $rate-icon-size;
41
- }
42
- }
43
-
44
- &-large {
45
- margin-left: calc($rate-item-margin * 2);
46
- .nut-icon {
47
- height: calc($rate-icon-size + scale-px(8px));
48
- width: calc($rate-icon-size + scale-px(8px));
49
- }
50
- }
51
-
52
- &-small {
53
- margin-left: calc($rate-item-margin / 2);
54
- .nut-icon {
55
- height: calc($rate-icon-size - scale-px(4px));
56
- width: calc($rate-icon-size - scale-px(4px));
57
- }
58
- }
59
-
60
- &-normal,
61
- &-large,
62
- &-small {
63
- &:first-child {
64
- margin-left: 0;
65
- }
66
- }
67
-
68
67
  &-icon {
69
68
  display: flex;
70
69
  align-items: center;
@@ -93,6 +92,10 @@
93
92
  left: auto;
94
93
  transform: none;
95
94
  }
95
+
96
+ &-animate {
97
+ animation: nut-rate-bounce 0.3s ease-in-out;
98
+ }
96
99
  }
97
100
  }
98
101
 
@@ -107,85 +110,250 @@
107
110
  color: $rate-font-color;
108
111
  font-family: 'JDZH-Regular';
109
112
 
110
- &-normal {
111
- padding-left: $rate-item-margin;
112
- font-size: $rate-font-size;
113
+ &-disabled {
114
+ color: $rate-icon-inactive-color;
115
+ }
116
+ }
117
+
118
+ // horizontal layout
119
+ &-horizontal {
120
+ .nut-rate-item {
121
+ margin-left: $rate-item-margin;
122
+ &:first-child {
123
+ margin-left: 0;
124
+ }
125
+ }
126
+
127
+ // 12DP - star gap 2px
128
+ .nut-rate-item-small {
129
+ margin-left: scale-px(2px);
130
+ &:first-child {
131
+ margin-left: 0;
132
+ }
133
+ .nut-icon {
134
+ height: scale-font-px(12px);
135
+ width: scale-font-px(12px);
136
+ }
137
+ }
138
+
139
+ .nut-rate-item-normal {
140
+ .nut-icon {
141
+ height: scale-font-px(16px);
142
+ width: scale-font-px(16px);
143
+ }
144
+ }
145
+
146
+ .nut-rate-item-large {
147
+ .nut-icon {
148
+ height: scale-font-px(20px);
149
+ width: scale-font-px(20px);
150
+ }
151
+ }
152
+
153
+ .nut-rate-label-small {
154
+ font-size: $font-size-s;
155
+ margin-right: scale-px(4px);
156
+ }
157
+
158
+ .nut-rate-label-normal {
159
+ font-size: $font-size-s;
160
+ margin-right: scale-px(12px);
161
+ }
162
+
163
+ .nut-rate-label-large {
164
+ font-size: $font-size-base;
165
+ margin-right: scale-px(12px);
166
+ }
167
+
168
+ .nut-rate-score-small {
169
+ padding-left: scale-px(4px);
170
+ font-size: $font-size-s;
113
171
  line-height: $line-height-s;
114
172
  }
115
173
 
116
- &-large {
117
- font-size: $rate-font-size-large;
118
- line-height: $line-height-xl;
119
- padding-left: calc($rate-item-margin * 2);
174
+ .nut-rate-score-normal {
175
+ padding-left: scale-px(12px);
176
+ font-size: $font-size-s;
177
+ line-height: $line-height-s;
120
178
  }
121
179
 
122
- &-small {
123
- font-size: $rate-font-size-small;
124
- line-height: $line-height-xxs;
125
- padding-left: calc($rate-item-margin / 2);
180
+ .nut-rate-score-large {
181
+ padding-left: scale-px(12px);
182
+ font-size: $font-size-base;
183
+ line-height: $line-height-base;
126
184
  }
185
+ }
127
186
 
128
- &-disabled {
129
- color: $rate-icon-inactive-color;
187
+ // vertical layout
188
+ &-vertical {
189
+ .nut-rate-list {
190
+ justify-content: center;
191
+ width: 100%;
192
+ }
193
+
194
+ .nut-rate-item {
195
+ margin-left: $rate-item-margin;
196
+ &:first-child {
197
+ margin-left: 0;
198
+ }
199
+ }
200
+
201
+ .nut-rate-item-small,
202
+ .nut-rate-item-normal {
203
+ .nut-icon {
204
+ height: scale-font-px(20px);
205
+ width: scale-font-px(20px);
206
+ }
207
+ }
208
+
209
+ .nut-rate-item-large {
210
+ flex: 1;
211
+ justify-content: center;
212
+
213
+ .nut-icon {
214
+ height: scale-font-px(28px);
215
+ width: scale-font-px(28px);
216
+ }
217
+ }
218
+
219
+ .nut-rate-label-small,
220
+ .nut-rate-label-normal {
221
+ font-size: $font-size-xs;
222
+ margin-top: scale-px(6px);
223
+ }
224
+
225
+ .nut-rate-label-large {
226
+ font-size: $font-size-s;
227
+ margin-top: scale-px(8px);
228
+ }
229
+
230
+ .nut-rate-labels {
231
+ width: 100%;
232
+ }
233
+
234
+ .nut-rate-labels-small,
235
+ .nut-rate-labels-normal {
236
+ margin-top: scale-px(6px);
237
+
238
+ .nut-rate-labels-item {
239
+ font-size: $font-size-xs;
240
+ }
241
+ }
242
+
243
+ .nut-rate-labels-large {
244
+ margin-top: scale-px(8px);
245
+
246
+ .nut-rate-labels-item {
247
+ font-size: $font-size-s;
248
+ }
249
+ }
250
+
251
+ .nut-rate-score-small,
252
+ .nut-rate-score-normal {
253
+ font-size: $font-size-xs;
254
+ line-height: $line-height-xs;
255
+ margin-top: scale-px(6px);
256
+ }
257
+
258
+ .nut-rate-score-large {
259
+ font-size: $font-size-s;
260
+ line-height: $line-height-s;
261
+ margin-top: scale-px(8px);
130
262
  }
131
263
  }
132
264
  }
133
265
 
266
+ @keyframes nut-rate-bounce {
267
+ 0% {
268
+ transform: scale(1);
269
+ }
270
+ 50% {
271
+ transform: scale(1.25);
272
+ }
273
+ 100% {
274
+ transform: scale(1);
275
+ }
276
+ }
277
+
134
278
  [dir='rtl'] .nut-rate,
135
279
  .nut-rtl .nut-rate {
136
- &-item {
137
- margin-left: 0;
138
- &:first-child {
280
+ &-horizontal {
281
+ .nut-rate-item {
282
+ margin-left: 0;
283
+ margin-right: $rate-item-margin;
284
+
285
+ &:first-child {
286
+ margin-right: 0;
287
+ }
288
+ }
289
+
290
+ .nut-rate-item-small {
291
+ margin-left: 0;
292
+ margin-right: scale-px(2px);
293
+
294
+ &:first-child {
295
+ margin-right: 0;
296
+ }
297
+ }
298
+
299
+ .nut-rate-label {
139
300
  margin-right: 0;
140
301
  }
141
302
 
142
- &-normal {
143
- margin-right: $rate-item-margin;
303
+ .nut-rate-label-small {
304
+ margin-left: scale-px(4px);
144
305
  }
145
306
 
146
- &-large {
147
- margin-right: calc($rate-item-margin * 2);
307
+ .nut-rate-label-normal {
308
+ margin-left: scale-px(12px);
148
309
  }
149
310
 
150
- &-small {
151
- margin-right: calc($rate-item-margin - scale-px(2px));
311
+ .nut-rate-label-large {
312
+ margin-left: scale-px(12px);
152
313
  }
153
314
 
154
- &:last-child {
155
- margin-left: 0;
315
+ .nut-rate-score {
316
+ padding-left: 0;
156
317
  }
157
318
 
158
- &-half {
159
- left: auto;
160
- right: 0;
319
+ .nut-rate-score-small {
320
+ padding-right: scale-px(4px);
161
321
  }
162
322
 
163
- &-icon {
164
- &.nut-rate-item-icon.nut-rate-item-icon-half {
165
- left: auto;
166
- right: 0;
167
- }
323
+ .nut-rate-score-normal {
324
+ padding-right: scale-px(12px);
325
+ }
168
326
 
169
- &.nut-rate-item-icon::before {
170
- left: auto;
171
- right: auto;
172
- }
327
+ .nut-rate-score-large {
328
+ padding-right: scale-px(12px);
173
329
  }
174
330
  }
175
331
 
176
- &-score {
177
- padding-left: 0;
332
+ &-vertical {
333
+ .nut-rate-item {
334
+ margin-left: 0;
335
+ margin-right: $rate-item-margin;
178
336
 
179
- &-large {
180
- padding-right: calc($rate-item-margin * 2);
337
+ &:first-child {
338
+ margin-right: 0;
339
+ }
181
340
  }
341
+ }
182
342
 
183
- &-normal {
184
- padding-right: $rate-item-margin;
343
+ &-item-half {
344
+ left: auto;
345
+ right: 0;
346
+ }
347
+
348
+ &-item-icon {
349
+ &.nut-rate-item-icon.nut-rate-item-icon-half {
350
+ left: auto;
351
+ right: 0;
185
352
  }
186
353
 
187
- &-small {
188
- padding-right: calc($rate-item-margin - scale-px(2px));
354
+ &.nut-rate-item-icon::before {
355
+ left: auto;
356
+ right: auto;
189
357
  }
190
358
  }
191
359
  }
package/dist/es/packages/rate/style/style.css CHANGED
@@ -18,6 +18,31 @@ page {
18
18
  .nut-rate.readonly .nut-rate-item-icon {
19
19
  cursor: default;
20
20
  }
21
+ .nut-rate-horizontal {
22
+ flex-direction: row;
23
+ align-items: center;
24
+ }
25
+ .nut-rate-vertical {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ }
29
+ .nut-rate-list {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .nut-rate-label {
34
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
35
+ white-space: nowrap;
36
+ }
37
+ .nut-rate-labels {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+ .nut-rate-labels-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
45
+ }
21
46
  .nut-rate-item {
22
47
  display: flex;
23
48
  align-items: center;
@@ -35,30 +60,6 @@ page {
35
60
  .nut-rate-item-half .nut-icon {
36
61
  flex-shrink: 0;
37
62
  }
38
- .nut-rate-item-normal {
39
- margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
40
- }
41
- .nut-rate-item-normal .nut-icon {
42
- height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
43
- width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
44
- }
45
- .nut-rate-item-large {
46
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
47
- }
48
- .nut-rate-item-large .nut-icon {
49
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
50
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
51
- }
52
- .nut-rate-item-small {
53
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
54
- }
55
- .nut-rate-item-small .nut-icon {
56
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
57
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
58
- }
59
- .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
60
- margin-left: 0;
61
- }
62
63
  .nut-rate-item-icon {
63
64
  display: flex;
64
65
  align-items: center;
@@ -82,6 +83,9 @@ page {
82
83
  left: auto;
83
84
  transform: none;
84
85
  }
86
+ .nut-rate-item-icon-animate {
87
+ animation: nut-rate-bounce 0.3s ease-in-out;
88
+ }
85
89
  .nut-rate-score {
86
90
  /* #ifdef dynamic*/
87
91
  display: flex;
@@ -93,48 +97,190 @@ page {
93
97
  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
94
98
  font-family: "JDZH-Regular";
95
99
  }
96
- .nut-rate-score-normal {
97
- padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
98
- font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
+ .nut-rate-score-disabled {
101
+ color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
102
+ }
103
+ .nut-rate-horizontal .nut-rate-item {
104
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
105
+ }
106
+ .nut-rate-horizontal .nut-rate-item:first-child {
107
+ margin-left: 0;
108
+ }
109
+ .nut-rate-horizontal .nut-rate-item-small {
110
+ margin-left: calc(2px * var(--nut-scale-f, 1));
111
+ }
112
+ .nut-rate-horizontal .nut-rate-item-small:first-child {
113
+ margin-left: 0;
114
+ }
115
+ .nut-rate-horizontal .nut-rate-item-small .nut-icon {
116
+ height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
117
+ width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
118
+ }
119
+ .nut-rate-horizontal .nut-rate-item-normal .nut-icon {
120
+ height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
121
+ width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
122
+ }
123
+ .nut-rate-horizontal .nut-rate-item-large .nut-icon {
124
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
125
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
126
+ }
127
+ .nut-rate-horizontal .nut-rate-label-small {
128
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
129
+ margin-right: calc(4px * var(--nut-scale-f, 1));
130
+ }
131
+ .nut-rate-horizontal .nut-rate-label-normal {
132
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
133
+ margin-right: calc(12px * var(--nut-scale-f, 1));
134
+ }
135
+ .nut-rate-horizontal .nut-rate-label-large {
136
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
137
+ margin-right: calc(12px * var(--nut-scale-f, 1));
138
+ }
139
+ .nut-rate-horizontal .nut-rate-score-small {
140
+ padding-left: calc(4px * var(--nut-scale-f, 1));
141
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
99
142
  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
143
  }
101
- .nut-rate-score-large {
102
- font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
103
- line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
104
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
144
+ .nut-rate-horizontal .nut-rate-score-normal {
145
+ padding-left: calc(12px * var(--nut-scale-f, 1));
146
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
147
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
148
  }
106
- .nut-rate-score-small {
107
- font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
108
- line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
109
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
149
+ .nut-rate-horizontal .nut-rate-score-large {
150
+ padding-left: calc(12px * var(--nut-scale-f, 1));
151
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
152
+ line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
110
153
  }
111
- .nut-rate-score-disabled {
112
- color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
154
+ .nut-rate-vertical .nut-rate-list {
155
+ justify-content: center;
156
+ width: 100%;
157
+ }
158
+ .nut-rate-vertical .nut-rate-item {
159
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
160
+ }
161
+ .nut-rate-vertical .nut-rate-item:first-child {
162
+ margin-left: 0;
163
+ }
164
+ .nut-rate-vertical .nut-rate-item-small .nut-icon,
165
+ .nut-rate-vertical .nut-rate-item-normal .nut-icon {
166
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
167
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
168
+ }
169
+ .nut-rate-vertical .nut-rate-item-large {
170
+ flex: 1;
171
+ justify-content: center;
172
+ }
173
+ .nut-rate-vertical .nut-rate-item-large .nut-icon {
174
+ height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
175
+ width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
176
+ }
177
+ .nut-rate-vertical .nut-rate-label-small,
178
+ .nut-rate-vertical .nut-rate-label-normal {
179
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
180
+ margin-top: calc(6px * var(--nut-scale-f, 1));
181
+ }
182
+ .nut-rate-vertical .nut-rate-label-large {
183
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
184
+ margin-top: calc(8px * var(--nut-scale-f, 1));
185
+ }
186
+ .nut-rate-vertical .nut-rate-labels {
187
+ width: 100%;
188
+ }
189
+ .nut-rate-vertical .nut-rate-labels-small,
190
+ .nut-rate-vertical .nut-rate-labels-normal {
191
+ margin-top: calc(6px * var(--nut-scale-f, 1));
192
+ }
193
+ .nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
194
+ .nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
195
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
196
+ }
197
+ .nut-rate-vertical .nut-rate-labels-large {
198
+ margin-top: calc(8px * var(--nut-scale-f, 1));
199
+ }
200
+ .nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
201
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
202
+ }
203
+ .nut-rate-vertical .nut-rate-score-small,
204
+ .nut-rate-vertical .nut-rate-score-normal {
205
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
206
+ line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
207
+ margin-top: calc(6px * var(--nut-scale-f, 1));
208
+ }
209
+ .nut-rate-vertical .nut-rate-score-large {
210
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
211
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
212
+ margin-top: calc(8px * var(--nut-scale-f, 1));
113
213
  }
114
214
 
115
- [dir=rtl] .nut-rate-item,
116
- .nut-rtl .nut-rate-item {
215
+ @keyframes nut-rate-bounce {
216
+ 0% {
217
+ transform: scale(1);
218
+ }
219
+ 50% {
220
+ transform: scale(1.25);
221
+ }
222
+ 100% {
223
+ transform: scale(1);
224
+ }
225
+ }
226
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item,
227
+ .nut-rtl .nut-rate-horizontal .nut-rate-item {
117
228
  margin-left: 0;
229
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
118
230
  }
119
- [dir=rtl] .nut-rate-item:first-child,
120
- .nut-rtl .nut-rate-item:first-child {
231
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
232
+ .nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
121
233
  margin-right: 0;
122
234
  }
123
- [dir=rtl] .nut-rate-item-normal,
124
- .nut-rtl .nut-rate-item-normal {
125
- margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
235
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
236
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small {
237
+ margin-left: 0;
238
+ margin-right: calc(2px * var(--nut-scale-f, 1));
239
+ }
240
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
241
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
242
+ margin-right: 0;
243
+ }
244
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label,
245
+ .nut-rtl .nut-rate-horizontal .nut-rate-label {
246
+ margin-right: 0;
247
+ }
248
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
249
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-small {
250
+ margin-left: calc(4px * var(--nut-scale-f, 1));
251
+ }
252
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
253
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
254
+ margin-left: calc(12px * var(--nut-scale-f, 1));
255
+ }
256
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
257
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-large {
258
+ margin-left: calc(12px * var(--nut-scale-f, 1));
259
+ }
260
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score,
261
+ .nut-rtl .nut-rate-horizontal .nut-rate-score {
262
+ padding-left: 0;
126
263
  }
127
- [dir=rtl] .nut-rate-item-large,
128
- .nut-rtl .nut-rate-item-large {
129
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
264
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
265
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-small {
266
+ padding-right: calc(4px * var(--nut-scale-f, 1));
130
267
  }
131
- [dir=rtl] .nut-rate-item-small,
132
- .nut-rtl .nut-rate-item-small {
133
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
268
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
269
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
270
+ padding-right: calc(12px * var(--nut-scale-f, 1));
134
271
  }
135
- [dir=rtl] .nut-rate-item:last-child,
136
- .nut-rtl .nut-rate-item:last-child {
272
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
273
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-large {
274
+ padding-right: calc(12px * var(--nut-scale-f, 1));
275
+ }
276
+ [dir=rtl] .nut-rate-vertical .nut-rate-item,
277
+ .nut-rtl .nut-rate-vertical .nut-rate-item {
137
278
  margin-left: 0;
279
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
280
+ }
281
+ [dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
282
+ .nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
283
+ margin-right: 0;
138
284
  }
139
285
  [dir=rtl] .nut-rate-item-half,
140
286
  .nut-rtl .nut-rate-item-half {
@@ -150,20 +296,4 @@ page {
150
296
  .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
151
297
  left: auto;
152
298
  right: auto;
153
- }
154
- [dir=rtl] .nut-rate-score,
155
- .nut-rtl .nut-rate-score {
156
- padding-left: 0;
157
- }
158
- [dir=rtl] .nut-rate-score-large,
159
- .nut-rtl .nut-rate-score-large {
160
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
161
- }
162
- [dir=rtl] .nut-rate-score-normal,
163
- .nut-rtl .nut-rate-score-normal {
164
- padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
165
- }
166
- [dir=rtl] .nut-rate-score-small,
167
- .nut-rtl .nut-rate-score-small {
168
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
169
299
  }