@steroidsjs/bootstrap 3.0.0-beta.11 → 3.0.0-beta.110

package/list/Grid/views/ContentColumnView/ContentColumnView.scss

@@ -0,0 +1,88 @@
+@use "../../../../scss/variables";
+
+:root {
+    --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.ContentColumnView {
+    $root: &;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    column-gap: 8px;
+
+    > * {
+        display: inline-block;
+    }
+
+    &__data {
+        display: flex;
+        flex-flow: column;
+    }
+
+    &__subtitle {
+        color: variables.$element-placeholder-color;
+    }
+
+    &__picture {
+        width: 24px;
+        height: 24px;
+        overflow: hidden;
+        border-radius: 4px;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__icon {
+        svg {
+            > * {
+                stroke: $grid-icon-color;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__subtitle {
+                font-size: variables.$font-size-base;
+                line-height: variables.$line-height-base;
+            }
+
+            #{$root}__avatar-wrapper {
+                width: 56px;
+                height: 56px;
+            }
+        }
+
+        &_md {
+            #{$root}__subtitle {
+                font-size: variables.$font-size-sm;
+                line-height: variables.$line-height-sm;
+            }
+        }
+
+        &_sm {
+            #{$root}__subtitle {
+                font-size: variables.$font-size-xs;
+                line-height: variables.$line-height-xs;
+            }
+        }
+    }
+
+    &_isLeft {
+        #{$root}__data {
+            order: 2;
+        }
+    }
+}

package/list/Grid/views/ContentColumnView/index.d.ts

@@ -0,0 +1,2 @@
+import ContentColumnView from './ContentColumnView';
+export default ContentColumnView;

package/list/Grid/views/ContentColumnView/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ContentColumnView_1 = __importDefault(require("./ContentColumnView"));
+exports["default"] = ContentColumnView_1["default"];

package/list/Grid/views/DiagramColumnView/DiagramColumnView.d.ts

