@steroidsjs/bootstrap 3.0.0-beta.98 → 3.0.0

package/nav/TreeItem/TreeItemView.scss

@@ -0,0 +1,60 @@
+@use "../../scss/variables";
+
+:root {
+  --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+  --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.TreeItemView {
+  $root: &;
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+
+  &_has-items {
+    cursor: pointer;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+
+    #{$root}__icon {
+      pointer-events: none;
+
+      svg > * {
+          stroke: var(--disabled-text-color);
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    margin-left: 8px;
+  }
+
+  &__icon {
+    transform: rotate(0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
+
+    svg > * {
+        stroke: $grid-icon-color;
+    }
+  }
+
+  .IconView {
+    min-width: 24px;
+    min-height: 24px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.98",
+    "version": "3.0.0",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,8 +37,8 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.82",
-        "@steroidsjs/eslint-config": "^2.1.4",
+        "@steroidsjs/core": "^3.0.0",
+        "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
         "@types/jest": "^26.0.22",

package/scss/bootstrap-classes/flex.scss

@@ -0,0 +1,42 @@
+@use "../variables";
+
+.flex {
+  display: flex;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.col {
+  @each $colValue in variables.$colValues {
+    &-#{$colValue} {
+      flex-basis: calc((100% / variables.$colMaxValue) * $colValue);
+    }
+  }
+}
+
+.justify-content {
+  @each $justifyValue in variables.$justifyValues {
+    &-#{$justifyValue} {
+      justify-content: $justifyValue;
+    }
+  }
+}
+
+.align-items {
+  @each $alignValue in variables.$alignValues {
+    &-#{$alignValue} {
+      align-items: $alignValue;
+    }
+  }
+}
+
+.flex-direction {
+  @each $directionValue in variables.$directionValues {
+    &-#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+}

package/scss/bootstrap-classes/index.scss

@@ -0,0 +1,4 @@
+@forward './spacing.scss';
+@forward './flex.scss';
+@forward './layout.scss';
+@forward './typography.scss';

package/scss/bootstrap-classes/layout.scss

@@ -0,0 +1,72 @@
+@use "../variables/common/colors.scss";
+
+$positions: absolute, sticky, relative, fixed, static;
+$borders: right, left, top, bottom;
+
+.border {
+  border: 1px solid colors.$element-border-color;
+
+  @each $border in $borders {
+    &-#{$border} {
+      border-#{$border}: 1px solid colors.$element-border-color;
+    }
+  }
+}
+
+// positions
+.position {
+  @each $position in $positions {
+    &-#{$position} {
+      position: $position;
+    }
+  }
+}
+
+.top-0 {
+  top: 0;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.left-0 {
+  left: 0;
+}
+
+.right-0 {
+  right: 0;
+}
+
+// width and height in percents
+.w-25 {
+  width: 25%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-75 {
+  width: 75%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-25 {
+  height: 25%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.h-75 {
+  height: 75%;
+}
+
+.h-100 {
+  height: 100%;
+}

package/scss/bootstrap-classes/spacing.scss

@@ -0,0 +1,181 @@
+// margin
+.m-1 {
+  margin: 0.25rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-3 {
+  margin: 1rem;
+}
+
+.m-horizontal-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.m-horizontal-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.m-horizontal-3 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.m-vertical-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.m-vertical-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.m-vertical-3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 1rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-3 {
+  margin-left: 1rem;
+}
+
+// padding
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 1rem;
+}
+
+.p-horizontal-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.p-horizontal-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.p-horizontal-3 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.p-vertical-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.p-vertical-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.p-vertical-3 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 1rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-3 {
+  padding-top: 1rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-3 {
+  padding-right: 1rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-3 {
+  padding-left: 1rem;
+}

package/scss/bootstrap-classes/typography.scss

@@ -0,0 +1,25 @@
+$text-aligns: center, left, right, end, justify, start;
+
+.text {
+  @each $text-align in $text-aligns {
+    &-#{$text-align} {
+      text-align: $text-align;
+    }
+  }
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}

package/scss/mixins/button.scss

@@ -1,9 +1,10 @@
 @use "sass:map";
 @use "../variables/common/colors";
+@use "../variables/index" as variables;
 
 @mixin svg-color($color) {
     svg {
-        path { 
+        path {
             stroke: $color;
         }
     }
@@ -18,7 +19,9 @@
     }
     &:focus,
     &:focus-visible {
-        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
+        box-shadow:
+            0 0 0 4px map.get($colorMap, color-light),
+            0 0 0 4px map.get($colorMap, color-light);
     }
     &:active {
         background-color: map.get($colorMap, color-light);
@@ -29,12 +32,12 @@
         color: map.get($colorMap, text-color);
     }
 
-    #{$root}__loader { 
+    #{$root}__loader {
         svg {
-            path { 
+            path {
                 stroke: map.get($colorMap, color-light);
 
-                @if ($colorName == 'basic' ) {
+                @if ($colorName == "basic") {
                     stroke: map.get($colorMap, color-dark);
                 }
             }
@@ -64,7 +67,9 @@
         border-color: map.get($colorMap, color-dark);
     }
     &:focus {
-        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
+        box-shadow:
+            0 0 0 4px map.get($colorMap, color-light),
+            0 0 0 4px map.get($colorMap, color-light);
         border: 1px solid transparent;
     }
     &:active {
@@ -84,9 +89,20 @@
 
     @if ($colorName == "basic") {
         color: colors.$text-color;
-    } 
+    }
 
-    #{$root}__loader { 
+    #{$root}__loader {
         @include svg-color(map.get($colorMap, color));
     }
 }
+
+@mixin expand-button() {
+    font-size: variables.$font-size-xs;
+    font-weight: variables.$font-weight-sm;
+    line-height: variables.$line-height-xs;
+    text-align: center;
+
+    .ButtonView__text {
+        color: variables.$text-color;
+    }
+}

package/scss/mixins/index.scss

@@ -4,3 +4,4 @@
 @forward "customMixins";
 @forward "date";
 @forward "navs";
+@forward "tooltip";

package/scss/mixins/scroll.scss

@@ -29,3 +29,9 @@
     max-height: $maxHeight;
     overflow: auto;
 }
+
+@mixin horizontalScrollWrapper($paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    overflow: auto;
+}

package/scss/mixins/tooltip.scss

@@ -0,0 +1,113 @@
+@use 'sass:math';
+@use "../variables/index" as variables;
+
+:root {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+
+html[data-theme="dark"] {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+$tooltip-background-color: var(--tooltip-background-color);
+
+@mixin calendar-tooltip() {
+    background-color: $tooltip-background-color;
+    border-radius: 4px;
+
+    .TooltipView__arrow {
+        display: none;
+    }
+
+    .TooltipView__content {
+        color: variables.$text-color;
+    }
+}
+
+@mixin absolute-position($gap) {
+    &_position{
+        &_top, &_topLeft, &_topRight {
+            transform: translateY(-$gap);
+        }
+
+        &_bottom, &_bottomLeft, &_bottomRight {
+            transform: translateY($gap);
+        }
+
+        &_left, &_leftTop, &_leftBottom {
+            transform: translateX(-$gap);
+        }
+
+        &_right, &_rightTop, &_rightBottom {
+            transform: translateX($gap);
+        }
+    }
+}
+
+@mixin arrow-position(
+    $arrow-border,
+    $arrow-offset-horizontal,
+    $arrow-offset-vertical-top,
+    $arrow-offset-vertical-bottom
+) {
+    &_position{
+        &_top, &_topLeft, &_topRight {
+            bottom: -$arrow-border;
+            left: 50%;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: translateX(-50%) rotate(45deg);
+        }
+        &_topLeft{
+            left: $arrow-offset-horizontal;
+        }
+        &_topRight{
+            left: unset;
+            right: $arrow-offset-horizontal;
+        }
+
+        &_bottom, &_bottomLeft, &_bottomRight {
+            top: -$arrow-border;
+            left: 50%;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            transform: translateX(-50%) rotate(45deg);
+        }
+        &_bottomLeft{
+            left: $arrow-offset-horizontal;
+        }
+        &_bottomRight{
+            left: unset;
+            right: $arrow-offset-horizontal;
+        }
+
+        &_left, &_leftTop, &_leftBottom {
+            right: -$arrow-border;
+            top: 50%;
+            border-left-color: transparent;
+            border-bottom-color: transparent;
+            transform: translateY(-50%) rotate(45deg);
+        }
+        &_leftTop{
+            top: $arrow-offset-vertical-top;
+        }
+        &_leftBottom{
+            top: unset;
+            bottom: $arrow-offset-vertical-bottom;
+        }
+
+        &_right, &_rightTop, &_rightBottom {
+            left: -$arrow-border;
+            top: 50%;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            transform: translateY(-50%) rotate(45deg);
+        }
+        &_rightTop{
+            top: $arrow-offset-vertical-top;
+        }
+        &_rightBottom{
+            top: unset;
+            bottom: $arrow-offset-vertical-bottom;
+        }
+    }
+}

package/scss/variables/common/colors.scss

@@ -45,6 +45,7 @@
     --element-background-color: #FFFFFF;
     --element-background-color-disabled: #f1f5f7;
     --element-field-background-color: #FFFFFF;
+    --element-light-label-color: rgba(0, 0, 0, 0.6);
 
     --scroll-thumb-color: #cbd5db;
     --scroll-track-color: #f1f5f7;
@@ -101,6 +102,7 @@ html[data-theme="dark"] {
     --element-background-color: #191B1F;
     --element-background-color-disabled: #333646;
     --element-field-background-color: #101216;
+    --element-light-label-color: #fff;
 
     --scroll-thumb-color: #333646;
     --scroll-track-color: #26272f;
@@ -140,7 +142,7 @@ $gray: var(--gray);
 $light-gray: var(--light-gray);
 
 $additional-gray-dark: var(--additional-gray-dark);
-$additional-light-gray: var(--additional-gray);
+$additional-light-gray: var(--additional-light-gray);
 $additional-light-blue: var(--additional-light-blue);
 
 $text-color: var(--text-color);
@@ -156,6 +158,7 @@ $element-border-color-hover: var(--element-border-color-hover);
 $element-background-color: var(--element-background-color);
 $element-background-color-disabled: var(--element-background-color-disabled);
 $element-field-background-color: var(--element-field-background-color);
+$element-light-label-color: var(--element-light-label-color);
 
 
 $scroll-thumb-color: var(--scroll-thumb-color);
@@ -266,4 +269,4 @@ $diagram-colors: map.merge(
         ),
     ),
     $diagram-colors
-);
+);

package/scss/variables/common/flex.scss

@@ -0,0 +1,5 @@
+$justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
+$alignValues: center, end, start, stretch, flex-start, flex-end;
+$directionValues: column-reverse column row-reverse row;
+$colValues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
+$colMaxValue: 12;

package/scss/variables/common/typography.scss

@@ -83,6 +83,18 @@ $text-types: map.merge(
             "line-height": $line-height-base,
             "color": colors.$text-color,
         ),
+        "body2": (
+            "font-size": $font-size-sm,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-sm,
+            "color": colors.$text-color,
+        ),
+        "body3": (
+            "font-size": $font-size-xs,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-xs,
+            "color": colors.$text-color,
+        ),
         "span": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-sm,
@@ -107,4 +119,5 @@ $typography-colors: (
     "danger": colors.$danger,
     "warning": colors.$warning,
     "info": colors.$info,
+    "light-dark": colors.$element-light-label-color,
 ) !default;

package/scss/variables/index.scss

@@ -4,6 +4,7 @@
 @forward 'common/radiuses';
 @forward 'common/old-variables';
 @forward 'common/variables';
+@forward 'common/flex';
 
 @forward 'components/button';
 @forward 'components/calendar';

package/utils/getFormattedExpandLabel.d.ts

@@ -0,0 +1 @@
+export declare const getFormattedExpandRestLabel: (rest: any[]) => string;

package/utils/getFormattedExpandLabel.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.getFormattedExpandRestLabel = void 0;
+var getFormattedExpandRestLabel = function (rest) { return "".concat(__('Показать ещё'), " +").concat(rest.length); };
+exports.getFormattedExpandRestLabel = getFormattedExpandRestLabel;