@steroidsjs/bootstrap 3.0.0-beta.5 → 3.0.0-beta.50

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

@@ -0,0 +1,88 @@
+@import "style/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: $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: $font-size-base;
+                line-height: $line-height-base;
+            }
+
+            #{$root}__avatar-wrapper {
+                width: 56px;
+                height: 56px;
+            }
+        }
+
+        &_md {
+            #{$root}__subtitle {
+                font-size: $font-size-sm;
+                line-height: $line-height-sm;
+            }
+        }
+
+        &_sm {
+            #{$root}__subtitle {
+                font-size: $font-size-xs;
+                line-height: $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/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,34 @@
+@import '../../scss/variables';
+
 .ListView {
+    color: $text-color;
+
+    .FormView {
+        margin-bottom: 10px;
+    }
+
+    &__pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-flow: row nowrap;
+        margin-bottom: 3px;
+
+        &-sizes {
+            width: fit-content;
+
+            .PaginationSizeView__sizes {
+                display: flex;
+                flex-flow: row nowrap;
+            }
+        }
+
+        &-button {
+            margin: 0 auto;
+        }
+    }
 
-}
+    &__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;

package/list/Pagination/PaginationButtonView.scss

@@ -1,2 +1,266 @@
+:root {
+    --pagination-hover-color: #e5e9eb;
+    --pagination-hover-background-color: #ffffff;
+    --pagination-arrow-color: #323232;
+    --pagination-focus-color: #f5f8fa;
+    --pagination-disabled-background-color: #eef1f2;
+    --pagination-disabled-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --pagination-hover-color: #5b5c6b;
+    --pagination-hover-background-color: #5b5c6b;
+    --pagination-arrow-color: #ffffff;
+    --pagination-focus-color: #adaab3;
+    --pagination-disabled-background-color: #5b5c6b;
+    --pagination-disabled-color: rgba(255, 255, 255, 0.1);
+}
+
+$pagination-hover-color: var(--pagination-hover-color);
+$pagination-hover-background-color: var(--pagination-hover-background-color);
+$pagination-arrow-color: var(--pagination-arrow-color);
+$pagination-focus-color: var(--pagination-focus-color);
+$pagination-disabled-background-color: var(--pagination-disabled-background-color);
+$pagination-disabled-color: var(--pagination-disabled-color);
+
 .PaginationButtonView {
-}
+    $root: &;
+
+    display: flex;
+    flex-flow: row nowrap;
+    color: $text-color;
+
+    &_size {
+        &_lg {
+            height: 48px;
+            #{$root}__page {
+                &-button {
+                    padding: 12px 18px;
+                    font-size: $font-size-lg;
+                    line-height: 24px;
+
+                    &_hasIcon {
+                        padding: 12px;
+                    }
+                }
+
+                &_rounding-left {
+                    border-top-left-radius: 12px;
+                    border-bottom-left-radius: 12px;
+
+                    &::before {
+                        border-top-left-radius: 14px;
+                        border-bottom-left-radius: 14px;
+                    }
+                }
+
+                &_rounding-right {
+                    border-top-right-radius: 12px;
+                    border-bottom-right-radius: 12px;
+
+                    &::before {
+                        border-top-right-radius: 14px;
+                        border-bottom-right-radius: 14px;
+                    }
+                }
+
+                &::before {
+                    transform: translate(-4px, -4px);
+                }
+            }
+        }
+        &_md {
+            height: 40px;
+            #{$root}__page {
+                &-button {
+                    padding: 8px 14px;
+                    font-size: $font-size-base;
+                    line-height: 24px;
+
+                    &_hasIcon {
+                        padding: 8px 11px;
+                    }
+                }
+
+                &_rounding-left {
+                    border-top-left-radius: 12px;
+                    border-bottom-left-radius: 12px;
+
+                    &::before {
+                        border-top-left-radius: 14px;
+                        border-bottom-left-radius: 14px;
+                    }
+                }
+
+                &_rounding-right {
+                    border-top-right-radius: 12px;
+                    border-bottom-right-radius: 12px;
+
+                    &::before {
+                        border-top-right-radius: 14px;
+                        border-bottom-right-radius: 14px;
+                    }
+                }
+
+                &::before {
+                    transform: translate(-4px, -4px);
+                }
+            }
+        }
+        &_sm {
+            height: 32px;
+            #{$root}__page {
+                &-button {
+                    padding: 4px 12px;
+                    font-size: $font-size-sm;
+                    line-height: 25px;
+
+                    &_hasIcon {
+                        padding: 4px 7px;
+                    }
+                }
+
+                &_rounding-left {
+                    border-top-left-radius: 8px;
+                    border-bottom-left-radius: 8px;
+
+                    &::before {
+                        border-top-left-radius: 10px;
+                        border-bottom-left-radius: 10px;
+                    }
+                }
+
+                &_rounding-right {
+                    border-top-right-radius: 8px;
+                    border-bottom-right-radius: 8px;
+
+                    &::before {
+                        border-top-right-radius: 10px;
+                        border-bottom-right-radius: 10px;
+                    }
+                }
+
+                &::before {
+                    transform: translate(-4px, -4px);
+                }
+            }
+        }
+    }
+
+    &__page {
+        position: relative;
+        $pageRoot: &;
+
+        display: inline-block;
+        cursor: pointer;
+
+        background-color: $element-background-color;
+        border: 1px solid $border-color;
+        border-right: none;
+
+        &::before {
+            position: absolute;
+            z-index: 2;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            border-radius: inherit;
+            border: 4px solid $pagination-focus-color;
+            opacity: 0;
+        }
+
+        &:last-child {
+            border: 1px solid $border-color;
+        }
+
+        &_active {
+            background-color: $primary;
+            color: $white;
+        }
+
+        &_hasIcon:not(#{$pageRoot}_disabled):active {
+            background-color: $primary;
+
+            #{$pageRoot}-icon {
+                path {
+                    stroke: #ffffff;
+                }
+            }
+        }
+
+        &:not(#{$pageRoot}_disabled):not(#{$pageRoot}_active):hover {
+            border-color: $pagination-hover-color;
+            background-color: $pagination-hover-background-color;
+        }
+
+        &:not(#{$pageRoot}_disabled):focus-within::before {
+            opacity: 1;
+        }
+
+        &_rounding {
+            &-left {
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+            }
+
+            &-right {
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px;
+            }
+        }
+
+        &-button {
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+            border: none;
+            background: none;
+            color: inherit;
+            user-select: none;
+            outline: none;
+        }
+
+        &-icon {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            pointer-events: none;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            rect { 
+                fill: transparent;
+            }
+
+            path {
+                stroke: $pagination-arrow-color;
+            }
+
+            &_rotate {
+                transform: rotate(180deg);
+            }
+        }
+
+        &_disabled {
+            background-color: $pagination-disabled-background-color;
+            color: $pagination-disabled-color;
+            cursor: not-allowed;
+
+            button { 
+                cursor: not-allowed;
+            }
+
+            #{$pageRoot}-icon {
+                pointer-events: none;
+                path {
+                    stroke: $pagination-disabled-color;
+                }
+            }
+        }
+    }
+}

