wargerm 0.4.7 → 0.4.10

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 (7) hide show
  1. package/dist/components/Card/index.d.ts +13 -3
  2. package/dist/components/Table/index.d.ts +1 -1
  3. package/dist/index.css +176 -22
  4. package/dist/index.esm.css +176 -22
  5. package/dist/index.esm.js +106 -37
  6. package/dist/index.js +106 -37
  7. package/package.json +2 -2
package/dist/components/Card/index.d.ts CHANGED
@@ -1,12 +1,22 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import { ReactNode } from 'react';
3
+ interface IsliderTabs {
4
+ tabs: Array<string>;
5
+ direction: 'left' | 'right';
6
+ defaultValue?: number;
7
+ className?: string;
8
+ tabClassName?: string;
9
+ activeTabClassName?: string;
10
+ components: Array<ReactNode>;
11
+ }
3
12
  declare type Props = {
4
13
  title: ReactNode;
5
14
  className: string;
6
15
  headerTail?: ReactNode;
7
16
  headerCenter?: ReactNode;
8
17
  children?: ReactNode;
18
+ sliderTabs?: IsliderTabs;
9
19
  style?: Record<string, string>;
10
20
  };
11
- declare const Index: FC<Props>;
12
- export default Index;
21
+ declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
22
+ export default _default;
package/dist/components/Table/index.d.ts CHANGED
@@ -52,7 +52,7 @@ interface Iscroll {
52
52
  /**
53
53
  * 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'
54
54
  */
55
- x?: string | number | true;
55
+ x?: string | number;
56
56
  /**
57
57
  * 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值
58
58
  */
package/dist/index.css CHANGED
@@ -6,15 +6,18 @@
6
6
  ::-webkit-scrollbar {
7
7
  width: 6px;
8
8
  height: 6px;
9
+ cursor: pointer;
9
10
  }
10
11
  ::-webkit-scrollbar-track {
11
- background: hsla(0, 0%, 100%, 0.1);
12
- -webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
12
+ cursor: pointer;
13
+ background: rgba(0, 0, 0, 0.2);
14
+ -webkit-box-shadow: inset 0 0 5px rgba(36, 36, 36, 0.1);
13
15
  }
14
16
  ::-webkit-scrollbar-thumb {
15
- background: rgba(0, 0, 0, 0.2);
17
+ cursor: pointer;
18
+ background: hsla(0, 0%, 100%, 0.1);
16
19
  border-radius: 4px;
17
- -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
20
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
18
21
  }
19
22
  ::-webkit-scrollbar-thumb:window-inactive {
20
23
  background: rgba(0, 0, 0, 0.2);
@@ -116,6 +119,14 @@
116
119
  }
117
120
  [data-prefers-color='dark'] .container {
118
121
  position: relative;
122
+ width: 100%;
123
+ overflow: auto;
124
+ }
125
+ [data-prefers-color='dark'] .container .theader {
126
+ position: -webkit-sticky;
127
+ position: sticky;
128
+ top: 0;
129
+ z-index: 4;
119
130
  }
120
131
  [data-prefers-color='dark'] .container .theader .th {
121
132
  padding-left: 4px;
@@ -151,12 +162,11 @@
151
162
  z-index: 2;
152
163
  min-height: 32px;
153
164
  }
154
- [data-prefers-color='dark'] .container .tbody {
155
- overflow: auto;
165
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody {
156
166
  padding-top: 5px;
157
167
  margin-top: 19px;
158
168
  }
159
- [data-prefers-color='dark'] .container .tbody .tr {
169
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr {
160
170
  padding-left: 6px;
161
171
  width: 100%;
162
172
  min-height: 32px;
@@ -165,7 +175,7 @@
165
175
  position: relative;
166
176
  border-radius: 6px;
167
177
  }
168
- [data-prefers-color='dark'] .container .tbody .tr::before {
178
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr::before {
169
179
  background-color: rgba(25, 37, 71, 0.43);
170
180
  content: '';
171
181
  position: absolute;
@@ -182,7 +192,7 @@
182
192
  border-image-repeat: stretch stretch;
183
193
  border-radius: 6px;
184
194
  }
185
- [data-prefers-color='dark'] .container .tbody .tr.active::before {
195
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active::before {
186
196
  background-color: rgba(140, 75, 102, 0.43);
187
197
  border-width: 30px 20px 4px 4px;
188
198
  border-style: solid;
@@ -193,7 +203,7 @@
193
203
  border-image-repeat: stretch stretch;
194
204
  border-radius: 6px;
195
205
  }
196
- [data-prefers-color='dark'] .container .tbody .tr.active .td {
206
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active .td {
197
207
  flex: 1;
198
208
  display: flex;
199
209
  align-items: center;
@@ -202,7 +212,7 @@
202
212
  position: relative;
203
213
  z-index: 2;
204
214
  }
205
- [data-prefers-color='dark'] .container .tbody .tr .td {
215
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr .td {
206
216
  flex: 1;
207
217
  display: flex;
208
218
  align-items: center;
@@ -226,8 +236,6 @@
226
236
  background-color: transparent;
227
237
  }
228
238
  [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
229
- background-color: rgba(22, 93, 134, 0.49);
230
- background: rgba(22, 28, 38, 0.7);
231
239
  border-top: 1px solid rgba(118, 214, 255, 0.4);
232
240
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
233
241
  border-radius: 0px;
@@ -252,6 +260,55 @@
252
260
  [data-prefers-color='dark'] .w-frame-box-table.container .tbody .frame .tr::before {
253
261
  content: none;
254
262
  }
263
+ [data-prefers-color='dark'] .th .fixedLeft,
264
+ [data-prefers-color='dark'] .th .fixedRight {
265
+ position: -webkit-sticky !important;
266
+ position: sticky !important;
267
+ z-index: 4 !important;
268
+ }
269
+ [data-prefers-color='dark'] .th .fixedLeft.td,
270
+ [data-prefers-color='dark'] .th .fixedRight.td {
271
+ background-color: #192547;
272
+ transition: all 0.3s;
273
+ }
274
+ [data-prefers-color='dark'] .th .fixedRight:first-child:after {
275
+ box-shadow: inset -10px 0 8px -8px #00000026;
276
+ position: absolute;
277
+ top: 0;
278
+ bottom: -1px;
279
+ left: 0;
280
+ width: 30px;
281
+ transform: translate(-100%);
282
+ transition: box-shadow 0.3s;
283
+ content: '';
284
+ pointer-events: none;
285
+ }
286
+ [data-prefers-color='dark'] .th .fixedLeft:last-child:after {
287
+ box-shadow: inset -10px 0 8px -8px #00000026;
288
+ position: absolute;
289
+ top: 0;
290
+ right: 0;
291
+ bottom: -1px;
292
+ width: 30px;
293
+ transform: translate(100%);
294
+ transition: box-shadow 0.3s;
295
+ content: '';
296
+ pointer-events: none;
297
+ }
298
+ [data-prefers-color='dark'] .tr .fixedLeft,
299
+ [data-prefers-color='dark'] .tr .fixedRight {
300
+ position: -webkit-sticky !important;
301
+ position: sticky !important;
302
+ z-index: 3 !important;
303
+ }
304
+ [data-prefers-color='dark'] .tr .fixedLeft.td,
305
+ [data-prefers-color='dark'] .tr .fixedRight.td {
306
+ background: #233b62;
307
+ transition: all 0.3s;
308
+ }
309
+ [data-prefers-color='dark'] .th .fixedRight:nth-of-type(1) {
310
+ background: red !important;
311
+ }
255
312
  [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
256
313
  background-color: transparent;
257
314
  color: #4383a4;
@@ -1001,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1001
1058
  transform: translate(-124px, -63px);
1002
1059
  padding: 12px 6px;
1003
1060
  }
1061
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs {
1062
+ position: absolute;
1063
+ }
1064
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
1065
+ right: -22px;
1066
+ top: 80px;
1067
+ }
1068
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
1069
+ left: -22px;
1070
+ top: 80px;
1071
+ }
1072
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
1073
+ transform: skewy(-45deg);
1074
+ }
1075
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
1076
+ -ms-writing-mode: tb-lr;
1077
+ writing-mode: vertical-lr;
1078
+ position: relative;
1079
+ margin-bottom: 2px;
1080
+ cursor: pointer;
1081
+ padding: 10px 2px;
1082
+ }
1083
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
1084
+ content: '';
1085
+ position: absolute;
1086
+ width: 100%;
1087
+ height: 100%;
1088
+ transform: skewy(45deg);
1089
+ left: 0;
1090
+ top: 0;
1091
+ background: rgba(81, 190, 246, 0.28);
1092
+ border: 2px solid #51bef6;
1093
+ transition: background 0.3s ease;
1094
+ z-index: -1;
1095
+ }
1096
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
1097
+ background: #51bef6;
1098
+ border: none;
1099
+ }
1004
1100
  [data-prefers-color='dark'] .card-container .container-in::before {
1005
1101
  content: '';
1006
1102
  position: absolute;
@@ -1322,6 +1418,14 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1322
1418
  }
1323
1419
  [data-prefers-color='light'] .container {
1324
1420
  position: relative;
1421
+ width: 100%;
1422
+ overflow: auto;
1423
+ }
1424
+ [data-prefers-color='light'] .container .theader {
1425
+ position: -webkit-sticky;
1426
+ position: sticky;
1427
+ top: 0;
1428
+ z-index: 4;
1325
1429
  }
1326
1430
  [data-prefers-color='light'] .container .theader .th {
1327
1431
  padding-left: 4px;
@@ -1357,12 +1461,11 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1357
1461
  z-index: 2;
1358
1462
  min-height: 32px;
1359
1463
  }
1360
- [data-prefers-color='light'] .container .tbody {
1361
- overflow: auto;
1464
+ [data-prefers-color='light'] .container .tbodyContainer .tbody {
1362
1465
  padding-top: 5px;
1363
1466
  margin-top: 19px;
1364
1467
  }
1365
- [data-prefers-color='light'] .container .tbody .tr {
1468
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr {
1366
1469
  padding-left: 6px;
1367
1470
  width: 100%;
1368
1471
  min-height: 32px;
@@ -1371,7 +1474,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1371
1474
  position: relative;
1372
1475
  border-radius: 6px;
1373
1476
  }
1374
- [data-prefers-color='light'] .container .tbody .tr::before {
1477
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr::before {
1375
1478
  background-color: rgba(25, 37, 71, 0.43);
1376
1479
  content: '';
1377
1480
  position: absolute;
@@ -1388,7 +1491,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1388
1491
  border-image-repeat: stretch stretch;
1389
1492
  border-radius: 6px;
1390
1493
  }
1391
- [data-prefers-color='light'] .container .tbody .tr.active::before {
1494
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active::before {
1392
1495
  background-color: rgba(140, 75, 102, 0.43);
1393
1496
  border-width: 30px 20px 4px 4px;
1394
1497
  border-style: solid;
@@ -1399,7 +1502,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1399
1502
  border-image-repeat: stretch stretch;
1400
1503
  border-radius: 6px;
1401
1504
  }
1402
- [data-prefers-color='light'] .container .tbody .tr.active .td {
1505
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active .td {
1403
1506
  flex: 1;
1404
1507
  display: flex;
1405
1508
  align-items: center;
@@ -1408,7 +1511,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1408
1511
  position: relative;
1409
1512
  z-index: 2;
1410
1513
  }
1411
- [data-prefers-color='light'] .container .tbody .tr .td {
1514
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr .td {
1412
1515
  flex: 1;
1413
1516
  display: flex;
1414
1517
  align-items: center;
@@ -1432,8 +1535,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1432
1535
  background-color: transparent;
1433
1536
  }
1434
1537
  [data-prefers-color='light'] .w-frame-box-table.container .theader .th {
1435
- background-color: rgba(22, 93, 134, 0.49);
1436
- background: rgba(22, 28, 38, 0.7);
1538
+ background-color: #192335;
1437
1539
  border-top: 1px solid rgba(118, 214, 255, 0.4);
1438
1540
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
1439
1541
  border-radius: 0px;
@@ -1458,6 +1560,58 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1458
1560
  [data-prefers-color='light'] .w-frame-box-table.container .tbody .frame .tr::before {
1459
1561
  content: none;
1460
1562
  }
1563
+ [data-prefers-color='light'] .th .fixedLeft,
1564
+ [data-prefers-color='light'] .th .fixedRight {
1565
+ position: -webkit-sticky !important;
1566
+ position: sticky !important;
1567
+ z-index: 4 !important;
1568
+ }
1569
+ [data-prefers-color='light'] .th .fixedLeft.td,
1570
+ [data-prefers-color='light'] .th .fixedRight.td {
1571
+ background: #192235;
1572
+ transition: all 0.3s;
1573
+ }
1574
+ [data-prefers-color='light'] .tr .fixedLeft,
1575
+ [data-prefers-color='light'] .tr .fixedRight {
1576
+ position: -webkit-sticky !important;
1577
+ position: sticky !important;
1578
+ z-index: 3 !important;
1579
+ }
1580
+ [data-prefers-color='light'] .tr .fixedLeft.td,
1581
+ [data-prefers-color='light'] .tr .fixedRight.td {
1582
+ background: #233b62;
1583
+ transition: all 0.3s;
1584
+ }
1585
+ [data-prefers-color='light'] .fixedRight {
1586
+ position: -webkit-sticky !important;
1587
+ position: sticky !important;
1588
+ z-index: 3 !important;
1589
+ }
1590
+ [data-prefers-color='light'] .fixedRight.td:after {
1591
+ box-shadow: inset -10px 0 8px -8px #00000026;
1592
+ position: absolute;
1593
+ top: 0;
1594
+ bottom: -1px;
1595
+ left: 0;
1596
+ width: 30px;
1597
+ transform: translate(-100%);
1598
+ transition: box-shadow 0.3s;
1599
+ content: '';
1600
+ pointer-events: none;
1601
+ }
1602
+ [data-prefers-color='light'] .fixedLeft .th.td:after,
1603
+ [data-prefers-color='light'] .fixedLeft .tr.td:after {
1604
+ box-shadow: inset -10px 0 8px -8px #00000026;
1605
+ position: absolute;
1606
+ top: 0;
1607
+ right: 0;
1608
+ bottom: -1px;
1609
+ width: 30px;
1610
+ transform: translate(100%);
1611
+ transition: box-shadow 0.3s;
1612
+ content: '';
1613
+ pointer-events: none;
1614
+ }
1461
1615
  [data-prefers-color='light'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
1462
1616
  position: relative;
1463
1617
  background-color: #f4f4f4;
package/dist/index.esm.css CHANGED
@@ -6,15 +6,18 @@
6
6
  ::-webkit-scrollbar {
7
7
  width: 6px;
8
8
  height: 6px;
9
+ cursor: pointer;
9
10
  }
10
11
  ::-webkit-scrollbar-track {
11
- background: hsla(0, 0%, 100%, 0.1);
12
- -webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
12
+ cursor: pointer;
13
+ background: rgba(0, 0, 0, 0.2);
14
+ -webkit-box-shadow: inset 0 0 5px rgba(36, 36, 36, 0.1);
13
15
  }
14
16
  ::-webkit-scrollbar-thumb {
15
- background: rgba(0, 0, 0, 0.2);
17
+ cursor: pointer;
18
+ background: hsla(0, 0%, 100%, 0.1);
16
19
  border-radius: 4px;
17
- -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
20
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
18
21
  }
19
22
  ::-webkit-scrollbar-thumb:window-inactive {
20
23
  background: rgba(0, 0, 0, 0.2);
@@ -116,6 +119,14 @@
116
119
  }
117
120
  [data-prefers-color='dark'] .container {
118
121
  position: relative;
122
+ width: 100%;
123
+ overflow: auto;
124
+ }
125
+ [data-prefers-color='dark'] .container .theader {
126
+ position: -webkit-sticky;
127
+ position: sticky;
128
+ top: 0;
129
+ z-index: 4;
119
130
  }
120
131
  [data-prefers-color='dark'] .container .theader .th {
121
132
  padding-left: 4px;
@@ -151,12 +162,11 @@
151
162
  z-index: 2;
152
163
  min-height: 32px;
153
164
  }
154
- [data-prefers-color='dark'] .container .tbody {
155
- overflow: auto;
165
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody {
156
166
  padding-top: 5px;
157
167
  margin-top: 19px;
158
168
  }
159
- [data-prefers-color='dark'] .container .tbody .tr {
169
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr {
160
170
  padding-left: 6px;
161
171
  width: 100%;
162
172
  min-height: 32px;
@@ -165,7 +175,7 @@
165
175
  position: relative;
166
176
  border-radius: 6px;
167
177
  }
168
- [data-prefers-color='dark'] .container .tbody .tr::before {
178
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr::before {
169
179
  background-color: rgba(25, 37, 71, 0.43);
170
180
  content: '';
171
181
  position: absolute;
@@ -182,7 +192,7 @@
182
192
  border-image-repeat: stretch stretch;
183
193
  border-radius: 6px;
184
194
  }
185
- [data-prefers-color='dark'] .container .tbody .tr.active::before {
195
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active::before {
186
196
  background-color: rgba(140, 75, 102, 0.43);
187
197
  border-width: 30px 20px 4px 4px;
188
198
  border-style: solid;
@@ -193,7 +203,7 @@
193
203
  border-image-repeat: stretch stretch;
194
204
  border-radius: 6px;
195
205
  }
196
- [data-prefers-color='dark'] .container .tbody .tr.active .td {
206
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr.active .td {
197
207
  flex: 1;
198
208
  display: flex;
199
209
  align-items: center;
@@ -202,7 +212,7 @@
202
212
  position: relative;
203
213
  z-index: 2;
204
214
  }
205
- [data-prefers-color='dark'] .container .tbody .tr .td {
215
+ [data-prefers-color='dark'] .container .tbodyContainer .tbody .tr .td {
206
216
  flex: 1;
207
217
  display: flex;
208
218
  align-items: center;
@@ -226,8 +236,6 @@
226
236
  background-color: transparent;
227
237
  }
228
238
  [data-prefers-color='dark'] .w-frame-box-table.container .theader .th {
229
- background-color: rgba(22, 93, 134, 0.49);
230
- background: rgba(22, 28, 38, 0.7);
231
239
  border-top: 1px solid rgba(118, 214, 255, 0.4);
232
240
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
233
241
  border-radius: 0px;
@@ -252,6 +260,55 @@
252
260
  [data-prefers-color='dark'] .w-frame-box-table.container .tbody .frame .tr::before {
253
261
  content: none;
254
262
  }
263
+ [data-prefers-color='dark'] .th .fixedLeft,
264
+ [data-prefers-color='dark'] .th .fixedRight {
265
+ position: -webkit-sticky !important;
266
+ position: sticky !important;
267
+ z-index: 4 !important;
268
+ }
269
+ [data-prefers-color='dark'] .th .fixedLeft.td,
270
+ [data-prefers-color='dark'] .th .fixedRight.td {
271
+ background-color: #192547;
272
+ transition: all 0.3s;
273
+ }
274
+ [data-prefers-color='dark'] .th .fixedRight:first-child:after {
275
+ box-shadow: inset -10px 0 8px -8px #00000026;
276
+ position: absolute;
277
+ top: 0;
278
+ bottom: -1px;
279
+ left: 0;
280
+ width: 30px;
281
+ transform: translate(-100%);
282
+ transition: box-shadow 0.3s;
283
+ content: '';
284
+ pointer-events: none;
285
+ }
286
+ [data-prefers-color='dark'] .th .fixedLeft:last-child:after {
287
+ box-shadow: inset -10px 0 8px -8px #00000026;
288
+ position: absolute;
289
+ top: 0;
290
+ right: 0;
291
+ bottom: -1px;
292
+ width: 30px;
293
+ transform: translate(100%);
294
+ transition: box-shadow 0.3s;
295
+ content: '';
296
+ pointer-events: none;
297
+ }
298
+ [data-prefers-color='dark'] .tr .fixedLeft,
299
+ [data-prefers-color='dark'] .tr .fixedRight {
300
+ position: -webkit-sticky !important;
301
+ position: sticky !important;
302
+ z-index: 3 !important;
303
+ }
304
+ [data-prefers-color='dark'] .tr .fixedLeft.td,
305
+ [data-prefers-color='dark'] .tr .fixedRight.td {
306
+ background: #233b62;
307
+ transition: all 0.3s;
308
+ }
309
+ [data-prefers-color='dark'] .th .fixedRight:nth-of-type(1) {
310
+ background: red !important;
311
+ }
255
312
  [data-prefers-color='dark'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
256
313
  background-color: transparent;
257
314
  color: #4383a4;
@@ -1001,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1001
1058
  transform: translate(-124px, -63px);
1002
1059
  padding: 12px 6px;
1003
1060
  }
1061
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs {
1062
+ position: absolute;
1063
+ }
1064
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
1065
+ right: -22px;
1066
+ top: 80px;
1067
+ }
1068
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
1069
+ left: -22px;
1070
+ top: 80px;
1071
+ }
1072
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
1073
+ transform: skewy(-45deg);
1074
+ }
1075
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
1076
+ -ms-writing-mode: tb-lr;
1077
+ writing-mode: vertical-lr;
1078
+ position: relative;
1079
+ margin-bottom: 2px;
1080
+ cursor: pointer;
1081
+ padding: 10px 2px;
1082
+ }
1083
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
1084
+ content: '';
1085
+ position: absolute;
1086
+ width: 100%;
1087
+ height: 100%;
1088
+ transform: skewy(45deg);
1089
+ left: 0;
1090
+ top: 0;
1091
+ background: rgba(81, 190, 246, 0.28);
1092
+ border: 2px solid #51bef6;
1093
+ transition: background 0.3s ease;
1094
+ z-index: -1;
1095
+ }
1096
+ [data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
1097
+ background: #51bef6;
1098
+ border: none;
1099
+ }
1004
1100
  [data-prefers-color='dark'] .card-container .container-in::before {
1005
1101
  content: '';
1006
1102
  position: absolute;
@@ -1322,6 +1418,14 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1322
1418
  }
1323
1419
  [data-prefers-color='light'] .container {
1324
1420
  position: relative;
1421
+ width: 100%;
1422
+ overflow: auto;
1423
+ }
1424
+ [data-prefers-color='light'] .container .theader {
1425
+ position: -webkit-sticky;
1426
+ position: sticky;
1427
+ top: 0;
1428
+ z-index: 4;
1325
1429
  }
1326
1430
  [data-prefers-color='light'] .container .theader .th {
1327
1431
  padding-left: 4px;
@@ -1357,12 +1461,11 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1357
1461
  z-index: 2;
1358
1462
  min-height: 32px;
1359
1463
  }
1360
- [data-prefers-color='light'] .container .tbody {
1361
- overflow: auto;
1464
+ [data-prefers-color='light'] .container .tbodyContainer .tbody {
1362
1465
  padding-top: 5px;
1363
1466
  margin-top: 19px;
1364
1467
  }
1365
- [data-prefers-color='light'] .container .tbody .tr {
1468
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr {
1366
1469
  padding-left: 6px;
1367
1470
  width: 100%;
1368
1471
  min-height: 32px;
@@ -1371,7 +1474,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1371
1474
  position: relative;
1372
1475
  border-radius: 6px;
1373
1476
  }
1374
- [data-prefers-color='light'] .container .tbody .tr::before {
1477
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr::before {
1375
1478
  background-color: rgba(25, 37, 71, 0.43);
1376
1479
  content: '';
1377
1480
  position: absolute;
@@ -1388,7 +1491,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1388
1491
  border-image-repeat: stretch stretch;
1389
1492
  border-radius: 6px;
1390
1493
  }
1391
- [data-prefers-color='light'] .container .tbody .tr.active::before {
1494
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active::before {
1392
1495
  background-color: rgba(140, 75, 102, 0.43);
1393
1496
  border-width: 30px 20px 4px 4px;
1394
1497
  border-style: solid;
@@ -1399,7 +1502,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1399
1502
  border-image-repeat: stretch stretch;
1400
1503
  border-radius: 6px;
1401
1504
  }
1402
- [data-prefers-color='light'] .container .tbody .tr.active .td {
1505
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr.active .td {
1403
1506
  flex: 1;
1404
1507
  display: flex;
1405
1508
  align-items: center;
@@ -1408,7 +1511,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1408
1511
  position: relative;
1409
1512
  z-index: 2;
1410
1513
  }
1411
- [data-prefers-color='light'] .container .tbody .tr .td {
1514
+ [data-prefers-color='light'] .container .tbodyContainer .tbody .tr .td {
1412
1515
  flex: 1;
1413
1516
  display: flex;
1414
1517
  align-items: center;
@@ -1432,8 +1535,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1432
1535
  background-color: transparent;
1433
1536
  }
1434
1537
  [data-prefers-color='light'] .w-frame-box-table.container .theader .th {
1435
- background-color: rgba(22, 93, 134, 0.49);
1436
- background: rgba(22, 28, 38, 0.7);
1538
+ background-color: #192335;
1437
1539
  border-top: 1px solid rgba(118, 214, 255, 0.4);
1438
1540
  border-bottom: 1px solid rgba(118, 214, 255, 0.4);
1439
1541
  border-radius: 0px;
@@ -1458,6 +1560,58 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
1458
1560
  [data-prefers-color='light'] .w-frame-box-table.container .tbody .frame .tr::before {
1459
1561
  content: none;
1460
1562
  }
1563
+ [data-prefers-color='light'] .th .fixedLeft,
1564
+ [data-prefers-color='light'] .th .fixedRight {
1565
+ position: -webkit-sticky !important;
1566
+ position: sticky !important;
1567
+ z-index: 4 !important;
1568
+ }
1569
+ [data-prefers-color='light'] .th .fixedLeft.td,
1570
+ [data-prefers-color='light'] .th .fixedRight.td {
1571
+ background: #192235;
1572
+ transition: all 0.3s;
1573
+ }
1574
+ [data-prefers-color='light'] .tr .fixedLeft,
1575
+ [data-prefers-color='light'] .tr .fixedRight {
1576
+ position: -webkit-sticky !important;
1577
+ position: sticky !important;
1578
+ z-index: 3 !important;
1579
+ }
1580
+ [data-prefers-color='light'] .tr .fixedLeft.td,
1581
+ [data-prefers-color='light'] .tr .fixedRight.td {
1582
+ background: #233b62;
1583
+ transition: all 0.3s;
1584
+ }
1585
+ [data-prefers-color='light'] .fixedRight {
1586
+ position: -webkit-sticky !important;
1587
+ position: sticky !important;
1588
+ z-index: 3 !important;
1589
+ }
1590
+ [data-prefers-color='light'] .fixedRight.td:after {
1591
+ box-shadow: inset -10px 0 8px -8px #00000026;
1592
+ position: absolute;
1593
+ top: 0;
1594
+ bottom: -1px;
1595
+ left: 0;
1596
+ width: 30px;
1597
+ transform: translate(-100%);
1598
+ transition: box-shadow 0.3s;
1599
+ content: '';
1600
+ pointer-events: none;
1601
+ }
1602
+ [data-prefers-color='light'] .fixedLeft .th.td:after,
1603
+ [data-prefers-color='light'] .fixedLeft .tr.td:after {
1604
+ box-shadow: inset -10px 0 8px -8px #00000026;
1605
+ position: absolute;
1606
+ top: 0;
1607
+ right: 0;
1608
+ bottom: -1px;
1609
+ width: 30px;
1610
+ transform: translate(100%);
1611
+ transition: box-shadow 0.3s;
1612
+ content: '';
1613
+ pointer-events: none;
1614
+ }
1461
1615
  [data-prefers-color='light'] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
1462
1616
  position: relative;
1463
1617
  background-color: #f4f4f4;
package/dist/index.esm.js CHANGED
@@ -4,7 +4,7 @@ import 'antd/es/dropdown/style';
4
4
  import _Dropdown from 'antd/es/dropdown';
5
5
  import 'antd/es/menu/style';
6
6
  import _Menu from 'antd/es/menu';
7
- import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
7
+ import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef } from 'react';
8
8
  import { createFromIconfontCN, SearchOutlined, ReloadOutlined, CloseCircleOutlined, PlusOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
9
9
  import 'antd/es/input/style';
10
10
  import _Input from 'antd/es/input';
@@ -7966,7 +7966,7 @@ var WForm$1 = /*#__PURE__*/React.forwardRef(WForm);
7966
7966
 
7967
7967
  var _excluded$7 = ["columns", "dataSource", "request", "onLoad", "params", "onSubmit", "rowKey", "onRow", "className", "rowClassName", "rowSelection", "style", "tbodyStyle", "thStyle", "border", "scroll", "pagination", "search", "frameBoxTable", "frameBoxDirection", "formRef", "none"];
7968
7968
  function Table(_ref) {
7969
- var _formSearchRef$curren4, _classnames2;
7969
+ var _formSearchRef$curren4, _classnames2, _columns$, _columns$2;
7970
7970
 
7971
7971
  var columns = _ref.columns,
7972
7972
  tableList = _ref.dataSource,
@@ -8079,6 +8079,22 @@ function Table(_ref) {
8079
8079
  return !c.hideInTable;
8080
8080
  });
8081
8081
  }, [columns]);
8082
+
8083
+ var calcWidth = function calcWidth(columns) {
8084
+ return columns.reduce(function (pre, cur) {
8085
+ var width = cur.width;
8086
+
8087
+ if (width) {
8088
+ return pre + width;
8089
+ }
8090
+
8091
+ return pre;
8092
+ }, 0);
8093
+ };
8094
+
8095
+ var showColumns = columns.filter(function (c) {
8096
+ return !c.hideInTable;
8097
+ });
8082
8098
  var renderTh = useMemo(function () {
8083
8099
  var renderThFc = function renderThFc(columns, parentHeight, isChild) {
8084
8100
  var showColumns = columns.filter(function (c) {
@@ -8116,13 +8132,17 @@ function Table(_ref) {
8116
8132
  } else {
8117
8133
  return /*#__PURE__*/React.createElement("div", {
8118
8134
  key: c.dataIndex,
8119
- style: {
8135
+ style: _objectSpread2({
8120
8136
  width: c.width + 'px',
8121
8137
  flex: c.width ? '0 1 auto' : '1',
8122
8138
  height: !c.children ? '100%' : '32px',
8123
8139
  borderRight: index != showColumns.length - 1 && filterColumns.length !== showColumns.length ? '1px solid #3b5173' : 'none'
8124
- },
8125
- className: "td"
8140
+ }, c.fixed == 'left' ? {
8141
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8142
+ } : c.fixed == 'right' ? {
8143
+ right: calcWidth(showColumns.slice(index + 1))
8144
+ } : {}),
8145
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '')
8126
8146
  }, c.title);
8127
8147
  }
8128
8148
  });
@@ -8164,12 +8184,16 @@ function Table(_ref) {
8164
8184
  placement: "top",
8165
8185
  title: record[c.dataIndex]
8166
8186
  }, /*#__PURE__*/React.createElement("div", {
8167
- className: 'td' + (c.ellipsis ? ' ellipsis' : ''),
8168
- style: {
8187
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '', " ").concat(c.ellipsis ? ' ellipsis' : ''),
8188
+ style: _objectSpread2({
8169
8189
  width: c.width + 'px',
8170
8190
  flex: c.width ? '0 1 auto' : '1',
8171
8191
  overflow: 'hidden'
8172
- }
8192
+ }, c.fixed == 'left' ? {
8193
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8194
+ } : c.fixed == 'right' ? {
8195
+ right: calcWidth(showColumns.slice(index + 1))
8196
+ } : {})
8173
8197
  }, /*#__PURE__*/React.createElement("div", {
8174
8198
  style: {
8175
8199
  width: '100%',
@@ -8185,12 +8209,16 @@ function Table(_ref) {
8185
8209
 
8186
8210
  return /*#__PURE__*/React.createElement("div", {
8187
8211
  key: c.dataIndex,
8188
- className: 'td' + (c.ellipsis ? ' ellipsis' : ''),
8189
- style: {
8212
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '', " ").concat(c.ellipsis ? ' ellipsis' : ''),
8213
+ style: _objectSpread2({
8190
8214
  width: c.width + 'px',
8191
8215
  flex: c.width ? '0 1 auto' : '1',
8192
8216
  overflow: 'hidden'
8193
- },
8217
+ }, c.fixed == 'left' ? {
8218
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8219
+ } : c.fixed == 'right' ? {
8220
+ right: calcWidth(showColumns.slice(index + 1))
8221
+ } : {}),
8194
8222
  title: record[c.dataIndex]
8195
8223
  }, c.ellipsis ? /*#__PURE__*/React.createElement("div", {
8196
8224
  style: {
@@ -8221,11 +8249,13 @@ function Table(_ref) {
8221
8249
  tr: true
8222
8250
  }, typeof rowClassName === 'function' ? rowClassName(record, index) : '', true))
8223
8251
  }, typeof onRow === 'function' ? onRow(record, index) : {}), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'checkbox' && /*#__PURE__*/React.createElement("div", {
8224
- style: {
8252
+ style: _objectSpread2({
8225
8253
  width: '50px',
8226
8254
  flex: '0 1 auto'
8227
- },
8228
- className: "td"
8255
+ }, showColumns[0].fixed == 'left' ? {
8256
+ left: 6
8257
+ } : {}),
8258
+ className: "td ".concat(showColumns[0].fixed == 'left' ? 'fixedLeft' : '')
8229
8259
  }, /*#__PURE__*/React.createElement(Index$3, {
8230
8260
  checked: (_ref2 = [].concat(_toConsumableArray((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []), _toConsumableArray(selectedRowKeys))) === null || _ref2 === void 0 ? void 0 : _ref2.includes(key),
8231
8261
  onClick: function onClick(e) {
@@ -8259,11 +8289,13 @@ function Table(_ref) {
8259
8289
  });
8260
8290
  }
8261
8291
  })), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'radio' && /*#__PURE__*/React.createElement("div", {
8262
- style: {
8292
+ style: _objectSpread2({
8263
8293
  width: '50px',
8264
8294
  flex: '0 1 auto'
8265
- },
8266
- className: "td"
8295
+ }, showColumns[0].fixed == 'left' ? {
8296
+ left: 6
8297
+ } : {}),
8298
+ className: "td ".concat(showColumns[0].fixed == 'left' ? 'fixedLeft' : '')
8267
8299
  }, /*#__PURE__*/React.createElement(Index$2, {
8268
8300
  checked: (_ref3 = [].concat(_toConsumableArray((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []), _toConsumableArray(selectedRowKeys))) === null || _ref3 === void 0 ? void 0 : _ref3.includes(key),
8269
8301
  onClick: function onClick(e) {
@@ -8419,20 +8451,27 @@ function Table(_ref) {
8419
8451
  className: classnames((_classnames2 = {
8420
8452
  container: true
8421
8453
  }, _defineProperty(_classnames2, 'w-table', true), _defineProperty(_classnames2, 'w-frame-box-table', frameBoxTable), _defineProperty(_classnames2, className || 'defalut-table', true), _classnames2)),
8422
- style: style
8454
+ style: _objectSpread2(_objectSpread2({}, (scroll === null || scroll === void 0 ? void 0 : scroll.y) ? {
8455
+ height: scroll.y
8456
+ } : {}), style)
8423
8457
  }, /*#__PURE__*/React.createElement("div", {
8424
8458
  className: "theader"
8425
8459
  }, /*#__PURE__*/React.createElement("div", {
8426
8460
  className: "th",
8427
8461
  style: _objectSpread2(_objectSpread2({}, thStyle), {}, {
8428
8462
  height: layerIndex * 32 + 'px'
8429
- })
8463
+ }, (scroll === null || scroll === void 0 ? void 0 : scroll.x) ? {
8464
+ width: scroll.x
8465
+ } : {})
8430
8466
  }, (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'checkbox' && /*#__PURE__*/React.createElement("div", {
8431
- style: {
8467
+ style: _objectSpread2({
8432
8468
  width: '50px',
8433
- flex: '0 1 auto'
8434
- },
8435
- className: "td"
8469
+ flex: '0 1 auto',
8470
+ height: '100%'
8471
+ }, showColumns[0].fixed == 'left' ? {
8472
+ left: 6
8473
+ } : {}),
8474
+ className: "td ".concat(((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.fixed) == 'left' ? 'fixedLeft' : '')
8436
8475
  }, /*#__PURE__*/React.createElement(Index$3, {
8437
8476
  checked: dataSource.every(function (record) {
8438
8477
  return selectedRowKeys.includes(typeof rowKey === 'function' ? record[rowKey(record)] : record[rowKey]);
@@ -8444,15 +8483,23 @@ function Table(_ref) {
8444
8483
  }),
8445
8484
  onChange: onSelectAllChange
8446
8485
  })), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'radio' && /*#__PURE__*/React.createElement("div", {
8447
- style: {
8486
+ style: _objectSpread2({
8448
8487
  width: '50px',
8449
- flex: '0 1 auto'
8450
- },
8451
- className: "td"
8488
+ flex: '0 1 auto',
8489
+ height: '100%'
8490
+ }, showColumns[0].fixed == 'left' ? {
8491
+ left: 6
8492
+ } : {}),
8493
+ className: "td ".concat(((_columns$2 = columns[0]) === null || _columns$2 === void 0 ? void 0 : _columns$2.fixed) == 'left' ? 'fixedLeft' : '')
8452
8494
  }), renderTh)), /*#__PURE__*/React.createElement("div", {
8495
+ className: "tbodyContainer",
8496
+ style: _objectSpread2({}, (scroll === null || scroll === void 0 ? void 0 : scroll.x) ? {
8497
+ width: scroll.x
8498
+ } : {})
8499
+ }, /*#__PURE__*/React.createElement("div", {
8453
8500
  className: "tbody",
8454
8501
  style: _objectSpread2({
8455
- height: (style === null || style === void 0 ? void 0 : style.height) ? "calc(".concat(style.height, " - ").concat(52 + (pagination === false ? 0 : 42), "px)") : '200px'
8502
+ height: (style === null || style === void 0 ? void 0 : style.height) || (scroll === null || scroll === void 0 ? void 0 : scroll.y) ? "calc(".concat(style === null || style === void 0 ? void 0 : style.height, " - ").concat(52 + (pagination === false ? 0 : 42), "px)") : '200px'
8456
8503
  }, tbodyStyle)
8457
8504
  }, dataSource.length > 0 ? dataSource.map(function (record, index) {
8458
8505
  var key = typeof rowKey === 'function' ? record[rowKey(record)] : record[rowKey];
@@ -8471,12 +8518,12 @@ function Table(_ref) {
8471
8518
  justifyContent: 'center',
8472
8519
  alignItems: 'center'
8473
8520
  }
8474
- }, none || '暂无数据')), _typeof(pagination) === 'object' && /*#__PURE__*/React.createElement(_Pagination, _objectSpread2({
8521
+ }, none || '暂无数据')))), _typeof(pagination) === 'object' && /*#__PURE__*/React.createElement(_Pagination, _objectSpread2({
8475
8522
  style: {
8476
8523
  textAlign: 'right',
8477
8524
  marginTop: '10px'
8478
8525
  }
8479
- }, paginationParams))));
8526
+ }, paginationParams)));
8480
8527
  }
8481
8528
  Table.defaultProps = {
8482
8529
  rowKey: 'key'
@@ -9528,9 +9575,9 @@ var Index$b = function Index(_ref) {
9528
9575
  }, props));
9529
9576
  };
9530
9577
 
9531
- var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
9578
+ var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
9532
9579
 
9533
- var Index$c = function Index(_ref) {
9580
+ var Index$c = function Index(_ref, ref) {
9534
9581
  var _classNames;
9535
9582
 
9536
9583
  var title = _ref.title,
@@ -9538,8 +9585,20 @@ var Index$c = function Index(_ref) {
9538
9585
  className = _ref$className === void 0 ? 'default' : _ref$className,
9539
9586
  headerTail = _ref.headerTail,
9540
9587
  headerCenter = _ref.headerCenter,
9588
+ sliderTabs = _ref.sliderTabs,
9541
9589
  props = _objectWithoutProperties(_ref, _excluded$d);
9542
9590
 
9591
+ useImperativeHandle(ref, function () {
9592
+ return {
9593
+ activeTab: activeTab
9594
+ };
9595
+ });
9596
+
9597
+ var _useState = useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
9598
+ _useState2 = _slicedToArray(_useState, 2),
9599
+ activeTab = _useState2[0],
9600
+ setActiveTab = _useState2[1];
9601
+
9543
9602
  return /*#__PURE__*/React.createElement("div", _objectSpread2({
9544
9603
  className: classnames((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
9545
9604
  }, props), /*#__PURE__*/React.createElement("div", {
@@ -9554,10 +9613,20 @@ var Index$c = function Index(_ref) {
9554
9613
  className: "dot"
9555
9614
  }), title), headerCenter, headerTail), /*#__PURE__*/React.createElement("div", {
9556
9615
  className: "body"
9557
- }, props.children))));
9616
+ }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
9617
+ className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left ".concat(sliderTabs.className || '') : "right ".concat(sliderTabs.className || ''))
9618
+ }, sliderTabs.tabs.map(function (item, index) {
9619
+ return /*#__PURE__*/React.createElement("div", {
9620
+ className: "tab ".concat(index == activeTab ? 'active' : '', " ").concat(sliderTabs.tabClassName || '', " ").concat(sliderTabs.activeTabClassName || '')
9621
+ }, /*#__PURE__*/React.createElement("span", {
9622
+ onClick: function onClick() {
9623
+ return setActiveTab(index);
9624
+ }
9625
+ }, item));
9626
+ }))));
9558
9627
  };
9559
9628
 
9560
- Index$c.defaultProps = {};
9629
+ var index$1 = /*#__PURE__*/forwardRef(Index$c);
9561
9630
 
9562
9631
  var controlShow = function controlShow(f1, f2, value, timer) {
9563
9632
  f1(value);
@@ -10723,13 +10792,13 @@ var TabelCard = function TabelCard(props, ref) {
10723
10792
  return obj;
10724
10793
  }),
10725
10794
  search: false,
10726
- pagination: pagination || {
10795
+ pagination: pagination != undefined ? pagination : {
10727
10796
  pageSize: 20
10728
10797
  }
10729
10798
  }, extraProps)));
10730
10799
  };
10731
10800
 
10732
- var index$1 = /*#__PURE__*/React.forwardRef(TabelCard);
10801
+ var index$2 = /*#__PURE__*/React.forwardRef(TabelCard);
10733
10802
 
10734
10803
  var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
10735
10804
  var _this = this;
@@ -10893,4 +10962,4 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
10893
10962
  this.heartCheck = null;
10894
10963
  });
10895
10964
 
10896
- export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, Index$c as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$1 as TabelCard, Table, Index$6 as TreeSelect, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
10965
+ export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
package/dist/index.js CHANGED
@@ -8001,7 +8001,7 @@ var WForm$1 = /*#__PURE__*/React__default['default'].forwardRef(WForm);
8001
8001
 
8002
8002
  var _excluded$7 = ["columns", "dataSource", "request", "onLoad", "params", "onSubmit", "rowKey", "onRow", "className", "rowClassName", "rowSelection", "style", "tbodyStyle", "thStyle", "border", "scroll", "pagination", "search", "frameBoxTable", "frameBoxDirection", "formRef", "none"];
8003
8003
  function Table(_ref) {
8004
- var _formSearchRef$curren4, _classnames2;
8004
+ var _formSearchRef$curren4, _classnames2, _columns$, _columns$2;
8005
8005
 
8006
8006
  var columns = _ref.columns,
8007
8007
  tableList = _ref.dataSource,
@@ -8114,6 +8114,22 @@ function Table(_ref) {
8114
8114
  return !c.hideInTable;
8115
8115
  });
8116
8116
  }, [columns]);
8117
+
8118
+ var calcWidth = function calcWidth(columns) {
8119
+ return columns.reduce(function (pre, cur) {
8120
+ var width = cur.width;
8121
+
8122
+ if (width) {
8123
+ return pre + width;
8124
+ }
8125
+
8126
+ return pre;
8127
+ }, 0);
8128
+ };
8129
+
8130
+ var showColumns = columns.filter(function (c) {
8131
+ return !c.hideInTable;
8132
+ });
8117
8133
  var renderTh = React.useMemo(function () {
8118
8134
  var renderThFc = function renderThFc(columns, parentHeight, isChild) {
8119
8135
  var showColumns = columns.filter(function (c) {
@@ -8151,13 +8167,17 @@ function Table(_ref) {
8151
8167
  } else {
8152
8168
  return /*#__PURE__*/React__default['default'].createElement("div", {
8153
8169
  key: c.dataIndex,
8154
- style: {
8170
+ style: _objectSpread2({
8155
8171
  width: c.width + 'px',
8156
8172
  flex: c.width ? '0 1 auto' : '1',
8157
8173
  height: !c.children ? '100%' : '32px',
8158
8174
  borderRight: index != showColumns.length - 1 && filterColumns.length !== showColumns.length ? '1px solid #3b5173' : 'none'
8159
- },
8160
- className: "td"
8175
+ }, c.fixed == 'left' ? {
8176
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8177
+ } : c.fixed == 'right' ? {
8178
+ right: calcWidth(showColumns.slice(index + 1))
8179
+ } : {}),
8180
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '')
8161
8181
  }, c.title);
8162
8182
  }
8163
8183
  });
@@ -8199,12 +8219,16 @@ function Table(_ref) {
8199
8219
  placement: "top",
8200
8220
  title: record[c.dataIndex]
8201
8221
  }, /*#__PURE__*/React__default['default'].createElement("div", {
8202
- className: 'td' + (c.ellipsis ? ' ellipsis' : ''),
8203
- style: {
8222
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '', " ").concat(c.ellipsis ? ' ellipsis' : ''),
8223
+ style: _objectSpread2({
8204
8224
  width: c.width + 'px',
8205
8225
  flex: c.width ? '0 1 auto' : '1',
8206
8226
  overflow: 'hidden'
8207
- }
8227
+ }, c.fixed == 'left' ? {
8228
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8229
+ } : c.fixed == 'right' ? {
8230
+ right: calcWidth(showColumns.slice(index + 1))
8231
+ } : {})
8208
8232
  }, /*#__PURE__*/React__default['default'].createElement("div", {
8209
8233
  style: {
8210
8234
  width: '100%',
@@ -8220,12 +8244,16 @@ function Table(_ref) {
8220
8244
 
8221
8245
  return /*#__PURE__*/React__default['default'].createElement("div", {
8222
8246
  key: c.dataIndex,
8223
- className: 'td' + (c.ellipsis ? ' ellipsis' : ''),
8224
- style: {
8247
+ className: "td ".concat(c.fixed == 'left' ? 'fixedLeft' : c.fixed == 'right' ? 'fixedRight' : '', " ").concat(c.ellipsis ? ' ellipsis' : ''),
8248
+ style: _objectSpread2({
8225
8249
  width: c.width + 'px',
8226
8250
  flex: c.width ? '0 1 auto' : '1',
8227
8251
  overflow: 'hidden'
8228
- },
8252
+ }, c.fixed == 'left' ? {
8253
+ left: ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) ? 56 : 6) + calcWidth(showColumns.slice(0, index - 2 > 0 ? index - 1 : 0))
8254
+ } : c.fixed == 'right' ? {
8255
+ right: calcWidth(showColumns.slice(index + 1))
8256
+ } : {}),
8229
8257
  title: record[c.dataIndex]
8230
8258
  }, c.ellipsis ? /*#__PURE__*/React__default['default'].createElement("div", {
8231
8259
  style: {
@@ -8256,11 +8284,13 @@ function Table(_ref) {
8256
8284
  tr: true
8257
8285
  }, typeof rowClassName === 'function' ? rowClassName(record, index) : '', true))
8258
8286
  }, typeof onRow === 'function' ? onRow(record, index) : {}), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'checkbox' && /*#__PURE__*/React__default['default'].createElement("div", {
8259
- style: {
8287
+ style: _objectSpread2({
8260
8288
  width: '50px',
8261
8289
  flex: '0 1 auto'
8262
- },
8263
- className: "td"
8290
+ }, showColumns[0].fixed == 'left' ? {
8291
+ left: 6
8292
+ } : {}),
8293
+ className: "td ".concat(showColumns[0].fixed == 'left' ? 'fixedLeft' : '')
8264
8294
  }, /*#__PURE__*/React__default['default'].createElement(Index$3, {
8265
8295
  checked: (_ref2 = [].concat(_toConsumableArray((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []), _toConsumableArray(selectedRowKeys))) === null || _ref2 === void 0 ? void 0 : _ref2.includes(key),
8266
8296
  onClick: function onClick(e) {
@@ -8294,11 +8324,13 @@ function Table(_ref) {
8294
8324
  });
8295
8325
  }
8296
8326
  })), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'radio' && /*#__PURE__*/React__default['default'].createElement("div", {
8297
- style: {
8327
+ style: _objectSpread2({
8298
8328
  width: '50px',
8299
8329
  flex: '0 1 auto'
8300
- },
8301
- className: "td"
8330
+ }, showColumns[0].fixed == 'left' ? {
8331
+ left: 6
8332
+ } : {}),
8333
+ className: "td ".concat(showColumns[0].fixed == 'left' ? 'fixedLeft' : '')
8302
8334
  }, /*#__PURE__*/React__default['default'].createElement(Index$2, {
8303
8335
  checked: (_ref3 = [].concat(_toConsumableArray((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []), _toConsumableArray(selectedRowKeys))) === null || _ref3 === void 0 ? void 0 : _ref3.includes(key),
8304
8336
  onClick: function onClick(e) {
@@ -8454,20 +8486,27 @@ function Table(_ref) {
8454
8486
  className: classnames__default['default']((_classnames2 = {
8455
8487
  container: true
8456
8488
  }, _defineProperty(_classnames2, 'w-table', true), _defineProperty(_classnames2, 'w-frame-box-table', frameBoxTable), _defineProperty(_classnames2, className || 'defalut-table', true), _classnames2)),
8457
- style: style
8489
+ style: _objectSpread2(_objectSpread2({}, (scroll === null || scroll === void 0 ? void 0 : scroll.y) ? {
8490
+ height: scroll.y
8491
+ } : {}), style)
8458
8492
  }, /*#__PURE__*/React__default['default'].createElement("div", {
8459
8493
  className: "theader"
8460
8494
  }, /*#__PURE__*/React__default['default'].createElement("div", {
8461
8495
  className: "th",
8462
8496
  style: _objectSpread2(_objectSpread2({}, thStyle), {}, {
8463
8497
  height: layerIndex * 32 + 'px'
8464
- })
8498
+ }, (scroll === null || scroll === void 0 ? void 0 : scroll.x) ? {
8499
+ width: scroll.x
8500
+ } : {})
8465
8501
  }, (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'checkbox' && /*#__PURE__*/React__default['default'].createElement("div", {
8466
- style: {
8502
+ style: _objectSpread2({
8467
8503
  width: '50px',
8468
- flex: '0 1 auto'
8469
- },
8470
- className: "td"
8504
+ flex: '0 1 auto',
8505
+ height: '100%'
8506
+ }, showColumns[0].fixed == 'left' ? {
8507
+ left: 6
8508
+ } : {}),
8509
+ className: "td ".concat(((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.fixed) == 'left' ? 'fixedLeft' : '')
8471
8510
  }, /*#__PURE__*/React__default['default'].createElement(Index$3, {
8472
8511
  checked: dataSource.every(function (record) {
8473
8512
  return selectedRowKeys.includes(typeof rowKey === 'function' ? record[rowKey(record)] : record[rowKey]);
@@ -8479,15 +8518,23 @@ function Table(_ref) {
8479
8518
  }),
8480
8519
  onChange: onSelectAllChange
8481
8520
  })), (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) === 'radio' && /*#__PURE__*/React__default['default'].createElement("div", {
8482
- style: {
8521
+ style: _objectSpread2({
8483
8522
  width: '50px',
8484
- flex: '0 1 auto'
8485
- },
8486
- className: "td"
8523
+ flex: '0 1 auto',
8524
+ height: '100%'
8525
+ }, showColumns[0].fixed == 'left' ? {
8526
+ left: 6
8527
+ } : {}),
8528
+ className: "td ".concat(((_columns$2 = columns[0]) === null || _columns$2 === void 0 ? void 0 : _columns$2.fixed) == 'left' ? 'fixedLeft' : '')
8487
8529
  }), renderTh)), /*#__PURE__*/React__default['default'].createElement("div", {
8530
+ className: "tbodyContainer",
8531
+ style: _objectSpread2({}, (scroll === null || scroll === void 0 ? void 0 : scroll.x) ? {
8532
+ width: scroll.x
8533
+ } : {})
8534
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
8488
8535
  className: "tbody",
8489
8536
  style: _objectSpread2({
8490
- height: (style === null || style === void 0 ? void 0 : style.height) ? "calc(".concat(style.height, " - ").concat(52 + (pagination === false ? 0 : 42), "px)") : '200px'
8537
+ height: (style === null || style === void 0 ? void 0 : style.height) || (scroll === null || scroll === void 0 ? void 0 : scroll.y) ? "calc(".concat(style === null || style === void 0 ? void 0 : style.height, " - ").concat(52 + (pagination === false ? 0 : 42), "px)") : '200px'
8491
8538
  }, tbodyStyle)
8492
8539
  }, dataSource.length > 0 ? dataSource.map(function (record, index) {
8493
8540
  var key = typeof rowKey === 'function' ? record[rowKey(record)] : record[rowKey];
@@ -8506,12 +8553,12 @@ function Table(_ref) {
8506
8553
  justifyContent: 'center',
8507
8554
  alignItems: 'center'
8508
8555
  }
8509
- }, none || '暂无数据')), _typeof(pagination) === 'object' && /*#__PURE__*/React__default['default'].createElement(_Pagination__default['default'], _objectSpread2({
8556
+ }, none || '暂无数据')))), _typeof(pagination) === 'object' && /*#__PURE__*/React__default['default'].createElement(_Pagination__default['default'], _objectSpread2({
8510
8557
  style: {
8511
8558
  textAlign: 'right',
8512
8559
  marginTop: '10px'
8513
8560
  }
8514
- }, paginationParams))));
8561
+ }, paginationParams)));
8515
8562
  }
8516
8563
  Table.defaultProps = {
8517
8564
  rowKey: 'key'
@@ -9563,9 +9610,9 @@ var Index$b = function Index(_ref) {
9563
9610
  }, props));
9564
9611
  };
9565
9612
 
9566
- var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
9613
+ var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
9567
9614
 
9568
- var Index$c = function Index(_ref) {
9615
+ var Index$c = function Index(_ref, ref) {
9569
9616
  var _classNames;
9570
9617
 
9571
9618
  var title = _ref.title,
@@ -9573,8 +9620,20 @@ var Index$c = function Index(_ref) {
9573
9620
  className = _ref$className === void 0 ? 'default' : _ref$className,
9574
9621
  headerTail = _ref.headerTail,
9575
9622
  headerCenter = _ref.headerCenter,
9623
+ sliderTabs = _ref.sliderTabs,
9576
9624
  props = _objectWithoutProperties(_ref, _excluded$d);
9577
9625
 
9626
+ React.useImperativeHandle(ref, function () {
9627
+ return {
9628
+ activeTab: activeTab
9629
+ };
9630
+ });
9631
+
9632
+ var _useState = React.useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
9633
+ _useState2 = _slicedToArray(_useState, 2),
9634
+ activeTab = _useState2[0],
9635
+ setActiveTab = _useState2[1];
9636
+
9578
9637
  return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
9579
9638
  className: classnames__default['default']((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
9580
9639
  }, props), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -9589,10 +9648,20 @@ var Index$c = function Index(_ref) {
9589
9648
  className: "dot"
9590
9649
  }), title), headerCenter, headerTail), /*#__PURE__*/React__default['default'].createElement("div", {
9591
9650
  className: "body"
9592
- }, props.children))));
9651
+ }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React__default['default'].createElement("div", {
9652
+ className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left ".concat(sliderTabs.className || '') : "right ".concat(sliderTabs.className || ''))
9653
+ }, sliderTabs.tabs.map(function (item, index) {
9654
+ return /*#__PURE__*/React__default['default'].createElement("div", {
9655
+ className: "tab ".concat(index == activeTab ? 'active' : '', " ").concat(sliderTabs.tabClassName || '', " ").concat(sliderTabs.activeTabClassName || '')
9656
+ }, /*#__PURE__*/React__default['default'].createElement("span", {
9657
+ onClick: function onClick() {
9658
+ return setActiveTab(index);
9659
+ }
9660
+ }, item));
9661
+ }))));
9593
9662
  };
