@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.60

package/form/RadioField/RadioFieldView.scss

@@ -0,0 +1,226 @@
+:root {
+    --radio-hover-color: #651fff;
+}
+
+html[data-theme="dark"] {
+    --radio-hover-color: #6648a7;
+}
+
+$radio-hover-color: var(--radio-hover-color);
+
+.RadioFieldView {
+    position: relative;
+    box-sizing: border-box;
+
+    $root: &;
+
+    font-family: $font-family-nunito;
+    color: $text-color;
+    line-height: 24px;
+    font-weight: 400;
+    font-size: $font-size-sm;
+
+    &__ellipse {
+        position: absolute;
+        top: 50%;
+        left: 6px;
+        transform: translateY(-50%);
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background-color: $primary;
+        border-radius: $radius-circle;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__label {
+        position: relative;
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+    }
+
+    &__input + &__label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    //Custom Radio
+    &__input + label::before {
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        border-radius: $radius-circle;
+        border: 1px solid $border-color;
+        margin-right: 8px;
+        cursor: pointer;
+
+        background-repeat: no-repeat;
+        background-position: 53% 50%;
+        background-size: 50% 50%;
+    }
+
+    &__input + &__label::after {
+        content: "";
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 4px solid $primary-light;
+        border-radius: $radius-circle;
+        pointer-events: none;
+        opacity: 0;
+
+        transform: translate(-12%, -12%);
+
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &__input:not(:disabled):not(:checked):hover + &__label::before {
+        border-color: $border-color-hover;
+    }
+
+    &__input:not(:disabled):not(:checked):active + &__label::before {
+        border-color: $primary;
+    }
+
+    &__input:not(:disabled):focus + &__label::after {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):focus + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:checked + &__label::before {
+        border: 1px solid $primary;
+    }
+    &__input:checked + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label::before {
+        border-color: $primary-dark;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label &__ellipse {
+        opacity: 1;
+        background-color: $radio-hover-color;
+    }
+
+    &__input:not(:disabled):checked:active + &__label::before {
+        border-color: $primary-light;
+    }
+
+    &__input:not(:disabled):checked:active + &__label &__ellipse {
+        opacity: 1;
+        background-color: $primary-light;
+    }
+
+    &__input:disabled + &__label {
+        cursor: not-allowed;
+        color: $placeholder-color;
+
+        &::before {
+            cursor: not-allowed;
+            background-color: $background-disabled-color;
+        }
+    }
+
+    &__input:disabled:checked + &__label::before {
+        cursor: not-allowed;
+
+        background-color: transparent;
+        border-color: $background-disabled-color;
+    }
+
+    &__input:disabled:checked + &__label &__ellipse {
+        background-color: $background-disabled-color;
+    }
+
+    &_hasError {
+        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
+            color: $danger;
+
+            &::before {
+                border-color: $danger;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                font-size: $font-size-lg;
+                line-height: 24px;
+
+                &::before {
+                    width: 22px;
+                    height: 22px;
+                }
+
+                &::after {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                font-size: $font-size-base;
+                line-height: 22px;
+
+                &::before {
+                    width: 18px;
+                    height: 18px;
+                }
+
+                &::after {
+                    width: 20px;
+                    height: 20px;
+                    transform: translate(-14.5%, -10.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 10px;
+                height: 10px;
+                left: 5px;
+            }
+        }
+
+        &_sm {
+            #{$root}__label {
+                font-size: $font-size-sm;
+                line-height: 18px;
+
+                &::before {
+                    width: 14px;
+                    height: 14px;
+                }
+
+                &::after {
+                    width: 16px;
+                    height: 16px;
+                    transform: translate(-16.5%, -12.5%);
+                }
+            }
+
+            #{$root}__ellipse {
+                width: 8px;
+                height: 8px;
+                left: 4px;
+            }
+        }
+    }
+}

package/form/RadioListField/RadioListFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IRadioListFieldViewProps } from '@steroidsjs/core/ui/form/RadioListField/RadioListField';
-export default function RadioListFieldView(props: IRadioListFieldViewProps & IBemHocOutput): JSX.Element;
+export default function RadioListFieldView(props: IRadioListFieldViewProps): JSX.Element;

package/form/RadioListField/RadioListFieldView.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,12 +30,27 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function RadioListFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('RadioListFieldView');
     var prefix = (0, useUniqueId_1["default"])('radio');
-    return (React.createElement("div", { className: bem.block() }, props.items.map(function (item) { return (React.createElement("div", { key: typeof item.id !== 'boolean' ? item.id : (item.id ? 'true' : 'false'), className: 'custom-control custom-radio' },
-        React.createElement("input", __assign({}, props.inputProps, { id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled || item.disabled, onChange: function () {
-                props.onItemSelect(item.id);
-            } })),
-        React.createElement("label", { className: 'custom-control-label', htmlFor: "".concat(prefix, "_").concat(item.id) }, item.label))); })));
+    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({
+        inputProps: {
+            name: "".concat(prefix, "_").concat(radio.id),
+            checked: null,
+            type: 'radio',
+            disabled: false,
+            onChange: function () {
+                props.onItemSelect(radio.id);
+            }
+        },
+        disabled: props.disabled,
+        checked: props.selectedIds.includes(radio.id),
+        label: radio.label,
+        id: "".concat(prefix, "_").concat(radio.id),
+        key: radioIndex,
+        size: props.size
+    }); })));
 }
 exports["default"] = RadioListFieldView;

package/form/RadioListField/RadioListFieldView.scss

@@ -1,3 +1,13 @@
 .RadioListFieldView {
+    display: flex;
 
-}
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
+    }
+
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
+    }
+}

