@steroidsjs/bootstrap 3.0.0-beta.107 → 3.0.0-beta.109

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/TagsSelector.scss

@@ -0,0 +1,30 @@
+@use "../../../../../../../../scss/variables";
+
+.TagsSelector {
+  $root: &;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  $tag-types: (
+          "primary": variables.$primary,
+          "secondary": variables.$secondary,
+          "success": variables.$success,
+          "danger": variables.$danger,
+          "warning": variables.$warning,
+          "info": variables.$info,
+  );
+
+  @each $type, $color in $tag-types {
+    &__tag-color_#{$type} {
+      background-color: $color;
+    }
+  }
+
+  &__tag-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 4px;
+  }
+}

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/index.d.ts

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

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/views/TagsSelector/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 TagsSelector_1 = __importDefault(require("./TagsSelector"));
+exports["default"] = TagsSelector_1["default"];

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/TaskDetailsModalContentView.d.ts

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

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/TaskDetailsModalContentView.js

@@ -0,0 +1,53 @@
+"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 content_1 = require("@steroidsjs/core/ui/content");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var KanbanPrioritiesEnum_1 = __importDefault(require("@steroidsjs/core/ui/content/Kanban/enums/KanbanPrioritiesEnum"));
+function TaskDetailsModalContentView(props) {
+    var _a;
+    var _b = props.task, tags = _b.tags, priority = _b.priority, description = _b.description, assigner = _b.assigner;
+    var toTags = (0, react_1.useCallback)(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type })); }, []);
+    var priorityLabel = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getLabel(priority === null || priority === void 0 ? void 0 : priority.type); }, [priority === null || priority === void 0 ? void 0 : priority.type]);
+    var priorityColor = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getColorByType(priority === null || priority === void 0 ? void 0 : priority.type); }, [priority === null || priority === void 0 ? void 0 : priority.type]);
+    return (react_1["default"].createElement("div", { className: props.bem.element('content') },
+        description && (react_1["default"].createElement(typography_1.Text, { type: "body", content: description, tag: "p" })),
+        !!(tags === null || tags === void 0 ? void 0 : tags.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags') }, tags.map(toTags))),
+        react_1["default"].createElement("div", { className: props.bem.element('row') },
+            react_1["default"].createElement(typography_1.Text, { className: props.bem.element('label'), type: 'body3', content: __('Приоритет'), color: "light-dark" }),
+            react_1["default"].createElement("div", { className: props.bem.element('data') },
+                react_1["default"].createElement(content_1.Badge, { size: "md", roundingStyle: "squarer", message: priorityLabel, type: priorityColor }))),
+        assigner && (react_1["default"].createElement("div", { className: props.bem.element('row') },
+            react_1["default"].createElement(typography_1.Text, { className: props.bem.element('label'), type: 'body3', content: __('Исполнитель'), color: "light-dark" }),
+            react_1["default"].createElement("div", { className: props.bem.element('data') },
+                react_1["default"].createElement("div", { className: props.bem.element('assigner') },
+                    react_1["default"].createElement(content_1.Avatar, { src: (_a = assigner.avatar) === null || _a === void 0 ? void 0 : _a.src, title: assigner.firstName, size: 'sm' }),
+                    react_1["default"].createElement(typography_1.Text, { type: "body", content: "".concat(assigner.firstName || '', " ").concat(assigner.lastName || '') })))))));
+}
+exports["default"] = TaskDetailsModalContentView;

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/index.d.ts

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

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/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 TaskDetailsModalContentView_1 = __importDefault(require("./TaskDetailsModalContentView"));
+exports["default"] = TaskDetailsModalContentView_1["default"];

package/content/Kanban/views/KanbanTask/KanbanTaskView.js

