@steroidsjs/bootstrap 3.0.0-beta.11 → 3.0.0-beta.110

package/form/CheckboxField/CheckboxFieldView.js

@@ -43,9 +43,14 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxFieldView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxFieldView');
     var id = (0, useUniqueId_1["default"])('checkbox');
-    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), 'custom-control', 'custom-checkbox') },
-        React.createElement("input", __assign({ className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid', props.className), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
-        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: id },
-            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));
+    var customVariableColorStyle = { '--checkbox-custom-color': props.color };
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            hasErrors: !!props.errors
+        }), props.className), style: __assign(__assign({}, props.style), customVariableColorStyle), onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem.element('input', {
+                hasCustomColor: !!props.color
+            }), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+        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)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,46 +1,234 @@
+@use "../../scss/variables";
+@use "sass:meta";
+
+:root {
+    --disabled-text-color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] {
+    --disabled-text-color: rgba(255, 255, 255, 0.3);
+}
+
+$disabled-text-color: var(--disabled-text-color);
+
 .CheckboxFieldView {
-  display: inline-block;
-
-  &__label {
-    &-text {
-      &_required:after {
-        display: inline-block;
-        content: '*';
-        color: $danger;
-        margin: 0 0 0 3px;
-      }
-    }
-  }
-  .custom-control-label {
-    &::before, &::after {
-      top: 0;
+    $root: &;
+    position: relative;
+    display: inline-flex;
+
+    font-family: variables.$font-family-nunito;
+
+    &__input + &__label {
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
     }
-  }
-
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
+
+    &__label {
+        position: relative;
+        cursor: pointer;
+
+        //Сам кастомный checkbox
         &::before {
-          background: $primary-dark;
+            content: "";
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            border: 1px solid variables.$gray;
+            border-radius: variables.$radius-small;
+
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 50% 50%;
         }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
+
+        //Псевдоэлемент который служит для применения эффектов на чекбокс
+        &::after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 26px;
+            height: 26px;
+
+            transform: translate(-12%, -11.5%);
+            transition: opacity 150ms ease-in-out;
+            opacity: 0;
+
+            border-radius: variables.$radius-large;
+            border: 4px solid variables.$primary-light;
+        }
+
+        &-text {
+            margin-left: 8px;
+            color: variables.$text-color;
+            font-size: variables.$font-size-sm;
+            font-weight: variables.$font-weight-md;
+            transform: translateY(1px);
+        }
+    }
+
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+
+        //HOVER
+        &:not(:focus):not(:disabled):not(:checked):not(:active) + #{$root}__label:hover::before {
+            border-color: #d0d0d0;
+        }
+
+        //ACTIVE
+        &:not(:disabled):not(:checked):active + #{$root}__label::before {
+            border-color: variables.$primary;
+        }
+
+        &:active:checked + #{$root}__label::after {
+            opacity: 0;
+        }
+
+        &:checked:active + #{$root}__label::before {
+            background-color: variables.$primary-light;
+
+            border-color: transparent;
+        }
+
+        //FOCUS
+        &:focus + #{$root}__label::after {
+            opacity: 1;
         }
-      }
+
+        //CHECKED
+        &:checked + #{$root}__label::before {
+            border-color: variables.$primary;
+            background-color: variables.$primary;
+
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20898 1L3.70898 7L1.20898 4.27273' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+
+        //DISABLED
+        &:disabled + #{$root}__label {
+            cursor: not-allowed;
+            span {
+                color: $disabled-text-color;
+            }
+
+            &::before {
+                background: variables.$element-background-color-disabled;
+                border: none;
+            }
+        }
+
+        &:disabled:checked #{$root}__label::before {
+            background-color: variables.$element-background-color-disabled;
+            border-color: none;
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+    }
+
+    &__input#{$root}__input_hasCustomColor {
+        //ACTIVE
+        &:not(:disabled):not(:checked):active + #{$root}__label::before {
+            border-color: var(--checkbox-custom-color);
+        }
+
+        &:checked:active + #{$root}__label::before {
+            background-color: var(--checkbox-custom-color);
+        }
+
+        //CHECKED
+        &:checked + #{$root}__label::before {
+            border-color: var(--checkbox-custom-color);
+            background-color: var(--checkbox-custom-color);
+        }
+
+        
+        //FOCUS
+        &:focus + #{$root}__label::after {
+            opacity: 0;
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                &::before {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: variables.$radius-small;
+                }
+                &::after {
+                    width: 26px;
+                    height: 26px;
+                    border-radius: variables.$radius-large;
+                }
+
+                &-text {
+                    margin-left: 12px;
+                    font-size: variables.$font-size-lg;
+                    line-height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                &::before {
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 6px;
+                }
+
+                &::after {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: variables.$radius-medium;
+                    transform: translate(-13.5%, -13.5%);
+                }
+
+                &-text {
+                    margin-left: 8px;
+                    font-size: variables.$font-size-base;
+                    line-height: 22px;
+                }
+            }
+        }
+
+        &_sm {
+            #{$root}__label {
+                &::before {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 6px;
+                }
+
+                &::after {
+                    width: 18px;
+                    height: 18px;
+                    border-radius: variables.$radius-medium;
+                    transform: translate(-15.5%, -15.5%);
+                }
+
+                &-text {
+                    margin-left: 8px;
+                    font-size: variables.$font-size-sm;
+                    line-height: 18px;
+                }
+            }
+        }
+    }
+}
+
+.has-errors label {
+    &::before {
+        border-color: variables.$danger;
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    span {
+        color: variables.$danger;
     }
-  }
 }

