indicator-ui 1.1.42 → 1.1.43
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/index.js
CHANGED
|
@@ -15956,15 +15956,15 @@ function iie(r = {}) {
|
|
|
15956
15956
|
const be = await W(oe);
|
|
15957
15957
|
return T(), be;
|
|
15958
15958
|
}, me = async (oe) => {
|
|
15959
|
-
let be = !
|
|
15959
|
+
let be = !1;
|
|
15960
15960
|
for (const $e of oe) {
|
|
15961
15961
|
const Xe = await W($e);
|
|
15962
|
-
be
|
|
15962
|
+
be ||= Xe;
|
|
15963
15963
|
}
|
|
15964
15964
|
return T(), be;
|
|
15965
15965
|
}, H = async () => {
|
|
15966
15966
|
const oe = await x().validateAllFields();
|
|
15967
|
-
return g().setErrors(oe), T(), oe.length
|
|
15967
|
+
return g().setErrors(oe), T(), oe.length > 0;
|
|
15968
15968
|
}, Z = (oe) => x().isValid(oe), ee = async (oe) => {
|
|
15969
15969
|
let be = !0;
|
|
15970
15970
|
for (const $e of oe)
|
|
@@ -21,200 +21,7 @@ type PropsType<Form, T> = {
|
|
|
21
21
|
/** Debounce в мс для реактивной ревалидации при изменении поля с ошибкой. Полезно при async-валидаторах */
|
|
22
22
|
revalidateDebounce?: number;
|
|
23
23
|
};
|
|
24
|
-
/**
|
|
25
|
-
* `useForm` — типобезопасный хук для управления состоянием и валидации форм.
|
|
26
|
-
*
|
|
27
|
-
* Предоставляет:
|
|
28
|
-
* - централизованное управление данными формы;
|
|
29
|
-
* - декларативную регистрацию полей;
|
|
30
|
-
* - схемную и кастомную валидацию;
|
|
31
|
-
* - контролируемый submit lifecycle;
|
|
32
|
-
* - безопасный императивный API (`services`) для бизнес-логики.
|
|
33
|
-
*
|
|
34
|
-
* ---
|
|
35
|
-
* ## 🧠 Основная идея
|
|
36
|
-
*
|
|
37
|
-
* Хук полностью управляет состоянием формы и ошибками,
|
|
38
|
-
* а наружу отдаёт:
|
|
39
|
-
* - **декларативный API** (`register`, `registerForm`);
|
|
40
|
-
* - **императивные команды** (clear, validate, highlight);
|
|
41
|
-
* - **изолированные сервисы** для submit-логики.
|
|
42
|
-
*
|
|
43
|
-
* ---
|
|
44
|
-
* ## 🔁 Submit lifecycle
|
|
45
|
-
*
|
|
46
|
-
* Порядок вызова callbacks при submit:
|
|
47
|
-
*
|
|
48
|
-
* 1. `onSubmitAttempt` — всегда
|
|
49
|
-
* 2. Валидация формы
|
|
50
|
-
* 3. `onSubmit` — если форма валидна
|
|
51
|
-
* 4. `onSubmitError` — если есть ошибки
|
|
52
|
-
*
|
|
53
|
-
* ---
|
|
54
|
-
* ## 🔌 Callbacks
|
|
55
|
-
*
|
|
56
|
-
* Все callbacks получают объект `services` —
|
|
57
|
-
* стабильный набор команд для работы с формой
|
|
58
|
-
* (без реактивных значений и возможности вызвать submit повторно).
|
|
59
|
-
*
|
|
60
|
-
* ---
|
|
61
|
-
* ## 📥 Входные параметры
|
|
62
|
-
*
|
|
63
|
-
* | Параметр | Тип | Описание |
|
|
64
|
-
* |---------|-----|----------|
|
|
65
|
-
* | `initFormData` | `T` | Начальные данные формы |
|
|
66
|
-
* | `scheme` | `FormSchemeType<T>` | Схема валидации |
|
|
67
|
-
* | `onSubmitAttempt` | `(data, event, services) => void` | Вызывается при любой попытке submit |
|
|
68
|
-
* | `onSubmit` | `(data, event, services) => void \| Promise<void>` | Вызывается при успешной валидации |
|
|
69
|
-
* | `onSubmitError` | `({ errors }, services) => void` | Вызывается при ошибках валидации |
|
|
70
|
-
*
|
|
71
|
-
* ---
|
|
72
|
-
* ## 📤 Возвращаемое API
|
|
73
|
-
*
|
|
74
|
-
* | Поле | Тип | Назначение |
|
|
75
|
-
* |------|-----|------------|
|
|
76
|
-
* | `formData` | `T` | Реактивные данные формы |
|
|
77
|
-
* | `errors` | `FormErrorsType<T>` | Реактивные ошибки |
|
|
78
|
-
* | `register` | `(path, config?) => FieldProps` | Регистрация поля |
|
|
79
|
-
* | `registerForm` | `() => form props` | Подключение `<form>` |
|
|
80
|
-
* | `setFormData` | `(data) => void` | Полная замена данных формы |
|
|
81
|
-
* | `getFormData` | `() => T` | Получить актуальные данные |
|
|
82
|
-
* | `getField` | `(path) => value` | Получить значение поля |
|
|
83
|
-
* | `getFieldSync` | `(path) => value` | Получить актуальное значение поля |
|
|
84
|
-
* | `setField` | `(path, value) => void` | Установить значение поля |
|
|
85
|
-
* | `getError` | `(path) => error` | Получить ошибку поля |
|
|
86
|
-
* | `setError` | `(path, error) => void` | Установить ошибку поля |
|
|
87
|
-
* | `clearField` | `(path \| paths) => void` | Очистить поле(я) |
|
|
88
|
-
* | `clearForm` | `() => void` | Очистить форму |
|
|
89
|
-
* | `clearErrors` | `() => void` | Очистить все ошибки |
|
|
90
|
-
* | `highlightField` | `(path) => Promise<boolean>` | Валидировать поле с ошибками |
|
|
91
|
-
* | `highlightFields` | `(paths) => Promise<boolean>` | Валидировать несколько полей |
|
|
92
|
-
* | `highlightFormErrors` | `() => Promise<boolean>` | Валидировать всю форму |
|
|
93
|
-
* | `isFieldValid` | `(path) => Promise<boolean>` | Проверка поля без ошибок |
|
|
94
|
-
* | `areFieldsValid` | `(paths) => Promise<boolean>` | Проверка полей без ошибок |
|
|
95
|
-
* | `isFormValid` | `() => Promise<boolean>` | Проверка формы без ошибок |
|
|
96
|
-
* | `getValidForm` | `() => Promise<T \| null>` | Получить форму, если валидна |
|
|
97
|
-
* | `submitForm` | `() => void` | Программный submit |
|
|
98
|
-
* | `resetForm` | `() => void` | Программный reset |
|
|
99
|
-
*
|
|
100
|
-
* ---
|
|
101
|
-
* ## 🛠 `services`
|
|
102
|
-
*
|
|
103
|
-
* `services` доступны **только внутри submit-callbacks**
|
|
104
|
-
* и предоставляют императивный API:
|
|
105
|
-
*
|
|
106
|
-
* - `form` — чтение и замена данных формы;
|
|
107
|
-
* - `fields` — работа с полями;
|
|
108
|
-
* - `errors` — управление ошибками;
|
|
109
|
-
* - `validation` — проверки без side-effects;
|
|
110
|
-
* - `highlight` — валидация с обновлением ошибок.
|
|
111
|
-
*
|
|
112
|
-
* ---
|
|
113
|
-
;
|
|
114
|
-
* @example
|
|
115
|
-
*
|
|
116
|
-
* ```tsx
|
|
117
|
-
* type FormType = {
|
|
118
|
-
* phone: string;
|
|
119
|
-
* message: string;
|
|
120
|
-
* selects: {
|
|
121
|
-
* category: 'a' | 'b' | 'c';
|
|
122
|
-
* tags: ('a' | 'b' | 'c')[];
|
|
123
|
-
* };
|
|
124
|
-
* settings: [
|
|
125
|
-
* { enabled: boolean },
|
|
126
|
-
* { mode: { value: string } },
|
|
127
|
-
* ];
|
|
128
|
-
* };
|
|
129
|
-
*
|
|
130
|
-
* const scheme: FormSchemeType<FormType> = {
|
|
131
|
-
* phone: {
|
|
132
|
-
* required: { setting: true, message: 'Обязательное поле' },
|
|
133
|
-
* custom: value =>
|
|
134
|
-
* value && value.length > 5 ? false : 'Некорректный номер',
|
|
135
|
-
* },
|
|
136
|
-
*
|
|
137
|
-
* message: {
|
|
138
|
-
* noSpace: true,
|
|
139
|
-
* custom: (value, options) => {
|
|
140
|
-
* const enabled = options.getField('settings[0].enabled');
|
|
141
|
-
* return enabled && !value
|
|
142
|
-
* ? 'Сообщение обязательно'
|
|
143
|
-
* : false;
|
|
144
|
-
* },
|
|
145
|
-
* },
|
|
146
|
-
*
|
|
147
|
-
* 'selects.category': {
|
|
148
|
-
* required: true,
|
|
149
|
-
* },
|
|
150
|
-
* };
|
|
151
|
-
*
|
|
152
|
-
* export function ExampleForm() {
|
|
153
|
-
* const {
|
|
154
|
-
* formData,
|
|
155
|
-
* register,
|
|
156
|
-
* registerForm,
|
|
157
|
-
* highlightField,
|
|
158
|
-
* isFormValid,
|
|
159
|
-
* } = useForm<FormType>({
|
|
160
|
-
* scheme,
|
|
161
|
-
*
|
|
162
|
-
* onSubmitAttempt: (data, event, services) => {
|
|
163
|
-
* console.log('Submit attempt:', data);
|
|
164
|
-
* },
|
|
165
|
-
*
|
|
166
|
-
* onSubmit: async (data, event, services) => {
|
|
167
|
-
* // бизнес-валидация без UI-эффектов
|
|
168
|
-
* const isValid = await services.validation.isFormValid();
|
|
169
|
-
* if (!isValid) return;
|
|
170
|
-
*
|
|
171
|
-
* console.log('Submit success:', data);
|
|
172
|
-
* },
|
|
173
|
-
*
|
|
174
|
-
* onSubmitError: ({ errors }, services) => {
|
|
175
|
-
* // UI-валидация с подсветкой
|
|
176
|
-
* services.highlight.form();
|
|
177
|
-
* console.log('Submit errors:', errors);
|
|
178
|
-
* },
|
|
179
|
-
* });
|
|
180
|
-
*
|
|
181
|
-
* return (
|
|
182
|
-
* <form {...registerForm()}>
|
|
183
|
-
*
|
|
184
|
-
* <input {...register('phone')} />
|
|
185
|
-
*
|
|
186
|
-
* <textarea {...register('message')} />
|
|
187
|
-
*
|
|
188
|
-
* <select {...register('selects.category')}>
|
|
189
|
-
* <option value="a">A</option>
|
|
190
|
-
* <option value="b">B</option>
|
|
191
|
-
* <option value="c">C</option>
|
|
192
|
-
* </select>
|
|
193
|
-
*
|
|
194
|
-
* <input
|
|
195
|
-
* type="checkbox"
|
|
196
|
-
* {...register('settings[0].enabled')}
|
|
197
|
-
* />
|
|
198
|
-
*
|
|
199
|
-
* <input {...register('settings[1].mode.value')} />
|
|
200
|
-
*
|
|
201
|
-
* <button type="button" onClick={() => highlightField('phone')}>
|
|
202
|
-
* Validate phone
|
|
203
|
-
* </button>
|
|
204
|
-
*
|
|
205
|
-
* <button type="submit">Submit</button>
|
|
206
|
-
*
|
|
207
|
-
* <pre>{JSON.stringify(formData, null, 2)}</pre>
|
|
208
|
-
*
|
|
209
|
-
* </form>
|
|
210
|
-
* );
|
|
211
|
-
* }
|
|
212
|
-
* ```
|
|
213
|
-
*
|
|
214
|
-
* ---
|
|
215
|
-
* @template Form Полный тип формы
|
|
216
|
-
* @template T Тип начальных данных
|
|
217
|
-
*/
|
|
24
|
+
/** @see {@link UseFormDocs} */
|
|
218
25
|
export declare function useForm<TForm, TFormNullable extends Nullable<Undefinable<TForm>> = Nullable<Undefinable<TForm>>>(props?: PropsType<TForm, TFormNullable>): {
|
|
219
26
|
formData: TFormNullable | undefined;
|
|
220
27
|
setFormData: (formData: TFormNullable) => void;
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `useForm` — типобезопасный хук для управления состоянием и валидации форм.
|
|
3
|
+
*
|
|
4
|
+
* Предоставляет:
|
|
5
|
+
* - централизованное управление данными формы;
|
|
6
|
+
* - декларативную регистрацию полей;
|
|
7
|
+
* - схемную и кастомную валидацию;
|
|
8
|
+
* - контролируемый submit lifecycle;
|
|
9
|
+
* - безопасный императивный API (`services`) для бизнес-логики.
|
|
10
|
+
*
|
|
11
|
+
* ---
|
|
12
|
+
* ## Основная идея
|
|
13
|
+
*
|
|
14
|
+
* Хук полностью управляет состоянием формы и ошибками,
|
|
15
|
+
* а наружу отдаёт:
|
|
16
|
+
* - **декларативный API** (`register`, `registerForm`);
|
|
17
|
+
* - **императивные команды** (clear, validate, highlight);
|
|
18
|
+
* - **изолированные сервисы** для submit-логики.
|
|
19
|
+
*
|
|
20
|
+
* ---
|
|
21
|
+
* ## Submit lifecycle
|
|
22
|
+
*
|
|
23
|
+
* Порядок вызова callbacks при submit:
|
|
24
|
+
*
|
|
25
|
+
* 1. `onSubmitAttempt` — всегда
|
|
26
|
+
* 2. Валидация формы
|
|
27
|
+
* 3. `onSubmit` — если форма валидна
|
|
28
|
+
* 4. `onSubmitError` — если есть ошибки
|
|
29
|
+
*
|
|
30
|
+
* ---
|
|
31
|
+
* ## Callbacks
|
|
32
|
+
*
|
|
33
|
+
* Все callbacks получают объект `services` —
|
|
34
|
+
* стабильный набор команд для работы с формой
|
|
35
|
+
* (без реактивных значений и возможности вызвать submit повторно).
|
|
36
|
+
*
|
|
37
|
+
* ---
|
|
38
|
+
* ## Входные параметры
|
|
39
|
+
*
|
|
40
|
+
* | Параметр | Тип | Описание |
|
|
41
|
+
* |---------|-----|----------|
|
|
42
|
+
* | `initFormData` | `T` | Начальные данные формы |
|
|
43
|
+
* | `scheme` | `FormSchemeType<T>` | Схема валидации |
|
|
44
|
+
* | `onSubmitAttempt` | `(data, event, services) => void` | Вызывается при любой попытке submit |
|
|
45
|
+
* | `onSubmit` | `(data, event, services) => void \| Promise<void>` | Вызывается при успешной валидации |
|
|
46
|
+
* | `onSubmitError` | `({ errors }, services) => void` | Вызывается при ошибках валидации |
|
|
47
|
+
*
|
|
48
|
+
* ---
|
|
49
|
+
* ## Возвращаемое API
|
|
50
|
+
*
|
|
51
|
+
* | Поле | Тип | Назначение |
|
|
52
|
+
* |------|-----|------------|
|
|
53
|
+
* | `formData` | `T` | Реактивные данные формы |
|
|
54
|
+
* | `errors` | `FormErrorsType<T>` | Реактивные ошибки |
|
|
55
|
+
* | `register` | `(path, config?) => FieldProps` | Регистрация поля |
|
|
56
|
+
* | `registerForm` | `() => form props` | Подключение `<form>` |
|
|
57
|
+
* | `setFormData` | `(data) => void` | Полная замена данных формы |
|
|
58
|
+
* | `getFormData` | `() => T` | Получить актуальные данные |
|
|
59
|
+
* | `getField` | `(path) => value` | Получить значение поля |
|
|
60
|
+
* | `getFieldSync` | `(path) => value` | Получить актуальное значение поля |
|
|
61
|
+
* | `setField` | `(path, value) => void` | Установить значение поля |
|
|
62
|
+
* | `getError` | `(path) => error` | Получить ошибку поля |
|
|
63
|
+
* | `setError` | `(path, error) => void` | Установить ошибку поля |
|
|
64
|
+
* | `clearField` | `(path \| paths) => void` | Очистить поле(я) |
|
|
65
|
+
* | `clearForm` | `() => void` | Очистить форму |
|
|
66
|
+
* | `clearErrors` | `() => void` | Очистить все ошибки |
|
|
67
|
+
* | `highlightField` | `(path) => Promise<boolean>` | Валидировать поле с ошибками |
|
|
68
|
+
* | `highlightFields` | `(paths) => Promise<boolean>` | Валидировать несколько полей |
|
|
69
|
+
* | `highlightFormErrors` | `() => Promise<boolean>` | Валидировать всю форму |
|
|
70
|
+
* | `isFieldValid` | `(path) => Promise<boolean>` | Проверка поля без ошибок |
|
|
71
|
+
* | `areFieldsValid` | `(paths) => Promise<boolean>` | Проверка полей без ошибок |
|
|
72
|
+
* | `isFormValid` | `() => Promise<boolean>` | Проверка формы без ошибок |
|
|
73
|
+
* | `getValidForm` | `() => Promise<T \| null>` | Получить форму, если валидна |
|
|
74
|
+
* | `submitForm` | `() => void` | Программный submit |
|
|
75
|
+
* | `resetForm` | `() => void` | Программный reset |
|
|
76
|
+
*
|
|
77
|
+
* ---
|
|
78
|
+
* ## `services`
|
|
79
|
+
*
|
|
80
|
+
* `services` доступны **только внутри submit-callbacks**
|
|
81
|
+
* и предоставляют императивный API:
|
|
82
|
+
*
|
|
83
|
+
* - `form` — чтение и замена данных формы;
|
|
84
|
+
* - `fields` — работа с полями;
|
|
85
|
+
* - `errors` — управление ошибками;
|
|
86
|
+
* - `validation` — проверки без side-effects;
|
|
87
|
+
* - `highlight` — валидация с обновлением ошибок.
|
|
88
|
+
*
|
|
89
|
+
* ---
|
|
90
|
+
* @example
|
|
91
|
+
*
|
|
92
|
+
* ```tsx
|
|
93
|
+
* type FormType = {
|
|
94
|
+
* phone: string;
|
|
95
|
+
* message: string;
|
|
96
|
+
* selects: {
|
|
97
|
+
* category: 'a' | 'b' | 'c';
|
|
98
|
+
* tags: ('a' | 'b' | 'c')[];
|
|
99
|
+
* };
|
|
100
|
+
* settings: [
|
|
101
|
+
* { enabled: boolean },
|
|
102
|
+
* { mode: { value: string } },
|
|
103
|
+
* ];
|
|
104
|
+
* };
|
|
105
|
+
*
|
|
106
|
+
* const scheme: FormSchemeType<FormType> = {
|
|
107
|
+
* phone: {
|
|
108
|
+
* required: { setting: true, message: 'Обязательное поле' },
|
|
109
|
+
* custom: value =>
|
|
110
|
+
* value && value.length > 5 ? false : 'Некорректный номер',
|
|
111
|
+
* },
|
|
112
|
+
*
|
|
113
|
+
* message: {
|
|
114
|
+
* noSpace: true,
|
|
115
|
+
* custom: (value, options) => {
|
|
116
|
+
* const enabled = options.getField('settings[0].enabled');
|
|
117
|
+
* return enabled && !value
|
|
118
|
+
* ? 'Сообщение обязательно'
|
|
119
|
+
* : false;
|
|
120
|
+
* },
|
|
121
|
+
* },
|
|
122
|
+
*
|
|
123
|
+
* 'selects.category': {
|
|
124
|
+
* required: true,
|
|
125
|
+
* },
|
|
126
|
+
* };
|
|
127
|
+
*
|
|
128
|
+
* export function ExampleForm() {
|
|
129
|
+
* const {
|
|
130
|
+
* formData,
|
|
131
|
+
* register,
|
|
132
|
+
* registerForm,
|
|
133
|
+
* highlightField,
|
|
134
|
+
* isFormValid,
|
|
135
|
+
* } = useForm<FormType>({
|
|
136
|
+
* scheme,
|
|
137
|
+
*
|
|
138
|
+
* onSubmitAttempt: (data, event, services) => {
|
|
139
|
+
* console.log('Submit attempt:', data);
|
|
140
|
+
* },
|
|
141
|
+
*
|
|
142
|
+
* onSubmit: async (data, event, services) => {
|
|
143
|
+
* const isValid = await services.validation.isFormValid();
|
|
144
|
+
* if (!isValid) return;
|
|
145
|
+
*
|
|
146
|
+
* console.log('Submit success:', data);
|
|
147
|
+
* },
|
|
148
|
+
*
|
|
149
|
+
* onSubmitError: ({ errors }, services) => {
|
|
150
|
+
* services.highlight.form();
|
|
151
|
+
* console.log('Submit errors:', errors);
|
|
152
|
+
* },
|
|
153
|
+
* });
|
|
154
|
+
*
|
|
155
|
+
* return (
|
|
156
|
+
* <form {...registerForm()}>
|
|
157
|
+
*
|
|
158
|
+
* <input {...register('phone')} />
|
|
159
|
+
*
|
|
160
|
+
* <textarea {...register('message')} />
|
|
161
|
+
*
|
|
162
|
+
* <select {...register('selects.category')}>
|
|
163
|
+
* <option value="a">A</option>
|
|
164
|
+
* <option value="b">B</option>
|
|
165
|
+
* <option value="c">C</option>
|
|
166
|
+
* </select>
|
|
167
|
+
*
|
|
168
|
+
* <input
|
|
169
|
+
* type="checkbox"
|
|
170
|
+
* {...register('settings[0].enabled')}
|
|
171
|
+
* />
|
|
172
|
+
*
|
|
173
|
+
* <input {...register('settings[1].mode.value')} />
|
|
174
|
+
*
|
|
175
|
+
* <button type="button" onClick={() => highlightField('phone')}>
|
|
176
|
+
* Validate phone
|
|
177
|
+
* </button>
|
|
178
|
+
*
|
|
179
|
+
* <button type="submit">Submit</button>
|
|
180
|
+
*
|
|
181
|
+
* <pre>{JSON.stringify(formData, null, 2)}</pre>
|
|
182
|
+
*
|
|
183
|
+
* </form>
|
|
184
|
+
* );
|
|
185
|
+
* }
|
|
186
|
+
* ```
|
|
187
|
+
*
|
|
188
|
+
* @template Form Полный тип формы
|
|
189
|
+
* @template T Тип начальных данных
|
|
190
|
+
*/
|
|
191
|
+
export type UseFormDocs = never;
|