@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.120

package/layout/Sidebar/SidebarLogo/SidebarLogo.scss

@@ -0,0 +1,52 @@
+@use "../../../scss/variables";
+
+.SidebarLogo {
+    padding: 19px 12px 8px 12px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    border-bottom: 1px solid variables.$element-border-color;
+
+    &__left {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 9px;
+        position: relative;
+        cursor: pointer;
+        transform: translateY(-4px);
+    }
+
+    &__label {
+        font-size: variables.$font-size-base;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-base;
+        color: variables.$sidebar-label-color;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+    }
+
+    &__icon {
+        width: 34px;
+        min-width: 34px;
+        height: 34px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__right {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+        svg path, rect, circle { 
+            stroke: variables.$icon-color;
+        }
+    }
+}

package/layout/Sidebar/SidebarLogo/index.d.ts

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

package/layout/Sidebar/SidebarLogo/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 SidebarLogo_1 = __importDefault(require("./SidebarLogo"));
+exports["default"] = SidebarLogo_1["default"];

package/layout/Sidebar/SidebarUser/SidebarUser.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IMenuProps } from '@steroidsjs/core/ui/content/Menu/Menu';
+import './SidebarUser.scss';
+interface ISidebarUserProps {
+    menu: IMenuProps;
+    name: string;
+    picture: string;
+}
+declare function SidebarUser(props: ISidebarUserProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SidebarUser>;
+export default _default;

package/layout/Sidebar/SidebarUser/SidebarUser.js

@@ -0,0 +1,53 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Menu_1 = __importDefault(require("@steroidsjs/core/ui/content/Menu/Menu"));
+var content_1 = require("@steroidsjs/core/ui/content");
+require("./SidebarUser.scss");
+function SidebarUser(props) {
+    var bem = (0, useBem_1["default"])('SidebarUser');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('left') },
+            react_1["default"].createElement(content_1.Avatar, { size: "sm", src: props.picture, className: bem.element('avatar') }),
+            react_1["default"].createElement("p", { className: bem.element('name') }, props.name)),
+        react_1["default"].createElement(Menu_1["default"], __assign({}, props === null || props === void 0 ? void 0 : props.menu))));
+}
+exports["default"] = (0, react_1.memo)(SidebarUser);

package/layout/Sidebar/SidebarUser/SidebarUser.scss

