@steroidsjs/bootstrap 3.0.0-beta.9 → 3.0.0-beta.90

package/list/Empty/EmptyView.js

@@ -27,6 +27,6 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function EmptyView(props) {
     var bem = (0, hooks_1.useBem)('EmptyView');
-    return (React.createElement("div", { className: bem(bem.block(), 'text-center p-5', props.className) }, props.text));
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.text));
 }
 exports["default"] = EmptyView;

package/list/Empty/EmptyView.scss

@@ -1,3 +1,7 @@
-.EmptyView {
+@use "../../scss/variables";
 
+.EmptyView {
+  text-align: center;
+  padding: 20px;
+  color: variables.$text-color;
 }

package/list/FlexGrid/FlexGridView.d.ts

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

package/list/FlexGrid/FlexGridView.js

@@ -0,0 +1,71 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function FlexGridView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('FlexGridView');
+    var halfColGap = props.colGap / 2;
+    var hasItems = !!((_a = props.items) === null || _a === void 0 ? void 0 : _a.length);
+    var colGapStyle = hasItems
+        ? {
+            marginRight: -halfColGap,
+            marginLeft: -halfColGap
+        }
+        : {
+            columnGap: props.colGap
+        };
+    return (React.createElement("div", { className: bem(bem.block({
+            wrap: props.wrap,
+            align: props.align,
+            direction: props.direction,
+            justify: props.justify
+        }), props.className), style: __assign(__assign(__assign({}, props.style), colGapStyle), { rowGap: props.rowGap }) },
+        hasItems && props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem(bem.element('item', {
+                col: item.col,
+                lg: item.lg,
+                md: item.md,
+                sm: item.sm,
+                offset: item.offset
+            }), props.itemClassName), style: {
+                paddingRight: halfColGap,
+                paddingLeft: halfColGap,
+                order: item.order
+            } }, item.content)); }),
+        props.children));
+}
+exports["default"] = FlexGridView;

package/list/FlexGrid/FlexGridView.scss

@@ -0,0 +1,60 @@
+@use "../../scss/variables";
+
+
+$justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
+$alignValues: center, end, start, stretch, flex-start, flex-end;
+$directionValues: column-reverse column row-reverse row;
+$colValues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
+$colMaxValue: 12;
+
+@mixin col($className, $root, $property: flex-basis) {
+  @each $colValue in $colValues {
+    &_#{$className}_#{$colValue} {
+      #{$property}: calc((100% / $colMaxValue) * $colValue);
+    }
+  }
+}
+
+.FlexGridView {
+  $root: &;
+
+  display: flex;
+  flex-wrap: nowrap;
+
+  &_wrap {
+    flex-wrap: wrap;
+  }
+
+  @each $alignValue in $alignValues {
+    &_align_#{$alignValue} {
+        align-items: $alignValue;
+    }
+  }
+
+  @each $justifyValue in $justifyValues {
+    &_justify_#{$justifyValue} {
+        justify-content: $justifyValue;
+    }
+  }
+
+  @each $directionValue in $directionValues {
+    &_direction_#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+
+  &__item {
+    @include col(col, $root);
+    @include col(offset, $root, margin-inline-start);
+
+    @media (max-width: variables.$desktop-width) {
+      @include col(lg, $root);
+    }
+    @media (max-width: variables.$tablet-width) {
+      @include col(md, $root);
+    }
+    @media (max-width: variables.$mobile-width) {
+      @include col(sm, $root);
+    }
+  }
+}

package/list/Grid/GridView.js

