@vtj/materials 0.10.6 → 0.10.8

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 (77) hide show
  1. package/dist/assets/antdv/index.umd.js +2 -2
  2. package/dist/assets/charts/index.umd.js +2 -2
  3. package/dist/assets/element/index.umd.js +2 -2
  4. package/dist/assets/ui/index.umd.js +2 -2
  5. package/dist/assets/uni-h5/index.umd.js +3 -3
  6. package/dist/assets/uni-ui/index.umd.js +3 -3
  7. package/dist/assets/vant/index.umd.js +2 -2
  8. package/dist/deps/@vtj/charts/index.umd.js +2 -2
  9. package/dist/deps/@vtj/icons/index.umd.js +2 -2
  10. package/dist/deps/@vtj/ui/index.umd.js +3 -3
  11. package/dist/deps/@vtj/utils/index.umd.js +20 -20
  12. package/dist/deps/@vueuse/core/index.iife.min.js +1 -1
  13. package/dist/deps/uni-ui/index.umd.js +1 -1
  14. package/dist/deps/uni-ui/style.css +1 -1
  15. package/package.json +7 -7
  16. package/src/uni-h5/components/input.ts +2 -2
  17. package/src/uni-h5/components/scrollView.ts +3 -3
  18. package/src/uni-h5/components/video.ts +1 -1
  19. package/src/uni-ui/components/badge.ts +1 -5
  20. package/src/uni-ui/components/breadcrumb.ts +1 -20
  21. package/src/uni-ui/components/collapse.ts +22 -23
  22. package/src/uni-ui/components/grid.ts +0 -9
  23. package/src/uni-ui/components/group.ts +1 -10
  24. package/src/uni-ui/components/index.ts +4 -4
  25. package/src/uni-ui/components/popup.ts +10 -2
  26. package/src/uni-ui/components/swiperDot.ts +21 -7
  27. package/src/uni-ui/components/table.ts +9 -3
  28. package/src/uni-ui/components/transition.ts +10 -1
  29. package/src/uni-ui/index.ts +19 -44
  30. package/src/uni-ui/lib/uni-collapse/uni-collapse.vue +153 -0
  31. package/src/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue +425 -0
  32. package/src/uni-ui/lib/uni-data-picker/keypress.js +45 -0
  33. package/src/uni-ui/lib/uni-data-picker/uni-data-picker.vue +604 -0
  34. package/src/uni-ui/lib/uni-data-pickerview/uni-data-picker.js +622 -0
  35. package/src/uni-ui/lib/uni-data-pickerview/uni-data-pickerview.css +76 -0
  36. package/src/uni-ui/lib/uni-data-pickerview/uni-data-pickerview.vue +335 -0
  37. package/src/uni-ui/lib/uni-datetime-picker/calendar-item.vue +181 -170
  38. package/src/uni-ui/lib/uni-datetime-picker/calendar.vue +977 -939
  39. package/src/uni-ui/lib/uni-datetime-picker/time-picker.vue +1024 -932
  40. package/src/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue +15 -17
  41. package/src/uni-ui/lib/uni-datetime-picker/util.js +419 -392
  42. package/src/uni-ui/lib/uni-fav/i18n/en.json +4 -0
  43. package/src/uni-ui/lib/uni-fav/i18n/index.js +8 -0
  44. package/src/uni-ui/lib/uni-fav/i18n/zh-Hans.json +4 -0
  45. package/src/uni-ui/lib/uni-fav/i18n/zh-Hant.json +4 -0
  46. package/src/uni-ui/lib/uni-fav/uni-fav.vue +170 -0
  47. package/src/uni-ui/lib/uni-file-picker/choose-and-upload-file.js +280 -0
  48. package/src/uni-ui/lib/uni-file-picker/uni-file-picker.vue +668 -0
  49. package/src/uni-ui/lib/uni-file-picker/upload-file.vue +325 -0
  50. package/src/uni-ui/lib/uni-file-picker/upload-image.vue +292 -0
  51. package/src/uni-ui/lib/uni-file-picker/utils.js +110 -0
  52. package/src/uni-ui/lib/uni-grid/uni-grid.vue +148 -0
  53. package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list-item.vue +152 -128
  54. package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list.vue +50 -50
  55. package/src/uni-ui/lib/uni-load-more/i18n/en.json +5 -0
  56. package/src/uni-ui/lib/uni-load-more/i18n/index.js +8 -0
  57. package/src/uni-ui/lib/uni-load-more/i18n/zh-Hans.json +5 -0
  58. package/src/uni-ui/lib/uni-load-more/i18n/zh-Hant.json +5 -0
  59. package/src/uni-ui/lib/uni-load-more/uni-load-more.vue +456 -0
  60. package/src/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue +484 -0
  61. package/src/uni-ui/lib/uni-popup/uni-popup.vue +4 -4
  62. package/src/uni-ui/lib/uni-popup-message/uni-popup-message.vue +149 -0
  63. package/src/uni-ui/lib/uni-rate/uni-rate.vue +362 -343
  64. package/src/uni-ui/lib/uni-row/uni-row.vue +193 -0
  65. package/src/uni-ui/lib/uni-search-bar/i18n/en.json +4 -0
  66. package/src/uni-ui/lib/uni-search-bar/i18n/index.js +8 -0
  67. package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hans.json +4 -0
  68. package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hant.json +4 -0
  69. package/src/uni-ui/lib/uni-search-bar/uni-search-bar.vue +339 -0
  70. package/src/uni-ui/lib/uni-swipe-action-item/bindingx.js +294 -285
  71. package/src/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue +8 -9
  72. package/src/uni-ui/lib/uni-th/filter-dropdown.vue +551 -503
  73. package/src/uni-ui/lib/uni-tr/table-checkbox.vue +165 -163
  74. package/src/uni-ui/lib/uni-tr/uni-tr.vue +6 -6
  75. package/src/uni-ui/lib/uni-transition/createAnimation.js +131 -0
  76. package/src/uni-ui/lib/uni-transition/uni-transition.vue +310 -0
  77. package/src/version.ts +2 -2
