@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.0

package/list/Steps/StepItemView.js

@@ -26,20 +26,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
+var isString_1 = __importDefault(require("lodash-es/isString"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Steps_1 = require("@steroidsjs/core/ui/list/Steps/Steps");
 function StepItemView(props) {
     var _a;
     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("div", null,
-                    React.createElement("div", { className: bem.element('title') }, props.stepItem.title),
-                    React.createElement("div", { className: bem.element('subtitle') }, props.stepItem.subtitle))),
-            React.createElement("div", { className: bem.element('description') }, props.stepItem.description)),
-        React.createElement("span", { className: bem.element('divider') })));
+    var renderIcon = (0, react_1.useCallback)(function () { return ((0, isString_1["default"])(props.stepItem.icon)
+        ? (react_1["default"].createElement(Icon_1["default"], { name: props.stepItem.icon }))
+        : (react_1["default"].createElement("span", { className: bem.element('icon') }, props.index))); }, [bem, props.index, props.stepItem.icon]);
+    var renderDivider = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('divider') },
+        react_1["default"].createElement("div", { className: bem.element('divider-line') }))); }, [bem]);
+    return (react_1["default"].createElement("div", { key: props.index, className: bem(bem.block((_a = {},
+            _a[props.status] = true,
+            _a["".concat(props.stepTitleOrientation)] = !!props.stepTitleOrientation,
+            _a)), props.className) },
+        react_1["default"].createElement("div", { className: bem.element('body', { disabled: props.disabled }), onClick: function () { return props.onChange(props.index); } },
+            props.showDivider && props.stepTitleOrientation === Steps_1.VERTICAL_STEP_LAYOUT && renderDivider(),
+            react_1["default"].createElement("div", { className: bem.element('step') }, renderIcon()),
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                react_1["default"].createElement("div", { className: bem.element('header') },
+                    props.stepItem.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.stepItem.title)),
+                    props.stepItem.subtitle && (react_1["default"].createElement("div", { className: bem.element('subtitle') }, props.stepItem.subtitle))),
+                props.stepItem.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.stepItem.description)))),
+        props.showDivider && props.stepTitleOrientation === Steps_1.HORIZONTAL_STEP_LAYOUT && renderDivider()));
 }
 exports["default"] = StepItemView;

package/list/Steps/StepItemView.scss

@@ -1,145 +1,175 @@
 @use "../../scss/variables";
 
+:root {
+  --text-color: #312c3a;
+}
+
+html[data-theme="dark"] {
+  --text-color: #fff;
+}
+
+$text-color: var(--text-color);
+
 .StepItemView{
   $root: &;
 
-  display: flex;
+  position: relative;
   align-items: center;
-  justify-content: space-between;
 
-  &:last-child{
-    flex-grow: 0;
-    #{$root}__divider{
-      display: none;
-    }
-  }
+  &_horizontal {
+    display: flex;
+    flex: 2;
 
-  &__icon{
-    background-color: rgba(variables.$white, .2);
-    padding: 5px;
-    border-radius: 10px;
-  }
+    &:last-child{
+      flex: 1;
 
-  &_wait{
-    #{$root}__icon{
-      background-color: variables.$grey-darker;
-      svg{
-        fill:variables.$white;
+      #{$root}__divider {
+        display: none;
       }
     }
 
-    #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: variables.$grey-darker;
+    #{$root}__body {
+      flex-flow: row nowrap;
+      align-items: center;
+      padding: 0 4px;
     }
 
-    #{$root}__divider{
-      border-top-color: variables.$grey-darker;
+    #{$root}__step {
+      padding-right: 4px;
+      flex-grow: 1;
     }
-  }
 
-  &_active{
-    #{$root}__body{
-      background-color: variables.$primary;
+    #{$root}__header {
+      margin-bottom: 0;
     }
 
-    #{$root}__icon svg{
-        fill: #fff;
+    #{$root}__divider {
+      flex: 1 1 auto;
     }
+  }
+
+  &_vertical {
+    flex: 1;
 
-    #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: #fff;
+    &:first-child{
+      #{$root}__divider-line {
+        display: none;
+      }
     }
 
-    #{$root}__divider{
-      border-top-color: variables.$primary;
+    #{$root}__body {
+      flex-direction: column;
+      align-items: center;
     }
-  }
 
-  &_finish{
-    #{$root}__body{
-      background-color: variables.$success;
+    #{$root}__step {
+      margin-bottom: 4px;
     }
 
-    #{$root}__icon svg{
-       fill: #fff;
+    #{$root}__header {
+      margin-bottom: 8px;
     }
 
-    #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: #fff;
+    #{$root}__divider {
+      position: absolute;
+      top: 12px;
+      left: calc(-50% + 20px);
+      right: calc(50% + 20px);
     }
+  }
 
