@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.100

package/form/NumberField/NumberFieldView.js

@@ -33,38 +33,33 @@ 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) {
-    // 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]);
-    var onStepDown = (0, react_1.useCallback)(function () {
-        inputRef.current.stepDown();
-        props.inputProps.onChange(inputRef.current.value);
-    }, [inputRef.current]);
+    var _a, _b;
     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: !!((_b = (_a = props.inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value)
+        }), props.className) },
+        React.createElement("input", __assign({ ref: props.inputRef, className: bem(bem.element('input')) }, props.inputProps, { onWheel: function (event) { return event.currentTarget.blur(); }, id: props.id })),
         !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
-                }), 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' }))),
+                    disabled: (0, isNumber_1["default"])(props.inputProps.max) && props.inputProps.value >= props.inputProps.max
+                }), type: 'button', onClick: props.onStepUp },
+                React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })),
             React.createElement("button", { className: bem.element('arrow', {
-                    disabled: 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' })))))));
+                    disabled: (0, isNumber_1["default"])(props.inputProps.min) && props.inputProps.value <= props.inputProps.min
+                }), type: 'button', onClick: props.onStepDown },
+                React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })))),
+        React.createElement("span", { className: bem.element('input-effects') })));
 }
 exports["default"] = NumberFieldView;

package/form/NumberField/NumberFieldView.scss

