@cashub/ui 0.48.14 → 0.48.16
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/Tab/TabList.js +26 -38
- package/Tab/TabPanel.js +20 -13
- package/Tab/TabTab.js +25 -37
- package/Tab/index.js +6 -3
- package/Tab/subComponent/TabListV2.js +18 -11
- package/Tab/subComponent/TabPanelV2.js +20 -16
- package/Tab/subComponent/TabTabV2.js +21 -33
- package/VerticalTab/TabList.js +18 -13
- package/VerticalTab/TabPanel.js +20 -16
- package/VerticalTab/TabTab.js +21 -40
- package/VerticalTab/VerticalTab.js +4 -8
- package/alert/Alert.js +5 -12
- package/animate/Collapse.js +7 -5
- package/animate/Loader.js +7 -18
- package/animate/PulseRing.js +5 -18
- package/animate/Spinner.js +3 -8
- package/backdrop/BaseBackdrop.js +3 -9
- package/backdrop/LoadingBackdrop.js +3 -7
- package/backdrop/ModalBackdrop.js +3 -5
- package/badge/Badge.js +3 -15
- package/badge/BadgeDot.js +3 -8
- package/badge/BadgeFill.js +6 -24
- package/badge/BadgeWithText.js +3 -13
- package/billing/BarChart.js +1 -1
- package/breadcrumb/Breadcrumb.js +3 -42
- package/button/Button.js +20 -88
- package/button/ButtonGroup.js +9 -33
- package/button/IconButton.js +10 -37
- package/button/ScrollToTopButton.js +4 -12
- package/callout/Callout.js +8 -37
- package/chart/BarChart.js +21 -13
- package/chart/DoughnutChart.js +20 -34
- package/chart/LineChart.js +21 -13
- package/chart/SingleBarChart.js +5 -22
- package/chart/utils/centerTextPlugin.js +2 -2
- package/chart/utils/customTooltip.js +8 -8
- package/chart/utils/htmlLegendPlugin.js +1 -1
- package/chart/utils/yAxisTopTitlePlugin.js +1 -1
- package/container/FlexContainer.js +7 -15
- package/cropper/Cropper.js +2 -1
- package/datetimePicker/DatePicker.js +26 -80
- package/datetimePicker/DatePickerV2.js +36 -95
- package/datetimePicker/DatetimePicker.js +11 -174
- package/datetimePicker/DatetimePickerV2.js +33 -87
- package/datetimePicker/DatetimePickerV3.js +11 -174
- package/datetimePicker/TimeInput.js +10 -35
- package/datetimePicker/TimePicker.js +22 -77
- package/datetimePicker/TimePickerStyle.js +3 -53
- package/datetimePicker/TimePickerV2.js +21 -54
- package/datetimePicker/accordion/Month.js +16 -93
- package/datetimePicker/accordion/Year.js +18 -96
- package/datetimePicker/hooks/useChangeNumber.js +6 -3
- package/datetimePicker/hooks/useDecrease.js +6 -3
- package/datetimePicker/hooks/useIncrease.js +6 -3
- package/datetimePicker/subComponent/Accordion.js +20 -101
- package/descriptionList/DescriptionDetail.js +4 -15
- package/descriptionList/DescriptionList.js +4 -12
- package/descriptionList/DescriptionTerm.js +3 -5
- package/divider/Divider.js +6 -15
- package/dropdown/DropdownButtonOption.js +6 -22
- package/dropdown/DropdownContent.js +15 -29
- package/dropdown/DropdownDivOption.js +3 -17
- package/dropdown/DropdownLinkOption.js +3 -14
- package/dropdown/DropdownToggle.js +15 -7
- package/dropzone/FileDropzone.js +22 -121
- package/dropzone/ImageDropzone.js +14 -83
- package/dropzone/subComponent/Message.js +4 -11
- package/figure/IconFigure.js +7 -16
- package/figure/ImageFigure.js +6 -19
- package/file/HiddenFileInput.js +3 -3
- package/form/Checkbox.js +13 -74
- package/form/Fieldset.js +3 -9
- package/form/FormItem.js +5 -10
- package/form/Input.js +7 -40
- package/form/Label.js +10 -34
- package/form/MutedText.js +4 -8
- package/form/PasswordInput.js +13 -20
- package/form/RadioButton.js +8 -55
- package/form/SearchSelect.js +12 -64
- package/form/Searchbox.js +19 -45
- package/form/Slider.js +10 -28
- package/form/SwitchButton.js +14 -48
- package/form/Textarea.js +3 -30
- package/form/TreeView.js +6 -13
- package/grid/Column.js +10 -23
- package/grid/Grid.js +6 -14
- package/heading/Heading1.js +4 -8
- package/heading/Heading2.js +5 -11
- package/heading/Heading3.js +8 -20
- package/iconbox/ApplicationIconBox.js +12 -48
- package/iconbox/IconBox.js +7 -31
- package/iconbox/IconBoxV2.js +8 -33
- package/iconbox/subComponent/IconBoxFigure.js +9 -17
- package/iconbox/subComponent/IconBoxImage.js +8 -21
- package/image/ImageFluid.js +3 -7
- package/image/UploadImage.js +18 -66
- package/jsoneditor/JsonEditor.js +15 -121
- package/keyframe/Pulse.js +3 -13
- package/keyframe/Spin.js +3 -5
- package/layout/Aside.js +5 -30
- package/layout/Backdrop.js +4 -8
- package/layout/Container.js +5 -21
- package/layout/Footer.js +7 -26
- package/link/LinkSpan.js +19 -37
- package/map/GoogleMap.js +7 -3
- package/map/GoogleReverseGeolocation.js +3 -6
- package/map/LeafletMap.js +2 -2
- package/map/subComponent/GoogleMapContainer.js +4 -16
- package/map/subComponent/GoogleMapPopup.js +10 -7
- package/map/subComponent/GoogleMapWrapper.js +15 -8
- package/map/subComponent/LeafletDrawControl.js +7 -9
- package/map/subComponent/LeafletMapContainer.js +4 -159
- package/modal/StateModal.js +62 -69
- package/modal/TitleModal.js +29 -70
- package/package.json +1 -1
- package/page/Disclaimer.js +3 -119
- package/paginate/Paginate.js +12 -54
- package/popover/Popover.js +25 -30
- package/qrcode/QRCode.js +6 -20
- package/qrcode/QRCodeContainter.js +4 -12
- package/ribbon/Ribbon.js +4 -29
- package/section/Section.js +20 -68
- package/section/SectionBody.js +8 -29
- package/section/SectionHeader.js +11 -36
- package/section/SectionToolbar.js +3 -9
- package/section/SectionToolbarItem.js +3 -8
- package/select/InputSelect.js +23 -16
- package/select/Select.js +87 -128
- package/select/subComponent/Checkbox.js +5 -24
- package/select/subComponent/Footer.js +3 -4
- package/select/subComponent/ListBox.js +5 -12
- package/select/subComponent/Option.js +7 -27
- package/select/subComponent/OptionGroup.js +3 -13
- package/select/subComponent/Options.js +5 -18
- package/select/subComponent/SearchBox.js +12 -34
- package/select/subComponent/SelectedMultipleTags.js +3 -21
- package/select/subComponent/SelectedMultipleText.js +4 -20
- package/select/subComponent/SelectedSingle.js +3 -7
- package/styles/GlobalStyle.js +45 -156
- package/styles/mixin/backgroundColor.js +8 -16
- package/styles/mixin/borderColor.js +7 -13
- package/styles/mixin/color.js +7 -13
- package/styles/mixin/colorOnBackground.js +7 -13
- package/styles/mixin/inputPlaceholder.js +3 -20
- package/styles/mixin/media.js +3 -5
- package/styles/mixin/rounded.js +6 -10
- package/styles/mixin/scrollbar.js +3 -13
- package/styles/theme/dark.theme.js +14 -15
- package/styles/theme/light.theme.js +14 -15
- package/styles/theme/white.theme.js +14 -15
- package/table/GridTable.js +33 -71
- package/table/ImageBox.js +5 -15
- package/table/InfiniteGridTable.js +46 -92
- package/table/PermissionTable.js +10 -32
- package/table/SimpleGridTable.js +17 -52
- package/table/Table.js +48 -198
- package/table/__mock__/columns.js +1 -1
- package/table/subComponent/BaseTableHeadCell.js +8 -37
- package/table/subComponent/GridTableFooter.js +4 -10
- package/table/subComponent/GridTableHeadCell.js +4 -6
- package/table/subComponent/Resizer.js +4 -19
- package/table/subComponent/TableFooter.js +6 -15
- package/table/subComponent/TableFooterInfo.js +3 -4
- package/table/subComponent/TableFooterPager.js +6 -19
- package/table/subComponent/TableHeadCell.js +3 -9
- package/table/subComponent/TableSort.js +7 -17
- package/tagify/TagifyStyle.js +3 -49
- package/tagify/Tags.js +21 -37
- package/tagify/templates/getCreateButtonTemplate.js +2 -5
- package/text/Paragraph.js +12 -50
- package/timeline/Timeline.js +17 -94
- package/toast/CustomToastContainer.js +3 -35
- package/toast/MessageContainer.js +4 -22
- package/tooltip/Tooltip.js +19 -47
- package/treeView/TreeViewV2.js +1 -1
- package/treeView/TreeflexStyle.js +3 -38
- package/wizard/Wizard.js +6 -115
|
@@ -5,40 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
|
+
const backgroundColor = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
10
11
|
let {
|
|
11
12
|
primary
|
|
12
13
|
} = _ref;
|
|
13
14
|
return primary && 'background-color: var(--color-primary);';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${_ref2 => {
|
|
15
|
+
}, _ref2 => {
|
|
17
16
|
let {
|
|
18
17
|
success
|
|
19
18
|
} = _ref2;
|
|
20
19
|
return success && 'background-color: var(--color-success);';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${_ref3 => {
|
|
20
|
+
}, _ref3 => {
|
|
24
21
|
let {
|
|
25
22
|
warning
|
|
26
23
|
} = _ref3;
|
|
27
24
|
return warning && 'background-color: var(--color-warning);';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
${_ref4 => {
|
|
25
|
+
}, _ref4 => {
|
|
31
26
|
let {
|
|
32
27
|
danger
|
|
33
28
|
} = _ref4;
|
|
34
29
|
return danger && 'background-color: var(--color-danger);';
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
${_ref5 => {
|
|
30
|
+
}, _ref5 => {
|
|
38
31
|
let {
|
|
39
32
|
grey
|
|
40
33
|
} = _ref5;
|
|
41
34
|
return grey && 'background-color: var(--color-grey);';
|
|
42
|
-
}
|
|
43
|
-
`;
|
|
35
|
+
});
|
|
44
36
|
var _default = exports.default = backgroundColor;
|
|
@@ -5,33 +5,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
|
+
const borderColor = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
10
11
|
let {
|
|
11
12
|
primary
|
|
12
13
|
} = _ref;
|
|
13
14
|
return primary && 'border-color: var(--color-primary);';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${_ref2 => {
|
|
15
|
+
}, _ref2 => {
|
|
17
16
|
let {
|
|
18
17
|
success
|
|
19
18
|
} = _ref2;
|
|
20
19
|
return success && 'border-color: var(--color-success);';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${_ref3 => {
|
|
20
|
+
}, _ref3 => {
|
|
24
21
|
let {
|
|
25
22
|
warning
|
|
26
23
|
} = _ref3;
|
|
27
24
|
return warning && 'border-color: var(--color-warning);';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
${_ref4 => {
|
|
25
|
+
}, _ref4 => {
|
|
31
26
|
let {
|
|
32
27
|
danger
|
|
33
28
|
} = _ref4;
|
|
34
29
|
return danger && 'border-color: var(--color-danger);';
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
30
|
+
});
|
|
37
31
|
var _default = exports.default = borderColor;
|
package/styles/mixin/color.js
CHANGED
|
@@ -5,33 +5,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
|
+
const color = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
10
11
|
let {
|
|
11
12
|
primary
|
|
12
13
|
} = _ref;
|
|
13
14
|
return primary && 'color: var(--color-primary);';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${_ref2 => {
|
|
15
|
+
}, _ref2 => {
|
|
17
16
|
let {
|
|
18
17
|
success
|
|
19
18
|
} = _ref2;
|
|
20
19
|
return success && 'color: var(--color-success);';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${_ref3 => {
|
|
20
|
+
}, _ref3 => {
|
|
24
21
|
let {
|
|
25
22
|
warning
|
|
26
23
|
} = _ref3;
|
|
27
24
|
return warning && 'color: var(--color-warning);';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
${_ref4 => {
|
|
25
|
+
}, _ref4 => {
|
|
31
26
|
let {
|
|
32
27
|
danger
|
|
33
28
|
} = _ref4;
|
|
34
29
|
return danger && 'color: var(--color-danger);';
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
30
|
+
});
|
|
37
31
|
var _default = exports.default = color;
|
|
@@ -5,33 +5,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
|
+
const colorOnBackground = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
10
11
|
let {
|
|
11
12
|
primary
|
|
12
13
|
} = _ref;
|
|
13
14
|
return primary && 'color: var(--font-on-primary);';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${_ref2 => {
|
|
15
|
+
}, _ref2 => {
|
|
17
16
|
let {
|
|
18
17
|
success
|
|
19
18
|
} = _ref2;
|
|
20
19
|
return success && 'color: var(--font-on-success);';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${_ref3 => {
|
|
20
|
+
}, _ref3 => {
|
|
24
21
|
let {
|
|
25
22
|
warning
|
|
26
23
|
} = _ref3;
|
|
27
24
|
return warning && 'color: var(--font-on-warning);';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
${_ref4 => {
|
|
25
|
+
}, _ref4 => {
|
|
31
26
|
let {
|
|
32
27
|
danger
|
|
33
28
|
} = _ref4;
|
|
34
29
|
return danger && 'color: var(--font-on-danger);';
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
30
|
+
});
|
|
37
31
|
var _default = exports.default = colorOnBackground;
|
|
@@ -5,26 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
8
10
|
const inputPlaceholder = function () {
|
|
9
|
-
return (0, _styledComponents.css)
|
|
10
|
-
::placeholder {
|
|
11
|
-
${(0, _styledComponents.css)(...arguments)}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
::-moz-placeholder {
|
|
15
|
-
${(0, _styledComponents.css)(...arguments)}
|
|
16
|
-
opacity: 1;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// Internet Explorer 10+
|
|
20
|
-
:-ms-input-placeholder {
|
|
21
|
-
${(0, _styledComponents.css)(...arguments)}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Safari and Chrome
|
|
25
|
-
::-webkit-input-placeholder {
|
|
26
|
-
${(0, _styledComponents.css)(...arguments)}
|
|
27
|
-
}
|
|
28
|
-
`;
|
|
11
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ::placeholder {\n ", "\n }\n\n ::-moz-placeholder {\n ", "\n opacity: 1;\n }\n\n // Internet Explorer 10+\n :-ms-input-placeholder {\n ", "\n }\n\n // Safari and Chrome\n ::-webkit-input-placeholder {\n ", "\n }\n "])), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments));
|
|
29
12
|
};
|
|
30
13
|
var _default = exports.default = inputPlaceholder;
|
package/styles/mixin/media.js
CHANGED
|
@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
8
|
var _breakpoint = _interopRequireDefault(require("../config/breakpoint.style"));
|
|
9
|
+
var _templateObject;
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
12
|
// Iterate through the breakpoint and create a media template
|
|
11
13
|
const media = Object.keys(_breakpoint.default).reduce((func, label) => {
|
|
12
14
|
func[label] = function () {
|
|
13
|
-
return (0, _styledComponents.css)
|
|
14
|
-
@media (max-width: ${_breakpoint.default[label]}px) {
|
|
15
|
-
${(0, _styledComponents.css)(...arguments)}
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
15
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n @media (max-width: ", "px) {\n ", "\n }\n "])), _breakpoint.default[label], (0, _styledComponents.css)(...arguments));
|
|
18
16
|
};
|
|
19
17
|
return func;
|
|
20
18
|
}, {});
|
package/styles/mixin/rounded.js
CHANGED
|
@@ -5,26 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
10
|
+
const rounded = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
|
|
10
11
|
let {
|
|
11
12
|
roundedS
|
|
12
13
|
} = _ref;
|
|
13
14
|
return roundedS && 'border-radius: var(--border-radius-s);';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${_ref2 => {
|
|
15
|
+
}, _ref2 => {
|
|
17
16
|
let {
|
|
18
17
|
rounded
|
|
19
18
|
} = _ref2;
|
|
20
19
|
return rounded && 'border-radius: var(--border-radius);';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${_ref3 => {
|
|
20
|
+
}, _ref3 => {
|
|
24
21
|
let {
|
|
25
22
|
roundedCircle
|
|
26
23
|
} = _ref3;
|
|
27
24
|
return roundedCircle && 'border-radius: var(--border-radius-round);';
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
25
|
+
});
|
|
30
26
|
var _default = exports.default = rounded;
|
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = require("styled-components");
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
8
10
|
const scrollbar = _ref => {
|
|
9
11
|
let {
|
|
10
12
|
size
|
|
@@ -15,18 +17,6 @@ const scrollbar = _ref => {
|
|
|
15
17
|
scrollbarWidth = '24px';
|
|
16
18
|
thumbWidth = '8px';
|
|
17
19
|
}
|
|
18
|
-
return (0, _styledComponents.css)
|
|
19
|
-
&::-webkit-scrollbar {
|
|
20
|
-
width: ${scrollbarWidth};
|
|
21
|
-
height: ${scrollbarWidth};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&::-webkit-scrollbar-thumb {
|
|
25
|
-
background-color: var(--color-scroll-bar);
|
|
26
|
-
background-clip: padding-box;
|
|
27
|
-
border: ${thumbWidth} solid transparent;
|
|
28
|
-
border-radius: var(--border-radius);
|
|
29
|
-
}
|
|
30
|
-
`;
|
|
20
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &::-webkit-scrollbar {\n width: ", ";\n height: ", ";\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--color-scroll-bar);\n background-clip: padding-box;\n border: ", " solid transparent;\n border-radius: var(--border-radius);\n }\n "])), scrollbarWidth, scrollbarWidth, thumbWidth);
|
|
31
21
|
};
|
|
32
22
|
var _default = exports.default = scrollbar;
|
|
@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
10
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
11
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
12
|
// Currently, some style is all same for all viewport size
|
|
8
13
|
// Common color style
|
|
9
14
|
const colorStyle = {
|
|
@@ -45,12 +50,10 @@ const fontStyle = {
|
|
|
45
50
|
|
|
46
51
|
// Theme stylesheet
|
|
47
52
|
const darkTheme = {
|
|
48
|
-
desktop: {
|
|
49
|
-
...fontStyle,
|
|
50
|
-
...colorStyle,
|
|
53
|
+
desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
51
54
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
52
55
|
borderColor: colorStyle.colorGrey,
|
|
53
|
-
borderColorTransparent:
|
|
56
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
54
57
|
borderWidth: '1px',
|
|
55
58
|
borderRadiusS: '0.5rem',
|
|
56
59
|
borderRadius: '1rem',
|
|
@@ -60,13 +63,11 @@ const darkTheme = {
|
|
|
60
63
|
spacerS: '1rem',
|
|
61
64
|
spacer: '1.5rem',
|
|
62
65
|
spacerL: '2rem'
|
|
63
|
-
},
|
|
64
|
-
tablet: {
|
|
65
|
-
...fontStyle,
|
|
66
|
-
...colorStyle,
|
|
66
|
+
}),
|
|
67
|
+
tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
67
68
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
68
69
|
borderColor: colorStyle.colorGrey,
|
|
69
|
-
borderColorTransparent:
|
|
70
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
70
71
|
borderWidth: '1px',
|
|
71
72
|
borderRadiusS: '0.5rem',
|
|
72
73
|
borderRadius: '1rem',
|
|
@@ -76,13 +77,11 @@ const darkTheme = {
|
|
|
76
77
|
spacerS: '0.75rem',
|
|
77
78
|
spacer: '1rem',
|
|
78
79
|
spacerL: '1.25rem'
|
|
79
|
-
},
|
|
80
|
-
mobile: {
|
|
81
|
-
...fontStyle,
|
|
82
|
-
...colorStyle,
|
|
80
|
+
}),
|
|
81
|
+
mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
83
82
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
84
83
|
borderColor: colorStyle.colorGrey,
|
|
85
|
-
borderColorTransparent:
|
|
84
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
86
85
|
borderWidth: '1px',
|
|
87
86
|
borderRadiusS: '0.5rem',
|
|
88
87
|
borderRadius: '1rem',
|
|
@@ -92,6 +91,6 @@ const darkTheme = {
|
|
|
92
91
|
spacerS: '0.75rem',
|
|
93
92
|
spacer: '1rem',
|
|
94
93
|
spacerL: '1.25rem'
|
|
95
|
-
}
|
|
94
|
+
})
|
|
96
95
|
};
|
|
97
96
|
var _default = exports.default = darkTheme;
|
|
@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
10
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
11
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
12
|
// Currently, some style is all same for all viewport size
|
|
8
13
|
// Common color style
|
|
9
14
|
const colorStyle = {
|
|
@@ -45,12 +50,10 @@ const fontStyle = {
|
|
|
45
50
|
|
|
46
51
|
// Theme stylesheet
|
|
47
52
|
const lightTheme = {
|
|
48
|
-
desktop: {
|
|
49
|
-
...fontStyle,
|
|
50
|
-
...colorStyle,
|
|
53
|
+
desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
51
54
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
52
55
|
borderColor: colorStyle.colorGrey,
|
|
53
|
-
borderColorTransparent:
|
|
56
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
54
57
|
borderWidth: '1px',
|
|
55
58
|
borderRadiusS: '0.5rem',
|
|
56
59
|
borderRadius: '1rem',
|
|
@@ -60,13 +63,11 @@ const lightTheme = {
|
|
|
60
63
|
spacerS: '1rem',
|
|
61
64
|
spacer: '1.5rem',
|
|
62
65
|
spacerL: '2rem'
|
|
63
|
-
},
|
|
64
|
-
tablet: {
|
|
65
|
-
...fontStyle,
|
|
66
|
-
...colorStyle,
|
|
66
|
+
}),
|
|
67
|
+
tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
67
68
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
68
69
|
borderColor: colorStyle.colorGrey,
|
|
69
|
-
borderColorTransparent:
|
|
70
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
70
71
|
borderWidth: '1px',
|
|
71
72
|
borderRadiusS: '0.5rem',
|
|
72
73
|
borderRadius: '1rem',
|
|
@@ -76,13 +77,11 @@ const lightTheme = {
|
|
|
76
77
|
spacerS: '0.75rem',
|
|
77
78
|
spacer: '1rem',
|
|
78
79
|
spacerL: '1.25rem'
|
|
79
|
-
},
|
|
80
|
-
mobile: {
|
|
81
|
-
...fontStyle,
|
|
82
|
-
...colorStyle,
|
|
80
|
+
}),
|
|
81
|
+
mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
83
82
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
84
83
|
borderColor: colorStyle.colorGrey,
|
|
85
|
-
borderColorTransparent:
|
|
84
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
86
85
|
borderWidth: '1px',
|
|
87
86
|
borderRadiusS: '0.5rem',
|
|
88
87
|
borderRadius: '1rem',
|
|
@@ -92,6 +91,6 @@ const lightTheme = {
|
|
|
92
91
|
spacerS: '0.75rem',
|
|
93
92
|
spacer: '1rem',
|
|
94
93
|
spacerL: '1.25rem'
|
|
95
|
-
}
|
|
94
|
+
})
|
|
96
95
|
};
|
|
97
96
|
var _default = exports.default = lightTheme;
|
|
@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
10
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
11
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
12
|
// Currently, some style is all same for all viewport size
|
|
8
13
|
// Common color style
|
|
9
14
|
const colorStyle = {
|
|
@@ -45,12 +50,10 @@ const fontStyle = {
|
|
|
45
50
|
|
|
46
51
|
// Theme stylesheet
|
|
47
52
|
const whiteTheme = {
|
|
48
|
-
desktop: {
|
|
49
|
-
...fontStyle,
|
|
50
|
-
...colorStyle,
|
|
53
|
+
desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
51
54
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
52
55
|
borderColor: colorStyle.colorGrey,
|
|
53
|
-
borderColorTransparent:
|
|
56
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
54
57
|
borderWidth: '1px',
|
|
55
58
|
borderRadiusS: '0.5rem',
|
|
56
59
|
borderRadius: '1rem',
|
|
@@ -60,13 +63,11 @@ const whiteTheme = {
|
|
|
60
63
|
spacerS: '1rem',
|
|
61
64
|
spacer: '1.5rem',
|
|
62
65
|
spacerL: '2rem'
|
|
63
|
-
},
|
|
64
|
-
tablet: {
|
|
65
|
-
...fontStyle,
|
|
66
|
-
...colorStyle,
|
|
66
|
+
}),
|
|
67
|
+
tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
67
68
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
68
69
|
borderColor: colorStyle.colorGrey,
|
|
69
|
-
borderColorTransparent:
|
|
70
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
70
71
|
borderWidth: '1px',
|
|
71
72
|
borderRadiusS: '0.5rem',
|
|
72
73
|
borderRadius: '1rem',
|
|
@@ -76,13 +77,11 @@ const whiteTheme = {
|
|
|
76
77
|
spacerS: '0.75rem',
|
|
77
78
|
spacer: '1rem',
|
|
78
79
|
spacerL: '1.25rem'
|
|
79
|
-
},
|
|
80
|
-
mobile: {
|
|
81
|
-
...fontStyle,
|
|
82
|
-
...colorStyle,
|
|
80
|
+
}),
|
|
81
|
+
mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
83
82
|
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
84
83
|
borderColor: colorStyle.colorGrey,
|
|
85
|
-
borderColorTransparent:
|
|
84
|
+
borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
|
|
86
85
|
borderWidth: '1px',
|
|
87
86
|
borderRadiusS: '0.5rem',
|
|
88
87
|
borderRadius: '1rem',
|
|
@@ -92,6 +91,6 @@ const whiteTheme = {
|
|
|
92
91
|
spacerS: '0.75rem',
|
|
93
92
|
spacer: '1rem',
|
|
94
93
|
spacerL: '1.25rem'
|
|
95
|
-
}
|
|
94
|
+
})
|
|
96
95
|
};
|
|
97
96
|
var _default = exports.default = whiteTheme;
|
package/table/GridTable.js
CHANGED
|
@@ -17,7 +17,17 @@ var _Paginate = _interopRequireDefault(require("../paginate/Paginate"));
|
|
|
17
17
|
var _Select = _interopRequireDefault(require("../select/Select"));
|
|
18
18
|
var _Popover = _interopRequireDefault(require("../popover/Popover"));
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
21
|
+
const _excluded = ["title", "fieldName", "render", "custom"];
|
|
20
22
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
24
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
25
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
26
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
29
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
30
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
21
31
|
const GridTable = _ref => {
|
|
22
32
|
let {
|
|
23
33
|
columns,
|
|
@@ -46,10 +56,7 @@ const GridTable = _ref => {
|
|
|
46
56
|
info: 'Showing _START_ to _END_ of _TOTAL_ entries',
|
|
47
57
|
empty: 'No data available in table'
|
|
48
58
|
};
|
|
49
|
-
return {
|
|
50
|
-
...defaultTexts,
|
|
51
|
-
...translation
|
|
52
|
-
};
|
|
59
|
+
return _objectSpread(_objectSpread({}, defaultTexts), translation);
|
|
53
60
|
}, [translation]);
|
|
54
61
|
const handleSortChange = (0, _react.useCallback)(columnName => {
|
|
55
62
|
if (onSortChange) {
|
|
@@ -127,7 +134,7 @@ const GridTable = _ref => {
|
|
|
127
134
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {
|
|
128
135
|
onResize: handleResize
|
|
129
136
|
})]
|
|
130
|
-
},
|
|
137
|
+
}, "TH".concat(index));
|
|
131
138
|
});
|
|
132
139
|
tableHeads.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridTableHeadCell.default, {
|
|
133
140
|
role: "presentation",
|
|
@@ -143,12 +150,12 @@ const GridTable = _ref => {
|
|
|
143
150
|
return data.map((row, rowIndex) => {
|
|
144
151
|
const tds = columns.map((column, columnIndex) => {
|
|
145
152
|
const {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
153
|
+
title,
|
|
154
|
+
fieldName,
|
|
155
|
+
render,
|
|
156
|
+
custom
|
|
157
|
+
} = column,
|
|
158
|
+
props = _objectWithoutProperties(column, _excluded);
|
|
152
159
|
const key = rowIndex + columnIndex.toString();
|
|
153
160
|
let renderedData = null;
|
|
154
161
|
if (custom && render) {
|
|
@@ -162,12 +169,12 @@ const GridTable = _ref => {
|
|
|
162
169
|
children: render ? render(row[fieldName], row) : String(row[fieldName])
|
|
163
170
|
});
|
|
164
171
|
}
|
|
165
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
|
|
172
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, _objectSpread(_objectSpread({
|
|
166
173
|
"data-label": title,
|
|
167
|
-
backgroundReverse: backgroundReverse
|
|
168
|
-
|
|
174
|
+
backgroundReverse: backgroundReverse
|
|
175
|
+
}, props), {}, {
|
|
169
176
|
children: renderedData
|
|
170
|
-
}, columnIndex);
|
|
177
|
+
}), columnIndex);
|
|
171
178
|
});
|
|
172
179
|
tds.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
|
|
173
180
|
role: "presentation",
|
|
@@ -257,80 +264,35 @@ const GridTable = _ref => {
|
|
|
257
264
|
})]
|
|
258
265
|
});
|
|
259
266
|
};
|
|
260
|
-
const TableWrapper = _styledComponents.default.div
|
|
261
|
-
overflow: hidden;
|
|
262
|
-
background: ${_ref2 => {
|
|
267
|
+
const TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n background: ", ";\n"])), _ref2 => {
|
|
263
268
|
let {
|
|
264
269
|
backgroundReverse
|
|
265
270
|
} = _ref2;
|
|
266
271
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
const
|
|
270
|
-
/* make fixed width work */
|
|
271
|
-
width: 0px;
|
|
272
|
-
color: var(--font-on-background);
|
|
273
|
-
table-layout: fixed;
|
|
274
|
-
border-collapse: collapse;
|
|
275
|
-
`;
|
|
276
|
-
const TD = _styledComponents.default.td`
|
|
277
|
-
height: 48px;
|
|
278
|
-
padding: 0 var(--spacing-xs);
|
|
279
|
-
border-top: 1px solid var(--border-color);
|
|
280
|
-
border-right: 1px solid var(--border-color);
|
|
281
|
-
border-bottom: 1px solid var(--border-color);
|
|
282
|
-
text-align: ${_ref3 => {
|
|
272
|
+
});
|
|
273
|
+
const ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* make fixed width work */\n width: 0px;\n color: var(--font-on-background);\n table-layout: fixed;\n border-collapse: collapse;\n"])));
|
|
274
|
+
const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 48px;\n padding: 0 var(--spacing-xs);\n border-top: 1px solid var(--border-color);\n border-right: 1px solid var(--border-color);\n border-bottom: 1px solid var(--border-color);\n text-align: ", ";\n background: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n > span {\n display: inline-block;\n width: 100%;\n padding: 0 2px;\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n }\n"])), _ref3 => {
|
|
283
275
|
let {
|
|
284
276
|
center
|
|
285
277
|
} = _ref3;
|
|
286
278
|
return center ? 'center' : 'left';
|
|
287
|
-
}
|
|
288
|
-
background: ${_ref4 => {
|
|
279
|
+
}, _ref4 => {
|
|
289
280
|
let {
|
|
290
281
|
backgroundReverse
|
|
291
282
|
} = _ref4;
|
|
292
283
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
&:last-child {
|
|
296
|
-
border-right: none;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
> span {
|
|
300
|
-
display: inline-block;
|
|
301
|
-
width: 100%;
|
|
302
|
-
padding: 0 2px;
|
|
303
|
-
overflow: hidden;
|
|
304
|
-
white-space: pre;
|
|
305
|
-
text-overflow: ellipsis;
|
|
306
|
-
}
|
|
307
|
-
`;
|
|
308
|
-
const Scrollbar = _styledComponents.default.div`
|
|
309
|
-
position: sticky;
|
|
310
|
-
bottom: 48px;
|
|
311
|
-
width: 100%;
|
|
312
|
-
overflow: auto;
|
|
313
|
-
background: ${_ref5 => {
|
|
284
|
+
});
|
|
285
|
+
const Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: sticky;\n bottom: 48px;\n width: 100%;\n overflow: auto;\n background: ", ";\n\n ::before {\n display: block;\n content: '';\n width: ", ";\n height: 1px;\n }\n\n ", "\n"])), _ref5 => {
|
|
314
286
|
let {
|
|
315
287
|
backgroundReverse
|
|
316
288
|
} = _ref5;
|
|
317
289
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
::before {
|
|
321
|
-
display: block;
|
|
322
|
-
content: '';
|
|
323
|
-
width: ${_ref6 => {
|
|
290
|
+
}, _ref6 => {
|
|
324
291
|
let {
|
|
325
292
|
width
|
|
326
293
|
} = _ref6;
|
|
327
|
-
return
|
|
328
|
-
}
|
|
329
|
-
height: 1px;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
${(0, _scrollbar.default)({
|
|
294
|
+
return "".concat(width, "px");
|
|
295
|
+
}, (0, _scrollbar.default)({
|
|
333
296
|
size: 'large'
|
|
334
|
-
})
|
|
335
|
-
`;
|
|
297
|
+
}));
|
|
336
298
|
var _default = exports.default = GridTable;
|