fui-material 2.5.12 → 2.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/f-ui-kit.es.js +606 -5653
- package/dist/f-ui-kit.es.js.map +1 -1
- package/dist/types/function-elements/fConfirm/fConfirm.d.ts +2 -2
- package/dist/types/material/FFullDateField/FFullDateField.d.ts +3 -3
- package/dist/types/material/FSearchBox/FSearchBox.d.ts +4 -4
- package/dist/types/material/FSearchableSelect/FSearchableSelect.d.ts +106 -1
- package/dist/types/material/FSelectSearchDb/FSelectSearchDb.d.ts +4 -3
- package/dist/types/material/FTextArea/FTextArea.d.ts +2 -2
- package/dist/types/material/FTextField/FTextField.d.ts +2 -2
- package/dist/types/material/SelectComponents/FSelect/FSelect.d.ts +3 -2
- package/package.json +9 -7
|
@@ -19,14 +19,14 @@ export interface IfConfirm {
|
|
|
19
19
|
*
|
|
20
20
|
* Функция добавляет HTML-элемент в `<body>`, отображая диалоговое окно с вопросом,
|
|
21
21
|
* двумя кнопками (`Ок` и `Отменить`) и возвращает промис, который разрешается
|
|
22
|
-
* значением `true` (при нажатии "Ок") или `false` (при нажатии "Отменить").
|
|
22
|
+
* значением `true` (при нажатии "Ок" или клавиши Enter) или `false` (при нажатии "Отменить").
|
|
23
23
|
*
|
|
24
24
|
* @function fConfirm
|
|
25
25
|
* @param {string} [title] - Заголовок окна подтверждения.
|
|
26
26
|
* @param {string} [body] - Текст сообщения, который будет отображен в теле окна.
|
|
27
27
|
*
|
|
28
28
|
* @returns {Promise<boolean>} Промис, который возвращает:
|
|
29
|
-
* - `true` — если пользователь нажал "Ок".
|
|
29
|
+
* - `true` — если пользователь нажал "Ок" или Enter.
|
|
30
30
|
* - `false` — если пользователь нажал "Отменить".
|
|
31
31
|
*
|
|
32
32
|
* @example
|
|
@@ -31,10 +31,10 @@ export interface IFFullDateField extends React.InputHTMLAttributes<HTMLInputElem
|
|
|
31
31
|
*/
|
|
32
32
|
load?: boolean;
|
|
33
33
|
/**
|
|
34
|
-
* Массив текстов ошибок, связанных с полем
|
|
35
|
-
* @type {string[] | undefined}
|
|
34
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
35
|
+
* @type {string[] | string | undefined}
|
|
36
36
|
*/
|
|
37
|
-
errText?: string[];
|
|
37
|
+
errText?: string[] | string | undefined;
|
|
38
38
|
/**
|
|
39
39
|
* Вспомогательный текст под полем даты.
|
|
40
40
|
* @type {string | undefined}
|
|
@@ -43,10 +43,10 @@ export interface IFSearchBox extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
43
43
|
*/
|
|
44
44
|
readOnly?: boolean;
|
|
45
45
|
/**
|
|
46
|
-
* Массив
|
|
47
|
-
* @type {string[] | undefined}
|
|
46
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
47
|
+
* @type {string[] | string | undefined}
|
|
48
48
|
*/
|
|
49
|
-
errText?: string[];
|
|
49
|
+
errText?: string[] | string | undefined;
|
|
50
50
|
/**
|
|
51
51
|
* Вспомогательный текст под полем ввода.
|
|
52
52
|
* @type {string | undefined}
|
|
@@ -119,7 +119,7 @@ export interface IFSearchBox extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
119
119
|
* @param {boolean} [fullWidth] - Если true, поле будет растянуто на 100% ширины.
|
|
120
120
|
* @param {boolean} [disabled] - Блокировка ввода и кнопок.
|
|
121
121
|
* @param {boolean} [readOnly] - Только для чтения.
|
|
122
|
-
* @param {string[]} [errText] - Сообщения об ошибках.
|
|
122
|
+
* @param {string[] | string} [errText] - Сообщения об ошибках.
|
|
123
123
|
* @param {string} [helpText] - Вспомогательный текст.
|
|
124
124
|
* @param {boolean} [load=false] - Показывает спиннер загрузки.
|
|
125
125
|
* @param {React.ReactNode} [children] - Контент внутри кнопки справа.
|
|
@@ -1,16 +1,73 @@
|
|
|
1
1
|
import React, { type ChangeEvent, type ReactNode, type CSSProperties } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Интерфейс пропсов для компонента `FSearchableSelect`.
|
|
4
|
+
*
|
|
5
|
+
* @interface IFSearchableSelect
|
|
6
|
+
* @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>}
|
|
7
|
+
*/
|
|
2
8
|
export interface IFSearchableSelect extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
9
|
+
/**
|
|
10
|
+
* Метка (label), отображаемая над полем ввода.
|
|
11
|
+
* @type {string | undefined}
|
|
12
|
+
*/
|
|
3
13
|
label?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Инлайновые стили для внешнего контейнера компонента.
|
|
16
|
+
* @type {CSSProperties | undefined}
|
|
17
|
+
*/
|
|
4
18
|
st?: CSSProperties;
|
|
19
|
+
/**
|
|
20
|
+
* Дочерние элементы (обычно `<option>`), из которых формируется список выбора.
|
|
21
|
+
* Значения извлекаются из пропсов `value` и `children` переданных элементов.
|
|
22
|
+
* @type {ReactNode | undefined}
|
|
23
|
+
*/
|
|
5
24
|
children?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Флаг, указывающий, должен ли компонент занимать 100% ширины родителя.
|
|
27
|
+
* @type {boolean | undefined}
|
|
28
|
+
*/
|
|
6
29
|
fullWidth?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Флаг состояния загрузки. Если true, отображается спиннер, а взаимодействие блокируется.
|
|
32
|
+
* @type {boolean | undefined}
|
|
33
|
+
*/
|
|
7
34
|
load?: boolean;
|
|
8
|
-
|
|
35
|
+
/**
|
|
36
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
37
|
+
* @type {string[] | string | undefined}
|
|
38
|
+
*/
|
|
39
|
+
errText?: string[] | string | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* Вспомогательный текст, отображаемый под полем ввода.
|
|
42
|
+
* @type {string | undefined}
|
|
43
|
+
*/
|
|
9
44
|
helpText?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Явное указание ширины компонента.
|
|
47
|
+
* @type {string | number | undefined}
|
|
48
|
+
*/
|
|
10
49
|
width?: string | number;
|
|
50
|
+
/**
|
|
51
|
+
* Явное указание высоты компонента.
|
|
52
|
+
* @type {string | number | undefined}
|
|
53
|
+
*/
|
|
11
54
|
height?: string | number;
|
|
55
|
+
/**
|
|
56
|
+
* Разрешить создание новых элементов, отсутствующих в списке.
|
|
57
|
+
* При вводе уникального текста появится опция "Создать".
|
|
58
|
+
* @type {boolean | undefined}
|
|
59
|
+
*/
|
|
12
60
|
allowCreate?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Текущее значение поля (контролируемый компонент).
|
|
63
|
+
* @type {string | number | readonly string[] | undefined}
|
|
64
|
+
*/
|
|
13
65
|
value?: string | number | readonly string[];
|
|
66
|
+
/**
|
|
67
|
+
* Callback, вызываемый при изменении значения.
|
|
68
|
+
* Возвращает синтетическое событие с объектом target, содержащим name и value.
|
|
69
|
+
* @type {((event: { target: { name: string; value: string } } | ChangeEvent<HTMLInputElement>) => void) | undefined}
|
|
70
|
+
*/
|
|
14
71
|
onChange?: (event: {
|
|
15
72
|
target: {
|
|
16
73
|
name: string;
|
|
@@ -18,5 +75,53 @@ export interface IFSearchableSelect extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
18
75
|
};
|
|
19
76
|
} | ChangeEvent<HTMLInputElement>) => void;
|
|
20
77
|
}
|
|
78
|
+
/**
|
|
79
|
+
* Компонент `FSearchableSelect` — выпадающий список с возможностью поиска и фильтрации опций.
|
|
80
|
+
*
|
|
81
|
+
* Особенности:
|
|
82
|
+
* - Поддерживает фильтрацию списка при вводе текста.
|
|
83
|
+
* - Может работать как обычный Select или как Combobox (с `allowCreate`).
|
|
84
|
+
* - Парсит опции из переданных `children` (например, `<option value="1">One</option>`).
|
|
85
|
+
* - Поддерживает навигацию с клавиатуры (стрелки, Enter, Escape).
|
|
86
|
+
* - Имеет состояния: ошибка, загрузка, disabled.
|
|
87
|
+
*
|
|
88
|
+
* @component
|
|
89
|
+
* @example
|
|
90
|
+
* // Простой пример использования с опциями
|
|
91
|
+
* <FSearchableSelect
|
|
92
|
+
* label="Выберите город"
|
|
93
|
+
* value={city}
|
|
94
|
+
* onChange={(e) => setCity(e.target.value)}
|
|
95
|
+
* fullWidth
|
|
96
|
+
* >
|
|
97
|
+
* <option value="moscow">Москва</option>
|
|
98
|
+
* <option value="spb">Санкт-Петербург</option>
|
|
99
|
+
* </FSearchableSelect>
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* // Пример с созданием новых значений (allowCreate) и ошибкой
|
|
103
|
+
* <FSearchableSelect
|
|
104
|
+
* label="Теги"
|
|
105
|
+
* allowCreate
|
|
106
|
+
* value={tag}
|
|
107
|
+
* onChange={(e) => setTag(e.target.value)}
|
|
108
|
+
* errText={hasError ? ['Некорректный тег'] : undefined}
|
|
109
|
+
* >
|
|
110
|
+
* {tagsList.map(t => <option key={t.id} value={t.name}>{t.name}</option>)}
|
|
111
|
+
* </FSearchableSelect>
|
|
112
|
+
*
|
|
113
|
+
* @param {string} [label] - Метка поля.
|
|
114
|
+
* @param {CSSProperties} [st] - Стили контейнера.
|
|
115
|
+
* @param {ReactNode} [children] - Опции списка.
|
|
116
|
+
* @param {boolean} [fullWidth=false] - Растянуть на 100%.
|
|
117
|
+
* @param {boolean} [load=false] - Показать лоадер.
|
|
118
|
+
* @param {string[] | string} [errText] - Текст ошибки.
|
|
119
|
+
* @param {string} [helpText] - Подсказка.
|
|
120
|
+
* @param {boolean} [allowCreate=false] - Разрешить ввод своих значений.
|
|
121
|
+
* @param {string|number} [value] - Значение.
|
|
122
|
+
* @param {Function} [onChange] - Обработчик изменений.
|
|
123
|
+
*
|
|
124
|
+
* @returns {JSX.Element} Рендерит кастомный Select с поиском.
|
|
125
|
+
*/
|
|
21
126
|
declare const FSearchableSelect: React.ForwardRefExoticComponent<IFSearchableSelect & React.RefAttributes<HTMLInputElement>>;
|
|
22
127
|
export default FSearchableSelect;
|
|
@@ -53,9 +53,10 @@ export interface IFSelectSearchDb<T> {
|
|
|
53
53
|
*/
|
|
54
54
|
required?: boolean;
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
56
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
57
|
+
* @type {string[] | string | undefined}
|
|
57
58
|
*/
|
|
58
|
-
errText?: string[];
|
|
59
|
+
errText?: string[] | string | undefined;
|
|
59
60
|
/**
|
|
60
61
|
* Вспомогательный текст под инпутом.
|
|
61
62
|
*/
|
|
@@ -131,7 +132,7 @@ export interface IFSelectSearchDb<T> {
|
|
|
131
132
|
* @param {boolean} [fullWidth=false] - Если true — поле занимает всю ширину родителя.
|
|
132
133
|
* @param {React.FocusEventHandler<HTMLInputElement>} [onFocus] - Обработчик события focus.
|
|
133
134
|
* @param {React.FocusEventHandler<HTMLInputElement>} [onBlur] - Обработчик события blur.
|
|
134
|
-
* @param {string[]} [errText] - Массив текстовых ошибок для отображения под полем.
|
|
135
|
+
* @param {string[] | string} [errText] - Массив текстовых ошибок для отображения под полем.
|
|
135
136
|
* @param {string} [helpText] - Вспомогательный текст под инпутом.
|
|
136
137
|
* @param {boolean} [required=false] - Определяет, является ли поле обязательным.
|
|
137
138
|
* @param {string} [defaultValue] - Начальное значение поля ввода.
|
|
@@ -43,9 +43,9 @@ export interface IFTextArea extends React.TextareaHTMLAttributes<HTMLTextAreaEle
|
|
|
43
43
|
fullWidth?: boolean;
|
|
44
44
|
/**
|
|
45
45
|
* Массив сообщений об ошибках, связанных с этим полем.
|
|
46
|
-
* @type {string[] | undefined}
|
|
46
|
+
* @type {string[] | string | undefined}
|
|
47
47
|
*/
|
|
48
|
-
errText?: string[];
|
|
48
|
+
errText?: string[] | string | undefined;
|
|
49
49
|
/**
|
|
50
50
|
* Вспомогательный текст, отображается под текстовым полем.
|
|
51
51
|
* @type {string | undefined}
|
|
@@ -22,9 +22,9 @@ export interface IFTextField extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
22
22
|
fullWidth?: boolean;
|
|
23
23
|
/**
|
|
24
24
|
* Массив текстов ошибок, связанных с полем ввода.
|
|
25
|
-
* @type {string[] | undefined}
|
|
25
|
+
* @type {string[] | string | undefined}
|
|
26
26
|
*/
|
|
27
|
-
errText?: string[];
|
|
27
|
+
errText?: string[] | string | undefined;
|
|
28
28
|
/**
|
|
29
29
|
* Вспомогательный текст под полем ввода.
|
|
30
30
|
* @type {string | undefined}
|
|
@@ -27,9 +27,10 @@ export interface IFSelect extends React.InputHTMLAttributes<HTMLSelectElement> {
|
|
|
27
27
|
*/
|
|
28
28
|
load?: boolean;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Массив текстов ошибок, связанных с полем ввода.
|
|
31
|
+
* @type {string[] | string | undefined}
|
|
31
32
|
*/
|
|
32
|
-
errText?: string[];
|
|
33
|
+
errText?: string[] | string | undefined;
|
|
33
34
|
/**
|
|
34
35
|
* Вспомогательный текст, отображается под инпутом.
|
|
35
36
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fui-material",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.13",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -24,9 +24,11 @@
|
|
|
24
24
|
"allorion-exporting-html-to-docx": "1.4.1",
|
|
25
25
|
"allorion-exporting-html-to-xlsx": "1.8.6",
|
|
26
26
|
"axios": "^1.7.4",
|
|
27
|
-
"jszip": "^3.10.1"
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
"jszip": "^3.10.1"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"react": ">=18.0.0",
|
|
31
|
+
"react-dom": ">=18.0.0"
|
|
30
32
|
},
|
|
31
33
|
"devDependencies": {
|
|
32
34
|
"@chromatic-com/storybook": "^3.2.6",
|
|
@@ -41,9 +43,9 @@
|
|
|
41
43
|
"@storybook/react": "^8.6.12",
|
|
42
44
|
"@storybook/react-vite": "^8.6.12",
|
|
43
45
|
"@storybook/test": "^8.6.12",
|
|
46
|
+
"@types/minimatch": "^6.0.0",
|
|
44
47
|
"@types/node": "^22.4.1",
|
|
45
|
-
|
|
46
|
-
"@types/react-dom": "^18.3.0",
|
|
48
|
+
|
|
47
49
|
"@vitejs/plugin-react": "^4.4.1",
|
|
48
50
|
"@vitest/browser": "^3.1.3",
|
|
49
51
|
"@vitest/coverage-v8": "^3.1.3",
|
|
@@ -51,8 +53,8 @@
|
|
|
51
53
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
52
54
|
"eslint-plugin-react-refresh": "^0.4.19",
|
|
53
55
|
"eslint-plugin-storybook": "^0.12.0",
|
|
54
|
-
"globals": "^16.0.0",
|
|
55
56
|
"gh-pages": "6.3.0",
|
|
57
|
+
"globals": "^16.0.0",
|
|
56
58
|
"playwright": "^1.52.0",
|
|
57
59
|
"rollup-plugin-copy": "^3.5.0",
|
|
58
60
|
"sass": "1.88.0",
|