@steroidsjs/bootstrap 3.0.0-beta.11 → 3.0.0-beta.110

package/content/Calendar/CaptionElement.scss

@@ -1,133 +1,195 @@
-.CaptionElement {
-  height: 45px;
-  display: table-caption;
-  padding: 0 10px;
-  border-bottom: 1px solid $border-color;
+@use "../../scss/variables";
+@use "../../scss/mixins";
+
+:root {
+    --caption-arrow-background-color: #f1f5f7;
+    --caption-arrow-color: #323232;
+    --caption-header-month-background-color: #f1f5f7;
+    --separator-background-color: rgba(0, 0, 0, 0.1);
+}
 
-  & > div {
-    font-size: 14px;
-  }
+html[data-theme="dark"] {
+    --caption-arrow-background-color: var(--gray);
+    --caption-arrow-color: #ffffff;
+    --caption-header-month-background-color: #333646;
+    --separator-background-color: rgba(255, 255, 255, 0.1);
+}
 
-  &__container {
-    height: 100%;
-    display: flex;
-  }
+$caption-arrow-background-color: var(--caption-arrow-background-color);
+$caption-arrow-color: var(--caption-arrow-color);
+$caption-header-month-background-color: var(--caption-header-month-background-color);
+$separator-background-color: var(--separator-background-color);
 
-  &__content-container {
-    margin: 0 auto;
+.CaptionElement {
+    $root: &;
+
+    height: 24px;
+    width: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &-icons {
+            display: flex;
+            flex-flow: row nowrap;
+            column-gap: 8px;
+        }
+    }
 
-    cursor: pointer;
-    transition: color .1s ease-in;
+    &__content-container {
+        margin-right: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    &:hover, &:active, &:focus {
-      color: $calendar-primary-color;
-    }
-  }
+        cursor: pointer;
+        transition: color 0.1s ease-in;
 
-  &__button {
-    width: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+        font-weight: variables.$font-weight-lg;
+        font-size: variables.$font-size-lg;
+        line-height: variables.$line-height-lg;
 
-    &.IconView svg {
-      width: 12px;
-      fill: rgba(0, 0, 0, 0.25);
-      transition: fill .1s ease-in;
+        &:hover,
+        &:active,
+        &:focus {
+            color: variables.$calendar-primary-color;
+        }
     }
 
-    &_one-arrow.IconView svg {
-      width: 8px;
+    &__button {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        rect {
+            fill: $caption-arrow-background-color;
+        }
+        path {
+            stroke: $caption-arrow-color;
+        }
     }
 
-    &:hover svg {
-      fill: rgba(0, 0, 0, .7);
-    }
-  }
-
-  &__selected-month, &__selected-year {
-    font-size: 16px;
-  }
-
-  &__selected-month {
-    margin-right: 5px;
-  }
-
-  // Panel changing Month/Year
-
-
-  &__panel {
-    z-index: 10;
-    position: absolute;
-    top: 45px;
-    left: 0;
-    right: 0;
-    bottom: 50px;
-    background-color: $white;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 0fr 1fr;
-    gap: 0 0;
-    grid-template-areas:
-      "HeaderMonths HeaderMonths HeaderYears"
-      "Months1stCol Months2ndCol YearsCol";
-
-    &_full-height {
-      bottom: 0;
+    &__selected-month,
+    &__selected-year {
+        font-size: inherit;
     }
-  }
-
-  &__panel-header {
-    padding: 5px;
-
-    text-align: center;
-    border-bottom: 1px solid $border-color;
-    background-color: $calendar-primary-light-color;
 
-    &_months {
-      grid-area: HeaderMonths;
-      border-right: 1px solid $border-color;
+    &__selected-month {
+        margin-right: 5px;
     }
 
-    &_years {
-      grid-area: HeaderYears;
+    // Panel changing Month/Year
+    &__panel {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 10;
+        position: absolute;
+        top: 45px;
+        left: 0;
+        right: 0;
+        bottom: 50px;
+        background-color: variables.$element-background-color;
+        margin-bottom: 12px;
+        max-height: 294px;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 0fr 1fr;
+        gap: 0 0;
+        grid-template-areas:
+            "HeaderMonths HeaderMonths HeaderYears"
+            "Months1stCol Months2ndCol YearsCol";
+
+        &_full-height {
+            bottom: 0;
+        }
     }
-  }
 
-  &__panel-column-months {
-    border-right: 1px solid $border-color;
-
-    &_first {
-      grid-area: Months1stCol;
+    &__panel-header {
+        padding: 5px;
+
+        text-align: center;
+        background-color: $caption-header-month-background-color;
+        font-weight: variables.$font-weight-lg;
+
+        &_months {
+            height: 32px;
+            position: relative;
+            grid-area: HeaderMonths;
+            border-radius: 8px 0px 0px 8px;
+
+            //Separator
+            &::before {
+                display: block;
+                content: "";
+                position: absolute;
+                width: 1px;
+                height: 20px;
+                top: 50%;
+                right: 0;
+                background-color: $separator-background-color;
+                transform: translateY(-50%);
+            }
+        }
+
+        &_years {
+            grid-area: HeaderYears;
+            border-radius: 0px 8px 8px 0px;
+        }
     }
 
-    &_second {
-      grid-area: Months2ndCol;
-    }
-  }
+    &__panel-column {
+        &-months {
+            border-right: 1px solid $separator-background-color;
 
-  &__panel-column-years {
-    height: 100%;
-    grid-area: YearsCol;
-    overflow: auto;
-  }
+            &_first {
+                grid-area: Months1stCol;
+            }
 
-  &__panel-cell {
-    padding: 5px 15px;
-    cursor: pointer;
+            &_second {
+                grid-area: Months2ndCol;
+            }
+        }
 
-    &_selected {
-      background-color: $calendar-primary-light-color;
+        &-years {
+            grid-area: YearsCol;
+            @include mixins.scrollWrapper(294px, 0, variables.$scroll-thumb-color, variables.$scroll-track-color);
+        }
     }
 
-    transition: background-color .1s ease-in;
-
-    &:hover {
-      background-color: $calendar-secondary-light-color;
+    &__panel-cell {
+        &:first-child {
+            margin-top: 10px;
+        }
+        display: block;
+        width: fit-content;
+        background-color: variables.$element-background-color;
+        padding: 4px 8px;
+        cursor: pointer;
+        transition: background-color 0.1s ease-in;
+        margin: 0 auto;
+        border-radius: variables.$radius-large;
+
+        &_selected {
+            background-color: variables.$primary-light;
+        }
+
+        &:hover {
+            background-color: variables.$primary-light;
+        }
+
+        #{$root}__cell-value {
+            text-align: center;
+        }
     }
-  }
 }

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IEventGroup } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './AsideCalendars.scss';
+interface IAsideCalendarsProps {
+    eventGroups: IEventGroup[];
+    eventGroupsTitle: string;
+    selectedCalendarGroupsIds: number[];
+    onChangeEventGroupsIds: (selectedIds: number[]) => void;
+}
+declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;
+export default _default;

package/content/CalendarSystem/AsideCalendars/AsideCalendars.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideCalendars.scss");
+function AsideCalendars(props) {
+    var bem = (0, useBem_1["default"])('AsideCalendars');
+    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); } })))));
+}
+exports["default"] = (0, react_1.memo)(AsideCalendars);

