@steroidsjs/bootstrap 3.0.0-beta.25 → 3.0.0-beta.27

package/form/FieldLayout/FieldLayoutView.scss

@@ -1,26 +1,130 @@
 .FieldLayoutView {
-  &__label {
-    &_required:after {
-      display: inline-block;
-      content: '*';
-      color: $danger;
-      margin: 0 0 0 3px;
-    }
-  }
-
-  &__invalid-feedback {
-    display: block !important;
-  }
-
-  &__hint {
-    width: 100%;
-    margin-top: .25rem;
-    font-size: 80%;
-  }
-
-  &_layout_inline &__field {
-    .form-control, input {
-      width: 100%;
-    }
-  }
+    $root: &;
+    font-family: $font-family-nunito;
+
+    &__label {
+        font-size: $font-size-sm;
+        line-height: 24px;
+        font-weight: $font-weight-sm;
+        color: $text-color;
+        margin-bottom: 8px;
+
+        &_size {
+            &_sm {
+                font-size: $font-size-sm;
+            }
+            &_md {
+                font-size: $font-size-base;
+            }
+            &_lg {
+                font-size: $font-size-lg;
+            }
+        }
+
+        &_required:after {
+            display: inline-block;
+            content: "*";
+            color: $danger;
+            margin: 0 0 0 3px;
+        }
+    }
+
+    &__invalid-feedback {
+        display: block !important;
+        margin-top: 4.83px;
+    }
+
+    &__error-message {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        column-gap: 4px;
+    }
+
+    &__hint {
+        width: 100%;
+        margin-top: 4px;
+        font-size: 80%;
+
+        color: $text-color;
+        font-size: $font-size-sm;
+        line-height: 16px;
+        font-weight: $font-weight-sm;
+
+        display: flex;
+        align-items: center;
+        column-gap: 4px;
+
+        &_size {
+            &_lg {
+                font-size: $font-size-base;
+                line-height: 22px;
+                font-weight: $font-weight-sm;
+            }
+
+            &_md {
+                font-size: $font-size-sm;
+                line-height: 18px;
+                font-weight: $font-weight-sm;
+            }
+
+            &_sm {
+                font-size: $font-size-xs;
+                line-height: 16px;
+                font-weight: $font-weight-sm;
+            }
+        }
+    }
+
+    @mixin svgSize() {
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    &__icon_error {
+        width: 16px;
+        height: 16px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @include svgSize;
+
+        svg rect {
+            color: $danger;
+        }
+    }
+
+    &__error-text { 
+        color: $danger;
+        &_size {  
+            &_lg {
+                font-size: $font-size-base;
+                line-height: 22px;
+                font-weight: $font-weight-sm;
+            }
+
+            &_md {
+                font-size: $font-size-sm;
+                line-height: 18px;
+                font-weight: $font-weight-sm;
+            }
+
+            &_sm {
+                font-size: $font-size-xs;
+                line-height: 16px;
+                font-weight: $font-weight-sm;
+            }
+        }
+    }
+
+    &_layout_inline &__field {
+        .form-control,
+        input {
+            width: 100%;
+        }
+    }
 }

package/form/InputField/InputFieldView.js

@@ -33,28 +33,47 @@ 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 InputFieldView(props) {
     var bem = (0, hooks_1.useBem)('InputFieldView');
+    var renderLeadIcon = React.useCallback(function () {
+        var className = bem.element('lead-icon');
+        return typeof props.leadIcon === 'string'
+            ? (React.createElement(Icon_1["default"], { name: props.leadIcon, className: className, tabIndex: -1 }))
+            : React.createElement("span", { className: className }, props.leadIcon);
+    }, [bem, props.leadIcon]);
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled,
-            size: props.size
-        }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className), style: props.style },
+            size: props.size,
+            hasError: !!props.errors,
+            hasLeadIcon: !!props.leadIcon,
+            hasClearIcon: props.showClear && !props.disabled,
+            filled: !!props.inputProps.value,
+            hasAddonAfter: !!props.addonAfter,
+            hasAddonBefore: !!props.addonBefore,
+            hasAddon: !!props.addonAfter || !!props.addonBefore,
+            hasTextAddon: !!props.textAfter || !!props.textBefore,
+            hasTextAddonBefore: !!props.textBefore,
+            hasTextAddonAfter: !!props.textAfter
+        }), props.className), style: props.style },
         props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
-        props.maskProps
-            ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
-                    size: props.size,
-                    disabled: props.inputProps.disabled
-                }), !!props.errors && 'is-invalid') }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required })))
-            : (React.createElement("input", __assign({ className: bem(bem.element('input', {
-                    size: props.size,
-                    disabled: props.disabled,
-                    success: props.success,
-                    failed: props.failed
-                }), !!props.errors && 'is-invalid') }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required }))),
+        React.createElement("div", { className: bem.element('input-wrapper') },
+            props.leadIcon && renderLeadIcon(),
+            props.maskProps
+                ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
+                        size: props.size
+                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required })))
+                : (React.createElement("input", __assign({ className: bem(bem.element('input', {
+                        size: props.size
+                    })) }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required }))),
+            !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "field-close", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
 }