9594
9663
 
9595
- Index$c.defaultProps = {};
9664
+ var index$1 = /*#__PURE__*/React.forwardRef(Index$c);
9596
9665
 
9597
9666
  var controlShow = function controlShow(f1, f2, value, timer) {
9598
9667
  f1(value);
@@ -10758,13 +10827,13 @@ var TabelCard = function TabelCard(props, ref) {
10758
10827
  return obj;
10759
10828
  }),
10760
10829
  search: false,
10761
- pagination: pagination || {
10830
+ pagination: pagination != undefined ? pagination : {
10762
10831
  pageSize: 20
10763
10832
  }
10764
10833
  }, extraProps)));
10765
10834
  };
10766
10835
 
10767
- var index$1 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
10836
+ var index$2 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
10768
10837
 
10769
10838
  var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
10770
10839
  var _this = this;
@@ -10931,7 +11000,7 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
10931
11000
  exports.AutoScroll = Index$9;
10932
11001
  exports.Breadcrumb = Index$b;
10933
11002
  exports.Button = WButton;
10934
- exports.Card = Index$c;
11003
+ exports.Card = index$1;
10935
11004
  exports.Cascader = WCascader;
10936
11005
  exports.Checkbox = Index$3;
10937
11006
  exports.CountUp = Index$8;
@@ -10948,7 +11017,7 @@ exports.Radio = Index$2;
10948
11017
  exports.Select = Select;
10949
11018
  exports.Swiper = Index$a;
10950
11019
  exports.Switch = WSwitch;
10951
- exports.TabelCard = index$1;
11020
+ exports.TabelCard = index$2;
10952
11021
  exports.Table = Table;
10953
11022
  exports.TreeSelect = Index$6;
10954
11023
  exports.WDatePicker = Index$5;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": false,
3
3
  "name": "wargerm",
4
- "version": "0.4.7",
4
+ "version": "0.4.10",
5
5
  "scripts": {
6
6
  "dev": "dumi dev",
7
7
  "docs:build": "dumi build",
@@ -76,4 +76,4 @@
76
76
  "react": "^16.12.0",
77
77
  "yorkie": "^2.0.0"
78
78
  }
79
- }
79
+ }