@steroidsjs/bootstrap 3.0.3 → 3.0.5

package/form/CheckboxField/CheckboxFieldView.js

@@ -51,6 +51,8 @@ function CheckboxFieldView(props) {
         React.createElement("input", __assign({ className: bem.element('input', {
                 hasCustomColor: !!props.color
             }), id: props.id || id, disabled: props.disabled, required: props.required }, props.inputProps)),
-        React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
+        React.createElement("label", { className: bem.element('label', {
+                'has-label-only': !props.id
+            }), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -146,7 +146,6 @@ $disabled-text-color: var(--disabled-text-color);
             background-color: var(--checkbox-custom-color);
         }
 
-        
         //FOCUS
         &:focus + #{$root}__label::after {
             opacity: 0;
@@ -232,3 +231,35 @@ $disabled-text-color: var(--disabled-text-color);
         color: variables.$danger;
     }
 }
+
+.CheckboxFieldView:has(.CheckboxFieldView__label_has-label-only) .CheckboxFieldView {
+    $root: &;
+
+    &__label {
+        &::before,
+        &::after {
+            display: none;
+        }
+
+        &-text {
+            margin-left: 0 !important;
+        }
+    }
+
+    &_size {
+        &_sm, &_md, &_lg {
+            #{$root}__label {
+                &::before {
+                    display: none;
+                }
+                &::after {
+                    display: none;
+                }
+
+                #{$root}__label-text {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -48,7 +48,7 @@ function CheckboxListFieldView(props) {
             },
             disabled: props.disabled
         },
-        size: props.size,
+        size: checkbox.size || props.size,
         color: checkbox.color,
         required: checkbox.required
     }); })));

package/form/CheckboxTreeField/CheckboxTreeFieldView.js

@@ -10,8 +10,8 @@ var TreeItemView_1 = __importDefault(require("../../nav/TreeItem/TreeItemView"))
 function CheckboxTreeFieldView(props) {
     var bem = (0, useBem_1["default"])('CheckboxTreeFieldView');
     var prefix = (0, hooks_1.useUniqueId)('checkbox');
-    return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, hasIconExpandOnly: true }, props.renderCheckbox({
-        id: "".concat(prefix, "_").concat(checkbox.id),
+    return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, onNestedItemClick: function () { return props.onItemSelect(checkbox); }, hasIconExpandOnly: !props.hasOnlyLeafCheckboxes && checkbox.hasItems, withoutPointerOnLabel: props.hasOnlyLeafCheckboxes && checkbox.hasItems }, props.renderCheckbox({
+        id: props.hasOnlyLeafCheckboxes && checkbox.hasItems ? null : "".concat(prefix, "_").concat(checkbox.id),
         label: checkbox.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(checkbox.id),

package/form/CheckboxTreeField/CheckboxTreeFieldView.scss

@@ -3,3 +3,9 @@
   flex-flow: column nowrap;
   gap: 8px;
 }
+
+.CheckboxTreeFieldView:has(.TreeItemView_without-pointer-on-label) .TreeItemView_without-pointer-on-label {
+  .CheckboxFieldView__label {
+    cursor: default;
+  }
+}

package/form/FieldList/FieldListView.scss

@@ -1,4 +1,3 @@
-
 @use "../../scss/variables";
 
 :root {
@@ -15,7 +14,6 @@ $background-th: var(--background-th);
 $background-td-alternating: var(--background-td-alternating);
 
 .FieldListView {
-    overflow-x: auto;
     table {
         width: 100%;
         background-color: transparent;
@@ -23,7 +21,20 @@ $background-td-alternating: var(--background-td-alternating);
         border-collapse: separate;
         border-radius: 10px;
         border-spacing: 0;
-        overflow: hidden;
+    }
+
+    thead tr:first-child {
+        th:first-child {
+            border-radius: 10px 0 0 0;
+            -moz-border-radius: 10px 0 0 0;
+            -webkit-border-radius: 10px 0 0 0;
+        }
+
+        th:last-child {
+            border-radius: 0 10px 0 0;
+            -moz-border-radius: 0 10px 0 0;
+            -webkit-border-radius: 0 10px 0 0;
+        }
     }
 
     th:not(:last-child),
@@ -43,10 +54,6 @@ $background-td-alternating: var(--background-td-alternating);
         border-bottom: 1px solid variables.$gray-dark;
     }
 
-    tfoot > tr > td {
-        border-top: 1px solid variables.$gray-dark;
-    }
-
     tr td {
         padding: 12px;
     }
@@ -62,7 +69,11 @@ $background-td-alternating: var(--background-td-alternating);
 
     td {
         background: variables.$element-background-color;
-        overflow: hidden;
+    }
+
+    tfoot > tr > td {
+        border-top: 1px solid variables.$gray-dark;
+        border-radius: 0 0 10px 10px;
     }
 
     &_hasAlternatingColors {
@@ -86,3 +97,17 @@ $background-td-alternating: var(--background-td-alternating);
         margin-bottom: 0;
     }
 }
+
+.FieldListView:not(:has(tfoot)) {
+    tbody tr:last-child td:first-child {
+        border-radius: 0 0 0 10px !important;
+        -moz-border-radius: 0 0 0 10px !important;
+        -webkit-border-radius: 0 0 0 10px !important;
+    }
+
+    tbody tr:last-child td:last-child {
+        border-radius: 0 0 10px 0 !important;
+        -moz-border-radius: 0 0 10px 0 !important;
+        -webkit-border-radius: 0 0 10px 0 !important;
+    }
+}

package/form/Form/FormView.js

@@ -60,8 +60,8 @@ function FormView(props) {
     });
     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.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field), { size: field.size || props.size || null }))); }),
         props.buttons,