@@ -44,20 +44,23 @@ var typography_1 = require("@steroidsjs/core/ui/typography");
 var TaskTags_1 = __importDefault(require("../TaskTags"));
 function KanbanTaskView(props) {
     var bem = (0, hooks_1.useBem)('KanbanTaskView');
-    var _a = props.task, id = _a.id, title = _a.title, description = _a.description, tags = _a.tags, assigner = _a.assigner, status = _a.status;
+    var _a = props.task, id = _a.id, title = _a.title, description = _a.description, tags = _a.tags, assigner = _a.assigner, priority = _a.priority;
     var Draggable = props.draggableComponent;
-    return (react_1["default"].createElement(Draggable, { draggableId: id, index: props.index }, function (provided) { return (react_1["default"].createElement("div", __assign({ className: bem.block() }, provided.draggableProps, provided.dragHandleProps, { ref: provided.innerRef }),
-        react_1["default"].createElement("div", { className: bem.element('wrapper') },
-            react_1["default"].createElement("div", { className: bem.element('content') },
-                react_1["default"].createElement("div", { className: bem.element('header') },
-                    react_1["default"].createElement("h4", { className: bem.element('title'), "aria-hidden": "true" },
-                        react_1["default"].createElement("span", { className: bem.element('task-id') }, __("#".concat(id, " "))),
-                        title)),
-                description && (react_1["default"].createElement(typography_1.Text, { type: 'body2', content: description, className: bem.element('description') }))),
-            react_1["default"].createElement("div", { className: bem.element('footer') },
-                tags && (react_1["default"].createElement(TaskTags_1["default"], { tags: tags })),
-                assigner && (react_1["default"].createElement("div", { className: bem.element('assigner') },
-                    react_1["default"].createElement(Avatar_1["default"], __assign({}, assigner.avatar, { size: 'sm' })))))),
-        status && (react_1["default"].createElement("span", { className: bem.element('status', !!status && "".concat(status.type)) })))); }));
+    return (react_1["default"].createElement(Draggable, { draggableId: id.toString(), index: props.index }, function (provided) {
+        var _a;
+        return (react_1["default"].createElement("div", __assign({ className: bem.block() }, provided.draggableProps, provided.dragHandleProps, { ref: provided.innerRef }),
+            react_1["default"].createElement("div", { className: bem.element('wrapper') },
+                react_1["default"].createElement("div", { className: bem.element('content') },
+                    react_1["default"].createElement("div", { className: bem.element('header') },
+                        react_1["default"].createElement("h4", { className: bem.element('title'), "aria-hidden": "true", onClick: function () { return props.onOpenTaskDetailsModal(props.task, props.columnId); } },
+                            react_1["default"].createElement("span", { className: bem.element('task-id') }, __("#".concat(id, " "))),
+                            title)),
+                    description && (react_1["default"].createElement(typography_1.Text, { type: 'body2', content: description, className: bem.element('description') }))),
+                react_1["default"].createElement("div", { className: bem.element('footer') },
+                    tags && (react_1["default"].createElement(TaskTags_1["default"], { tags: tags })),
+                    assigner && (react_1["default"].createElement("div", { className: bem.element('assigner') },
+                        react_1["default"].createElement(Avatar_1["default"], { src: (_a = assigner.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(assigner.firstName, " ").concat(assigner.lastName), size: 'sm' }))))),
+            priority && (react_1["default"].createElement("span", { className: bem.element('priority', !!priority && "".concat(priority.type)) }))));
+    }));
 }
 exports["default"] = (0, react_1.memo)(KanbanTaskView);

package/content/Kanban/views/KanbanTask/KanbanTaskView.scss

@@ -1,5 +1,15 @@
 @use "../../../../scss/variables";
 
+:root {
+  --kanban-background-color: #fff;
+}
+
+html[data-theme="dark"] {
+  --kanban-background-color: #333646;
+}
+
+$kanban-background-color: var(--kanban-background-color);
+
 .KanbanTaskView {
   $root: &;
 
@@ -17,7 +27,7 @@
     border: 1px solid variables.$element-border-color;
     border-radius: variables.$radius-small;
     color: variables.$text-color;
-    background-color: variables.$element-background-color;
+    background-color: $kanban-background-color;
 
     position: relative;
     display: flex;
@@ -25,18 +35,18 @@
     padding: 16px;
   }
 
-  $card-statuses: (
+  $card-priorities: (
           "high": variables.$danger,
           "middle": variables.$warning,
   );
 
-  @each $status, $color in $card-statuses {
-    &__status_#{$status} {
+  @each $priority, $color in $card-priorities {
+    &__priority_#{$priority} {
       background-color: $color;
     }
   }
 
-  &__status {
+  &__priority {
     position: absolute;
     top: 0;
     left: 0;

package/content/Kanban/views/TaskTags/TaskTags.d.ts

@@ -2,6 +2,8 @@ import { ITaskTag } from '@steroidsjs/core/ui/content/Kanban/Kanban';
 import './TaskTags.scss';
 interface ITaskTagsProps {
     tags: ITaskTag[];
+    showClose?: boolean;
+    onClose?: (id: number) => void;
 }
 export default function TaskTags(props: ITaskTagsProps): JSX.Element;
 export {};

package/content/Kanban/views/TaskTags/TaskTags.js

@@ -9,6 +9,6 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 require("./TaskTags.scss");
 function TaskTags(props) {
     var bem = (0, hooks_1.useBem)('TaskTags');
-    return (react_1["default"].createElement("div", { className: bem.element('wrapper') }, props.tags.map(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type })); })));
+    return (react_1["default"].createElement("div", { className: bem.block() }, props.tags.map(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type, showClose: props.showClose, onClose: function () { return props.onClose(tag.id); } })); })));
 }
 exports["default"] = TaskTags;

