@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/content/Calendar/CaptionElement.scss

@@ -2,7 +2,7 @@
   height: 45px;
   display: table-caption;
   padding: 0 10px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid $border-color;
 
   & > div {
     font-size: 14px;
@@ -22,7 +22,7 @@
     cursor: pointer;
     transition: color .1s ease-in;
     &:hover, &:active, &:focus {
-      color: #651fff;
+      color: $calendar-primary-color;
     }
   }
 
@@ -62,30 +62,34 @@
     left: 0;
     right: 0;
     bottom: 50px;
-    background-color: #fff;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 0fr 1fr;
-    gap: 0 0;
-    grid-template-areas:
-    "HeaderMonths HeaderMonths HeaderYears"
-    "Months1stCol Months2ndCol YearsCol";
+    background-color: $white;
+    display: flex;
 
     &_full-height {
       bottom: 0;
     }
 
+    &-inner {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 0fr 1fr;
+      gap: 0 0;
+      grid-template-areas:
+      "HeaderMonths HeaderMonths HeaderYears"
+      "Months1stCol Months2ndCol YearsCol";
+    }
+
     &-header {
       padding: 5px;
 
       text-align: center;
-      border-bottom: 1px solid #ccc;
-      background-color: rgba(#d8ccf7, .3);
+      border-bottom: 1px solid $border-color;
+      background-color: $calendar-primary-light-color;
 
       &_months {
         grid-area: HeaderMonths;
-        border-right: 1px solid #ccc;
+        border-right: 1px solid $border-color;
       }
       &_years {
         grid-area: HeaderYears;
@@ -93,7 +97,7 @@
     }
 
     &-column-months {
-      border-right: 1px solid #f1f1f1;
+      border-right: 1px solid $border-color;
 
       &_first {
         grid-area: Months1stCol;
@@ -103,6 +107,7 @@
       }
     }
     &-column-years {
+      height: 100%;
       grid-area: YearsCol;
       overflow: auto;
     }
@@ -112,12 +117,12 @@
       cursor: pointer;
 
       &_selected {
-        background-color: #d8ccf7;
+        background-color: $calendar-primary-light-color;
       }
 
       transition: background-color .1s ease-in;
       &:hover {
-        background-color: #f8f8f8;
+        background-color: $calendar-secondary-light-color;
       }
     }
   }

package/content/Card/CardView.d.ts

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

package/content/Card/CardView.js

@@ -5,19 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-require("./CardView.scss");
 function CardView(props) {
-    var _a;
     var bem = hooks_1.useBem('CardView');
-    return (react_1["default"].createElement("div", { className: bem.block((_a = {},
-            _a["large"] = props.size === 'large',
-            _a["medium"] = props.size === 'medium',
-            _a["small"] = props.size === 'small',
-            _a["square"] = props.shape === 'square',
-            _a["circle"] = props.shape === 'circle',
-            _a["border"] = props.bordered,
-            _a)) },
-        react_1["default"].createElement("div", { className: bem.element('title') }, props.title),
-        react_1["default"].createElement("div", { className: bem.element('content') }, props.children)));
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            orientation: props.orientation,
+            shape: props.shape,
+            color: props.color,
+            border: props.borderColor
+        }), props.className), style: props.style },
+        props.header && (react_1["default"].createElement("div", { className: bem.element('header') }, props.header)),
+        props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
+            react_1["default"].createElement("img", { src: props.cover, alt: 'cover-img' }))),
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
+            react_1["default"].createElement("div", { className: bem.element('content-inner') },
+                props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
+                props.children)),
+        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
 }
 exports["default"] = CardView;

package/content/Card/CardView.scss

@@ -1,42 +1,154 @@
-.CardView{
-    background: #fff;
+.CardView {
+    $root: &;
+
+    background: $white;
     box-sizing: border-box;
+    height: fit-content;
     position: relative;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    white-space: nowrap;
-    vertical-align: center;
+
+    &_orientation {
+        &_vertical {
+            font-size: $card-font-size;
+        }
+
+        &_vertical-reverse {
+            font-size: $card-font-size;
+            flex-direction: column-reverse;
+        }
+
+        &_horizontal {
+            flex-direction: row;
+
+            #{$root}__title{
+                font-size: $card-horizontal-header-font-size;
+            }
+
+            #{$root}__content{
+                flex-basis: 50%;
+                font-size: $card-horizontal-font-size;
+            }
+
+            #{$root}__cover{
+                flex-basis: 50%;
+            }
+        }
+    }
+
+    @each $color, $value in $color-themes {
+        &_color_#{$color} {
+            @include card-theme($root, $value)
+        }
+    }
+
     &_border {
-        border: 1px solid #f0f0f0;
+        &_default {
+            border: 1px solid $border-default;
+        }
+
+        @each $color, $value in $color-themes {
+            &_#{$color} {
+                @include card-border-theme($root, $value)
+            }
+        }
+
+        &_light {
+            #{$root}__content {
+                color: $dark;
+            }
+        }
     }
