@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/form/DropDownField/DropDownFieldView.scss

@@ -15,19 +15,27 @@
     padding: 0.375rem 1.75rem 0.375rem 0.75rem;
     min-width: 100px;
     min-height: 38px;
-    background-color: $input-bg;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     background-clip: padding-box;
-    border: 1px solid $input-border-color;
+
+    background-color: #fff;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid $border-default;
     border-radius: 0.25rem;
+    color: $heading;
     line-height: 1.5;
-    color: $input-color;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
     display: flex;
     flex-flow: row wrap;
 
+
+    &:focus {
+      border: 1px solid $info-dark;
+      box-shadow: 0 0 0 4px $info-light;
+    }
+
     &::after {
       content: '';
       position: absolute;
@@ -50,6 +58,7 @@
     &_no-border {
       padding-left: 0;
       border-color: transparent;
+      box-shadow: unset;
 
       &#{$root}__selected-items_is-invalid {
         border-color: transparent;
@@ -57,7 +66,7 @@
     }
 
     &_is-invalid {
-      border-color: $danger;
+      border-color: red;
     }
 
     &_disabled {
@@ -127,7 +136,7 @@
       left: 50%;
       width: 1px;
       height: 10px;
-      background-color: $text-muted;
+      // background-color: $text-muted;
       content: '';
     }
 
@@ -142,18 +151,18 @@
 
   &__drop-down {
     position: absolute;
-    top: calc(100%);
+    top: calc(100% + 8px);
     left: 0;
     padding: 0.375rem 0;
     width: 100%;
-    z-index: $zindex-dropdown;
-    background-color: $dropdown-bg;
+    z-index: 100;
+    background-color: #fff;
     background-clip: padding-box;
-    border: $dropdown-border-width solid $dropdown-border-width;
-    border-radius: $dropdown-border-radius;
-    box-shadow: $dropdown-box-shadow;
+    border: 1px solid #CCCCCC;
+    border-radius: 10px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
     line-height: 1.5;
-    color: $dropdown-color;
+    color: #152536;
   }
 
   &__drop-down-list {
@@ -179,14 +188,15 @@
     cursor: pointer;
     transition: background-color .2s ease;
     background-color: transparent;
+    border: unset;
 
     &_hover {
       background-color: $dropdown-divider-bg;
     }
 
     &_select {
-      background-color: $dropdown-link-active-bg;
-      color: $dropdown-link-active-color;
+      background-color: #D8CCF6;
+      color: #152536;
     }
   }
   &_size_sm &__drop-down-item {
@@ -196,6 +206,6 @@
     padding: 0.5rem 1rem;
   }
   &__placeholder {
-    color: $input-placeholder-color;
+    color: #fff;
   }
 }

package/form/FileField/FileFieldView.js

@@ -45,7 +45,7 @@ function FileFieldView(props) {
         React.createElement("div", { className: bem(bem.element('files'), 'clearfix') }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid }, item, props.itemProps))); })),
         React.createElement("div", { className: bem.element('button') },
             React.createElement(ButtonComponent, __assign({}, props.buttonProps, { layout: false, label: null }),
-                React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: props.imagesOnly ? 'file-image' : 'file' }),
+                React.createElement(Icon_1["default"], { className: bem.element('button-icon'), name: props.imagesOnly ? 'file-image' : 'upload' }),
                 React.createElement("span", { className: bem.element('button-label') }, props.buttonProps.label)))));
 }
 exports["default"] = FileFieldView;

package/form/Form/FormView.js

@@ -40,7 +40,10 @@ var Field_1 = __importDefault(require("@steroidsjs/core/ui/form/Field"));
 var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 function FormView(props) {
     var bem = hooks_1.useBem('FormView');
-    return (React.createElement("form", { className: bem(bem.block(), props.className, props.layout.layout === 'horizontal' && 'form-horizontal'), onSubmit: props.onSubmit, style: props.style },
+    return (React.createElement("form", { className: bem(bem.block({
+            border: props.isBordered,
+            inline: props.layout.layout === 'inline'
+        }), props.className, props.layout.layout === 'horizontal' && 'form-horizontal'), onSubmit: props.onSubmit, style: props.style },
         props.children,
         (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, (isString_1["default"](field) ? { attribute: field } : field)))); }),
         props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));

package/form/Form/FormView.scss

@@ -1,3 +1,17 @@
 .FormView {
-
-}
+  &_border {
+    padding: 20px;
+    border: 1px solid $border-default;
+    box-sizing: border-box;
+    box-shadow: $shadow-default;
+    border-radius: 0.5rem;
+  }
+  &_inline {
+    display: flex;
+    grid-gap: 20px;
+    align-items: flex-start;
+  }
+  .form-control {
+    display: flex;
+  }
+}

package/form/HtmlField/HtmlFieldView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
+import { IHtmlFieldViewProps } from '@steroidsjs/core/ui/form/HtmlField/HtmlField';
+export default function HtmlFieldView(props: IHtmlFieldViewProps & IBemHocOutput): JSX.Element;

