@longline/aqua-ui 1.0.32 → 1.0.34
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/Types.d.ts +5 -1
- package/controls/Gradient/Gradient.d.ts +26 -0
- package/controls/Gradient/Gradient.js +45 -0
- package/controls/Gradient/PresetGradients.d.ts +6 -0
- package/controls/Gradient/PresetGradients.js +14 -0
- package/controls/Gradient/index.d.ts +2 -0
- package/controls/Gradient/index.js +2 -0
- package/controls/ListView/Ghost.js +2 -2
- package/controls/ListView/IListViewProps.d.ts +5 -0
- package/controls/ListView/ListView.d.ts +1 -1
- package/controls/ListView/ListView.js +2 -2
- package/controls/ListView/Table.js +4 -5
- package/map/layers/InterpolationLayer/InterpolationLayer.d.ts +1 -1
- package/map/layers/ParticlesLayer/ParticlesLayer.d.ts +1 -1
- package/modules/ParticleGlobe/ParticleGlobe.d.ts +1 -1
- package/package.json +1 -1
- package/map/layers/InterpolationLayer/IGradientStop.d.ts +0 -5
- package/map/layers/InterpolationLayer/IGradientStop.js +0 -1
package/Types.d.ts
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IGradientStop } from '../../Types';
|
|
3
|
+
interface IProps {
|
|
4
|
+
/** @ignore */
|
|
5
|
+
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Array of `IGradientStop`.
|
|
8
|
+
* The `PresetGradients` class offers preset gradients.
|
|
9
|
+
*/
|
|
10
|
+
gradientStops: IGradientStop[];
|
|
11
|
+
/**
|
|
12
|
+
* Gradient thickness in pixels.
|
|
13
|
+
* @default 5
|
|
14
|
+
*/
|
|
15
|
+
thickness?: number;
|
|
16
|
+
/**
|
|
17
|
+
* If set, gradient is rounded.
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
20
|
+
rounded?: boolean;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
|
|
24
|
+
*/
|
|
25
|
+
declare const Gradient: ({ thickness, ...props }: IProps) => React.JSX.Element;
|
|
26
|
+
export { Gradient };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
19
|
+
t[p] = s[p];
|
|
20
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
21
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
22
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
23
|
+
t[p[i]] = s[p[i]];
|
|
24
|
+
}
|
|
25
|
+
return t;
|
|
26
|
+
};
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
import styled, { css } from 'styled-components';
|
|
29
|
+
var GradientBase = function (props) {
|
|
30
|
+
return React.createElement("div", { className: props.className });
|
|
31
|
+
};
|
|
32
|
+
var GradientStyled = styled(GradientBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: ", "px;\n background: linear-gradient(to right, ", ");\n ", "\n"], ["\n position: relative;\n height: ", "px;\n background: linear-gradient(to right, ", ");\n ", "\n"
|
|
33
|
+
/**
|
|
34
|
+
* A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
|
|
35
|
+
*/
|
|
36
|
+
])), function (p) { return p.thickness; }, function (p) { return p.gradientStops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '); }, function (p) { return p.rounded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), p.thickness / 2); });
|
|
37
|
+
/**
|
|
38
|
+
* A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
|
|
39
|
+
*/
|
|
40
|
+
var Gradient = function (_a) {
|
|
41
|
+
var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, props = __rest(_a, ["thickness"]);
|
|
42
|
+
return React.createElement(GradientStyled, __assign({ thickness: thickness }, props));
|
|
43
|
+
};
|
|
44
|
+
export { Gradient };
|
|
45
|
+
var templateObject_1, templateObject_2;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
var PresetGradients = /** @class */ (function () {
|
|
2
|
+
function PresetGradients() {
|
|
3
|
+
}
|
|
4
|
+
PresetGradients.Bathymetry = [
|
|
5
|
+
{ pos: 0.0, color: '#0000ffff' },
|
|
6
|
+
{ pos: 1.0, color: '#000000ff' }
|
|
7
|
+
];
|
|
8
|
+
PresetGradients.Oxygen = [
|
|
9
|
+
{ pos: 0.0, color: 'red' },
|
|
10
|
+
{ pos: 1.0, color: 'crimson' }
|
|
11
|
+
];
|
|
12
|
+
return PresetGradients;
|
|
13
|
+
}());
|
|
14
|
+
export { PresetGradients };
|
|
@@ -31,7 +31,7 @@ var GhostStyled = styled(GhostBase).attrs(function (p) {
|
|
|
31
31
|
fg: p.dark ? p.theme.colors.primary[1] : p.theme.colors.primary[1],
|
|
32
32
|
bg: p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]
|
|
33
33
|
};
|
|
34
|
-
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background: ", ";\n\n display: grid;\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n grid-template-rows:
|
|
34
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background: ", ";\n\n display: grid;\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n grid-template-rows: ", "px;\n\n div.mask1 {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n mask: linear-gradient(to bottom, transparent 0, transparent ", "px, black ", "px, transparent ", "px, transparent 100%) repeat-y 0 0/100% ", "px;\n animation: ", " 0.8s linear infinite;\n }\n\n div.mask2 {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n mask: linear-gradient(to bottom, transparent 0, transparent ", "px, black 100%) repeat-y 0 0/100% ", "px;\n animation: ", " 0.8s linear infinite;\n }\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background: ", ";\n\n display: grid;\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n grid-template-rows: ", "px;\n\n div.mask1 {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n mask: linear-gradient(to bottom, transparent 0, transparent ", "px, black ", "px, transparent ", "px, transparent 100%) repeat-y 0 0/100% ", "px;\n animation: ", " 0.8s linear infinite;\n }\n\n div.mask2 {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n mask: linear-gradient(to bottom, transparent 0, transparent ", "px, black 100%) repeat-y 0 0/100% ", "px;\n animation: ", " 0.8s linear infinite;\n }\n"])), function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) {
|
|
35
35
|
// Prefix a check column?
|
|
36
36
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
37
37
|
// Actual columns:
|
|
@@ -46,7 +46,7 @@ var GhostStyled = styled(GhostBase).attrs(function (p) {
|
|
|
46
46
|
// Postfix an columns management column?
|
|
47
47
|
.concat(p.columnsEditable ? ['48px'] : [])
|
|
48
48
|
.join(" ");
|
|
49
|
-
}, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, Pulse2);
|
|
49
|
+
}, function (p) { return p.rowHeight; }, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight; }, function (p) { return p.rowHeight * 2; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight * 2 - 1; }, function (p) { return p.rowHeight * 2; }, Pulse2);
|
|
50
50
|
var Ghost = function (props) { return React.createElement(GhostStyled, __assign({}, props)); };
|
|
51
51
|
export { Ghost };
|
|
52
52
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -11,7 +11,7 @@ interface IProps extends IListViewProps {
|
|
|
11
11
|
children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
|
|
12
12
|
}
|
|
13
13
|
declare const ListView: {
|
|
14
|
-
({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, columnsEditable, ...props }: IProps): React.JSX.Element;
|
|
14
|
+
({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, ...props }: IProps): React.JSX.Element;
|
|
15
15
|
Column: {
|
|
16
16
|
(_: IColumnProps): null;
|
|
17
17
|
displayName: string;
|
|
@@ -90,8 +90,8 @@ var ListViewBase = function (props) {
|
|
|
90
90
|
};
|
|
91
91
|
// Wrapper for default values:
|
|
92
92
|
var ListView = function (_a) {
|
|
93
|
-
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.columnsEditable, columnsEditable =
|
|
94
|
-
return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, columnsEditable: columnsEditable }, props));
|
|
93
|
+
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable"]);
|
|
94
|
+
return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable }, props));
|
|
95
95
|
};
|
|
96
96
|
ListView.Column = Column;
|
|
97
97
|
export { ListView };
|
|
@@ -33,7 +33,7 @@ import { Total } from './Total';
|
|
|
33
33
|
import { NoData } from './NoData';
|
|
34
34
|
import { ColumnsManager } from './ColumnsManager/ColumnsManager';
|
|
35
35
|
import { Anchor } from '../../containers/Anchor';
|
|
36
|
-
var
|
|
36
|
+
var HEADER_HEIGHT = 48;
|
|
37
37
|
var TableBase = function (_a) {
|
|
38
38
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
39
39
|
var scrollPos = React.useRef(0);
|
|
@@ -51,9 +51,8 @@ var TableBase = function (_a) {
|
|
|
51
51
|
scrollPos.current = offset;
|
|
52
52
|
}
|
|
53
53
|
var pos = props.data.indexOf(props.active);
|
|
54
|
-
var ROWHEIGHT =
|
|
55
|
-
var
|
|
56
|
-
var top = Math.min(wrapperRef.current.clientHeight - auxRef.current.clientHeight - 16, Math.max(HEADERHEIGHT, -offset + HEADERHEIGHT + pos * ROWHEIGHT)) + "px";
|
|
54
|
+
var ROWHEIGHT = props.rowHeight;
|
|
55
|
+
var top = Math.min(wrapperRef.current.clientHeight - auxRef.current.clientHeight - 16, Math.max(HEADER_HEIGHT, -offset + HEADER_HEIGHT + pos * ROWHEIGHT)) + "px";
|
|
57
56
|
auxRef.current.style.top = top;
|
|
58
57
|
};
|
|
59
58
|
React.useEffect(function () { setAuxPosition(); }, [props.active]);
|
|
@@ -78,7 +77,7 @@ var TableBase = function (_a) {
|
|
|
78
77
|
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n"], ["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n"])));
|
|
79
78
|
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
80
79
|
var Inner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"])));
|
|
81
|
-
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n\n // Grid:\n display: grid;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n\n // Grid:\n display: grid;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"])),
|
|
80
|
+
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"])), HEADER_HEIGHT, function (p) { return p.rowHeight; }, function (p) {
|
|
82
81
|
// Prefix a check column?
|
|
83
82
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
84
83
|
// Actual columns:
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|