package/content/CalendarSystem/AsideCalendars/AsideCalendars.scss

@@ -0,0 +1,81 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-icon-background-color: #f1f5f7;
+    --calendar-system-icon-chevron-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-icon-background-color: #4b4e5e;
+    --calendar-system-separator-color: rgba(255, 255, 255, 0.1);
+}
+
+$calendar-system-icon-background-color: var(--calendar-system-icon-background-color);
+$calendar-system-separator-color: var(--calendar-system-separator-color);
+
+.AsideCalendars {
+    position: relative;
+
+    &::before {
+        content: "";
+        display: block;
+        position: relative;
+        height: 1px;
+        width: 100%;
+        margin: 32px 0px;
+
+        background-color: $calendar-system-separator-color;
+    }
+
+    .AccordionItemView {
+        width: 100%;
+
+        &_opened {
+            overflow: visible;
+        }
+
+        &__icon-chevron {
+            box-shadow: none;
+
+            svg {
+                rect {
+                    fill: $calendar-system-icon-background-color;
+                }
+                path {
+                    stroke: variables.$icon-color;
+                }
+            }
+        }
+
+        &__icon-wrapper {
+            top: 14px;
+        }
+
+        &__header-container {
+            background-color: variables.$element-background-color;
+        }
+
+        &__content {
+            padding: 0;
+            padding-top: 0;
+        }
+
+        &__content_visible {
+            padding: 0;
+            border: none;
+            overflow: visible;
+        }
+
+        &__title-container {
+            width: 238px;
+            padding-left: 0;
+            padding-top: 12px;
+
+            p {
+                font-size: variables.$font-size-16;
+                font-weight: variables.$font-weight-lg;
+                line-height: variables.$line-height-22;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+import AsideCalendars from './AsideCalendars';
+export default AsideCalendars;

package/content/CalendarSystem/AsideCalendars/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
+exports["default"] = AsideCalendars_1["default"];

package/content/CalendarSystem/AsideHeader/AsideHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './AsideHeader.scss';
+interface IAsideHeaderProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare function AsideHeader(props: IAsideHeaderProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AsideHeader>;
+export default _default;

package/content/CalendarSystem/AsideHeader/AsideHeader.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title/Title"));
+var form_1 = require("@steroidsjs/core/ui/form");
+require("./AsideHeader.scss");
+function AsideHeader(props) {
+    var bem = (0, useBem_1["default"])('AsideHeader');
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className) },
+        react_1["default"].createElement(Title_1["default"], { content: __('Календарь'), className: bem.element('title') }),
+        react_1["default"].createElement(form_1.Button, { icon: "add", size: "sm", label: __('Создать'), className: bem.element('create'), onClick: props.onClick })));
+}
+exports["default"] = (0, react_1.memo)(AsideHeader);

package/content/CalendarSystem/AsideHeader/AsideHeader.scss

@@ -0,0 +1,41 @@
+@use "style/variables";
+
+.AsideHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__title {
+        font-size: variables.$font-size-24;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-32;
+        color: variables.$text-color;
+        margin-bottom: 0;
+    }
+
+    .ButtonView {
+        width: auto;
+        height: 34px;
+        border: none;
+        padding: 5px 12px;
+
+        &__label {
+            gap: 4px;
+        }
+
+        &__text {
+            font-size: variables.$font-size-14;
+            font-weight: variables.$font-weight-sm;
+            line-height: variables.$line-height-24;
+        }
+
+        &__icon {
+            margin: 0;
+            svg path,
+            rect,
+            circle {
+                stroke: #FFFFFF;
+            }
+        }
+    }
+}