package/form/CheckboxListField/CheckboxListFieldView.d.ts

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

package/form/CheckboxListField/CheckboxListFieldView.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,11 +30,26 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
 function CheckboxListFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('CheckboxListFieldView');
     var prefix = (0, useUniqueId_1["default"])('checkbox');
-    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
-        React.createElement("input", __assign({}, props.inputProps, { disabled: props.disabled, required: props.required, id: "".concat(prefix, "_").concat(item.id), className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), onChange: function () { return props.onItemSelect(item.id); }, onMouseOver: function () { return props.onItemHover(item.id); } })),
-        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: "".concat(prefix, "_").concat(item.id) },
-            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, item.label)))); })));
+    return (React.createElement("div", { className: bem(bem.block((_a = {},
+            _a["".concat(props.orientation)] = !!props.orientation,
+            _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
+        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
+        },
+        size: props.size,
+        color: checkbox.color
+    }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxListField/CheckboxListFieldView.scss

@@ -1,47 +1,13 @@
 .CheckboxListFieldView {
-  &__label {
-    &-text {
-      &_required:after {
-        display: inline-block;
-        content: '*';
-        color: $danger;
-        margin: 0 0 0 3px;
-      }
-    }
-  }
-
-  .custom-control-label {
-    &::before, &::after {
-      border-color: $border-default;
-      top: 0;
-    }
-  }
+    display: flex;
 
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
-        &::before {
-          background: $primary-dark;
-        }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
-        }
-      }
+    &_vertical {
+        flex-flow: column wrap;
+        row-gap: 8px;
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    &_horizontal {
+        flex-flow: row nowrap;
+        column-gap: 8px;
     }
-  }
-
 }

package/form/DateField/DateFieldView.js

@@ -46,20 +46,21 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 function DateFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateFieldView');
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: "bottom", visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,
-                'has-icon': !!props.icon,
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, className: bem(bem.element('input', { size: props.size }), props.isInvalid && 'is-invalid', props.inputProps.className) })),
+                React.createElement("input", __assign({}, props.inputProps, { ref: props.maskInputRef, onInput: function (e) {
+                        props.inputProps.onChange(e.currentTarget.value);
+                    }, className: bem(bem.element('input'), props.inputProps.className) })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar-alt' })),
-                    props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' })))))));
 }
 exports["default"] = DateFieldView;

package/form/DateField/DateFieldView.scss

@@ -1,81 +1,26 @@
-.DateFieldView {
-  $root: &;
-
-  padding-right: 8px;
-  position: relative;
-
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
+@use "../../scss/variables";
+@use '../../scss/mixins';
 
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $grey-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
 
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
+.DateFieldView {
+    $root: &;
+    position: relative;
+    
+    @include mixins.date-default-input();
 
-    &:hover #{$root}__icon_close {
-      opacity: 1;
-    }
-  }
+    @include mixins.date-default-body();
 
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    padding: $input-padding-y $input-padding-x;
-  }
+    @include mixins.icon-container($root);
 
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
+    @include mixins.date-default-sizes($root);
 
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
-    }
+    @include mixins.date-default-effects($root);
 
-    &_close{
-      position: absolute;
-      background-color: $white;
+    
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
+    &__dropdown { 
+        background: variables.$element-background-color;
 
-      &:hover {
-        path {
-          fill: $grey-dark;
-        }
-      }
+        @include mixins.calendar-border();
     }
-  }
 }

package/form/DateRangeField/DateRangeFieldView.js

@@ -43,28 +43,25 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
-var isString_1 = __importDefault(require("lodash-es/isString"));
 function DateRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateRangeFieldView');
+    var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
-                'no-border': props.noBorder
+                size: props.size,
+                'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsFrom && 'is-invalid'), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                React.createElement("span", { className: bem.element('divider') }, "-"),
-                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
-                    props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' }))),
+                React.createElement("span", { className: bem.element('effect') })))));
 }
 exports["default"] = DateRangeFieldView;