@steroidsjs/bootstrap 3.0.30 → 3.0.34

package/form/InputField/InputFieldView.scss

@@ -24,16 +24,74 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     flex-flow: row nowrap;
     align-items: center;
 
-    height: 34px;
+    height: var(--input-height);
+
 
     font-family: variables.$font-family-nunito;
     font-weight: variables.$font-weight-sm;
     line-height: 24px;
 
+    color: variables.$text-color;
+    border-radius: var(--border-radius);
+
+
+    --input-height: #{variables.$input-height-sm};
+
+    --border-radius: #{variables.$radius-small};
+
+    --colored-border-radius: 12px;
+
+    --addon-padding: 5px 8px;
+
+    --input-font-size: #{variables.$font-size-sm};
+ 
+    //Sizes
+    &_size {
+        &_lg {
+            --input-height: #{variables.$input-height-lg};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 16px;
+            --input-font-size: #{variables.$font-size-lg};
+            --input-border-radius: #{variables.$radius-large};
+        }
+
+        &_md {
+            --input-height: #{variables.$input-height-md};
+            --border-radius: #{variables.$radius-large};
+            --colored-border-radius: 16px;
+            --addon-padding: 11px 12px;
+            --input-font-size: #{variables.$font-size-base};
+            --input-border-radius: #{variables.$radius-large};
+        }
+    }
+
     &__input-wrapper {
+        display: flex;
+
         position: relative;
         width: 100%;
         height: 100%;
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            pointer-events: none;
+            transform: translate(calc(var(--input-wrapper-border-width) * -1), calc(var(--input-wrapper-border-width) * -1));
+            opacity: var(--input-wrapper-border-opacity);
+            transition: opacity 150ms ease-in-out;
+
+            border-radius: var(--colored-border-radius);
+            border-width: var(--input-wrapper-border-width);
+            border-color: var(--input-wrapper-border-color);
+            border-style: solid;
+        }
     }
 
     &__input {
@@ -47,170 +105,34 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         outline: none;
 
         background-color: variables.$element-field-background-color;
-        border: 1px solid variables.$element-border-color;
-        border-radius: inherit;
+        border-width: var(--input-border-width);
+        border-color: var(--input-border-color);
+        border-top-left-radius: var(--input-left-border-radius);
+        border-bottom-left-radius: var(--input-left-border-radius);
+        border-top-right-radius: var(--input-right-border-radius);
+        border-bottom-right-radius: var(--input-right-border-radius);
+        border-style: solid;
 
         white-space: nowrap; /* Запретить перенос текста */
         overflow: hidden; /* Скрыть содержимое, выходящее за границы ячейки */
         text-overflow: ellipsis; /* Добавить многоточие, если текст обрезается */
 
+        font-size: var(--input-font-size);
+
         &::placeholder {
             color: variables.$element-placeholder-color;
             font-size: inherit;
         }
 
-        &:not(:disabled):focus {
-            border-color: transparent;
-        }
-    }
-
-    //Statements
-    &::before {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-
-        pointer-events: none;
-        transform: translate(-1px, -1px);
-        opacity: 0;
-        transition: opacity 150ms ease-in-out;
-    }
-
-    &:not(#{$root}_disabled):focus-within::before {
-        border: 4px solid variables.$primary-light;
-        transform: translateX(-4px) translateY(-4px);
-        opacity: 1;
-    }
-
-    &:not(#{$root}_disabled):active {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-        &::before {
-            transform: translate(-1px, -1px);
-            border: 1px solid variables.$primary;
-            opacity: 1;
-        }
     }
 
     &_disabled {
         #{$root}__input {
             background-color: variables.$element-background-color-disabled;
-            border-color: transparent;
             cursor: not-allowed;
         }
     }
 
