@steroidsjs/bootstrap 3.0.0-beta.122 → 3.0.0-beta.124

package/content/Calendar/CalendarView.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var moment_1 = __importDefault(require("react-day-picker/moment"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
@@ -81,6 +81,6 @@ function CalendarView(props) {
             else {
                 onDaySelect(day);
             }
-        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: localeComponent.language })));
+        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: calendar_1.customLocaleUtils, locale: localeComponent.language })));
 }
 exports["default"] = CalendarView;

package/form/DropDownField/DropDownFieldView.js

@@ -65,10 +65,10 @@ function DropDownFieldView(props) {
             _a["outline_".concat(props.color)] = props.outline,
             _a.opened = props.isOpened,
             _a['is-invalid'] = !!props.errors,
-            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
+            _a.disabled = props.disabled,
+            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
         React.createElement("div", { className: bem.element('selected-items', {
-                reset: props.showReset,
-                disabled: props.disabled
+                reset: props.showReset
             }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses

package/form/DropDownField/DropDownFieldView.scss

@@ -427,4 +427,10 @@ $drop-down-color-themes: map.merge(
     &_is-invalid {
         border: 1px solid variables.$danger !important;
     }
+
+    &_disabled {
+        background-color: variables.$element-background-color-disabled;
+        border-color: transparent;
+        pointer-events: none;
+    }
 }

package/index.d.ts

@@ -272,6 +272,9 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'nav.TreeItemView': {
+        lazy: () => any;
+    };
     'nav.ButtonGroupView': {
         lazy: () => any;
     };

package/index.js

@@ -275,6 +275,9 @@ exports["default"] = {
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
     },
+    'nav.TreeItemView': {
+        lazy: function () { return require('./nav/TreeItem/TreeItemView')["default"]; }
+    },
     'nav.ButtonGroupView': {
         lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
     },

package/index.scss

@@ -97,6 +97,7 @@
 @include meta.load-css('nav/Nav/NavListView');
 @include meta.load-css('nav/Nav/NavTabsView');
 @include meta.load-css('nav/Tree/TreeView');
+@include meta.load-css('nav/TreeItem/TreeItemView');
 @include meta.load-css('nav/ButtonGroup/ButtonGroupView');
 @include meta.load-css('typography/Text/TextView');
 @include meta.load-css('typography/Title/TitleView');

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -17,25 +17,11 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
-var content_1 = require("@steroidsjs/core/ui/content");
-var DEFAULT_PADDING_LEFT = 32;
-var PADDING_WITH_ICON = 0;
-var PADDING_WITHOUT_ICON = 24;
+var TreeItemView_1 = __importDefault(require("../../../../nav/TreeItem/TreeItemView"));
 function TreeColumnView(props) {
     var bem = (0, hooks_1.useBem)('TreeColumnView');
-    var levelPadding = props.levelPadding || DEFAULT_PADDING_LEFT;
-    var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
     var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
     var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
-    return (react_1["default"].createElement("div", { className: bem.block(bem.block({
-            size: props.size
-        })) },
-        react_1["default"].createElement("div", { className: bem.element('data'), style: {
-                paddingLeft: "".concat(props.item.level * levelPadding + paddingBasedOnIcon, "px")
-            } },
-            props.item.hasItems && (react_1["default"].createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
-                    opened: props.item.isOpened
-                }), onClick: function () { return props.item.onTreeItemClick(props.item.uniqueId, props.item); } })),
-            renderValue())));
+    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding, className: bem.block() }, renderValue()));
 }
 exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -1,44 +1,7 @@
-@use "../../../../scss/variables";
-
-:root {
-  --grid-icon-color: #323232;
-}
-
-html[data-theme="dark"] {
-  --grid-icon-color: #ffffff;
-}
-
-$grid-icon-color: var(--grid-icon-color);
-
 .TreeColumnView {
-  &__data {
-    display: flex;
-    align-items: center;
-
-    .IconView {
-      min-width: 24px;
-      min-height: 24px;
-    }
-  }
-
   &__value {
     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;
-      }
-    }
-  }
 }
 
 .TreeColumnHeader {

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,50 @@
+"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 useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+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;
+    return (React.createElement("div", { 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
+        }), props.className), style: {
+            paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
+        }, onClick: props.item.onClick, onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); }, role: 'button', tabIndex: 0 },
+        props.item.hasItems && (React.createElement(content_1.Icon, { name: 'mockIcon', className: bem.element('icon', {
+                opened: props.item.isOpened
+            }), tabIndex: -1 })),
+        React.createElement("div", { className: bem.element('item') }, props.children)));
+}
+exports["default"] = TreeItemView;

package/nav/TreeItem/TreeItemView.scss

@@ -0,0 +1,43 @@
+@use "../../scss/variables";
+
+:root {
+  --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.TreeItemView {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+
+  &_has-items {
+    cursor: pointer;
+  }
+
+  &__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.122",
+    "version": "3.0.0-beta.124",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.104",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.108",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/bootstrap-classes/spacing.scss

@@ -1,4 +1,46 @@
 // margin
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 1rem;
+}
+
+.m-horizontal-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.m-horizontal-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.m-horizontal-3 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.m-vertical-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.m-vertical-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.m-vertical-3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -48,6 +90,48 @@
 }
 
 // padding
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 1rem;
+}
+
+.p-horizontal-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.p-horizontal-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.p-horizontal-3 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.p-vertical-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.p-vertical-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.p-vertical-3 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }