aio-table 7.1.1 → 8.0.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 (3) hide show
  1. package/index.css +174 -502
  2. package/index.js +2470 -3498
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -1,544 +1,216 @@
1
- .aio-table{
2
- display: flex;
3
- flex-direction: column;
4
- box-sizing: border-box;
5
- border:1px solid #ddd;
6
- user-select:none;
7
- -webkit-user-select: none;
8
- background:#eceef1;
9
- position: relative;
10
- color:#999;
11
- font-size:14px;
1
+ .table {
2
+ background: #eee;
12
3
  overflow: hidden;
13
- height:500px;
14
- width:100%;
15
- }
16
- .aio-table.rtl{
17
- direction:rtl;
18
- }
19
- .aio-table-body{
20
- display: flex;
21
- width:100%;
22
- flex:1;
23
- padding:12px;
24
- box-sizing:border-box;
25
- overflow:hidden;
26
- flex-basis: 0;
27
- height:100%;
28
- }
29
- .aio-table-unit{
30
- display: grid;
31
- width:100%;
32
- overflow:auto;
33
- align-content: flex-start;
34
- }
35
- #aio-table-first-split{
36
- width:fit-content;
37
- overflow-x:scroll !important;
38
- }
39
- #aio-table-second-split{
40
- flex:1;
41
- overflow-x:scroll;
4
+ flex: 1;
5
+ font-size: 12px;
6
+ color: #888;
7
+ padding: 12px;
42
8
  }
43
9
 
