@nutui/nutui 3.1.15 → 3.1.17-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 (127) hide show
  1. package/CHANGELOG.md +22 -1
  2. package/dist/nutui.d.ts +3 -1
  3. package/dist/nutui.es.js +2037 -1005
  4. package/dist/nutui.umd.js +2043 -1006
  5. package/dist/packages/_es/ActionSheet.js +2 -2
  6. package/dist/packages/_es/Address.js +60 -7
  7. package/dist/packages/_es/Audio.js +289 -0
  8. package/dist/packages/_es/Avatar.js +1 -1
  9. package/dist/packages/_es/BackTop.js +1 -1
  10. package/dist/packages/_es/Badge.js +1 -1
  11. package/dist/packages/_es/Barrage.js +1 -1
  12. package/dist/packages/_es/Button.js +13 -4
  13. package/dist/packages/_es/Calendar.js +428 -209
  14. package/dist/packages/_es/Card.js +1 -2
  15. package/dist/packages/_es/Cascader.js +2 -2
  16. package/dist/packages/_es/Cell.js +1 -1
  17. package/dist/packages/_es/CellGroup.js +1 -1
  18. package/dist/packages/_es/Checkbox.js +2 -2
  19. package/dist/packages/_es/CheckboxGroup.js +1 -1
  20. package/dist/packages/_es/CircleProgress.js +1 -1
  21. package/dist/packages/_es/Col.js +1 -1
  22. package/dist/packages/_es/Collapse.js +1 -1
  23. package/dist/packages/_es/CollapseItem.js +1 -1
  24. package/dist/packages/_es/CountDown.js +1 -1
  25. package/dist/packages/_es/CountUp.js +1 -1
  26. package/dist/packages/_es/DatePicker.js +1 -3
  27. package/dist/packages/_es/Dialog.js +1 -1
  28. package/dist/packages/_es/Divider.js +1 -1
  29. package/dist/packages/_es/Drag.js +1 -1
  30. package/dist/packages/_es/Elevator.js +10 -5
  31. package/dist/packages/_es/Empty.js +1 -1
  32. package/dist/packages/_es/FixedNav.js +1 -1
  33. package/dist/packages/_es/Form.js +1 -1
  34. package/dist/packages/_es/FormItem.js +1 -1
  35. package/dist/packages/_es/Grid.js +1 -1
  36. package/dist/packages/_es/GridItem.js +1 -1
  37. package/dist/packages/_es/Icon.js +1 -1
  38. package/dist/packages/_es/ImagePreview.js +1 -3
  39. package/dist/packages/_es/Indicator.js +1 -1
  40. package/dist/packages/_es/InfiniteLoading.js +1 -1
  41. package/dist/packages/_es/Input.js +21 -11
  42. package/dist/packages/_es/InputNumber.js +1 -1
  43. package/dist/packages/_es/Layout.js +1 -1
  44. package/dist/packages/_es/Menu.js +2 -2
  45. package/dist/packages/_es/MenuItem.js +1 -1
  46. package/dist/packages/_es/Navbar.js +6 -32
  47. package/dist/packages/_es/NoticeBar.js +1 -4
  48. package/dist/packages/_es/Notify.js +1 -1
  49. package/dist/packages/_es/NumberKeyboard.js +1 -2
  50. package/dist/packages/_es/OverLay.js +1 -1
  51. package/dist/packages/_es/Pagination.js +1 -1
  52. package/dist/packages/_es/Picker.js +170 -189
  53. package/dist/packages/_es/Popover.js +1 -1
  54. package/dist/packages/_es/Popup.js +1 -1
  55. package/dist/packages/_es/Price.js +2 -2
  56. package/dist/packages/_es/Progress.js +24 -11
  57. package/dist/packages/_es/Radio.js +2 -2
  58. package/dist/packages/_es/RadioGroup.js +1 -1
  59. package/dist/packages/_es/Range.js +3 -3
  60. package/dist/packages/_es/Rate.js +1 -1
  61. package/dist/packages/_es/Row.js +1 -1
  62. package/dist/packages/_es/SearchBar.js +1 -1
  63. package/dist/packages/_es/ShortPassword.js +5 -2
  64. package/dist/packages/_es/SideNavBar.js +1 -1
  65. package/dist/packages/_es/SideNavBarItem.js +1 -1
  66. package/dist/packages/_es/Signature.js +1 -1
  67. package/dist/packages/_es/Skeleton.js +8 -6
  68. package/dist/packages/_es/Sku.js +1 -2
  69. package/dist/packages/_es/Step.js +1 -1
  70. package/dist/packages/_es/Steps.js +1 -1
  71. package/dist/packages/_es/Sticky.js +143 -0
  72. package/dist/packages/_es/SubSideNavBar.js +1 -1
  73. package/dist/packages/_es/Swipe.js +2 -2
  74. package/dist/packages/_es/Swiper.js +1 -1
  75. package/dist/packages/_es/SwiperItem.js +3 -8
  76. package/dist/packages/_es/Switch.js +2 -2
  77. package/dist/packages/_es/TabPane.js +1 -1
  78. package/dist/packages/_es/Tabbar.js +1 -1
  79. package/dist/packages/_es/TabbarItem.js +1 -1
  80. package/dist/packages/_es/Table.js +2 -2
  81. package/dist/packages/_es/Tabs.js +1 -1
  82. package/dist/packages/_es/Tag.js +1 -1
  83. package/dist/packages/_es/TextArea.js +1 -1
  84. package/dist/packages/_es/TimeDetail.js +1 -1
  85. package/dist/packages/_es/TimePannel.js +1 -1
  86. package/dist/packages/_es/TimeSelect.js +1 -1
  87. package/dist/packages/_es/Toast.js +1 -1
  88. package/dist/packages/_es/Uploader.js +6 -4
  89. package/dist/packages/_es/Video.js +1 -55
  90. package/dist/packages/_es/common.js +1 -1
  91. package/dist/packages/_es/component.js +1 -1
  92. package/dist/packages/_es/index.js +1 -1
  93. package/dist/packages/_es/index2.js +28 -56
  94. package/dist/packages/_es/index3.js +56 -28
  95. package/dist/packages/_es/plugin-vue_export-helper.js +1 -1
  96. package/dist/packages/_es/pxCheck.js +1 -1
  97. package/dist/packages/_es/raf.js +1 -1
  98. package/dist/packages/_es/util.js +1 -1
  99. package/dist/packages/address/index.scss +8 -0
  100. package/dist/packages/audio/index.scss +66 -0
  101. package/dist/packages/audiooperate/index.scss +13 -0
  102. package/dist/packages/button/index.scss +3 -0
  103. package/dist/packages/calendar/index.scss +47 -41
  104. package/dist/packages/calendaritem/index.scss +57 -42
  105. package/dist/packages/elevator/index.scss +3 -0
  106. package/dist/packages/icon/index.scss +2 -2
  107. package/dist/packages/infiniteloading/index.scss +1 -1
  108. package/dist/packages/input/index.scss +8 -3
  109. package/dist/packages/menuitem/index.scss +1 -1
  110. package/dist/packages/navbar/index.scss +8 -34
  111. package/dist/packages/picker/index.scss +73 -17
  112. package/dist/packages/range/index.scss +4 -4
  113. package/dist/packages/row/index.scss +3 -0
  114. package/dist/packages/sticky/index.scss +5 -0
  115. package/dist/packages/tabbar/index.scss +4 -2
  116. package/dist/style.css +1 -1
  117. package/dist/styles/font/config.json +6 -1
  118. package/dist/styles/font/demo_index.html +118 -3
  119. package/dist/styles/font/iconfont.css +23 -3
  120. package/dist/styles/font/iconfont.js +25 -24
  121. package/dist/styles/font/iconfont.json +35 -0
  122. package/dist/styles/font/iconfont.ttf +0 -0
  123. package/dist/styles/font/iconfont.woff +0 -0
  124. package/dist/styles/font/iconfont.woff2 +0 -0
  125. package/dist/styles/themes/default.scss +40 -37
  126. package/dist/styles/variables.scss +34 -31
  127. package/package.json +12 -13