package/form/ReCaptchaField/ReCaptchaFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IReCaptchaFieldViewProps } from '@steroidsjs/core/ui/form/ReCaptchaField/ReCaptchaField';
-export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps & IBemHocOutput): JSX.Element;
+export default function ReCaptchaFieldView(props: IReCaptchaFieldViewProps): JSX.Element;

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/SliderField/SliderFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISliderFieldViewProps } from '@steroidsjs/core/ui/form/SliderField/SliderField';
-export default function SliderFieldView(props: ISliderFieldViewProps & IBemHocOutput): JSX.Element;
+export default function SliderFieldView(props: ISliderFieldViewProps): JSX.Element;

package/form/SwitcherField/SwitcherFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ISwitcherFieldViewProps } from '@steroidsjs/core/ui/form/SwitcherField/SwitcherField';
-export default function SwitcherFieldView(props: ISwitcherFieldViewProps & IBemHocOutput): JSX.Element;
+export default function SwitcherFieldView(props: ISwitcherFieldViewProps): JSX.Element;

package/form/SwitcherField/SwitcherFieldView.js

@@ -33,18 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 get_1 = __importDefault(require("lodash-es/get"));
-var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function SwitcherFieldView(props) {
     var bem = (0, hooks_1.useBem)('SwitcherFieldView');
-    return (React.createElement("div", { className: bem(bem.block({
+    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;
+        }
+        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
-        }), 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)); })));
+        }), 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') })),
+        React.createElement("span", { className: bem.element('slider') }),
+        React.createElement("span", { className: bem.element('label') }, renderLabel(switcher)))); })));
 }
 exports["default"] = SwitcherFieldView;

package/form/SwitcherField/SwitcherFieldView.scss

@@ -1,2 +1,189 @@
+:root {
+    --switcher-dot-disabled-color: #dbe2e6;
+    --switcher-slider-disabled-color: #f1f5f7;
+}
+
+html[data-theme="dark"] {
+    --switcher-dot-disabled-color: #4e4f57;
+    --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": $font-size-lg,
+                    "line-height": $line-height-lg,
+                ),
+                "md": (
+                    "width": 34px,
+                    "height": 20px,
+                    "dotSize": 14px,
+                    "dotTranslateDefault": translateY(-50%) translateX(3px),
+                    "dotTranslateActive": translateY(-50%) translateX(15px),
+                    "font-size": $font-size-base,
+                    "line-height": $line-height-base,
+                ),
+                "sm": (
+                    "width": 28px,
+                    "height": 16px,
+                    "dotSize": 12px,
+                    "dotTranslateDefault": translateY(-50%) translateX(2px),
+                    "dotTranslateActive": translateY(-50%) translateX(12px),
+                    "font-size": $font-size-sm,
+                    "line-height": $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}__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);
+                    }
+                }
+            }
+        }
+    }
+
+    &__input {
+        position: absolute;
+        cursor: pointer;
+        z-index: 3;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        &:checked + #{$root}__slider {
+            background-color: $primary;
+            border-color: transparent;
+
+            &::before {
+                background-color: $white;
+            }
+
+            &::after {
+                border-color: $primary-light;
+            }
+        }
+
+        &:hover:not(:checked):not(:disabled) + #{$root}__slider {
+            &::before {
+                background-color: $gray-dark;
+            }
+        }
+
+        &:checked:hover + #{$root}__slider {
+            background-color: $primary-dark;
+        }
+
+        &:focus:not(:active) + #{$root}__slider {
+            &:after {
+                opacity: 1;
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+
+        &:disabled ~ #{$root}__label {
+            color: $gray;
+        }
+
+        &:disabled + #{$root}__slider {
+            background-color: $switcher-slider-disabled-color;
+
+            &::before {
+                background-color: $switcher-dot-disabled-color;
+            }
+        }
+    }
+
+    &__slider {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: inline-block;
+        border: 1px solid $gray;
+        border-radius: 200px;
+        transition: background-color $background-color-transition-timing ease-in-out;
+
+        &::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: inline-block;
+            height: calc(100% + 2px);
+            width: calc(100% + 2px);
+            border-radius: inherit;
+            border: 4px solid $gray;
+            transform: translateX(-5px) translateY(-5px);
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            top: 50%;
+            border-radius: $radius-circle;
+            background-color: $gray;
+            transition: transform 100ms ease-in-out, background-color $background-color-transition-timing ease-in-out;
+        }
+    }
+
+    &__label {
+        color: $text-color;
+    }
+}

package/form/TextField/TextFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITextFieldViewProps } from '@steroidsjs/core/ui/form/TextField/TextField';
-export default function TextFieldView(props: ITextFieldViewProps & IBemHocOutput): JSX.Element;
+export default function TextFieldView(props: ITextFieldViewProps): JSX.Element;

package/form/TextField/TextFieldView.js

@@ -33,13 +33,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function TextFieldView(props) {
     var bem = (0, hooks_1.useBem)('TextFieldView');
-    return (React.createElement("textarea", __assign({ className: bem(bem.block({
+    return (React.createElement("div", { className: bem(bem.block({
+            hasErrors: !!props.errors,
+            filled: !!props.inputProps.value,
             size: props.size
-        }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) }, props.inputProps)));
+        }), props.className) },
+        React.createElement("textarea", __assign({ className: bem.element('textarea'), id: props.id }, props.inputProps)),
+        props.showClear && (React.createElement(Icon_1["default"], { className: bem.element('clear'), name: "cross_8x8", onClick: props.onClear }))));
 }
 exports["default"] = TextFieldView;