package/content/Kanban/views/TaskTags/TaskTags.scss

@@ -1,9 +1,7 @@
 .TaskTags {
-  &__wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-    flex-grow: 0;
-    gap: 4px;
-  }
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  flex-grow: 0;
+  gap: 4px;
 }

package/form/DropDownField/DropDownFieldView.scss

@@ -419,8 +419,9 @@ $drop-down-color-themes: map.merge(
         right: 36px;
         transform: translateY(-50%);
 
-        path {
-            stroke-width: 1.5px;
+        svg > * {
+            stroke: variables.$text-color
         }
+
     }
 }

package/form/InputField/InputFieldView.js

@@ -69,10 +69,10 @@ function InputFieldView(props) {
             props.maskOptions
                 ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
+                    })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
+                    })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
             !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         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/index.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
     'content.KanbanTaskView': {
         lazy: () => any;
     };
+    'content.KanbanModalView': {
+        lazy: () => any;
+    };
     'content.CalendarSystemView': {
         lazy: () => any;
     };

package/index.js

@@ -53,6 +53,9 @@ exports["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"]; }
     },

package/index.scss

@@ -27,6 +27,7 @@
 @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('crud/Crud/CrudView');
 @include meta.load-css('form/AutoCompleteField/AutoCompleteFieldView');
 @include meta.load-css('form/Button/ButtonView');

package/package.json

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

package/scss/mixins/button.scss

@@ -1,9 +1,10 @@
 @use "sass:map";
 @use "../variables/common/colors";