package/list/Pagination/PaginationMoreView.js

@@ -42,7 +42,7 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function PaginationMoreView(props) {
     var bem = (0, hooks_1.useBem)('PaginationMoreView');
-    return (React.createElement("div", { className: bem('text-center', bem.block(), props.className) },
+    return (React.createElement("div", { className: bem(bem.block(), props.className) },
         React.createElement(Button_1["default"], __assign({ color: 'secondary', outline: true, label: __('Загрузить еще...') }, props.buttonProps, { onClick: props.onSelectNext }))));
 }
 exports["default"] = PaginationMoreView;

package/list/Pagination/PaginationMoreView.scss

@@ -1,2 +1,5 @@
 .PaginationMoreView {
-}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

package/modal/Modal/ModalView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IModalViewProps } from '@steroidsjs/core/ui/modal/Modal/Modal';
-export default function ModalView(props: IModalViewProps & IBemHocOutput): JSX.Element;
+export default function ModalView(props: IModalViewProps): JSX.Element;

package/modal/Modal/ModalView.js

@@ -40,7 +40,8 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_modal_1 = __importDefault(require("react-modal"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var form_1 = require("@steroidsjs/core/ui/form");
 function ModalView(props) {
     var bem = (0, hooks_1.useBem)('ModalView');
     var overrideDefaultClasses = {
@@ -51,12 +52,8 @@ function ModalView(props) {
     return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem.element('body', { size: props.size }), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
         React.createElement("div", { className: bem.element('header') },
             React.createElement("span", { className: bem.element('title') }, props.title),
-            React.createElement("button", { className: bem.element('close'), onClick: function (e) {
-                    e.preventDefault();
-                    props.onClose();
-                }, "aria-label": __('Закрыть') })),
+            React.createElement(content_1.Icon, { name: 'cross_12x12', className: bem.element('close'), onClick: props.onClose })),
         React.createElement("div", { className: bem.element('content') }, props.children),
-        props.controls && (React.createElement("div", { className: bem.element('footer') },
-            React.createElement(Controls_1["default"], { className: bem.element('controls'), items: props.controls })))));
+        props.buttons && (React.createElement("div", { className: bem.element('footer') }, props.buttons.map(function (button, buttonIndex) { return (React.createElement(form_1.Button, __assign({ key: buttonIndex, size: props.size }, button))); })))));
 }
 exports["default"] = ModalView;