aio-table 7.0.1 → 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 +195 -516
  2. package/index.js +1096 -3672
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -1,544 +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
- 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;
1
+ .aio-form{
2
+ font-size:12px;
3
+ color:#888;
4
+ background:#eee;
42
5
  }
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;
6
+ .aio-form-header{
63
7
  background:#ddd;
64
- position:absolute;
8
+ padding:0 12px;
9
+ height:48px;
65
10
  }
66
- .aio-table-title.ltr:after{
67
- left:calc(100% - 1px);
11
+ .aio-form-body{
12
+ padding:12px 24px;
68
13
  }
69
- .aio-table-title.rtl:after{
70
- right:calc(100% - 1px);
14
+ .aio-form-title{
15
+ font-size:110%;
71
16
  }
72
- .aio-table-title.last-child:after{
73
- display:none;
17
+ .aio-form-subtitle{
18
+ font-size:90%;
19
+ opacity:0.7;
74
20
  }
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%;
81
- display:flex;
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{
21
+ .aio-form-input{
22
+ border:1px solid #d8d8d8;
23
+ background: #fff;
115
24
  width:100%;
116
- height:100%;
25
+ border-radius:4px;
26
+ display:flex;
27
+ height:36px;
28
+ padding:0 8px;
117
29
  align-items: center;
30
+ box-sizing: border-box;
31
+ font-family:inherit;
32
+ outline-color:rgb(151, 190, 219);
118
33
  overflow:hidden;
119
- display: flex;
120
34
  }
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;
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
+
128
72
  }
129
- .aio-table-checkbox{
130
- fill:dodgerblue;
73
+ .rvd-check-inner.checked{
74
+ background:#ddd;
131
75
  }
132
- .aio-table.rtl .aio-table-cell{
133
- box-shadow: -3px 4px 6px -2px rgba(0,0,0,0.1);
76
+ .rvd-check-gap{
77
+ width:6px;
134
78
  }
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;
79
+ .aio-form-input-checklist,.aio-form-input-radio{
80
+ height:unset !important;
81
+ padding:0 !important;
82
+ min-height:unset;
179
83
  }
180
-
181
- .aio-table-nodata{
182
- display:flex;
183
- align-items: center;
184
- justify-content: center;
84
+ .aio-form-input-checklist-item{
85
+ display:flex;
86
+ position: relative;
87
+ box-sizing: border-box;
88
+ align-items: center;
89
+
185
90
  }
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;
91
+ .aio-form-input-select,.aio-form-input-multiselect{
92
+ color:inherit;
93
+ }
94
+ .aio-form-input-radio .aio-form-input{
95
+ border:none;
227
96
  }
228
- .aio-table-cell-gap{
229
- width:6px;
230
- flex-shrink:0;
97
+ .aio-form-input-checklist .aio-form-input{
98
+ border:none;
231
99
  }
232
100
 
233
- .aio-table-space{
234
- background:#fff;
101
+ .aio-form-input-radio.disabled,.aio-form-input-select.disabled,.aio-form-input-multiselect.disabled{
102
+ opacity:1;
235
103
  }
236
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;
237
112
 
238
- .aio-table.rtl .aio-table-resize{
239
- left:0;
240
- right:unset;
241
113
  }
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;
114
+ .aio-form .aio-table-body{
115
+ padding:0;
116
+ flex:unset;
117
+
253
118
  }
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
- }
119
+ .aio-form-footer{
120
+ height:48px;
121
+ padding:0 12px;
122
+ background:#ddd;
274
123
 
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
- }
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;
299
160
 
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
- }
161
+ }
319
162
 
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
- }
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
+ }
391
184
 
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
- }
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
+ }
411
198
 
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
- }
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
+ }