package/form/HtmlField/HtmlFieldView.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var ckeditor5_react_1 = require("@ckeditor/ckeditor5-react");
+var ckeditor5_build_classic_1 = __importDefault(require("@steroidsjs/ckeditor5/packages/ckeditor5-build-classic"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function HtmlFieldView(props) {
+    var bem = hooks_1.useBem('HtmlFieldView');
+    if (process.env.IS_SSR) {
+        return null;
+    }
+    return (React.createElement("div", { className: bem.block() },
+        React.createElement(ckeditor5_react_1.CKEditor, { editor: ckeditor5_build_classic_1["default"], disabled: props.disabled, config: props.editorProps, data: !props.input.value ? '' : props.input.value, onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur })));
+}
+exports["default"] = HtmlFieldView;

package/form/ImageField/ImageFieldModalView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IImageFieldModalViewProps } from '@steroidsjs/core/ui/form/ImageField/ImageField';
+import 'react-image-crop/dist/ReactCrop.css';
+export default function ImageFieldModalView(props: IImageFieldModalViewProps): JSX.Element;

package/form/ImageField/ImageFieldModalView.js

@@ -0,0 +1,55 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var react_1 = require("react");
+var react_image_crop_1 = __importDefault(require("react-image-crop"));
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+require("react-image-crop/dist/ReactCrop.css");
+function ImageFieldModalView(props) {
+    var bem = hooks_1.useBem('ImageFieldModalView');
+    var _a = react_1.useState(props.crop.initialValues), crop = _a[0], setCrop = _a[1];
+    return (React.createElement(Modal_1["default"], { className: bem.block(), title: props.title || __('Выберите область изображения'), onClose: props.onClose, controls: [{
+                label: __(('Сохранить')),
+                onClick: function () {
+                    props.onClose();
+                    props.crop.onSubmit(crop, props.image.id);
+                }
+            }] },
+        React.createElement("div", { className: 'mb-3' },
+            React.createElement(react_image_crop_1["default"], __assign({}, props.crop.reactImageCropProps, { className: bem.element('crop'), src: props.image.url, crop: crop, onChange: setCrop })))));
+}
+exports["default"] = ImageFieldModalView;

package/form/ImageField/ImageFieldModalView.scss

@@ -0,0 +1,7 @@
+.ImageFieldModalView {
+  &__crop img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}

package/form/ImageField/ImageFieldView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IImageFieldViewProps } from "@steroidsjs/core/ui/form/ImageField/ImageField";
+export default function ImageFieldView(props: IImageFieldViewProps): JSX.Element;

package/form/ImageField/ImageFieldView.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+function ImageFieldView(props) {
+    var bem = hooks_1.useBem("ImageFieldView");
+    var item = props.item;
+    return (React.createElement("div", { className: bem.block() }, !item || !item.image ? (React.createElement("button", { className: bem.element("button", {
+            loading: item ? item.progress : false
+        }), onClick: props.onClick },
+        !item || !item.progress ? (React.createElement(Icon_1["default"], { className: bem.element("button-icon"), name: 'plus' })) : (React.createElement("div", { className: bem.element("progress-bar") },
+            React.createElement("div", { className: bem.element("progress-slider"), style: {
+                    width: (item ? item.progress.percent : 0) + "%"
+                } }))),
+        React.createElement("span", { className: bem.element("button-label") }, !item || !item.progress ? props.label : "Uploading..."))) : (React.createElement("div", { className: bem.element("content") },
+        React.createElement("img", { className: bem.element("image"), src: item.image.url, width: item.image.width, height: item.image.height, alt: item.title }),
+        React.createElement("div", { className: bem.element("image-controls") },
+            React.createElement(Icon_1["default"], { className: bem.element("delete-icon"), name: 'trash', onClick: item.onRemove }))))));
+}
+exports["default"] = ImageFieldView;

package/form/ImageField/ImageFieldView.scss

@@ -0,0 +1,108 @@
+.ImageFieldView {
+  $root: &;
+
+  width: 128px;
+  height: 128px;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: #ebebeb;
+    border: 1px dashed #b0b0b0;
+    border-radius: 10px;
+
+    &_loading {
+      pointer-events: none;
+    }
+  }
+
+  &__button-icon {
+    display: flex;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    path {
+      fill: #152536
+    }
+  }
+
+  &__button-label {
+    margin-top: 18px;
+    font-size: 14px;
+    line-height: 140%;
+    color: #152536;
+  }
+
+  &__progress-bar {
+    width: 80px;
+    height: 4px;
+    border-radius: 100px;
+    background: #cccccc;
+    overflow: hidden;
+  }
+
+  &__progress-slider {
+    height: 100%;
+    background: #651fff;
+    transition: width linear 0.1s;
+  }
+
+  &__content {
+    position: relative;
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #cccccc;
+    padding: 5px;
+
+    &:hover {
+      #{$root}__image-controls {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__image-controls {
+    position: absolute;
+    inset: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      opacity: 0.6;
+      background: #343a40;
+      border-radius: 6px;
+    }
+  }
+
+
+  &__image {
+    border-radius: 6px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__delete-icon {
+    position: relative;
+    cursor: pointer;
+
+    path {
+      fill: #ffffff;
+    }
+  }
+}