-    #{$root}__divider{
-      border-top-color: variables.$success;
+  &_wait {
+    #{$root}__icon {
+      background-color: var(--gray);
+
+      svg {
+        fill: variables.$white;
+      }
     }
   }
 
-  &_error{
-    #{$root}__body{
-      background-color: variables.$danger;
+  &_active {
+    #{$root}__icon {
+      background-color: variables.$primary;
+
+      svg {
+        fill: #fff;
+      }
     }
+  }
+
+  &_edit {
+    #{$root}__icon {
+      background-color: variables.$secondary;
 
-    #{$root}__icon svg{
+      svg {
         fill: #fff;
+      }
     }
+  }
 
-    #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: #fff;
+  &_finish {
+    #{$root}__icon {
+      background-color: variables.$success;
     }
+  }
+
+  &_error {
+    #{$root}__icon {
+      background-color: variables.$danger;
 
-    #{$root}__divider{
-      border-top-color: variables.$danger;
+      svg {
+        fill: #fff;
+      }
     }
   }
 
-  &__body{
+  &__body {
     display: flex;
-    flex-direction: column;
-    padding: 8px;
-    cursor: pointer;
-    min-width: 100px;
 
-    border-radius: 15px;
-    background-color: transparent;
-    transition: background-color .15s ease-in;
-
-    &_disabled{
+    &_disabled {
       cursor: default;
     }
   }
 
-  &__header{
+  &__step {
     display: flex;
-    align-items: center;
-    line-height: 1.1;
+    flex-shrink: 0;
   }
 
-  &__icon{
-    margin-right: 5px;
+  &__icon {
+    display: flex;
+    padding: 3px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+  }
 
-    color: variables.$white;
+  &__content {
+    text-align: center;
+    width: 100%;
+    color: var(--text-color);
     font-size: 12px;
+    font-style: normal;
     font-weight: 500;
-
-    transition: background-color .15s ease-in, color .15s ease-in;
+    line-height: 16px;
   }
 
-  &__title{
+  &__icon {
+    color: variables.$white;
     font-size: 12px;
-    transition: color .15s ease-in;
-  }
-
-  &__subtitle, &__description{
-    font-size: 9px;
-    transition: color .15s ease-in;
+    font-weight: 500;
+    transition: background-color .15s ease-in, color .15s ease-in;
   }
 
-
-  &__divider{
-    min-width: 10px;
-    flex-grow: 2;
-    flex-shrink: 1;
-    margin: 0 5px;
-    border-top: 2px dotted transparent;
+  &__divider-line {
+    display: block;
+    border-top-color: var(--gray);
+    border-top-style: solid;
+    border-top-width: 1px;
     transition: border-top-color .15s ease-in;
   }
-}
+}

package/list/Steps/StepsView.js

@@ -1,32 +1,12 @@
 "use strict";
-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 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function StepsView(props) {
     var bem = (0, hooks_1.useBem)('StepsView');
-    return (React.createElement("div", { className: bem(props.className, bem.block()) }, props.children));
+    return (react_1["default"].createElement("div", { className: bem(props.className, bem.block()) }, props.children));
 }
 exports["default"] = StepsView;

package/list/Steps/StepsView.scss

@@ -1,18 +1,9 @@
 @use "../../scss/variables";
 
-.StepsView{
-  width: 100%;
-  min-height: 96px;
-
+.StepsView {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 1;
-  background: variables.$secondary-light;
-  overflow: auto;
-  padding: 5px;
-
-  & > *{
-    flex-grow: 1;
-  }
-}
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-grow: 1;
+}

package/nav/Controls/ControlsView.scss

@@ -4,10 +4,10 @@
     justify-content: space-between;
     gap: 8px;
 
-    .ButtonView__icon { 
+    .ButtonView__icon {
          svg {
-            path, circle, rect { 
-                stroke: inherit;
+            path, circle, rect {
+                stroke: currentColor;
             }
         }
     }

package/nav/Tree/TreeView.js

@@ -40,16 +40,10 @@ 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 TreeItemView_1 = __importDefault(require("../TreeItem/TreeItemView"));
 function TreeView(props) {
-    var levelPadding = props.levelPadding || 20;
     var bem = (0, hooks_1.useBem)('TreeView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.uniqId, onClick: item.onClick, onKeyPress: item.onClick, className: bem(bem.element('item', {
-            selected: item.isSelected,
-            opened: item.isOpened,
-            'has-items': item.hasItems
-        }), item.className), role: 'button', tabIndex: 0 },
-        React.createElement(Link_1["default"], __assign({ className: bem.element('item-label'), style: {
-                paddingLeft: String(item.level * levelPadding) + 'px'
-            } }, item)))); })));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement(TreeItemView_1["default"], { key: item.uniqueId, item: item, levelPadding: props.levelPadding },
+        React.createElement(Link_1["default"], __assign({ className: bem.element('item-label') }, item)))); })));
 }
 exports["default"] = TreeView;

package/nav/Tree/TreeView.scss

