@steroidsjs/core 3.0.0-beta.5 → 3.0.0-beta.50

package/ui/layout/Loader/Loader.d.ts

@@ -1,6 +1,14 @@
 /// <reference types="react" />
 export interface ILoaderProps {
-    view?: any;
+    /**
+    * Размер элемента
+    */
+    size?: Size;
+    /**
+     * Название цвета
+     */
+    color?: ColorName;
     [key: string]: any;
 }
+export type ILoaderViewProps = ILoaderProps;
 export default function Loader(props: ILoaderProps): JSX.Element;

package/ui/layout/Meta/Meta.js

@@ -21,9 +21,9 @@ function Meta(props) {
     return (react_1["default"].createElement(react_helmet_1["default"], null,
         react_1["default"].createElement("title", null, props.title),
         props.base && react_1["default"].createElement("base", __assign({}, props.base)),
-        props.description && react_1["default"].createElement("meta", { name: 'description', content: props.description }), (_a = props.meta) === null || _a === void 0 ? void 0 :
-        _a.map(function (attrs, index) { return react_1["default"].createElement("meta", __assign({ key: index }, attrs)); }), (_b = props.links) === null || _b === void 0 ? void 0 :
-        _b.map(function (attrs, index) { return react_1["default"].createElement("link", __assign({ key: index }, attrs)); }), (_c = props.styles) === null || _c === void 0 ? void 0 :
+        props.description && (react_1["default"].createElement("meta", { name: 'description', content: props.description })), (_a = props.meta) === null || _a === void 0 ? void 0 :
+        _a.map(function (attrs, index) { return (react_1["default"].createElement("meta", __assign({ key: index }, attrs))); }), (_b = props.links) === null || _b === void 0 ? void 0 :
+        _b.map(function (attrs, index) { return (react_1["default"].createElement("link", __assign({ key: index }, attrs))); }), (_c = props.styles) === null || _c === void 0 ? void 0 :
         _c.map(function (attrs, index) { return (react_1["default"].createElement("style", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
                 __html: attrs.innerHtml
             } }))); }), (_d = props.scripts) === null || _d === void 0 ? void 0 :

package/ui/layout/Notifications/Notifications.d.ts

