aio-table 7.0.2 → 7.0.3

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 +516 -195
  2. package/index.js +3675 -1096
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -1,223 +1,544 @@
1
- .aio-form{
2
- font-size:12px;
3
- color:#888;
4
- background:#eee;
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;
12
+ overflow: hidden;
13
+ height:500px;
14
+ width:100%;
5
15
  }
6
- .aio-form-header{
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;
42
+ }
43
+
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;
7
63
  background:#ddd;
8
- padding:0 12px;
9
- height:48px;
64
+ position:absolute;
10
65
  }
11
- .aio-form-body{
12
- padding:12px 24px;
66
+ .aio-table-title.ltr:after{
67
+ left:calc(100% - 1px);
13
68
  }
14
- .aio-form-title{
15
- font-size:110%;
69
+ .aio-table-title.rtl:after{
70
+ right:calc(100% - 1px);
16
71
  }
17
- .aio-form-subtitle{
18
- font-size:90%;
19
- opacity:0.7;
72
+ .aio-table-title.last-child:after{
73
+ display:none;
20
74
  }
21
- .aio-form-input{
22
- border:1px solid #d8d8d8;
23
- background: #fff;
24
- width:100%;
25
- border-radius:4px;
75
+ .aio-table.rtl .aio-table-title{
76
+ box-shadow: -1px 4px 6px -2px rgba(0,0,0,0.1);
77
+ }
78
+ .aio-table-title-text{
79
+ flex:1;
80
+ height:100%;
26
81
  display:flex;
27
- height:36px;
28
- padding:0 8px;
82
+ align-items:center;
83
+ }
84
+ .aio-table-resize{
85
+ width:8px;
86
+ height:100%;
87
+ position:absolute;
88
+ right:0;
89
+ opacity:1;
90
+ cursor:col-resize;
91
+ }
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;
103
+ }
104
+ .aio-table-cell.last-child{
105
+ border:none;
106
+ }
107
+ .aio-table-cell-selectable{
108
+ user-select: text;
109
+ -webkit-user-select: text;
110
+ }
111
+ .aio-table-cell-hidden{
112
+ display:none;
113
+ }
114
+ .aio-table-cell-content{
115
+ width:100%;
116
+ height:100%;
29
117
  align-items: center;
30
- box-sizing: border-box;
31
- font-family:inherit;
32
- outline-color:rgb(151, 190, 219);
33
118
  overflow:hidden;
119
+ display: flex;
34
120
  }
35
- .aio-form-input.disabled{
36
- cursor:not-allowed;
37
- opacity:0.5;
38
- }
39
- .aio-form-input-text,.aio-form-input-number,.aio-form-input-select{
40
- box-sizing: border-box;
41
- }
42
- .aio-form-input-textarea{
43
- padding:8px;
44
- min-height:60px;
45
- resize:vertical;
46
- }
47
- .aio-form-input-checkbox{
48
- display:flex;
49
- align-items: center;
50
- }
51
- .aio-form-item{
52
- margin-bottom:24px;
53
- position:relative;
54
- }
55
- .aio-form .r-range-slider{
56
- padding:0 24px;
57
- }
58
- .rvd-check{
59
- width:16px;
60
- height:16px;
61
- border-radius:2px;
62
- border:1px solid #ddd;
63
- display:flex;
64
- align-items: center;
65
- justify-content: center;
66
- position:relative;
67
- }
68
- .rvd-check-inner{
69
- width:14px;
70
- height:14px;
71
-
72
- }
73
- .rvd-check-inner.checked{
74
- background:#ddd;
121
+ .aio-table-icon{
122
+ height:24px;
123
+ display:flex;
124
+ font-size:16px;
125
+ align-items: center;
126
+ justify-content: center;
127
+ width:fit-content;
75
128
  }
76
- .rvd-check-gap{
77
- width:6px;
129
+ .aio-table-checkbox{
130
+ fill:dodgerblue;
78
131
  }
79
- .aio-form-input-checklist,.aio-form-input-radio{
80
- height:unset !important;
81
- padding:0 !important;
82
- min-height:unset;
132
+ .aio-table.rtl .aio-table-cell{
133
+ box-shadow: -3px 4px 6px -2px rgba(0,0,0,0.1);
83
134
  }
84
- .aio-form-input-checklist-item{
85
- display:flex;
86
- position: relative;
87
- box-sizing: border-box;
88
- align-items: center;
89
-
135
+
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;
145
+ 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%;
153
+ }
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;
164
+ }
165
+ select.aio-table-input{
166
+ background: rgba(0,0,0,0.02);
167
+ }
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;
175
+ }
176
+ .aio-table-input:focus + .aio-table-input-border{
177
+ width:100%;
178
+ transition: 0.3s;
90
179
  }
91
- .aio-form-input-select,.aio-form-input-multiselect{
92
- color:inherit;
180
+
181
+ .aio-table-nodata{
182
+ display:flex;
183
+ align-items: center;
184
+ justify-content: center;
93
185
  }
94
- .aio-form-input-radio .aio-form-input{
95
- border:none;
186
+
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;
194
+ }
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;
205
+ }
206
+ select.aio-table-paging-button{
207
+ width:60px;
208
+ border-radius:24px;
209
+ border:none;
210
+ padding:0 6px;
211
+ outline:none;
212
+ }
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;
220
+ }
221
+ .aio-table-toggle{
222
+ height:24px;
223
+ display:flex;
224
+ align-items: center;
225
+ flex-shrink:0;
226
+ cursor:pointer;
96
227
  }
97
- .aio-form-input-checklist .aio-form-input{
98
- border:none;
228
+ .aio-table-cell-gap{
229
+ width:6px;
230
+ flex-shrink:0;
99
231
  }
100
232
 
101
- .aio-form-input-radio.disabled,.aio-form-input-select.disabled,.aio-form-input-multiselect.disabled{
102
- opacity:1;
233
+ .aio-table-space{
234
+ background:#fff;
103
235
  }
104
236
 
105
- .aio-form-input-table{
106
- height:unset !important;
107
- color:inherit;
108
- }
109
- .aio-form .aio-table{
110
- width:100%;
111
- height:unset;
112
237
 
238
+ .aio-table.rtl .aio-table-resize{
239
+ left:0;
240
+ right:unset;
113
241
  }
114
- .aio-form .aio-table-body{
115
- padding:0;
116
- flex:unset;
117
-
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;
118
253
  }
119
- .aio-form-footer{
120
- height:48px;
121
- padding:0 12px;
122
- background:#ddd;
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
+ }
123
274
 
124
- }
125
- .aio-form-error{
126
- color:red;
127
- font-size:10px;
128
- position:absolute;
129
- top:100%;
130
- }
131
- .aio-form-footer-button{
132
- background:dodgerblue;
133
- border:none;
134
- color:#fff;
135
- height:36px;
136
- padding:0 12px;
137
- border-radius:4px;
138
- }
139
- .aio-form-footer-button:disabled{
140
- cursor:not-allowed;
141
- opacity:0.5;
142
- }
143
- .aio-form-table-add{
144
- justify-content: center;
145
- font-weight: bold;
146
- font-size:16px;
147
- }
148
- .aio-form .aio-table .aio-table-cell{
149
- border-width:0px 0px 1px 0px;
150
- border-radius:0;
151
- }
152
- .aio-form .aio-table .aio-table-title{
153
- border-width:1px 0px 1px 0px;
154
- border-radius:0;
155
- font-weight:bold;
156
- }
157
- .aio-form-input-table .aio-table-title{
158
- height:28px;
159
- box-shadow:none;
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
+ }
160
299
 
161
- }
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
+ }
162
319
 
163
- .aio-form-affix,.aio-form-prefix{
164
- display:flex;
165
- align-items: center;
166
- justify-content: center;
167
- padding:0 12px;
168
- border:1px solid #d8d8d8;
169
- height:100%;
170
- box-sizing: border-box;
171
- }
172
- .aio-form-affix{
173
- color:#fff;
174
- background:#bbb;
175
- border:1px solid #d8d8d8;
176
- border-radius:0 4px 4px 0;
177
- }
178
- .aio-form-prefix{
179
- color:#fff;
180
- background:#bbb;
181
- border:1px solid #d8d8d8;
182
- border-radius:4px 0 0 4px;
183
- }
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
+ }
184
391
 
185
- .aio-form-affix.rtl{
186
- border-radius:4px 0 0 4px;
187
- }
188
- .aio-form-input.has-affix.ltr{
189
- border-right-width:0;
190
- border-top-right-radius:0 ;
191
- border-bottom-right-radius: 0;
192
- }
193
- .aio-form-input.has-affix.rtl{
194
- border-left-width:0;
195
- border-top-left-radius:0 ;
196
- border-bottom-left-radius: 0;
197
- }
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
+ }
198
411
 
199
- .aio-form-affix.rtl{
200
- border-radius:0 4px 4px 0;
201
- }
202
- .aio-form-input.has-prefix.ltr{
203
- border-left-width:0;
204
- border-top-left-radius:0 ;
205
- border-bottom-left-radius: 0;
206
- }
207
- .aio-form-input.has-prefix.rtl{
208
- border-right-width:0;
209
- border-top-right-radius:0 ;
210
- border-bottom-right-radius: 0;
211
- }
212
- .aio-form-inline-error{
213
- background:red;
214
- color:#fff;
215
- }
216
- .aio-form-input-table-add{
217
- border:none;
218
- width:100%;
219
- height:100%;
220
- }
221
- .aio-form .aio-table-toolbar{
222
- height:36px;
223
- }
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
+ }