@rio-cloud/rio-uikit 0.16.0-beta-4 → 0.16.1-beta-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/lib/components/pager/Pager.js +114 -0
- package/lib/components/selects/Select.js +18 -14
- package/lib/components/table/TableSettingsColumnButtons.js +7 -6
- package/lib/components/table/TableSettingsColumnDetails.js +58 -103
- package/lib/components/table/TableSettingsDialog.js +26 -32
- package/lib/components/table/TableSettingsDialogFooter.js +15 -13
- package/lib/components/table/TableSettingsListContainer.js +55 -20
- package/lib/components/table/TableSettingsListItem.js +66 -27
- package/lib/components/table/tableSettingsPropTypes.js +18 -0
- package/lib/es/Pager.d.ts +11 -0
- package/lib/es/Pager.js +15 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +8 -0
- package/lib/style/css/_exports/rio-buyButton.less +1 -1
- package/lib/style/css/_exports/rio-uikit-core.less +5 -1
- package/lib/style/css/_exports/rio-website.less +15 -10
- package/lib/style/css/_exports/vw-uikit.less +1 -1
- package/lib/style/css/components/ApplicationHeader.less +1 -1
- package/lib/style/css/components/AssetTree.less +2 -2
- package/lib/style/css/components/Dialog.less +13 -11
- package/lib/style/css/components/Dropdown.less +0 -1
- package/lib/style/css/components/Select.less +1 -0
- package/lib/style/css/components/Tooltip.less +0 -39
- package/lib/style/css/design/list-group.less +7 -2
- package/lib/style/css/design/responsive/_imports.less +0 -1
- package/lib/style/css/design/responsive/flexgrid.less +14 -14
- package/lib/style/css/design/responsive/position.less +9 -8
- package/lib/style/css/design/responsive/sizing.less +0 -19
- package/lib/style/css/design/sizing.less +18 -0
- package/lib/style/css/design/tables.less +1 -0
- package/lib/style/css/design/theme.less +6 -0
- package/lib/style/css/design/visibility.less +186 -0
- package/lib/style/css/filter/_imports.less +1 -0
- package/lib/style/css/filter/blur.less +17 -0
- package/lib/style/fonts/rioglyph/rioglyph.less +11 -1
- package/lib/style/fonts/rioglyph/rioglyph.svg +20 -8
- package/lib/style/fonts/rioglyph/rioglyph.ttf +0 -0
- package/lib/style/fonts/rioglyph/rioglyph.woff +0 -0
- package/lib/types.ts +15 -0
- package/lib/version.json +1 -1
- package/package.json +11 -9
|
@@ -29,36 +29,36 @@ var TableSettingsDialogFooter = function TableSettingsDialogFooter(props) {
|
|
|
29
29
|
onApplyChanges = props.onApplyChanges;
|
|
30
30
|
var restButtonClassNames = (0, _classnames.default)('btn', 'btn-link', !hasChanged && 'disabled');
|
|
31
31
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className:
|
|
32
|
+
className: "pull-left"
|
|
33
33
|
}, !isResetAll && /*#__PURE__*/_react.default.createElement("div", {
|
|
34
34
|
className: restButtonClassNames,
|
|
35
35
|
onClick: onResetColumnChanges
|
|
36
36
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
37
|
-
className:
|
|
37
|
+
className: "rioglyph rioglyph-revert text-size-xs margin-right-10"
|
|
38
38
|
}), resetButtonText), isResetAll && /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className:
|
|
39
|
+
className: "btn-group"
|
|
40
40
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
|
-
className:
|
|
41
|
+
className: "btn btn-icon-only btn-default margin-right-5 btn-outline",
|
|
42
42
|
onClick: onCancelResetColumnChanges
|
|
43
43
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
44
|
-
className:
|
|
44
|
+
className: "rioglyph rioglyph-remove"
|
|
45
45
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
-
className:
|
|
46
|
+
className: "btn btn-primary btn-icon-only",
|
|
47
47
|
onClick: onConfirmResetColumnChanges
|
|
48
48
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
49
|
-
className:
|
|
49
|
+
className: "rioglyph rioglyph-ok"
|
|
50
50
|
})))), immediateChange ? /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className:
|
|
51
|
+
className: "pull-right"
|
|
52
52
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
-
className:
|
|
53
|
+
className: "btn btn-default",
|
|
54
54
|
onClick: onHide
|
|
55
55
|
}, closeButtonText)) : /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
-
className:
|
|
56
|
+
className: "pull-right"
|
|
57
57
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
-
className:
|
|
58
|
+
className: "btn btn-default",
|
|
59
59
|
onClick: onDiscardChanges
|
|
60
60
|
}, cancelButtonText), /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
-
className:
|
|
61
|
+
className: "btn btn-primary",
|
|
62
62
|
onClick: onApplyChanges
|
|
63
63
|
}, applyButtonText)));
|
|
64
64
|
};
|
|
@@ -96,5 +96,7 @@ TableSettingsDialogFooter.propTypes = {
|
|
|
96
96
|
onHide: _propTypes.default.func,
|
|
97
97
|
onResetColumnChanges: _propTypes.default.func,
|
|
98
98
|
onDiscardChanges: _propTypes.default.func,
|
|
99
|
-
onApplyChanges: _propTypes.default.func
|
|
99
|
+
onApplyChanges: _propTypes.default.func,
|
|
100
|
+
onConfirmResetColumnChanges: _propTypes.default.func,
|
|
101
|
+
onCancelResetColumnChanges: _propTypes.default.func
|
|
100
102
|
};
|
|
@@ -2,47 +2,82 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
|
-
exports.
|
|
10
|
+
exports.TableSettingsListContainer = void 0;
|
|
9
11
|
|
|
10
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
13
|
|
|
12
|
-
var
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
19
|
|
|
14
|
-
var
|
|
20
|
+
var _core = require("@dnd-kit/core");
|
|
15
21
|
|
|
16
|
-
var
|
|
22
|
+
var _sortable = require("@dnd-kit/sortable");
|
|
23
|
+
|
|
24
|
+
var _modifiers = require("@dnd-kit/modifiers");
|
|
17
25
|
|
|
18
26
|
var _TableSettingsListItem = _interopRequireDefault(require("./TableSettingsListItem"));
|
|
19
27
|
|
|
20
|
-
|
|
28
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
+
|
|
30
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
31
|
|
|
32
|
+
/* eslint-disable new-cap */
|
|
33
|
+
|
|
34
|
+
/* eslint-disable no-unused-vars */
|
|
22
35
|
var TableSettingsListContainer = function TableSettingsListContainer(props) {
|
|
23
36
|
var items = props.items,
|
|
24
|
-
columnOrder = props.columnOrder,
|
|
25
37
|
onSortEnd = props.onSortEnd,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
38
|
+
itemProps = props.itemProps;
|
|
39
|
+
|
|
40
|
+
var _useState = (0, _react.useState)(null),
|
|
41
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
|
+
activeDraggedColumn = _useState2[0],
|
|
43
|
+
setActiveDraggedColumn = _useState2[1];
|
|
44
|
+
|
|
45
|
+
var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
|
|
46
|
+
coordinateGetter: _sortable.sortableKeyboardCoordinates
|
|
47
|
+
}));
|
|
48
|
+
var handleDragStart = (0, _react.useCallback)(function (event) {
|
|
49
|
+
setActiveDraggedColumn(event.active.id);
|
|
50
|
+
}, []);
|
|
51
|
+
var handleDragEnd = (0, _react.useCallback)(function (event) {
|
|
52
|
+
setActiveDraggedColumn(null);
|
|
53
|
+
onSortEnd(event);
|
|
54
|
+
}, []);
|
|
55
|
+
var activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
|
|
31
56
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className:
|
|
57
|
+
className: "table-settings-items-container"
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
|
|
59
|
+
modifiers: [_modifiers.restrictToVerticalAxis],
|
|
60
|
+
onDragStart: handleDragStart,
|
|
61
|
+
onDragEnd: handleDragEnd
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
|
|
63
|
+
items: items,
|
|
64
|
+
sensors: sensors,
|
|
65
|
+
collisionDetection: _core.closestCenter,
|
|
66
|
+
strategy: _sortable.rectSortingStrategy
|
|
33
67
|
}, items.map(function (column, index) {
|
|
34
68
|
return /*#__PURE__*/_react.default.createElement(_TableSettingsListItem.default, (0, _extends2.default)({
|
|
35
69
|
key: column,
|
|
36
70
|
index: index,
|
|
37
|
-
|
|
71
|
+
column: column,
|
|
38
72
|
orderIndex: index,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}, remainingProps));
|
|
43
|
-
}));
|
|
73
|
+
className: activeDraggedColumn === column ? activeClass : ''
|
|
74
|
+
}, itemProps));
|
|
75
|
+
}))));
|
|
44
76
|
};
|
|
45
77
|
|
|
46
78
|
exports.TableSettingsListContainer = TableSettingsListContainer;
|
|
47
|
-
|
|
48
|
-
|
|
79
|
+
TableSettingsListContainer.propTypes = {
|
|
80
|
+
items: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
81
|
+
onSortEnd: _propTypes.default.func,
|
|
82
|
+
itemProps: _propTypes.default.object
|
|
83
|
+
};
|
|
@@ -11,9 +11,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
14
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
17
|
|
|
16
|
-
var
|
|
18
|
+
var _sortable = require("@dnd-kit/sortable");
|
|
19
|
+
|
|
20
|
+
var _utilities = require("@dnd-kit/utilities");
|
|
21
|
+
|
|
22
|
+
var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
|
|
17
23
|
|
|
18
24
|
var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
|
|
19
25
|
|
|
@@ -23,6 +29,8 @@ var _TableSettingsColumnDetails = require("./TableSettingsColumnDetails");
|
|
|
23
29
|
|
|
24
30
|
var _TableSettingsColumnButtons = require("./TableSettingsColumnButtons");
|
|
25
31
|
|
|
32
|
+
var _tableSettingsPropTypes = require("./tableSettingsPropTypes");
|
|
33
|
+
|
|
26
34
|
/* eslint-disable new-cap */
|
|
27
35
|
var MAX_COLUMN_WIDTH = 1000;
|
|
28
36
|
|
|
@@ -39,22 +47,14 @@ var filterColumns = function filterColumns(searchValue) {
|
|
|
39
47
|
};
|
|
40
48
|
|
|
41
49
|
exports.filterColumns = filterColumns;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
_ref$className = _ref.className,
|
|
46
|
-
className = _ref$className === void 0 ? '' : _ref$className;
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
-
className: "table-settings-item-label ".concat(className),
|
|
49
|
-
"data-key": column
|
|
50
|
-
}, columnLabels[column]);
|
|
51
|
-
});
|
|
52
|
-
var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (props) {
|
|
53
|
-
var column = props.value,
|
|
50
|
+
|
|
51
|
+
var TableSettingsListItem = function TableSettingsListItem(props) {
|
|
52
|
+
var column = props.column,
|
|
54
53
|
orderIndex = props.orderIndex,
|
|
55
54
|
columnLabels = props.columnLabels,
|
|
56
55
|
autoLabel = props.autoLabel,
|
|
57
|
-
|
|
56
|
+
_props$disabledColumn = props.disabledColumns,
|
|
57
|
+
disabledColumns = _props$disabledColumn === void 0 ? [] : _props$disabledColumn,
|
|
58
58
|
columnOrder = props.columnOrder,
|
|
59
59
|
_props$hiddenColumns = props.hiddenColumns,
|
|
60
60
|
hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
|
|
@@ -67,20 +67,39 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
|
|
|
67
67
|
onResetColumnWidth = props.onResetColumnWidth,
|
|
68
68
|
onMoveColumn = props.onMoveColumn,
|
|
69
69
|
onOpenDetails = props.onOpenDetails,
|
|
70
|
-
onToggleHideColumn = props.onToggleHideColumn
|
|
70
|
+
onToggleHideColumn = props.onToggleHideColumn,
|
|
71
|
+
className = props.className;
|
|
72
|
+
var isSortingDisabled = !(0, _isEmpty.default)(columnSearchValue);
|
|
73
|
+
|
|
74
|
+
var _useSortable = (0, _sortable.useSortable)({
|
|
75
|
+
id: column,
|
|
76
|
+
disabled: isSortingDisabled
|
|
77
|
+
}),
|
|
78
|
+
attributes = _useSortable.attributes,
|
|
79
|
+
listeners = _useSortable.listeners,
|
|
80
|
+
setNodeRef = _useSortable.setNodeRef,
|
|
81
|
+
transform = _useSortable.transform,
|
|
82
|
+
transition = _useSortable.transition;
|
|
83
|
+
|
|
84
|
+
var style = {
|
|
85
|
+
transform: _utilities.CSS.Transform.toString(transform),
|
|
86
|
+
transition: transition
|
|
87
|
+
}; // Filter out items which don't match the search value.
|
|
71
88
|
// Note that we need to render all items at least once at the beginning in order to get their DOM lables
|
|
72
89
|
// otherwise the search won't work when initial search value is provided via props.
|
|
73
90
|
|
|
74
91
|
var isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
|
|
75
|
-
var itemClassNames = (0, _classnames.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen');
|
|
92
|
+
var itemClassNames = (0, _classnames.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
|
|
76
93
|
var columnDetails = columnsDetails[column];
|
|
77
94
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
78
95
|
className: itemClassNames,
|
|
79
|
-
key: "table-settings-item-".concat(column)
|
|
96
|
+
key: "table-settings-item-".concat(column),
|
|
97
|
+
ref: setNodeRef,
|
|
98
|
+
style: style
|
|
80
99
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
-
className:
|
|
100
|
+
className: "table-settings-item-header user-select-none"
|
|
82
101
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
83
|
-
className:
|
|
102
|
+
className: "CheckboxWrapper display-flex align-items-center padding-left-2"
|
|
84
103
|
}, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
|
|
85
104
|
checked: !hiddenColumns.includes(column),
|
|
86
105
|
onClick: function onClick(event) {
|
|
@@ -88,19 +107,18 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
|
|
|
88
107
|
event.stopPropagation();
|
|
89
108
|
},
|
|
90
109
|
disabled: disabledColumns.includes(column)
|
|
91
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
className: 'column-width-label'
|
|
110
|
+
})), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
111
|
+
className: "table-settings-item-label ".concat(isSortingDisabled ? 'no-drag' : ''),
|
|
112
|
+
"data-key": column
|
|
113
|
+
}, attributes, listeners), columnLabels[column]), columnDetails && /*#__PURE__*/_react.default.createElement("div", {
|
|
114
|
+
className: "column-width-label"
|
|
97
115
|
}, columnDetails.width ? "".concat(columnDetails.width, "px") : autoLabel), /*#__PURE__*/_react.default.createElement(_TableSettingsColumnButtons.TableSettingsColumnButtons, {
|
|
98
116
|
column: column,
|
|
99
117
|
index: orderIndex,
|
|
100
118
|
columnDetails: columnDetails,
|
|
101
119
|
columnOrder: columnOrder,
|
|
102
120
|
openColumnsDetails: openColumnsDetails,
|
|
103
|
-
|
|
121
|
+
disabled: isSortingDisabled,
|
|
104
122
|
onMoveColumn: onMoveColumn,
|
|
105
123
|
onOpenDetails: onOpenDetails
|
|
106
124
|
})), columnDetails && /*#__PURE__*/_react.default.createElement(_Collapse.default, {
|
|
@@ -111,6 +129,27 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
|
|
|
111
129
|
onColumnWidthChange: onColumnWidthChange,
|
|
112
130
|
onResetColumnWidth: onResetColumnWidth
|
|
113
131
|
})))));
|
|
114
|
-
}
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
TableSettingsListItem.propTypes = {
|
|
135
|
+
column: _propTypes.default.string,
|
|
136
|
+
orderIndex: _propTypes.default.number,
|
|
137
|
+
columnLabels: _propTypes.default.object,
|
|
138
|
+
autoLabel: _propTypes.default.string,
|
|
139
|
+
disabledColumns: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
140
|
+
columnOrder: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
141
|
+
hiddenColumns: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
142
|
+
columnSearchValue: _propTypes.default.string,
|
|
143
|
+
columnsDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
|
|
144
|
+
columnLabelStrings: _propTypes.default.object,
|
|
145
|
+
openColumnsDetails: _propTypes.default.object,
|
|
146
|
+
updateColumnLabelStrings: _propTypes.default.bool,
|
|
147
|
+
onColumnWidthChange: _propTypes.default.func,
|
|
148
|
+
onResetColumnWidth: _propTypes.default.func,
|
|
149
|
+
onMoveColumn: _propTypes.default.func,
|
|
150
|
+
onOpenDetails: _propTypes.default.func,
|
|
151
|
+
onToggleHideColumn: _propTypes.default.func,
|
|
152
|
+
className: _propTypes.default.string
|
|
153
|
+
};
|
|
115
154
|
var _default = TableSettingsListItem;
|
|
116
155
|
exports.default = _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.columnsDetailsPropTypes = void 0;
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var columnsDetailsPropTypes = _propTypes.default.objectOf(_propTypes.default.shape({
|
|
13
|
+
width: _propTypes.default.number,
|
|
14
|
+
defaultWidth: _propTypes.default.number,
|
|
15
|
+
maxWidth: _propTypes.default.number
|
|
16
|
+
}));
|
|
17
|
+
|
|
18
|
+
exports.columnsDetailsPropTypes = columnsDetailsPropTypes;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare module '@rio-cloud/rio-uikit/lib/es/Pager' {
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { PagerProps } from '../types';
|
|
4
|
+
|
|
5
|
+
export enum PagerVariant {
|
|
6
|
+
VARIANT_FULL = 'full',
|
|
7
|
+
VARIANT_COMPACT = 'compact',
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default class Pager extends React.Component<PagerProps> {}
|
|
11
|
+
}
|
package/lib/es/Pager.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Pager2.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _Pager2 = _interopRequireDefault(require("../components/pager/Pager"));
|
package/lib/index.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ declare module '@rio-cloud/rio-uikit' {
|
|
|
64
64
|
OverlayTriggerEvent,
|
|
65
65
|
OnboardingTipAlignment,
|
|
66
66
|
PieChartProps,
|
|
67
|
+
PagerProps,
|
|
67
68
|
PopoverProps,
|
|
68
69
|
ResizerDirection,
|
|
69
70
|
ResizerPosition,
|
|
@@ -191,6 +192,7 @@ declare module '@rio-cloud/rio-uikit' {
|
|
|
191
192
|
export class NumberInput extends React.Component<NumberInputProps> {}
|
|
192
193
|
export class OnboardingTip extends React.Component<OnboardingTipProps> {}
|
|
193
194
|
export class OverlayTrigger extends React.Component<OverlayTriggerProps> {}
|
|
195
|
+
export class Pager extends React.Component<PagerProps> {}
|
|
194
196
|
export class PieChart extends React.Component<PieChartProps> {}
|
|
195
197
|
export class Popover extends React.Component<PopoverProps> {}
|
|
196
198
|
export class RadioButton extends React.Component<RadioButtonProps> {}
|
package/lib/index.js
CHANGED
|
@@ -341,6 +341,12 @@ Object.defineProperty(exports, "OverlayTrigger", {
|
|
|
341
341
|
return _OverlayTrigger2.default;
|
|
342
342
|
}
|
|
343
343
|
});
|
|
344
|
+
Object.defineProperty(exports, "Pager", {
|
|
345
|
+
enumerable: true,
|
|
346
|
+
get: function get() {
|
|
347
|
+
return _Pager2.default;
|
|
348
|
+
}
|
|
349
|
+
});
|
|
344
350
|
Object.defineProperty(exports, "PieChart", {
|
|
345
351
|
enumerable: true,
|
|
346
352
|
get: function get() {
|
|
@@ -1019,6 +1025,8 @@ var _TagManager2 = _interopRequireDefault(require("./components/tagManager/TagMa
|
|
|
1019
1025
|
|
|
1020
1026
|
var _BrowserWarning2 = _interopRequireDefault(require("./components/browserWarning/BrowserWarning"));
|
|
1021
1027
|
|
|
1028
|
+
var _Pager2 = _interopRequireDefault(require("./components/pager/Pager"));
|
|
1029
|
+
|
|
1022
1030
|
var _toggleSupportMarker2 = require("./components/supportMarker/toggleSupportMarker");
|
|
1023
1031
|
|
|
1024
1032
|
var _Carousel2 = _interopRequireDefault(require("./components/carousel/Carousel"));
|
|
@@ -33,7 +33,6 @@
|
|
|
33
33
|
@import (less) '../design/type.less';
|
|
34
34
|
@import (less) '../design/popovers.less';
|
|
35
35
|
@import (less) '../design/utilities.less';
|
|
36
|
-
@import (less) '../design/visibilty.less';
|
|
37
36
|
@import (less) '../design/blockquote.less';
|
|
38
37
|
@import (less) '../design/callouts.less';
|
|
39
38
|
@import (less) '../design/container.less';
|
|
@@ -50,8 +49,10 @@
|
|
|
50
49
|
@import (less) '../design/overflow.less';
|
|
51
50
|
@import (less) '../design/position.less';
|
|
52
51
|
@import (less) '../design/rounded.less';
|
|
52
|
+
@import (less) '../design/sizing.less';
|
|
53
53
|
@import (less) '../design/shadows.less';
|
|
54
54
|
@import (less) '../design/text.less';
|
|
55
|
+
@import (less) '../design/visibility.less';
|
|
55
56
|
@import (less) '../design/z-index.less';
|
|
56
57
|
|
|
57
58
|
// Theme
|
|
@@ -64,6 +65,9 @@
|
|
|
64
65
|
// Animations
|
|
65
66
|
@import (less) '../animations/_imports.less';
|
|
66
67
|
|
|
68
|
+
// Filter
|
|
69
|
+
@import (less) '../filter/_imports.less';
|
|
70
|
+
|
|
67
71
|
// Print
|
|
68
72
|
@import (less) '../print/print.less';
|
|
69
73
|
|
|
@@ -325,6 +325,20 @@ body .module-content {
|
|
|
325
325
|
@media (max-width: @screen-ls) {
|
|
326
326
|
display: none;
|
|
327
327
|
}
|
|
328
|
+
|
|
329
|
+
@media (min-width: @screen-ls) {
|
|
330
|
+
> .SubmoduleNavigation {
|
|
331
|
+
max-height: calc(~"100vh - 100px");
|
|
332
|
+
overflow: auto;
|
|
333
|
+
-webkit-overflow-scrolling: touch;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
&:hover {
|
|
338
|
+
> .SubmoduleNavigation {
|
|
339
|
+
display: block;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
328
342
|
}
|
|
329
343
|
|
|
330
344
|
.SubmoduleNavigation {
|
|
@@ -361,14 +375,6 @@ body .module-content {
|
|
|
361
375
|
}
|
|
362
376
|
}
|
|
363
377
|
}
|
|
364
|
-
|
|
365
|
-
> .submodule {
|
|
366
|
-
&:hover {
|
|
367
|
-
> .SubmoduleNavigation {
|
|
368
|
-
display: block;
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
378
|
}
|
|
373
379
|
}
|
|
374
380
|
}
|
|
@@ -2084,7 +2090,7 @@ form[id*="contactForm"] {
|
|
|
2084
2090
|
// Safari image fix
|
|
2085
2091
|
@media not all and (min-resolution:.001dpcm) {
|
|
2086
2092
|
@supports (-webkit-appearance:none) {
|
|
2087
|
-
img[src*="placeholder_transparent"] {
|
|
2093
|
+
img[src*="placeholder_transparent"]:not([style*="background-image"]) {
|
|
2088
2094
|
opacity: 0;
|
|
2089
2095
|
}
|
|
2090
2096
|
|
|
@@ -2097,7 +2103,6 @@ form[id*="contactForm"] {
|
|
|
2097
2103
|
}
|
|
2098
2104
|
|
|
2099
2105
|
// section clippig
|
|
2100
|
-
|
|
2101
2106
|
.section-wrapper {
|
|
2102
2107
|
&[class*="clip-"]:after {
|
|
2103
2108
|
content: "";
|
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
max-height: ~'calc(100vh - @{navbar-height} - 20px)'; // --vh fallback
|
|
267
267
|
max-height: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height} - 20px)';
|
|
268
268
|
max-width: calc(~'100% - 3px');
|
|
269
|
-
|
|
269
|
+
width: 100%;
|
|
270
270
|
overflow-x: hidden;
|
|
271
271
|
overflow-y: auto;
|
|
272
272
|
|
|
@@ -167,12 +167,12 @@
|
|
|
167
167
|
top: 0;
|
|
168
168
|
|
|
169
169
|
.ApplicationLayoutSidebar:not(.right) & {
|
|
170
|
-
box-shadow: 5px 5px 5px asset-
|
|
170
|
+
box-shadow: 5px 5px 5px @asset-tree-shadow-color;
|
|
171
171
|
left: 0;
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
.ApplicationLayoutSidebar.right & {
|
|
175
|
-
box-shadow: -5px 5px 5px asset-
|
|
175
|
+
box-shadow: -5px 5px 5px @asset-tree-shadow-color;
|
|
176
176
|
right: 0;
|
|
177
177
|
}
|
|
178
178
|
}
|
|
@@ -344,18 +344,20 @@ body {
|
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
&.TableSettingsDialog {
|
|
347
|
-
.modal-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
347
|
+
.modal-dialog {
|
|
348
|
+
.modal-content {
|
|
349
|
+
.modal-body {
|
|
350
|
+
background: @gray-lightest;
|
|
351
|
+
padding-left: 0;
|
|
352
|
+
padding-right: 0;
|
|
353
|
+
|
|
354
|
+
@media (max-height: 450px) and (min-width: @screen-sm - 0.1) {
|
|
355
|
+
max-height: calc(~'100vh - 200px'); // --vh fallback
|
|
356
|
+
max-height: calc(~'var(--vh, 1vh) * 100 - 200px');
|
|
357
|
+
overflow-y: auto;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
356
360
|
}
|
|
357
|
-
|
|
358
|
-
// TableSettings item styles are colocated with the components
|
|
359
361
|
}
|
|
360
362
|
}
|
|
361
363
|
}
|
|
@@ -219,43 +219,4 @@
|
|
|
219
219
|
margin-right: 10px;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
// Tippy
|
|
225
|
-
.tippy-touch {
|
|
226
|
-
cursor: pointer !important
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.tippy-popper {
|
|
230
|
-
-webkit-perspective: 800px;
|
|
231
|
-
max-width: 400px;
|
|
232
|
-
outline: 0;
|
|
233
|
-
perspective: 800px;
|
|
234
|
-
pointer-events: none;
|
|
235
|
-
transition-timing-function: cubic-bezier(.165, .84, .44, 1);
|
|
236
|
-
z-index: 9999;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.tippy-popper.html-template {
|
|
240
|
-
max-width: 96%;
|
|
241
|
-
max-width: calc(100% - 20px)
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.tippy-tooltip {
|
|
245
|
-
position: relative;
|
|
246
|
-
color: #fff;
|
|
247
|
-
border-radius: 4px;
|
|
248
|
-
font-size: .95rem;
|
|
249
|
-
padding: .4rem .8rem;
|
|
250
|
-
text-align: center;
|
|
251
|
-
will-change: transform;
|
|
252
|
-
-webkit-font-smoothing: antialiased;
|
|
253
|
-
-moz-osx-font-smoothing: grayscale;
|
|
254
|
-
background-color: #333
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.tippy-tooltip [x-arrow] {
|
|
258
|
-
position: absolute;
|
|
259
|
-
width: 0;
|
|
260
|
-
height: 0
|
|
261
222
|
}
|
|
@@ -13,11 +13,16 @@
|
|
|
13
13
|
transition: all 70ms ease-in-out;
|
|
14
14
|
|
|
15
15
|
&:first-child {
|
|
16
|
-
.
|
|
16
|
+
&:not(.rounded-none) {
|
|
17
|
+
.border-top-radius(@border-radius-default);
|
|
18
|
+
}
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
&:last-child {
|
|
20
|
-
.
|
|
22
|
+
&:not(.rounded-none) {
|
|
23
|
+
.border-bottom-radius(@border-radius-default);
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
margin-bottom: 0;
|
|
22
27
|
}
|
|
23
28
|
|