@steroidsjs/bootstrap 3.0.0-beta.4 → 3.0.0-beta.40

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(#{$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;
+
+            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/nav/Nav/NavIconView.js

@@ -43,7 +43,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function NavIconView(props) {
     var bem = (0, hooks_1.useBem)('NavIconView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, layout: false }, item, { label: null, hint: item.hint || item.label || null }))); }),
+        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
         props.children));
 }
 exports["default"] = NavIconView;

package/nav/Nav/NavListView.js

@@ -47,7 +47,7 @@ function NavListView(props) {
             return null;
         }
         return items.map(function (item, index) { return (React.createElement("li", { key: index, className: bem('nav-item', bem.element('item'), props.navClassName) },
-            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); }, layout: false }, item, { key: item.id || index, className: bem(item.isActive && 'active', bem.element('item-link'), item.className) })),
+            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); } }, item, { key: item.id || index, className: bem(item.isActive && 'active', bem.element('item-link'), item.className) })),
             item.items && item.items.length > 0 && (React.createElement("ul", { className: bem('nav flex-column', bem.element('sub-list')) }, renderItems(item.items))))); });
     };
     return (React.createElement("ul", { className: bem('nav flex-column', bem.block(), props.className) },

package/nav/Nav/NavTabsView.js

@@ -44,7 +44,7 @@ function NavTabsView(props) {
     var bem = (0, hooks_1.useBem)('NavTabsView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
         React.createElement("div", { className: bem('nav nav-tabs', !props.children && 'mb-3') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: 'nav-item' },
-            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); }, layout: false }, item, { className: bem('nav-link', item.isActive && 'active', item.className) })))); })),
+            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); } }, item, { className: bem('nav-link', item.isActive && 'active', item.className) })))); })),
         props.children));
 }
 exports["default"] = NavTabsView;

package/nav/Tree/TreeView.scss

@@ -17,22 +17,26 @@
     padding: 5px 10px;
     display: flex;
     flex-direction: row;
-    color: $list-group-action-color;
-    background-color: $list-group-bg;
+    justify-content: flex-start;
+    background-color: $background-color;
 
-    &:hover {
-      color: $list-group-action-hover-color;
-      background-color: $list-group-hover-bg;
+    .ButtonView__label {
+      color: $text-color;
     }
 
+    // &:hover {
+    //   color: $list-group-action-hover-color;
+    //   background-color: $list-group-hover-bg;
+    // }
+
     &, &:hover {
       text-decoration: none !important;
     }
   }
   &__item_selected &__item-label {
-    background-color: $list-group-active-bg;
+    background-color: $secondary;
     &, &::before {
-      color: $list-group-active-color;
+      color: $text-color;
     }
   }
   &__item-label::before {
@@ -43,11 +47,10 @@
     height: 20px;
     font-size: 12px;
     font-weight: bold;
-    font-family: $font-family-monospace;
     margin-left: 10px;
-    color: $list-group-action-color;
+    color: $text-color;
     position: relative;
-    top: 3px;
+    top: 1px;
     left: 3px;
   }
   &__item_has-items &__item-label::before {
@@ -55,7 +58,7 @@
   }
 
   &__item_opened &__item-label::before {
-    top: 9px;
+    top: 7px;
     left: -4px;
     transform: rotate(90deg);
   }

package/package.json

@@ -1,58 +1,58 @@
 {
-  "name": "@steroidsjs/bootstrap",
-  "version": "3.0.0-beta.4",
-  "description": "",
-  "main": "index.js",
-  "author": "Vladimir Kozhin <hello@kozhindev.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/steroids/react-bootstrap"
-  },
-  "scripts": {
-    "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
-    "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" dist"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/steroids/react-bootstrap",
-  "bugs": {
-    "url": "https://github.com/steroids/react-bootstrap/issues"
-  },
-  "dependencies": {
-    "@ckeditor/ckeditor5-react": "^3.0.2",
-    "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "bootstrap": "^4.5.2",
-    "date-fns": "^2.29.3",
-    "lodash": "^4.17.20",
-    "lodash-es": "^4.17.20",
-    "rc-slider": "^9.7.4",
-    "react": "^18.2.0",
-    "react-collapse": "^5.0.1",
-    "react-day-picker": "^7.4.10",
-    "react-dom": "^18.2.0",
-    "react-image-crop": "^9.0.2",
-    "react-modal": "^3.11.2",
-    "react-transition-group": "^2.9.0",
-    "react-use": "^17.4.0"
-  },
-  "devDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6",
-    "@steroidsjs/eslint-config": "^2.1.3",
-    "@types/enzyme": "^3.10.8",
-    "@types/googlemaps": "^3.43.3",
-    "@types/jest": "^26.0.22",
-    "@types/markdown-to-jsx": "^6.11.3",
-    "@types/node": "^14.14.37",
-    "@types/overlayscrollbars": "^1.12.0",
-    "@types/reach__router": "^1.3.7",
-    "@types/react": "^18.0.27",
-    "@types/react-color": "^3.0.4",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/webpack-env": "^1.16.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.34.0",
-    "typescript": "^4.9.5"
-  },
-  "peerDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6"
-  }
+    "name": "@steroidsjs/bootstrap",
+    "version": "3.0.0-beta.40",
+    "description": "",
+    "main": "index.js",
+    "author": "Vladimir Kozhin <hello@kozhindev.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/steroids/react-bootstrap"
+    },
+    "scripts": {
+        "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
+        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/svgs/*.svg\" dist"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/steroids/react-bootstrap",
+    "bugs": {
+        "url": "https://github.com/steroids/react-bootstrap/issues"
+    },
+    "dependencies": {
+        "@ckeditor/ckeditor5-react": "^3.0.2",
+        "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20",
+        "normalize.css": "^8.0.1",
+        "rc-slider": "^9.7.4",
+        "react": "^18.2.0",
+        "react-collapse": "^5.0.1",
+        "react-day-picker": "^7.4.10",
+        "react-dom": "^18.2.0",
+        "react-image-crop": "^9.0.2",
+        "react-modal": "^3.11.2",
+        "react-transition-group": "^2.9.0",
+        "react-use": "^17.4.0"
+    },
+    "devDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.18",
+        "@steroidsjs/eslint-config": "^2.1.4",
+        "@types/enzyme": "^3.10.8",
+        "@types/googlemaps": "^3.43.3",
+        "@types/jest": "^26.0.22",
+        "@types/markdown-to-jsx": "^6.11.3",
+        "@types/node": "^14.14.37",
+        "@types/overlayscrollbars": "^1.12.0",
+        "@types/reach__router": "^1.3.7",
+        "@types/react": "^18.0.27",
+        "@types/react-color": "^3.0.4",
+        "@types/react-syntax-highlighter": "^13.5.0",
+        "@types/webpack-env": "^1.16.0",
+        "copyfiles": "^2.4.1",
+        "eslint": "^8.34.0",
+        "typescript": "^4.9.5"
+    },
+    "peerDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.18"
+    }
 }

package/scss/fonts.scss

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,500,600,700&display=swap');
+
+html {
+  font-family: 'Nunito', sans-serif;
+}
+