aio-table 6.3.2 → 7.0.2

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