@@ -0,0 +1,45 @@
+@use "style/variables";
+
+.SidebarUser {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 0px 12px;
+
+    &__left {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 12px;
+        transform: translateX(1px) translateY(1px);
+
+        .AvatarView { 
+            width: 36px;
+            height: 36px;
+        }
+    }
+
+    &__name {
+        width: 128px;
+
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-sm;
+        color: variables.$sidebar-label-color;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+    }
+
+    .MenuView__button .IconView.MenuView__icon {
+        width: 24px;
+        height: 24px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/layout/Sidebar/SidebarUser/index.d.ts

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

package/layout/Sidebar/SidebarUser/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 SidebarUser_1 = __importDefault(require("./SidebarUser"));
+exports["default"] = SidebarUser_1["default"];

package/layout/Sidebar/SidebarView.d.ts

@@ -0,0 +1,2 @@
+import { ISidebarViewProps } from '@steroidsjs/core/ui/layout/Sidebar/Sidebar';
+export default function SidebarView(props: ISidebarViewProps): JSX.Element;

package/layout/Sidebar/SidebarView.js

@@ -0,0 +1,26 @@
+"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"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var SidebarUser_1 = __importDefault(require("./SidebarUser"));
+var SidebarLogo_1 = __importDefault(require("./SidebarLogo"));
+var FooterIcons_1 = __importDefault(require("./FooterIcons"));
+function SidebarView(props) {
+    var bem = (0, useBem_1["default"])('SidebarView');
+    return (react_1["default"].createElement("aside", { className: bem(bem.block({
+            isOpened: props.isOpened,
+            hasSeparatedItem: props.hasSeparatedNavItem
+        }), props.className), style: props.style },
+        react_1["default"].createElement("header", { className: bem.element('header') },
+            react_1["default"].createElement(SidebarLogo_1["default"], { icon: props.logo.icon, label: props.logo.label, toggleSidebar: props.toggleSidebar }),
+            react_1["default"].createElement(SidebarUser_1["default"], { menu: props.menu, name: props.user.name, picture: props.user.picture })),
+        react_1["default"].createElement(nav_1.Nav, { items: props.items, layout: "icon", className: bem.element('nav'), onChange: props === null || props === void 0 ? void 0 : props.onClickNav }),
+        react_1["default"].createElement("footer", { className: bem.element('footer') },
+            react_1["default"].createElement(FooterIcons_1["default"], { footerIcons: props.footerIcons, isShink: !props.isOpened })),
+        react_1["default"].createElement("div", { className: bem.element('trigger'), onClick: props.toggleSidebar })));
+}
+exports["default"] = SidebarView;

package/layout/Sidebar/SidebarView.scss

@@ -0,0 +1,304 @@
+@use "../../scss/variables";
+
+:root {
+    --sidebar-text-color: #00000099;
+    --sidebar-text-hover-color: #312c3a;
+    --sidebar-text-active-color: #312c3a;
+    --sidebar-item-hover-color: #f1f5f7;
+    --sidebar-item-active-color: #dbe2e6;
+    --sidebar-border-color: rgba(0, 0, 0, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiM2MjYyNjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: #626262;
+    --sidebar-hover-icon-color: #323232;
+    --sidebar-active-icon-color: #323232;
+
+    --sidebar-badge-border-color: #dbe2e6;
+}
+
+html[data-theme="dark"] {
+    --sidebar-text-color: #ffffff99;
+    --sidebar-text-hover-color: #ffffff;
+    --sidebar-text-active-color: #fff;
+    --sidebar-item-hover-color: rgba(0, 0, 0, 0.3);
+    --sidebar-item-active-color: #272a37;
+    --sidebar-border-color: rgba(255, 255, 255, 0.1);
+    --sidebar-parent-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb25zL0ljb25zMjQmIzIwOTsmIzEzMzsyNC9XaGl0ZS9hcnJvdy9FeHBhbmRfcmlnaHRfOCI+CjxwYXRoIGlkPSJWZWN0b3IgOSIgZD0iTTEwIDguODk3NThMMTQgMTIuODk3NkwxMCAxNi44OTc2IiBzdHJva2U9IiNBREFDQUMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=");
+    --sidebar-default-icon-color: rgba(255, 255, 255, 0.6);
+    --sidebar-hover-icon-color: #ffffff;
+    --sidebar-active-icon-color: #ffffff;
+
+    --sidebar-badge-border-color: #272a37;
+}
+
+$sidebar-text-color: var(--sidebar-text-color);
+$sidebar-text-hover-color: var(--sidebar-text-hover-color);
+$sidebar-text-active-color: var(--sidebar-text-active-color);
+$sidebar-item-hover-color: var(--sidebar-item-hover-color);
+$sidebar-item-active-color: var(--sidebar-item-active-color);
+$sidebar-border-color: var(--sidebar-border-color);
+$sidebar-parent-icon: var(--sidebar-parent-icon);
+$sidebar-default-icon-color: var(--sidebar-default-icon-color);
+$sidebar-hover-icon-color: var(--sidebar-hover-icon-color);
+$sidebar-active-icon-color: var(--sidebar-active-icon-color);
+
+$sidebar-badge-border-color: var(--sidebar-badge-border-color);
+
+.SidebarView {
+    $root: &;
+    position: relative;
+    padding: 8px;
+    max-width: 72px;
+    transition: max-width 250ms ease-in-out;
+    background-color: variables.$element-background-color;
+
+    &__header {
+        margin-bottom: 80px;
+    }
+
+    .ButtonView .ButtonView__link .ButtonView__text {
+        color: $sidebar-text-color;
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-sm;
+        transition: color 150ms ease-in-out;
+        opacity: 0;
+    }
+
+    .NavIconView__list-item .ButtonView .ButtonView__link {
+        width: 24px;
+    }
+
+    .ButtonView {
+        width: 100%;
+        padding: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &__icon {
+            margin-right: 0;
+            min-width: 24px;
+        }
+
+        &__link {
+            gap: 8px;
+        }
+    }
+
+    &__nav {
+        .NavIconView__list {
+            flex-flow: column nowrap;
+            align-items: flex-start;
+            gap: 4px;
+
+            &-item {
+                position: relative;
+                width: 100%;
+                border-radius: variables.$radius-large;
+
+                svg path,
+                rect,
+                circle {
+                    stroke: variables.$icon-color;
+                }
+
+                transition: background-color 150ms ease-in-out;
+
+                //Состояние hover для элемента
+                .ButtonView:hover {
+                    background-color: $sidebar-item-hover-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-hover-icon-color;
+                        }
+                    }
+                    .ButtonView__text {
+                        color: $sidebar-text-hover-color;
+                    }
+                }
+
+                //Состояние active для элемента
+                &_active > .ButtonView {
+                    background-color: $sidebar-item-active-color;
+
+                    .ButtonView__icon {
+                        svg path,
+                        circle,
+                        rect {
+                            stroke: $sidebar-active-icon-color;
+                        }
+                    }
+
+                    .ButtonView__text {
+                        color: $sidebar-text-active-color;
+                    }
+                }
+
+                &_hasBorder {
+                    &::before {
+                        content: "";
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 1px;
+                        margin-bottom: 4px;
+                        background-color: $sidebar-border-color;
+                    }
+                }
+
+                //Стрелка для родительского элемента внутри которого есть другие пункты
+                &_hasItems > .ButtonView {
+                    position: relative;
+                    &::after {
+                        content: "";
+                        display: block;
+                        position: absolute;
+                        pointer-events: none;
+                        top: 50%;
+                        right: 12px;
+                        width: 24px;
+                        height: 24px;
+                        background-image: $sidebar-parent-icon;
+                        background-size: cover;
+                        transform: translateY(-50%);
+                        transition: transform 150ms ease-in-out;
+                    }
+                }
+
+                //Поворот стрелки при активации элемента
+                &_active.NavIconView__list-item_hasItems > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                //Поворот стрелки если есть дочерний активированный элемент
+                &_nestedActive > .ButtonView::after {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                .ButtonView__badge {
+                    position: absolute;
+                    bottom: 3px;
+                    top: auto;
+                    right: 7px;
+                    border-radius: 160px;
+                    padding: 1px;
+                    border: 2px solid $sidebar-badge-border-color;
+                }
+
+                .ButtonView__icon {
+                    svg path,
+                    rect,
+                    circle {
+                        stroke: $sidebar-default-icon-color;
+                    }
+                }
+
+                &-nested {
+                    width: 100%;
+                    margin: 0;
+                    &-item {
+                        .ButtonView {
+                            padding-left: 54px;
+                        }
+
+                        //Состояние hover для вложенного элемента
+                        &:hover:not(.NavIconView__list-item-nested-item_active) > .ButtonView {
+                            background-color: $sidebar-item-hover-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-hover-color;
+                            }
+                        }
+
+                        //Состояние active для вложенного элемента
+                        &_active > .ButtonView {
+                            background-color: $sidebar-item-active-color;
+
+                            .ButtonView__text {
+                                color: $sidebar-text-active-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .NavIconView__list-item:nth-last-child(1) {
+        margin-bottom: 160px;
+    }
+
+    &_hasSeparatedItem {
+        //Декоративный элемент перед последним пунктом
+        .NavIconView__list-item:nth-last-child(2) {
+            margin-bottom: 160px;
+        }
+
+        .NavIconView__list-item:nth-last-child(1) {
+            margin-bottom: 0;
+        }
+    }
+
+    &__footer {
+        border-top: 1px solid variables.$element-border-color;
+    }
+
+    &__trigger {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+    }
+
+    &_isOpened {
+        max-width: 276px;
+
+        .SidebarLogo__label {
+            opacity: 1;
+        }
+
+        .SidebarLogo__right {
+            opacity: 1;
+        }
+
+        .SidebarUser__name {
+            opacity: 1;
+        }
+
+        .SidebarUser .MenuView__button .IconView.MenuView__icon {
+            opacity: 1;
+        }
+
+        .ButtonView .ButtonView__link .ButtonView__text {
+            opacity: 1;
+        }
+
+        .NavIconView__list-item .ButtonView .ButtonView__link {
+            width: auto;
+        }
+
+        .ButtonView {
+            justify-content: flex-start;
+        }
+
+        .ButtonView__badge {
+            position: absolute;
+            padding: 3px 8px !important;
+            top: 50%;
+            right: 12px;
+            border-radius: 160px;
+            padding: 1px;
+            border: none;
+            transform: translateY(-30%);
+        }
+        #{$root}__trigger {
+            display: none;
+        }
+    }
+}

package/layout/Sidebar/index.d.ts

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

package/layout/Sidebar/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 SidebarView_1 = __importDefault(require("./SidebarView"));
+exports["default"] = SidebarView_1["default"];

package/layout/Skeleton/SkeletonView.scss

@@ -1,6 +1,8 @@
+@use "../../scss/variables";
+
 .SkeletonView{
   $root: &;
-  background-color: $grey-darker;
+  background-color: variables.$grey-darker;
   border-radius: 4px;
   position: relative;
   overflow: hidden;
@@ -35,13 +37,13 @@
 
     @keyframes pulse {
       0% {
-        background-color: $grey-darker;
+        background-color: variables.$grey-darker;
       }
       50% {
-        background-color: $grey-light;
+        background-color: variables.$grey-light;
       }
       100% {
-        background-color: $grey-darker;
+        background-color: variables.$grey-darker;
       }
     }
 
@@ -54,7 +56,7 @@
         content: "";
         position: absolute;
         transform: translateX(-100%);
-        background: linear-gradient(90deg, transparent, rgba($grey-light, 0.3), transparent);
+        background: linear-gradient(90deg, transparent, rgba(variables.$grey-light, 0.3), transparent);
         animation: wave-animation 1.6s linear 0.5s infinite;
       }
     }

package/layout/Tooltip/TooltipView.d.ts

@@ -1,3 +1,2 @@
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function TooltipView(props: ITooltipViewProps & IBemHocOutput): JSX.Element;
+export default function TooltipView(props: ITooltipViewProps): JSX.Element;

package/layout/Tooltip/TooltipView.js

@@ -27,7 +27,6 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
@@ -35,10 +34,11 @@ function TooltipView(props) {
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
     return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+            show: props.isTooltipVisible,
+            position: props.position
+        }), props.className), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;