@steroidsjs/bootstrap 3.0.0-beta.38 → 3.0.0-beta.39

package/form/FieldLayout/FieldLayoutView.js

@@ -32,22 +32,18 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function FieldLayoutView(props) {
     var bem = (0, hooks_1.useBem)('FieldLayoutView');
-    return (React.createElement("div", { className: bem(bem.block({
-            layout: props.layout.layout
-        }), 'form-group', props.layout.className, props.layout.layout === 'horizontal' && 'row', props.layout.layout === 'inline' && 'form-inline mb-0'), style: props.layout.style },
-        props.label && (React.createElement("label", { htmlFor: props.id, className: bem(bem.element('label', {
+    return (React.createElement("div", { className: bem.block() },
+        props.label && (React.createElement("label", { htmlFor: props.id, className: bem.element('label', {
                 required: props.required,
                 size: props.size
-            }), props.layout.layout === 'horizontal' && 'col-form-label text-right', props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[0], props.layout.layout === 'inline' && 'sr-only') }, props.label + ':')),
-        React.createElement("div", { className: bem(bem.element('field'), props.layout.layout === 'horizontal' && 'col-' + props.layout.cols[1], props.layout.layout === 'horizontal' && !props.label && 'offset-' + props.layout.cols[0], props.layout.layout === 'inline' && 'w-100') },
+            }) }, props.label + ':')),
+        React.createElement("div", { className: bem.element('field') },
             props.children,
-            !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem(bem.element('invalid-feedback'), 'invalid-feedback') }, [].concat(props.errors).filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index, className: bem.element('error-message') },
+            !(0, isEmpty_1["default"])(props.errors) && (React.createElement("div", { className: bem.element('invalid-feedback') }, props.errors.filter(function (error) { return typeof error === 'string'; }).map(function (error, index) { return (React.createElement("div", { key: index, className: bem.element('error-message') },
                 React.createElement(Icon_1["default"], { name: "error", className: bem.element('icon_error'), tabIndex: -1 }),
                 React.createElement("span", { className: bem.element('error-text', {
-                        size: !!props.size || 'md'
+                        size: props.size || 'md'
                     }) }, error))); }))),
-            (0, isEmpty_1["default"])(props.errors) && props.layout.layout !== 'inline' && props.hint && (React.createElement("div", { className: bem(bem.element('hint', {
-                    size: props.size
-                })) }, props.hint)))));
+            (0, isEmpty_1["default"])(props.errors) && props.hint && (React.createElement("div", { className: bem.element('hint', { size: props.size }) }, props.hint)))));
 }
 exports["default"] = FieldLayoutView;

package/form/FieldLayout/FieldLayoutView.scss

@@ -1,4 +1,5 @@
 .FieldLayoutView {
+    margin-bottom: 1rem;
     $root: &;
     font-family: $font-family-nunito;
 
@@ -121,7 +122,7 @@
         }
     }
 
-    &_layout_inline &__field {
+    &__field {
         .form-control,
         input {
             width: 100%;

package/form/FieldList/FieldListView.js

@@ -39,7 +39,7 @@ function FieldListView(props) {
             React.createElement("tbody", null, props.children),
             React.createElement("tfoot", null,
                 React.createElement("tr", null,
-                    React.createElement("td", { colSpan: props.items.length }, props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, layout: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
+                    React.createElement("td", { colSpan: props.items.length }, props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
                             e.preventDefault();
                             props.onAdd();
                         } }, __('Добавить ещё')))))))));

package/form/FileField/FileFieldView.js

@@ -48,7 +48,7 @@ function FileFieldView(props) {
     return (React.createElement("div", { className: bem.block() },
         React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid }, item, props.itemProps))); })),
         React.createElement("div", { className: bem.element('button') },
-            React.createElement(ButtonComponent, __assign({}, props.buttonProps, { layout: false, label: null }),
+            React.createElement(ButtonComponent, __assign({}, props.buttonProps, { label: null }),
                 React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: props.imagesOnly ? 'file-image' : 'upload' }),
                 React.createElement("span", { className: bem.element('button-label') }, props.buttonProps.label)))));
 }

package/form/Form/FormView.js

@@ -58,10 +58,7 @@ function FormView(props) {
             }, 10);
         }
     });
-    return (React.createElement("form", { ref: formRef, className: bem(bem.block({
-            inline: props.layout.layout === 'inline',
-            vertical: props.layout.layout === 'vertical'
-        }), props.className), onSubmit: props.onSubmit, style: props.style },
+    return (React.createElement("form", { ref: formRef, className: bem(bem.block(), props.className), onSubmit: props.onSubmit, style: props.style },
         props.children,
         (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field)))); }),
         props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));

package/form/Form/FormView.scss

@@ -1,14 +1,5 @@
 .FormView {
     display: flex;
     flex-flow: column nowrap;
-
-    &_inline {
-        column-gap: 12px;
-        flex-flow: row nowrap;
-        align-items: flex-end;
-    }
-
-    &_vertical {
-        row-gap: 24px;
-    }
+    row-gap: 24px;
 }

package/form/ReCaptchaField/ReCaptchaFieldView.js

@@ -31,9 +31,9 @@ function ReCaptchaFieldView(props) {
     return (React.createElement("div", { className: bem.block() },
         React.createElement("small", { className: 'text-muted' },
             __('This site is protected by reCAPTCHA and the Google') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy'), layout: false }),
+            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy') }),
             ' ' + __('and') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service'), layout: false }),
+            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service') }),
             ' ' + __('apply'),
             ".")));
 }

package/form/SwitcherField/SwitcherFieldView.js

@@ -45,6 +45,6 @@ function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             size: props.size
-        }), props.className, 'btn-group') }, props.items.map(function (item) { return (React.createElement(Button_1["default"], __assign({ key: String(item[props.primaryKey]) }, props.buttonProps, { className: bem((0, get_1["default"])(props, 'buttonProps.className'), props.hoveredId === item[props.primaryKey] && 'hover', props.selectedIds.includes(item[props.primaryKey]) && 'active'), disabled: props.disabled, onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); }, layout: false }), item.label)); })));
+        }), props.className, 'btn-group') }, props.items.map(function (item) { return (React.createElement(Button_1["default"], __assign({ key: String(item[props.primaryKey]) }, props.buttonProps, { className: bem((0, get_1["default"])(props, 'buttonProps.className'), props.hoveredId === item[props.primaryKey] && 'hover', props.selectedIds.includes(item[props.primaryKey]) && 'active'), disabled: props.disabled, onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }), item.label)); })));
 }
 exports["default"] = SwitcherFieldView;

package/list/Grid/GridView.js

@@ -58,7 +58,7 @@ function GridView(props) {
         var fields = (0, keyBy_1["default"])(props.searchForm.fields.map(function (column) { return (0, isString_1["default"])(column) ? { attribute: column } : column; }), 'attribute');
         return (React.createElement("tr", null, props.columns.map(function (column, columnIndex) {
             var _a;
-            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ layout: 'inline', size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
+            return (React.createElement("td", { key: columnIndex, className: column.headerClassName }, column.attribute && fields[column.attribute] && (React.createElement(Field_1["default"], __assign({ size: (_a = props.searchForm) === null || _a === void 0 ? void 0 : _a.size }, fields[column.attribute])))));
         })));
     }, [props.searchForm, props.columns]);
     var renderSortButton = (0, react_1.useCallback)(function (attribute, direction) {

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.38",
+    "version": "3.0.0-beta.39",
     "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.16",
+        "@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",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.16"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.18"
     }
 }