package/form/InputField/InputFieldView.scss

@@ -1,135 +1,307 @@
-$input-border-color: transparent;
+:root {
+    --lead-icon-default-color: #e5e9eb;
+    --lead-icon-focus-color: #323232;
+    --lead-icon-disabled-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --lead-icon-default-color: #5b5c6b;
+    --lead-icon-focus-color: #ffffff;
+    --lead-icon-disabled-color: rgba(255, 255, 255, 0.1);
+}
+
+$lead-icon-default-color: var(--lead-icon-default-color);
+$lead-icon-focus-color: var(--lead-icon-focus-color);
+$lead-icon-disabled-color: var(--lead-icon-disabled-color);
 
 .InputFieldView {
-  $root: &;
+    $root: &;
 
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  padding: 0;
-  border-radius: $input-border-radius;
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 
-  &_size {
-    &_small {
-      height: $input-height-sm;
-    }
-    &_medium {
-      height: $input-height-md;
+    width: 240px;
+    height: 34px;
+
+    color: $text-color;
+    font-family: $font-family-nunito;
+    font-weight: $font-weight-sm;
+    line-height: 24px;
+
+    &__input-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
     }
-    &_large {
-      height: $input-height-lg;
+
+    &__input {
+        width: 100%;
+        height: 100%;
+
+        padding: 0 8px;
+        outline: none;
+
+        background-color: $element-background-color;
+        border: 1px solid $border-color;
+        border-radius: inherit;
+
+        &::placeholder {
+            color: $placeholder-color;
+            font-size: inherit;
+        }
     }
-  }
 
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 3px $border-typing, 0 0 0 3px $border-typing;
-  }
+   
+    //Statements
+    &::before { 
+        content: '';
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
 
-  &.is-invalid:focus-within{
-    border-color: $border-action;
-    box-shadow: 0 0 0 3px $border-typing, 0 0 0 3px $border-typing;
-  }
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+    }
 
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
+    &:not(#{$root}_disabled):focus-within::before {
+        border: 4px solid $primary-light;
+        transform: translateX(-4px) translateY(-4px);
+        border-radius: 16px;
+        opacity: 1;
+    }
 
-    input {
-      cursor: inherit;
+    &:not(#{$root}_disabled):active {
+        #{$root}__input { 
+            border-color: transparent;
+        }
+        
+        &::before { 
+            transform: none;
+            border: 1px solid $primary;
+            opacity: 1;
+        }
     }
 
-    &#{$root}_input {
-      background-color: $back-disabled;
+    &_disabled {
+        #{$root}__input { 
+            background-color: $background-disabled-color;
+            border-color: transparent;
+        }
     }
-  }
 
-  &_caption {
+    &_hasError {
+        #{$root}__input {
+            border-color: transparent;
+        }
 
-  }
 
-  &_failed {
-    background: $back-error;
-    &::after {
-      content: 'Error message';
-      color: $border-error;
+        &::before { 
+            border: 1px solid $danger;
+            border-radius: 16px;
+            transform: translateX(-1px) translateY(-1px);
+            opacity: 1;
+        }
     }
-  }
 
-  &_success {
-    background: $back-success;
-    &::after {
-      content: 'Success message';
-      color: $border-success;
+    //Sizes
+    &_size {
+        &_lg {
+            height: $input-height-lg;
+            border-radius: $radius-large;
+            
+            #{$root}__input {
+                font-size: $font-size-lg;
+                border-radius: $radius-large;
+            }
+
+            #{$root}__addon-before,
+            #{$root}__addon-after {
+                padding: 16px;
+            }
+            #{$root}__text-before,
+            #{$root}__text-after {
+                padding: 16px 3px;
+            }
+
+            &::before { 
+                border-radius: $radius-large;
+            }
+        }
+
+        &_md {
+            height: $input-height-md;
+            border-radius: $radius-large;
+            
+            #{$root}__input {
+                border-radius: $radius-large;
+                font-size: $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: $radius-large;
+            }
+        }
+
+        &_sm {
+            height: $input-height-sm;
+            border-radius: $radius-small;
+            
+            #{$root}__input {
+                font-size: $font-size-sm;
+                border-radius: $radius-small;
+            }
+
+            #{$root}__addon-before,
+            #{$root}__addon-after {
+                padding: 5px 8px;
+            }
+
+            #{$root}__text-before,
+            #{$root}__text-after {
+                padding: 5px 3px;
+            }
+
+            &::before { 
+                border-radius: $radius-small;
+            }
+        }
     }
-  }
 
-  &__input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: $white;
-    overflow: hidden;
-    color: $heading;
-    padding: $input-padding-y $input-padding-x;
-    border-radius: $input-border-radius;
+    //LEAD ICON
+    &_hasLeadIcon {
+        #{$root}__input {
+            padding-left: 40px;
+        }
+    }
 
