aio-table 3.0.0 → 5.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 (4) hide show
  1. package/README.md +351 -464
  2. package/index.css +49 -31
  3. package/index.js +769 -792
  4. package/package.json +3 -3
package/index.css CHANGED
@@ -9,6 +9,8 @@
9
9
  position: relative;
10
10
  color:#999;
11
11
  font-size:14px;
12
+ overflow: hidden;
13
+ height:500px;
12
14
  }
13
15
  .aio-table.rtl{
14
16
  direction:rtl;
@@ -16,7 +18,7 @@
16
18
  .aio-table-body{
17
19
  display: flex;
18
20
  width:100%;
19
- overflow:hidden;
21
+ flex:1;
20
22
  }
21
23
  .aio-table-unit{
22
24
  display: grid;
@@ -58,20 +60,20 @@
58
60
  background-color: #868e9e;
59
61
  }
60
62
  .aio-table-title{
61
- background:#fff;
62
63
  display:flex;
63
64
  align-items: center;
64
65
  padding:0 6px;
65
66
  position:sticky;
66
67
  box-sizing:border-box;
67
68
  position: -webkit-sticky;
69
+ background: #fff;
68
70
  z-index:100;
69
71
  border-bottom:1px solid #ddd;
70
72
  border-left:1px solid #ddd;
71
- box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.2);
73
+ box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.1);
72
74
  }
73
75
  .aio-table.rtl .aio-table-title{
74
- box-shadow: -1px 4px 6px -2px rgba(0,0,0,0.2);
76
+ box-shadow: -1px 4px 6px -2px rgba(0,0,0,0.1);
75
77
  }
76
78
  .aio-table-title-text{
77
79
  flex:1;
@@ -101,16 +103,30 @@
101
103
  .aio-table-cell{
102
104
  display:flex;
103
105
  align-items: center;
104
- background:#fff;
105
106
  padding:0 8px;
106
107
  box-sizing: border-box;
107
108
  position: relative;
108
- box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.2);
109
+ box-shadow: 3px 4px 6px -2px rgba(0,0,0,0.1);
109
110
  white-space:nowrap;
110
111
  text-overflow:ellipsis;
112
+ background:#fff;
113
+ }
114
+ .aio-table-content{
115
+ width:100%;
116
+ overflow:hidden;
117
+ display: flex;
118
+ }
119
+ .aio-table-icon{
120
+ height:24px;
121
+ display:flex;
122
+ font-size:16px;
123
+ align-items: center;
124
+ justify-content: center;
125
+ width:fit-content;
111
126
  }
127
+
112
128
  .aio-table.rtl .aio-table-cell{
113
- box-shadow: -1px 4px 6px -2px rgba(0,0,0,0.2);
129
+ box-shadow: -3px 4px 6px -2px rgba(0,0,0,0.1);
114
130
  }
115
131
 
116
132
  .aio-table-input-container{
@@ -156,19 +172,11 @@ select.aio-table-input{
156
172
  width:100%;
157
173
  transition: 0.3s;
158
174
  }
159
- .aio-table-icon{
160
- height:24px;
161
- display:flex;
162
- font-size:16px;
163
- align-items: center;
164
- justify-content: center;
165
- }
166
175
 
167
176
  .aio-table-nodata{
168
177
  display:flex;
169
178
  align-items: center;
170
179
  justify-content: center;
171
- background:#fff;
172
180
  }
173
181
 
174
182
  .aio-table-paging{
@@ -270,6 +278,7 @@ select.aio-table-paging-button{
270
278
  .aio-table-filter-icon button{
271
279
  color:inherit;
272
280
  height:100%;
281
+ background:none;
273
282
  }
274
283
 
275
284
  .aio-table-filter-item{
@@ -319,8 +328,6 @@ select.aio-table-paging-button{
319
328
  align-items: center;
320
329
  justify-content: center;
321
330
  margin-bottom: 6px;
322
- font-size:16px;
323
- font-weight:bold;
324
331
  }
325
332
  .aio-table-group{
326
333
  display:flex;
@@ -330,18 +337,30 @@ select.aio-table-paging-button{
330
337
  white-space:nowrap;
331
338
  background:#fff;
332
339
  text-overflow:ellipsis;
340
+ overflow: hidden;
333
341
  position:relative;
334
- box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.2);
342
+ box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.1);
343
+ }
344
+ .aio-table-group-text{
345
+ height:100%;
346
+ display: flex;
347
+ flex:1;
348
+ align-items: center;
349
+ white-space: pre-wrap;
335
350
  }
336
351
  .aio-table-toolbar{
337
- background:#fff;
338
- padding:6px;
352
+ padding:0 6px;
339
353
  display:flex;
340
354
  align-items: center;
341
355
  flex-shrink:0;
342
- border-bottom:1px solid #ddd;
356
+ height:36px;
357
+ }
358
+ @media print{
359
+ .aio-table-toolbar{
360
+ display:none;
361
+ }
343
362
  }
344
- .aio-table-toolbar-dropdown{
363
+ .aio-table-toolbar-button{
345
364
  background:dodgerblue;
346
365
  color:#fff;
347
366
  height:30px;
@@ -373,7 +392,7 @@ select.aio-table-paging-button{
373
392
  flex:1;
374
393
  border-radius:36px;
375
394
  margin:0 6px;
376
- background:rgba(0,0,0,.06);
395
+ background:#fff;
377
396
  height:30px;
378
397
  display:flex;
379
398
  align-items: center;
@@ -399,7 +418,7 @@ select.aio-table-paging-button{
399
418
  .aio-table-cell-gantt .r-range-slider{
400
419
  flex:1;
401
420
  padding:0;
402
- height:100%;
421
+ height:24px;
403
422
  }
404
423
  .aio-table-cell-gantt .r-range-slider-fill{
405
424
  height:16px !important;
@@ -435,18 +454,17 @@ select.aio-table-paging-button{
435
454
  .aio-table-card{
436
455
  background:#fff;
437
456
  position:relative;
438
- border:1px solid #ddd;
439
457
  display:flex;
440
458
  box-sizing: border-box;
441
459
  }
442
460
 
443
461
  .r-layout-item{
444
- overflow:auto;
445
- display:flex;
446
- position: relative;
447
- flex-grow:0;
448
- flex-shrink: 0;
449
- }
462
+ overflow:auto;
463
+ display:flex;
464
+ position: relative;
465
+ flex-grow:0;
466
+ flex-shrink: 0;
467
+ }
450
468
  .r-layout-parent{
451
469
  position:relative;
452
470
  display:flex;