@steroidsjs/bootstrap 3.0.0-beta.35 → 3.0.0-beta.37

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");
 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))); })));
+    var renderArrowStep = React.useCallback(function (onClick, iconName, rotate, rounding, disabledStatement) {
+        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: disabledStatement
+            }) },
+            React.createElement("button", { className: bem.element('page-button', {
+                    hasIcon: true
+                }), onClick: function () { return onClick(); } },
+                React.createElement(content_1.Icon, { tabIndex: -1, className: bem.element('page-icon', {
+                        rotate: rotate
+                    }), name: iconName }))));
+    }, [bem]);
+    return (React.createElement("ul", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        props.showEdgeSteps
+            && renderArrowStep(props.onSelectFirst, 'double-arrow-left', false, { left: true }, props.isFirstPage),
+        props.showSteps
+            && renderArrowStep(props.onSelectPrev, 'arrow-left', 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(props.onSelectNext, 'arrow-left', true, {}, props.isLastPage),
+        props.showEdgeSteps
+            && renderArrowStep(props.onSelectFirst, 'double-arrow-left', true, { right: true }, props.isLastPage)));
 }
 exports["default"] = PaginationButtonView;

package/list/Pagination/PaginationButtonView.scss

@@ -1,2 +1,259 @@
+: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 {
+            #{$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 {
+            #{$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 {
+            #{$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(: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;
+
+            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/nav/Breadcrubms/BreadcrumbsView.js

@@ -29,14 +29,22 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Link_1 = __importDefault(require("@steroidsjs/core/ui/nav/Link"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function BreadcrumbsView(props) {
     var bem = (0, hooks_1.useBem)('BreadcrumbsView');
     var items = props.items || [];
+    var renderLink = React.useCallback(function (item, children) { return (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, children)); }, [props.routeParams]);
+    var renderHomeIcon = React.useCallback(function () { return (props.customIcon
+        ? (0, renderIcon_1["default"])(props.customIcon, { className: bem.element('custom-icon') })
+        : (React.createElement(content_1.Icon, { name: 'home', className: bem.element('icon') }))); }, [bem, props.customIcon]);
     return (React.createElement("nav", { className: bem(bem.block(), props.className), "aria-label": 'breadcrumb' },
         React.createElement("ol", { className: bem.element('list') }, items.map(function (item, index) {
             var isLastItem = items.length === index + 1;
+            var isFirstItem = index === 0;
             return (React.createElement("li", { key: item.id || index, className: bem.element('item') },
-                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, item.title)),
+                isFirstItem && item.id && renderLink(item, props.showIcon ? renderHomeIcon() : item.title),
+                !isFirstItem && !isLastItem && item.id && renderLink(item, item.title),
                 (isLastItem || !item.id) && (React.createElement("span", null, props.pageTitle || item.title))));
         }))));
 }

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -1,6 +1,38 @@
+
+
+:root {
+  --last-link-color: rgba(0, 0, 0, 0.3);;
+}
+
+html[data-theme="dark"] { 
+  --last-link-color: rgba(255, 255, 255, 0.3);
+}
+
+$last-link-color: var(--last-link-color);
+
 .BreadcrumbsView {
   $breadcrumb-item-separator: '/';
 
+  &__custom-icon {
+    display: flex;
+  }
+
+  &__icon {
+    display: flex;
+
+    svg {
+      stroke: $link-color;
+    }
+
+    svg:hover { 
+      stroke: $link-color-hover;
+    }
+
+    svg path {
+      stroke:inherit;
+    }
+  }
+
   &__list {
     display: flex;
     flex-wrap: wrap;
@@ -8,11 +40,30 @@
     padding: 0;
   }
 
+  &__list {
+    li:last-child span{
+      color: $last-link-color;
+    }
+  }
+
   &__item {
+    display: flex;
+    align-items: center;
+
     &:not(:first-child)::before {
       content: $breadcrumb-item-separator;
       display: inline-block;
       margin: 0 8px;
+      color: $link-color;
+    }
+
+    span {
+      line-height: 24px;
+      font-size: 14px;
+    }
+
+    span:hover {
+      color: $link-color-hover;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.35",
+    "version": "3.0.0-beta.37",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.16",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.16"
     }
 }

package/scss/mixins/button.scss

@@ -2,17 +2,22 @@
     background-color: map-get($colorMap, color);
     color: map-get($colorMap, text-color);
 
-    &:not(:disabled):hover {
+    &:hover {
         background-color: map-get($colorMap, color-dark);
     }
-    &:not(:disabled):focus,
-    &:not(:disabled):focus-visible {
+    &:focus,
+    &:focus-visible {
         border: 4px solid map-get($colorMap, color-light);
     }
-    &:not(:disabled):active {
+    &:active {
         background-color: map-get($colorMap, color-light);
     }
 
+    &:disabled {
+        background-color: map-get($colorMap, color);
+        color: map-get($colorMap, text-color);
+    }
+
     #{$root}__loader { 
         svg {
             path { 
@@ -31,20 +36,26 @@
     color: map-get($colorMap, color);
     border: 1px solid map-get($colorMap, color);
 
-    &:not(:disabled):hover {
+    &:hover {
         color: map-get($colorMap, color-dark);
         border-color: map-get($colorMap, color-dark);
     }
-    &:not(:disabled):focus {
+    &:focus {
         box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
         border: none;
     }
-    &:not(:disabled):active {
+    &:active {
         color: map-get($colorMap, color-light);
         border-color: map-get($colorMap, color-light);
         box-shadow: none;
     }
 
+    &:disabled {
+        background-color: transparent;
+        color: map-get($colorMap, color);
+        border: 1px solid map-get($colorMap, color);
+    }
+
     @if ($colorName == "basic") {
         color: $text-color;
     } 

package/scss/variables/common/colors.scss

@@ -18,19 +18,19 @@
     --warning-dark: #ebd251;
     --warning-light: #fff6c6;
     --graphite: #323232;
-    --gray-dark: #e1e1e1;
-    --gray: #ededed;
-    --light-gray: #f8f8f8;
+    --gray-dark: #cbd5db;
+    --gray: #dbe2e6;
+    --light-gray: #f1f5f7;
     --dark: #6f6b76;
     --light: #9088a1;
     --text-color: #312c3a;
     --background-color: #fff;
     --is-dark: "false";
-    --border-color: #eef1f2;
+    --border-color: #dbe2e6;
     --border-color-hover: #e5e9eb;
     --placeholder-color: rgba(0, 0, 0, 0.3);
     --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
-    --background-disabled-color: #eef1f2;
+    --background-disabled-color: #f1f5f7;
     --element-background-color: #FFFFFF;
 }
 
@@ -118,8 +118,13 @@ $black-30: rgba(#000, 0.3) !default;
 $black-10: rgba(#000, 0.1) !default;
 $black-4: rgba(#000, 0.04) !default;
 $white: #fff !default;
+$white-60: rgba(#ffffff, 0.6) !default;
+$white-30: rgba(#ffffff, 0.3) !default;
+$white-10: rgba(#ffffff, 0.1) !default;
+$white-4: rgba(#ffffff, 0.04) !default;
 
 $link-color: #2ba3fb !default;
+$link-color-hover: #00c2ff !default;
 
 $gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
 

package/scss/variables/normalize.scss

@@ -6,6 +6,10 @@
     box-sizing: border-box;
 }
 
+ul, li {
+    list-style-type: none;
+}
+
 a {
     text-decoration: none;
     color: inherit;

package/utils/renderIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IIconProps } from '@steroidsjs/core/ui/content/Icon/Icon';
+/**
+* Функция которая проверяет соответствует ли typeof icon === 'string', если да - то вернет компонент Icon
+* с переданным в него iconProps, если нет то вернется span с классом iconProps.className со вложенным {icon}
+* @example renderIcon(props.leadIcon, {className: 'leadIcon', tabIndex: -1})
+*/
+declare const renderIcon: (icon: string | React.ReactElement, iconProps: IIconProps) => JSX.Element;
+export default renderIcon;

package/utils/renderIcon.js

@@ -0,0 +1,27 @@
+"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;
+/* eslint-disable valid-typeof */
+var react_1 = __importDefault(require("react"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon/Icon"));
+/**
+* Функция которая проверяет соответствует ли typeof icon === 'string', если да - то вернет компонент Icon
+* с переданным в него iconProps, если нет то вернется span с классом iconProps.className со вложенным {icon}
+* @example renderIcon(props.leadIcon, {className: 'leadIcon', tabIndex: -1})
+*/
+var renderIcon = function (icon, iconProps) { return typeof icon === 'string'
+    ? (react_1["default"].createElement(Icon_1["default"], __assign({ name: icon }, iconProps))) : (react_1["default"].createElement("span", { className: iconProps.className }, icon)); };
+exports["default"] = renderIcon;

package/form/DropDownField/views/DropDownItem/DropDownItemView.d.ts

@@ -1,3 +0,0 @@
-import { IDropDownItemViewProps } from '@steroidsjs/core/ui/form/DropDownField/DropDownField';
-import './DropDownItemView.scss';
-export default function DropDownItemView(props: IDropDownItemViewProps): JSX.Element;

package/form/DropDownField/views/DropDownItem/DropDownItemView.js

@@ -1,80 +0,0 @@
-"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 Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
-var form_1 = require("@steroidsjs/core/ui/form");
-var content_1 = require("@steroidsjs/core/ui/content");
-require("./DropDownItemView.scss");
-var GROUP_CONTENT_TYPE = 'group';
-function DropDownItemView(props) {
-    var bem = (0, useBem_1["default"])('DropDownItemView');
-    var groupProps = props;
-    var commonProps = {
-        className: bem.element('option', {
-            hover: props.hoveredId === props.item[props.primaryKey],
-            select: props.selectedIds.includes(props.item[props.primaryKey]),
-            size: props.size
-        }),
-        onFocus: function () { return props.onItemHover(props.item[props.primaryKey]); },
-        onMouseOver: function () { return props.onItemHover(props.item[props.primaryKey]); },
-        onClick: function (e) {
-            e.preventDefault();
-            props.onItemSelect(props.item[props.primaryKey]);
-        }
-    };
-    var renderTypeCases = function (type, src) {
-        switch (type) {
-            case 'icon':
-                return (react_1["default"].createElement("div", __assign({}, commonProps),
-                    typeof src === 'string' ? (react_1["default"].createElement(Icon_1["default"], { name: src, className: bem.element('icon') })) : (react_1["default"].createElement("span", { className: bem.element('icon') }, src)),
-                    react_1["default"].createElement("span", null, props.item.label)));
-            case 'checkbox':
-                return (react_1["default"].createElement("div", __assign({}, commonProps),
-                    react_1["default"].createElement(form_1.CheckboxField, { label: props.item.label, className: bem.element('checkbox'), size: props.size, inputProps: {
-                            checked: props.selectedIds.includes(props.item[props.primaryKey])
-                        } })));
-            case 'img':
-                return (react_1["default"].createElement("div", __assign({}, commonProps),
-                    react_1["default"].createElement("span", { className: bem.element('img') },
-                        react_1["default"].createElement("img", { src: src, alt: "custom source for item" })),
-                    react_1["default"].createElement("span", null, props.item.label)));
-            case 'radio':
-                return (react_1["default"].createElement("div", __assign({}, commonProps),
-                    react_1["default"].createElement(form_1.RadioListField, { items: [props.item], selectedIds: props.selectedIds, className: bem.element('radio', {
-                            size: props.size
-                        }), size: props.size })));
-            case 'group':
-                return (react_1["default"].createElement(content_1.AccordionItem, { childIndex: groupProps.childIndex, isShowMore: groupProps.isShowMore, toggleAccordion: groupProps.toggleAccordion, toggleCollapse: groupProps.toggleCollapse, title: props.item.label, position: "middle", className: bem.element('group', {
-                        size: props.size
-                    }) }, props.item[props.groupAttribute].map(function (subItem, itemIndex) { return (react_1["default"].createElement(DropDownItemView, __assign({}, props, { key: itemIndex, item: subItem }))); })));
-            default:
-                return null;
-        }
-    };
-    if (props.groupAttribute && Array.isArray(props.item[props.groupAttribute])) {
-        return renderTypeCases(GROUP_CONTENT_TYPE, props.item[props.groupAttribute]);
-    }
-    if (props.item.contentType) {
-        return renderTypeCases(props.item.contentType, props.item.contentSrc);
-    }
-    if (props.itemsContent) {
-        return renderTypeCases(props.itemsContent.type, props.itemsContent.src);
-    }
-    return (react_1["default"].createElement("div", __assign({}, commonProps), props.item.label));
-}
-exports["default"] = DropDownItemView;