@steroidsjs/core 2.1.0-beta.6 → 2.1.1

package/ui/content/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DropDown = exports.Card = exports.Alert = exports.AvatarGroup = exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+exports.Avatar = Avatar_1.Avatar;
+exports.AvatarGroup = Avatar_1.AvatarGroup;
+var Card_1 = __importDefault(require("./Card"));
+exports.Card = Card_1["default"];
+var DropDown_1 = __importDefault(require("./DropDown"));
+exports.DropDown = DropDown_1["default"];
+var Alert_1 = __importDefault(require("./Alert"));
+exports.Alert = Alert_1["default"];
+exports["default"] = {
+    Avatar: Avatar_1.Avatar,
+    AvatarGroup: Avatar_1.AvatarGroup,
+    Alert: Alert_1["default"],
+    Card: Card_1["default"],
+    DropDown: DropDown_1["default"]
+};

package/ui/crud/Crud/Crud.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { IApiRest } from '../../../components/ApiComponent';
-import { IComponents } from '../../../hooks/useComponents';
+import { IComponents } from '../../../providers/ComponentsProvider';
 import { IComponentsHocOutput } from '../../../hoc/components';
 import { IConnectHocOutput } from '../../../hoc/connect';
 import { IFormProps } from '../../form/Form/Form';

package/ui/crud/Crud/Crud.js

@@ -131,7 +131,7 @@ function Crud(props) {
                         return;
                     }
                 }
-                crudItem.onClick(e, localClickProps);
+                crudItem.onClick(e, __assign(__assign({}, clickProps), localClickProps));
             };
         }
         else {
@@ -150,13 +150,15 @@ function Crud(props) {
         model: props.model,
         restUrl: props.restUrl,
         restApi: props.restApi,
+        grid: props.grid,
+        form: props.form,
         goToAction: goToAction,
         items: items,
         itemsToControls: itemsToControls,
         record: record,
         recordId: recordId
-    }); }, [crudId, goToAction, items, itemsToControls, props.model, props.primaryKey,
-        props.queryKey, props.restUrl, props.restApi, record, recordId]);
+    }); }, [crudId, props.queryKey, props.primaryKey, props.model, props.restUrl, props.restApi, props.grid,
+        props.form, goToAction, items, itemsToControls, record, recordId]);
     // Open modal on route change
     react_1.useEffect(function () {
         if (mode === MODE_MODAL && routeAction !== utils_1.CRUD_ACTION_INDEX) {

package/ui/crud/Crud/CrudContent.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { IGridProps } from '@steroidsjs/core/ui/list/Grid/Grid';
+import { IFormProps } from '@steroidsjs/core/ui/form/Form/Form';
 import { ICrudItem } from './Crud';
 import { IApiRest } from '../../../components/ApiComponent';
 export interface ICrudContentProps {
@@ -14,5 +16,7 @@ export interface ICrudContentProps {
     record?: Record<string, unknown>;
     recordId?: PrimaryKey;
     action?: string;
+    grid?: IGridProps | React.ReactNode;
+    form?: IFormProps | React.ReactNode;
 }
 export default function CrudContent(props: ICrudContentProps): JSX.Element;

package/ui/crud/Crud/CrudContent.js

@@ -68,23 +68,23 @@ function CrudContent(props) {
                 ItemComponent = Grid_1["default"];
             }
             return (React.createElement(ItemComponent // Grid
-            , { key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
+            , __assign({ key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
                 //searchModel={props.searchModel}
                 controls: controlsGetter, columns: [props.primaryKey], pagination: {
                     loadMore: false
-                } }));
+                } }, props.grid)));
         case utils_1.CRUD_ACTION_CREATE:
         case utils_1.CRUD_ACTION_UPDATE:
             if (!ItemComponent) {
                 ItemComponent = Form_1["default"];
             }
-            if (props.action === utils_1.CRUD_ACTION_UPDATE && !props.record) {
+            if (props.action === utils_1.CRUD_ACTION_UPDATE && (props.restUrl || props.restApi) && !props.record) {
                 return null;
             }
             return (React.createElement(ItemComponent // Form
-            , { key: formId, formId: formId, action: props.restApi
+            , __assign({ key: formId, formId: formId, action: props.restApi
                     ? (props.recordId ? props.restApi.update : props.restApi.create)
-                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete, initialValues: formInitialValues }));
+                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete }, props.form, { initialValues: formInitialValues })));
         default:
             if (ItemComponent) {
                 return (React.createElement(ItemComponent, __assign({ key: props.crudId + '_' + props.action }, props, crudItem.componentProps)));

package/ui/crud/index.d.ts

@@ -26,9 +26,11 @@ export declare const generateCrud: (routeId: string, props: ICrudGeneratorProps)
     isNavVisible?: boolean;
     models: string | string[];
     enums: string | string[];
+    role?: string;
     roles?: string[];
     fetch?: import("../../hoc/fetch").IFetchHocConfigFunc;
     items?: IRouteItem[] | {
         [key: string]: IRouteItem;
     };
+    preloadData?: (match: Record<string, any>) => (import("../../hooks/useFetch").IFetchConfig | import("../list/List/List").IListProps)[];
 };