@@ -1,64 +1,36 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
6
- import { ref } from "vue";
7
- const MIN_DISTANCE = 10;
8
- function getDirection(x, y) {
9
- if (x > y && x > MIN_DISTANCE) {
10
- return "horizontal";
6
+ import { unref } from "vue";
7
+ function isWindow(val) {
8
+ return val === window;
9
+ }
10
+ const useRect = (elementRef) => {
11
+ const element = unref(elementRef);
12
+ if (isWindow(element)) {
13
+ const width = element.innerWidth;
14
+ const height = element.innerHeight;
15
+ return {
16
+ top: 0,
17
+ left: 0,
18
+ right: width,
19
+ bottom: height,
20
+ width,
21
+ height
22
+ };
11
23
  }
12
- if (y > x && y > MIN_DISTANCE) {
13
- return "vertical";
24
+ if (element && element.getBoundingClientRect) {
25
+ return element.getBoundingClientRect();
14
26
  }
15
- return "";
16
- }
17
- function useTouch() {
18
- const startX = ref(0);
19
- const startY = ref(0);
20
- const deltaX = ref(0);
21
- const deltaY = ref(0);
22
- const offsetX = ref(0);
23
- const offsetY = ref(0);
24
- const direction = ref("");
25
- const isVertical = () => direction.value === "vertical";
26
- const isHorizontal = () => direction.value === "horizontal";
27
- const reset = () => {
28
- deltaX.value = 0;
29
- deltaY.value = 0;
30
- offsetX.value = 0;
31
- offsetY.value = 0;
32
- direction.value = "";
33
- };
34
- const start = (event) => {
35
- reset();
36
- startX.value = event.touches[0].clientX;
37
- startY.value = event.touches[0].clientY;
38
- };
39
- const move = (event) => {
40
- const touch = event.touches[0];
41
- deltaX.value = touch.clientX - startX.value;
42
- deltaY.value = touch.clientY - startY.value;
43
- offsetX.value = Math.abs(deltaX.value);
44
- offsetY.value = Math.abs(deltaY.value);
45
- if (!direction.value) {
46
- direction.value = getDirection(offsetX.value, offsetY.value);
47
- }
48
- };
49
27
  return {
50
- move,
51
- start,
52
- reset,
53
- startX,
54
- startY,
55
- deltaX,
56
- deltaY,
57
- offsetX,
58
- offsetY,
59
- direction,
60
- isVertical,
61
- isHorizontal
28
+ top: 0,
29
+ left: 0,
30
+ right: 0,
31
+ bottom: 0,
32
+ width: 0,
33
+ height: 0
62
34
  };
63
- }
64
- export { useTouch as u };
35
+ };
36
+ export { useRect as u };
@@ -1,36 +1,64 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
6
- import { unref } from "vue";
7
- function isWindow(val) {
8
- return val === window;
9
- }
10
- const useRect = (elementRef) => {
11
- const element = unref(elementRef);
12
- if (isWindow(element)) {
13
- const width = element.innerWidth;
14
- const height = element.innerHeight;
15
- return {
16
- top: 0,
17
- left: 0,
18
- right: width,
19
- bottom: height,
20
- width,
21
- height
22
- };
6
+ import { ref } from "vue";
7
+ const MIN_DISTANCE = 10;
8
+ function getDirection(x, y) {
9
+ if (x > y && x > MIN_DISTANCE) {
10
+ return "horizontal";
23
11
  }
24
- if (element && element.getBoundingClientRect) {
25
- return element.getBoundingClientRect();
12
+ if (y > x && y > MIN_DISTANCE) {
13
+ return "vertical";
26
14
  }
15
+ return "";
16
+ }
17
+ function useTouch() {
18
+ const startX = ref(0);
19
+ const startY = ref(0);
20
+ const deltaX = ref(0);
21
+ const deltaY = ref(0);
22
+ const offsetX = ref(0);
23
+ const offsetY = ref(0);
24
+ const direction = ref("");
25
+ const isVertical = () => direction.value === "vertical";
26
+ const isHorizontal = () => direction.value === "horizontal";
27
+ const reset = () => {
28
+ deltaX.value = 0;
29
+ deltaY.value = 0;
30
+ offsetX.value = 0;
31
+ offsetY.value = 0;
32
+ direction.value = "";
33
+ };
34
+ const start = (event) => {
35
+ reset();
36
+ startX.value = event.touches[0].clientX;
37
+ startY.value = event.touches[0].clientY;
38
+ };
39
+ const move = (event) => {
40
+ const touch = event.touches[0];
41
+ deltaX.value = touch.clientX - startX.value;
42
+ deltaY.value = touch.clientY - startY.value;
43
+ offsetX.value = Math.abs(deltaX.value);
44
+ offsetY.value = Math.abs(deltaY.value);
45
+ if (!direction.value) {
46
+ direction.value = getDirection(offsetX.value, offsetY.value);
47
+ }
48
+ };
27
49
  return {
28
- top: 0,
29
- left: 0,
30
- right: 0,
31
- bottom: 0,
32
- width: 0,
33
- height: 0
50
+ move,
51
+ start,
52
+ reset,
53
+ startX,
54
+ startY,
55
+ deltaX,
56
+ deltaY,
57
+ offsetX,
58
+ offsetY,
59
+ direction,
60
+ isVertical,
61
+ isHorizontal
34
62
  };
35
- };
36
- export { useRect as u };
63
+ }
64
+ export { useTouch as u };
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui v3.1.15 Fri Jan 21 2022 15:38:52 GMT+0800 (GMT+08:00)
2
+ * @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
3
3
  * (c) 2021 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
@@ -37,6 +37,14 @@
37
37
  font-weight: bold;
38
38
  }
39
39
 
40
+ view {
41
+ display: block;
42
+ max-width: 100px;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
46
+ }
47
+
40
48
  span {
41
49
  display: inline-block;
42
50
  max-width: 100px;
@@ -0,0 +1,66 @@
1
+ .nut-audio {
2
+ padding: 0;
3
+ .progress-wrapper {
4
+ display: flex;
5
+ align-items: center;
6
+ width: 100%;
7
+ margin: 0px auto;
8
+ padding: 10px 0;
9
+
10
+ .progress-bar-wrapper {
11
+ flex: 1;
12
+ margin: 0 10px;
13
+ }
14
+
15
+ .time {
16
+ min-width: 50px;
17
+ font-size: 12px;
18
+ text-align: center;
19
+ }
20
+ }
21
+
22
+ .nut-audio-icon {
23
+ position: relative;
24
+ display: inline-block;
25
+
26
+ .nut-audio-icon-box {
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ width: 30px;
31
+ height: 30px;
32
+ background: #fff;
33
+ border-radius: 50%;
34
+ box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
35
+ &.nut-audio-icon-stop {
36
+ &::after {
37
+ position: absolute;
38
+ left: 50%;
39
+ top: 50%;
40
+ transform: translateX(-15px);
41
+ content: '';
42
+ height: 2px;
43
+ width: 30px;
44
+ background: $disable-color;
45
+ transform: rotate(45deg);
46
+ transform-origin: 8px -18px;
47
+ }
48
+ }
49
+ }
50
+ }
51
+
52
+ .audioMain {
53
+ margin-top: 30px;
54
+ }
55
+
56
+ .custom-button {
57
+ width: 8px;
58
+ height: 8px;
59
+ color: #fff;
60
+ font-size: 10px;
61
+ line-height: 18px;
62
+ text-align: center;
63
+ background-color: #ee0a24;
64
+ border-radius: 100px;
65
+ }
66
+ }
@@ -0,0 +1,13 @@
1
+ .nut-audio-operate-group {
2
+ display: flex;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ margin-top: 10px;
7
+
8
+ .nut-audio-operate {
9
+ .nut-audio-operate-item {
10
+ margin: 0 5px;
11
+ }
12
+ }
13
+ }
@@ -34,6 +34,9 @@
34
34
  opacity: 0;
35
35
  content: ' ';
36
36
  }
37
+ &::after {
38
+ border: none;
39
+ }
37
40
  &:active::before {
38
41
  opacity: 0.1;
39
42
  }
@@ -2,30 +2,24 @@
2
2
  position: relative;
3
3
  display: flex;
4
4
  flex: 1;
5
- height: 518px;
6
- padding-top: 132px;
7
- padding-bottom: 78px;
8
- color: $calendar-base-color;
9
- font-size: $calendar-base-font;
10
- background-color: $white;
5
+ color: #333333;
6
+ font-size: 16px;
7
+ background-color: #fff;
11
8
  overflow: hidden;
12
-
9
+ height: 100%;
10
+ flex-direction: column;
13
11
  &.nut-calendar-tile {
14
- padding-top: 46px;
15
- padding-bottom: 0;
16
-
17
12
  .nut-calendar-header {
18
13
  .calendar-title {
19
14
  font-size: $calendar-base-font;
20
15
  }
21
16
  }
22
17
  }
23
-
24
18
  .nut-calendar-taro {
25
19
  height: 60vh;
26
20
  }
27
21
  .popup-box {
28
- height: 518px;
22
+ height: 100%;
29
23
  }
30
24
  .nut-calendar-content {
31
25
  overflow-y: auto;
@@ -36,26 +30,21 @@
36
30
 
37
31
  // 头部导航
38
32
  .nut-calendar-header {
39
- position: absolute;
40
- top: -1px;
41
- left: 0;
42
- right: 0;
43
33
  display: flex;
44
34
  flex-direction: column;
45
35
  text-align: center;
46
36
  padding-top: 1px;
47
37
  background-color: $white;
48
- z-index: 1;
49
38
 
50
39
  .calendar-title {
51
- padding-top: 22px;
52
40
  font-size: $calendar-title-font;
53
- line-height: 25px;
54
- border-radius: 12px 12px 0 0;
41
+ line-height: 44px;
42
+ }
43
+ .calendar-top-slot {
44
+ height: 24px;
55
45
  }
56
-
57
46
  .calendar-curr-month {
58
- padding: 10px 0 7px;
47
+ padding: 7px 0;
59
48
  line-height: 22px;
60
49
  }
61
50
 
@@ -63,7 +52,7 @@
63
52
  display: flex;
64
53
  align-items: center;
65
54
  justify-content: space-around;
66
- height: 46px;
55
+ height: 36px;
67
56
  border-radius: 0px 0px 12px 12px;
68
57
  box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
69
58
 
@@ -79,13 +68,17 @@
79
68
  // 月份
80
69
  .nut-calendar-content {
81
70
  flex: 1;
82
-
71
+ width: 100%;
72
+ display: block;
83
73
  .calendar-months-panel {
84
74
  position: relative;
85
75
  width: 100%;
86
76
  height: auto;
87
77
  display: block;
88
-
78
+ box-sizing: border-box;
79
+ .viewArea {
80
+ display: block;
81
+ }
89
82
  .calendar-month {
90
83
  display: flex;
91
84
  flex-direction: column;
@@ -118,14 +111,12 @@
118
111
 
119
112
  .calendar-month-con {
120
113
  overflow: hidden;
121
-
122
114
  .calendar-month-item {
123
115
  .calendar-month-day:nth-child(7n + 0),
124
116
  .calendar-month-day:nth-child(7n + 1) {
125
117
  color: $calendar-primary-color;
126
118
  }
127
119
  }
128
-
129
120
  .calendar-month-day {
130
121
  float: left;
131
122
  width: 14.28%;
@@ -136,24 +127,43 @@
136
127
  flex-direction: column;
137
128
  position: relative;
138
129
 
139
- .curr-tips,
130
+ .calendar-curr-tips {
131
+ position: absolute;
132
+ width: 100%;
133
+ }
134
+
135
+ .calendar-curr-tip-curr {
136
+ position: absolute;
137
+ bottom: 6px;
138
+ width: 100%;
139
+ font-size: 12px;
140
+ line-height: 14px;
141
+ }
140
142
  .calendar-day-tip {
141
143
  position: absolute;
142
- top: 10px;
144
+ bottom: 6px;
143
145
  width: 100%;
144
- font-size: 11px;
145
- line-height: 12px;
146
+ font-size: 12px;
147
+ line-height: 14px;
146
148
  color: $calendar-primary-color;
147
149
  }
148
-
150
+ .calendar-curr-tips-top {
151
+ top: 6px;
152
+ }
153
+ .calendar-curr-tips-bottom {
154
+ bottom: 6px;
155
+ }
149
156
  &-active {
150
157
  background-color: $calendar-primary-color;
151
158
  color: $white !important;
152
159
 
153
- .curr-tips {
160
+ .calendar-curr-tips {
161
+ // color: $white !important;
162
+ visibility: hidden;
163
+ }
164
+ .calendar-curr-tip-curr {
154
165
  visibility: hidden;
155
166
  }
156
-
157
167
  .calendar-day-tip {
158
168
  color: $white;
159
169
  }
@@ -168,7 +178,7 @@
168
178
  }
169
179
 
170
180
  .calendar-day {
171
- padding: 4px 0;
181
+ padding: 2px 0;
172
182
  font-size: $calendar-day-font;
173
183
  }
174
184
  }
@@ -178,19 +188,15 @@
178
188
 
179
189
  // 底部导航
180
190
  .nut-calendar-footer {
181
- position: absolute;
182
- left: 0;
183
- right: 0;
184
- bottom: -1px;
185
191
  display: flex;
186
- height: 78px;
192
+ height: 62px;
187
193
  width: 100%;
188
194
  background-color: $white;
189
195
 
190
196
  .calendar-confirm-btn {
191
197
  height: 44px;
192
198
  width: 100%;
193
- margin: 14px 18px;
199
+ margin: 10px 18px;
194
200
  border-radius: 22px;
195
201
  background: $button-primary-background-color;
196
202
  color: $white;