@steroidsjs/bootstrap 3.0.0-beta.111 → 3.0.0-beta.113

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -6,6 +6,7 @@ interface IAsideCalendarsProps {
     eventGroupsTitle: string;
     selectedCalendarGroupsIds: number[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
+    openCreateEventGroupModal: () => void;
 }
 declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -36,6 +36,8 @@ function AsideCalendars(props) {
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(content_1.Accordion, null,
             react_1["default"].createElement(content_1.AccordionItem, { title: props.eventGroupsTitle },
-                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, selectedIds: props.selectedCalendarGroupsIds, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } })))));
+                react_1["default"].createElement(form_1.CheckboxListField, { items: props.eventGroups, selectedIds: props.selectedCalendarGroupsIds, onChange: function (selectedIds) { return props.onChangeEventGroupsIds(selectedIds); } }),
+                react_1["default"].createElement(form_1.Button, { color: 'basic', className: bem.element('add'), onClick: props.openCreateEventGroupModal, size: 'sm' },
+                    react_1["default"].createElement(content_1.Icon, { name: "add_16x16" }))))));
 }
 exports["default"] = (0, react_1.memo)(AsideCalendars);

package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss

@@ -14,6 +14,8 @@ $calendar-system-icon-background-color: var(--calendar-system-icon-background-co
 $calendar-system-separator-color: var(--calendar-system-separator-color);
 
 .AsideCalendars {
+    $root: &;
+
     position: relative;
 
     &::before {
@@ -58,6 +60,10 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
         &__content {
             padding: 0;
             padding-top: 0;
+
+            > .FieldLayoutView { 
+                margin-bottom: 0;
+            }
         }
 
         &__content_visible {
@@ -78,4 +84,24 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
             }
         }
     }
+
+    &__add {
+        width: 24px;
+        height: 24px;
+        max-width: 24px;
+        min-width: auto;
+        padding: 4px;
+        position: relative;
+        margin-top: 8px;
+
+        svg {
+            position: absolute;
+            width: 100%;
+            width: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+    }
 }

package/content/CalendarSystem/CalendarSystemEventGroupModalView.d.ts

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

package/content/CalendarSystem/CalendarSystemEventGroupModalView.js

@@ -0,0 +1,25 @@
+"use strict";
+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 Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+function CalendarSystemEventGroupModalView(props) {
+    var bem = (0, hooks_1.useBem)('CalendarSystemEventGroupModalView');
+    return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новая группа') : __('Редактирование группы'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('form'), onSubmit: function (fields) {
+                props.onEventGroupSubmit(fields);
+                props.onClose();
+            }, submitLabel: props.isCreate ? __('Создать') : __('Сохранить') },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('label'), content: __('Имя') }),
+                react_1["default"].createElement(form_1.InputField, { attribute: 'label', required: true, className: bem.element('name-field') })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('label'), content: __('Выбор цвета') }),
+                react_1["default"].createElement(form_1.InputField, { type: 'color', required: true, attribute: 'color' })))));
+}
+exports["default"] = CalendarSystemEventGroupModalView;

package/content/CalendarSystem/CalendarSystemEventGroupModalView.scss

@@ -0,0 +1,53 @@
+@use "style/variables";
+
+.CalendarSystemEventGroupModalView {
+    $root: &;
+    width: 584px;
+
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+
+    .ModalView__header {
+        .ModalView__title {
+            font-size: variables.$font-size-lg;
+            font-weight: variables.$font-weight-lg;
+            line-height: variables.$line-height-lg;
+        }
+    }
+
+    &__form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            gap: 12px;
+
+            &:nth-child(2) .FieldLayoutView .InputFieldView{ 
+                width: 120px;
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 380px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+    }
+}

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -25,7 +25,7 @@ function CalendarSystemModalView(props) {
             react_1["default"].createElement("div", null,
                 react_1["default"].createElement(Text_1["default"], { content: __('Наименование'), className: bem.element('label') }),
                 react_1["default"].createElement(form_1.InputField, { attribute: 'title', required: true, className: bem.element('name-field') }),
-                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", required: true, itemsContent: {
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, outline: true, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", required: true, itemsContent: {
                         type: 'checkbox'
                     } })),
             react_1["default"].createElement("div", null,

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -64,11 +64,15 @@
             max-width: 420px;
         }
 
-        .DropDownFieldView_primary {
+        .DropDownFieldView_outline_primary {
             width: 300px;
-
+            border-color: variables.$element-border-color;
             background-color: variables.$element-field-background-color;
 
+            &:hover {
+                border-color: variables.$element-border-color;
+            }
+
             .CheckboxFieldView__label-text {
                 display: -webkit-box;
                 overflow: hidden;

package/content/CalendarSystem/CalendarSystemView.js

@@ -18,7 +18,7 @@ function CalendarSystemView(props) {
         react_1["default"].createElement("aside", { className: bem.element('aside') },
             react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
             react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onMonthChange }),
-            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds })),
+            react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
         react_1["default"].createElement("div", { className: bem.element('content') },
             react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.onChangeCalendarType, applyControl: props.applyControl }),
             props.calendarType === CalendarType_1["default"].MONTH

package/content/Dashboard/DashboardItemView.d.ts

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

package/content/Dashboard/DashboardItemView.js

@@ -0,0 +1,15 @@
+"use strict";
+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 typography_1 = require("@steroidsjs/core/ui/typography");
+function DashboardItemView(props) {
+    var bem = (0, hooks_1.useBem)('DashboardItemView');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement(typography_1.Title, { content: props.title, type: 'h3' }),
+        props.children));
+}
+exports["default"] = DashboardItemView;

package/content/Dashboard/DashboardItemView.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+.DashboardItemView {
+  padding: 15px;
+  border-radius: 12px;
+  background-color: variables.$white;
+}

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',

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/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;
     };

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"]; }
     },

package/index.scss

@@ -15,8 +15,10 @@
 @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/CalendarSystemModal/CalendarSystemModalView');
+@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');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.111",
+    "version": "3.0.0-beta.113",
     "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.96",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.98",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",