+@use "../variables/index" as variables;
 
 @mixin svg-color($color) {
     svg {
-        path { 
+        path {
             stroke: $color;
         }
     }
@@ -18,7 +19,9 @@
     }
     &:focus,
     &:focus-visible {
-        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
+        box-shadow:
+            0 0 0 4px map.get($colorMap, color-light),
+            0 0 0 4px map.get($colorMap, color-light);
     }
     &:active {
         background-color: map.get($colorMap, color-light);
@@ -29,12 +32,12 @@
         color: map.get($colorMap, text-color);
     }
 
-    #{$root}__loader { 
+    #{$root}__loader {
         svg {
-            path { 
+            path {
                 stroke: map.get($colorMap, color-light);
 
-                @if ($colorName == 'basic' ) {
+                @if ($colorName == "basic") {
                     stroke: map.get($colorMap, color-dark);
                 }
             }
@@ -64,7 +67,9 @@
         border-color: map.get($colorMap, color-dark);
     }
     &:focus {
-        box-shadow: 0 0 0 4px map.get($colorMap, color-light), 0 0 0 4px map.get($colorMap, color-light);
+        box-shadow:
+            0 0 0 4px map.get($colorMap, color-light),
+            0 0 0 4px map.get($colorMap, color-light);
         border: 1px solid transparent;
     }
     &:active {
@@ -84,9 +89,20 @@
 
     @if ($colorName == "basic") {
         color: colors.$text-color;
-    } 
+    }
 
-    #{$root}__loader { 
+    #{$root}__loader {
         @include svg-color(map.get($colorMap, color));
     }
 }
+
+@mixin expand-button() {
+    font-size: variables.$font-size-xs;
+    font-weight: variables.$font-weight-sm;
+    line-height: variables.$line-height-xs;
+    text-align: center;
+
+    .ButtonView__text {
+        color: variables.$text-color;
+    }
+}

package/scss/mixins/index.scss

@@ -4,3 +4,4 @@
 @forward "customMixins";
 @forward "date";
 @forward "navs";
+@forward "tooltip";

package/scss/mixins/tooltip.scss

@@ -0,0 +1,23 @@
+@use "../variables/index" as variables;
+
+:root {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+
+html[data-theme="dark"] {
+    --tooltip-background-color: rgba(255, 255, 255, 0.4);
+}
+$tooltip-background-color: var(--tooltip-background-color);
+
+@mixin calendar-tooltip() {
+    background-color: $tooltip-background-color;
+    border-radius: 4px;
+
+    .TooltipView__arrow {
+        display: none;
+    }
+
+    .TooltipView__content {
+        color: variables.$text-color;
+    }
+}

package/scss/variables/common/colors.scss

@@ -45,6 +45,7 @@
     --element-background-color: #FFFFFF;
     --element-background-color-disabled: #f1f5f7;
     --element-field-background-color: #FFFFFF;
+    --element-light-label-color: rgba(0, 0, 0, 0.6);
 
     --scroll-thumb-color: #cbd5db;
     --scroll-track-color: #f1f5f7;
@@ -101,6 +102,7 @@ html[data-theme="dark"] {
     --element-background-color: #191B1F;
     --element-background-color-disabled: #333646;
     --element-field-background-color: #101216;
+    --element-light-label-color: #fff;
 
     --scroll-thumb-color: #333646;
     --scroll-track-color: #26272f;
@@ -140,7 +142,7 @@ $gray: var(--gray);
 $light-gray: var(--light-gray);
 
 $additional-gray-dark: var(--additional-gray-dark);
-$additional-light-gray: var(--additional-gray);
+$additional-light-gray: var(--additional-light-gray);
 $additional-light-blue: var(--additional-light-blue);
 
 $text-color: var(--text-color);
@@ -156,6 +158,7 @@ $element-border-color-hover: var(--element-border-color-hover);
 $element-background-color: var(--element-background-color);
 $element-background-color-disabled: var(--element-background-color-disabled);
 $element-field-background-color: var(--element-field-background-color);
+$element-light-label-color: var(--element-light-label-color);
 
 
 $scroll-thumb-color: var(--scroll-thumb-color);
@@ -266,4 +269,4 @@ $diagram-colors: map.merge(
         ),
     ),
     $diagram-colors
-);
+);

package/scss/variables/common/typography.scss

@@ -89,6 +89,12 @@ $text-types: map.merge(
             "line-height": $line-height-sm,
             "color": colors.$text-color,
         ),
+        "body3": (
+            "font-size": $font-size-xs,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-xs,
+            "color": colors.$text-color,
+        ),
         "span": (
             "font-size": $font-size-base,
             "font-weight": $font-weight-sm,
@@ -113,4 +119,5 @@ $typography-colors: (
     "danger": colors.$danger,
     "warning": colors.$warning,
     "info": colors.$info,
+    "light-dark": colors.$element-light-label-color,
 ) !default;

package/utils/getFormattedExpandLabel.d.ts

@@ -0,0 +1 @@
+export declare const getFormattedExpandRestLabel: (rest: any[]) => string;

package/utils/getFormattedExpandLabel.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.getFormattedExpandRestLabel = void 0;
+var getFormattedExpandRestLabel = function (rest) { return "".concat(__('Показать ещё'), " +").concat(rest.length); };
+exports.getFormattedExpandRestLabel = getFormattedExpandRestLabel;