@@ -0,0 +1,3 @@
+import { IColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
+import './DiagramColumnView.scss';
+export default function DiagramColumnView(props: IColumnViewProps): JSX.Element;

package/list/Grid/views/DiagramColumnView/DiagramColumnView.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+require("./DiagramColumnView.scss");
+var DiagramType;
+(function (DiagramType) {
+    DiagramType["HORIZONTAL"] = "horizontal";
+    DiagramType["VERTICAL"] = "vertical";
+    DiagramType["CIRCLE"] = "circle";
+})(DiagramType || (DiagramType = {}));
+function DiagramColumnView(props) {
+    var _a, _b, _c, _d, _e, _f;
+    var bem = (0, useBem_1["default"])('DiagramColumnView');
+    var isHorizontal = ((_a = props.diagram) === null || _a === void 0 ? void 0 : _a.type) === DiagramType.HORIZONTAL;
+    var isVertical = ((_b = props.diagram) === null || _b === void 0 ? void 0 : _b.type) === DiagramType.VERTICAL;
+    var isCircle = ((_c = props.diagram) === null || _c === void 0 ? void 0 : _c.type) === DiagramType.CIRCLE;
+    var getItemData = function (item) { return ({
+        itemPercentage: props.item[item === null || item === void 0 ? void 0 : item.percentageAttribute],
+        itemColor: item === null || item === void 0 ? void 0 : item.color
+    }); };
+    var renderDiagram = function (diagramItems, hasPercentSign, hasSubtitle, fillingProperty) {
+        var _a;
+        if (fillingProperty === void 0) { fillingProperty = null; }
+        return (react_1["default"].createElement("div", { className: bem(bem.block({
+                size: props.size,
+                type: (_a = props.diagram) === null || _a === void 0 ? void 0 : _a.type
+            })) },
+            react_1["default"].createElement("div", { className: bem.element('wrapper') },
+                react_1["default"].createElement("div", { className: bem.element('wrapper-diagrams') }, diagramItems.map(function (item, itemIndex) {
+                    var _a;
+                    var _b;
+                    var _c = getItemData(item), itemColor = _c.itemColor, itemPercentage = _c.itemPercentage;
+                    return (react_1["default"].createElement("div", { key: itemIndex, className: bem.element('diagram', {
+                            type: (_b = props.diagram) === null || _b === void 0 ? void 0 : _b.type
+                        }) },
+                        react_1["default"].createElement("span", { className: bem.element('diagram-percentage') },
+                            itemPercentage,
+                            hasPercentSign && ' %'),
+                        react_1["default"].createElement("div", { className: bem.element('diagram-filling', {
+                                color: itemColor
+                            }), style: (_a = {}, _a[fillingProperty] = "".concat(itemPercentage, "%"), _a) })));
+                })),
+                hasSubtitle && (react_1["default"].createElement("span", { className: bem.element('subtitle') }, props.item[props.subtitleAttribute])))));
+    };
+    if (isHorizontal) {
+        return (renderDiagram((_d = props.diagram) === null || _d === void 0 ? void 0 : _d.items, true, false, 'width'));
+    }
+    if (isVertical) {
+        return (renderDiagram((_e = props.diagram) === null || _e === void 0 ? void 0 : _e.items, true, false, 'height'));
+    }
+    if (isCircle) {
+        return (renderDiagram((_f = props.diagram) === null || _f === void 0 ? void 0 : _f.items, false, !!props.subtitleAttribute));
+    }
+    return null;
+}
+exports["default"] = DiagramColumnView;

package/list/Grid/views/DiagramColumnView/DiagramColumnView.scss

@@ -0,0 +1,170 @@
+@use "../../../../scss/variables";
+
+.DiagramColumnView {
+    $root: &;
+
+    &_size {
+        &_sm {
+            #{$root}__diagram_type_horizontal,
+            #{$root}__diagram_type_vertical {
+                min-height: 51px !important;
+            }
+
+            #{$root}__diagram_type_circle {
+                width: 30px;
+                height: 30px;
+            }
+        }
+        &_md {
+            #{$root}__diagram_type_horizontal,
+            #{$root}__diagram_type_vertical {
+                min-height: 65px !important;
+            }
+
+            #{$root}__diagram_type_circle {
+                width: 36px;
+                height: 36px;
+            }
+        }
+        &_lg {
+            #{$root}__diagram_type_horizontal,
+            #{$root}__diagram_type_vertical {
+                min-height: 73px !important;
+            }
+
+            #{$root}__diagram_type_circle {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+
+    &__diagram {
+        font-weight: variables.$font-weight-lg;
+        font-size: variables.$font-size-xs;
+        line-height: variables.$line-height-xs;
+        color: variables.$text-color;
+        width: 100%;
+    }
+
+    &_type_horizontal {
+        #{$root}__diagram {
+            position: relative;
+
+            &-percentage {
+                position: absolute;
+                z-index: 2;
+                left: 50%;
+                top: 50%;
+                transform: translateX(-50%) translateY(-50%);
+            }
+
+            &-filling {
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+
+                &_color {
+                    @each $color, $color-map in variables.$diagram-colors {
+                        &_#{$color} {
+                            background-color: map-get($color-map, color-themed);
+                            border-right: 1px solid map-get($color-map, color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_type_vertical {
+        #{$root}__wrapper-diagrams {
+            display: flex;
+            flex-flow: row nowrap;
+            height: 100%;
+        }
+
+        #{$root}__diagram {
+            position: relative;
+
+            &-percentage {
+                position: absolute;
+                white-space: nowrap;
+                width: 100%;
+                text-align: center;
+                z-index: 2;
+                left: 50%;
+                top: 50%;
+                transform: translateX(-50%) translateY(-50%);
+            }
+
+            &-filling {
+                width: 100%;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+
+                &_color {
+                    @each $color, $color-map in variables.$diagram-colors {
+                        &_#{$color} {
+                            background-color: map-get($color-map, color-themed);
+                            border-top: 1px solid map-get($color-map, color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_type_circle {
+        display: flex;
+        justify-content: center;
+
+        #{$root}__wrapper {
+            display: flex;
+            flex-flow: column nowrap;
+
+            &-diagrams {
+                display: flex;
+                flex-flow: row nowrap;
+                justify-content: center;
+            }
+
+            #{$root}__subtitle {
+                margin: 0 auto;
+
+                font-weight: variables.$font-weight-sm;
+                font-size: variables.$font-size-base;
+                line-height: variables.$line-height-base;
+                color: variables.$element-placeholder-color;
+            }
+        }
+
+        #{$root}__diagram {
+            position: relative;
+            margin: -1px;
+
+            &-filling {
+                width: 100%;
+                height: 100%;
+                border-radius: 100%;
+
+                &_color {
+                    @each $color, $color-map in variables.$diagram-colors {
+                        &_#{$color} {
+                            border: 2px solid map-get($color-map, color);
+                        }
+                    }
+                }
+            }
+
+            &-percentage {
+                position: absolute;
+                z-index: 2;
+                left: 50%;
+                top: 50%;
+                transform: translateX(-50%) translateY(-50%);
+            }
+        }
+    }
+}

package/list/Grid/views/DiagramColumnView/index.d.ts

@@ -0,0 +1,2 @@
+import DiagramColumnView from './DiagramColumnView';
+export default DiagramColumnView;

package/list/Grid/views/DiagramColumnView/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var DiagramColumnView_1 = __importDefault(require("./DiagramColumnView"));
+exports["default"] = DiagramColumnView_1["default"];

package/list/Grid/views/TreeColumnView/TreeColumnView.d.ts

@@ -0,0 +1,2 @@
+import { ITreeColumnViewProps } from '@steroidsjs/core/ui/list/TreeTable/TreeTable';
+export default function TreeColumnView(props: ITreeColumnViewProps): JSX.Element;

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var DEFAULT_PADDING_LEFT = 32;
+var PADDING_WITH_ICON = 0;
+var PADDING_WITHOUT_ICON = 24;
+function TreeColumnView(props) {
+    var bem = (0, hooks_1.useBem)('TreeColumnView');
+    var levelPadding = props.levelPadding || DEFAULT_PADDING_LEFT;
+    var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
+    var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
+    return (react_1["default"].createElement("div", { className: bem.block(bem.block({
+            size: props.size
+        })) },
+        react_1["default"].createElement("div", { className: bem.element('data'), style: {
+                paddingLeft: "".concat(props.item.level * levelPadding + paddingBasedOnIcon, "px")
+            } },
+            props.item.hasItems && (react_1["default"].createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
+                    opened: props.item.isOpened
+                }), onClick: function () { return props.item.onTreeItemClick(props.item.uniqueId, props.item); } })),
+            renderValue())));
+}
+exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -0,0 +1,46 @@
+@use "../../../../scss/variables";
+
+:root {
+  --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.TreeColumnView {
+  &__data {
+    display: flex;
+    align-items: center;
+
+    .IconView {
+      min-width: 24px;
+      min-height: 24px;
+    }
+  }
+
+  &__value {
+    margin-left: 8px;
+  }
+
+  &__icon {
+    transform: rotate(0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
+
+    svg {
+      > * {
+        stroke: $grid-icon-color;
+      }
+    }
+  }
+}
+
+.TreeColumnHeader {
+  width: 40%;
+}

package/list/List/ListItemView.d.ts

@@ -1,3 +1,2 @@
 import { IListItemViewProps } from '@steroidsjs/core/ui/list/List/List';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ListItemView(props: IListItemViewProps & IBemHocOutput): JSX.Element;
+export default function ListItemView(props: IListItemViewProps): JSX.Element;

package/list/List/ListView.js

@@ -34,17 +34,15 @@ function ListView(props) {
         if (!pagination && !paginationSize && !layout) {
             return null;
         }
-        return (React.createElement("div", { className: bem('row mb-3', bem.element('pagination')) },
-            React.createElement("div", { className: 'col-4' }, "\u00A0"),
-            React.createElement("div", { className: 'col-4' }, pagination),
-            React.createElement("div", { className: 'col-4 d-flex justify-content-end' },
-                layout,
-                paginationSize)));
+        return (React.createElement("div", { className: bem.element('pagination') },
+            pagination && (React.createElement("div", { className: bem.element('pagination-button') }, pagination)),
+            paginationSize && (React.createElement("div", { className: bem.element('pagination-sizes') }, paginationSize)),
+            layout && (React.createElement("div", { className: bem.element('pagination-layout') }, layout))));
     };
     return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || props.list.isLoading }), props.className) },
         props.renderSearchForm(),
         renderPagination(['top', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['top', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['top', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
-        React.createElement("div", { className: bem('mb-3', bem.element('content'), props.contentClassName) }, props.content),
+        React.createElement("div", { className: bem(bem.element('content'), props.contentClassName) }, props.content),
         renderPagination(['bottom', 'both'].includes(props.paginationPosition) && props.renderPagination(), ['bottom', 'both'].includes(props.paginationSizePosition) && props.renderPaginationSize(), ['bottom', 'both'].includes(props.layoutNamesPosition) && props.renderLayoutNames()),
         props.renderEmpty()));
 }

package/list/List/ListView.scss

@@ -1,3 +1,30 @@
+@use "../../scss/variables";
+
 .ListView {
+    color: variables.$text-color;
+
+    .FormView {
+        margin-bottom: 10px;
+    }
+
+    &__pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-flow: row wrap;
+        margin-bottom: 3px;
+
+        &-sizes {
+            margin-bottom: 10px;
+            width: 100%;
+        }
+
+        &-button {
+            margin: 16px auto 0;
+        }
+    }
 
-}
+    &__content {
+        margin-bottom: 3px;
+    }
+}