package/form/InputField/InputFieldView.js

@@ -35,16 +35,21 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function InputFieldView(props) {
     var bem = hooks_1.useBem('InputFieldView');
     return (React.createElement("div", { className: bem(bem.block({
-            disabled: props.inputProps.disabled
+            disabled: props.inputProps.disabled,
+            size: props.size
         }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.className), style: props.style },
         props.addonBefore && (React.createElement("span", { className: bem.element('addon-before') }, props.addonBefore)),
         props.textBefore && (React.createElement("span", { className: bem.element('text-before') }, props.textBefore)),
         props.maskProps
             ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
-                    size: props.size
+                    size: props.size,
+                    disabled: props.inputProps.disabled
                 }), !!props.errors && 'is-invalid') }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required })))
             : (React.createElement("input", __assign({ className: bem(bem.element('input', {
-                    size: props.size
+                    size: props.size,
+                    disabled: props.disabled,
+                    success: props.success,
+                    failed: props.failed
                 }), !!props.errors && 'is-invalid') }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));

package/form/InputField/InputFieldView.scss

@@ -1,47 +1,110 @@
-$addon-padding: 0.6rem;
-$text-padding: 0.4rem;
-
 .InputFieldView {
+  $root: &;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
+  border: $input-border;
+  border-radius: $input-border-radius;
+
+  &_size {
+    &_small {
+      height: $input-height-sm;
+    }
+    &_medium {
+      height: $input-height-md;
+    }
+    &_large {
+      height: $input-height-lg;
+    }
+  }
 
   &:focus-within{
     outline: 0;
-    border-color: $blue;
-    box-shadow: 0 0 0 0.2rem rgba($blue, 0.25);
+    border-color: $border-action;
+    box-shadow: 0 0 0 3px $border-typing, 0 0 0 3px $border-typing;
   }
+
   &.is-invalid:focus-within{
-    border-color: $red;
-    box-shadow: 0 0 0 0.2rem rgba($red, 0.25);
+    border-color: $border-action;
+    box-shadow: 0 0 0 3px $border-typing, 0 0 0 3px $border-typing;
   }
+
   &_disabled {
     color: rgba(0, 0, 0, .25);
-    background-color: rgba($input-border-color, .3);
+    background-color: $back-disabled;
     cursor: not-allowed;
+
     input {
       cursor: inherit;
     }
+
+    &#{$root}_input {
+      background-color: $back-disabled;
+    }
+  }
+
+  &_caption {
+
+  }
+
+  &_failed {
+    background: $back-error;
+    &::after {
+      content: 'Error message';
+      color: $border-error;
+    }
+  }
+
+  &_success {
+    background: $back-success;
+    &::after {
+      content: 'Success message';
+      color: $border-success;
+    }
   }
 
   &__input {
     flex-grow: 1;
     border: none;
     outline: none;
-    background-color: transparent;
-
+    background-color: $white;
+    overflow: hidden;
+    color: $heading;
     padding: $input-padding-y $input-padding-x;
+    border-radius: $input-border-radius;
+
+    &_disabled {
+      color: rgba(0, 0, 0, .25);
+      background: $back-disabled;
+      cursor: not-allowed;
+
+      input {
+        cursor: inherit;
+      }
+    }
+
+    &_failed {
+      box-sizing: border-box;
+    }
+
+    &:active {
+      color: $heading;
+    }
+    &:focus {
+      color: $heading;
+    }
   }
 
   &__addon-before, &__addon-after {
     display: flex;
     align-items: center;
-    padding: 0 $addon-padding;
+    padding: 0 $input-addon-padding;
 
     color: rgba(0, 0, 0, .85);
     text-align: center;
-    background-color: #fafafa;
+    background-color: $back-disabled;
   }
 
   &__addon-before {
@@ -61,11 +124,11 @@ $text-padding: 0.4rem;
   }
 
   &__text-before {
-    padding-left: $text-padding;
+    padding-left: $input-text-padding;
   }
 
   &__text-after {
-    padding-right: $text-padding;
+    padding-right: $input-text-padding;
   }
 
 }

package/form/NumberField/NumberFieldView.js

@@ -58,11 +58,11 @@ function NumberFieldView(props) {
                     disabled: props.inputProps.max && value >= props.inputProps.max
                 }), onClick: onStepUp },
                 React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
-                    React.createElement("path", { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5\n                                    0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39\n                                    17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' }))),
+                    React.createElement("path", { d: 'M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140\n                                    768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1\n                                    391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' }))),
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: props.inputProps.min && value <= props.inputProps.min
                 }), onClick: onStepDown },
                 React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
-                    React.createElement("path", { d: 'M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140\n                                    768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1\n                                    391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' })))))));
+                    React.createElement("path", { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5\n                                    0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39\n                                    17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' })))))));
 }
 exports["default"] = NumberFieldView;