44
-
45
- .aio-table-title{
46
- display:flex;
47
- align-items: center;
48
- padding:0 6px;
49
- position:sticky;
50
- box-sizing:border-box;
51
- position: -webkit-sticky;
52
- background: #fff;
53
- height:36px;
54
- border-bottom:1px solid #ddd;
55
- z-index:100;
56
- box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.1);
57
- }
58
- .aio-table-title:after{
59
- content:'';
60
- width:1px;
61
- height:100%;
62
- top:0;
63
- background:#ddd;
64
- position:absolute;
10
+ .table-header {
11
+ position: sticky !important;
12
+ top: 0;
13
+ z-index: 10;
14
+ overflow: visible;
15
+ font-weight: bold;
16
+ user-select: none;
17
+ background: #ddd;
18
+ box-shadow: 0 3px 6px 0px rgba(80, 80, 80, 0.2)
65
19
  }
66
- .aio-table-title.ltr:after{
67
- left:calc(100% - 1px);
20
+
21
+ .row-relative-filter {
22
+ opacity: 0.4;
68
23
  }
69
- .aio-table-title.rtl:after{
70
- right:calc(100% - 1px);
24
+
25
+ .table-title {
26
+ background: #f8f8f8;
27
+ height: 48px;
71
28
  }
72
- .aio-table-title.last-child:after{
73
- display:none;
29
+
30
+ .cell-content {
31
+ display: flex;
32
+ overflow: hidden;
74
33
  }
75
- .aio-table.rtl .aio-table-title{
76
- box-shadow: -1px 4px 6px -2px rgba(0,0,0,0.1);
34
+
35
+ .cell-subtext {
36
+ font-size: 74%;
37
+ opacity: 0.5;
77
38
  }
78
- .aio-table-title-text{
79
- flex:1;
80
- height:100%;
81
- display:flex;
82
- align-items:center;
39
+
40
+ .row {
41
+ box-shadow: 0 3px 6px 0px rgba(80, 80, 80, 0.2);
83
42
  }
84
- .aio-table-resize{
85
- width:8px;
86
- height:100%;
87
- position:absolute;
88
- right:0;
89
- opacity:1;
90
- cursor:col-resize;
43
+
44
+ .cell {
45
+ height: 48px;
46
+ display: flex;
47
+ align-items: center;
48
+ padding: 0 12px;
49
+ flex-shrink: 0;
50
+ background: #fff;
91
51
  }
92
- .aio-table-cell{
93
- display:flex;
94
- align-items: center;
95
- padding:0 8px;
96
- box-sizing: border-box;
97
- position: relative;
98
- box-shadow: 3px 4px 6px -2px rgba(0,0,0,0.1);
99
- white-space:nowrap;
100
- text-overflow:ellipsis;
101
- background:#fff;
102
- height:36px;
52
+
53
+ .cell.striped {
54
+ background: #f7f7f7;
103
55
  }
104
- .aio-table-cell.last-child{
105
- border:none;
56
+
57
+ .table-toggle {
58
+ width: 16px;
59
+ height: 24px;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
106
63
  }
107
- .aio-table-cell-selectable{
108
- user-select: text;
109
- -webkit-user-select: text;
64
+
65
+ .table-toolbar {
66
+ padding: 8px;
67
+ display: flex;
68
+ width: 100%;
69
+ align-items: center;
110
70
  }
111
- .aio-table-cell-hidden{
112
- display:none;
71
+
72
+ .table-paging {
73
+ padding: 8px;
113
74
  }
114
- .aio-table-cell-content{
115
- width:100%;
116
- height:100%;
117
- align-items: center;
118
- overflow:hidden;
75
+
76
+ .toolbar-icon {
119
77
  display: flex;
120
- }
121
- .aio-table-icon{
122
- height:24px;
123
- display:flex;
124
- font-size:16px;
125
78
  align-items: center;
126
79
  justify-content: center;
127
- width:fit-content;
80
+ border: none;
81
+ width: 30px !important;
82
+ background: #fff;
83
+ height: 30px;
84
+ margin: 0 3px;
85
+ border-radius: 100%;
128
86
  }
129
- .aio-table-checkbox{
130
- fill:dodgerblue;
87
+
88
+ .table-toolbar-item {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ border: none;
93
+ min-width: 30px !important;
94
+ background: #fff;
95
+ height: 30px;
96
+ margin: 0 3px;
97
+ border-radius: 36px;
131
98
  }
132
- .aio-table.rtl .aio-table-cell{
133
- box-shadow: -3px 4px 6px -2px rgba(0,0,0,0.1);
99
+
100
+ .toolbar-popup-header {
101
+ height: 36px;
102
+ line-height: 36px;
103
+ text-align: center;
104
+ border-bottom: 1px solid #ddd;
105
+
134
106
  }
135
107
 
136
- .aio-table-input-container{
137
- width:100%;
138
- height:100%;
139
- left:0;
140
- border-radius:0;
141
- top:0;
142
- position:relative;
143
- display:flex;
144
- flex-direction: column;
108
+ .aio-table-search {
109
+ flex: 1;
110
+ border-radius: 36px;
111
+ background: #fff;
112
+ height: 30px;
113
+ display: flex;
145
114
  align-items: center;
146
- justify-content: flex-start;
147
- max-height:75%;
148
- }
149
- .aio-table-input-container.on-template{
150
- flex:1;
151
- position: absolute;
152
- max-height:100%;
115
+ border: 1px solid #eee;
116
+ padding: 0 6px;
117
+ box-sizing: border-box;
118
+ margin: 0 3px;
153
119
  }
154
- .aio-table-input{
155
- border:none;
156
- outline:none;
157
- background:none;
158
- flex:1;
159
- width:100%;
160
- position:relative;
161
- color:inherit;
162
- font-size:inherit;
163
- font-family:inherit;
120
+
121
+ .aio-table-search input {
122
+ font-family: inherit;
123
+ flex: 1;
124
+ border: none;
125
+ outline: none;
126
+ height: 100%;
127
+ background: none;
164
128
  }
165
- select.aio-table-input{
166
- background: rgba(0,0,0,0.02);
129
+
130
+ .table-group-row {
131
+ height: 48px;
132
+ width: fit-content;
133
+
167
134
  }
168
- .aio-table-input-border{
169
- height:2px;
170
- width:0%;
171
- display: flex;
172
- align-items: center;
173
- justify-content: center;
174
- background:dodgerblue;
135
+
136
+ .table-filter-popup {
137
+ padding: 6px;
138
+ width: 300px;
175
139
  }
176
- .aio-table-input:focus + .aio-table-input-border{
177
- width:100%;
178
- transition: 0.3s;
140
+
141
+ .table-filter-add {
142
+ height: 24px;
143
+ width: 100%;
144
+ margin: 3px;
145
+ border: 1px solid #ddd;
146
+ background: #eee;
179
147
  }
180
148
 
181
- .aio-table-nodata{
182
- display:flex;
183
- align-items: center;
184
- justify-content: center;
149
+ .table-filter-item {
150
+ padding: 3px;
185
151
  }
186
152
 
187
- .aio-table-paging{
188
- display: flex;
189
- padding:6px 0;
190
- align-items: center;
191
- justify-content: center;
192
- flex-shrink:0;
193
- border-top:1px solid #ddd;
153
+ .table-filter-operator {
154
+ border: 1px solid #ddd;
155
+ background: #fff;
156
+ height: 24px;
157
+ width: 100%;
194
158
  }
195
- .aio-table-paging-button{
196
- background:#fff;
197
- width:24px;
198
- height:24px;
199
- border-radius:100%;
200
- margin:0 3px;
201
- display:flex;
202
- align-items: center;
203
- justify-content: center;
204
- color:inherit;
159
+
160
+ .table-filter-value {
161
+ border: 1px solid #ddd;
162
+ padding: 0 3px;
163
+ width: 100%;
164
+ outline: none;
165
+ font-family: inherit;
205
166
  }
206
- select.aio-table-paging-button{
207
- width:60px;
208
- border-radius:24px;
209
- border:none;
210
- padding:0 6px;
211
- outline:none;
167
+
168
+ .table-filter-remove {
169
+ border: 1px solid #ddd;
212
170
  }
213
- .aio-table-paging-number{
214
- padding:0 6px;
215
- background:#fff;
216
- height:24px;
217
- margin:0 3px;
218
- line-height:24px;
219
- border-radius:24px;
171
+
172
+ .table-inline-edit-input {
173
+ width: 100% !important;
174
+ height: 100%;
175
+ max-height: 36px;
176
+ border: none;
177
+ background: none;
178
+ outline: none;
179
+ font-family: inherit;
180
+ min-height: 16px;
181
+
220
182
  }
221
- .aio-table-toggle{
222
- height:24px;
223
- display:flex;
224
- align-items: center;
225
- flex-shrink:0;
226
- cursor:pointer;
183
+
184
+ .table-inline-edit-input:focus {
185
+ border-bottom: 2px solid dodgerblue;
186
+ border-top: 2px solid transparent;
227
187
  }
228
- .aio-table-cell-gap{
229
- width:6px;
230
- flex-shrink:0;
188
+
189
+ /* custom scrollbar */
190
+ .rows::-webkit-scrollbar {
191
+ width: 10px !important;
192
+ height: 10px !important;
231
193
  }
232
194
 
233
- .aio-table-space{
234
- background:#fff;
195
+ .table-freeze-container::-webkit-scrollbar {
196
+ width: 0px !important;
235
197
  }
236
198
 
199
+ .rows::-webkit-scrollbar-track {
200
+ background-color: transparent;
201
+ }
237
202
 
238
- .aio-table.rtl .aio-table-resize{
239
- left:0;
240
- right:unset;
203
+ .rows::-webkit-scrollbar-thumb {
204
+ background-color: #cdd4e0;
205
+ border-radius: 20px;
206
+ border: 3px solid transparent;
207
+ background-clip: content-box;
241
208
  }
242
- .aio-table-error{
243
- position: absolute;
244
- width:100%;
245
- height:100%;
246
- left:0;
247
- top:0;
248
- background:red;
249
- padding:8px;
250
- font-size:12px;
251
- color:#fff;
252
- box-sizing: border-box;
209
+
210
+ .rows::-webkit-scrollbar-thumb {
211
+ background-color: #b1b9ca;
253
212
  }
254
- @keyframes loadingScaleY {
255
- 0%,
256
- 40%,
257
- 100% {
258
- transform: scaleY(0.4);
259
- }
260
- 20% {
261
- transform: scaleY(1.0);
262
- }
263
- }
264
- .aio-table-loading{
265
- z-index:10000000000000000000000;
266
- position: absolute;
267
- width:100%;
268
- height:100%;
269
- top:0;
270
- left:0;
271
- display:flex;
272
- align-items: center;
273
- }
274
-
275
- .aio-table-cell.aio-table-relative-filter{
276
- opacity:.4;
277
- }
278
- .aio-table-cell.striped{
279
- background:#f5f5f5
280
- }
281
- .aio-table-filter-popup{
282
- background:#e3e6ea;
283
- padding:6px;
284
-
285
- }
286
-
287
- .aio-table-filter-icon{
288
- width:24px;
289
- height:100%;
290
- display:flex;
291
- align-items: center;
292
- justify-content: center;
293
- }
294
- .aio-table-filter-icon button{
295
- color:inherit;
296
- height:100%;
297
- background:none;
298
- }
299
-
300
- .aio-table-filter-item{
301
- display: flex;
302
- margin-bottom:6px;
303
- }
304
- .aio-table-filter-footer{
305
- display:flex;
306
- align-items: center;
307
- justify-content: center;
308
- }
309
- .aio-table-filter-footer button{
310
- border:none;
311
- width:100%;
312
- min-width:200px;
313
- height:24px;
314
- background:rgb(243, 246, 248);
315
- color:#888;
316
- cursor:pointer;
317
- font-family:inherit;
318
- }
319
-
320
- .aio-table-filter-item select{
321
- height:26px;
322
- width:90px;
323
- border:none;
324
- outline:none;
325
- cursor: pointer;
326
- font-family:inherit;
327
- }
328
- .aio-table-filter-item input{
329
- height:24px;
330
- outline:none;
331
- width:120px;
332
- border:none;
333
- font-family:inherit;
334
- }
335
- .aio-table-filter-remove{
336
- height:26px;
337
- width:26px;
338
- display: flex;
339
- align-items: center;
340
- cursor: pointer;
341
- justify-content: center;
342
- background:#fff;
343
- }
344
- .aio-table-boolean{
345
- height: 24px;
346
- display: flex;
347
- align-items: center;
348
- justify-content: center;
349
- margin-bottom: 6px;
350
- cursor:pointer;
351
- }
352
- .aio-table-group{
353
- display:flex;
354
- padding:0 12px;
355
- height:36px;
356
- align-items: center;
357
- white-space:nowrap;
358
- background:#fff;
359
- text-overflow:ellipsis;
360
- overflow: hidden;
361
- position:relative;
362
- box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.1);
363
- }
364
- .aio-table-group-text{
365
- height:100%;
366
- display: flex;
367
- flex:1;
368
- align-items: center;
369
- white-space: pre-wrap;
370
- }
371
- .aio-table-toolbar{
372
- display:flex;
373
- align-items: center;
374
- flex-shrink:0;
375
- padding:0 6px;
376
- border-bottom:1px solid #ddd;
377
- }
378
- @media print{
379
- .aio-table-toolbar{
380
- display:none;
381
- }
382
- }
383
- .aio-table-toolbar-button{
384
- background:#fff;
385
- color:inherit;
386
- height:30px;
387
- border-radius:36px;
388
- width:30px;
389
- margin:6px 3px;
390
- }
391
-
392
- .aio-table-splitter{
393
- width:2px;
394
- background:#ddd;
395
- position:relative;
396
- display: flex;
397
- align-items: center;
398
- justify-content: center;
399
- }
400
- .aio-table-splitter:after{
401
- content:'';
402
- opacity:0;
403
- z-index:1;
404
- cursor:col-resize;
405
- position:absolute;
406
- height:100%;
407
- width:6px;
408
- flex:1;
409
- background:red;
410
- }
411
-
412
- .aio-table-search{
413
- flex:1;
414
- border-radius:36px;
415
- margin:0 6px;
416
- background:#fff;
417
- height:30px;
418
- display:flex;
419
- align-items: center;
420
- border:1px solid #eee;
421
- padding:0 6px;
422
- box-sizing: border-box;
423
- margin:6px 3px;
424
- }
425
- .aio-table-search-input{
426
- flex:1;
427
- border:none;
428
- outline:none;
429
- height:100%;
430
- background:none;
431
- }
432
- .aio-table-title-gantt{
433
- background:#fff !important;
434
- }
435
- .aio-table-title-gantt .r-range-slider{
436
- flex:1;
437
- padding:0;
438
- height:unset;
439
- }
440
- .aio-table-cell-gantt .r-range-slider{
441
- flex:1;
442
- padding:0;
443
- height:24px;
444
- }
445
- .aio-table-cell-gantt .r-range-slider-fill{
446
- height:16px !important;
447
- color:#79a4cf
448
- }
449
- .aio-table-cell-gantt .r-range-slider-fill-container div:not(.r-range-slider-fill){
450
- z-index:1;
451
- font-size:10px;
452
- }
453
- .aio-table-cell-gantt .r-range-slider-point{
454
- border-radius:0;
455
- background:rgba(0, 174, 255, 0);
456
- }
457
- .aio-table-arrow-up,.aio-table-arrow-down{
458
- width:30px;
459
- height:24px;
460
- display:flex;
461
- align-items: center;
462
- justify-content: flex-end;
463
- }
464
- .aio-table-arrow-up:after{
465
- content:'';
466
- border-bottom:8px solid;
467
- border-left:8px solid transparent;
468
- border-right:8px solid transparent;
469
- }
470
- .aio-table-arrow-down:after{
471
- content:'';
472
- border-top:8px solid;
473
- border-left:8px solid transparent;
474
- border-right:8px solid transparent;
475
- }
476
- .aio-table-card{
477
- position:relative;
478
- display:flex;
479
- box-sizing: border-box;
480
- user-select: text;
481
- -webkit-user-select: text;
482
- }
483
- /* custom scrollbar */
484
- .aio-table-unit::-webkit-scrollbar {
485
- width: 10px !important;
486
- height:10px !important;
487
- }
488
- #aio-table-first-split::-webkit-scrollbar {
489
- width: 0px !important;
490
- }
491
-
492
- .aio-table-unit::-webkit-scrollbar-track {
493
- background-color: transparent;
494
- }
495
-
496
- .aio-table-unit::-webkit-scrollbar-thumb {
497
- background-color: #cdd4e0;
498
- border-radius: 20px;
499
- border: 3px solid transparent;
500
- background-clip: content-box;
501
- }
502
-
503
- .aio-table-unit::-webkit-scrollbar-thumb:hover {
504
- background-color: #868e9e;
505
- }
506
- .aio-table-options{
507
- background:none;
508
- font-size:inherit;
509
- color:inherit;
510
- }
511
- .aio-table-slider{
512
- display:flex;
513
- font-size:inherit;
514
- align-items:center;
515
- height:100%;
516
- width:100%;
517
- }
518
- .aio-table-cell-has-subtext{
519
- flex:1;
520
- height:100%;
521
- display:flex;
522
- flex-direction:column;
523
- }
524
- .aio-table-cell-uptext{
525
- display:flex;
526
- align-items:center;
527
- flex:1;
528
- position:relative;
529
- white-space:nowrap;
530
- }
531
- .aio-table-cell-subtext{
532
- display:flex;
533
- align-items:center;
534
- font-size:80%;
535
- opacity:0.7;
536
- flex:1;
537
- position:relative;
538
- }
539
- .aio-table-popup-header{
540
- font-size:12px;
541
- border-bottom:1px dashed;
542
- font-weight:bold;
543
- padding:6px;
544
- }
213
+
214
+ .rows::-webkit-scrollbar-thumb:hover {
215
+ background-color: #6f7888;
216
+ }