@steroidsjs/bootstrap 3.0.0-beta.56 → 3.0.0-beta.57

package/content/Calendar/CalendarView.js

@@ -46,7 +46,7 @@ var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
-    var isRange = !!selectedDates[1];
+    var isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
         var to = selectedDates[1];

package/content/Calendar/CalendarView.scss

@@ -11,6 +11,19 @@ html[data-theme="dark"] {
 $day-background-color-hover: var(--day-background-color-hover);
 $calendar-border-color: var(--calendar-border-color);
 
+@mixin calendar-button () {
+    padding: 5px 12.5px;
+    border-radius: $radius-small;
+    border: 1px solid $gray;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    cursor: pointer;
+    color: $text-color;
+    font-size: $font-size-sm;
+    line-height: $line-height-lg;
+}
+
 .CalendarView {
     $root: &;
     position: relative;
@@ -106,8 +119,37 @@ $calendar-border-color: var(--calendar-border-color);
             z-index: 1;
         }
 
+        &::after {
+            position: absolute;
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-width: 4px;
+            border-style: solid;
+            border-radius: 16px;
+            border-color: $day-background-color-hover;
+            transform: translate(-4px, -4px);
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+            z-index: 9;
+        }
+
+        &:focus { 
+            outline: none;
+        }
+        
+        &:focus:not(:active)::after {
+            opacity: 1;
+        }
+
         &--outside {
             color: $placeholder-color;
+
         }
 
         &--today {
@@ -133,16 +175,7 @@ $calendar-border-color: var(--calendar-border-color);
     }
 
     .DayPicker-TodayButton {
-        padding: 5px 12.5px;
-        border-radius: $radius-small;
-        border: 1px solid $gray;
-        background-color: transparent;
-        background-image: none;
-        box-shadow: none;
-        cursor: pointer;
-        color: $text-color;
-        font-size: $font-size-sm;
-        line-height: $line-height-lg;
+        @include calendar-button();
     }
 
     // Days selection
@@ -167,7 +200,7 @@ $calendar-border-color: var(--calendar-border-color);
         background-color: transparent;
 
         .CalendarView__day {
-            color: $text-color;
+            transition: background-color 150ms ease-in-out;
         }
     }
 
@@ -189,14 +222,14 @@ $calendar-border-color: var(--calendar-border-color);
                 color: $white;
 
                 #{$root}__day {
-                    background-color: $calendar-primary-color;
-                    box-shadow: $calendar-selected-shadow;
+                    background-color: $primary;
                 }
 
                 &::before {
-                    background-color: $calendar-primary-light-color;
-                    width: 10px;
-                    transform: translate(25px, -50%);
+                    width: 50px;
+                    height: 42px;
+                    background-color: $primary-light;
+                    border-radius: 16px 0px 0px 16px;
                 }
             }
 
@@ -205,21 +238,34 @@ $calendar-border-color: var(--calendar-border-color);
 
                 #{$root}__day {
                     background-color: $calendar-primary-color;
-                    box-shadow: $calendar-selected-shadow;
                 }
 
                 &::before {
-                    background-color: $calendar-primary-light-color;
-                    width: 10px;
+                    width: 46px;
+                    height: 42px;
+                    background-color: $primary-light;
+                    border-radius: 0px 16px 16px 0px;
                 }
             }
 
             &--inRange {
                 &::before {
-                    background-color: $calendar-primary-light-color;
+                    background-color: $primary-light;
+                    width: 50px;
+                    height: 42px;
                 }
             }
 
