@hi-ui/table 4.4.0-alpha.0 → 4.4.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -6
- package/lib/cjs/SettingDrawer.js +33 -21
- package/lib/cjs/Table.js +2 -0
- package/lib/cjs/TableBody.js +3 -3
- package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useHeights.js +3 -14
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/SettingDrawer.js +33 -21
- package/lib/esm/Table.js +2 -0
- package/lib/esm/TableBody.js +1 -2
- package/lib/esm/node_modules/rc-virtual-list/es/hooks/useHeights.js +3 -14
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/SettingDrawer.d.ts +6 -0
- package/lib/types/context.d.ts +2 -2
- package/lib/types/index.d.ts +1 -1
- package/package.json +2 -1
- package/lib/cjs/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js +0 -1090
- package/lib/cjs/packages/hooks/use-merge-refs/lib/esm/index.js +0 -68
- package/lib/cjs/packages/ui/scrollbar/lib/esm/Scrollbar.js +0 -160
- package/lib/cjs/packages/ui/scrollbar/lib/esm/styles/index.scss.js +0 -35
- package/lib/cjs/packages/ui/scrollbar/lib/esm/utils/index.js +0 -72
- package/lib/esm/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js +0 -1084
- package/lib/esm/packages/hooks/use-merge-refs/lib/esm/index.js +0 -62
- package/lib/esm/packages/ui/scrollbar/lib/esm/Scrollbar.js +0 -148
- package/lib/esm/packages/ui/scrollbar/lib/esm/styles/index.scss.js +0 -23
- package/lib/esm/packages/ui/scrollbar/lib/esm/utils/index.js +0 -66
package/CHANGELOG.md
CHANGED
package/lib/cjs/SettingDrawer.js
CHANGED
|
@@ -23,13 +23,14 @@ var useLatest = require('@hi-ui/use-latest');
|
|
|
23
23
|
var core = require('@hi-ui/core');
|
|
24
24
|
var funcUtils = require('@hi-ui/func-utils');
|
|
25
25
|
var useDragSorter = require('@hi-ui/use-drag-sorter');
|
|
26
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
26
27
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
27
|
-
var useColSorter = require('./hooks/use-col-sorter.js');
|
|
28
|
-
var useColHidden = require('./hooks/use-col-hidden.js');
|
|
29
28
|
var drawer = require('@hi-ui/drawer');
|
|
30
29
|
var button = require('@hi-ui/button');
|
|
31
30
|
var Checkbox = require('@hi-ui/checkbox');
|
|
32
31
|
var useColSet = require('./hooks/use-col-set.js');
|
|
32
|
+
var useColSorter = require('./hooks/use-col-sorter.js');
|
|
33
|
+
var useColHidden = require('./hooks/use-col-hidden.js');
|
|
33
34
|
function _interopDefaultCompat(e) {
|
|
34
35
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
35
36
|
'default': e
|
|
@@ -54,10 +55,18 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
54
55
|
sortedColKeysPropBeforeVerify = _ref.sortedColKeys,
|
|
55
56
|
onSortedColKeysChange = _ref.onSortedColKeysChange,
|
|
56
57
|
onSetColKeysChange = _ref.onSetColKeysChange,
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
cacheHiddenColKeysProp = _ref.cacheHiddenColKeys,
|
|
59
|
+
onCacheHiddenColKeysChange = _ref.onCacheHiddenColKeysChange,
|
|
60
|
+
checkDisabledColKeys = _ref.checkDisabledColKeys,
|
|
61
|
+
dragDisabledColKeys = _ref.dragDisabledColKeys,
|
|
62
|
+
extraHeader = _ref.extraHeader,
|
|
63
|
+
extraFooter = _ref.extraFooter,
|
|
64
|
+
itemRender = _ref.itemRender,
|
|
59
65
|
drawerProps = _ref.drawerProps;
|
|
60
66
|
var i18n = core.useLocaleContext();
|
|
67
|
+
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(hiddenColKeysPropBeforeVerify !== null && hiddenColKeysPropBeforeVerify !== void 0 ? hiddenColKeysPropBeforeVerify : [], cacheHiddenColKeysProp, onCacheHiddenColKeysChange),
|
|
68
|
+
cacheHiddenColKeys = _useUncontrolledState[0],
|
|
69
|
+
setCacheHiddenColKeys = _useUncontrolledState[1];
|
|
61
70
|
// 根据列字段合并 sortedColKeys、hiddenColKeys
|
|
62
71
|
var _useColSet = useColSet.useColSet({
|
|
63
72
|
columns: columnsProp,
|
|
@@ -84,9 +93,7 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
84
93
|
onHiddenColKeysChange: onHiddenColKeysChange
|
|
85
94
|
}),
|
|
86
95
|
hiddenColKeys = _useColHidden.hiddenColKeys,
|
|
87
|
-
setHiddenColKeys = _useColHidden.setHiddenColKeys
|
|
88
|
-
cacheHiddenColKeys = _useColHidden.cacheHiddenColKeys,
|
|
89
|
-
setCacheHiddenColKeys = _useColHidden.setCacheHiddenColKeys;
|
|
96
|
+
setHiddenColKeys = _useColHidden.setHiddenColKeys;
|
|
90
97
|
var dropProps = useDragSorter.useDrop({
|
|
91
98
|
draggable: true,
|
|
92
99
|
idFieldName: 'dataKey',
|
|
@@ -113,9 +120,9 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
113
120
|
}));
|
|
114
121
|
}
|
|
115
122
|
});
|
|
116
|
-
var
|
|
117
|
-
visible =
|
|
118
|
-
setVisible =
|
|
123
|
+
var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(false, visibleProp, _onClose),
|
|
124
|
+
visible = _useUncontrolledState2[0],
|
|
125
|
+
setVisible = _useUncontrolledState2[1];
|
|
119
126
|
var resetLatest = useLatest.useLatestCallback(function () {
|
|
120
127
|
setCacheHiddenColKeys(hiddenColKeys);
|
|
121
128
|
setCacheSortedCols(sortedCols);
|
|
@@ -152,29 +159,31 @@ var SettingDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
152
159
|
},
|
|
153
160
|
width: 304,
|
|
154
161
|
footer: /*#__PURE__*/React__default["default"].createElement("div", {
|
|
155
|
-
className: prefixCls + "
|
|
162
|
+
className: prefixCls + "-footer"
|
|
163
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
164
|
+
className: prefixCls + "-footer__extra"
|
|
165
|
+
}, extraFooter), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
166
|
+
className: prefixCls + "-footer__action"
|
|
156
167
|
}, /*#__PURE__*/React__default["default"].createElement(button.Button, {
|
|
157
|
-
key: 0,
|
|
158
|
-
className: prefixCls + "__btn-cancel",
|
|
159
168
|
onClick: resetLatest
|
|
160
169
|
}, i18n.get('table.reset')), /*#__PURE__*/React__default["default"].createElement(button.Button, {
|
|
161
|
-
key: 1,
|
|
162
|
-
className: prefixCls + "__btn-confirm",
|
|
163
170
|
onClick: onConfirm,
|
|
164
171
|
type: "primary"
|
|
165
|
-
}, i18n.get('table.confirm')))
|
|
172
|
+
}, i18n.get('table.confirm'))))
|
|
166
173
|
}, drawerProps), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
167
174
|
className: prefixCls + "__content"
|
|
168
|
-
}, cacheSortedCols.map(function (col, index) {
|
|
175
|
+
}, extraHeader, cacheSortedCols.map(function (col, index) {
|
|
169
176
|
return /*#__PURE__*/React__default["default"].createElement(SettingItem, {
|
|
170
177
|
key: col.dataKey,
|
|
171
178
|
prefixCls: prefixCls,
|
|
172
179
|
column: col,
|
|
173
180
|
index: index,
|
|
181
|
+
render: itemRender,
|
|
174
182
|
dropProps: dropProps,
|
|
175
183
|
cacheHiddenColKeys: cacheHiddenColKeys,
|
|
176
184
|
setCacheHiddenColKeys: setCacheHiddenColKeys,
|
|
177
|
-
checkDisabled: checkDisabledColKeys.includes(col.dataKey)
|
|
185
|
+
checkDisabled: checkDisabledColKeys === null || checkDisabledColKeys === void 0 ? void 0 : checkDisabledColKeys.includes(col.dataKey),
|
|
186
|
+
dragDisabled: dragDisabledColKeys === null || dragDisabledColKeys === void 0 ? void 0 : dragDisabledColKeys.includes(col.dataKey)
|
|
178
187
|
});
|
|
179
188
|
})));
|
|
180
189
|
});
|
|
@@ -188,10 +197,13 @@ function SettingItem(_ref2) {
|
|
|
188
197
|
setCacheHiddenColKeys = _ref2.setCacheHiddenColKeys,
|
|
189
198
|
dropProps = _ref2.dropProps,
|
|
190
199
|
index = _ref2.index,
|
|
191
|
-
checkDisabled = _ref2.checkDisabled
|
|
200
|
+
checkDisabled = _ref2.checkDisabled,
|
|
201
|
+
dragDisabled = _ref2.dragDisabled,
|
|
202
|
+
render = _ref2.render;
|
|
192
203
|
var dataKey = column.dataKey,
|
|
193
204
|
title = column.title;
|
|
194
205
|
var _useDrag = useDragSorter.useDrag(Object.assign(Object.assign({}, dropProps), {
|
|
206
|
+
draggable: !dragDisabled,
|
|
195
207
|
item: column,
|
|
196
208
|
index: index,
|
|
197
209
|
idFieldName: 'dataKey',
|
|
@@ -202,7 +214,7 @@ function SettingItem(_ref2) {
|
|
|
202
214
|
getDragTriggerProps = _useDrag.getDragTriggerProps,
|
|
203
215
|
getDropTriggerProps = _useDrag.getDropTriggerProps;
|
|
204
216
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
205
|
-
className: classname.cx(prefixCls + "-item", dragging && prefixCls + "-item--dragging", direction && prefixCls + "-item--direction-" + direction)
|
|
217
|
+
className: classname.cx(prefixCls + "-item", dragging && prefixCls + "-item--dragging", dragDisabled && prefixCls + "-item--drag-disabled", direction && prefixCls + "-item--direction-" + direction)
|
|
206
218
|
}, getDragTriggerProps(), getDropTriggerProps()), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
207
219
|
className: prefixCls + "-item__wrap"
|
|
208
220
|
}, /*#__PURE__*/React__default["default"].createElement(Checkbox.Checkbox, {
|
|
@@ -215,6 +227,6 @@ function SettingItem(_ref2) {
|
|
|
215
227
|
}) : cacheHiddenColKeys.concat(dataKey);
|
|
216
228
|
setCacheHiddenColKeys(nextCacheHiddenColKeys);
|
|
217
229
|
}
|
|
218
|
-
}, /*#__PURE__*/React__default["default"].createElement("span", null, funcUtils.runIfFunc(title))), /*#__PURE__*/React__default["default"].createElement(icons.MoveOutlined, null)));
|
|
230
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", null, typeAssertion.isFunction(render) ? render(column) : funcUtils.runIfFunc(title))), !dragDisabled && /*#__PURE__*/React__default["default"].createElement(icons.MoveOutlined, null)));
|
|
219
231
|
}
|
|
220
232
|
exports.SettingDrawer = SettingDrawer;
|
package/lib/cjs/Table.js
CHANGED
|
@@ -258,6 +258,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
258
258
|
var selectionColumn = {
|
|
259
259
|
dataKey: SELECTION_DATA_KEY,
|
|
260
260
|
width: checkboxColWidth,
|
|
261
|
+
// selectionColumn 宽度固定,防止自动被拉伸
|
|
262
|
+
fixed: true,
|
|
261
263
|
className: prefixCls + "__selection-col",
|
|
262
264
|
title: renderSelectionTitleCell,
|
|
263
265
|
// @ts-ignore
|
package/lib/cjs/TableBody.js
CHANGED
|
@@ -19,8 +19,7 @@ var classname = require('@hi-ui/classname');
|
|
|
19
19
|
var env = require('@hi-ui/env');
|
|
20
20
|
var useLatest = require('@hi-ui/use-latest');
|
|
21
21
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
22
|
-
require('
|
|
23
|
-
var Scrollbar = require('./packages/ui/scrollbar/lib/esm/Scrollbar.js');
|
|
22
|
+
var Scrollbar = require('@hi-ui/scrollbar');
|
|
24
23
|
var TableRow = require('./TableRow.js');
|
|
25
24
|
var context = require('./context.js');
|
|
26
25
|
var ColGroupContent = require('./ColGroupContent.js');
|
|
@@ -31,6 +30,7 @@ function _interopDefaultCompat(e) {
|
|
|
31
30
|
};
|
|
32
31
|
}
|
|
33
32
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
33
|
+
var Scrollbar__default = /*#__PURE__*/_interopDefaultCompat(Scrollbar);
|
|
34
34
|
var _role = 'table';
|
|
35
35
|
var _prefix = classname.getPrefixCls(_role);
|
|
36
36
|
var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -158,7 +158,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
158
158
|
}
|
|
159
159
|
};
|
|
160
160
|
// 外层增加 div 作为滚动容器
|
|
161
|
-
return !scrollbar ? ( /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, scrollBodyProps), bodyContent)) : ( /*#__PURE__*/React__default["default"].createElement(
|
|
161
|
+
return !scrollbar ? ( /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, scrollBodyProps), bodyContent)) : ( /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], Object.assign({}, scrollBodyProps, typeAssertion.isObject(scrollbar) ? scrollbar : null), bodyContent));
|
|
162
162
|
});
|
|
163
163
|
if (env.__DEV__) {
|
|
164
164
|
TableBody.displayName = 'TableBody';
|
|
@@ -85,17 +85,6 @@ function _iterableToArrayLimit(arr, i) {
|
|
|
85
85
|
function _arrayWithHoles(arr) {
|
|
86
86
|
if (Array.isArray(arr)) return arr;
|
|
87
87
|
}
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* To get exact height to avoid scrolling deviation
|
|
91
|
-
*/
|
|
92
|
-
function getOuterHeight(el) {
|
|
93
|
-
var height = el.offsetHeight;
|
|
94
|
-
var computedStyle = window.getComputedStyle(el);
|
|
95
|
-
height += parseInt(computedStyle.marginTop, 10);
|
|
96
|
-
height += parseInt(computedStyle.marginBottom, 10);
|
|
97
|
-
return height;
|
|
98
|
-
}
|
|
99
88
|
function useHeights(getKey, onItemAdd, onItemRemove) {
|
|
100
89
|
var _React$useState = React__namespace.useState(0),
|
|
101
90
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -113,9 +102,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
|
|
|
113
102
|
instanceRef.current.forEach(function (element, key) {
|
|
114
103
|
if (element && element.offsetParent) {
|
|
115
104
|
var htmlElement = findDOMNode["default"](element);
|
|
116
|
-
var
|
|
117
|
-
if (heightsRef.current.get(key) !==
|
|
118
|
-
heightsRef.current.set(key,
|
|
105
|
+
var offsetHeight = htmlElement.offsetHeight;
|
|
106
|
+
if (heightsRef.current.get(key) !== offsetHeight) {
|
|
107
|
+
heightsRef.current.set(key, htmlElement.offsetHeight);
|
|
119
108
|
}
|
|
120
109
|
}
|
|
121
110
|
}); // Always trigger update mark to tell parent that should re-calculate heights when resized
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
|
|
15
|
+
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th:not(:last-child) {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table tr:last-child td {border-bottom: none;}.hi-v4-table--bordered table tr td:not(:last-child) {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header, .hi-v4-table--bordered .hi-v4-table-body, .hi-v4-table--bordered .hi-v4-table-content {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header, .hi-v4-table--bordered .hi-v4-table-content {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body, .hi-v4-table--bordered .hi-v4-table-content {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-setting-drawer .hi-v4-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item:not(.hi-v4-setting-item--drag-disabled) .hi-v4-setting-item__wrap {cursor: move;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
|
|
16
16
|
var __styleInject__ = require('style-inject')["default"];
|
|
17
17
|
__styleInject__(css_248z);
|
|
18
18
|
exports["default"] = css_248z;
|
package/lib/esm/SettingDrawer.js
CHANGED
|
@@ -17,13 +17,14 @@ import { useLatestCallback } from '@hi-ui/use-latest';
|
|
|
17
17
|
import { useLocaleContext } from '@hi-ui/core';
|
|
18
18
|
import { runIfFunc } from '@hi-ui/func-utils';
|
|
19
19
|
import { useDrop, useDrag } from '@hi-ui/use-drag-sorter';
|
|
20
|
+
import { isFunction } from '@hi-ui/type-assertion';
|
|
20
21
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
|
21
|
-
import { useColSorter } from './hooks/use-col-sorter.js';
|
|
22
|
-
import { useColHidden } from './hooks/use-col-hidden.js';
|
|
23
22
|
import { Drawer } from '@hi-ui/drawer';
|
|
24
23
|
import { Button } from '@hi-ui/button';
|
|
25
24
|
import { Checkbox } from '@hi-ui/checkbox';
|
|
26
25
|
import { useColSet } from './hooks/use-col-set.js';
|
|
26
|
+
import { useColSorter } from './hooks/use-col-sorter.js';
|
|
27
|
+
import { useColHidden } from './hooks/use-col-hidden.js';
|
|
27
28
|
var _prefix = getPrefixCls('setting');
|
|
28
29
|
/**
|
|
29
30
|
* 设置抽屉
|
|
@@ -41,10 +42,18 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
41
42
|
sortedColKeysPropBeforeVerify = _ref.sortedColKeys,
|
|
42
43
|
onSortedColKeysChange = _ref.onSortedColKeysChange,
|
|
43
44
|
onSetColKeysChange = _ref.onSetColKeysChange,
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
cacheHiddenColKeysProp = _ref.cacheHiddenColKeys,
|
|
46
|
+
onCacheHiddenColKeysChange = _ref.onCacheHiddenColKeysChange,
|
|
47
|
+
checkDisabledColKeys = _ref.checkDisabledColKeys,
|
|
48
|
+
dragDisabledColKeys = _ref.dragDisabledColKeys,
|
|
49
|
+
extraHeader = _ref.extraHeader,
|
|
50
|
+
extraFooter = _ref.extraFooter,
|
|
51
|
+
itemRender = _ref.itemRender,
|
|
46
52
|
drawerProps = _ref.drawerProps;
|
|
47
53
|
var i18n = useLocaleContext();
|
|
54
|
+
var _useUncontrolledState = useUncontrolledState(hiddenColKeysPropBeforeVerify !== null && hiddenColKeysPropBeforeVerify !== void 0 ? hiddenColKeysPropBeforeVerify : [], cacheHiddenColKeysProp, onCacheHiddenColKeysChange),
|
|
55
|
+
cacheHiddenColKeys = _useUncontrolledState[0],
|
|
56
|
+
setCacheHiddenColKeys = _useUncontrolledState[1];
|
|
48
57
|
// 根据列字段合并 sortedColKeys、hiddenColKeys
|
|
49
58
|
var _useColSet = useColSet({
|
|
50
59
|
columns: columnsProp,
|
|
@@ -71,9 +80,7 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
71
80
|
onHiddenColKeysChange: onHiddenColKeysChange
|
|
72
81
|
}),
|
|
73
82
|
hiddenColKeys = _useColHidden.hiddenColKeys,
|
|
74
|
-
setHiddenColKeys = _useColHidden.setHiddenColKeys
|
|
75
|
-
cacheHiddenColKeys = _useColHidden.cacheHiddenColKeys,
|
|
76
|
-
setCacheHiddenColKeys = _useColHidden.setCacheHiddenColKeys;
|
|
83
|
+
setHiddenColKeys = _useColHidden.setHiddenColKeys;
|
|
77
84
|
var dropProps = useDrop({
|
|
78
85
|
draggable: true,
|
|
79
86
|
idFieldName: 'dataKey',
|
|
@@ -100,9 +107,9 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
100
107
|
}));
|
|
101
108
|
}
|
|
102
109
|
});
|
|
103
|
-
var
|
|
104
|
-
visible =
|
|
105
|
-
setVisible =
|
|
110
|
+
var _useUncontrolledState2 = useUncontrolledState(false, visibleProp, _onClose),
|
|
111
|
+
visible = _useUncontrolledState2[0],
|
|
112
|
+
setVisible = _useUncontrolledState2[1];
|
|
106
113
|
var resetLatest = useLatestCallback(function () {
|
|
107
114
|
setCacheHiddenColKeys(hiddenColKeys);
|
|
108
115
|
setCacheSortedCols(sortedCols);
|
|
@@ -139,29 +146,31 @@ var SettingDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
139
146
|
},
|
|
140
147
|
width: 304,
|
|
141
148
|
footer: /*#__PURE__*/React__default.createElement("div", {
|
|
142
|
-
className: prefixCls + "
|
|
149
|
+
className: prefixCls + "-footer"
|
|
150
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
151
|
+
className: prefixCls + "-footer__extra"
|
|
152
|
+
}, extraFooter), /*#__PURE__*/React__default.createElement("div", {
|
|
153
|
+
className: prefixCls + "-footer__action"
|
|
143
154
|
}, /*#__PURE__*/React__default.createElement(Button, {
|
|
144
|
-
key: 0,
|
|
145
|
-
className: prefixCls + "__btn-cancel",
|
|
146
155
|
onClick: resetLatest
|
|
147
156
|
}, i18n.get('table.reset')), /*#__PURE__*/React__default.createElement(Button, {
|
|
148
|
-
key: 1,
|
|
149
|
-
className: prefixCls + "__btn-confirm",
|
|
150
157
|
onClick: onConfirm,
|
|
151
158
|
type: "primary"
|
|
152
|
-
}, i18n.get('table.confirm')))
|
|
159
|
+
}, i18n.get('table.confirm'))))
|
|
153
160
|
}, drawerProps), /*#__PURE__*/React__default.createElement("div", {
|
|
154
161
|
className: prefixCls + "__content"
|
|
155
|
-
}, cacheSortedCols.map(function (col, index) {
|
|
162
|
+
}, extraHeader, cacheSortedCols.map(function (col, index) {
|
|
156
163
|
return /*#__PURE__*/React__default.createElement(SettingItem, {
|
|
157
164
|
key: col.dataKey,
|
|
158
165
|
prefixCls: prefixCls,
|
|
159
166
|
column: col,
|
|
160
167
|
index: index,
|
|
168
|
+
render: itemRender,
|
|
161
169
|
dropProps: dropProps,
|
|
162
170
|
cacheHiddenColKeys: cacheHiddenColKeys,
|
|
163
171
|
setCacheHiddenColKeys: setCacheHiddenColKeys,
|
|
164
|
-
checkDisabled: checkDisabledColKeys.includes(col.dataKey)
|
|
172
|
+
checkDisabled: checkDisabledColKeys === null || checkDisabledColKeys === void 0 ? void 0 : checkDisabledColKeys.includes(col.dataKey),
|
|
173
|
+
dragDisabled: dragDisabledColKeys === null || dragDisabledColKeys === void 0 ? void 0 : dragDisabledColKeys.includes(col.dataKey)
|
|
165
174
|
});
|
|
166
175
|
})));
|
|
167
176
|
});
|
|
@@ -175,10 +184,13 @@ function SettingItem(_ref2) {
|
|
|
175
184
|
setCacheHiddenColKeys = _ref2.setCacheHiddenColKeys,
|
|
176
185
|
dropProps = _ref2.dropProps,
|
|
177
186
|
index = _ref2.index,
|
|
178
|
-
checkDisabled = _ref2.checkDisabled
|
|
187
|
+
checkDisabled = _ref2.checkDisabled,
|
|
188
|
+
dragDisabled = _ref2.dragDisabled,
|
|
189
|
+
render = _ref2.render;
|
|
179
190
|
var dataKey = column.dataKey,
|
|
180
191
|
title = column.title;
|
|
181
192
|
var _useDrag = useDrag(Object.assign(Object.assign({}, dropProps), {
|
|
193
|
+
draggable: !dragDisabled,
|
|
182
194
|
item: column,
|
|
183
195
|
index: index,
|
|
184
196
|
idFieldName: 'dataKey',
|
|
@@ -189,7 +201,7 @@ function SettingItem(_ref2) {
|
|
|
189
201
|
getDragTriggerProps = _useDrag.getDragTriggerProps,
|
|
190
202
|
getDropTriggerProps = _useDrag.getDropTriggerProps;
|
|
191
203
|
return /*#__PURE__*/React__default.createElement("div", Object.assign({
|
|
192
|
-
className: cx(prefixCls + "-item", dragging && prefixCls + "-item--dragging", direction && prefixCls + "-item--direction-" + direction)
|
|
204
|
+
className: cx(prefixCls + "-item", dragging && prefixCls + "-item--dragging", dragDisabled && prefixCls + "-item--drag-disabled", direction && prefixCls + "-item--direction-" + direction)
|
|
193
205
|
}, getDragTriggerProps(), getDropTriggerProps()), /*#__PURE__*/React__default.createElement("div", {
|
|
194
206
|
className: prefixCls + "-item__wrap"
|
|
195
207
|
}, /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
@@ -202,6 +214,6 @@ function SettingItem(_ref2) {
|
|
|
202
214
|
}) : cacheHiddenColKeys.concat(dataKey);
|
|
203
215
|
setCacheHiddenColKeys(nextCacheHiddenColKeys);
|
|
204
216
|
}
|
|
205
|
-
}, /*#__PURE__*/React__default.createElement("span", null, runIfFunc(title))), /*#__PURE__*/React__default.createElement(MoveOutlined, null)));
|
|
217
|
+
}, /*#__PURE__*/React__default.createElement("span", null, isFunction(render) ? render(column) : runIfFunc(title))), !dragDisabled && /*#__PURE__*/React__default.createElement(MoveOutlined, null)));
|
|
206
218
|
}
|
|
207
219
|
export { SettingDrawer };
|
package/lib/esm/Table.js
CHANGED
|
@@ -243,6 +243,8 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
243
243
|
var selectionColumn = {
|
|
244
244
|
dataKey: SELECTION_DATA_KEY,
|
|
245
245
|
width: checkboxColWidth,
|
|
246
|
+
// selectionColumn 宽度固定,防止自动被拉伸
|
|
247
|
+
fixed: true,
|
|
246
248
|
className: prefixCls + "__selection-col",
|
|
247
249
|
title: renderSelectionTitleCell,
|
|
248
250
|
// @ts-ignore
|
package/lib/esm/TableBody.js
CHANGED
|
@@ -13,8 +13,7 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useLatestCallback } from '@hi-ui/use-latest';
|
|
15
15
|
import { isArrayNonEmpty, isObject } from '@hi-ui/type-assertion';
|
|
16
|
-
import '
|
|
17
|
-
import { Scrollbar } from './packages/ui/scrollbar/lib/esm/Scrollbar.js';
|
|
16
|
+
import Scrollbar from '@hi-ui/scrollbar';
|
|
18
17
|
import { TableRow } from './TableRow.js';
|
|
19
18
|
import { useTableContext } from './context.js';
|
|
20
19
|
import { ColGroupContent } from './ColGroupContent.js';
|
|
@@ -60,17 +60,6 @@ function _iterableToArrayLimit(arr, i) {
|
|
|
60
60
|
function _arrayWithHoles(arr) {
|
|
61
61
|
if (Array.isArray(arr)) return arr;
|
|
62
62
|
}
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* To get exact height to avoid scrolling deviation
|
|
66
|
-
*/
|
|
67
|
-
function getOuterHeight(el) {
|
|
68
|
-
var height = el.offsetHeight;
|
|
69
|
-
var computedStyle = window.getComputedStyle(el);
|
|
70
|
-
height += parseInt(computedStyle.marginTop, 10);
|
|
71
|
-
height += parseInt(computedStyle.marginBottom, 10);
|
|
72
|
-
return height;
|
|
73
|
-
}
|
|
74
63
|
function useHeights(getKey, onItemAdd, onItemRemove) {
|
|
75
64
|
var _React$useState = React.useState(0),
|
|
76
65
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -88,9 +77,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
|
|
|
88
77
|
instanceRef.current.forEach(function (element, key) {
|
|
89
78
|
if (element && element.offsetParent) {
|
|
90
79
|
var htmlElement = findDOMNode(element);
|
|
91
|
-
var
|
|
92
|
-
if (heightsRef.current.get(key) !==
|
|
93
|
-
heightsRef.current.set(key,
|
|
80
|
+
var offsetHeight = htmlElement.offsetHeight;
|
|
81
|
+
if (heightsRef.current.get(key) !== offsetHeight) {
|
|
82
|
+
heightsRef.current.set(key, htmlElement.offsetHeight);
|
|
94
83
|
}
|
|
95
84
|
}
|
|
96
85
|
}); // Always trigger update mark to tell parent that should re-calculate heights when resized
|
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'style-inject';
|
|
11
|
-
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
|
|
11
|
+
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th:not(:last-child) {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table tr:last-child td {border-bottom: none;}.hi-v4-table--bordered table tr td:not(:last-child) {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header, .hi-v4-table--bordered .hi-v4-table-body, .hi-v4-table--bordered .hi-v4-table-content {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header, .hi-v4-table--bordered .hi-v4-table-content {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body, .hi-v4-table--bordered .hi-v4-table-content {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-setting-drawer .hi-v4-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item:not(.hi-v4-setting-item--drag-disabled) .hi-v4-setting-item__wrap {cursor: move;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
|
|
12
12
|
__styleInject__(css_248z);
|
|
13
13
|
export { css_248z as default };
|
|
@@ -12,10 +12,16 @@ export interface SettingDrawerProps extends HiBaseHTMLProps<'div'> {
|
|
|
12
12
|
columns?: TableColumnItem[];
|
|
13
13
|
onClose?: () => void;
|
|
14
14
|
checkDisabledColKeys?: string[];
|
|
15
|
+
dragDisabledColKeys?: string[];
|
|
15
16
|
onSetColKeysChange?: (sortedColKeys: string[], hiddenColKeys: string[], visibleCols: TableColumnItem[]) => void;
|
|
16
17
|
hiddenColKeys?: string[];
|
|
17
18
|
onHiddenColKeysChange?: (hiddenColKeys: string[]) => void;
|
|
18
19
|
sortedColKeys?: string[];
|
|
19
20
|
onSortedColKeysChange?: (sortedColKeys: string[]) => void;
|
|
21
|
+
cacheHiddenColKeys?: string[];
|
|
22
|
+
onCacheHiddenColKeysChange?: (hiddenColKeys: string[]) => void;
|
|
23
|
+
extraHeader?: React.ReactNode;
|
|
24
|
+
extraFooter?: React.ReactNode;
|
|
25
|
+
itemRender?: (item: TableColumnItem) => React.ReactNode;
|
|
20
26
|
drawerProps?: Omit<DrawerProps, 'className'>;
|
|
21
27
|
}
|
package/lib/types/context.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
|
|
|
41
41
|
showColMenu: boolean | undefined;
|
|
42
42
|
onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
|
|
43
43
|
setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
|
|
44
|
-
scrollbar: boolean | import("
|
|
44
|
+
scrollbar: boolean | import("@hi-ui/scrollbar").ScrollbarProps | undefined;
|
|
45
45
|
rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
|
|
46
46
|
cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
|
|
47
47
|
scrollLeft: number;
|
|
@@ -151,7 +151,7 @@ export declare const useTableContext: () => Omit<{
|
|
|
151
151
|
showColMenu: boolean | undefined;
|
|
152
152
|
onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
|
|
153
153
|
setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
|
|
154
|
-
scrollbar: boolean | import("
|
|
154
|
+
scrollbar: boolean | import("@hi-ui/scrollbar").ScrollbarProps | undefined;
|
|
155
155
|
rowClassName: ((record: Record<string, any>, index: number) => string) | undefined;
|
|
156
156
|
cellClassName: ((record: Record<string, any>, column: Record<string, any>, index: number) => string) | undefined;
|
|
157
157
|
scrollLeft: number;
|