@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.21

package/content/Avatar/AvatarView.scss

@@ -1,103 +1,157 @@
+:root {
+    --border-width-small: 1px;
+    --border-width-medium: 2px;
+    --border-width-large: 2px;
+    --border-width: var(--border-width-large);
+
+    --status-border-width-small: 1px;
+    --status-border-width-medium: 2px;
+    --status-border-width-large: 4px;
+    --status-border-width: var(--status-border-width-large);
+
+    --status-size-small: 8px;
+    --status-size-medium: 12px;
+    --status-size-large: 14px;
+    --status-size: var(--status-size-x-large);
+}
 
-.AvatarView {
-  $root: &;
-
-  display: inline-block;
-  position: relative;
-
-  &_size {
-    &_x-large {
-      #{$root}__body {
-        height: $avatar-x-large-size;
-        width: $avatar-x-large-size;
-        line-height: $avatar-x-large-size;
-        font-size: $avatar-x-large-font-size;
-      }
+@mixin border($background) {
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 53%;
+        border-radius: 100%;
+        border: var(--border-width) solid transparent;
+        background: $background border-box;
+        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
     }
+}
 
-    &_large {
-      #{$root}__body {
-        height: $avatar-large-size;
-        width: $avatar-large-size;
-        line-height: $avatar-large-size;
-        font-size: $avatar-large-font-size;
-      }
-    }
+.AvatarView {
+    $root: &;
 
-    &_middle {
-      #{$root}__body {
-        height: $avatar-middle-size;
-        width: $avatar-middle-size;
-        line-height: $avatar-middle-size;
-        font-size: $avatar-middle-font-size;
-      }
-    }
+    display: inline-block;
+    position: relative;
+    aspect-ratio: 1;
 
-    &_small {
-      #{$root}__body {
-        height: $avatar-small-size;
-        width: $avatar-small-size;
-        line-height: $avatar-small-size;
-        font-size: $avatar-small-font-size;
-      }
+    &_has-custom-status {
+        --status-size: 25%;
+        --status-border-width: 2px;
     }
-  }
 
-  &_shape {
-    &_square {
-      #{$root}__body{
-        border-radius: unset;
-      }
+    &_size {
+
+        &_large {
+            #{$root}__body {
+                height: 64px;
+                width: 64px;
+                line-height: 64px;
+                font-size: $font-size-base;
+            }
+            --border-width: var(--border-width-large);
+            --status-border-width: var(--status-border-width-large);
+            --status-size: var(--status-size-large);
+        }
+
+        &_middle {
+            #{$root}__body {
+                height: 46px;
+                width: 46px;
+                line-height: 46px;
+                font-size: $font-size-sm;
+            }
+            --border-width: var(--border-width-medium);
+            --status-border-width: var(--status-border-width-medium);
+            --status-size: var(--status-size-medium);
+        }
+
+        &_small {
+            #{$root}__body {
+                height: 28px;
+                width: 28px;
+                line-height: 28px;
+                font-size: $font-size-xs;
+            }
+            --border-width: var(--border-width-small);
+            --status-border-width: var(--status-border-width-small);
+            --status-size: var(--status-size-small);
+        }
     }
 
-    &_circle {
-      #{$root}__body{
-        border-radius: 50%;
-      }
+    &_shape {
+        &_square {
+            #{$root}__body {
+                border-radius: unset;
+            }
+        }
+
+        &_circle {
+            #{$root}__body {
+                border-radius: 50%;
+            }
+        }
     }
-  }
 
-  &_has-image {
-    #{$root}__body{
-      background-color: unset;
+    &_has-image {
+        #{$root}__body {
+            background-color: unset;
+        }
     }
-  }
-
-  &_has-status {
-    ::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 25%;
-      height: 25%;
-      z-index: 10;
-
-      color: $avatar-status-color;
-      font-size: 6px;
-
-      border-radius: 50%;
-      background-color: $avatar-status-color;
-      border: $avatar-status-border;
-    }
-  }
 
