@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.100

package/list/Pagination/PaginationButtonView.scss

@@ -1,2 +1,278 @@
+@use "../../scss/variables";
+
+:root {
+    --pagination-border-color: var(--gray);
+    --pagination-hover-background-color: $white;
+
+    --pagination-arrow-color: #323232;
+    --pagination-background-color-disabled: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --pagination-border-color: var(--background-color);
+    --pagination-hover-background-color: var(--gray-dark);
+
+    --pagination-arrow-color: #ffffff;
+    --pagination-background-color-disabled: #333646;
+}
+
+$pagination-border-color: var(--pagination-border-color);
+$pagination-hover-background-color: var(--pagination-hover-background-color);
+
+$pagination-arrow-color: var(--pagination-arrow-color);
+$pagination-background-color-disabled: var(--pagination-background-color-disabled);
+
 .PaginationButtonView {
-}
+    $root: &;
+
+    display: flex;
+    flex-flow: row nowrap;
+    color: variables.$text-color;
+
+    &_size {
+        &_lg {
+            height: 48px;
+            #{$root}__page {
+                &-button {
+                    padding: 12px 18px;
+                    font-size: variables.$font-size-lg;
+                    line-height: 24px;
+
+                    @media (max-width: 460px) {
+                        padding: 10px 12px;
+                    }
+
+                    @media (max-width: 372px) {
+                        padding: 10px 6px;
+                    }
+
+                    &_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: variables.$font-size-base;
+                    line-height: 24px;
+
+                    @media (max-width: 428px) {
+                        padding: 8px;
+                    }
+
+                    &_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: variables.$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: variables.$element-background-color;
+        border: 1px solid $pagination-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 variables.$light-gray;
+            opacity: 0;
+        }
+
+        &:last-child {
+            border: 1px solid $pagination-border-color;
+        }
+
+        &_active {
+            background-color: variables.$primary;
+            color: variables.$white;
+        }
+
+        &_hasIcon:not(#{$pageRoot}_disabled):active {
+            background-color: variables.$primary;
+
+            #{$pageRoot}-icon {
+                path {
+                    stroke: #ffffff;
+                }
+            }
+        }
+
+        &:not(#{$pageRoot}_disabled):not(#{$pageRoot}_active):hover {
+            border-color: variables.$element-border-color-hover;
+            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: variables.$element-background-color-disabled;
+            color: variables.$element-placeholder-color-disabled;
+
+            cursor: not-allowed;
+
+            button {
+                cursor: not-allowed;
+            }
+
+            #{$pageRoot}-icon {
+                pointer-events: none;
+                path {
+                    stroke: variables.$element-placeholder-color-disabled;
+                }
+            }
+        }
+    }
+}

package/list/Pagination/PaginationMoreView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IPaginationViewProps } from '@steroidsjs/core/ui/list/Pagination/Pagination';
 export default function PaginationMoreView(props: IPaginationViewProps): JSX.Element;

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/list/PaginationSize/PaginationSizeView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IPaginationSizeViewProps } from '@steroidsjs/core/ui/list/PaginationSize/PaginationSize';
 export default function PaginationSizeView(props: IPaginationSizeViewProps): JSX.Element;

package/list/PaginationSize/PaginationSizeView.js

@@ -22,16 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var ButtonGroup_1 = __importDefault(require("@steroidsjs/core/ui/nav/ButtonGroup"));
 function PaginationSizeView(props) {
     var bem = (0, hooks_1.useBem)('PaginationSizeView');
     return (React.createElement("div", { className: bem(props.className, bem.block()) },
-        React.createElement("ul", { className: bem(bem.element('sizes'), 'pagination', "pagination-".concat(props.size)) }, props.items.map(function (item, index) { return (React.createElement("li", { key: index, className: bem(bem.element('sizes-item', { active: item.isActive }), 'page-item', item.isActive && 'active') },
-            React.createElement("button", { className: bem(bem.element('link'), 'page-link'), onClick: function (e) {
-                    e.preventDefault();
-                    props.onSelect(item.size);
-                } }, item.label))); }))));
+        React.createElement(ButtonGroup_1["default"], { items: props.items, onClick: props.onSelect, activeButton: props.defaultValue, buttonProps: props.buttonProps })));
 }
 exports["default"] = PaginationSizeView;

package/list/PaginationSize/PaginationSizeView.scss