@@ -5,67 +5,30 @@
     margin: 0;
     padding: 0;
 
-    &__item {
-        padding: 0;
-        cursor: pointer;
-
-        > .ButtonView {
-            margin: 2px 0;
-        }
-    }
-
     &__item-label {
-        position: relative;
-        padding: 5px 10px;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         justify-content: flex-start;
         background-color: variables.$background-color;
-
-        .ButtonView__link {
-            .ButtonView__text {
-                color: variables.$text-color;
-            }
-        }
-
-        // &:hover {
-        //   color: $list-group-action-hover-color;
-        //   background-color: $list-group-hover-bg;
-        // }
+        border-radius: 16px;
+        padding: 5px 10px;
 
         &,
         &:hover {
             text-decoration: none !important;
         }
+
+        .ButtonView__link > .ButtonView__text {
+            color: variables.$text-color;
+        }
     }
-    &__item_selected &__item-label {
+
+    .TreeItemView_selected &__item-label {
         background-color: variables.$secondary;
+
         &,
         &::before {
             color: variables.$text-color;
         }
     }
-    &__item-label::before {
-        display: inline-block;
-        content: "";
-        transform: rotate(0);
-        width: 21px;
-        height: 20px;
-        font-size: 12px;
-        font-weight: bold;
-        margin-left: 10px;
-        color: variables.$text-color;
-        position: relative;
-        top: 1px;
-        left: 3px;
-    }
-    &__item_has-items &__item-label::before {
-        content: ">";
-    }
-
-    &__item_opened &__item-label::before {
-        top: 7px;
-        left: -4px;
-        transform: rotate(90deg);
-    }
 }

package/nav/TreeItem/TreeItemView.d.ts

@@ -0,0 +1,2 @@
+import { ITreeItemViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
+export default function TreeItemView(props: ITreeItemViewProps): JSX.Element;

package/nav/TreeItem/TreeItemView.js

@@ -0,0 +1,69 @@
+"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 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var react_1 = require("react");
+var PADDING_WITH_ICON = 0;
+var PADDING_WITHOUT_ICON = 24;
+function TreeItemView(props) {
+    var bem = (0, useBem_1["default"])('TreeItemView');
+    var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
+    var onExpandProps = (0, react_1.useMemo)(function () { return ({
+        onClick: props.item.onClick,
+        onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
+        role: 'button',
+        tabIndex: 0
+    }); }, [props.item]);
+    return (React.createElement("div", __assign({ key: props.item.uniqueId, className: bem(bem.block({
+            selected: props.item.isSelected,
+            opened: props.item.isOpened,
+            'has-items': props.item.hasItems,
+            level: props.item.level,
+            disabled: props.item.disabled
+        }), props.className), style: {
+            paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
+        } }, (!props.hasIconExpandOnly && onExpandProps)),
+        props.item.hasItems && (React.createElement(content_1.Icon, __assign({ name: 'expand_right', className: bem.element('icon', {
+                opened: props.item.isOpened
+            }) }, (props.hasIconExpandOnly && onExpandProps)))),
+        React.createElement("div", { className: bem.element('item') }, props.children)));
+}
+exports["default"] = TreeItemView;

package/nav/TreeItem/TreeItemView.scss

@@ -0,0 +1,60 @@
+@use "../../scss/variables";
+
+:root {
+  --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.TreeItemView {
+  $root: &;
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+
+  &_has-items {
+    cursor: pointer;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+
+    #{$root}__icon {
+      pointer-events: none;
+
+      svg > * {
+          stroke: var(--disabled-text-color);
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    margin-left: 8px;
+  }
+
+  &__icon {
+    transform: rotate(0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
+
+    svg > * {
+        stroke: $grid-icon-color;
+    }
+  }
+
+  .IconView {
+    min-width: 24px;
+    min-height: 24px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.99",
+    "version": "3.0.0",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,8 +37,8 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.84",
-        "@steroidsjs/eslint-config": "^2.1.4",
+        "@steroidsjs/core": "^3.0.0",
+        "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
         "@types/jest": "^26.0.22",

package/scss/bootstrap-classes/flex.scss

@@ -0,0 +1,42 @@
+@use "../variables";
+
+.flex {
+  display: flex;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.col {
+  @each $colValue in variables.$colValues {
+    &-#{$colValue} {
+      flex-basis: calc((100% / variables.$colMaxValue) * $colValue);
+    }
+  }
+}
+
+.justify-content {
+  @each $justifyValue in variables.$justifyValues {
+    &-#{$justifyValue} {
+      justify-content: $justifyValue;
+    }
+  }
+}
+
+.align-items {
+  @each $alignValue in variables.$alignValues {
+    &-#{$alignValue} {
+      align-items: $alignValue;
+    }
+  }
+}
+
+.flex-direction {
+  @each $directionValue in variables.$directionValues {
+    &-#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+}