@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.120

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

@@ -0,0 +1,66 @@
+"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;
+    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 hooks_1 = require("@steroidsjs/core/hooks");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+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, priority = _a.priority;
+    var Draggable = props.draggableComponent;
+    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

@@ -0,0 +1,110 @@
+@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: &;
+
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  flex: 1 0 auto;
+  overflow: hidden;
+  height: fit-content;
+  width: 100%;
+  margin-bottom: 8px;
+  border-radius: variables.$radius-small;
+
+  &__wrapper {
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-small;
+    color: variables.$text-color;
+    background-color: $kanban-background-color;
+
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    padding: 16px;
+  }
+
+  $card-priorities: (
+          "high": variables.$danger,
+          "middle": variables.$warning,
+  );
+
+  @each $priority, $color in $card-priorities {
+    &__priority_#{$priority} {
+      background-color: $color;
+    }
+  }
+
+  &__priority {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    row-gap: 8px;
+    font-size: 14px;
+  }
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  &__description {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__task-id {
+    color: variables.$element-placeholder-color;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    margin-top: 16px;
+  }
+
+  &__assigner {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 1;
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  .TextView {
+    margin: 0;
+  }
+}

package/content/Kanban/views/KanbanTask/index.d.ts

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

package/content/Kanban/views/KanbanTask/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 KanbanTaskView_1 = __importDefault(require("./KanbanTaskView"));
+exports["default"] = KanbanTaskView_1["default"];

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,14 @@
+"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 content_1 = require("@steroidsjs/core/ui/content");
+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.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

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

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

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

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

package/content/Menu/MenuItemView.d.ts

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

package/content/Menu/MenuItemView.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 hooks_1 = require("@steroidsjs/core/hooks");
+var react_1 = __importDefault(require("react"));
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuItemView(props) {
+    var bem = (0, hooks_1.useBem)('MenuItemView');
+    return (react_1["default"].createElement("div", { onClick: props.onClick, className: bem.block({ hasBorder: props.hasBorder, noneIcon: !props.icon }) },
+        props.icon && (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') }),
+        react_1["default"].createElement("span", { className: bem.element('label') }, props.label)));
+}
+exports["default"] = MenuItemView;

package/content/Menu/MenuItemView.scss

@@ -0,0 +1,67 @@
+@use "../../scss/variables";
+
+:root {
+    --color-menu-item: #323232;
+    --color-border: rgba(0, 0, 0, 0.1);
+  }
+  
+  html[data-theme="dark"] { 
+    --color-menu-item: #ffffff;
+    --color-border: rgba(255, 255, 255, 0.1);
+  }
+
+  $icon-size: 20px;
+
+  $color-menu-item: var(--color-menu-item);
+  $color-border: var(--color-border);
+
+.MenuItemView {
+    cursor: pointer;
+    display: flex;
+    padding: 8px 12px;
+
+    &:first-child {
+      border-top-right-radius: 12px;
+      border-top-left-radius: 12px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+
+    &__label {
+        color: $color-menu-item;
+        font-size: variables.$font-size-xs;
+        line-height: variables.$line-height-xs;
+    }
+
+    &__icon {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            stroke: $color-menu-item;
+            width: $icon-size;
+            height: $icon-size;
+          }
+
+        svg > * {
+            stroke:inherit;
+        }
+    }
+
+    &_noneIcon {
+      padding-left: 36px;
+    }
+
+    &:hover {
+        background-color: variables.$gray;
+    }
+
+    &_hasBorder{
+        border-bottom: 1px solid $color-border;
+    }
+}

package/content/Menu/MenuView.d.ts

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

package/content/Menu/MenuView.js

@@ -0,0 +1,33 @@
+"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 content_1 = require("@steroidsjs/core/ui/content");
+var hooks_1 = require("@steroidsjs/core/hooks");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuView(props) {
+    var bem = (0, hooks_1.useBem)('MenuView');
+    var MenuItemView = props.itemView;
+    var renderMenuItems = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement(react_1["default"].Fragment, null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); })));
+    }, [MenuItemView, props.items]);
+    return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
+        react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
+            ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })
+            : (react_1["default"].createElement(content_1.Icon, { name: 'menu_dots', className: bem.element('icon') })))));
+}
+exports["default"] = MenuView;

package/content/Menu/MenuView.scss

@@ -0,0 +1,46 @@
+@use "../../scss/variables";
+
+:root {
+    --color-icon: #323232;
+}
+
+html[data-theme="dark"] {
+    --color-icon: #ffffff;
+}
+
+$color-icon: var(--color-icon);
+
+.MenuView {
+    width: 248px;
+    padding: 0;
+    border: none;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+
+    &::before,
+    &::after {
+        content: none;
+    }
+
+    &__button {
+        display: inline-flex;
+        cursor: pointer;
+    }
+
+    &__icon {
+        display: inline-flex;
+
+        svg {
+            stroke: $color-icon;
+            width: variables.$icon-size-lg;
+            height: variables.$icon-size-lg;
+        }
+
+        svg rect {
+            fill: $color-icon;
+        }
+
+        svg > * {
+            stroke: inherit;
+        }
+    }
+}

package/content/Slider/SliderView.d.ts

@@ -0,0 +1,3 @@
+import { ISliderViewProps } from '@steroidsjs/core/ui/content/Slider/Slider';
+import '@splidejs/splide/dist/css/splide.min.css';
+export default function SliderView(props: ISliderViewProps): JSX.Element;