-        props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));
+        props.submitLabel && (React.createElement(Button_1["default"], __assign({ type: 'submit', label: props.submitLabel }, props.submitButtonProps)))));
 }
 exports["default"] = React.memo(FormView);

package/form/RadioListField/RadioListFieldView.js

@@ -48,7 +48,7 @@ function RadioListFieldView(props) {
             },
             disabled: props.disabled
         },
-        size: props.size,
+        size: radio.size || props.size,
         required: radio.required
     }); })));
 }

package/index.scss

@@ -53,7 +53,6 @@
 @include meta.load-css('form/ImageField/ImageFieldView');
 @include meta.load-css('form/FileField/FileFieldItemView');
 @include meta.load-css('form/FieldSet/FieldSetView');
-@include meta.load-css('form/Form/FormView');
 @include meta.load-css('form/WizardForm/WizardFormView');
 @include meta.load-css('form/HtmlField/HtmlFieldView');
 @include meta.load-css('form/InputField/InputFieldView');

package/layout/Header/HeaderView.js

@@ -77,7 +77,7 @@ function HeaderView(props) {
     return (React.createElement("header", { className: bem(bem.block({
             size: props.size
         }), props.className), style: props.style },
-        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem.element('logo'), toRoute: 'root', size: props.size }, props.logo.linkProps),
+        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem(bem.element('logo'), props.logo.className), toRoute: 'root', size: props.size }, props.logo.linkProps),
             props.logo.icon && ((0, renderIcon_1["default"])(props.logo.icon, {
                 className: bem.element('logo-image')
             })),

package/nav/TreeItem/TreeItemView.js

@@ -47,18 +47,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,
+        onClick: function (e) {
+            props.item.onClick(e);
+            if (!props.hasIconExpandOnly && props.onNestedItemClick) {
+                props.onNestedItemClick();
+            }
+        },
         onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
         role: 'button',
         tabIndex: 0
-    }); }, [props.item]);
+    }); }, [props]);
     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 || props.hideIcon,
+            'has-items': !props.hasIconExpandOnly && (props.item.hasItems || props.hideIcon),
             level: props.item.level,
             disabled: props.item.disabled,
-            'hide-icon': props.hideIcon
+            'hide-icon': props.hideIcon,
+            'without-pointer-on-label': props.hasIconExpandOnly && props.withoutPointerOnLabel
         }), props.className), style: {
             paddingLeft: !props.hideIcon && "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
         } }, (!props.hasIconExpandOnly && onExpandProps)),

package/nav/TreeItem/TreeItemView.scss

@@ -52,7 +52,7 @@ $grid-icon-color: var(--grid-icon-color);
   &__icon {
     min-width: 24px;
     min-height: 24px;
-
+    cursor: pointer;
     transform: rotate(0);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.3",
+    "version": "3.0.5",
     "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",
+        "@steroidsjs/core": "^3.0.5",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/form/Form/FormView.scss

@@ -1,4 +0,0 @@
-.FormView {
-    display: flex;
-    flex-flow: column nowrap;
-}