@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.1

package/form/WizardForm/WizardFormView.js

@@ -0,0 +1,33 @@
+"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 __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 Steps_1 = __importDefault(require("@steroidsjs/core/ui/list/Steps/Steps"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var TitleView_1 = __importDefault(require("../../typography/Title/TitleView"));
+function WizardFormView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('WizardFormView');
+    return (props.renderStep(react_1["default"].createElement("div", { className: bem.element('header') },
+        props.showSteps && (react_1["default"].createElement(Steps_1["default"], __assign({}, props.stepsProps, { className: bem.element('steps'), stepItems: (_a = props.stepItems) !== null && _a !== void 0 ? _a : props.totalSteps, currentStep: props.currentStep }))),
+        props.stepTitle && (react_1["default"].createElement(TitleView_1["default"], { type: 'h3', content: props.stepTitle, className: bem.element('title') }))), react_1["default"].createElement("div", { className: bem.element('buttons') },
+        props.currentStep > 0 && (react_1["default"].createElement(form_1.Button, __assign({}, props.prevStepButtonProps, { onClick: props.onPrevStep }))),
+        react_1["default"].createElement(form_1.Button, __assign({ type: 'submit' }, props.nextStepButtonProps))), {
+        className: bem.block()
+    }));
+}
+exports["default"] = WizardFormView;

package/form/WizardForm/WizardFormView.scss