@@ -1,511 +1,559 @@
1
1
  <template>
2
- <view class="uni-filter-dropdown">
3
- <view class="dropdown-btn" @click="onDropdown">
4
- <view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
5
- <view class="icon-search" :class="{active: canReset}" v-if="isSearch">
6
- <view class="icon-search-0"></view>
7
- <view class="icon-search-1"></view>
8
- </view>
9
- <view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
10
- <view class="icon-calendar-0"></view>
11
- <view class="icon-calendar-1"></view>
12
- </view>
13
- </view>
14
- <view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
15
- <view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
16
- <!-- select-->
17
- <view v-if="isSelect" class="list">
18
- <label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
19
- @click="onItemClick($event, index)">
20
- <check-box class="check" :checked="item.checked" />
21
- <view class="checklist-content">
22
- <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
23
- </view>
24
- </label>
25
- </view>
26
- <view v-if="isSelect" class="flex-r opera-area">
27
- <view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
28
- {{resource.reset}}</view>
29
- <view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
30
- </view>
31
- <!-- search -->
32
- <view v-if="isSearch" class="search-area">
33
- <input class="search-input" v-model="filterValue" />
34
- </view>
35
- <view v-if="isSearch" class="flex-r opera-area">
36
- <view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
37
- <view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
38
- {{resource.reset}}</view>
39
- </view>
40
- <!-- range -->
41
- <view v-if="isRange">
42
- <view class="input-label">{{resource.gt}}</view>
43
- <input class="input" v-model="gtValue" />
44
- <view class="input-label">{{resource.lt}}</view>
45
- <input class="input" v-model="ltValue" />
46
- </view>
47
- <view v-if="isRange" class="flex-r opera-area">
48
- <view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
49
- {{resource.reset}}</view>
50
- <view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
51
- </view>
52
- <!-- date -->
53
- <view v-if="isDate">
54
- <uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
55
- <view></view>
56
- </uni-datetime-picker>
57
- </view>
58
- </view>
59
- </view>
2
+ <view class="uni-filter-dropdown">
3
+ <view class="dropdown-btn" @click="onDropdown">
4
+ <view
5
+ class="icon-select"
6
+ :class="{ active: canReset }"
7
+ v-if="isSelect || isRange"></view>
8
+ <view class="icon-search" :class="{ active: canReset }" v-if="isSearch">
9
+ <view class="icon-search-0"></view>
10
+ <view class="icon-search-1"></view>
11
+ </view>
12
+ <view class="icon-calendar" :class="{ active: canReset }" v-if="isDate">
13
+ <view class="icon-calendar-0"></view>
14
+ <view class="icon-calendar-1"></view>
15
+ </view>
16
+ </view>
17
+ <view
18
+ class="uni-dropdown-cover"
19
+ v-if="isOpened"
20
+ @click="handleClose"></view>
21
+ <view
22
+ class="dropdown-popup dropdown-popup-right"
23
+ v-if="isOpened"
24
+ @click.stop>
25
+ <!-- select-->
26
+ <view v-if="isSelect" class="list">
27
+ <label
28
+ class="flex-r a-i-c list-item"
29
+ v-for="(item, index) in dataList"
30
+ :key="index"
31
+ @click="onItemClick($event, index)">
32
+ <check-box class="check" :checked="item.checked" />
33
+ <view class="checklist-content">
34
+ <text class="checklist-text" :style="item.styleIconText">{{
35
+ item[map.text]
36
+ }}</text>
37
+ </view>
38
+ </label>
39
+ </view>
40
+ <view v-if="isSelect" class="flex-r opera-area">
41
+ <view
42
+ class="flex-f btn btn-default"
43
+ :class="{ disable: !canReset }"
44
+ @click="handleSelectReset">
45
+ {{ resource.reset }}</view
46
+ >
47
+ <view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{
48
+ resource.submit
49
+ }}</view>
50
+ </view>
51
+ <!-- search -->
52
+ <view v-if="isSearch" class="search-area">
53
+ <input class="search-input" v-model="filterValue" />
54
+ </view>
55
+ <view v-if="isSearch" class="flex-r opera-area">
56
+ <view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{
57
+ resource.search
58
+ }}</view>
59
+ <view
60
+ class="flex-f btn btn-default"
61
+ :class="{ disable: !canReset }"
62
+ @click="handleSearchReset">
63
+ {{ resource.reset }}</view
64
+ >
65
+ </view>
66
+ <!-- range -->
67
+ <view v-if="isRange">
68
+ <view class="input-label">{{ resource.gt }}</view>
69
+ <input class="input" v-model="gtValue" />
70
+ <view class="input-label">{{ resource.lt }}</view>
71
+ <input class="input" v-model="ltValue" />
72
+ </view>
73
+ <view v-if="isRange" class="flex-r opera-area">
74
+ <view
75
+ class="flex-f btn btn-default"
76
+ :class="{ disable: !canReset }"
77
+ @click="handleRangeReset">
78
+ {{ resource.reset }}</view
79
+ >
80
+ <view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{
81
+ resource.submit
82
+ }}</view>
83
+ </view>
84
+ <!-- date -->
85
+ <view v-if="isDate">
86
+ <uni-datetime-picker
87
+ ref="datetimepicker"
88
+ :value="dateRange"
89
+ type="datetimerange"
90
+ return-type="timestamp"
91
+ @change="datetimechange"
92
+ @maskClick="timepickerclose">
93
+ <view></view>
94
+ </uni-datetime-picker>
95
+ </view>
96
+ </view>
97
+ </view>
60
98
  </template>