package/content/CalendarSystem/AsideHeader/index.d.ts

@@ -0,0 +1,2 @@
+import AsideHeader from './AsideHeader';
+export default AsideHeader;

package/content/CalendarSystem/AsideHeader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var AsideHeader_1 = __importDefault(require("./AsideHeader"));
+exports["default"] = AsideHeader_1["default"];

package/content/CalendarSystem/CalendarSystemModalView.d.ts

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

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable no-undef */
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+function CalendarSystemModalView(props) {
+    var bem = (0, useBem_1["default"])('CalendarSystemModalView');
+    var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
+    var callOnEventSubmit = function (fields) {
+        return eventInitialValues ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
+    };
+    return (react_1["default"].createElement(Modal_1["default"], { title: eventInitialValues ? __('Редактирование события') : __('Новое событие'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), onSubmit: function (fields) {
+                callOnEventSubmit(fields);
+                props.onClose();
+            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: (0, isEmpty_1["default"])(eventInitialValues) ? __('Создать') : __('Сохранить') },
+            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: {
+                        type: 'checkbox'
+                    } })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Время и дата'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'date', required: true })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Описание'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })))));
+}
+exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -0,0 +1,80 @@
+@use "style/variables";
+
+.CalendarSystemModalView {
+    $root: &;
+    width: 941px;
+
+    .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;
+        }
+    }
+
+    .ModalView__content {
+        padding: 0;
+    }
+
+    &__default-form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            gap: 12px;
+
+            &:nth-child(3) {
+                > .FieldLayoutView {
+                    width: calc(84%);
+
+                    .TextFieldView textarea {
+                        height: 160px;
+                    }
+                }
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 585px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+
+        .InputFieldView {
+            max-width: 420px;
+        }
+
+        .DropDownFieldView_primary {
+            width: 300px;
+
+            background-color: variables.$element-field-background-color;
+
+            .CheckboxFieldView__label-text {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}