@@ -2,12 +2,4 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
-  &__label {
-    margin-right: 5px;
-  }
-
-  &__sizes {
-    margin-bottom: 0;
-  }
 }

package/list/Steps/StepItemView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IStepItemViewProps } from "@steroidsjs/core/ui/list/Steps/Steps";
+import { IStepItemViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
 export default function StepItemView(props: IStepItemViewProps): JSX.Element;

package/list/Steps/StepItemView.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function StepItemView(props) {
     var _a;
-    var bem = (0, hooks_1.useBem)("StepItemView");
+    var bem = (0, hooks_1.useBem)('StepItemView');
     return (React.createElement("div", { className: bem(props.className, bem.block((_a = {}, _a[props.status] = true, _a))) },
         React.createElement("div", { className: bem.element('body', { disabled: props.disabled }), onClick: props.onChange },
             React.createElement("div", { className: bem.element('header') },
-                React.createElement("span", { className: bem.element('icon') }, props.status === 'finish' ? React.createElement(Icon_1["default"], { name: 'check' }) : props.stepItem.icon || "0".concat(props.index)),
+                React.createElement("span", { className: bem.element('icon') }, props.status === 'finish' ? React.createElement(Icon_1["default"], { name: "check" }) : props.stepItem.icon || "0".concat(props.index)),
                 React.createElement("div", null,
                     React.createElement("div", { className: bem.element('title') }, props.stepItem.title),
                     React.createElement("div", { className: bem.element('subtitle') }, props.stepItem.subtitle))),

package/list/Steps/StepItemView.scss

@@ -1,3 +1,4 @@
+@use "../../scss/variables";
 
 .StepItemView{
   $root: &;
@@ -14,31 +15,31 @@
   }
 
   &__icon{
-    background-color: rgba($white, .2);
+    background-color: rgba(variables.$white, .2);
     padding: 5px;
     border-radius: 10px;
   }
 
   &_wait{
     #{$root}__icon{
-      background-color: $grey-darker;
+      background-color: variables.$grey-darker;
       svg{
-        fill: $white;
+        fill:variables.$white;
       }
     }
 
     #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: $grey-darker;
+      color: variables.$grey-darker;
     }
 
     #{$root}__divider{
-      border-top-color: $grey-darker;
+      border-top-color: variables.$grey-darker;
     }
   }
 
   &_active{
     #{$root}__body{
-      background-color: $primary;
+      background-color: variables.$primary;
     }
 
     #{$root}__icon svg{
@@ -50,13 +51,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $primary;
+      border-top-color: variables.$primary;
     }
   }
 
   &_finish{
     #{$root}__body{
-      background-color: $success;
+      background-color: variables.$success;
     }
 
     #{$root}__icon svg{
@@ -68,13 +69,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $success;
+      border-top-color: variables.$success;
     }
   }
 
   &_error{
     #{$root}__body{
-      background-color: $danger;
+      background-color: variables.$danger;
     }
 
     #{$root}__icon svg{
@@ -86,7 +87,7 @@
     }
 
     #{$root}__divider{
-      border-top-color: $danger;
+      border-top-color: variables.$danger;
     }
   }
 
@@ -115,7 +116,7 @@
   &__icon{
     margin-right: 5px;
 
-    color: $white;
+    color: variables.$white;
     font-size: 12px;
     font-weight: 500;
 

package/list/Steps/StepsView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IStepsViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
 export default function StepsView(props: IStepsViewProps): JSX.Element;

package/list/Steps/StepsView.js

@@ -26,7 +26,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function StepsView(props) {
-    var bem = (0, hooks_1.useBem)("StepsView");
+    var bem = (0, hooks_1.useBem)('StepsView');
     return (React.createElement("div", { className: bem(props.className, bem.block()) }, props.children));
 }
 exports["default"] = StepsView;

package/list/Steps/StepsView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .StepsView{
   width: 100%;
   min-height: 96px;
@@ -6,7 +8,7 @@
   justify-content: center;
   align-items: center;
   flex-shrink: 1;
-  background: $secondary-light;
+  background: variables.$secondary-light;
   overflow: auto;
   padding: 5px;
 

package/modal/Modal/ModalView.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-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 = {
@@ -48,15 +49,11 @@ function ModalView(props) {
         afterOpen: 'ModalView_overlay-after',
         beforeClose: 'ModalView_overlay-before'
     };
-    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 }),
+    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem(bem.element('body', { size: props.size }), props.className), 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;