package/ui/form/AutoCompleteField/AutoCompleteField.d.ts

@@ -35,10 +35,5 @@ export interface IAutoCompleteFieldViewProps extends Omit<IAutoCompleteFieldProp
     onItemSelect: (id: PrimaryKey | any) => void;
     onItemHover: (id: PrimaryKey | any) => void;
 }
-declare const _default: {
-    (props: import("../../../ui/form/Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<IAutoCompleteFieldProps>;
 export default _default;

package/ui/form/AutoCompleteField/demo/basic.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
+/**
+ * Простой пример использзования AutoAutoCompleteField с коллекцией элементов вложенных в {props.items} .
+ * @order 1
+ * @col 6
+ */
 export declare const items: {
     id: string;
     label: string;
 }[];
 declare const _default: () => JSX.Element;
-/**
- * Basic
- * @order 1
- * @col 6
- */
 export default _default;

package/ui/form/AutoCompleteField/demo/basic.js

@@ -25,6 +25,11 @@ exports.__esModule = true;
 exports.items = void 0;
 var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
+/**
+ * Простой пример использзования AutoAutoCompleteField с коллекцией элементов вложенных в {props.items} .
+ * @order 1
+ * @col 6
+ */
 exports.items = [
     {
         id: '1',
@@ -39,10 +44,5 @@ exports.items = [
         label: 'Krasnodar'
     },
 ];
-/**
- * Basic
- * @order 1
- * @col 6
- */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
     React.createElement(AutoCompleteField_1["default"], { label: 'Write city', items: exports.items, searchOnFocus: true }))); });

package/ui/form/AutoCompleteField/demo/disabled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Выключенный AutoCompleteField также выключает Input.
  * @order 2
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/disabled.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
 var basic_1 = require("./basic");
 /**
- * Disabled
+ * Выключенный AutoCompleteField также выключает Input.
  * @order 2
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/errors.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Пример обработки ошибок в поле.
  * @order 4
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/errors.js

@@ -26,9 +26,9 @@ var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
 var basic_1 = require("./basic");
 /**
- * Disabled
+ * Пример обработки ошибок в поле.
  * @order 4
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(AutoCompleteField_1["default"], { label: 'Errors', items: basic_1.items, errors: ['Error 1 text', 'Error 2 text'] }))); });
+    React.createElement(AutoCompleteField_1["default"], { label: 'Errors', items: basic_1.items, errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });

package/ui/form/AutoCompleteField/demo/placeholder.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Placeholder
+ * Сообщение внутри AutoCompleteField по контексту использования.
  * @order 5
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/placeholder.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
 var basic_1 = require("./basic");
 /**
- * Placeholder
+ * Сообщение внутри AutoCompleteField по контексту использования.
  * @order 5
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/required.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Required
+ * Пример использования AutoCompleteField как обязательного поля для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/required.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
 var basic_1 = require("./basic");
 /**
- * Required
+ * Пример использования AutoCompleteField как обязательного поля для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/AutoCompleteField/demo/sizes.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
-/**
- * Sizes
- * @order 6
- * @col 12
- */
 export default _default;

