@steroidsjs/bootstrap 3.0.0-beta.74 → 3.0.0-beta.75

package/index.d.ts

@@ -182,6 +182,9 @@ declare const _default: {
     'list.ContentColumnView': {
         lazy: () => any;
     };
+    'list.DiagramColumnView': {
+        lazy: () => any;
+    };
     'list.ListView': {
         lazy: () => any;
     };

package/index.js

@@ -185,6 +185,9 @@ exports["default"] = {
     'list.ContentColumnView': {
         lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
     },
+    'list.DiagramColumnView': {
+        lazy: function () { return require('./list/Grid/views/DiagramColumnView/DiagramColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },

package/list/Grid/GridView.js

@@ -90,7 +90,9 @@ function GridView(props) {
                         renderSortButton(column.attribute, 'desc'))))); })),
                 renderInsideSearchForm()),
             React.createElement("tbody", null,
-                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: bem(bem.element('column'), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
+                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: bem(bem.element('column', {
+                        isDiagram: !!column.diagram
+                    }), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
                 emptyContent && (React.createElement("tr", null,
                     React.createElement("td", { colSpan: props.columns.length }, emptyContent))))),
         props.renderPagination()));

package/list/Grid/GridView.scss

@@ -93,7 +93,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             }
 
             th,
-            td {
+            td:not(#{$root}__column_isDiagram) {
                 padding: 24px 16px;
             }
         }
@@ -105,7 +105,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             }
 
             th,
-            td {
+            td:not(#{$root}__column_isDiagram) {
                 padding: 21px 12px;
             }
         }
@@ -117,7 +117,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             }
 
             th,
-            td {
+            td:not(#{$root}__column_isDiagram) {
                 padding: 16px 8px;
             }
         }

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

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

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 @@
+@import "style/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: $font-weight-lg;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
+        color: $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 $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 $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: $font-weight-sm;
+                font-size: $font-size-base;
+                line-height: $line-height-base;
+                color: $element-placeholder-color;
+            }
+        }
+
+        #{$root}__diagram {
+            position: relative;
+            margin: -1px;
+
+            &-filling {
+                width: 100%;
+                height: 100%;
+                border-radius: 100%;
+
+                &_color {
+                    @each $color, $color-map in $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/nav/Nav/NavIconView.js

@@ -48,7 +48,7 @@ function NavIconView(props) {
                 active: item.isActive,
                 disabled: item.disabled
             }), props.navClassName) },
-            React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null })))); })),
+            React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: item.label, hint: item.hint || item.label || null })))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavIconView;

package/nav/Nav/NavIconView.scss

@@ -4,5 +4,25 @@
         flex-flow: row nowrap;
         align-items: center;
         column-gap: 24px;
+
+        &-item {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            color: $text-color;
+            column-gap: 8px;
+
+            .ButtonView__text {
+                color: $text-color;
+            }
+
+            &_disabled .ButtonView_disabled .ButtonView__link:hover .ButtonView__text {
+               color: $element-placeholder-color-disabled;
+            }
+
+            &_disabled .ButtonView_disabled .ButtonView__link .ButtonView__text { 
+                color: $element-placeholder-color-disabled;
+            }
+        }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.74",
+    "version": "3.0.0-beta.75",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",

package/scss/variables/common/colors.scss

@@ -46,6 +46,11 @@
 
     --scroll-thumb-color: #cbd5db;
     --scroll-track-color: #f1f5f7;
+
+    --diagram-success: var(--success-light);
+    --diagram-warning: var(--warning-light);
+    --diagram-danger: var(--danger-light);
+    --diagram-secondary: var(--secondary-light);
 }
 
 html[data-theme="dark"] {
@@ -95,6 +100,11 @@ html[data-theme="dark"] {
 
     --scroll-thumb-color: #333646;
     --scroll-track-color: #26272f;
+
+    --diagram-success: var(--success-dark);
+    --diagram-warning: var(--warning-dark);
+    --diagram-danger: var(--danger-dark);
+    --diagram-secondary: var(--secondary-dark);
 }
 
 $primary: var(--primary);
@@ -144,6 +154,11 @@ $element-field-background-color: var(--element-field-background-color);
 
 $scroll-thumb-color: var(--scroll-thumb-color);
 $scroll-track-color: var(--scroll-track-color);
+
+$diagram-success: var(--diagram-success);
+$diagram-warning: var(--diagram-warning);
+$diagram-danger: var(--diagram-danger);
+$diagram-secondary: var(--diagram-secondary);
 //** Themed colors **//
 
 //! Base colors !//
@@ -219,3 +234,27 @@ $color-themes: map-merge(
     ),
     $color-themes
 );
+
+
+$diagram-colors: () !default;
+$diagram-colors: map-merge(
+    (
+        "success": (
+            "color": $success,
+            "color-themed": $diagram-success,
+        ),
+        "warning": (
+            "color": $warning,
+            "color-themed": $diagram-warning,
+        ),
+        "danger": (
+            "color": $danger,
+            "color-themed": $diagram-danger,
+        ),
+        "secondary": (
+            "color": $secondary,
+            "color-themed": $diagram-secondary,
+        ),
+    ),
+    $diagram-colors
+);