dtable-ui-component 6.0.41 → 6.0.43

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 (37) hide show
  1. package/lib/CheckboxEditor/mb-editor.js +4 -0
  2. package/lib/CheckboxEditor/pc-editor.js +4 -0
  3. package/lib/DTableCommonAddTool/index.js +1 -1
  4. package/lib/DTableCustomizeSelect/index.css +3 -3
  5. package/lib/DTableFiltersPopover/constants/index.js +30 -2
  6. package/lib/DTableFiltersPopover/index.css +54 -15
  7. package/lib/DTableFiltersPopover/index.js +117 -135
  8. package/lib/DTableFiltersPopover/utils/filter-item-utils.js +10 -4
  9. package/lib/DTableFiltersPopover/utils/index.js +354 -83
  10. package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js +7 -5
  11. package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js +20 -7
  12. package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js +25 -6
  13. package/lib/DTableFiltersPopover/widgets/filter-calendar.js +1 -1
  14. package/lib/DTableFiltersPopover/widgets/filter-group.js +188 -0
  15. package/lib/DTableFiltersPopover/widgets/filter-item.js +193 -66
  16. package/lib/DTableFiltersPopover/widgets/filter-list/index.css +183 -74
  17. package/lib/DTableFiltersPopover/widgets/filter-list/index.js +232 -42
  18. package/lib/DTableGroupSelect/index.css +3 -3
  19. package/lib/DTableGroupSelect/select-option-group.css +5 -5
  20. package/lib/DTableSearchInput/index.js +2 -2
  21. package/lib/DepartmentMultipleSelectEditor/index.js +22 -4
  22. package/lib/DurationEditor/index.js +19 -4
  23. package/lib/GeolocationEditor/mb-editor/map-editor/index.js +2 -2
  24. package/lib/GeolocationEditor/pc-editor/map-editor/index.js +2 -2
  25. package/lib/GeolocationEditor/pc-editor/map-editor/large-editor/index.js +2 -2
  26. package/lib/NumberEditor/index.js +4 -2
  27. package/lib/SelectOptionGroup/index.css +8 -8
  28. package/lib/locales/de.json +7 -2
  29. package/lib/locales/en.json +7 -2
  30. package/lib/locales/es.json +7 -2
  31. package/lib/locales/fr.json +7 -2
  32. package/lib/locales/pt.json +7 -2
  33. package/lib/locales/ru.json +7 -2
  34. package/lib/locales/zh-CN.json +7 -2
  35. package/lib/utils/column-utils.js +21 -2
  36. package/package.json +3 -3
  37. package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.css +0 -0