-    &_square {
-        border-radius: none;
+
+    &_shape {
+        &_square {
+            border-radius: unset;
+        }
+
+        &_circle {
+            border-radius: $card-border-radius;
+        }
     }
-    &_circle {
-        border-radius: 3px;
+
+    &__content-inner {
+        display: grid;
+        grid-row-gap: 16px;
     }
-    &_large {
-        width: 40px;
+
+    &__children {
+        font-size: $card-children-font-size;
+        line-height: $card-children-line-height;
+        box-sizing: border-box;
+        width: 100%;
+        word-break: break-all;
     }
-    &_medium {
-        font-size: 14px;
-        width: 300px;
-        
+
+    &__header {
+        background: $card-header-background;
+        padding: 20px;
+        border-bottom: 1px solid $border-default;
+        font-weight: bold;
+        font-size: $card-header-font-size;
+        line-height: $card-header-line-height;
+        word-break: break-all;
     }
-    &_small {
-        width: 24px;
-        line-height: 24px;
+
+    &__footer {
+        background: $card-header-background;
+        padding: 20px;
+        border-top: 1px solid $border-default;
+        font-weight: bold;
+        font-size: $card-header-font-size;
+        line-height: $card-header-line-height;
+        word-break: break-all;
     }
+
+    &__cover {
+        overflow: hidden;
+    }
+
     &__title{
         display: flex;
         align-items: center;
-        padding: 0 24px;
-        min-height: 48px;
-        border: 1px solid #f0f0f0;
-        
+        font-weight: bold;
+        font-size: $card-title-font-size;
+        line-height: $card-title-line-height;
+        border-bottom: 8px;
+        margin-bottom: 8px;
     }
+
     &__content{
-        padding: 24px;
-        min-height: 48px;
+        padding: 20px;
+    }
+
+    button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 20px;
+        position: static;
+        width: 140px;
+        height: 28px;
+        border: none;
+        color: $white;
+        background: $primary;
+        border-radius: $card-button-border-radius;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+    a {
+        color: $primary;
+        font-size: $card-link-font-size;
+    }
+    p{
+        margin: 0;
     }
-}
+}

package/content/Collapse/CollapseItemView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICollapseItemViewProps } from '@steroidsjs/core/ui/content/Collapse/CollapseItem';
+export default function CollapseItemView(props: ICollapseItemViewProps): JSX.Element;

package/content/Collapse/CollapseItemView.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function CollapseItemView(props) {
+    var bem = hooks_1.useBem('CollapseItemView');
+    React.useEffect(function () {
+        if (props.isAccordion) {
+            props.toggleAccordion(props.activeKey - 1);
+        }
+        else {
+            props.toggleCollapse(props.activeKey - 1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.activeKey]);
+    return (React.createElement("div", { className: bem(bem.block({
+            disable: props.disabled,
+            borderless: props.borderless
+        }), props.className), style: props.style },
+        React.createElement("div", { className: bem.element('header-container', { revert: props.iconPosition === 'left' }), onClick: !props.disabled
+                ? function () {
+                    props.isAccordion
+                        ? props.toggleAccordion(props.childIndex)
+                        : props.toggleCollapse(props.childIndex);
+                }
+                : null },
+            React.createElement("div", { className: bem.element('title-container') },
+                React.createElement("p", null, props.title)),
+            React.createElement("div", { className: bem.element('icon-wrapper', { not_visible: !props.showIcon }) }, props.icon
+                ? (typeof props.icon === 'string' ? React.createElement(Icon_1["default"], { name: props.icon }) : props.icon)
+                : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
+                        active: !props.disabled && props.isShowMore,
+                        disable_cursor: !props.showIcon
+                    }), name: "chevron-down" })))),
+        React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
+}
+exports["default"] = CollapseItemView;

package/content/Collapse/CollapseItemView.scss

@@ -0,0 +1,88 @@
+.CollapseItemView {
+  display: grid;
+  align-items: center;
+
+  background-color: #fff;
+  border-bottom: 1px solid rgba(#000, .1);
+  box-shadow: 0 0 3px 0 rgba(34, 60, 80, 0.2);
+  min-height: 48px;
+  width: 100%;
+  height: fit-content;
+
+  &_disable {
+    opacity: .4;
+    background-color: #d7d7d7;
+    color: rgba(#212529, .7);
+
+    .IconView {
+      svg {
+        fill-opacity: .6;
+      }
+    }
+  }
+
+  &_borderless {
+    border-bottom: unset;
+    box-shadow: unset;
+  }
+
+  &_active {
+    margin-bottom: 16px;
+  }
+
+  p {
+    margin: 0;
+  };
+
+  &__icon {
+    transform: rotate(0deg);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &_active {
+    transform: rotate(180deg);
+    }
+
+    &_disable_cursor {
+      cursor: auto;
+    }
+  }
+
+  &__header-container {
+    display: flex;
+    &_revert {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__title-container {
+    width: 100%;
+    padding: 0 16px;
+    align-self: center;
+  }
+
+  &__icon-wrapper {
+    width: 48px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_not_visible {
+      width: 0;
+      opacity: 0;
+    }
+  }
+
+  &__content {
+    transition: all 200ms ease;
+    overflow: hidden;
+    max-height: 0;
+    padding: 0 16px;
+
+    &_visible {
+      max-height: 1024px;
+      padding: 0 16px 8px 16px
+    }
+  }
+}

package/content/Collapse/CollapseView.d.ts

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

package/content/Collapse/CollapseView.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function CollapseView(props) {
+    var bem = hooks_1.useBem('CollapseView');
+    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.children));
+}
+exports["default"] = CollapseView;

package/content/Collapse/CollapseView.scss

@@ -0,0 +1,15 @@
+.CollapseView {
+  height: fit-content;
+
+  display: grid;
+  grid-gap: 0;
+
+  & > :first-child {
+    border-radius: 4px 4px 0 0;
+  }
+
+  & > :last-child {
+    border-radius: 0 0 4px 4px;
+    border: unset;
+  }
+}

package/content/Detail/DetailView.d.ts

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

package/content/Detail/DetailView.js

@@ -0,0 +1,37 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var Detail_1 = require("@steroidsjs/core/ui/content/Detail/Detail");
+var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
+function DetailView(props) {
+    var bem = hooks_1.useBem('DetailView');
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), ref: props.resizedNodeRef },
+        (props.title || props.controls) && (react_1["default"].createElement("div", { className: bem.element('header') },
+            props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
+            props.controls && (react_1["default"].createElement(Controls_1["default"], { items: props.controls, className: bem.element('controls') })))),
+        react_1["default"].createElement("div", { className: bem.element('table-container') },
+            react_1["default"].createElement("table", { className: bem.element('table') },
+                react_1["default"].createElement("tbody", null, props.rows.map(function (row, rowIndex) {
+                    if (props.layout === Detail_1.DetailLayoutEnum.Vertical) {
+                        return (react_1["default"].createElement(react_1["default"].Fragment, { key: rowIndex },
+                            react_1["default"].createElement("tr", { className: bem.element('row') }, row.map(function (cell, cellIndex) { return (react_1["default"].createElement("th", { key: cellIndex, colSpan: cell.colspan, className: bem(bem.element('label', {
+                                    size: props.size
+                                }), cell.labelClassName) }, cell.label)); })),
+                            react_1["default"].createElement("tr", { className: bem.element('row') }, row.map(function (cell, cellIndex) { return (react_1["default"].createElement("td", { key: cellIndex, colSpan: cell.colspan, className: bem(bem.element('value', {
+                                    size: props.size
+                                }), cell.contentClassName) }, cell.value)); }))));
+                    }
+                    return (react_1["default"].createElement("tr", { key: rowIndex, className: bem.element('row') }, row.map(function (cell, cellIndex) { return (react_1["default"].createElement(react_1["default"].Fragment, { key: cellIndex },
+                        react_1["default"].createElement("th", { colSpan: Detail_1.constants.TABLE_HEAD_COLSPAN, className: bem(bem.element('label', {
+                                size: props.size
+                            }), cell.labelClassName) }, cell.label),
+                        react_1["default"].createElement("td", { colSpan: cell.colspan, className: bem(bem.element('value', {
+                                size: props.size
+                            }), cell.contentClassName) }, cell.value))); })));
+                }))))));
+}
+exports["default"] = DetailView;