-  &__body {
-    display: inline-block;
-    overflow: hidden;
+    &_has-status {
+        &::after {
+            content: "";
+            position: absolute;
+            box-sizing: content-box;
+            right: -6%;
+            bottom: -6%;
+            width: var(--status-size);
+            height: var(--status-size);
+            z-index: 10;
+
+            color: $success;
 
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
+            border-radius: $radius-circle;
+            background-color: $success;
 
-    color: $avatar-text-color;
-    background-color: $avatar-background-color;
+            border: var(--status-border-width) solid $white;
+        }
+    }
+
+    &_has-border {
+        @include border($gradient-blue);
+    }
 
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+    &__body {
+        display: inline-block;
+        overflow: hidden;
+
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+
+        color: $white;
+        background: $gradient-blue border-box;
+        border: 1px solid #fff;
+
+        span {
+            display: block;
+            font-family: $font-family-nunito;
+            font-weight: 800;
+            letter-spacing: 0.1em;
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
-  }
 }

package/content/Badge/BadgeView.d.ts

@@ -0,0 +1,3 @@
+import { IBadgeViewProps } from '@steroidsjs/core/ui/content/Badge/Badge';
+import './BadgeView.scss';
+export default function BadgeView(props: IBadgeViewProps): JSX.Element;

package/content/Badge/BadgeView.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+require("./BadgeView.scss");
+function BadgeView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('BadgeView');
+    return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
+            _a[props.type] = !!props.type,
+            _a[props.size] = !!props.size,
+            _a[props.roundingStyle] = !!props.roundingStyle,
+            _a['has-counter'] = !!props.counter,
+            _a)), props.className), style: props.style },
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                react_1["default"].createElement("span", { className: bem.element('message') }, props.message),
+                props.counter && (react_1["default"].createElement("span", { className: bem.element('counter') }, typeof props.counter === 'object' && (react_1["default"].createElement("span", { className: bem.element('counter-content') }, props.counter.content)))),
+                props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'badge-close' })))))));
+}
+exports["default"] = BadgeView;

package/content/Badge/BadgeView.scss

@@ -0,0 +1,107 @@
+@import "../../scss/variables";
+
+.BadgeView {
+    $root: &;
+
+    display: inline-block;
+    position: relative;
+    width: fit-content;
+
+    font-family: $font-family-nunito;
+    color: $white;
+    font-weight: $font-weight-sm;
+
+    &__content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        #{$root}__message {
+            margin-right: 4px;
+        }
+    }
+
+    $badge-types: (
+        "primary": $primary,
+        "secondary": $secondary,
+        "success": $success,
+        "danger": $danger,
+        "warning": $warning,
+        "info": $info,
+    );
+
+    @each $type, $color in $badge-types {
+        &_#{$type} {
+            background-color: $color;
+
+            @if ($type == "warning" or $type == "info") {
+                color: $text-color;
+
+                #{$root}__close {
+                    svg {
+                        path {
+                            stroke: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_squarer {
+        border-radius: $radius-small;
+    }
+
+    &_rounder {
+        border-radius: $radius-xlarge;
+    }
+
+    &_large {
+        padding: 4px 8px;
+    }
+
+    &_medium {
+        padding: 2px 8px;
+    }
+
+    &_small {
+        padding: 0 8px;
+    }
+
+    &_has-counter {
+        border: 1px solid #e9e9e9;
+        border-radius: 100px;
+
+        background: $light-gray;
+        color: $text-color;
+        padding: 4px 12px;
+
+        #{$root}__message {
+            margin-right: 8px;
+        }
+
+        #{$root}__counter {
+            margin-right: 8px;
+            width: 18px;
+            background-color: $white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: $radius-circle;
+        }
+
+        #{$root}__counter-content { 
+            font-weight: $font-weight-sm;
+            font-size: $font-size-xs;
+            line-height: 16px;
+        }
+
+        #{$root}__close {
+            svg {
+                path {
+                    stroke: #000;
+                }
+            }
+        }
+    }
+}

package/content/Calendar/CalendarView.d.ts

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