package/list/Pagination/PaginationButtonView.js

@@ -25,12 +25,41 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderArrowStep = function (bem, onClick, iconName, rotate, rounding, disabled) {
+    if (rotate === void 0) { rotate = false; }
+    return (React.createElement("li", { className: bem.element('page', {
+            'rounding-left': rounding.left,
+            'rounding-right': rounding.right,
+            hasIcon: true,
+            disabled: disabled
+        }) },
+        React.createElement("button", { className: bem.element('page-button', {
+                hasIcon: true
+            }), onClick: function () { return onClick(); }, disabled: disabled },
+            React.createElement(content_1.Icon, { tabIndex: -1, className: bem.element('page-icon', {
+                    rotate: rotate
+                }), name: iconName }))));
+};
 function PaginationButtonView(props) {
     var bem = (0, hooks_1.useBem)('PaginationButtonView');
-    return (React.createElement("ul", { className: bem(props.className, bem.block(), 'flex-row', 'pagination', "pagination-".concat(props.size)) }, props.pages.map(function (item, index) { return (React.createElement("li", { key: index, className: bem(bem.element('page', { hidden: !item.page }), 'page-item', item.isActive ? 'active' : '') },
-        React.createElement("button", { className: bem(bem.element('page-link', { hidden: !item.page }), 'page-link'), onClick: function (e) {
-                e.preventDefault();
-                props.onSelect(item.page);
-            } }, item.label))); })));
+    return (React.createElement("ul", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        props.showEdgeSteps
+            && renderArrowStep(bem, props.onSelectFirst, 'double_arrow_left', false, { left: true }, props.isFirstPage),
+        props.showSteps
+            && renderArrowStep(bem, props.onSelectPrev, 'arrow_left_24x24', false, {}, props.isFirstPage),
+        props.pages.map(function (item, index) { return (React.createElement("li", { key: index, className: bem.element('page', {
+                hidden: !item.page,
+                active: item.isActive
+            }) },
+            React.createElement("button", { className: bem.element('page-button', {
+                    hidden: !item.page
+                }), onClick: function () { return props.onSelect(item.page); } }, item.label))); }),
+        props.showSteps
+            && renderArrowStep(bem, props.onSelectNext, 'arrow_left_24x24', true, {}, props.isLastPage),
+        props.showEdgeSteps
+            && renderArrowStep(bem, props.onSelectLast, 'double_arrow_left', true, { right: true }, props.isLastPage)));
 }
 exports["default"] = PaginationButtonView;