-    &_disabled {
-      color: rgba(0, 0, 0, .25);
-      background: $back-disabled;
-      cursor: not-allowed;
+    &__lead-icon {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 50%;
+        left: 8px;
+        transform: translateY(-50%);
+        pointer-events: none;
+        outline: none;
 
-      input {
-        cursor: inherit;
-      }
+        svg circle,
+        path {
+            transition: stroke 150ms ease-in-out;
+            stroke: $lead-icon-default-color;
+        }
     }
 
-    &_failed {
-      box-sizing: border-box;
+    //CLEAR ICON
+    &_hasClearIcon {
+        #{$root}__input {
+            padding-right: 40px;
+        }
     }
 
-    &:active {
-      color: $heading;
+    &__icon-clear {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+        pointer-events: none;
+
+        &:focus {
+            opacity: 1;
+            pointer-events: all;
+        }
     }
-    &:focus {
-      color: $heading;
+
+    &_filled {
+        #{$root}__icon-clear {
+            opacity: 1;
+            pointer-events: all;
+            cursor: pointer;
+        }
+
+        #{$root}__lead-icon {
+            svg circle,
+            path {
+                stroke: $lead-icon-focus-color;
+            }
+        }
     }
-  }
 
-  &__addon-before, &__addon-after {
-    display: flex;
-    align-items: center;
-    // padding: 0 $input-addon-padding;
+    //Addons
+    &_hasAddon,
+    &_hasTextAddon {
+        width: fit-content;
 
-    color: rgba(0, 0, 0, .85);
-    text-align: center;
-    background-color: $back-disabled;
-  }
+        #{$root}__input-wrapper {
+            width: auto;
+        }
 
-  &__addon-before {
-    border-radius: $input-border-radius 0 0 $input-border-radius;
-    border-right: 1px solid $input-border-color;
-  }
+        #{$root}__input {
+            &_size {
+                &_lg {
+                    width: 206px;
+                }
 
-  &__addon-after {
-    border-radius: 0 $input-border-radius $input-border-radius 0;
-    border-left: 1px solid $input-border-color;
-  }
+                &_md {
+                    width: 200px;
+                }
 
+                &_sm {
+                    width: 192px;
+                }
+            }
+        }
+    }
 
-  &__text-before, &__text-after {
-    display: flex;
-    align-items: center;
-  }
+    &_hasAddonBefore {
+        #{$root}__input {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
 
-  &__text-before {
-    // padding-left: $input-text-padding;
-  }
+    &_hasAddonAfter {
+        #{$root}__input {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 
-  &__text-after {
-    // padding-right: $input-text-padding;
-  }
+    &__addon-before,
+    &__addon-after {
+        padding: 11px 12px;
+        background-color: $background-disabled-color;
+    }
 
-}
+    &__addon-before {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+    &__addon-after {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+}

package/form/NumberField/NumberFieldView.js

@@ -33,38 +33,44 @@ 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 react_1 = require("react");
+var isNumber_1 = __importDefault(require("lodash-es/isNumber"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function NumberFieldView(props) {
+    var _a;
     // Input ref
     var inputRef = (0, react_1.useRef)(null);
     var onStepUp = (0, react_1.useCallback)(function () {
         inputRef.current.stepUp();
         props.inputProps.onChange(inputRef.current.value);
-    }, [inputRef.current]);
+    }, [props.inputProps]);
     var onStepDown = (0, react_1.useCallback)(function () {
         inputRef.current.stepDown();
         props.inputProps.onChange(inputRef.current.value);
-    }, [inputRef.current]);
+    }, [props.inputProps]);
     var bem = (0, hooks_1.useBem)('NumberFieldView');
     return (React.createElement("div", { className: bem(bem.block({
-            disabled: props.inputProps.disabled
-        }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className) },
-        React.createElement("input", __assign({ ref: inputRef, className: bem(bem.element('input', {
-                size: props.size
-            }), !!props.errors && 'is-invalid') }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); } })),
+            disabled: props.inputProps.disabled,
+            size: props.size,
+            hasErrors: !!props.errors,
+            filled: !!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)
+        }), props.className) },
+        React.createElement("input", __assign({ ref: inputRef, className: bem(bem.element('input')) }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); } })),
         !props.disabled && !props.errors && (React.createElement("div", { className: bem.element('arrows-container') },
             React.createElement("button", { className: bem.element('arrow', {
-                    disabled: props.inputProps.max && props.inputProps.value >= props.inputProps.max
+                    disabled: (0, isNumber_1["default"])(props.inputProps.max) && props.inputProps.value >= props.inputProps.max
                 }), type: 'button', onClick: onStepUp },
-                React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
-                    React.createElement("path", { d: 'M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140\n                                    768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1\n                                    391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' }))),
+                React.createElement(Icon_1["default"], { name: 'arrow' })),
             React.createElement("button", { className: bem.element('arrow', {
-                    disabled: props.inputProps.min && props.inputProps.value <= props.inputProps.min
+                    disabled: (0, isNumber_1["default"])(props.inputProps.min) && props.inputProps.value <= props.inputProps.min
                 }), type: 'button', onClick: onStepDown },
-                React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
-                    React.createElement("path", { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5\n                                    0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39\n                                    17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' })))))));
+                React.createElement(Icon_1["default"], { name: 'arrow' })))),
+        React.createElement("span", { className: bem.element('input-effects') })));
 }
 exports["default"] = NumberFieldView;