package/lib/DTableFiltersPopover/widgets/filter-list/index.css CHANGED
@@ -1,138 +1,224 @@
1
- .filters-list {
1
+ .dtable-ui-filters-list {
2
2
  min-height: 120px;
3
3
  max-height: 100%;
4
4
  padding: 15px;
5
5
  }
6
6
 
7
- .filters-list.empty-filters-container {
7
+ .dtable-ui-filters-list.empty-filters-container {
8
8
  min-height: 80px;
9
9
  padding: 16px;
10
10
  }
11
11
 
12
- .filters-list.empty-filters-container .empty-filters-list {
12
+ .dtable-ui-filters-list.empty-filters-container .empty-filters-list {
13
13
  padding-left: 0;
14
14
  }
15
15
 
16
- .filters-list .empty-filters-list {
16
+ .dtable-ui-filters-list .empty-filters-list {
17
17
  padding: 0.25rem;
18
18
  font-size: 14px;
19
19
  color: #666666;
20
20
  }
21
21
 
22
- .filters-list .filter-item {
22
+ /* ---- filter group start ---- */
23
+ .dtable-ui-filters-list .filter-group {
23
24
  display: flex;
24
25
  align-items: center;
25
26
  padding: 0.25rem 0;
26
27
  }
27
28
 
28
- .filters-list .filter-item .condition {
29
+ .dtable-ui-filters-list .filter-group .filter-group-wrapper {
30
+ flex: 1;
31
+ display: flex;
32
+ }
33
+
34
+ .dtable-ui-filters-list .filter-group .delete-filter,
35
+ .dtable-ui-filters-list .filter-group .filter-conjunction {
36
+ align-self: flex-start;
37
+ }
38
+
39
+ .dtable-ui-filters-list .filter-group .delete-filter,
40
+ .dtable-ui-filters-list .filter-group .filter-conjunction.conjunction-text {
41
+ margin-top: 8px;
42
+ }
43
+
44
+ .dtable-ui-filters-list .filter-group .filter-group-container {
45
+ width: calc(100% - 72px);
46
+ min-height: 38px;
47
+ margin-left: .5rem;
48
+ padding: 4px 10px;
49
+ border: 1px solid rgba(0, 40, 100, .12);
50
+ border-radius: 3px;
51
+ }
52
+
53
+ .dtable-ui-filters-list .filter-group.draggable .filter-group-container {
54
+ /* 94: conjunction width(72) + drag icon width(16) + drag icon margin left(8) */
55
+ width: calc(100% - 96px);
56
+ }
57
+
58
+ .dtable-ui-filters-list .filter-group.readonly .filter-group-container {
59
+ width: calc(100% - 52px);
60
+ }
61
+
62
+ .dtable-ui-filters-list .filter-group.level-1 .filter-group-container {
63
+ background-color: #f7f7f7;
64
+ }
65
+
66
+ .dtable-ui-filters-list .filter-group-container .group-filter-add-tool {
67
+ border-top: unset;
68
+ background-color: #f7f7f7;
69
+ margin-top: 2px;
70
+ padding: 0;
71
+ height: 30px;
72
+ line-height: 30px;
73
+ font-weight: 400;
74
+ }
75
+
76
+ .dtable-ui-filters-list .filter-group-container .group-filter-add-tool .dtable-icon-add-table,
77
+ .dtable-ui-filters-list .filter-group-container .group-filter-add-tool .add-new-option {
78
+ color: #999;
79
+ }
80
+
81
+ .dtable-ui-filters-list .filter-group-container .group-filter-add-tool:hover .dtable-icon-add-table,
82
+ .dtable-ui-filters-list .filter-group-container .group-filter-add-tool:hover .add-new-option {
83
+ color: #555;
84
+ }
85
+
86
+ .dtable-ui-filters-list .dtable-filter-group-drag {
87
+ display: flex;
88
+ margin-left: .5rem;
89
+ }
90
+
91
+ .dtable-ui-filters-list .drag-filter-handle,
92
+ .dtable-ui-filters-list .drag-filter-group-handle {
93
+ color: #949494;
94
+ cursor: grab;
95
+ }
96
+
97
+ .dtable-ui-filters-list .dragging-filter-wrapper .group-filter-add-tool,
98
+ .dtable-ui-filters-list .dragging-filter-wrapper .delete-filter {
99
+ display: none;
100
+ }
101
+
102
+ /* ---- filter group end ---- */
103
+
104
+ .dtable-ui-filters-list .filter-item {
105
+ display: flex;
106
+ align-items: center;
107
+ padding: 0.25rem 0;
108
+ }
109
+
110
+ .dtable-ui-filters-list .filter-item .condition {
29
111
  display: flex;
30
112
  flex: 1;
31
113
  }
32
114
 
33
- .filters-list .filter-item .condition > div {
115
+ .dtable-ui-filters-list .filter-item .condition>div {
34
116
  height: 38px;
35
117
  line-height: 38px;
36
118
  margin-left: 0.5rem;
37
119
  }
38
120
 
39
- .filters-list .filter-item .condition > div:first-child {
121
+ .dtable-ui-filters-list .filter-item .condition>div:first-child {
40
122
  margin-left: 0;
41
123
  }
42
124
 
43
- .filters-list .filter-item .filter-term .selector-collaborator {
125
+ .dtable-ui-filters-list .filter-item .filter-term {
44
126
  max-width: 300px;
45
127
  min-width: 70px;
46
128
  }
47
129
 
48
- .filters-list .filter-item .filter-term .option-group-content .option.option-active .dtable-font {
130
+ .dtable-ui-filters-list .filter-item .filter-term .option-group-content .option.option-active .dtable-font {
49
131
  color: #798d99;
50
132
  }
51
133
 
52
- .filters-list .filter-conjunction {
134
+ .dtable-ui-filters-list .filter-conjunction {
53
135
  width: 72px;
54
136
  }
55
137
 
56
- .filters-list .filter-conjunction-readonly {
138
+ .dtable-ui-filters-list .filter-conjunction-readonly {
57
139
  width: 52px;
58
140
  }
59
141
 
60
- .filters-list .filter-container {
142
+ .dtable-ui-filters-list .filter-container {
61
143
  width: calc(100% - 72px);
62
144
  display: flex;
63
145
  }
64
146
 
65
- .filters-list .dtable-select .selected-option-show {
147
+ .dtable-ui-filters-list .dtable-select .selected-option-show {
66
148
  width: calc(100% - 20px);
67
149
  }
68
150
 
69
- .filters-list .dtable-select .selected-option {
151
+ .dtable-ui-filters-list .dtable-select.collaborator-select .selected-option-show {
152
+ height: auto;
153
+ }
154
+
155
+ .dtable-ui-filters-list .dtable-select .selected-option {
70
156
  width: auto;
71
157
  overflow-x: auto;
72
158
  }
73
159
 
74
- .filters-list .dtable-select .dtable-icon-down3 {
160
+ .dtable-ui-filters-list .dtable-select .dtable-icon-down3 {
75
161
  margin-left: 0.5rem;
76
162
  }
77
163
 
78
- .filters-list .selected-conjunction-show {
164
+ .dtable-ui-filters-list .selected-conjunction-show {
79
165
  padding: 0 10px;
80
- color: #666;
166
+ color: #666666;
81
167
  }
82
168
 
83
- .filters-list .filter-column {
169
+ .dtable-ui-filters-list .filter-column {
84
170
  max-width: 150px;
85
171
  }
86
172
 
87
- .filter-term .selector-multiple-select .option,
88
- .filter-term .selector-single-select .option {
173
+ .filter-term .dtable-ui-multiple-select-selector .option,
174
+ .filter-term .dtable-ui-single-select-selector .option {
89
175
  height: 30px;
90
176
  padding: 0 10px;
91
177
  }
92
178
 
93
- .filter-term .selector-multiple-select .select-option-name,
94
- .filter-term .selector-single-select .select-option-name {
95
- margin-top: 5px;
179
+ .filter-term .dtable-ui-multiple-select-selector .select-option-name,
180
+ .filter-term .dtable-ui-single-select-selector .select-option-name {
181
+ margin-top: 5px !important;
96
182
  }
97
183
 
98
- .filter-term .selector-single-select .option:hover {
184
+ .filter-term .dtable-ui-single-select-selector .option:hover {
99
185
  color: #212529;
100
186
  background-color: #f7f7f7;
101
187
  }
102
188
 
103
- .filter-term .selector-single-select .option:hover .select-option-name,
104
- .filter-term .selector-multiple-select .option:hover .select-option-name,
105
- .filter-term .selector-collaborator .option:hover .select-option-name {
189
+ .filter-term .dtable-ui-single-select-selector .option:hover .select-option-name,
190
+ .filter-term .dtable-ui-multiple-select-selector .option:hover .select-option-name,
191
+ .filter-term .dtable-ui-collaborator-selector .option:hover .select-option-name {
106
192
  color: unset;
107
193
  }
108
194
 
109
- .filter-term .selector-collaborator .dtable-icon-down3 {
195
+ .filter-term .dtable-ui-collaborator-selector .dtable-icon-down3 {
110
196
  padding-left: 5px;
111
197
  }
112
198
 
113
- .filters-list .selector-collaborator .selected-option-show {
199
+ .dtable-ui-filters-list .dtable-ui-collaborator-selector .selected-option-show {
114
200
  text-overflow: unset;
115
201
  }
116
202
 
117
- .filters-list .selector-multiple-select .option:hover,
118
- .filters-list .selector-multiple-select .option.option-active,
119
- .filters-list .selector-collaborator .option:hover,
120
- .filters-list .selector-collaborator .option.option-active {
203
+ .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option:hover,
204
+ .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option.option-active,
205
+ .option-group-dtable-ui-collaborator-selector .option:hover,
206
+ .option-group-dtable-ui-collaborator-selector .option.option-active {
121
207
  color: #212529;
122
208
  background-color: #f7f7f7;
123
209
  }
124
210
 
125
- .filters-list .selector-multiple-select .option.option-active .select-option-name,
126
- .filters-list .selector-collaborator .option.option-active .select-option-name {
211
+ .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option.option-active .select-option-name,
212
+ .option-group-dtable-ui-collaborator-selector .option.option-active .select-option-name {
127
213
  color: #212529;
128
214
  }
129
215
 
130
- .filters-list .selected-option .multiple-select-option,
131
- .filters-list .selected-option .single-select-option {
216
+ .dtable-ui-filters-list .selected-option .multiple-select-option,
217
+ .dtable-ui-filters-list .selected-option .single-select-option {
132
218
  display: inline-block;
133
219
  }
134
220
 
135
- .filters-list .filter-term input {
221
+ .dtable-ui-filters-list .filter-term input {
136
222
  display: flex;
137
223
  width: 100%;
138
224
  height: 38px;
@@ -144,19 +230,19 @@
144
230
  font-size: 0.875rem;
145
231
  }
146
232
 
147
- .filters-list .filter-term input:hover {
233
+ .dtable-ui-filters-list .filter-term input:hover {
148
234
  border-color: rgb(179, 179, 179);
149
235
  }
150
236
 
151
- .filters-list .filter-term input.disabled:hover {
237
+ .dtable-ui-filters-list .filter-term input.disabled:hover {
152
238
  border-color: rgba(0, 40, 100, 0.12);
153
239
  }
154
240
 
155
- .filters-list .filter-term input:hover:focus {
241
+ .dtable-ui-filters-list .filter-term input:hover:focus {
156
242
  border-color: #1991eb;
157
243
  }
158
244
 
159
- .filters-list .filter-term input:focus {
245
+ .dtable-ui-filters-list .filter-term input:focus {
160
246
  color: #495057;
161
247
  background-color: #fff;
162
248
  border-color: #1991eb;
@@ -164,22 +250,33 @@
164
250
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
165
251
  }
166
252
 
167
- .filters-list .filter-term .date-picker-container input:focus {
253
+ .dtable-ui-filters-list .filter-term .date-picker-container input:focus {
168
254
  color: #495057;
169
255
  background-color: #fff;
170
256
  border: 1px solid #fff;
171
257
  outline: 0;
172
258
  }
173
259
 
174
- .filters-list .filter-term .date-picker-container table tr {
260
+ .dtable-ui-filters-list .filter-term .rc-calendar-input {
261
+ border: 1px solid transparent;
262
+ color: #666;
263
+ cursor: text;
264
+ height: 22px;
265
+ font-size: 12px;
266
+ line-height: 1.5;
267
+ outline: 0;
268
+ width: 100%;
269
+ }
270
+
271
+ .dtable-ui-filters-list .filter-term .date-picker-container table tr {
175
272
  height: 30px;
176
273
  }
177
274
 
178
- .filters-list .filter-term input[type='checkbox'] {
275
+ .dtable-ui-filters-list .filter-term input[type='checkbox'] {
179
276
  width: inherit;
180
277
  }
181
278
 
182
- .filters-list .filter-term input[type='checkbox']:focus {
279
+ .dtable-ui-filters-list .filter-term input[type='checkbox']:focus {
183
280
  border: 0;
184
281
  box-shadow: none;
185
282
  }
@@ -190,31 +287,32 @@
190
287
  border: 1px solid rgba(0, 40, 100, 0.12);
191
288
  }
192
289
 
193
- .filters-list .delete-filter {
290
+ .dtable-ui-filters-list .delete-filter {
194
291
  width: 12px;
195
292
  height: 20px;
196
293
  margin-right: 14px;
197
294
  text-align: center;
198
295
  }
199
296
 
200
- .filters-list .delete-filter:hover {
297
+ .dtable-ui-filters-list .delete-filter:hover {
201
298
  cursor: pointer;
202
299
  }
203
300
 
204
- .filters-list .delete-filter .dtable-icon-fork-number {
301
+ .dtable-ui-filters-list .delete-filter .dtable-icon-fork-number {
205
302
  display: inline-block;
206
303
  font-size: 12px;
207
304
  color: #999;
208
305
  }
209
306
 
210
- .filters-list .multiple-option-name {
307
+ .dtable-ui-filters-list .multiple-option-name {
211
308
  display: flex;
212
309
  align-items: center;
213
310
  justify-content: space-between;
214
311
  }
215
312
 
216
- .filters-list .multiple-check-icon,
217
- .filters-list .collaborator-check-icon {
313
+ .dtable-ui-filters-list .multiple-check-icon,
314
+ .dtable-ui-filters-list .collaborator-check-icon,
315
+ .option-group-dtable-ui-collaborator-selector .collaborator-check-icon {
218
316
  display: inline-flex;
219
317
  width: 20px;
220
318
  height: 20px;
@@ -222,8 +320,9 @@
222
320
  text-align: center;
223
321
  }
224
322
 
225
- .filters-list .multiple-check-icon .dtable-icon-check-mark,
226
- .filters-list .collaborator-check-icon .dtable-icon-check-mark {
323
+ .dtable-ui-filters-list .multiple-check-icon .dtable-icon-check-mark,
324
+ .dtable-ui-filters-list .collaborator-check-icon .dtable-icon-check-mark,
325
+ .option-group-dtable-ui-collaborator-selector .collaborator-check-icon .dtable-icon-check-mark {
227
326
  font-size: 12px;
228
327
  color: #798d99;
229
328
  }
@@ -240,70 +339,78 @@
240
339
  background: #eaeaea;
241
340
  }
242
341
 
243
- .filters-list .collaborator-show {
342
+ .option-group-dtable-ui-collaborator-selector .collaborator-show .dtable-ui-filters-list .collaborator-show {
244
343
  flex: 1;
245
344
  }
246
345
 
247
- .filters-list .collaborator-avatar-container {
346
+ .option-group-dtable-ui-collaborator-selector .collaborator-avatar-container,
347
+ .dtable-ui-filters-list .collaborator-avatar-container {
248
348
  width: 16px;
249
349
  }
250
350
 
251
- .filters-list .collaborator-avatar {
351
+ .option-group-dtable-ui-collaborator-selector .collaborator-avatar,
352
+ .dtable-ui-filters-list .collaborator-avatar {
252
353
  width: 16px;
253
354
  height: 16px;
254
355
  transform: translateY(-1px);
255
356
  border-radius: 50%;
256
357
  }
257
358
 
258
- .filters-list .option .collaborator-avatar {
359
+ .option-group-dtable-ui-collaborator-selector .option .collaborator-avatar,
360
+ .dtable-ui-filters-list .option .collaborator-avatar {
259
361
  transform: translateY(-2px);
260
362
  }
261
363
 
262
- .filters-list .collaborator-name {
364
+ .option-group-dtable-ui-collaborator-selector .collaborator-name,
365
+ .dtable-ui-filters-list .collaborator-name {
263
366
  margin-left: 5px;
264
367
  max-width: 200px;
265
368
  }
266
369
 
267
- .filters-list .option-collaborator {
370
+ .option-group-dtable-ui-collaborator-selector .option-collaborator,
371
+ .dtable-ui-filters-list .option-collaborator {
268
372
  display: flex;
269
373
  }
270
374
 
271
- .filters-list .collaborator-container {
375
+ .option-group-dtable-ui-collaborator-selector .collaborator-container,
376
+ .dtable-ui-filters-list .collaborator-container {
272
377
  flex: 1;
273
378
  }
274
379
 
275
- .filters-list .popover-add-tool {
380
+ .dtable-ui-filters-list .popover-add-tool {
276
381
  border-top: none;
277
382
  color: #666666;
278
383
  }
279
384
 
280
- .filters-list .popover-add-tool .popover-add-icon {
385
+ .dtable-ui-filters-list .popover-add-tool .popover-add-icon {
281
386
  margin-right: 14px;
282
387
  }
283
388
 
284
- .filters-list .option-group {
389
+ .dtable-ui-filters-list .option-group {
285
390
  max-height: 360px;
286
391
  overflow: auto;
287
392
  }
288
393
 
289
- .filters-list .filter-item .dtable-icon-fork-number:hover {
290
- color: #555;
394
+ .dtable-ui-filters-list .filter-item .dtable-icon-fork-number:hover {
395
+ color: #555555;
291
396
  }
292
397
 
293
- .filters-list .filter-container-readonly .dtable-select .selected-option-show,
294
- .filters-list .filter-conjunction-readonly .dtable-select .selected-option-show {
398
+ .dtable-ui-filters-list .filter-container-readonly .dtable-select .selected-option-show,
399
+ .dtable-ui-filters-list .filter-conjunction-readonly .dtable-select .selected-option-show {
295
400
  width: 100%;
296
401
  }
297
402
 
298
- .filters-list .filter-checkbox-predicate .dtable-select .selected-option-show {
403
+ .dtable-ui-filters-list .filter-checkbox-predicate .dtable-select .selected-option-show {
299
404
  width: 100%;
300
405
  }
301
406
 
302
- .filters-list .option-group .option-group-content .collaborator {
407
+ .dropdown-item .collaborator,
408
+ .dtable-ui-filters-list .option-group-content .collaborator,
409
+ .option-group-dtable-ui-collaborator-selector .option-group-content .collaborator {
303
410
  background-color: unset;
304
411
  }
305
412
 
306
- .filters-list .dtable-select .selected-option-show .remove-container {
413
+ .dtable-ui-filters-list .dtable-select .selected-option-show .remove-container {
307
414
  display: none;
308
415
  }
309
416
 
@@ -323,8 +430,10 @@
323
430
  color: #fff;
324
431
  }
325
432
 
326
- .filters-list .single-select-option,
327
- .filters-list .multiple-select-option {
433
+ .dtable-ui-filters-list .single-select-option,
434
+ .dtable-ui-filters-list .multiple-select-option,
435
+ .option-group-dtable-ui-single-select-selector .single-select-option,
436
+ .option-group-dtable-ui-multiple-select-selector .multiple-select-option {
328
437
  display: block;
329
438
  text-align: left;
330
439
  width: min-content;