package/content/Detail/DetailView.scss

@@ -0,0 +1,66 @@
+.DetailView {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 32px;
+  }
+
+  &__title {
+    color: #343a40;
+    font-size: 28px;
+    line-height: 34px;
+    font-weight: 800;
+  }
+
+  &__controls {
+    margin-left: auto;
+  }
+
+  &__table-container {
+    display: flex;
+    border-radius: 10px;
+    border: 1px solid #cccccc;
+    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
+    overflow: hidden;
+  }
+
+  &__table {
+    background: #ffffff;
+    height: 100%;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: none;
+  }
+
+  &__row:not(:last-child) {
+    border-bottom: 1px solid #cccccc;
+  }
+
+  &__label,
+  &__value {
+    &:not(:last-child) {
+      border-right: 1px solid #cccccc;
+    }
+
+    padding: 14px 16px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 140%;
+
+    &_size_md {
+      padding: 18px 20px;
+      font-size: 16px;
+    }
+
+    &_size_lg {
+      padding: 22px 24px;
+      font-size: 18px;
+    }
+  }
+
+  &__label {
+    background: #f8f8f8;
+  }
+}

package/content/DropDown/DropDownView.scss

@@ -3,8 +3,7 @@ $gap: 12px;
 .DropDownView {
   z-index: 1000;
   position: absolute;
-  top: 0;
-  left: 0;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

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

package/form/AutoCompleteField/AutoCompleteFieldView.js

@@ -32,6 +32,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+require("./AutoCompleteFieldView.scss");
 function AutoCompleteFieldView(props) {
     var bem = hooks_1.useBem('AutoCompleteFieldView');
     return (React.createElement("div", { ref: props.forwardedRef, className: bem.block({ size: props.size }) },