61
99
 
62
100
  <script>
63
- import checkBox from '../uni-tr/table-checkbox.vue'
64
-
65
- const resource = {
66
- "reset": "重置",
67
- "search": "搜索",
68
- "submit": "确定",
69
- "filter": "筛选",
70
- "gt": "大于等于",
71
- "lt": "小于等于",
72
- "date": "日期范围"
73
- }
74
-
75
- const DropdownType = {
76
- Select: "select",
77
- Search: "search",
78
- Range: "range",
79
- Date: "date",
80
- Timestamp: "timestamp"
81
- }
82
-
83
- export default {
84
- name: 'FilterDropdown',
85
- emits:['change'],
86
- components: {
87
- checkBox
88
- },
89
- options: {
90
- virtualHost: true
91
- },
92
- props: {
93
- filterType: {
94
- type: String,
95
- default: DropdownType.Select
96
- },
97
- filterData: {
98
- type: Array,
99
- default () {
100
- return []
101
- }
102
- },
103
- mode: {
104
- type: String,
105
- default: 'default'
106
- },
107
- map: {
108
- type: Object,
109
- default () {
110
- return {
111
- text: 'text',
112
- value: 'value'
113
- }
114
- }
115
- },
116
- filterDefaultValue: {
117
- type: [Array,String],
118
- default () {
119
- return ""
120
- }
121
- }
122
- },
123
- computed: {
124
- canReset() {
125
- if (this.isSearch) {
126
- return this.filterValue.length > 0
127
- }
128
- if (this.isSelect) {
129
- return this.checkedValues.length > 0
130
- }
131
- if (this.isRange) {
132
- return (this.gtValue.length > 0 && this.ltValue.length > 0)
133
- }
134
- if (this.isDate) {
135
- return this.dateSelect.length > 0
136
- }
137
- return false
138
- },
139
- isSelect() {
140
- return this.filterType === DropdownType.Select
141
- },
142
- isSearch() {
143
- return this.filterType === DropdownType.Search
144
- },
145
- isRange() {
146
- return this.filterType === DropdownType.Range
147
- },
148
- isDate() {
149
- return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
150
- }
151
- },
152
- watch: {
153
- filterData(newVal) {
154
- this._copyFilters()
155
- },
156
- indeterminate(newVal) {
157
- this.isIndeterminate = newVal
158
- }
159
- },
160
- data() {
161
- return {
162
- resource,
163
- enabled: true,
164
- isOpened: false,
165
- dataList: [],
166
- filterValue: this.filterDefaultValue,
167
- checkedValues: [],
168
- gtValue: '',
169
- ltValue: '',
170
- dateRange: [],
171
- dateSelect: []
172
- };
173
- },
174
- created() {
175
- this._copyFilters()
176
- },
177
- methods: {
178
- _copyFilters() {
179
- let dl = JSON.parse(JSON.stringify(this.filterData))
180
- for (let i = 0; i < dl.length; i++) {
181
- if (dl[i].checked === undefined) {
182
- dl[i].checked = false
183
- }
184
- }
185
- this.dataList = dl
186
- },
187
- openPopup() {
188
- this.isOpened = true
189
- if (this.isDate) {
190
- this.$nextTick(() => {
191
- if (!this.dateRange.length) {
192
- this.resetDate()
193
- }
194
- this.$refs.datetimepicker.show()
195
- })
196
- }
197
- },
198
- closePopup() {
199
- this.isOpened = false
200
- },
201
- handleClose(e) {
202
- this.closePopup()
203
- },
204
- resetDate() {
205
- let date = new Date()
206
- let dateText = date.toISOString().split('T')[0]
207
- this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
208
- },
209
- onDropdown(e) {
210
- this.openPopup()
211
- },
212
- onItemClick(e, index) {
213
- let items = this.dataList
214
- let listItem = items[index]
215
- if (listItem.checked === undefined) {
216
- items[index].checked = true
217
- } else {
218
- items[index].checked = !listItem.checked
219
- }
220
-
221
- let checkvalues = []
222
- for (let i = 0; i < items.length; i++) {
223
- const item = items[i]
224
- if (item.checked) {
225
- checkvalues.push(item.value)
226
- }
227
- }
228
- this.checkedValues = checkvalues
229
- },
230
- datetimechange(e) {
231
- this.closePopup()
232
- this.dateRange = e
233
- this.dateSelect = e
234
- this.$emit('change', {
235
- filterType: this.filterType,
236
- filter: e
237
- })
238
- },
239
- timepickerclose(e) {
240
- this.closePopup()
241
- },
242
- handleSelectSubmit() {
243
- this.closePopup()
244
- this.$emit('change', {
245
- filterType: this.filterType,
246
- filter: this.checkedValues
247
- })
248
- },
249
- handleSelectReset() {
250
- if (!this.canReset) {
251
- return;
252
- }
253
- var items = this.dataList
254
- for (let i = 0; i < items.length; i++) {
255
- let item = items[i]
256
- this.$set(item, 'checked', false)
257
- }
258
- this.checkedValues = []
259
- this.handleSelectSubmit()
260
- },
261
- handleSearchSubmit() {
262
- this.closePopup()
263
- this.$emit('change', {
264
- filterType: this.filterType,
265
- filter: this.filterValue
266
- })
267
- },
268
- handleSearchReset() {
269
- if (!this.canReset) {
270
- return;
271
- }
272
- this.filterValue = ''
273
- this.handleSearchSubmit()
274
- },
275
- handleRangeSubmit(isReset) {
276
- this.closePopup()
277
- this.$emit('change', {
278
- filterType: this.filterType,
279
- filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
280
- })
281
- },
282
- handleRangeReset() {
283
- if (!this.canReset) {
284
- return;
285
- }
286
- this.gtValue = ''
287
- this.ltValue = ''
288
- this.handleRangeSubmit(true)
289
- }
290
- }
291
- }
101
+ import checkBox from '../uni-tr/table-checkbox.vue';
102
+
103
+ const resource = {
104
+ reset: '重置',
105
+ search: '搜索',
106
+ submit: '确定',
107
+ filter: '筛选',
108
+ gt: '大于等于',
109
+ lt: '小于等于',
110
+ date: '日期范围'
111
+ };
112
+
113
+ const DropdownType = {
114
+ Select: 'select',
115
+ Search: 'search',
116
+ Range: 'range',
117
+ Date: 'date',
118
+ Timestamp: 'timestamp'
119
+ };
120
+
121
+ export default {
122
+ name: 'FilterDropdown',
123
+ emits: ['change'],
124
+ components: {
125
+ checkBox
126
+ },
127
+ options: {
128
+ virtualHost: true
129
+ },
130
+ props: {
131
+ filterType: {
132
+ type: String,
133
+ default: DropdownType.Select
134
+ },
135
+ filterData: {
136
+ type: Array,
137
+ default() {
138
+ return [];
139
+ }
140
+ },
141
+ mode: {
142
+ type: String,
143
+ default: 'default'
144
+ },
145
+ map: {
146
+ type: Object,
147
+ default() {
148
+ return {
149
+ text: 'text',
150
+ value: 'value'
151
+ };
152
+ }
153
+ },
154
+ filterDefaultValue: {
155
+ type: [Array, String],
156
+ default() {
157
+ return '';
158
+ }
159
+ }
160
+ },
161
+ computed: {
162
+ canReset() {
163
+ if (this.isSearch) {
164
+ return this.filterValue.length > 0;
165
+ }
166
+ if (this.isSelect) {
167
+ return this.checkedValues.length > 0;
168
+ }
169
+ if (this.isRange) {
170
+ return this.gtValue.length > 0 && this.ltValue.length > 0;
171
+ }
172
+ if (this.isDate) {
173
+ return this.dateSelect.length > 0;
174
+ }
175
+ return false;
176
+ },
177
+ isSelect() {
178
+ return this.filterType === DropdownType.Select;
179
+ },
180
+ isSearch() {
181
+ return this.filterType === DropdownType.Search;
182
+ },
183
+ isRange() {
184
+ return this.filterType === DropdownType.Range;
185
+ },
186
+ isDate() {
187
+ return (
188
+ this.filterType === DropdownType.Date ||
189
+ this.filterType === DropdownType.Timestamp
190
+ );
191
+ }
192
+ },
193
+ watch: {
194
+ filterData(newVal) {
195
+ this._copyFilters();
196
+ },
197
+ indeterminate(newVal) {
198
+ this.isIndeterminate = newVal;
199
+ }
200
+ },
201
+ data() {
202
+ return {
203
+ resource,
204
+ enabled: true,
205
+ isOpened: false,
206
+ dataList: [],
207
+ filterValue: this.filterDefaultValue,
208
+ checkedValues: [],
209
+ gtValue: '',
210
+ ltValue: '',
211
+ dateRange: [],
212
+ dateSelect: []
213
+ };
214
+ },
215
+ created() {
216
+ this._copyFilters();
217
+ },
218
+ methods: {
219
+ _copyFilters() {
220
+ let dl = JSON.parse(JSON.stringify(this.filterData));
221
+ for (let i = 0; i < dl.length; i++) {
222
+ if (dl[i].checked === undefined) {
223
+ dl[i].checked = false;
224
+ }
225
+ }
226
+ this.dataList = dl;
227
+ },
228
+ openPopup() {
229
+ this.isOpened = true;
230
+ if (this.isDate) {
231
+ this.$nextTick(() => {
232
+ if (!this.dateRange.length) {
233
+ this.resetDate();
234
+ }
235
+ this.$refs.datetimepicker.show();
236
+ });
237
+ }
238
+ },
239
+ closePopup() {
240
+ this.isOpened = false;
241
+ },
242
+ handleClose(e) {
243
+ this.closePopup();
244
+ },
245
+ resetDate() {
246
+ let date = new Date();
247
+ let dateText = date.toISOString().split('T')[0];
248
+ this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59'];
249
+ },
250
+ onDropdown(e) {
251
+ this.openPopup();
252
+ },
253
+ onItemClick(e, index) {
254
+ let items = this.dataList;
255
+ let listItem = items[index];
256
+ if (listItem.checked === undefined) {
257
+ items[index].checked = true;
258
+ } else {
259
+ items[index].checked = !listItem.checked;
260
+ }
261
+
262
+ let checkvalues = [];
263
+ for (let i = 0; i < items.length; i++) {
264
+ const item = items[i];
265
+ if (item.checked) {
266
+ checkvalues.push(item.value);
267
+ }
268
+ }
269
+ this.checkedValues = checkvalues;
270
+ },
271
+ datetimechange(e) {
272
+ this.closePopup();
273
+ this.dateRange = e;
274
+ this.dateSelect = e;
275
+ this.$emit('change', {
276
+ filterType: this.filterType,
277
+ filter: e
278
+ });
279
+ },
280
+ timepickerclose(e) {
281
+ this.closePopup();
282
+ },
283
+ handleSelectSubmit() {
284
+ this.closePopup();
285
+ this.$emit('change', {
286
+ filterType: this.filterType,
287
+ filter: this.checkedValues
288
+ });
289
+ },
290
+ handleSelectReset() {
291
+ if (!this.canReset) {
292
+ return;
293
+ }
294
+ var items = this.dataList;
295
+ for (let i = 0; i < items.length; i++) {
296
+ let item = items[i];
297
+ this.$set(item, 'checked', false);
298
+ }
299
+ this.checkedValues = [];
300
+ this.handleSelectSubmit();
301
+ },
302
+ handleSearchSubmit() {
303
+ this.closePopup();
304
+ this.$emit('change', {
305
+ filterType: this.filterType,
306
+ filter: this.filterValue
307
+ });
308
+ },
309
+ handleSearchReset() {
310
+ if (!this.canReset) {
311
+ return;
312
+ }
313
+ this.filterValue = '';
314
+ this.handleSearchSubmit();
315
+ },
316
+ handleRangeSubmit(isReset) {
317
+ this.closePopup();
318
+ this.$emit('change', {
319
+ filterType: this.filterType,
320
+ filter:
321
+ isReset === true
322
+ ? []
323
+ : [parseInt(this.gtValue), parseInt(this.ltValue)]
324
+ });
325
+ },
326
+ handleRangeReset() {
327
+ if (!this.canReset) {
328
+ return;
329
+ }
330
+ this.gtValue = '';
331
+ this.ltValue = '';
332
+ this.handleRangeSubmit(true);
333
+ }
334
+ }
335
+ };
292
336
  </script>
