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

package/form/PasswordField/PasswordFieldView.scss

@@ -1,76 +1,266 @@
+@use "../../scss/variables";
+
+:root {
+    --security-bar-background: #eef1f2;
+    --eye-default-color: #eef1f2;
+    --eye-filled-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --security-bar-background: #5b5c6b;
+    --eye-default-color: #5b5c6b;
+    --eye-filled-color: #ffffff;
+}
+
+$security-bar-background: var(--security-bar-background);
+$eye-default-color: var(--eye-default-color);
+$eye-filled-color: var(--eye-filled-color);
+
 .PasswordFieldView {
+    $root: &;
+
+    position: relative;
+    line-height: 24px;
+    font-weight: variables.$font-weight-sm;
+
+    &__container {
+        position: relative;
+        width: 100%;
+        height: 34px;
 
+        &::before {
+            position: absolute;
+            content: "";
+            width: 100%;
+            height: 100%;
 
-  &__container{
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: stretch;
-    padding: 0;
+            transform: translate(-4px, -4px);
 
-    &:focus-within{
-      outline: 0;
-      border-color: $border-action;
-      box-shadow: 0 0 0 0.2rem $border-typing;
+            border-radius: 16px;
+
+            border: 4px solid variables.$primary-light;
+            transition: opacity 150ms ease-in-out;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &:focus-within:not(&_disabled):not(:active)::before {
+            opacity: 1;
+        }
     }
-    &.is-invalid:focus-within{
-      border-color: $border-error;
-      box-shadow: 0 0 0 0.2rem $back-error;
+
+    &__input {
+        width: 100%;
+        height: 100%;
+        border-radius: variables.$radius-small;
+        border: 1px solid variables.$element-border-color;
+        outline: none;
+        padding-left: 8px;
+        padding-right: 42px;
+
+        background-color: variables.$element-field-background-color;
+        color: variables.$text-color;
+
+        &::placeholder {
+            color: variables.$element-placeholder-color;
+        }
+
+        &:hover {
+            border: 1px solid variables.$element-border-color-hover;
+        }
+
+        &:not(:disabled):active {
+            border: 1px solid variables.$primary;
+        }
+
+        &:not(:disabled):focus {
+            border-color: transparent;
+        }
+
+        &:disabled {
+            border: none;
+            background-color: variables.$element-background-color-disabled;
+        }
     }
-    &_disabled {
-      color: rgba(0, 0, 0, .25);
-      background-color: $back-disabled;
-      cursor: not-allowed;
-      input {
-        cursor: inherit;
-      }
+
+    &_size {
+        &_lg {
+            #{$root}__container {
+                height: 56px;
+
+                &::before {
+                    border-radius: 16px;
+                    transform: translateX(-2%) translateY(-6.5%);
+                }
+            }
+
+            #{$root}__input {
+                border-radius: variables.$radius-large;
+                font-size: variables.$font-size-lg;
+            }
+        }
+
+        &_md {
+            #{$root}__container {
+                height: 46px;
+
+                &::before {
+                    border-radius: 16px;
+                }
+            }
+
+            #{$root}__input {
+                border-radius: variables.$radius-large;
+                font-size: variables.$font-size-base;
+            }
+        }
+
+        &_sm {
+            #{$root}__container {
+                height: variables.$input-height-sm;
+
+                &::before {
+                    border-radius: 12px;
+                    transform: translateX(-2%) translateY(-9.5%);
+                }
+            }
+
+            #{$root}__input {
+                border-radius: variables.$radius-small;
+                font-size: variables.$font-size-sm;
+            }
+        }
     }
-  }
-
-  &__input {
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__icon-eye {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding-right: $input-padding-x;
-
-    opacity: .5;
-    transition: opacity .1s ease-in;
-    &:hover {
-      opacity: 1;
+
+    &__security-bar {
+        position: relative;
+        width: 100%;
+        height: 4px;
+        border-radius: 4px;
+        margin-top: 8px;
+
+        background-color: $security-bar-background;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 0%;
+            height: 4px;
+            border-radius: 4px;
+            transition: width 1s ease-in-out;
+        }
+
+        &_danger::before {
+            width: 33%;
+            background-color: variables.$danger;
+        }
+
+        &_warning::before {
+            width: 66%;
+            background-color: variables.$warning;
+        }
+
+        &_success::before {
+            width: 100%;
+            background-color: variables.$success;
+        }
     }
 
-    & > span{
-      display: flex;
-      align-items: center;
+    &__icon-eye {
+        outline: none;
+        border: none;
+
+        cursor: pointer;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
     }
-  }
-
-  &__security-bar {
-    margin: 10px 0 0 ;
-    height: 4px;
-    width: 0;
-    border-radius: 3px;
-    transition: width 1s;
-
-    &_danger {
-      width: 33%;
-      background-color: $danger;
+
+    &__icon-eye {
+        width: 24px;
+        height: 24px;
+
+        svg {
+            path {
+                &:last-child {
+                    stroke: $eye-default-color;
+                }
+            }
+
+            circle {
+                stroke: $eye-default-color;
+            }
+        }
+
+        &:active {
+            svg {
+                path {
+                    fill: inherit;
+                    stroke: $eye-default-color;
+                }
+                circle {
+                    stroke: $eye-default-color;
+                }
+            }
+        }
+
+        &_viewHide {
+            svg path {
+                fill: $eye-default-color;
+            }
+        }
     }
-    &_warning {
-      width: 66%;
-      background-color: $warning;
+
+    &_filled {
+        #{$root}__icon-eye {
+            svg {
+                path {
+                    &:last-child {
+                        stroke: $eye-filled-color;
+                    }
+                }
+
+                circle { 
+                    stroke: $eye-filled-color;
+                }
+            }
+
+            &:active {
+                svg {
+                    path {
+                        stroke: $eye-filled-color;
+                    }
+                    circle {
+                        stroke: $eye-filled-color;
+                    }
+                }
+            }
+
+            &_viewHide {
+                svg path {
+                    fill: $eye-filled-color;
+                }
+            }
+        }
     }
-    &_success {
-      width: 100%;
-      background-color: $success;
+
+    &_disabled {
+        #{$root}__input {
+            cursor: not-allowed;
+        }
+
+        #{$root}__icon-eye {
+            pointer-events: none;
+        }
+
+        #{$root}__security-bar {
+            opacity: 0;
+            pointer-events: none;
+
+            &::before {
+                opacity: 0;
+            }
+        }
     }
-  }
-}
+}