package/ui/form/AutoCompleteField/demo/sizes.js

@@ -25,15 +25,15 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var AutoCompleteField_1 = __importDefault(require("../AutoCompleteField"));
 var basic_1 = require("./basic");
+/**
+ * По-умлочанию AutoCompleteField имеет 3 заданных размера.
+ * @order 6
+ * @col 12
+ */
 var sizes = {
     sm: 'Small',
     md: 'Middle',
     lg: 'Large'
 };
-/**
- * Sizes
- * @order 6
- * @col 12
- */
 exports["default"] = (function () { return (React.createElement("div", { className: 'row' }, Object.keys(sizes).map(function (size) { return (React.createElement("div", { className: 'col', key: size },
     React.createElement(AutoCompleteField_1["default"], { label: size, size: size, items: basic_1.items }))); }))); });

package/ui/form/BlankField/BlankField.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+export interface IBlankFieldProps extends IFieldWrapperInputProps {
+    text?: string | React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IBlankFieldProps>;
 export default _default;

package/ui/form/BlankField/demo/basic.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Простой пример использзования BlankField.
+ * @order 1
+ * @col 6
+ */
+export declare const items: {
+    id: string;
+    label: string;
+}[];
+declare const _default: () => JSX.Element;
+export default _default;

package/ui/form/BlankField/demo/basic.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+exports.items = void 0;
+var React = __importStar(require("react"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var BlankField_1 = __importDefault(require("../BlankField"));
+/**
+ * Простой пример использзования BlankField.
+ * @order 1
+ * @col 6
+ */
+exports.items = [
+    {
+        id: '1',
+        label: 'Moscow'
+    },
+    {
+        id: '2',
+        label: 'Krasnoyarsk'
+    },
+    {
+        id: '3',
+        label: 'Krasnodar'
+    },
+];
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(BlankField_1["default"], { text: 'BlankField text' },
+        React.createElement(form_1.AutoCompleteField, { items: exports.items }),
+        React.createElement(form_1.DateTimeField, null)))); });

package/ui/form/Button/Button.d.ts

