@steroidsjs/bootstrap 3.0.0-beta.7 → 3.0.0-beta.71

package/nav/ButtonGroup/ButtonGroupView.d.ts

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

package/nav/ButtonGroup/ButtonGroupView.js

@@ -0,0 +1,33 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+function ButtonGroupView(props) {
+    var bem = (0, hooks_1.useBem)('ButtonGroupView');
+    return (react_1["default"].createElement("ul", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style }, props.items.map(function (item, index) {
+        var isActive = props.activeButton === item.id;
+        return (react_1["default"].createElement("li", { key: index },
+            react_1["default"].createElement(form_1.Button, __assign({ className: bem.element('button', {
+                    "default": !isActive,
+                    active: isActive
+                }), label: item.label, onClick: function () { return props.onClick(item.id); } }, props.buttonProps))));
+    })));
+}
+exports["default"] = ButtonGroupView;

package/nav/ButtonGroup/ButtonGroupView.scss

@@ -0,0 +1,83 @@
+@import "../../scss/variables/";
+
+:root {
+    --button-group-background: #DBE2E6;
+    --button-group-separator-color: #CBD5DB;
+}
+
+html[data-theme="dark"] {
+    --button-group-background: #333646;
+    --button-group-separator-color: #ADAAB3;
+}
+
+$button-group-background: var(--button-group-background);
+$button-group-separator-color: var(--button-group-separator-color);
+
+.ButtonGroupView {
+  display: flex;
+  padding: 4px;
+  width: fit-content;
+  background-color: $button-group-background;
+
+  $sizes: () !default;
+  $sizes: map-merge(
+      (
+          "lg": (
+              "border-radius": 16px,
+          ),
+          "md": (
+              "border-radius": 16px,
+          ),
+          "sm": (
+              "border-radius": 12px,
+          ),
+      ),
+      $sizes
+  );
+
+  &_size {
+      @each $size, $sizeMap in $sizes {
+          &_#{$size} {
+              border-radius: map-get($sizeMap, border-radius);
+          }
+      }
+  }
+
+  &__button {
+    &_default {
+      background-color: transparent;
+      border-color: transparent;
+      color: $text-color;
+      transition: opacity $transition-duration ease-in-out;
+
+      &:hover {
+        background-color: transparent;
+        border-color: transparent;
+        color: $text-color;
+        opacity: 0.7;
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+
+      &:not(:first-child) {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 12px;
+          background-color: $button-group-separator-color;
+        }
+      }
+    }
+
+    &_active + &_default::after {
+      display: none;
+    }
+  }
+}

package/nav/Controls/ControlsView.d.ts

@@ -1,3 +1,2 @@
 import { IControlsViewProps } from '@steroidsjs/core/ui/nav/Controls/Controls';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ControlsView(props: IControlsViewProps & IBemHocOutput): JSX.Element;
+export default function ControlsView(props: IControlsViewProps): JSX.Element;

package/nav/Controls/ControlsView.scss

@@ -1,5 +1,19 @@
 .ControlsView {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+    display: inline-flex;
+    flex-flow: row;
+    justify-content: space-between;
+
+    .ButtonView__icon { 
+         svg {
+            path, circle, rect { 
+                stroke: inherit;
+            }
+        }
+    }
+
+    a {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
 }

package/nav/Nav/NavBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavBarView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavBarView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavBarView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavBarView(props) {
     var bem = (0, hooks_1.useBem)('NavBarView');
-    return (React.createElement("div", { className: bem('navbar-expand-lg navbar-nav', props.dark && 'navbar-dark bg-dark', bem.block(), props.className) },
-        React.createElement("div", { className: 'navbar-nav px-3' }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem('nav-item text-nowrap', item.isActive && 'active') },
-            React.createElement(Button_1["default"], __assign({ link: true, className: bem('nav-link', item.isActive && 'active'), onClick: function () { return props.onClick(item, index); } }, item)))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavBarView;

package/nav/Nav/NavBarView.scss

@@ -1,2 +1,33 @@
 .NavBarView {
-}
+    $root: &;
+
+    color: $text-color;
+
+    &__list {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 8px;
+
+        &-item {
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+
+
+            &_active { 
+                .ButtonView__text { 
+                    color: $white;
+                }
+            }
+
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    @include navs-sizes($root);
+}

package/nav/Nav/NavButtonView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavButtonView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavButtonView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavButtonView.js

@@ -42,8 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavButtonView(props) {
     var bem = (0, hooks_1.useBem)('NavButtonView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem(props.children && 'mb-3', bem.element('nav')) }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, color: 'secondary', outline: !item.isActive, disabled: props.disabled, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, color: 'secondary', outline: !item.isActive, disabled: item.disabled, onClick: function () { return props.onClick(item, index); } }, item)))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavButtonView;

package/nav/Nav/NavButtonView.scss

@@ -1,7 +1,8 @@
 .NavButtonView {
-  &__nav-item {
-    &:not(:last-child) {
-      margin-right: 5px;
+  
+    &__list { 
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 8px;
     }
-  }
-}
+}

package/nav/Nav/NavIconView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavIconView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavIconView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavIconView.js

@@ -40,10 +40,15 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var DEFAULT_ICON = 'add';
 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.children));
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : DEFAULT_ICON, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null })))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavIconView;

package/nav/Nav/NavIconView.scss

@@ -1,9 +1,8 @@
 .NavIconView {
-  > a {
-    margin-right: 5px;
-
-    &:last-child {
-      margin-right: 0;
+    &__list {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 24px;
     }
-  }
-}
+}

package/nav/Nav/NavLinkView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavLinkView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavLinkView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavLinkView.js