package/form/RadioField/RadioFieldView.d.ts

@@ -0,0 +1,2 @@
+import { IRadioFieldViewProps } from '@steroidsjs/core/ui/form/RadioField/RadioField';
+export default function RadioFieldView(props: IRadioFieldViewProps): JSX.Element;

package/form/RadioField/RadioFieldView.js

@@ -0,0 +1,57 @@
+"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);
+    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 useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"));
+function RadioFieldView(props) {
+    var bem = (0, hooks_1.useBem)('RadioFieldView');
+    var id = (0, useUniqueId_1["default"])('radio');
+    return (React.createElement("div", { className: bem(bem.block({
+            hasError: !!props.errors,
+            size: props.size
+        }), props.className), onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem(bem.element('input', {
+                checked: props.checked
+            })), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+        React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
+            React.createElement("span", { className: bem.element('ellipse') }),
+            props.label)));
+}
+exports["default"] = RadioFieldView;

package/form/RadioField/RadioFieldView.scss

@@ -0,0 +1,228 @@
+@use "../../scss/variables";
+
+: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: variables.$font-family-nunito;
+    color: variables.$text-color;
+    line-height: 24px;
+    font-weight: 400;
+    font-size: variables.$font-size-sm;
+
+    &__ellipse {
+        position: absolute;
+        top: 50%;
+        left: 6px;
+        transform: translateY(-50%);
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background-color: variables.$primary;
+        border-radius: variables.$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: variables.$radius-circle;
+        border: 1px solid variables.$element-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 variables.$primary-light;
+        border-radius: variables.$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: variables.$element-border-color-hover;
+    }
+
+    &__input:not(:disabled):not(:checked):active + &__label::before {
+        border-color: variables.$primary;
+    }
+
+    &__input:not(:disabled):focus + &__label::after {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):focus + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:checked + &__label::before {
+        border: 1px solid variables.$primary;
+    }
+    &__input:checked + &__label &__ellipse {
+        opacity: 1;
+    }
+
+    &__input:not(:disabled):checked:hover + &__label::before {
+        border-color: variables.$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: variables.$primary-light;
+    }
+
+    &__input:not(:disabled):checked:active + &__label &__ellipse {
+        opacity: 1;
+        background-color: variables.$primary-light;
+    }
+
+    &__input:disabled + &__label {
+        cursor: not-allowed;
+        color: variables.$element-placeholder-color;
+
+        &::before {
+            cursor: not-allowed;
+            background-color: variables.$element-background-color-disabled;
+        }
+    }
+
+    &__input:disabled:checked + &__label::before {
+        cursor: not-allowed;
+
+        background-color: transparent;
+        border-color: variables.$element-background-color-disabled;
+    }
+
+    &__input:disabled:checked + &__label &__ellipse {
+        background-color: variables.$element-background-color-disabled;
+    }
+
+    &_hasError {
+        #{$root}__input:not(:disabled):not(:checked) + #{$root}__label {
+            color: variables.$danger;
+
+            &::before {
+                border-color: variables.$danger;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__label {
+                font-size: variables.$font-size-lg;
+                line-height: 24px;
+
+                &::before {
+                    width: 22px;
+                    height: 22px;
+                }
+
+                &::after {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        &_md {
+            #{$root}__label {
+                font-size: variables.$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: variables.$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,4 +1,2 @@
-/// <reference types="react" />
-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,25 @@ 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({
+        key: radioIndex,
+        id: "".concat(prefix, "_").concat(radio.id),
+        label: radio.label,
+        inputProps: {
+            name: "".concat(prefix, "_").concat(radio.id),
+            type: 'radio',
+            checked: props.selectedIds.includes(radio.id),
+            onChange: function () {
+                props.onItemSelect(radio.id);
+            },
+            disabled: props.disabled
+        },
+        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/RateField/RateFieldView.d.ts

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