-    &_hasError {
-        #{$root}__input {
-            border-color: transparent;
-        }
-
-
-        &::before {
-            border: 1px solid variables.$danger;
-            border-radius: 16px;
-            transform: translateX(-1px) translateY(-1px);
-            opacity: 1;
-        }
-    }
-
-    //Sizes
-    &_size {
-        &_lg {
-            color: variables.$text-color;
-            height: variables.$input-height-lg;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                font-size: variables.$font-size-lg;
-                border-radius: variables.$radius-large;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 16px;
-            }
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 16px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-large;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_md {
-            color: variables.$text-color;
-            height: variables.$input-height-md;
-            border-radius: variables.$radius-large;
-
-            #{$root}__input {
-                border-radius: variables.$radius-large;
-                font-size: variables.$font-size-base;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after,
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 12px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 11px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-medium;
-            }
-
-            &:focus-within::before {
-                border-radius: 16px;
-            }
-        }
-
-        &_sm {
-            color: variables.$text-color;
-            height: variables.$input-height-sm;
-            border-radius: variables.$radius-small;
-
-            #{$root}__input {
-                font-size: variables.$font-size-sm;
-                border-radius: variables.$radius-small;
-            }
-
-            #{$root}__addon-before,
-            #{$root}__addon-after {
-                padding: 5px 8px;
-            }
-
-            #{$root}__text-before,
-            #{$root}__text-after {
-                padding: 5px 3px;
-            }
-
-            &::before {
-                border-radius: variables.$radius-small;
-            }
-
-            &:focus-within::before {
-                border-radius: 12px;
-            }
-        }
-    }
-
     //LEAD ICON
     &_hasLeadIcon {
         #{$root}__input {
@@ -279,49 +201,81 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         }
     }
 
-    &_hasAddonBefore {
-        #{$root}__input {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border: none;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
-    &_hasAddonAfter {
-        #{$root}__input {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        &::before {
-            border: 1px solid variables.$element-border-color;
-            opacity: 1;
-        }
-    }
-
     &__text-before,
     &__text-after {
         flex-shrink: 0;
+        padding: 0 6px;
     }
 
     &__addon-before,
     &__addon-after {
         flex-shrink: 0;
-        padding: 11px 12px;
+        padding: var(--addon-padding);
         background-color: variables.$element-background-color-disabled;
         color: variables.$text-color;
     }
 
+    // BORDERS 
+    --input-border-radius: #{variables.$radius-small};
+    --input-border-width: 1px;
+    --input-border-color: #{variables.$element-border-color};
+    --input-left-border-radius: var(--input-border-radius);
+    --input-right-border-radius: var(--input-border-radius);
+
+    --input-wrapper-border-width: 1px;
+    --input-wrapper-border-color: transparent;
+    --input-wrapper-border-opacity: 0;
+
+    &_hasError {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$danger};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-color: transparent;
+    }
+
+    &_hasAddon {
+        --input-wrapper-border-width: 1px;
+        --input-wrapper-border-color: #{variables.$element-border-color};
+        --input-wrapper-border-opacity: 1;
+
+        --input-border-width: 0px;
+    }
+    &_hasAddonBefore {
+        --input-left-border-radius: 0;
+    }
+    &_hasAddonAfter {
+        --input-right-border-radius: 0;
+    }
+
+    &:not(&_disabled) {
+        &:focus-within {
+            --input-wrapper-border-width: 4px;
+            --input-wrapper-border-color: #{variables.$primary-light};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+        &:active {
+            --input-wrapper-border-width: 1px;
+            --input-wrapper-border-color: #{variables.$primary};
+            --input-wrapper-border-opacity: 1;
+
+            --input-border-color: transparent;
+        }
+    }
+
+    &_disabled {
+        --input-border-color: transparent;
+    }
+
     &__addon-before {
-        border-top-left-radius: inherit;
-        border-bottom-left-radius: inherit;
+        border-top-left-radius: var(--input-border-radius);
+        border-bottom-left-radius: var(--input-border-radius);
     }
 
     &__addon-after {
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
+        border-top-right-radius: var(--input-border-radius);
+        border-bottom-right-radius: var(--input-border-radius);
     }
 }

