@steroidsjs/bootstrap 3.0.0-beta.62 → 3.0.0-beta.63

package/index.d.ts

@@ -173,6 +173,9 @@ declare const _default: {
     'list.GridView': {
         lazy: () => any;
     };
+    'list.FlexGridView': {
+        lazy: () => any;
+    };
     'list.ContentColumnView': {
         lazy: () => any;
     };

package/index.js

@@ -176,6 +176,9 @@ exports["default"] = {
     'list.GridView': {
         lazy: function () { return require('./list/Grid/GridView')["default"]; }
     },
+    'list.FlexGridView': {
+        lazy: function () { return require('./list/FlexGrid/FlexGridView')["default"]; }
+    },
     'list.ContentColumnView': {
         lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
     },

package/index.scss

@@ -61,6 +61,7 @@
 @import './list/CheckboxColumn/CheckboxColumnView';
 @import './list/Empty/EmptyView';
 @import './list/Grid/GridView';
+@import './list/FlexGrid/FlexGridView';
 @import './list/List/ListView';
 @import './list/Pagination/PaginationButtonView';
 @import './list/Pagination/PaginationMoreView';

package/list/FlexGrid/FlexGridView.d.ts

@@ -0,0 +1,2 @@
+import { IFlexGridViewProps } from '@steroidsjs/core/ui/list/FlexGrid/FlexGrid';
+export default function FlexGridView(props: IFlexGridViewProps): JSX.Element;

package/list/FlexGrid/FlexGridView.js

@@ -0,0 +1,71 @@
+"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;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function FlexGridView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('FlexGridView');
+    var halfColGap = props.colGap / 2;
+    var hasItems = !!((_a = props.items) === null || _a === void 0 ? void 0 : _a.length);
+    var colGapStyle = hasItems
+        ? {
+            marginRight: -halfColGap,
+            marginLeft: -halfColGap
+        }
+        : {
+            columnGap: props.colGap
+        };
+    return (React.createElement("div", { className: bem(bem.block({
+            wrap: props.wrap,
+            align: props.align,
+            direction: props.direction,
+            justify: props.justify
+        }), props.className), style: __assign(__assign(__assign({}, props.style), colGapStyle), { rowGap: props.rowGap }) },
+        hasItems && props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem(bem.element('item', {
+                col: item.col,
+                lg: item.lg,
+                md: item.md,
+                sm: item.sm,
+                offset: item.offset
+            }), props.itemClassName), style: {
+                paddingRight: halfColGap,
+                paddingLeft: halfColGap,
+                order: item.order
+            } }, item.content)); }),
+        props.children));
+}
+exports["default"] = FlexGridView;

package/list/FlexGrid/FlexGridView.scss

@@ -0,0 +1,57 @@
+$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;
+
+@mixin col($className, $root, $property: flex-basis) {
+  @each $colValue in $colValues {
+    &_#{$className}_#{$colValue} {
+      #{$property}: calc((100% / $colMaxValue) * $colValue);
+    }
+  }
+}
+
+.FlexGridView {
+  $root: &;
+
+  display: flex;
+  flex-wrap: nowrap;
+
+  &_wrap {
+    flex-wrap: wrap;
+  }
+
+  @each $alignValue in $alignValues {
+    &_align_#{$alignValue} {
+        align-items: $alignValue;
+    }
+  }
+
+  @each $justifyValue in $justifyValues {
+    &_justify_#{$justifyValue} {
+        justify-content: $justifyValue;
+    }
+  }
+
+  @each $directionValue in $directionValues {
+    &_direction_#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+
+  &__item {
+    @include col(col, $root);
+    @include col(offset, $root, margin-inline-start);
+
+    @media (max-width: $desktop-width) {
+      @include col(lg, $root);
+    }
+    @media (max-width: $tablet-width) {
+      @include col(md, $root);
+    }
+    @media (max-width: $mobile-width) {
+      @include col(sm, $root);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.62",
+    "version": "3.0.0-beta.63",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.44",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.44"
     }
 }

package/scss/variables/common/media.scss

@@ -1,2 +1,3 @@
 $mobile-width: 540px !default;
 $tablet-width: 960px !default;
+$desktop-width: 1920px !default;