@steroidsjs/bootstrap 3.0.0-beta.96 → 3.0.0-beta.98

package/content/Chart/ChartView.d.ts

@@ -0,0 +1,2 @@
+import { IChartViewProps } from '@steroidsjs/core/ui/content/Chart/Chart';
+export default function ChartView(props: IChartViewProps): JSX.Element;

package/content/Chart/ChartView.js

@@ -0,0 +1,47 @@
+"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 DEFAULT_AXIS_PARAMS = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: '',
+    legendPosition: 'middle'
+};
+var DEFAULT_LINE_CHART_CONFIG = {
+    yScale: {
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false
+    },
+    xScale: { type: 'point' },
+    axisBottom: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: 36 }),
+    axisLeft: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: -40 }),
+    pointSize: 8,
+    useMesh: true
+};
+function ChartView(props) {
+    var bem = (0, hooks_1.useBem)('ChartView');
+    var ChartComponent = props.chartComponent;
+    var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign({ height: "".concat(props.height, "px") }, props.style) },
+        react_1["default"].createElement(ChartComponent, __assign({ data: props.data }, defaultChartConfig, props.config))));
+}
+exports["default"] = ChartView;

package/content/Chart/ChartView.scss

@@ -0,0 +1,8 @@
+@use "../../scss/variables";
+
+.ChartView {
+
+  text {
+    fill: variables.$text-color !important;
+  }
+}

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -36,19 +36,19 @@ function CheckboxListFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
             _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
+        key: checkboxIndex,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(checkbox.id),
-            checked: null,
             type: 'checkbox',
-            disabled: false,
+            checked: props.selectedIds.includes(checkbox.id),
             onChange: function () {
                 props.onItemSelect(checkbox.id);
-            }
+            },
+            disabled: props.disabled
         },
-        disabled: props.disabled,
-        label: checkbox.label,
-        id: "".concat(prefix, "_").concat(checkbox.id),
-        key: checkboxIndex
+        size: props.size
     }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/HtmlField/HtmlFieldView.scss

@@ -4,4 +4,7 @@
     --ck-color-base-border: #dbe2e6;
     --ck-border-radius: 12px;
 
+    .ck .ck-toolbar__items { 
+        flex-wrap: wrap !important;
+    }
 }

package/form/PasswordField/PasswordFieldView.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
+var PasswordField_1 = require("@steroidsjs/core/ui/form/PasswordField/PasswordField");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function PasswordFieldView(props) {
@@ -51,7 +52,9 @@ function PasswordFieldView(props) {
                 disabled: props.inputProps.disabled
             }) },
             React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id })),
-            props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
+            props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye', {
+                    viewHide: props.inputProps.type === PasswordField_1.InputType.PASSWORD
+                })), onClick: props.onShowButtonClick },
                 React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'view_hide' : 'view' })))),
         props.showSecurityBar && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
 }

package/form/PasswordField/PasswordFieldView.scss

@@ -183,12 +183,14 @@ $eye-filled-color: var(--eye-filled-color);
 
         svg {
             path {
-                fill: $eye-default-color;
-
                 &:last-child {
                     stroke: $eye-default-color;
                 }
             }
+
+            circle {
+                stroke: $eye-default-color;
+            }
         }
 
         &:active {
@@ -202,24 +204,31 @@ $eye-filled-color: var(--eye-filled-color);
                 }
             }
         }
+
+        &_viewHide {
+            svg path {
+                fill: $eye-default-color;
+            }
+        }
     }
 
     &_filled {
         #{$root}__icon-eye {
             svg {
                 path {
-                    fill: $eye-filled-color;
-
                     &:last-child {
                         stroke: $eye-filled-color;
                     }
                 }
+
+                circle { 
+                    stroke: $eye-filled-color;
+                }
             }
 
             &:active {
                 svg {
                     path {
-                        fill: inherit;
                         stroke: $eye-filled-color;
                     }
                     circle {
@@ -227,6 +236,12 @@ $eye-filled-color: var(--eye-filled-color);
                     }
                 }
             }
+
+            &_viewHide {
+                svg path {
+                    fill: $eye-filled-color;
+                }
+            }
         }
     }
 
@@ -235,7 +250,7 @@ $eye-filled-color: var(--eye-filled-color);
             cursor: not-allowed;
         }
 
-        #{$root}__icon-eye { 
+        #{$root}__icon-eye {
             pointer-events: none;
         }
 

package/form/RadioField/RadioFieldView.js

@@ -49,7 +49,7 @@ function RadioFieldView(props) {
         }), props.className), onClick: props.onChange },
         React.createElement("input", __assign({ className: bem(bem.element('input', {
                 checked: props.checked
-            })), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })),
+            })), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
         React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
             React.createElement("span", { className: bem.element('ellipse') }),
             props.label)));

package/form/RadioListField/RadioListFieldView.js

@@ -36,20 +36,18 @@ function RadioListFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
             _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+        key: radioIndex,
+        id: "".concat(prefix, "_").concat(radio.id),
+        label: radio.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(radio.id),
-            checked: null,
             type: 'radio',
-            disabled: false,
+            checked: props.selectedIds.includes(radio.id),
             onChange: function () {
                 props.onItemSelect(radio.id);
-            }
+            },
+            disabled: props.disabled
         },
-        disabled: props.disabled,
-        checked: props.selectedIds.includes(radio.id),
-        label: radio.label,
-        id: "".concat(prefix, "_").concat(radio.id),
-        key: radioIndex,
         size: props.size
     }); })));
 }

package/index.d.ts

@@ -35,6 +35,9 @@ declare const _default: {
     'content.CopyToClipboardView': {
         lazy: () => any;
     };
+    'content.ChartView': {
+        lazy: () => any;
+    };
     'content.SliderView': {
         lazy: () => any;
     };

package/index.js

@@ -38,6 +38,9 @@ exports["default"] = {
     'content.CopyToClipboardView': {
         lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
     },
+    'content.ChartView': {
+        lazy: function () { return require('./content/Chart/ChartView')["default"]; }
+    },
     'content.SliderView': {
         lazy: function () { return require('./content/Slider/SliderView')["default"]; }
     },

package/modal/Modal/ModalView.scss

@@ -131,7 +131,7 @@ $modal-background-color: var(--modal-background-color);
         flex-flow: row wrap;
         justify-content: center;
         align-items: center;
-        column-gap: 8px;
+        gap: 8px;
     }
 
     // Fade animation

package/package.json

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