+            //Today in range
+            &--inRange.DayPicker-Day--selected.DayPicker-Day--today .CalendarView__day {
+                color: $primary;
+            }
+
+            &--inRange:hover .CalendarView__day {
+                transition: background-color 150ms ease-in-out;
+                background-color: $day-background-color-hover;
+            }
+
             &--outRange {
                 pointer-events: none;
                 &::before {

package/content/Calendar/CaptionElement.scss

@@ -1,17 +1,25 @@
 :root {
     --caption-arrow-background-color: #f1f5f7;
     --caption-arrow-color: #323232;
+    --caption-header-month-background-color: #f1f5f7;
+    --separator-background-color: rgba(0, 0, 0, 0.1);
 }
 
 html[data-theme="dark"] {
     --caption-arrow-background-color: #323232;
     --caption-arrow-color: #ffffff;
+    --caption-header-month-background-color: #333646;
+    --separator-background-color: rgba(255, 255, 255, 0.1);
 }
 
 $caption-arrow-background-color: var(--caption-arrow-background-color);
 $caption-arrow-color: var(--caption-arrow-color);
+$caption-header-month-background-color: var(--caption-header-month-background-color);
+$separator-background-color: var(--separator-background-color);
 
 .CaptionElement {
+    $root: &;
+
     height: 24px;
     width: 100%;
     display: flex;
@@ -24,7 +32,6 @@ $caption-arrow-color: var(--caption-arrow-color);
         display: flex;
         align-items: center;
 
-
         &-icons {
             display: flex;
             flex-flow: row nowrap;
@@ -79,7 +86,8 @@ $caption-arrow-color: var(--caption-arrow-color);
 
     // Panel changing Month/Year
     &__panel {
-        border-radius: $radius-large;
+        width: 100%;
+        height: 100%;
         overflow: hidden;
         z-index: 10;
         position: absolute;
@@ -89,6 +97,7 @@ $caption-arrow-color: var(--caption-arrow-color);
         bottom: 50px;
         background-color: $element-background-color;
         margin-bottom: 12px;
+        max-height: 294px;
 
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -107,41 +116,65 @@ $caption-arrow-color: var(--caption-arrow-color);
         padding: 5px;
 
         text-align: center;
-        border-bottom: 1px solid gray;
-        background-color: $primary-light;
+        background-color: $caption-header-month-background-color;
+        font-weight: $font-weight-lg;
 
         &_months {
+            position: relative;
             grid-area: HeaderMonths;
-            border-right: 1px solid gray;
+            border-radius: 8px 0px 0px 8px;
+
+            //Separator
+            &::before {
+                display: block;
+                content: "";
+                position: absolute;
+                width: 1px;
+                height: 20px;
+                top: 50%;
+                right: 0;
+                background-color: $separator-background-color;
+                transform: translateY(-50%);
+            }
         }
 
         &_years {
             grid-area: HeaderYears;
+            border-radius: 0px 8px 8px 0px;
         }
     }
 
-    &__panel-column-months {
-        border-right: 1px solid gray;
+    &__panel-column {
+        &-months {
+            border-right: 1px solid $separator-background-color;
 
-        &_first {
-            grid-area: Months1stCol;
-        }
+            &_first {
+                grid-area: Months1stCol;
+            }
 
-        &_second {
-            grid-area: Months2ndCol;
+            &_second {
+                grid-area: Months2ndCol;
+            }
         }
-    }
 
-    &__panel-column-years {
-        grid-area: YearsCol;
-        @include scrollWrapper(278px, 0, $scroll-thumb-color, $scroll-track-color);
+        &-years {
+            grid-area: YearsCol;
+            @include scrollWrapper(294px, 0, $scroll-thumb-color, $scroll-track-color);
+        }
     }
 
     &__panel-cell {
+        &:first-child{
+            margin-top: 10px;
+        }
+        display: block;
+        width: fit-content;
         background-color: $element-background-color;
-        padding: 5px 15px;
+        padding: 4px 8px;
         cursor: pointer;
         transition: background-color 0.1s ease-in;
+        margin: 0 auto;
+        border-radius: $radius-large;
 
         &_selected {
             background-color: $primary-light;
@@ -150,5 +183,9 @@ $caption-arrow-color: var(--caption-arrow-color);
         &:hover {
             background-color: $primary-light;
         }
+
+        #{$root}__cell-value {
+            text-align: center;
+        }
     }
 }

package/content/{CopyToClipBoard/CopyToClipBoardView.d.ts → CopyToClipboard/CopyToClipboard.d.ts}

@@ -1,3 +1,3 @@
 import { ICopyToClipboardViewProps } from '@steroidsjs/core/ui/content/CopyToClipboard/CopyToClipboard';
-declare function CopyToClipBoardView(props: ICopyToClipboardViewProps): JSX.Element;
-export default CopyToClipBoardView;
+declare function CopyToClipboardView(props: ICopyToClipboardViewProps): JSX.Element;
+export default CopyToClipboardView;

package/content/{CopyToClipBoard/CopyToClipBoardView.js → CopyToClipboard/CopyToClipboard.js}

@@ -6,8 +6,8 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
-function CopyToClipBoardView(props) {
-    var bem = (0, useBem_1["default"])('CopyToClipBoardView');
+function CopyToClipboardView(props) {
+    var bem = (0, useBem_1["default"])('CopyToClipboardView');
     return (react_1["default"].createElement("div", { className: bem(bem.block({
             disabled: props.disabled
         })), onClick: props.onClick },
@@ -16,4 +16,4 @@ function CopyToClipBoardView(props) {
             className: bem.element('icon')
         })));
 }
-exports["default"] = CopyToClipBoardView;
+exports["default"] = CopyToClipboardView;

package/content/CopyToClipboard/CopyToClipboard.scss

@@ -0,0 +1,41 @@
+:root { 
+  --copy-icon-stroke: #323232;
+  --copy-disabled-stroke: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+  --copy-icon-stroke: #FFFFFF;
+  --copy-disabled-stroke: rgba(255, 255, 255, 0.1);
+}
+
+$copy-icon-stroke: var(--copy-icon-stroke);
+$copy-disabled-stroke: var(--copy-disabled-stroke);
+
+.CopyToClipboardView {
+  display: inline-block;
+  cursor: pointer;
+
+  .IconView {
+      width: 24px;
+      height: 24px;
+  }
+
+  svg {
+      width: 100%;
+      height: 100%;
+
+      path {
+          stroke: $copy-icon-stroke;
+      }
+  }
+
+  &_disabled { 
+      cursor: not-allowed;
+
+      svg { 
+          path {
+              stroke: $copy-disabled-stroke;
+          }
+      }
+  }
+}

package/form/DateField/DateFieldView.js

@@ -50,11 +50,12 @@ function DateFieldView(props) {
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,
-                'has-icon': !!props.icon,
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, className: bem(bem.element('input'), props.inputProps.className) })),
+                React.createElement("input", __assign({}, props.inputProps, { onChange: function (e) {
+                        var value = props.inputProps.onChange(e.target.value);
+                    }, className: bem(bem.element('input'), props.inputProps.className) })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/DateField/DateFieldView.scss

@@ -1,165 +1,14 @@
-:root {
-    --date-icon-default-color: #cbd5db;
-    --date-icon-close-default-color: #323232;
-    --date-icon-disabled-color: rgba(0, 0, 0, 0.1);
-}
-
-html[data-theme="dark"] {
-    --date-icon-default-color: #5b5c6b;
-    --date-icon-close-default-color: #ffffff;
-    --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
-}
-
-$date-icon-default-color: var(--date-icon-default-color);
-$date-icon-close-default-color: var(--date-icon-close-default-color);
-$date-icon-disabled-color: var(--date-icon-disabled-color);
-
 .DateFieldView {
     $root: &;
     position: relative;
 
-    &__input {
-        position: relative;
-        width: 100%;
-        border: 1px solid $border-color;
-        color: $text-color;
-        font-size: inherit;
-        line-height: $line-height-lg;
-        background-color: $element-background-color;
-
-        &:active {
-            border-color: $primary;
-        }
-
-        &::placeholder {
-            color: $placeholder-color;
-        }
-
-        &:disabled {
-            border: none;
-            background-color: $background-disabled-color;
-        }
-    }
-
-    &__body {
-        position: relative;
-
-        &::before {
-            position: absolute;
-            display: block;
-            width: 100%;
-            height: 100%;
-            content: "";
-            top: 0;
-            left: 0;
-            border: 4px solid $primary-light;
-            transform: translate(-4px, -4px);
-            opacity: 0;
-            transition: opacity 150ms ease-in-out;
-        }
-    }
-
-    &:focus-within:not(:active) {
-        #{$root}__body {
-            &::before {
-                opacity: 1;
-            }
-        }
-
-        #{$root}__input {
-            border-color: transparent;
-        }
-    }
-
-    &__icon-container {
-        position: absolute;
-        top: 50%;
-        right: 8px;
-        transform: translateY(-50%);
-        width: 24px;
-        height: 24px;
-
-        > * {
-            display: inline-flex;
-            flex-flow: row nowrap;
-            width: 100%;
-            height: 100%;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-default-color;
-            }
-        }
-
-        #{$root}__close-icon {
-            cursor: pointer;
-            path,
-            circle {
-                stroke: $date-icon-close-default-color;
-            }
-        }
-    }
-
-    &_size {
-        &_lg {
-            #{$root}__input {
-                border-radius: $radius-large;
-                padding: 16px 8px;
-                padding-right: 40px;
-            }
-
-            #{$root}__body::before {
-                border-radius: calc($radius-large + 4px);
-            }
-
-            font-size: $line-height-sm;
-        }
-
-        &_md {
-            #{$root}__input {
-                border-radius: $radius-large;
-                padding: 11px 8px;
-                padding-right: 40px;
-            }
-
-            #{$root}__body::before {
-                border-radius: calc($radius-large + 4px);
-            }
-
-            font-size: $font-size-base;
-        }
-
-        &_sm {
-            #{$root}__input {
-                border-radius: $radius-small;
-                padding: 5px 8px;
-                padding-right: 40px;
-            }
+    @include date-default-input();
 
-            font-size: $font-size-sm;
+    @include date-default-body();
 
-            #{$root}__body::before {
-                border-radius: calc($radius-small + 4px);
-            }
-        }
-    }
+    @include icon-container($root);
 
-    &_disabled {
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-disabled-color;
-            }
-        }
-    }
+    @include date-default-sizes($root);
 
-    &_is-invalid {
-        #{$root}__input {
-            border-color: $danger;
-        }
-    }
+    @include date-default-effects($root);
 }

package/form/DateRangeField/DateRangeFieldView.js

@@ -43,28 +43,25 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
-var isString_1 = __importDefault(require("lodash-es/isString"));
 function DateRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateRangeFieldView');
+    var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
-                'no-border': props.noBorder
+                size: props.size,
+                'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsFrom && 'is-invalid'), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                React.createElement("span", { className: bem.element('divider') }, "-"),
-                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
-                    props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' }))),
+                React.createElement("span", { className: bem.element('effect') })))));
 }
 exports["default"] = DateRangeFieldView;