@@ -0,0 +1,30 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+.WizardFormView {
+  display: flex;
+  flex-flow: column nowrap;
+
+  &__header {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+  &__title {
+    text-align: left;
+  }
+
+  &__steps {
+    margin-bottom: 32px;
+  }
+
+  &__buttons {
+    @include mixins.svg-color(variables.$primary);
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 16px;
+  }
+}

package/icons/index.js

@@ -17,6 +17,7 @@ exports["default"] = (function (customIcons) {
     var icons = {};
     var steroidsIcons = [
         'add',
+        'add_16x16',
         'add_square',
         'arrow_down_18x18',
         'arrow_down_24x24',
@@ -40,6 +41,7 @@ exports["default"] = (function (customIcons) {
         'cross_8x8',
         'default_16x16',
         'default_24x24',
+        'done-all',
         'cut',
         'error_16x16',
         'error_24x24',
@@ -77,6 +79,7 @@ exports["default"] = (function (customIcons) {
         'pin',
         'sad',
         'search',
+        'send',
         'setting_line',
         'share',
         'star',

package/icons/svgs/add_16x16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4L8 12" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M12 8L4 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/icons/svgs/done-all.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M0.999998 9.09091L3.04198 10.4986C3.45739 10.785 4.02106 10.7171 4.35652 10.3402L10 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51367 10.5551L7.80269 10.784C8.44255 11.2907 9.37013 11.1928 9.89012 10.5637L15.0519 4.31856C15.2279 4.10571 15.1979 3.79054 14.9851 3.61462C14.7722 3.43869 14.4571 3.46862 14.2811 3.68147L9.11932 9.92663C8.94599 10.1363 8.6368 10.169 8.42351 10.0001L8.17965 9.80694L7.51367 10.5551Z" fill="white"/>
+</svg>

package/icons/svgs/send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.99811 10.2467L7.43298 11.0077C7.70983 11.4922 7.84825 11.7344 7.84825 12C7.84825 12.2656 7.70983 12.5078 7.43299 12.9923L7.43298 12.9923L6.99811 13.7533C5.75981 15.9203 5.14066 17.0039 5.62348 17.5412C6.1063 18.0785 7.24961 17.5783 9.53623 16.5779L15.8119 13.8323C17.6074 13.0468 18.5051 12.654 18.5051 12C18.5051 11.346 17.6074 10.9532 15.8119 10.1677L9.53624 7.4221C7.24962 6.42171 6.1063 5.92151 5.62348 6.45883C5.14066 6.99615 5.75981 8.07966 6.99811 10.2467Z" stroke="#323232"/>
+</svg>

package/icons/svgs/view.svg

@@ -1,3 +1,4 @@
+
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12.4492" r="3.5" stroke="#323232"/>
 <path d="M20.188 11.3834C20.5762 11.8547 20.7703 12.0904 20.7703 12.4492C20.7703 12.808 20.5762 13.0436 20.188 13.5149C18.7679 15.239 15.6357 18.4492 12 18.4492C8.36427 18.4492 5.23206 15.239 3.81197 13.5149C3.42381 13.0436 3.22973 12.808 3.22973 12.4492C3.22973 12.0904 3.42381 11.8547 3.81197 11.3834C5.23206 9.6593 8.36427 6.44916 12 6.44916C15.6357 6.44916 18.7679 9.6593 20.188 11.3834Z" stroke="#323232"/>

package/icons/svgs/warning_16x16.svg

@@ -1,3 +1,5 @@
+
+
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.2679 5.86768C11.0377 4.53434 12.9623 4.53434 13.7321 5.86768L18.9282 14.8677C19.698 16.201 18.7358 17.8677 17.1962 17.8677H6.80385C5.26425 17.8677 4.302 16.201 5.0718 14.8677L10.2679 5.86768Z" fill="#FFE457"/>
 <circle cx="12" cy="14.8687" r="0.5" fill="white"/>

package/index.d.ts

@@ -23,6 +23,9 @@ declare const _default: {
     'content.CalendarView': {
         lazy: () => any;
     };
+    'content.DashboardItemView': {
+        lazy: () => any;
+    };
     'content.DetailView': {
         lazy: () => any;
     };
@@ -41,6 +44,27 @@ declare const _default: {
     'content.SliderView': {
         lazy: () => any;
     };
+    'content.KanbanView': {
+        lazy: () => any;
+    };
+    'content.KanbanColumnView': {
+        lazy: () => any;
+    };
+    'content.KanbanTaskView': {
+        lazy: () => any;
+    };
+    'content.KanbanModalView': {
+        lazy: () => any;
+    };
+    'content.CalendarSystemView': {
+        lazy: () => any;
+    };
+    'content.ChatView': {
+        lazy: () => any;
+    };
+    'content.ChatInputView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -62,6 +86,9 @@ declare const _default: {
     'form.CheckboxListFieldView': {
         lazy: () => any;
     };
+    'form.CheckboxTreeFieldView': {
+        lazy: () => any;
+    };
     'form.DateFieldView': {
         lazy: () => any;
     };
@@ -98,6 +125,9 @@ declare const _default: {
     'form.FormView': {
         lazy: () => any;
     };
+    'form.WizardFormView': {
+        lazy: () => any;
+    };
     'form.HtmlFieldView': {
         lazy: () => any;
     };
@@ -194,6 +224,9 @@ declare const _default: {
     'list.DiagramColumnView': {
         lazy: () => any;
     };
+    'list.TreeColumnView': {
+        lazy: () => any;
+    };
     'list.ListView': {
         lazy: () => any;
     };
@@ -248,6 +281,9 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'nav.TreeItemView': {
+        lazy: () => any;
+    };
     'nav.ButtonGroupView': {
         lazy: () => any;
     };

package/index.js

@@ -26,6 +26,9 @@ exports["default"] = {
     'content.CalendarView': {
         lazy: function () { return require('./content/Calendar/CalendarView')["default"]; }
     },
+    'content.DashboardItemView': {
+        lazy: function () { return require('./content/Dashboard/DashboardItemView')["default"]; }
+    },
     'content.DetailView': {
         lazy: function () { return require('./content/Detail/DetailView')["default"]; }
     },
@@ -44,6 +47,27 @@ exports["default"] = {
     'content.SliderView': {
         lazy: function () { return require('./content/Slider/SliderView')["default"]; }
     },
+    'content.KanbanView': {
+        lazy: function () { return require('./content/Kanban/KanbanView')["default"]; }
+    },
+    'content.KanbanColumnView': {
+        lazy: function () { return require('./content/Kanban/views/KanbanColumn/KanbanColumnView')["default"]; }
+    },
+    'content.KanbanTaskView': {
+        lazy: function () { return require('./content/Kanban/views/KanbanTask/KanbanTaskView')["default"]; }
+    },
+    'content.KanbanModalView': {
+        lazy: function () { return require('./content/Kanban/views/KanbanModal/KanbanModalView')["default"]; }
+    },
+    'content.CalendarSystemView': {
+        lazy: function () { return require('./content/CalendarSystem/CalendarSystemView')["default"]; }
+    },
+    'content.ChatView': {
+        lazy: function () { return require('./content/Chat/ChatView')["default"]; }
+    },
+    'content.ChatInputView': {
+        lazy: function () { return require('./content/Chat/views/ChatInput/ChatInputView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -65,6 +89,9 @@ exports["default"] = {
     'form.CheckboxListFieldView': {
         lazy: function () { return require('./form/CheckboxListField/CheckboxListFieldView')["default"]; }
     },
+    'form.CheckboxTreeFieldView': {
+        lazy: function () { return require('./form/CheckboxTreeField/CheckboxTreeFieldView')["default"]; }
+    },
     'form.DateFieldView': {
         lazy: function () { return require('./form/DateField/DateFieldView')["default"]; }
     },
@@ -101,6 +128,9 @@ exports["default"] = {
     'form.FormView': {
         lazy: function () { return require('./form/Form/FormView')["default"]; }
     },
+    'form.WizardFormView': {
+        lazy: function () { return require('./form/WizardForm/WizardFormView')["default"]; }
+    },
     'form.HtmlFieldView': {
         lazy: function () { return require('./form/HtmlField/HtmlFieldView')["default"]; }
     },
@@ -197,6 +227,9 @@ exports["default"] = {
     'list.DiagramColumnView': {
         lazy: function () { return require('./list/Grid/views/DiagramColumnView/DiagramColumnView')["default"]; }
     },
+    'list.TreeColumnView': {
+        lazy: function () { return require('./list/Grid/views/TreeColumnView/TreeColumnView')["default"]; }
+    },
     'list.ListView': {
         lazy: function () { return require('./list/List/ListView')["default"]; }
     },
@@ -251,6 +284,9 @@ exports["default"] = {
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
     },
+    'nav.TreeItemView': {
+        lazy: function () { return require('./nav/TreeItem/TreeItemView')["default"]; }
+    },
     'nav.ButtonGroupView': {
         lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
     },

package/index.scss

@@ -5,6 +5,7 @@
 @include meta.load-css('scss/variables');
 @include meta.load-css('scss/mixins');
 @include meta.load-css('scss/fonts');
+@include meta.load-css('scss/bootstrap-classes');
 
 @include meta.load-css('content/Accordion/AccordionView');
 @include meta.load-css('content/Accordion/AccordionItemView');
@@ -14,7 +15,11 @@
 @include meta.load-css('content/Badge/BadgeView');
 @include meta.load-css('content/Calendar/CalendarView');
 @include meta.load-css('content/Calendar/CaptionElement');
+@include meta.load-css('content/CalendarSystem/CalendarSystemView');
+@include meta.load-css('content/CalendarSystem/CalendarSystemModalView');
+@include meta.load-css('content/CalendarSystem/CalendarSystemEventGroupModalView');
 @include meta.load-css('content/Card/CardView');
+@include meta.load-css('content/Dashboard/DashboardItemView');
 @include meta.load-css('content/Detail/DetailView');
 @include meta.load-css('content/DropDown/DropDownView');
 @include meta.load-css('content/Menu/MenuItemView');
@@ -22,11 +27,18 @@
 @include meta.load-css('content/Icon/IconView');
 @include meta.load-css('content/Slider/SliderView');
 @include meta.load-css('content/CopyToClipboard/CopyToClipboardView');
+@include meta.load-css('content/Kanban/KanbanView');
+@include meta.load-css('content/Kanban/views/KanbanColumn/KanbanColumnView');
+@include meta.load-css('content/Kanban/views/KanbanTask/KanbanTaskView');
+@include meta.load-css('content/Kanban/views/KanbanModal/KanbanModalView');
+@include meta.load-css('content/Chat/ChatView');
+@include meta.load-css('content/Chat/views/ChatInput/ChatInputView');
 @include meta.load-css('crud/Crud/CrudView');
 @include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
 @include meta.load-css('form/Button/ButtonView');
 @include meta.load-css('form/CheckboxField/CheckboxFieldView');
 @include meta.load-css('form/CheckboxListField/CheckboxListFieldView');
+@include meta.load-css('form/CheckboxTreeField/CheckboxTreeFieldView');
 @include meta.load-css('form/DateField/DateFieldView');
 @include meta.load-css('form/DateRangeField/DateRangeFieldView');
 @include meta.load-css('form/DateTimeField/DateTimeFieldView');
@@ -42,6 +54,7 @@
 @include meta.load-css('form/FileField/FileFieldItemView');
 @include meta.load-css('form/FieldSet/FieldSetView');
 @include meta.load-css('form/Form/FormView');
+@include meta.load-css('form/WizardForm/WizardFormView');
 @include meta.load-css('form/HtmlField/HtmlFieldView');
 @include meta.load-css('form/InputField/InputFieldView');
 @include meta.load-css('form/NumberField/NumberFieldView');
@@ -71,6 +84,7 @@
 @include meta.load-css('list/FlexGrid/FlexGridView');
 @include meta.load-css('list/List/ListView');
 @include meta.load-css('list/Grid/views/ContentColumnView/ContentColumnView');
+@include meta.load-css('list/Grid/views/TreeColumnView/TreeColumnView');
 @include meta.load-css('list/Pagination/PaginationButtonView');
 @include meta.load-css('list/Pagination/PaginationMoreView');
 @include meta.load-css('list/PaginationSize/PaginationSizeView');
@@ -86,6 +100,7 @@
 @include meta.load-css('nav/Nav/NavListView');
 @include meta.load-css('nav/Nav/NavTabsView');
 @include meta.load-css('nav/Tree/TreeView');
+@include meta.load-css('nav/TreeItem/TreeItemView');
 @include meta.load-css('nav/ButtonGroup/ButtonGroupView');
 @include meta.load-css('typography/Text/TextView');
 @include meta.load-css('typography/Title/TitleView');

package/layout/ProgressBar/CircleProgressBarView.js

@@ -33,7 +33,10 @@ function CircleProgressBarView(props) {
         small: { radius: 32 }
     };
     var getCircumference = function () { return 2 * Math.PI * size[props.size].radius; };
-    return (React.createElement("div", { className: bem.block({ size: props.size, status: props.status }) },
+    return (React.createElement("div", { className: bem.block({
+            size: props.size,
+            status: props.status
+        }) },
         React.createElement("svg", null,
             React.createElement("g", { className: bem.element('circles') },
                 React.createElement("circle", { className: bem.element('emptyCircle'), style: { strokeDasharray: getCircumference() } }),

package/layout/ProgressBar/LineProgressBarView.js

@@ -27,7 +27,10 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function LineProgressBarView(props) {
     var bem = (0, hooks_1.useBem)('LineProgressBarView');
-    return (React.createElement("div", { className: bem.block({ size: props.size, status: props.status }) },
+    return (React.createElement("div", { className: bem.block({
+            size: props.size,
+            status: props.status
+        }) },
         React.createElement("div", { className: bem.element('emptyLine') },
             React.createElement("div", { className: bem.element('progressLine'), style: { width: "".concat(props.percent, "%") } })),
         React.createElement("div", { className: bem.element('text') }, props.label)));

package/layout/Skeleton/SkeletonView.js

@@ -30,6 +30,9 @@ function SkeletonView(props) {
     return (React.createElement("span", { className: bem(props.className, bem.block({
             type: props.children ? null : props.type,
             animation: props.animation
-        })), style: { height: props.height, width: props.width } }, props.children));
+        })), style: {
+            height: props.height,
+            width: props.width
+        } }, props.children));
 }
 exports["default"] = SkeletonView;

package/layout/Tooltip/TooltipView.js

@@ -27,16 +27,16 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
+    var bem = (0, hooks_1.useBem)('TooltipView');
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
-    var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
             show: props.isTooltipVisible,
             position: props.position
-        }), style: props.style },
+        }), props.className), style: props.style },
         React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
         React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));

package/layout/Tooltip/TooltipView.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use "../../scss/variables";
+@use '../../scss/mixins';
 
 $tooltip-arrow-width: 10px;
 $tooltip-arrow-height: 10px;
@@ -17,6 +18,7 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
   top: 0;
   left: 0;
   max-width: 300px;
+  width: fit-content;
   word-break: break-all;
   padding: 8px 12px;
   border-radius: 6px;
@@ -31,27 +33,11 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
     opacity: 1;
   }
 
-  &_position{
-    &_top, &_topLeft, &_topRight {
-      transform: translateY(-$tooltip-gap);
-    }
-
-    &_bottom, &_bottomLeft, &_bottomRight {
-      transform: translateY($tooltip-gap);
-    }
-
-    &_left, &_leftTop, &_leftBottom {
-      transform: translateX(-$tooltip-gap);
-    }
-
-    &_right, &_rightTop, &_rightBottom {
-      transform: translateX($tooltip-gap);
-    }
-  }
+  @include mixins.absolute-position($tooltip-gap);
 
   &__arrow{
     position: absolute;
-    
+
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
@@ -60,65 +46,12 @@ $tooltip-background-color: rgba(65, 65, 65, 0.95);
     border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-    &_position_top, &_position_topLeft, &_position_topRight{
-      bottom: -$tooltip-arrow-border;
-      left: 50%;
-      border-top-color: transparent;
-      border-left-color: transparent;
-      transform: translateX(-50%) rotate(45deg);
-    }
-    &_position_topLeft{
-      left: $tooltip-arrow-offset-horizontal;
-    }
-    &_position_topRight{
-      left: unset;
-      right: $tooltip-arrow-offset-horizontal;
-    }
-
-    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
-      top: -$tooltip-arrow-border;
-      left: 50%;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      transform: translateX(-50%) rotate(45deg);
-    }
-    &_position_bottomLeft{
-      left: $tooltip-arrow-offset-horizontal;
-    }
-    &_position_bottomRight{
-      left: unset;
-      right: $tooltip-arrow-offset-horizontal;
-    }
-
-    &_position_left, &_position_leftTop, &_position_leftBottom{
-      right: -$tooltip-arrow-border;
-      top: 50%;
-      border-left-color: transparent;
-      border-bottom-color: transparent;
-      transform: translateY(-50%) rotate(45deg);
-    }
-    &_position_leftTop{
-      top: $tooltip-arrow-offset-vertical-top;
-    }
-    &_position_leftBottom{
-      top: unset;
-      bottom: $tooltip-arrow-offset-vertical-bottom;
-    }
-
-    &_position_right, &_position_rightTop, &_position_rightBottom{
-      left: -$tooltip-arrow-border;
-      top: 50%;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      transform: translateY(-50%) rotate(45deg);
-    }
-    &_position_rightTop{
-      top: $tooltip-arrow-offset-vertical-top;
-    }
-    &_position_rightBottom{
-      top: unset;
-      bottom: $tooltip-arrow-offset-vertical-bottom;
-    }
+    @include mixins.arrow-position(
+                    $tooltip-arrow-border,
+                    $tooltip-arrow-offset-horizontal,
+                    $tooltip-arrow-offset-vertical-top,
+                    $tooltip-arrow-offset-vertical-bottom
+    );
   }
 
   &__content{

package/list/FlexGrid/FlexGridView.scss

@@ -1,16 +1,9 @@
 @use "../../scss/variables";
 
-
-$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 {
+  @each $colValue in variables.$colValues {
     &_#{$className}_#{$colValue} {
-      #{$property}: calc((100% / $colMaxValue) * $colValue);
+      #{$property}: calc((100% / variables.$colMaxValue) * $colValue);
     }
   }
 }
@@ -25,19 +18,19 @@ $colMaxValue: 12;
     flex-wrap: wrap;
   }
 
-  @each $alignValue in $alignValues {
+  @each $alignValue in variables.$alignValues {
     &_align_#{$alignValue} {
         align-items: $alignValue;
     }
   }
 
-  @each $justifyValue in $justifyValues {
+  @each $justifyValue in variables.$justifyValues {
     &_justify_#{$justifyValue} {
         justify-content: $justifyValue;
     }
   }
 
-  @each $directionValue in $directionValues {
+  @each $directionValue in variables.$directionValues {
     &_direction_#{$directionValue} {
         flex-direction: $directionValue;
     }
@@ -57,4 +50,4 @@ $colMaxValue: 12;
       @include col(sm, $root);
     }
   }
-}
+}

package/list/Grid/GridView.scss

@@ -23,7 +23,6 @@ $grid-td-background-color: var(--grid-td-background-color);
 $grid-td-alternating-color: var(--grid-td-alternating-color);
 
 .GridView {
-    overflow-x: auto;
     $root: &;
 
     text-align: left;
@@ -32,7 +31,6 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
 
     &__table {
         width: 100%;
-        border: none;
         border-spacing: 0;
         border-collapse: separate;
         border: 1px solid $grid-border-color;
@@ -83,7 +81,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
     }
 
     &_alternatingColors{
-        #{$root}__table tbody tr:nth-child(even) td { 
+        #{$root}__table tbody tr:nth-child(even) td {
             background-color: $grid-td-alternating-color;
         }
     }
@@ -129,7 +127,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
 
     &__column {
 
-        .IconView { 
+        .IconView {
             display: inline-block;
             width: 24px;
             height: 24px;
@@ -140,16 +138,16 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             }
         }
 
-        &_hasIcon { 
-            display: flex;    
+        &_hasIcon {
+            display: flex;
             flex-flow: row nowrap;
             align-items: center;
 
-            .IconView { 
-                margin-left: 8px;           
+            .IconView {
+                margin-left: 8px;
             }
 
-            &-left { 
+            &-left {
                 span {
                     &:nth-child(1) {
                         order: 2;
@@ -160,7 +158,7 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
                     }
                 }
 
-                .IconView { 
+                .IconView {
                     margin-left: 0;
                     margin-right: 8px;
                 }

package/list/Grid/views/TreeColumnView/TreeColumnView.d.ts

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

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -0,0 +1,27 @@
+"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 __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 Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var TreeItemView_1 = __importDefault(require("../../../../nav/TreeItem/TreeItemView"));
+function TreeColumnView(props) {
+    var bem = (0, hooks_1.useBem)('TreeColumnView');
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
+    var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
+    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding }, renderValue()));
+}
+exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -0,0 +1,6 @@
+.TreeColumnView {
+}
+
+.TreeColumnHeader {
+  width: 40%;
+}