293
337
 
294
338
  <style lang="scss">
295
- $uni-primary: #1890ff !default;
296
-
297
- .flex-r {
298
- display: flex;
299
- flex-direction: row;
300
- }
301
-
302
- .flex-f {
303
- flex: 1;
304
- }
305
-
306
- .a-i-c {
307
- align-items: center;
308
- }
309
-
310
- .j-c-c {
311
- justify-content: center;
312
- }
313
-
314
- .icon-select {
315
- width: 14px;
316
- height: 16px;
317
- border: solid 6px transparent;
318
- border-top: solid 6px #ddd;
319
- border-bottom: none;
320
- background-color: #ddd;
321
- background-clip: content-box;
322
- box-sizing: border-box;
323
- }
324
-
325
- .icon-select.active {
326
- background-color: $uni-primary;
327
- border-top-color: $uni-primary;
328
- }
329
-
330
- .icon-search {
331
- width: 12px;
332
- height: 16px;
333
- position: relative;
334
- }
335
-
336
- .icon-search-0 {
337
- border: 2px solid #ddd;
338
- border-radius: 8px;
339
- width: 7px;
340
- height: 7px;
341
- }
342
-
343
- .icon-search-1 {
344
- position: absolute;
345
- top: 8px;
346
- right: 0;
347
- width: 1px;
348
- height: 7px;
349
- background-color: #ddd;
350
- transform: rotate(-45deg);
351
- }
352
-
353
- .icon-search.active .icon-search-0 {
354
- border-color: $uni-primary;
355
- }
356
-
357
- .icon-search.active .icon-search-1 {
358
- background-color: $uni-primary;
359
- }
360
-
361
- .icon-calendar {
362
- color: #ddd;
363
- width: 14px;
364
- height: 16px;
365
- }
366
-
367
- .icon-calendar-0 {
368
- height: 4px;
369
- margin-top: 3px;
370
- margin-bottom: 1px;
371
- background-color: #ddd;
372
- border-radius: 2px 2px 1px 1px;
373
- position: relative;
374
- }
375
- .icon-calendar-0:before, .icon-calendar-0:after {
376
- content: '';
377
- position: absolute;
378
- top: -3px;
379
- width: 4px;
380
- height: 3px;
381
- border-radius: 1px;
382
- background-color: #ddd;
383
- }
384
- .icon-calendar-0:before {
385
- left: 2px;
386
- }
387
- .icon-calendar-0:after {
388
- right: 2px;
389
- }
390
-
391
- .icon-calendar-1 {
392
- height: 9px;
393
- background-color: #ddd;
394
- border-radius: 1px 1px 2px 2px;
395
- }
396
-
397
- .icon-calendar.active {
398
- color: $uni-primary;
399
- }
400
-
401
- .icon-calendar.active .icon-calendar-0,
402
- .icon-calendar.active .icon-calendar-1,
403
- .icon-calendar.active .icon-calendar-0:before,
404
- .icon-calendar.active .icon-calendar-0:after {
405
- background-color: $uni-primary;
406
- }
407
-
408
- .uni-filter-dropdown {
409
- position: relative;
410
- font-weight: normal;
411
- }
412
-
413
- .dropdown-popup {
414
- position: absolute;
415
- top: 100%;
416
- background-color: #fff;
417
- box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
418
- min-width: 150px;
419
- z-index: 1000;
420
- }
421
-
422
- .dropdown-popup-left {
423
- left: 0;
424
- }
425
-
426
- .dropdown-popup-right {
427
- right: 0;
428
- }
429
-
430
- .uni-dropdown-cover {
431
- position: fixed;
432
- left: 0;
433
- top: 0;
434
- right: 0;
435
- bottom: 0;
436
- background-color: transparent;
437
- z-index: 100;
438
- }
439
-
440
- .list {
441
- margin-top: 5px;
442
- margin-bottom: 5px;
443
- }
444
-
445
- .list-item {
446
- padding: 5px 10px;
447
- text-align: left;
448
- }
449
-
450
- .list-item:hover {
451
- background-color: #f0f0f0;
452
- }
453
-
454
- .check {
455
- margin-right: 5px;
456
- }
457
-
458
- .search-area {
459
- padding: 10px;
460
- }
461
-
462
- .search-input {
463
- font-size: 12px;
464
- border: 1px solid #f0f0f0;
465
- border-radius: 3px;
466
- padding: 2px 5px;
467
- min-width: 150px;
468
- text-align: left;
469
- }
470
-
471
- .input-label {
472
- margin: 10px 10px 5px 10px;
473
- text-align: left;
474
- }
475
-
476
- .input {
477
- font-size: 12px;
478
- border: 1px solid #f0f0f0;
479
- border-radius: 3px;
480
- margin: 10px;
481
- padding: 2px 5px;
482
- min-width: 150px;
483
- text-align: left;
484
- }
485
-
486
- .opera-area {
487
- cursor: default;
488
- border-top: 1px solid #ddd;
489
- padding: 5px;
490
- }
491
-
492
- .opera-area .btn {
493
- font-size: 12px;
494
- border-radius: 3px;
495
- margin: 5px;
496
- padding: 4px 4px;
497
- }
498
-
499
- .btn-default {
500
- border: 1px solid #ddd;
501
- }
502
-
503
- .btn-default.disable {
504
- border-color: transparent;
505
- }
506
-
507
- .btn-submit {
508
- background-color: $uni-primary;
509
- color: #ffffff;
510
- }
339
+ $uni-primary: #1890ff !default;
340
+
341
+ .flex-r {
342
+ display: flex;
343
+ flex-direction: row;
344
+ }
345
+
346
+ .flex-f {
347
+ flex: 1;
348
+ }
349
+
350
+ .a-i-c {
351
+ align-items: center;
352
+ }
353
+
354
+ .j-c-c {
355
+ justify-content: center;
356
+ }
357
+
358
+ .icon-select {
359
+ width: 14px;
360
+ height: 16px;
361
+ border: solid 6px transparent;
362
+ border-top: solid 6px #ddd;
363
+ border-bottom: none;
364
+ background-color: #ddd;
365
+ background-clip: content-box;
366
+ box-sizing: border-box;
367
+ }
368
+
369
+ .icon-select.active {
370
+ background-color: $uni-primary;
371
+ border-top-color: $uni-primary;
372
+ }
373
+
374
+ .icon-search {
375
+ width: 12px;
376
+ height: 16px;
377
+ position: relative;
378
+ }
379
+
380
+ .icon-search-0 {
381
+ border: 2px solid #ddd;
382
+ border-radius: 8px;
383
+ width: 7px;
384
+ height: 7px;
385
+ }
386
+
387
+ .icon-search-1 {
388
+ position: absolute;
389
+ top: 8px;
390
+ right: 0;
391
+ width: 1px;
392
+ height: 7px;
393
+ background-color: #ddd;
394
+ transform: rotate(-45deg);
395
+ }
396
+
397
+ .icon-search.active .icon-search-0 {
398
+ border-color: $uni-primary;
399
+ }
400
+
401
+ .icon-search.active .icon-search-1 {
402
+ background-color: $uni-primary;
403
+ }
404
+
405
+ .icon-calendar {
406
+ color: #ddd;
407
+ width: 14px;
408
+ height: 16px;
409
+ }
410
+
411
+ .icon-calendar-0 {
412
+ height: 4px;
413
+ margin-top: 3px;
414
+ margin-bottom: 1px;
415
+ background-color: #ddd;
416
+ border-radius: 2px 2px 1px 1px;
417
+ position: relative;
418
+ }
419
+ .icon-calendar-0:before,
420
+ .icon-calendar-0:after {
421
+ content: '';
422
+ position: absolute;
423
+ top: -3px;
424
+ width: 4px;
425
+ height: 3px;
426
+ border-radius: 1px;
427
+ background-color: #ddd;
428
+ }
429
+ .icon-calendar-0:before {
430
+ left: 2px;
431
+ }
432
+ .icon-calendar-0:after {
433
+ right: 2px;
434
+ }
435
+
436
+ .icon-calendar-1 {
437
+ height: 9px;
438
+ background-color: #ddd;
439
+ border-radius: 1px 1px 2px 2px;
440
+ }
441
+
442
+ .icon-calendar.active {
443
+ color: $uni-primary;
444
+ }
445
+
446
+ .icon-calendar.active .icon-calendar-0,
447
+ .icon-calendar.active .icon-calendar-1,
448
+ .icon-calendar.active .icon-calendar-0:before,
449
+ .icon-calendar.active .icon-calendar-0:after {
450
+ background-color: $uni-primary;
451
+ }
452
+
453
+ .uni-filter-dropdown {
454
+ position: relative;
455
+ font-weight: normal;
456
+ }
457
+
458
+ .dropdown-popup {
459
+ position: absolute;
460
+ top: 100%;
461
+ background-color: #fff;
462
+ box-shadow:
463
+ 0 3px 6px -4px #0000001f,
464
+ 0 6px 16px #00000014,
465
+ 0 9px 28px 8px #0000000d;
466
+ min-width: 150px;
467
+ z-index: 1000;
468
+ }
469
+
470
+ .dropdown-popup-left {
471
+ left: 0;
472
+ }
473
+
474
+ .dropdown-popup-right {
475
+ right: 0;
476
+ }
477
+
478
+ .uni-dropdown-cover {
479
+ position: fixed;
480
+ left: 0;
481
+ top: 0;
482
+ right: 0;
483
+ bottom: 0;
484
+ background-color: transparent;
485
+ z-index: 100;
486
+ }
487
+
488
+ .list {
489
+ margin-top: 5px;
490
+ margin-bottom: 5px;
491
+ }
492
+
493
+ .list-item {
494
+ padding: 5px 10px;
495
+ text-align: left;
496
+ }
497
+
498
+ .list-item:hover {
499
+ background-color: #f0f0f0;
500
+ }
501
+
502
+ .check {
503
+ margin-right: 5px;
504
+ }
505
+
506
+ .search-area {
507
+ padding: 10px;
508
+ }
509
+
510
+ .search-input {
511
+ font-size: 12px;
512
+ border: 1px solid #f0f0f0;
513
+ border-radius: 3px;
514
+ padding: 2px 5px;
515
+ min-width: 150px;
516
+ text-align: left;
517
+ }
518
+
519
+ .input-label {
520
+ margin: 10px 10px 5px 10px;
521
+ text-align: left;
522
+ }
523
+
524
+ .input {
525
+ font-size: 12px;
526
+ border: 1px solid #f0f0f0;
527
+ border-radius: 3px;
528
+ margin: 10px;
529
+ padding: 2px 5px;
530
+ min-width: 150px;
531
+ text-align: left;
532
+ }
533
+
534
+ .opera-area {
535
+ cursor: default;
536
+ border-top: 1px solid #ddd;
537
+ padding: 5px;
538
+ }
539
+
540
+ .opera-area .btn {
541
+ font-size: 12px;
542
+ border-radius: 3px;
543
+ margin: 5px;
544
+ padding: 4px 4px;
545
+ }
546
+
547
+ .btn-default {
548
+ border: 1px solid #ddd;
549
+ }
550
+
551
+ .btn-default.disable {
552
+ border-color: transparent;
553
+ }
554
+
555
+ .btn-submit {
556
+ background-color: $uni-primary;
557
+ color: #ffffff;
558
+ }
511
559
  </style>