package/content/Slider/SliderView.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var react_splide_1 = require("@splidejs/react-splide");
+require("@splidejs/splide/dist/css/splide.min.css");
+function SliderView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('Slider');
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var Splide = react_splide_1.Splide;
+    var ItemView = props.itemView;
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        react_1["default"].createElement(Splide, { options: props.sliderOptions, extensions: props.extensions, hasTrack: props.hasTrack, tag: props.tag, transition: props.transition }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, itemIndex) { return (react_1["default"].createElement(react_splide_1.SplideSlide, { key: itemIndex },
+            react_1["default"].createElement(ItemView, { item: item }))); }))));
+}
+exports["default"] = SliderView;

package/content/Slider/SliderView.scss

@@ -0,0 +1,5 @@
+.SliderView {
+    .splide__slide { 
+        width: fit-content;
+    }
+}

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

@@ -1,4 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IAutoCompleteFieldViewProps } from '@steroidsjs/core/ui/form/AutoCompleteField/AutoCompleteField';
-import './AutoCompleteFieldView.scss';
-export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps & IBemHocOutput): JSX.Element;
+export default function AutoCompleteFieldView(props: IAutoCompleteFieldViewProps): JSX.Element;

package/form/AutoCompleteField/AutoCompleteFieldView.js

@@ -33,23 +33,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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");
-require("./AutoCompleteFieldView.scss");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var normalizeItems = function (items) {
+    var categories = {};
+    var itemsWithoutCategory = [];
+    items.forEach(function (item) {
+        if (item.category) {
+            if (categories[item.category]) {
+                categories[item.category].push(item);
+                return;
+            }
+            categories[item.category] = [item];
+            return;
+        }
+        itemsWithoutCategory.push(item);
+    });
+    return {
+        categories: categories,
+        itemsWithoutCategory: itemsWithoutCategory
+    };
+};
+var renderItem = function (item, props, bem) {
+    var _a, _b, _c;
+    var hasAdditionalIcon = !!((_a = item.additional) === null || _a === void 0 ? void 0 : _a.icon);
+    var hasAdditionalText = !!((_b = item.additional) === null || _b === void 0 ? void 0 : _b.text);
+    var hasSomeAdditional = hasAdditionalText || hasAdditionalIcon;
+    var uniqId = item[props.primaryKey];
+    return (React.createElement("button", { key: String(uniqId), className: bem.element('item', {
+            hover: props.hoveredId === uniqId,
+            select: props.selectedIds.includes(uniqId)
+        }), onClick: function () { return props.onItemSelect(uniqId); }, onFocus: function () { return props.onItemHover(uniqId); }, onMouseOver: function () { return props.onItemHover(uniqId); } },
+        React.createElement("span", { className: bem.element('item-label') }, item.label),
+        hasSomeAdditional && (React.createElement("div", { className: bem.element('item-additional') },
+            hasAdditionalIcon && (React.createElement(content_1.Icon, { name: (_c = item.additional) === null || _c === void 0 ? void 0 : _c.icon, className: bem.element('item-additional-icon') })),
+            hasAdditionalText && (React.createElement("span", { className: bem.element('item-additional-text') }, item.additional.text))))));
+};
 function AutoCompleteFieldView(props) {
     var bem = (0, hooks_1.useBem)('AutoCompleteFieldView');
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem.block({ size: props.size }) },
-        React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.block({
-                size: props.size
-            }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.inputProps.className, props.className), onClick: function (e) {
+    var renderItems = React.useCallback(function () {
+        if (!(0, isEmpty_1["default"])(props.categories)) {
+            var _a = normalizeItems(props.items), categories = _a.categories, itemsWithoutCategory = _a.itemsWithoutCategory;
+            return (React.createElement(React.Fragment, null,
+                Object.entries(categories).map(function (_a) {
+                    var category = _a[0], categoryItems = _a[1];
+                    return (React.createElement("div", { key: category, className: bem.element('category') },
+                        React.createElement("span", { className: bem.element('category__label') }, category),
+                        React.createElement("div", { className: bem.element('category__content') }, categoryItems.map(function (item) { return renderItem(item, props, bem); }))));
+                }),
+                itemsWithoutCategory.map(function (item) { return renderItem(item, props, bem); })));
+        }
+        return (React.createElement(React.Fragment, null, props.items.map(function (item) { return renderItem(item, props, bem); })));
+    }, [bem, props]);
+    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({
+            size: props.size,
+            opened: props.isOpened
+        }), props.className), style: props.style },
+        React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onClick: function (e) {
                 e.preventDefault();
                 props.onOpen();
             }, onChange: function (e) { return props.inputProps.onChange(e.target.value); }, placeholder: props.placeholder, disabled: props.disabled, required: props.required })),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
-            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return (React.createElement("button", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
-                    hover: props.hoveredId === item[props.primaryKey],
-                    select: props.selectedIds.includes(item[props.primaryKey])
-                }), onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label)); }))))));
+            React.createElement("div", { className: bem.element('list') }, !(0, isEmpty_1["default"])(props.items)
+                ? renderItems()
+                : (React.createElement(Text_1["default"], { type: 'textSm', content: __('Nothing was found'), className: bem.element('nothing') })))))));
 }
 exports["default"] = AutoCompleteFieldView;