@@ -58,7 +58,7 @@ function GridView(props) {
         var fields = (0, keyBy_1["default"])(props.searchForm.fields.map(function (column) { return (0, isString_1["default"])(column) ? { attribute: column } : column; }), 'attribute');
         return (React.createElement("tr", null, props.columns.map(function (column, columnIndex) {
             var _a;
-            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ layout: 'inline', size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
+            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {
@@ -73,10 +73,14 @@ function GridView(props) {
             } }));
     }, [bem, props]);
     var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
-    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading) }), props.className) },
+    return props.renderList(React.createElement("div", { className: bem(bem.block({
+            loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading),
+            size: props.size,
+            alternatingColors: props.hasAlternatingColors
+        }), props.className) },
         props.renderSearchForm(),
         props.renderPaginationSize(),
-        React.createElement("table", { className: 'table table-striped' },
+        React.createElement("table", { className: bem.element('table') },
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
@@ -86,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: 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

@@ -1,53 +1,169 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
+@use "../../scss/variables";
+
+:root {
+    --grid-header-background-color: var(--light-gray);
+    --grid-border-color: var(--gray);
+
+    --grid-td-background-color: #FFFFFF;
+    --grid-td-alternating-color: var(--additional-light-gray);
+}
+
+html[data-theme="dark"] {
+    --grid-header-background-color: var(--additional-gray-dark);
+    --grid-border-color: var(--additional-gray-dark);
+
+    --grid-td-background-color: var(--graphite);
+    --grid-td-alternating-color: var(--graphite-dark);
+}
+
+$grid-header-background-color: var(--grid-header-background-color);
+$grid-border-color: var(--grid-border-color);
+
+$grid-td-background-color: var(--grid-td-background-color);
+$grid-td-alternating-color: var(--grid-td-alternating-color);
 
 .GridView {
-  opacity: 1;
-  transition: opacity .2s;
+    $root: &;
 
-  &_loading {
-    opacity: .4;
-  }
+    text-align: left;
 
-  //adaptive styles
-  @include media-breakpoint-down(sm) {
-    thead, tbody, th, tr {
-      display: block;
-    }
+    width: 100%;
 
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
+    &__table {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        border-collapse: separate;
+        border: 1px solid $grid-border-color;
+        border-radius: variables.$radius-large;
+        margin: 24px 0;
+
+        th,
+        td {
+            color: variables.$text-color;
+            background-color: $grid-td-background-color;
+        }
+        th {
+            font-weight: variables.$font-weight-lg;
+            background-color: $grid-header-background-color;
+        }
+
+        th:not(:last-child),
+        td:not(:last-child) {
+            border-right: 1px solid $grid-border-color;
+        }
+
+        thead > tr > th,
+        tbody > tr:not(:last-child) > td,
+        tr:not(:last-child) > td,
+        thead:not(:last-child),
+        tbody:not(:last-child) {
+            border-bottom: 1px solid $grid-border-color;
+        }
 
-    td {
-      position: relative;
-      width: 100% !important;
-      text-align: left !important;
+        thead > tr > th {
+            &:first-child {
+                border-top-left-radius: variables.$radius-large;
+            }
+            &:last-child {
+                border-top-right-radius: variables.$radius-large;
+            }
+        }
 
-      display: flex;
-      align-items: center;
-      white-space: pre-wrap;
+        tbody > tr:last-child > td {
+            &:first-child {
+                border-bottom-left-radius: variables.$radius-large;
+            }
+
+            &:last-child {
+                border-bottom-right-radius: variables.$radius-large;
+            }
+        }
     }
 
-    td:before {
-      padding-right: 1rem;
-      width: 50%;
-      flex-shrink: 0;
-      content: attr(data-label);
+    &_alternatingColors{
+        #{$root}__table tbody tr:nth-child(even) td { 
+            background-color: $grid-td-alternating-color;
+        }
     }
-  }
 
-  &__sort-button {
-    opacity: 0.5;
+    &_size {
+        &_lg {
+            #{$root}__table {
+                font-size: variables.$font-size-lg;
+                line-height: variables.$line-height-lg;
+            }
+
+            th,
+            td:not(#{$root}__column_isDiagram) {
+                padding: 24px 16px;
+            }
+        }
+
+        &_md {
+            #{$root}__table {
+                font-size: variables.$font-size-base;
+                line-height: variables.$line-height-base;
+            }
+
+            th,
+            td:not(#{$root}__column_isDiagram) {
+                padding: 21px 12px;
+            }
+        }
 
-    &_is-active {
-      opacity: 1;
+        &_sm {
+            #{$root}__table {
+                font-size: variables.$font-size-sm;
+                line-height: variables.$line-height-sm;
+            }
+
+            th,
+            td:not(#{$root}__column_isDiagram) {
+                padding: 16px 8px;
+            }
+        }
     }
 
-    .IconView svg {
-      width: 10px;
-      height: 16px;
+
+    &__column {
+
+        .IconView { 
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &_hasIcon { 
+            display: flex;    
+            flex-flow: row nowrap;
+            align-items: center;
+
+            .IconView { 
+                margin-left: 8px;           
+            }
+
+            &-left { 
+                span {
+                    &:nth-child(1) {
+                        order: 2;
+                    }
+
+                    &:nth-child(2) {
+                        order: 1;
+                    }
+                }
+
+                .IconView { 
+                    margin-left: 0;
+                    margin-right: 8px;
+                }
+            }
+        }
     }
-  }
 }

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

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

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

@@ -0,0 +1,50 @@
+"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 useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
+function ContentColumnView(props) {
+    var _a, _b, _c, _d, _e;
+    var bem = (0, useBem_1["default"])('ContentColumnView');
+    var hasLink = !!((_a = props.link) === null || _a === void 0 ? void 0 : _a.attribute);
+    var hasPicture = !!((_b = props.picture) === null || _b === void 0 ? void 0 : _b.attribute);
+    var hasIcon = !!((_c = props.icon) === null || _c === void 0 ? void 0 : _c.attribute);
+    var hasSubtitle = !!props.subtitleAttribute;
+    var hasTextData = !!props.attribute || !!props.subtitleAttribute || hasLink;
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: hasLink ? props.link.attribute : props.attribute }))); };
+    var renderValue = function () {
+        var _a;
+        if (hasLink) {
+            return (react_1["default"].createElement(nav_1.Link, __assign({}, props.link.linkProps, { url: (0, get_1["default"])(props.item, (_a = props.link) === null || _a === void 0 ? void 0 : _a.urlAttribute), className: bem.element('link') }), renderFormat()));
+        }
+        return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat()));
+    };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            isLeft: ((_d = props.picture) === null || _d === void 0 ? void 0 : _d.isLeft) || ((_e = props.icon) === null || _e === void 0 ? void 0 : _e.isLeft)
+        })) },
+        hasTextData && (react_1["default"].createElement("div", { className: bem.element('data') },
+            renderValue(),
+            hasSubtitle && react_1["default"].createElement("span", { className: bem.element('subtitle') }, (0, get_1["default"])(props.item, props.subtitleAttribute)))),
+        hasPicture && (react_1["default"].createElement("span", { className: bem.element('picture') },
+            react_1["default"].createElement("img", { src: (0, get_1["default"])(props.item, props.picture.attribute), alt: "cell element" }))),
+        hasIcon && (react_1["default"].createElement(content_1.Icon, { name: (0, get_1["default"])(props.item, props.icon.attribute), className: bem.element('icon') }))));
+}
+exports["default"] = ContentColumnView;

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;