package/form/RadioField/RadioFieldView.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IRadioFieldViewProps } from '@steroidsjs/core/ui/form/RadioField/RadioField';
-export default function RadioFieldView(props: IRadioFieldViewProps): JSX.Element;
+import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function RadioFieldView(props: ICheckboxFieldViewProps): JSX.Element;

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IRadioListFieldViewProps } from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
-export default function RadioListFieldView(props: IRadioListFieldViewProps): JSX.Element;
+import { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
+export default function RadioListFieldView(props: ICheckboxListFieldViewProps): JSX.Element;

package/form/RadioListField/RadioListFieldView.js

@@ -35,7 +35,7 @@ function RadioListFieldView(props) {
     var prefix = (0, useUniqueId_1["default"])('radio');
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
-            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+            _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderItem({
         key: radioIndex,
         id: "".concat(prefix, "_").concat(radio.id),
         label: radio.label,

package/form/SwitcherField/SwitcherFieldView.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ISwitcherFieldViewProps } from '@steroidsjs/core/ui/form/SwitcherField/SwitcherField';
-export default function SwitcherFieldView(props: ISwitcherFieldViewProps): JSX.Element;
+import { ICheckboxFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxField/CheckboxField';
+export default function SwitcherFieldView(props: ICheckboxFieldViewProps): JSX.Element;

package/form/SwitcherField/SwitcherFieldView.js

@@ -10,46 +10,28 @@ var __assign = (this && this.__assign) || function () {
     };
     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 react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
-    var prefix = (0, hooks_1.useUniqueId)('switcher');
-    var renderLabel = React.useCallback(function (item) {
-        if (typeof item.label === 'object') {
-            return props.selectedIds.includes(item.id) ? item.label.checked : item.label.unchecked;
+    var uniqueId = (0, hooks_1.useUniqueId)('switcher');
+    var renderLabel = react_1["default"].useCallback(function () {
+        if (typeof props.label === 'object') {
+            return props.inputProps.checked ? props.label.checked : props.label.unchecked;
         }
-        return item.label;
-    }, [props.selectedIds]);
-    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (switcher, switcherIndex) { return (React.createElement("label", { key: switcherIndex, className: bem.element('switcher', {
-            size: props.size
-        }), htmlFor: "".concat(prefix, "_").concat(switcher.id) },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(switcher.id), onChange: function () { return props.onItemSelect(switcher.id); }, checked: props.selectedIds.includes(switcher.id), className: bem.element('input'), required: switcher.required })),
-        React.createElement("span", { className: bem.element('slider') }),
-        React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
+        return props.label;
+    }, [props.inputProps.checked, props.label]);
+    var customVariableColorStyle = { '--checkbox-custom-color': props.color };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            hasErrors: !!props.errors
+        }), props.className), style: __assign(__assign({}, props.style), customVariableColorStyle), onClick: props.onChange },
+        react_1["default"].createElement("input", __assign({ id: props.id || uniqueId, disabled: props.disabled, required: props.required, onChange: function () { return props.onItemSelect(props.id); }, className: bem.element('input') }, props.inputProps)),
+        react_1["default"].createElement("span", { className: bem.element('slider') }),
+        react_1["default"].createElement("span", { className: bem.element('label') }, renderLabel())));
 }
 exports["default"] = SwitcherFieldView;

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../../scss/variables";
+@use 'style/variables';
 
 :root {
     --switcher-dot-disabled-color: #dbe2e6;
@@ -11,85 +11,79 @@ html[data-theme="dark"] {
     --switcher-slider-disabled-color: #5b5c6b;
 }
 
+
 $switcher-dot-disabled-color: var(--switcher-dot-disabled-color);
 $switcher-slider-disabled-color: var(--switcher-slider-disabled-color);
 
 $background-color-transition-timing: 150ms;
 
-
 .SwitcherFieldView {
     $root: &;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    row-gap: 10px;
-
-    &__switcher {
-        display: inline-flex;
-        column-gap: 12px;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
 
-        $sizes: () !default;
-        $sizes: map.merge(
-            (
-                "lg": (
-                    "width": 40px,
-                    "height": 24px,
-                    "dotSize": 18px,
-                    "dotTranslateDefault": translateY(-50%) translateX(4px),
-                    "dotTranslateActive": translateY(-50%) translateX(16px),
-                    "font-size": variables.$font-size-lg,
-                    "line-height": variables.$line-height-lg,
-                ),
-                "md": (
-                    "width": 34px,
-                    "height": 20px,
-                    "dotSize": 14px,
-                    "dotTranslateDefault": translateY(-50%) translateX(3px),
-                    "dotTranslateActive": translateY(-50%) translateX(15px),
-                    "font-size": variables.$font-size-base,
-                    "line-height": variables.$line-height-base,
-                ),
-                "sm": (
-                    "width": 28px,
-                    "height": 16px,
-                    "dotSize": 12px,
-                    "dotTranslateDefault": translateY(-50%) translateX(2px),
-                    "dotTranslateActive": translateY(-50%) translateX(12px),
-                    "font-size": variables.$font-size-sm,
-                    "line-height": variables.$line-height-sm,
-                ),
+    display: inline-flex;
+    column-gap: 12px;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    $sizes: () !default;
+    $sizes: map.merge(
+        (
+            "lg": (
+                "width": 40px,
+                "height": 24px,
+                "dotSize": 18px,
+                "dotTranslateDefault": translateY(-50%) translateX(4px),
+                "dotTranslateActive": translateY(-50%) translateX(16px),
+                "font-size": variables.$font-size-lg,
+                "line-height": variables.$line-height-lg,
             ),
-            $sizes
-        );
-
-        &_size { 
-            @each $size, $sizeMap in $sizes { 
-                &_#{$size} {
-                    #{$root}__slider {
-                        width: map.get($sizeMap, width);
-                        height: map.get($sizeMap, height);
-    
-                        &::before {
-                            width: map.get($sizeMap, dotSize);
-                            height: map.get($sizeMap, dotSize);
-                            transform: map.get($sizeMap, dotTranslateDefault);
-                        }
-                    }
-    
-                    #{$root}__input:checked + #{$root}__slider {
-                        &::before {
-                            transform: map.get($sizeMap, dotTranslateActive);
-                        }
+            "md": (
+                "width": 34px,
+                "height": 20px,
+                "dotSize": 14px,
+                "dotTranslateDefault": translateY(-50%) translateX(3px),
+                "dotTranslateActive": translateY(-50%) translateX(15px),
+                "font-size": variables.$font-size-base,
+                "line-height": variables.$line-height-base,
+            ),
+            "sm": (
+                "width": 28px,
+                "height": 16px,
+                "dotSize": 12px,
+                "dotTranslateDefault": translateY(-50%) translateX(2px),
+                "dotTranslateActive": translateY(-50%) translateX(12px),
+                "font-size": variables.$font-size-sm,
+                "line-height": variables.$line-height-sm,
+            ),
+        ),
+        $sizes
+    );
+
+    &_size { 
+        @each $size, $sizeMap in $sizes { 
+            &_#{$size} {
+                #{$root}__slider {
+                    width: map.get($sizeMap, width);
+                    height: map.get($sizeMap, height);
+
+                    &::before {
+                        width: map.get($sizeMap, dotSize);
+                        height: map.get($sizeMap, dotSize);
+                        transform: map.get($sizeMap, dotTranslateDefault);
                     }
-    
-                    #{$root}__label {
-                        font-size: map.get($sizeMap, font-size);
-                        line-height: map.get($sizeMap, line-height);
+                }
+
+                #{$root}__input:checked + #{$root}__slider {
+                    &::before {
+                        transform: map.get($sizeMap, dotTranslateActive);
                     }
                 }
+
+                #{$root}__label {
+                    font-size: map.get($sizeMap, font-size);
+                    line-height: map.get($sizeMap, line-height);
+                }
             }
         }
     }
@@ -190,4 +184,4 @@ $background-color-transition-timing: 150ms;
     &__label {
         color: variables.$text-color;
     }
-}
+}

package/form/SwitcherListField/SwitcherListFieldView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICheckboxListFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxListField/CheckboxListField';
+export default function SwitcherListFieldView(props: ICheckboxListFieldViewProps): JSX.Element;

package/form/SwitcherListField/SwitcherListFieldView.js

@@ -0,0 +1,54 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var SwitcherFieldView_1 = __importDefault(require("../SwitcherField/SwitcherFieldView"));
+function SwitcherListFieldView(props) {
+    var bem = (0, hooks_1.useBem)('SwitcherListFieldView');
+    var prefix = (0, hooks_1.useUniqueId)('switcher');
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.items.map(function (checkbox, checkboxIndex) { return props.renderItem({
+        key: checkboxIndex,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            type: 'checkbox',
+            checked: props.selectedIds.includes(checkbox.id),
+            onChange: function () {
+                props.onItemSelect(checkbox.id);
+            },
+            disabled: props.disabled || checkbox.disabled
+        },
+        size: checkbox.size || props.size,
+        color: checkbox.color,
+        required: checkbox.required,
+        view: SwitcherFieldView_1["default"]
+    }); })));
+}
+exports["default"] = SwitcherListFieldView;