@@ -34,7 +34,7 @@ export interface INotificationsProps {
     notifications?: INotificationItem[];
     closeTimeoutMs?: number;
     className?: CssClassName;
-    view?: any;
+    view?: CustomView;
     itemView?: any;
     position?: string;
     [key: string]: any;

package/ui/layout/Notifications/Notifications.js

@@ -56,8 +56,6 @@ function Notifications(props) {
     var dispatch = (0, useDispatch_1["default"])();
     (0, react_use_1.useMount)(function () {
         if (props.initialFlashes) {
-            //TODO remove @ts-ignore
-            //@ts-ignore
             dispatch((0, notifications_1.setFlashes)(props.initialFlashes));
             // Disable scroll or scroll to top on show notifications
             if (!process.env.IS_SSR) {

package/ui/layout/Portal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface IPortalProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 export default function Portal(props: IPortalProps): React.ReactPortal;
 export {};

package/ui/layout/ProgressBar/ProgressBar.js

@@ -27,19 +27,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("../../icon/Icon/Icon"));
+var Icon_1 = __importDefault(require("../../content/Icon/Icon"));
 var hooks_1 = require("../../../hooks");
 function ProgressBar(props) {
     var components = (0, hooks_1.useComponents)();
     var getLabel = (function () {
-        if (!props.showLabel)
+        if (!props.showLabel) {
             return null;
-        if (props.icon)
+        }
+        if (props.icon) {
             return props.icon(props.status, props.percent);
-        if (props.status === 'success')
+        }
+        if (props.status === 'success') {
             return React.createElement(Icon_1["default"], { name: "check" });
-        if (props.status === 'exception')
+        }
+        if (props.status === 'exception') {
             return React.createElement(Icon_1["default"], { name: "times" });
+        }
         return props.label(props.percent);
     });
     if (props.type === 'line') {

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface ISkeletonViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';
@@ -8,11 +8,30 @@ export interface ISkeletonViewProps {
     width?: string | number;
 }
 export interface ISkeletonProps {
-    className?: string;
+    /**
+    * Дополнительные CSS классы
+    * @example my-block
+    */
+    className?: CssClassName;
+    /**
+    * Дочерние элементы
+    */
     children?: React.ReactNode;
+    /**
+    * Тип анимации
+    */
     animation?: 'pulse' | 'wave';
+    /**
+    * Тип компонента
+    */
     type?: 'text' | 'rect' | 'circle';
+    /**
+    * Высота элемента
+    */
     height?: string | number;
+    /**
+    * Ширина элемента
+    */
     width?: string | number;
 }
 declare function Skeleton(props: ISkeletonProps): JSX.Element;

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -4,13 +4,13 @@
  * @example 'top'
  */
 type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface TooltipArrowPosition {
+export interface ITooltipArrowPosition {
     left?: number | string;
     right?: number | string;
     top?: number | string;
     bottom?: number | string;
 }
-export interface TooltipStylePosition {
+export interface ITooltipStylePosition {
     left: 'unset' | number;
     right: 'unset' | number;
     top: 'unset' | number;
@@ -47,12 +47,12 @@ export interface ITooltipProps {
     /**
      * Стили для абсолютного позиционирования подсказки
      */
-    style?: TooltipStylePosition;
+    style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
      * @example {left: 10}
      */
-    arrowPosition?: TooltipArrowPosition;
+    arrowPosition?: ITooltipArrowPosition;
     /**
      * Рассчет позиции подсказки
      */
@@ -63,7 +63,7 @@ export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
     position: TooltipPosition;
-    style: TooltipStylePosition;
+    style: ITooltipStylePosition;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;
 declare namespace Tooltip {

package/ui/layout/Tooltip/calculate.d.ts

@@ -1,6 +1,6 @@
-import { TooltipArrowPosition, TooltipStylePosition } from '../Tooltip/Tooltip';
+import { ITooltipArrowPosition, ITooltipStylePosition } from '../Tooltip/Tooltip';
 export default function calculate(gap: any, position: any, parentRef: any, tooltipSize: any, arrowSize: any): {
-    style: TooltipStylePosition;
+    style: ITooltipStylePosition;
     position: any;
-    arrowPosition: TooltipArrowPosition;
+    arrowPosition: ITooltipArrowPosition;
 };

package/ui/layout/Tooltip/calculate.js

@@ -80,7 +80,7 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
         case 'topRight':
         case 'bottomRight':
             // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.right = document.body.clientWidth - parentDimensions.right;
+            style.left = parentDimensions.right - tooltipSize.width;
             if (parentDimensions.width < tooltipSize.width) {
                 arrowPosition = {
                     left: null,

package/ui/list/CheckboxColumn/CheckboxColumn.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IContentColumnViewProps } from '../Grid/Grid';
 /**
  * CheckboxColumn
  * Колонка с чекбоксом, которая позволяет выбирать одну или все записи в таблице.
@@ -20,10 +21,10 @@ export interface ICheckboxColumnProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
-export interface ICheckboxColumnViewProps {
+export interface ICheckboxColumnViewProps extends IContentColumnViewProps {
     fieldProps: Record<string, any>;
     input: {
         name: string;

package/ui/list/CheckboxColumn/CheckboxColumn.js

@@ -25,7 +25,10 @@ function CheckboxColumn(props) {
         onChange: onChange
     }); }, [onChange, props.listId, value]);
     return components.ui.renderView(props.view || 'list.CheckboxColumnView', {
-        input: input
+        input: input,
+        item: props.item,
+        attribute: props.attribute,
+        size: props.size
     });
 }
 exports["default"] = CheckboxColumn;

package/ui/list/ControlsColumn/ControlsColumn.d.ts

@@ -29,7 +29,7 @@ export interface IControlsColumnProps {
      * Переопределение view React компонента для кастомизации отображения колонки
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export interface IControlsColumnViewProps {

package/ui/list/Empty/Empty.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Empty
  * Компонент используется в качестве заглушки в случае, когда пришла пустая коллекция данных.
  */
-export interface IEmptyProps {
+export interface IEmptyProps extends IUiComponent {
     /**
      * Показывать заглушку?
      * @example true
@@ -14,15 +14,6 @@ export interface IEmptyProps {
      * @example 'Записи не найдены'
      */
     text?: string | React.ReactNode;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     [key: string]: any;
 }
 export type IEmptyViewProps = IEmptyProps;

package/ui/list/Empty/Empty.js

@@ -42,9 +42,9 @@ function Empty(props) {
 }
 Empty.defaultProps = {
     enable: true,
-    text: 'Записи не найдены'
+    text: 'Ничего не найдено'
 };
-var normalizeEmptyProps = function (props) { return (__assign(__assign(__assign({}, Empty.defaultProps), { enable: !!props, text: __('Записи не найдены') }), (typeof props === 'boolean'
+var normalizeEmptyProps = function (props) { return (__assign(__assign(__assign({}, Empty.defaultProps), { enable: !!props, text: __('Ничего не найдено') }), (typeof props === 'boolean'
     ? { enable: props }
     : (typeof props === 'string'
         ? { text: props }

package/ui/list/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+export interface IFlexGridItem {
+    /**
+     * Содержимое элемента FlexGrid
+     */
+    content: ReactNode;
+    /**
+     * Порядок элемента в FlexGrid
+     */
+    order?: number;
+    /**
+     * Количество колонок для смещения столбца слева
+     */
+    offset?: number;
+    /**
+     * Количество колонок, которое занимает элемент, максимум 12
+     */
+    col?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером lg, максимум 12
+     */
+    lg?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером md, максимум 12
+     */
+    md?: number;
+    /**
+     * Количество колонок, которое занимает элемент на экранах размером sm, максимум 12
+     */
+    sm?: number;
+}
+/**
+ * FlexGrid
+ * Flex контейнер для элементов и компонентов.
+ */
+export interface IFlexGridProps extends IUiComponent {
+    /**
+     * Элементы FlexGrid
+     * @example [{content: 'Block1', col: 4}, {content: 'Block2', col: 6}]
+     */
+    items?: IFlexGridItem[];
+    /**
+     * Вложенные элементы
+     */
+    children?: React.ReactNode;
+    /**
+     * Дополнительный CSS-класс для элементов FlexGrid
+     */
+    itemClassName?: CssClassName;
+    /**
+     * Расстояние между элементами в px.
+     * Если передано число, то установится расстояние между строками и между колонками.
+     * Если передан массив, то первый элемент - расстояние между колонками, второй - между строками.
+     */
+    gap?: number | number[];
+    /**
+     * Значение для css-свойства flex-direction
+     */
+    direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+    /**
+     * Автоматический перенос на новую строку
+     */
+    wrap?: boolean;
+    /**
+     * Значение для css-свойства justify-content
+     */
+    justify?: 'center' | 'end' | 'start' | 'stretch' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Значение для css-свойства align-items
+     */
+    align?: 'center' | 'end' | 'start' | 'stretch' | 'flex-start' | 'flex-end';
+    [key: string]: any;
+}
+export interface IFlexGridViewProps extends IFlexGridProps {
+    colGap?: number;
+    rowGap?: number;
+}
+declare function FlexGrid(props: IFlexGridProps): JSX.Element;
+declare namespace FlexGrid {
+    var defaultProps: {
+        wrap: boolean;
+        gap: number;
+    };
+}
+export default FlexGrid;

package/ui/list/FlexGrid/FlexGrid.js

@@ -0,0 +1,51 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var hooks_1 = require("../../../hooks");
+var normalizeGap = function (gap) {
+    if ((0, isArray_1["default"])(gap)) {
+        return {
+            colGap: gap[0],
+            rowGap: gap[1]
+        };
+    }
+    return {
+        colGap: gap,
+        rowGap: gap
+    };
+};
+function FlexGrid(props) {
+    var components = (0, hooks_1.useComponents)();
+    var view = props.view, viewProps = __rest(props, ["view"]);
+    return components.ui.renderView(view || 'list.FlexGridView', __assign(__assign({}, viewProps), normalizeGap(props.gap)));
+}
+exports["default"] = FlexGrid;
+FlexGrid.defaultProps = {
+    wrap: false,
+    gap: 24
+};

package/ui/list/FlexGrid/index.d.ts

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

package/ui/list/FlexGrid/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 FlexGrid_1 = __importDefault(require("./FlexGrid"));
+exports["default"] = FlexGrid_1["default"];

package/ui/list/Grid/Grid.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
 import { IListConfig, ListControlPosition } from '../../../hooks/useList';
 import { IControlItem } from '../../nav/Controls/Controls';
+export interface IContentColumnViewProps extends IGridColumn {
+    item: Record<string, any>;
+    size: Size;
+    primaryKey: string;
+    listId: string;
+    model: string;
+    [key: string]: any;
+}
 export interface IGridColumn {
     /**
      * Атрибут колонки, по которому происходит поиск нужного свойства в items и нужного поля в SearchForm
@@ -44,7 +53,7 @@ export interface IGridColumn {
      * Компонент для кастомизации отображения значения в ячейке
      * @example MyCustomView
      */
-    valueView?: any;
+    valueView?: any | 'ContentColumnView';
     /**
      * Свойства для компонента отображения значения в ячейке
      */
@@ -58,6 +67,36 @@ export interface IGridColumn {
      * @example true
      */
     sortable?: boolean;
+    /**
+     * Название свойства в items, которое будет использовано как subtitle
+     * @example 'name'
+     */
+    subtitleAttribute?: string;
+    /**
+     * Параметры для ссылки в колонке
+    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    */
+    link?: {
+        attribute: string;
+        linkProps?: ILinkProps;
+        urlAttribute: string;
+    };
+    /**
+    * Параметры для иконки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    icon?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
+    /**
+    *  Параметры для картинки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    picture?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
 }
 /**
  * Grid
@@ -68,7 +107,7 @@ export interface IGridProps extends IListConfig {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
      * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
@@ -85,6 +124,14 @@ export interface IGridProps extends IListConfig {
      * должно быть задано свойство index
      */
     itemsIndexing?: any;
+    /**
+     * Размер Grid
+     */
+    size?: Size;
+    /**
+     * Включает переменные цвета для строк в таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
@@ -105,4 +152,11 @@ export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;
 }
-export default function Grid(props: IGridProps): JSX.Element;
+declare function Grid(props: IGridProps): JSX.Element;
+declare namespace Grid {
+    var defaultProps: {
+        size: string;
+        hasAlternatingColors: boolean;
+    };
+}
+export default Grid;

package/ui/list/Grid/Grid.js

@@ -88,10 +88,15 @@ function Grid(props) {
     var renderValue = (0, react_1.useCallback)(function (item, column) {
         // Custom component
         if (column.valueView) {
-            var ValueView = column.valueView;
-            return (React.createElement(ValueView, __assign({}, column, column.valueProps, { listId: props.listId, primaryKey: props.primaryKey, item: item })));
+            var isValueViewString = typeof column.valueView === 'string';
+            var ValueView = isValueViewString ? components.ui.getView("list.".concat(column.valueView)) : column.valueView;
+            var viewProps = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
+            if (isValueViewString) {
+                return components.ui.renderView(ValueView, viewProps);
+            }
+            return (React.createElement(ValueView, __assign({}, viewProps)));
         }
-        return React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {})));
+        return (React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
     }, [props.listId, props.model, props.primaryKey]);
     // Columns
     var columns = (0, react_1.useMemo)(function () { return []
@@ -117,3 +122,7 @@ function Grid(props) {
     return components.ui.renderView(props.view || 'list.GridView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, renderValue: renderValue, columns: columns, onFetch: onFetch, onSort: onSort, items: (list === null || list === void 0 ? void 0 : list.items) || [] }));
 }
 exports["default"] = Grid;
+Grid.defaultProps = {
+    size: 'md',
+    hasAlternatingColors: true
+};

package/ui/list/List/List.d.ts

@@ -34,6 +34,7 @@ export interface IListViewProps extends Omit<IListProps, 'onFetch'>, Omit<IListO
 }
 export interface IListItemViewProps {
     id: PrimaryKey;
+    primaryKey: PrimaryKey;
     item: {
         id?: PrimaryKey;
         title?: string | any;

package/ui/list/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ListControlPosition } from '../../../hooks/useList';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination
@@ -41,10 +40,8 @@ export interface IPaginationProps {
      */
     className?: CssClassName;
     /**
-     * Расположение пагинации
-     * @example 'both'
-     */
-    position?: ListControlPosition;
+    * Параметры кнопки
+    */
     buttonProps?: IButtonProps;
     /**
      * Переопределение view React компонента для кастомизации отображения
@@ -69,6 +66,16 @@ export interface IPaginationProps {
      * Список, для которого используется пагинация
      */
     list?: any;
+    /**
+    * Нужно ли отображать кнопки с шагом в одну страницу
+    * @example {'true'}
+    */
+    showSteps?: boolean;
+    /**
+     * Нужно ли отображать кнопки с шагом до первой / последней страницы
+     * @example {'true'}
+     */
+    showEdgeSteps?: boolean;
     [key: string]: any;
 }
 export interface IPaginationViewProps extends IPaginationProps {
@@ -80,6 +87,11 @@ export interface IPaginationViewProps extends IPaginationProps {
     }[];
     onSelect: (page: number) => void;
     onSelectNext: () => void;
+    onSelectPrev: () => void;
+    onSelectLast: () => void;
+    onSelectFirst: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
 }
 export declare const generatePages: (page: any, totalPages: any, aroundCount?: number) => any[];
 declare function Pagination(props: IPaginationProps): JSX.Element;
@@ -89,6 +101,7 @@ declare namespace Pagination {
         attribute: string;
         aroundCount: number;
         defaultValue: number;
+        size: string;
         loadMore: boolean;
         position: string;
         sizeAttribute: string;