package/content/Calendar/CaptionElement.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CaptionElementProps } from 'react-day-picker/types/Props';
 import { ICalendarViewProps } from '@steroidsjs/core/ui/content/Calendar/Calendar';
 interface ICaptionElementProps extends CaptionElementProps, Pick<ICalendarViewProps, 'fromYear' | 'toYear' | 'isCaptionPanelVisible' | 'toggleCaptionPanel'> {

package/content/Calendar/CaptionElement.js

@@ -29,7 +29,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 function CaptionElement(props) {
     var bem = (0, hooks_1.useBem)('CaptionElement');

package/content/Calendar/CaptionElement.scss

@@ -1,3 +1,5 @@
+$border-color: gray;
+
 .CaptionElement {
   height: 45px;
   display: table-caption;

package/content/Card/CardView.d.ts

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

package/content/Detail/DetailView.d.ts

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

package/content/DropDown/DropDownView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IDropDownViewProps } from '@steroidsjs/core/ui/content/DropDown/DropDown';
 import './DropDownView.scss';
 export default function DropDownView(props: IDropDownViewProps): JSX.Element;

package/content/DropDown/DropDownView.js

@@ -42,9 +42,12 @@ function DropDownView(props) {
     var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
-    var content = props.content();
-    if ((0, isFunction_1["default"])(content)) {
-        content = ui.renderView(content, contentProps);
+    var content;
+    if (props.content) {
+        content = props.content();
+        if ((0, isFunction_1["default"])(content)) {
+            content = ui.renderView(content, contentProps);
+        }
     }
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
                 show: props.isComponentVisible

package/content/DropDown/DropDownView.scss

@@ -1,31 +1,200 @@
+@import "../../scss/variables/";
+
+:root {
+    --dropdown-background: #fff;
+    --dropdown-triangle-border: #eef1f2;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23EEF1F2'/%3E%3C/svg%3E%0A");
+}
+
+html[data-theme="dark"] {
+    --dropdown-background: #4e4f57;
+    --dropdown-triangle-border: transparent;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
+}
+
+$dropdown-background: var(--dropdown-background);
+$dropdown-triangle-border: var(--triangle-border);
+$dropdown-triangle-svg: var(--dropdown-triangle-svg);
+
 $gap: 12px;
 
+%triangle {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 11px;
+    z-index: 2;
+    background-image: $dropdown-triangle-svg;
+}
+
+%borderShaper {
+    content: "";
+    position: absolute;
+    z-index: 3;
+
+    width: 16px;
+    height: 1px;
+    background-color: $dropdown-background;
+    border-left: 2px solid $dropdown-triangle-border;
+    border-right: 2px solid $dropdown-triangle-border;
+}
+
+@mixin drop($edge, $padding) {
+    @if ($edge == "top") {
+        &::before {
+            @extend %triangle;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+    } @else if ($edge == "bottom") {
+        &::before {
+            @extend %triangle;
+
+            top: 0;
+            left: $padding;
+            top: -11px;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            transform: translateX(-50%);
+            top: -1px;
+            left: $padding;
+        }
+    } @else if($edge == "left") {
+        &::before {
+            @extend %triangle;
+
+            left: 100%;
+            top: $padding;
+            transform: translateX(-22.5%) rotate(-90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            left: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, -7.5px) ;
+        }
+    }
+    @else if($edge == "right") { 
+        &::before {
+            @extend %triangle;
+
+            right: 100%;
+            top: $padding;
+            transform: translateX(22.5%) rotate(90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            right: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, 7.5px) ;
+        }
+    }
+}
+
 .DropDownView {
-  z-index: 1000;
-  position: absolute;
-
-  transform: translate(0,0);
-  opacity: 0;
-  transition: opacity .15s ease-in, transform .15s ease-in;
-
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
-
-  &_show {
-    opacity: 1;
-  }
-  &_position-top, &_position-topLeft, &_position-topRight {
-    transform: translateY(-$gap);
-  }
-  &_position-bottom, &_position-bottomLeft, &_position-bottomRight {
-    transform: translateY($gap);
-  }
-  &_position-left, &_position-leftTop, &_position-leftBottom {
-    transform: translateX(-$gap);
-  }
-  &_position-right, &_position-rightTop, &_position-rightBottom{
-    transform: translateX($gap);
-  }
+    $root: &;
+
+    z-index: 1000;
+    position: absolute;
+
+    transform: translate(0, 0);
+    opacity: 0;
+    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+
+    z-index: 4;
+    width: 200px;
+    padding: 12px;
+    border-radius: $radius-large;
+    background-color: $dropdown-background;
+    border: 1px solid $gray;
+
+    &_show {
+        opacity: 1;
+    }
+    &_position-top,
+    &_position-topLeft,
+    &_position-topRight {
+        transform: translateY(-$gap);
+    }
+    &_position-bottom,
+    &_position-bottomLeft,
+    &_position-bottomRight {
+        transform: translateY($gap);
+    }
+    &_position-left,
+    &_position-leftTop,
+    &_position-leftBottom {
+        transform: translateX(-$gap);
+    }
+    &_position-right,
+    &_position-rightTop,
+    &_position-rightBottom {
+        transform: translateX($gap);
+    }
+
+    &_position-top {
+        @include drop("top", 50%);
+    }
+
+    &_position-topLeft {
+        @include drop("top", 15%);
+    }
+
+    &_position-topRight {
+        @include drop("top", 85%);
+    }
+
+    &_position-bottom {
+        @include drop("bottom", 50%);
+    }
+
+    &_position-bottomLeft {
+        @include drop("bottom", 15%);
+    }
+
+    &_position-bottomRight {
+        @include drop("bottom", 85%);
+    }
+
+    &_position-left {
+        @include drop("left", 46.5%);
+    }
+
+    &_position-leftTop {
+        @include drop("left", 12.5%)
+    }
+
+    &_position-leftBottom {
+        @include drop("left", 80%)
+    }
+
+    &_position-right {
+        @include drop("right", 46.5%);
+    }
+
+    &_position-rightTop {
+        @include drop("right", 12.5%);
+    }
+
+    &_position-rightBottom {
+        @include drop("right", 80%);
+    }
 }

package/{icon → content}/Icon/IconView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-import { IIconViewProps } from '@steroidsjs/core/ui/icon/Icon/Icon';
+import { IIconViewProps } from '@steroidsjs/core/ui/content/Icon/Icon';
 export default function IconView(props: IIconViewProps & IBemHocOutput): JSX.Element;

package/crud/Crud/CrudView.d.ts

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

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IAutoCompleteFieldViewProps } from '@steroidsjs/core/ui/form/AutoCompleteField/AutoCompleteField';
 import './AutoCompleteFieldView.scss';