@autobest-ui/components 2.0.4 → 2.0.5-alpha.0

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.
@@ -44,7 +44,7 @@ var __assign = this && this.__assign || function () {
44
44
 
45
45
  import React from 'react';
46
46
  import classNames from 'classnames';
47
- import { addEventListener, isEmptyArray, throttleWithRAF } from '@autobest-ui/utils';
47
+ import { addEventListener, getScrollBarSize, isEmptyArray, throttleWithRAF } from '@autobest-ui/utils';
48
48
  import LoadingContainer from '../loading-container';
49
49
  import HeaderRow from './header/HeaderRow';
50
50
  import Body from './body';
@@ -60,6 +60,7 @@ function (_super) {
60
60
  _this.prefixCls = 'ab-table';
61
61
  _this.headerRef = /*#__PURE__*/React.createRef();
62
62
  _this.bodyRef = /*#__PURE__*/React.createRef();
63
+ _this.scrollBarThAdded = false;
63
64
  _this.defaultRowSelection = {
64
65
  selectAllVisible: true,
65
66
  selectAllChecked: false,
@@ -83,15 +84,59 @@ function (_super) {
83
84
  });
84
85
  };
85
86
 
86
- _this.addScrollListener = function () {
87
+ _this.headerScroll = throttleWithRAF(function () {
88
+ _this.headerRef.current.scrollLeft = _this.bodyRef.current.scrollLeft;
89
+ });
90
+
91
+ _this.addListener = function () {
87
92
  var fixedHeader = _this.props.fixedHeader;
88
- var headerRef = _this.headerRef.current;
89
93
  var bodyRef = _this.bodyRef.current;
90
94
 
91
- if (fixedHeader && headerRef && bodyRef) {
92
- _this.scrollHandler = addEventListener(bodyRef, 'scroll', throttleWithRAF(function () {
93
- headerRef.scrollLeft = bodyRef.scrollLeft;
94
- }));
95
+ if (fixedHeader && _this.headerRef.current && bodyRef) {
96
+ _this.scrollHandler = addEventListener(bodyRef, 'scroll', _this.headerScroll);
97
+ _this.resizeObserver = new ResizeObserver(function (entries) {
98
+ for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
99
+ var entry = entries_1[_i];
100
+ var ele = entry.target;
101
+
102
+ if (entry.contentBoxSize) {
103
+ var headerRef = _this.headerRef.current;
104
+
105
+ if (!headerRef) {
106
+ return;
107
+ }
108
+
109
+ if (ele.scrollHeight > ele.clientHeight) {
110
+ if (_this.scrollBarThAdded) {
111
+ return;
112
+ }
113
+
114
+ var scrollBarTh = document.createElement('th'); // 显示滚动条的情况下,需要在thead追加一个与滚动条等宽的th
115
+
116
+ scrollBarTh.setAttribute('style', "width: ".concat(getScrollBarSize(), "px; padding: 0"));
117
+ var tHeader = headerRef.querySelector('thead > tr');
118
+
119
+ if (tHeader) {
120
+ tHeader.appendChild(scrollBarTh);
121
+ _this.scrollBarThAdded = true;
122
+ }
123
+
124
+ return;
125
+ }
126
+
127
+ if (_this.scrollBarThAdded) {
128
+ // 删除thead追加了的与滚动条等宽的th
129
+ var scrollBarTh = headerRef.querySelector('thead > tr > th:last-child');
130
+
131
+ if (scrollBarTh) {
132
+ scrollBarTh.parentNode.removeChild(scrollBarTh);
133
+ }
134
+ }
135
+ }
136
+ }
137
+ });
138
+
139
+ _this.resizeObserver.observe(bodyRef);
95
140
  }
96
141
  };
97
142
 
@@ -103,8 +148,8 @@ function (_super) {
103
148
  var getRowKey = _this.getRowKey;
104
149
  var dataSource = _this.props.dataSource;
105
150
  return selectedKeys.map(function (key) {
106
- return dataSource.find(function (item) {
107
- return getRowKey(item) === key;
151
+ return dataSource.find(function (item, index) {
152
+ return getRowKey(item, index) === key;
108
153
  });
109
154
  });
110
155
  };
@@ -163,10 +208,11 @@ function (_super) {
163
208
  * 点击某一行的checkbook
164
209
  * @param visible
165
210
  * @param rowData
211
+ * @param rowIndex
166
212
  */
167
213
 
168
214
 
169
- _this.onSelect = function (visible, rowData) {
215
+ _this.onSelect = function (visible, rowData, rowIndex) {
170
216
  var getRowKey = _this.getRowKey;
171
217
  var _a = _this.props,
172
218
  dataSource = _a.dataSource,
@@ -174,7 +220,7 @@ function (_super) {
174
220
  var _b = _this.state,
175
221
  selectedRowKeys = _b.selectedRowKeys,
176
222
  selectedRows = _b.selectedRows;
177
- var newRowKey = getRowKey(rowData);
223
+ var newRowKey = getRowKey(rowData, rowIndex);
178
224
  var newSelectedRowKeys = [];
179
225
  var newSelectedRows = [];
180
226
 
@@ -189,8 +235,8 @@ function (_super) {
189
235
  return previousValue;
190
236
  }
191
237
 
192
- var data = dataSource.find(function (item) {
193
- return getRowKey(item) === currentValue;
238
+ var data = dataSource.find(function (item, index) {
239
+ return getRowKey(item, index) === currentValue;
194
240
  });
195
241
 
196
242
  if (data) {
@@ -266,7 +312,7 @@ function (_super) {
266
312
  columns = _a.columns,
267
313
  rowSelection = _a.rowSelection;
268
314
  return /*#__PURE__*/React.createElement("colgroup", null, rowSelection ? /*#__PURE__*/React.createElement("col", {
269
- width: 32
315
+ className: "".concat(_this.prefixCls, "-checkbox-col")
270
316
  }) : null, columns.map(function (item) {
271
317
  var width = item.width;
272
318
 
@@ -313,7 +359,8 @@ function (_super) {
313
359
  columns = _a.columns,
314
360
  dataSource = _a.dataSource,
315
361
  expandable = _a.expandable,
316
- onRowClick = _a.onRowClick;
362
+ onRowClick = _a.onRowClick,
363
+ rowClassName = _a.rowClassName;
317
364
  var _b = _this.state,
318
365
  rowSelection = _b.rowSelection,
319
366
  selectedRowKeys = _b.selectedRowKeys;
@@ -325,7 +372,8 @@ function (_super) {
325
372
  expandable: expandable,
326
373
  rowSelection: rowSelection,
327
374
  selectedRowKeys: selectedRowKeys,
328
- onRowClick: onRowClick
375
+ onRowClick: onRowClick,
376
+ getRowClassName: rowClassName
329
377
  }));
330
378
  };
331
379
 
@@ -344,7 +392,7 @@ function (_super) {
344
392
  }
345
393
 
346
394
  Table.prototype.componentDidMount = function () {
347
- this.addScrollListener();
395
+ this.addListener();
348
396
  };
349
397
 
350
398
  Table.prototype.componentWillUnmount = function () {
@@ -352,6 +400,10 @@ function (_super) {
352
400
  this.scrollHandler.remove();
353
401
  this.scrollHandler = null;
354
402
  }
403
+
404
+ if (this.resizeObserver && this.bodyRef.current) {
405
+ this.resizeObserver.unobserve(this.bodyRef.current);
406
+ }
355
407
  };
356
408
 
357
409
  Table.prototype.render = function () {
@@ -369,25 +421,34 @@ function (_super) {
369
421
  }, /*#__PURE__*/React.createElement("div", {
370
422
  className: "".concat(cls, "-header"),
371
423
  ref: this.headerRef
372
- }, /*#__PURE__*/React.createElement("table", null, this.renderColgroup(), this.renderHeader())), /*#__PURE__*/React.createElement("div", {
424
+ }, /*#__PURE__*/React.createElement("table", {
425
+ className: "".concat(cls, "-table")
426
+ }, this.renderColgroup(), this.renderHeader())), /*#__PURE__*/React.createElement("div", {
373
427
  className: "".concat(cls, "-body"),
374
428
  style: {
375
429
  maxHeight: maxHeight
376
430
  },
377
431
  ref: this.bodyRef
378
- }, /*#__PURE__*/React.createElement("table", null, this.renderColgroup(), this.renderBody())));
432
+ }, /*#__PURE__*/React.createElement("table", {
433
+ className: "".concat(cls, "-table")
434
+ }, this.renderColgroup(), this.renderBody())));
379
435
  }
380
436
 
381
437
  return /*#__PURE__*/React.createElement(LoadingContainer, {
382
438
  loading: loading,
383
439
  className: classNames(className, cls)
384
- }, /*#__PURE__*/React.createElement("table", null, this.renderColgroup(), this.renderHeader(), this.renderBody()));
440
+ }, /*#__PURE__*/React.createElement("table", {
441
+ className: "".concat(cls, "-table")
442
+ }, this.renderColgroup(), this.renderHeader(), this.renderBody()));
385
443
  };
386
444
 
387
445
  Table.defaultProps = {
388
446
  fixedHeader: false,
389
447
  loading: false,
390
- rowKey: 'key'
448
+ rowKey: 'key',
449
+ rowClassName: function rowClassName() {
450
+ return '';
451
+ }
391
452
  };
392
453
  return Table;
393
454
  }(React.Component);
@@ -1 +1 @@
1
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
1
+ .ab-table{overflow-x:auto}.ab-table-table{border-spacing:0;width:100%;table-layout:fixed;border-collapse:collapse}.ab-table-header{overflow:hidden}.ab-table-body{overflow:auto}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-checkbox-col{width:.32rem}.ab-table-point{cursor:pointer}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}
@@ -3,22 +3,19 @@ $namespace: ab-table;
3
3
  .#{$namespace} {
4
4
  overflow-x: auto;
5
5
 
6
- table {
6
+ &-table {
7
7
  border-spacing: 0;
8
8
  width: 100%;
9
9
  table-layout: fixed;
10
+ border-collapse: collapse;
10
11
  }
11
12
 
12
13
  &-header {
13
14
  overflow: hidden;
14
-
15
- table {
16
- width: calc(100% - .17rem);
17
- }
18
15
  }
19
16
 
20
17
  &-body {
21
- overflow: auto scroll;
18
+ overflow: auto;
22
19
  }
23
20
 
24
21
  &-checkbox {
@@ -26,14 +23,18 @@ $namespace: ab-table;
26
23
  text-align: center;
27
24
  }
28
25
 
26
+ &-checkbox-col {
27
+ width: .32rem;
28
+ }
29
+
30
+ &-point {
31
+ cursor: pointer;
32
+ }
33
+
29
34
  &-title {
30
35
  display: flex;
31
36
  align-items: center;
32
37
  text-align: left;
33
-
34
- &.#{$namespace}-point {
35
- cursor: pointer;
36
- }
37
38
  }
38
39
 
39
40
  &-arrow {
@@ -41,14 +42,4 @@ $namespace: ab-table;
41
42
  color: #fff;
42
43
  padding: 0 .05rem;
43
44
  }
44
- }
45
-
46
- @media only screen and (max-width: 767px) {
47
- .#{$namespace} {
48
- &-header {
49
- table {
50
- width: 100%;
51
- }
52
- }
53
- }
54
45
  }
@@ -1,4 +1,5 @@
1
1
  import React, { ReactElement } from 'react';
2
+ import { AddListenerEventHandler } from '@autobest-ui/utils';
2
3
  import { TriggerProps } from '../trigger';
3
4
  declare type Value = string | number | null;
4
5
  declare type NameValue = React.ReactChild | null;
@@ -57,6 +58,10 @@ export interface SelectProps extends Pick<TriggerProps, 'windowResizeHidden' | '
57
58
  * 是否最小全宽
58
59
  */
59
60
  isMinRootWidth?: boolean;
61
+ /**
62
+ * 是否支持过滤功能, 目前的过滤类似carid.com,仅仅支持首字母过滤,滚动到匹配位置,填充匹配到的第一项,触发onChange
63
+ */
64
+ isFilterOption?: boolean;
60
65
  /**
61
66
  * 是否最大全宽
62
67
  */
@@ -88,6 +93,9 @@ interface SelectStates {
88
93
  }
89
94
  declare class Select extends React.Component<SelectProps, SelectStates> {
90
95
  prefixCls: string;
96
+ keydownHandler: AddListenerEventHandler;
97
+ popupContentRef: React.RefObject<HTMLDivElement>;
98
+ isFromFilterSelected: boolean;
91
99
  static defaultProps: {
92
100
  title: any;
93
101
  icon: JSX.Element;
@@ -104,6 +112,15 @@ declare class Select extends React.Component<SelectProps, SelectStates> {
104
112
  static getDerivedStateFromProps(nextProps: SelectProps): {
105
113
  list: any[];
106
114
  };
115
+ componentDidUpdate(prevProps: Readonly<SelectProps>): void;
116
+ componentWillUnmount(): void;
117
+ /**
118
+ * 当支持过滤时,绑定过滤事件
119
+ */
120
+ addKeydownListener: () => void;
121
+ removeKeydownListener: () => void;
122
+ KeydownCallback: (event: React.KeyboardEvent) => void;
123
+ findMatchItem: (inputVal: string) => SelectOptionItem;
107
124
  /**
108
125
  * 设置显示与隐藏
109
126
  */
@@ -91,10 +91,66 @@ function (_super) {
91
91
  var _this = _super.call(this, props) || this;
92
92
 
93
93
  _this.prefixCls = 'ab-select';
94
+ _this.keydownHandler = null;
95
+ _this.popupContentRef = /*#__PURE__*/_react.default.createRef();
96
+ /**
97
+ * 当支持过滤时,绑定过滤事件
98
+ */
99
+
100
+ _this.addKeydownListener = function () {
101
+ _this.keydownHandler = (0, _utils.addEventListener)(document, 'keydown', _this.KeydownCallback);
102
+ };
103
+
104
+ _this.removeKeydownListener = function () {
105
+ if (_this.keydownHandler) {
106
+ _this.keydownHandler.remove();
107
+
108
+ _this.keydownHandler = null;
109
+ }
110
+ };
111
+
112
+ _this.KeydownCallback = function (event) {
113
+ var code = event.keyCode || event.which;
114
+
115
+ if (code >= 65 && code <= 90 || code >= 48 && code <= 57 || code >= 96 && code <= 105) {
116
+ var findItem = _this.findMatchItem(event.key);
117
+
118
+ if (!findItem) {
119
+ return;
120
+ }
121
+
122
+ var _a = _this.props,
123
+ onChange = _a.onChange,
124
+ value = _a.value,
125
+ name_1 = _a.name;
126
+
127
+ if (findItem.value !== value) {
128
+ _this.isFromFilterSelected = true;
129
+ onChange(findItem, name_1);
130
+ }
131
+ }
132
+ };
133
+
134
+ _this.findMatchItem = function (inputVal) {
135
+ var list = _this.state.list;
136
+
137
+ for (var i = 0; i < list.length; i++) {
138
+ for (var j = 0; j < list[i].length; j++) {
139
+ var item = list[i][j];
140
+
141
+ if (item.name.toString().toLowerCase().indexOf(inputVal) === 0) {
142
+ return item;
143
+ }
144
+ }
145
+ }
146
+
147
+ return null;
148
+ };
94
149
  /**
95
150
  * 设置显示与隐藏
96
151
  */
97
152
 
153
+
98
154
  _this.triggerSelect = function (status) {
99
155
  if (status === void 0) {
100
156
  status = false;
@@ -104,6 +160,12 @@ function (_super) {
104
160
  return;
105
161
  }
106
162
 
163
+ _this.removeKeydownListener();
164
+
165
+ if (_this.props.isFilterOption && status) {
166
+ _this.addKeydownListener();
167
+ }
168
+
107
169
  _this.setState({
108
170
  visible: status
109
171
  });
@@ -150,6 +212,27 @@ function (_super) {
150
212
  };
151
213
  };
152
214
 
215
+ Select.prototype.componentDidUpdate = function (prevProps) {
216
+ // 通过搜索选择的,将滚动到该元素位置
217
+ if (this.state.visible && this.isFromFilterSelected && this.props.isFilterOption && prevProps.value !== this.props.value) {
218
+ this.isFromFilterSelected = false;
219
+ var element = this.popupContentRef.current;
220
+
221
+ if (element) {
222
+ var activeElement = element.querySelector(".".concat(this.prefixCls, "-active"));
223
+ activeElement.scrollIntoView({
224
+ behavior: 'smooth',
225
+ block: 'nearest',
226
+ inline: 'start'
227
+ });
228
+ }
229
+ }
230
+ };
231
+
232
+ Select.prototype.componentWillUnmount = function () {
233
+ this.removeKeydownListener();
234
+ };
235
+
153
236
  Select.prototype.onSelecting = function (ev, item) {
154
237
  if (ev) {
155
238
  ev.stopPropagation();
@@ -204,7 +287,8 @@ function (_super) {
204
287
 
205
288
  var cls = this.prefixCls;
206
289
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
207
- className: "".concat(cls, "-content")
290
+ className: "".concat(cls, "-content"),
291
+ ref: this.popupContentRef
208
292
  }, this.state.list.map(function (col, index) {
209
293
  return /*#__PURE__*/_react.default.createElement("ul", {
210
294
  className: "".concat(cls, "-col"),
package/lib/style.css CHANGED
@@ -1,33 +1,33 @@
1
1
  a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,var,video{box-sizing:border-box}html{font-size:100px;font-family:Arial,sans-serif;touch-action:manipulation;-ms-touch-action:manipulation}@media only screen and (max-width:767px){html{font-size:100px}}body{font-size:.12rem;color:#333;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none}input{outline:0}li,ul{padding:0;margin:0;list-style:none}
2
- .ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:all .3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:all .2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0!important;background-color:#f5f5f5!important}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}
3
2
  .ab-affix,.ab-affix-custom{z-index:100}.ab-affix-custom{position:fixed;transition:transform .2s cubic-bezier(.7,.3,.1,1)}.ab-affix-fade-appear,.ab-affix-fade-enter{transform:translate(0,-100%)}.ab-affix-fade-appear-active,.ab-affix-fade-enter-active{transform:translate(0,0)}.ab-affix-fade-exit{transform:translate(0,0)}.ab-affix-fade-exit-active{transform:translate(0,-100%)}.ab-affix-fade-exit-done{display:none}
4
- .ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
5
- .ab-collapse{transform-origin:left top;transition:opacity .2s,height .2s}.ab-collapse-hidden{height:0;overflow:hidden}.ab-collapse-fade-enter{opacity:.8;overflow:hidden}.ab-collapse-fade-enter-active{opacity:1;overflow:hidden}.ab-collapse-fade-enter-done{opacity:1;overflow:initial}.ab-collapse-fade-exit{opacity:1;overflow:hidden}.ab-collapse-fade-exit-active{opacity:.8;overflow:hidden}.ab-collapse-fade-exit-done{display:none;overflow:initial}
6
3
  .ab-carousel{position:relative}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;float:left;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}
4
+ .ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:all .3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:all .2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0!important;background-color:#f5f5f5!important}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}
5
+ .ab-collapse{transform-origin:left top;transition:opacity .2s,height .2s}.ab-collapse-hidden{height:0;overflow:hidden}.ab-collapse-fade-enter{opacity:.8;overflow:hidden}.ab-collapse-fade-enter-active{opacity:1;overflow:hidden}.ab-collapse-fade-enter-done{opacity:1;overflow:initial}.ab-collapse-fade-exit{opacity:1;overflow:hidden}.ab-collapse-fade-exit-active{opacity:.8;overflow:hidden}.ab-collapse-fade-exit-done{display:none;overflow:initial}
6
+ .ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
7
7
  .ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-dg>ul>li.ab-dp-cal-out{color:#666}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}
8
8
  .ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-input.ab-date-picker-error{background:#fffacd}.ab-date-picker-icon{color:#606060;position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}
9
- .ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
10
9
  .ab-drawer{position:fixed;z-index:101;background-color:#fff;overflow:auto;transition:transform .3s cubic-bezier(.7,.3,.1,1)}.ab-drawer-times{position:absolute;right:.17rem;font-size:.16rem;color:#b0b0b0;cursor:pointer;top:.11rem}.ab-drawer-times:hover{color:#333}.ab-drawer-tf-top{transform:translate(0,-100%)}.ab-drawer-tf-bottom{transform:translate(0,100%)}.ab-drawer-tf-left{transform:translate(-100%,0)}.ab-drawer-tf-right{transform:translate(100%,0)}.ab-drawer-hidden.ab-drawer,.ab-drawer-hidden.ab-mask{display:none}
11
- .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
10
+ .ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
12
11
  .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
12
+ .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
13
+ .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
13
14
  .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:">";position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
14
15
  .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
15
- .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
16
- .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
17
- .ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
18
16
  .ab-loading-bar{position:fixed;top:0;left:0;margin-bottom:-3px;height:3px;width:100%;z-index:999}@keyframes movingBar{0%{left:50%;right:50%}99.9%{left:0;right:0}100%{left:50%;right:50%}}@keyframes changeBar{0%{background-color:#0aa770}33.3%{background-color:#0aa770}33.33%{background-color:red}66.6%{background-color:#f987d6}66.66%{background-color:#f987d6}99.9%{background-color:#00bcd4}}.ab-loading-bar-bar{position:absolute;height:0;width:100%;text-indent:-9999px;background-color:#0aa770;animation:changeBar 2.25s infinite}.ab-loading-bar-bar:before{content:"";height:3px;position:absolute;left:50%;right:50%;background-color:inherit;animation:movingBar .75s infinite}
17
+ .ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
19
18
  .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
20
19
  .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
20
+ .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
21
+ .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
21
22
  .ab-move{cursor:move;visibility:hidden;transform-origin:center center}
22
23
  .ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
23
24
 
24
- .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
25
- .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
26
- .ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
27
25
 
26
+ .ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
27
+ .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
28
28
  .ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
29
- .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
29
+ .ab-table{overflow-x:auto}.ab-table-table{border-spacing:0;width:100%;table-layout:fixed;border-collapse:collapse}.ab-table-header{overflow:hidden}.ab-table-body{overflow:auto}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-checkbox-col{width:.32rem}.ab-table-point{cursor:pointer}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}
30
30
  .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
31
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
31
+ .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
32
32
  .ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}
33
33
  .ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}
@@ -11,8 +11,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
11
 
12
12
  var _react = _interopRequireDefault(require("react"));
13
13
 
14
- var _classnames = _interopRequireDefault(require("classnames"));
15
-
16
14
  var _utils = require("@autobest-ui/utils");
17
15
 
18
16
  var __assign = void 0 && (void 0).__assign || function () {
@@ -105,7 +103,7 @@ function BodyRow(_a) {
105
103
 
106
104
  if (!(0, _utils.isEmptyArray)(contentCells)) {
107
105
  return /*#__PURE__*/_react.default.createElement("tr", {
108
- className: (0, _classnames.default)("".concat(cls, "-row"), className),
106
+ className: className,
109
107
  onClick: onTrClick
110
108
  }, indentCell, CheckCell, contentCells);
111
109
  }
@@ -2,7 +2,7 @@ import React, { ReactText } from 'react';
2
2
  export interface BodyRowSelectionInfo<T> {
3
3
  checkIcon?: (checked: boolean, rowData: T, index: number) => React.ReactElement;
4
4
  getDisabled?: (rowData: T) => boolean;
5
- onSelect?: (checked: boolean, rowData: T) => void;
5
+ onSelect?: (checked: boolean, rowData: T, rowIndex: number) => void;
6
6
  }
7
7
  export interface BodyCheckIconProps<T> {
8
8
  prefixCls: string;
@@ -30,11 +30,21 @@ function BodyCheckIcon(_a) {
30
30
  var disabled = getDisabled(rowData);
31
31
 
32
32
  var onCheckBoxChange = function onCheckBoxChange(currentChecked) {
33
- onSelect(currentChecked, rowData);
33
+ onSelect(currentChecked, rowData, rowIndex);
34
+ };
35
+
36
+ var onClickCell = function onClickCell(ev) {
37
+ if (!ev) {
38
+ return;
39
+ } // 阻止触发onRowClick
40
+
41
+
42
+ ev.stopPropagation();
34
43
  };
35
44
 
36
45
  return /*#__PURE__*/_react.default.createElement("td", {
37
- className: "".concat(cls, "-checkbox")
46
+ className: "".concat(cls, "-checkbox"),
47
+ onClick: onClickCell
38
48
  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
39
49
  checked: checked,
40
50
  disabled: disabled,
@@ -17,8 +17,9 @@ export interface BodyProps<T> extends Pick<BodyRowProps<T>, 'prefixCls' | 'colum
17
17
  * 子列表渲染(不赋值则没有子列表),详见Expandable
18
18
  */
19
19
  expandable?: TableExpandableInfo<T>;
20
- getRowKey: (rowData: T) => ReactText;
20
+ getRowKey: (rowData: T, rowIndex: number) => ReactText;
21
21
  rowSelection: BodyRowSelectionInfo<T>;
22
+ getRowClassName: (rowData: T, rowIndex: number) => string;
22
23
  }
23
- declare function Body<RowDataType>({ prefixCls, columns, dataSource, getRowKey, rowSelection, selectedRowKeys, expandable, onRowClick }: BodyProps<RowDataType>): JSX.Element;
24
+ declare function Body<RowDataType>({ prefixCls, columns, dataSource, getRowKey, rowSelection, selectedRowKeys, expandable, onRowClick, getRowClassName }: BodyProps<RowDataType>): JSX.Element;
24
25
  export default Body;
@@ -9,6 +9,8 @@ exports.default = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
+ var _utils = require("@autobest-ui/utils");
13
+
12
14
  var _BodyRow = _interopRequireDefault(require("./BodyRow"));
13
15
 
14
16
  var _CheckIcon = _interopRequireDefault(require("./CheckIcon"));
@@ -25,15 +27,16 @@ function Body(_a) {
25
27
  rowSelection = _a.rowSelection,
26
28
  selectedRowKeys = _a.selectedRowKeys,
27
29
  expandable = _a.expandable,
28
- onRowClick = _a.onRowClick;
30
+ onRowClick = _a.onRowClick,
31
+ getRowClassName = _a.getRowClassName;
29
32
  var rows = [];
30
33
  var expandedRowRenderer = expandable ? expandable.expandedRowRender : noop;
31
34
  dataSource.forEach(function (row, rowIndex) {
32
- var rowKey = getRowKey(row) || rowIndex;
35
+ var rowKey = getRowKey(row, rowIndex);
33
36
  var CheckCell = rowSelection ? /*#__PURE__*/_react.default.createElement(_CheckIcon.default, {
34
37
  prefixCls: prefixCls,
35
38
  rowSelection: rowSelection,
36
- rowKey: rowKey,
39
+ rowKey: (0, _utils.isBlank)(rowKey) ? rowIndex : rowKey,
37
40
  rowData: row,
38
41
  rowIndex: rowIndex,
39
42
  selectedRowKeys: selectedRowKeys
@@ -46,7 +49,8 @@ function Body(_a) {
46
49
  columns: columns,
47
50
  CheckCell: CheckCell,
48
51
  indent: 0,
49
- onRowClick: onRowClick
52
+ onRowClick: onRowClick,
53
+ className: getRowClassName(row, rowIndex)
50
54
  }));
51
55
 
52
56
  if (expandable) {