@@ -1,102 +1,210 @@
+@use "../../scss/variables";
+
+:root {
+    --number-field-arrow-color: #414141;
+}
+
+html[data-theme="dark"] {
+    --number-field-arrow-color: #ffffff;
+}
+
+$number-field-arrow-color: var(--number-field-arrow-color);
+
 .NumberFieldView {
-  display: flex;
-  overflow: hidden;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  padding: 0;
-  border: $input-border;
-
-  &:hover {
-    border-color: $border-hover;
-  }
-  &:active {
-    border-color: $border-action;
-    box-shadow: 0 0 0 4px $border-typing;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    border: unset;
-    cursor: not-allowed;
-
-    &:active, &:hover {
-      border: unset;
-      box-shadow: unset;
+    $root: &;
+    display: flex;
+    position: relative;
+    padding: 0;
+
+    font-family: variables.$font-family-nunito;
+
+    // Hide default arrows
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
     }
 
-    input {
-      cursor: inherit;
+    /* Firefox */
+    input[type="number"] {
+        -moz-appearance: textfield;
     }
-  }
-
-  // Hide default arrows
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-
-  &__input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    color: $heading;
-
-    width: inherit;
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__arrows-container{
-    display: flex;
-    flex-flow: column;
-    grid-gap: 2px;
-    font-size: .6em;
-
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .15s;
-  }
-  &:hover &__arrows-container{
-      opacity: 1;
-      pointer-events: all;
-  }
-
-  &__arrow{
-    padding: $input-padding-y $input-padding-x;
-    cursor: pointer;
-    height: 50%;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:nth-child(1), &:nth-child(2) {
-      background-color: $grey-lighter;
-      &:active, &:hover {
-        background-color: $border-default;
-        fill: $white;
-        svg {
-          fill: $white;
+    &__arrows-container {
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        top: 0;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        transition: opacity 150ms ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__arrow {
+        width: 30px;
+        height: 16px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: none;
+        border: none;
+        background: transparent;
+
+        span > svg > path {
+            stroke: $number-field-arrow-color;
+        }
+
+        &_disabled {
+            span {
+                cursor: not-allowed;
+            }
+            span > svg > path {
+                stroke: variables.$element-background-color-disabled;
+            }
+        }
+
+        &:last-child {
+            transform: rotate(180deg);
         }
-      }
     }
 
-    &_disabled{
-      cursor: not-allowed;
+    &_size {
+        &_lg {
+            #{$root} {
+                &__input {
+                    height: 56px;
+                    border-radius: variables.$radius-large;
+                    font-size: variables.$font-size-lg;
+
+                    &-effects {
+                        border-radius: variables.$radius-large;
+                    }
+                }
+
+                &__arrow {
+                    transform: translateX(-3px) translateY(6px);
+
+                    &:last-child {
+                        transform: translateX(-3px) translateY(-8px) rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        &_md {
+            #{$root} {
+                &__input {
+                    height: 46px;
+                    border-radius: variables.$radius-large;
+                    font-size: variables.$font-size-base;
+
+                    &-effects {
+                        border-radius: variables.$radius-large;
+                    }
+                }
+
+                &__arrow {
+                    transform: translateX(-3px) translateY(4px) scale(0.8);
+
+                    &:last-child {
+                        transform: translateX(-3px) translateY(-4px) rotate(180deg) scale(0.8);
+                    }
+                }
+            }
+        }
+
+        &_sm {
+            #{$root} {
+                &__input {
+                    height: 34px;
+                    font-size: variables.$font-size-sm;
+
+                    &-effects {
+                        border-radius: variables.$radius-small;
+                    }
+                }
+
+                &__arrow {
+                    transform: translateX(1px) translateY(2px) scale(0.8);
+
+                    &:last-child {
+                        transform: translateX(1px) translateY(-3px) rotate(180deg) scale(0.8);
+                    }
+                }
+            }
+        }
+    }
+
+    &__input {
+        width: 100%;
+        outline: none;
+        border: 1px solid variables.$element-border-color;
+        border-radius: variables.$radius-small;
+        padding: 5px 22px 5px 8px;
+        line-height: 24px;
+        z-index: 1;
+        font-weight: variables.$font-weight-sm;
+        color: variables.$text-color;
+
+        background-color: variables.$element-field-background-color;
+
+        &::placeholder {
+            color: variables.$element-placeholder-color;
+        }
+
+        &:disabled {
+            background-color: variables.$element-background-color-disabled;
+            color: variables.$element-placeholder-color-disabled;
+        }
+
+        &:hover:not(:disabled):not(:focus) {
+            border-color: variables.$element-border-color-hover;
+        }
+
+        &:active:not(:disabled) {
+            border: 1px solid variables.$primary;
+        }
     }
 
-    svg{
-      transition: fill .1s;
+    &:focus-within #{$root}__arrows-container {
+        opacity: 1;
+        pointer-events: all;
     }
 
-  }
-}
+    &__input-effects {
+        position: absolute;
+        display: block;
+        z-index: 5;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        border: 4px solid variables.$primary-light;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__input:focus ~ &__input-effects {
+        opacity: 1;
+    }
+
+    &__input:active ~ &__input-effects {
+        opacity: 0;
+    }
 
+    &_filled #{$root}__arrows-container {
+        opacity: 1;
+        pointer-events: all;
+    }
+}

package/form/PasswordField/PasswordFieldView.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IPasswordFieldViewProps } from '@steroidsjs/core/ui/form/PasswordField/PasswordField';
-export default function PasswordFieldView(props: IPasswordFieldViewProps & IBemHocOutput): JSX.Element;
+export default function PasswordFieldView(props: IPasswordFieldViewProps): JSX.Element;

package/form/PasswordField/PasswordFieldView.js

@@ -38,19 +38,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var PasswordField_1 = require("@steroidsjs/core/ui/form/PasswordField/PasswordField");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function PasswordFieldView(props) {
     var bem = (0, hooks_1.useBem)('PasswordFieldView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem(bem.element('container', {
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            filled: !!props.input.value,
+            disabled: props.inputProps.disabled
+        }), props.className) },
+        React.createElement("div", { className: bem.element('container', {
                 disabled: props.inputProps.disabled
-            }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid') },
-            React.createElement("input", __assign({ className: bem(bem.element('input', {
-                    size: props.size
-                }), !!props.errors && 'is-invalid', props.className) }, props.inputProps)),
-            props.security && (React.createElement("button", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
-                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'securityEye' : 'securityEyeSlash' })))),
-        props.security && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
+            }) },
+            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id })),
+            props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye', {
+                    viewHide: props.inputProps.type === PasswordField_1.InputType.PASSWORD
+                })), onClick: props.onShowButtonClick },
+                React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'view_hide' : 'view' })))),
+        props.showSecurityBar && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
 }
 exports["default"] = PasswordFieldView;