@@ -42,8 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavLinkView(props) {
     var bem = (0, hooks_1.useBem)('NavLinkView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem.element('nav mb-3') }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ link: true, onClick: function () { return props.onClick(item, index); } }, item)))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavLinkView;

package/nav/Nav/NavLinkView.scss

@@ -1,7 +1,16 @@
 .NavLinkView {
-  &__nav-item {
-    &:not(:last-child) {
-      margin-right: 10px;
+    &__list {
+        display: flex;
+        flex-flow: row nowrap;
+        column-gap: 24px;
+
+        &-item {
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
     }
-  }
-}
+}

package/nav/Nav/NavListView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavListView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavListView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavListView.js

@@ -42,16 +42,20 @@ var Link_1 = __importDefault(require("@steroidsjs/core/ui/nav/Link"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavListView(props) {
     var bem = (0, hooks_1.useBem)('NavListView');
-    var renderItems = function (items) {
+    var renderItems = function (items, parentItemProps) {
+        if (parentItemProps === void 0) { parentItemProps = null; }
         if (!items || items.length === 0) {
             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) })),
-            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem('nav flex-column', bem.element('sub-list')) }, renderItems(item.items))))); });
+        return items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Link_1["default"], __assign({ onClick: function () { return props.onClick(item, index); } }, item, { disabled: (parentItemProps === null || parentItemProps === void 0 ? void 0 : parentItemProps.disabled) || item.disabled })),
+            item.items && item.items.length > 0 && (React.createElement("ul", { className: bem.element('sub-list') }, renderItems(item.items, item))))); });
     };
-    return (React.createElement("ul", { className: bem('nav flex-column', bem.block(), props.className) },
-        renderItems(props.items),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, renderItems(props.items)),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavListView;

package/nav/Nav/NavListView.scss

@@ -1,12 +1,13 @@
 .NavListView {
-  &__item {
+    
+    &__list{ 
+        display: flex;
+        flex-flow: column nowrap;
+    }
 
-  }
-  &__item-link {
-    padding: 5px 10px;
-    display: inline-block;
-  }
-  &__sub-list {
-    margin-left: 15px;
-  }
-}
+    &__sub-list { 
+        display: flex;
+        flex-flow: column;
+        padding: 5px;
+    }    
+}

package/nav/Nav/NavTabsView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavTabsView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavTabsView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavTabsView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 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) })))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavTabsView;

package/nav/Nav/NavTabsView.scss

@@ -1,2 +1,48 @@
 .NavTabsView {
-}
+    $root: &;
+
+    color: $text-color;
+
+    &__list {
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        border-bottom: 1px solid $element-border-color;
+
+        &-item {
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+
+            &_active {
+                .ButtonView__text {
+                    color: $white;
+                }
+
+                .ButtonView {
+                    &_size {
+                        &_sm {
+                            border-radius: $radius-small $radius-small 0 0;
+                        }
+                        &_md {
+                            border-radius: $radius-large $radius-large 0 0;
+                        }
+                        &_lg {
+                            border-radius: $radius-large $radius-large 0 0;
+                        }
+                    }
+                }
+            }
+
+            &_disabled {
+                cursor: not-allowed;
+                .ButtonView {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    @include navs-sizes($root);
+}

package/nav/Tree/TreeView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITreeViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
-export default function TreeView(props: ITreeViewProps & IBemHocOutput): JSX.Element;
+export default function TreeView(props: ITreeViewProps): JSX.Element;

package/nav/Tree/TreeView.scss

@@ -1,62 +1,69 @@
 .TreeView {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  &__item {
+    list-style: none;
+    margin: 0;
     padding: 0;
-    cursor: pointer;
 
-    > .ButtonView {
-      margin: 2px 0;
+    &__item {
+        padding: 0;
+        cursor: pointer;
+
+        > .ButtonView {
+            margin: 2px 0;
+        }
     }
-  }
 
-  &__item-label {
-    position: relative;
-    padding: 5px 10px;
-    display: flex;
-    flex-direction: row;
-    color: $list-group-action-color;
-    background-color: $list-group-bg;
+    &__item-label {
+        position: relative;
+        padding: 5px 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        background-color: $background-color;
 
-    &:hover {
-      color: $list-group-action-hover-color;
-      background-color: $list-group-hover-bg;
-    }
+        .ButtonView__link {
+            .ButtonView__text {
+                color: $text-color;
+            }
+        }
+
+        // &:hover {
+        //   color: $list-group-action-hover-color;
+        //   background-color: $list-group-hover-bg;
+        // }
 
-    &, &:hover {
-      text-decoration: none !important;
+        &,
+        &:hover {
+            text-decoration: none !important;
+        }
     }
-  }
-  &__item_selected &__item-label {
-    background-color: $list-group-active-bg;
-    &, &::before {
-      color: $list-group-active-color;
+    &__item_selected &__item-label {
+        background-color: $secondary;
+        &,
+        &::before {
+            color: $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: $text-color;
+        position: relative;
+        top: 1px;
+        left: 3px;
+    }
+    &__item_has-items &__item-label::before {
+        content: ">";
     }
-  }
-  &__item-label::before {
-    display: inline-block;
-    content: '';
-    transform: rotate(0);
-    width: 21px;
-    height: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    font-family: $font-family-monospace;
-    margin-left: 10px;
-    color: $list-group-action-color;
-    position: relative;
-    top: 3px;
-    left: 3px;
-  }
-  &__item_has-items &__item-label::before {
-    content: '>';
-  }
 
-  &__item_opened &__item-label::before {
-    top: 9px;
-    left: -4px;
-    transform: rotate(90deg);
-  }
+    &__item_opened &__item-label::before {
+        top: 7px;
+        left: -4px;
+        transform: rotate(90deg);
+    }
 }