@@ -177,6 +177,7 @@ declare namespace Button {
         disabled: boolean;
         submitting: boolean;
         block: boolean;
+        size: string;
         className: string;
         resetFailedMs: number;
         showLabelOnLoading: boolean;

package/ui/form/Button/Button.js

@@ -136,6 +136,7 @@ Button.defaultProps = {
     disabled: false,
     submitting: false,
     block: false,
+    size: 'md',
     className: '',
     resetFailedMs: 2000,
     showLabelOnLoading: true,

package/ui/form/Button/demo/badge.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Button with badge
+ * Кнопка с бэйджом к примеру с количеством уведомолений.
  * @order 3
  * @col 4
  */

package/ui/form/Button/demo/badge.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Button with badge
+ * Кнопка с бэйджом к примеру с количеством уведомолений.
  * @order 3
  * @col 4
  */

package/ui/form/Button/demo/basic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Простой пример использзования Button с заданным лейблом.
  * @order 1
  * @col 4
  */

package/ui/form/Button/demo/basic.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Basic
+ * Простой пример использзования Button с заданным лейблом.
  * @order 1
  * @col 4
  */

package/ui/form/Button/demo/block.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Block button
+ * Кнопка растянутая по ширине родительского блока.
  * @order 4
  * @col 4
  */

package/ui/form/Button/demo/block.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Block button
+ * Кнопка растянутая по ширине родительского блока.
  * @order 4
  * @col 4
  */

package/ui/form/Button/demo/colors.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Colors
+ * По-умлочанию кнопка имеет 8 видов цветов и так же режим outline к каждому из цветов.
  * @order 5
  * @col 12
  */

package/ui/form/Button/demo/colors.js

@@ -35,11 +35,11 @@ var colors = {
     dark: 'Dark'
 };
 /**
- * Colors
+ * По-умлочанию кнопка имеет 8 видов цветов и так же режим outline к каждому из цветов.
  * @order 5
  * @col 12
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    Object.keys(colors).map(function (color) { return (React.createElement(Button_1["default"], { key: color, color: color, label: colors[color] })); }),
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } }, Object.keys(colors).map(function (color) { return (React.createElement(Button_1["default"], { key: color, color: color, label: colors[color] })); })),
     React.createElement("br", null),
-    Object.keys(colors).map(function (color) { return (React.createElement(Button_1["default"], { key: color, color: color, label: colors[color], outline: true })); }))); });
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } }, Object.keys(colors).map(function (color) { return (React.createElement(Button_1["default"], { key: color, color: color, label: colors[color], outline: true })); })))); });

package/ui/form/Button/demo/confirm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Button with confirm
+ * С вызовом Alert и текстом для подтверждения действий.
  * @order 6
  * @col 4
  */

package/ui/form/Button/demo/confirm.js

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Button with confirm
+ * С вызовом Alert и текстом для подтверждения действий.
  * @order 6
  * @col 4
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Button_1["default"], { confirm: 'Confirm text' }, "Confirm"))); });
+    React.createElement(Button_1["default"], { confirm: 'Are you sure?' }, "Confirm"))); });

package/ui/form/Button/demo/disabled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Пример выключенного компонента Button.
  * @order 2
  * @col 4
  */

package/ui/form/Button/demo/disabled.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Disabled
+ * Пример выключенного компонента Button.
  * @order 2
  * @col 4
  */

package/ui/form/Button/demo/hint.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Button with hint
+ * С всплывающей подсказкой при наведении на кнопку.
  * @order 7
  * @col 4
  */

package/ui/form/Button/demo/hint.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Button with hint
+ * С всплывающей подсказкой при наведении на кнопку.
  * @order 7
  * @col 4
  */

package/ui/form/Button/demo/icon.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Button with icon
+ * Обычное использования с иконокой.
  * @order 8
  * @col 4
  */

package/ui/form/Button/demo/icon.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Button with icon
+ * Обычное использования с иконокой.
  * @order 8
  * @col 4
  */

package/ui/form/Button/demo/link.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Link
+ * Использвание кнопки в качестве ссылки.
  * @order 9
  * @col 4
  */

package/ui/form/Button/demo/link.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Link
+ * Использвание кнопки в качестве ссылки.
  * @order 9
  * @col 4
  */

package/ui/form/Button/demo/sizes.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
-/**
- * Sizes
- * @order 10
- * @col 8
- */
 export default _default;

package/ui/form/Button/demo/sizes.js

@@ -24,14 +24,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
+/**
+ * По-умлочанию Button имеет 3 заданных размера.
+ * @order 10
+ * @col 8
+ */
 var sizes = {
     sm: 'Small',
     md: 'Middle',
     lg: 'Large'
 };
-/**
- * Sizes
- * @order 10
- * @col 8
- */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement(Button_1["default"], { key: size, size: size, className: 'float-left mr-2' }, sizes[size])); }))); });

package/ui/form/Button/demo/tags.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Tags
+ * Пример выбора html-тэга, который будет использован в DOM
  * @order 11
  * @col 6
  */

package/ui/form/Button/demo/tags.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 /**
- * Tags
+ * Пример выбора html-тэга, который будет использован в DOM
  * @order 11
  * @col 6
  */