@ttoss/forms 0.26.8 → 0.27.0
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/esm/Brazil/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-
|
|
2
|
+
import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-GB65RGLC.js";
|
|
3
3
|
|
|
4
4
|
// src/Brazil/FormFieldPhone.tsx
|
|
5
5
|
import { Input } from "@ttoss/ui";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { Form, useForm, yupResolver } from "../chunk-
|
|
2
|
+
import { Form, useForm, yupResolver } from "../chunk-GB65RGLC.js";
|
|
3
3
|
|
|
4
4
|
// src/MultistepForm/MultistepForm.tsx
|
|
5
5
|
import * as React3 from "react";
|
|
@@ -1,170 +1,18 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
|
|
3
|
-
// src/index.ts
|
|
4
|
-
import { yupResolver } from "@hookform/resolvers/yup";
|
|
5
|
-
|
|
6
|
-
// src/yup/i18n.ts
|
|
7
|
-
import { defineMessage } from "@ttoss/react-i18n";
|
|
8
|
-
import { setLocale } from "yup";
|
|
9
|
-
setLocale({
|
|
10
|
-
mixed: {
|
|
11
|
-
required: defineMessage({
|
|
12
|
-
id: "MfWGyg",
|
|
13
|
-
defaultMessage: [{
|
|
14
|
-
"type": 0,
|
|
15
|
-
"value": "Field is required"
|
|
16
|
-
}]
|
|
17
|
-
}),
|
|
18
|
-
notType: ({
|
|
19
|
-
type
|
|
20
|
-
}) => {
|
|
21
|
-
return {
|
|
22
|
-
...defineMessage({
|
|
23
|
-
id: "ZhaPt0",
|
|
24
|
-
defaultMessage: [{
|
|
25
|
-
"type": 0,
|
|
26
|
-
"value": "Invalid Value for Field of type "
|
|
27
|
-
}, {
|
|
28
|
-
"type": 1,
|
|
29
|
-
"value": "type"
|
|
30
|
-
}]
|
|
31
|
-
}),
|
|
32
|
-
values: {
|
|
33
|
-
type
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
string: {
|
|
39
|
-
min: ({
|
|
40
|
-
min
|
|
41
|
-
}) => {
|
|
42
|
-
return {
|
|
43
|
-
...defineMessage({
|
|
44
|
-
id: "D1C6fR",
|
|
45
|
-
defaultMessage: [{
|
|
46
|
-
"type": 0,
|
|
47
|
-
"value": "Field must be at least "
|
|
48
|
-
}, {
|
|
49
|
-
"type": 1,
|
|
50
|
-
"value": "min"
|
|
51
|
-
}, {
|
|
52
|
-
"type": 0,
|
|
53
|
-
"value": " characters"
|
|
54
|
-
}]
|
|
55
|
-
}),
|
|
56
|
-
values: {
|
|
57
|
-
min
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
// src/yup/schema.ts
|
|
65
|
-
import * as yup from "yup";
|
|
66
|
-
|
|
67
|
-
// src/Brazil/FormFieldCNPJ.tsx
|
|
68
|
-
import { Input } from "@ttoss/ui";
|
|
69
|
-
import { PatternFormat } from "react-number-format";
|
|
70
|
-
import { jsx } from "react/jsx-runtime";
|
|
71
|
-
var isCnpjValid = cnpj => {
|
|
72
|
-
if (cnpj?.length != 14) {
|
|
73
|
-
return false;
|
|
74
|
-
}
|
|
75
|
-
if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
|
|
76
|
-
return false;
|
|
77
|
-
}
|
|
78
|
-
let size = cnpj.length - 2;
|
|
79
|
-
let numbers = cnpj.substring(0, size);
|
|
80
|
-
const digits = cnpj.substring(size);
|
|
81
|
-
let soma = 0;
|
|
82
|
-
let pos = size - 7;
|
|
83
|
-
for (let i = size; i >= 1; i--) {
|
|
84
|
-
soma += numbers.charAt(size - i) * pos--;
|
|
85
|
-
if (pos < 2) {
|
|
86
|
-
pos = 9;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
90
|
-
if (result != digits.charAt(0)) {
|
|
91
|
-
return false;
|
|
92
|
-
}
|
|
93
|
-
size = size + 1;
|
|
94
|
-
numbers = cnpj.substring(0, size);
|
|
95
|
-
soma = 0;
|
|
96
|
-
pos = size - 7;
|
|
97
|
-
for (let i = size; i >= 1; i--) {
|
|
98
|
-
soma += numbers.charAt(size - i) * pos--;
|
|
99
|
-
if (pos < 2) {
|
|
100
|
-
pos = 9;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
104
|
-
if (result != digits.charAt(1)) {
|
|
105
|
-
return false;
|
|
106
|
-
}
|
|
107
|
-
return true;
|
|
108
|
-
};
|
|
109
|
-
var FormFieldCNPJ = ({
|
|
110
|
-
label,
|
|
111
|
-
name,
|
|
112
|
-
...patternFormatProps
|
|
113
|
-
}) => {
|
|
114
|
-
return /* @__PURE__ */jsx(FormField, {
|
|
115
|
-
name,
|
|
116
|
-
label,
|
|
117
|
-
render: ({
|
|
118
|
-
field
|
|
119
|
-
}) => {
|
|
120
|
-
return /* @__PURE__ */jsx(PatternFormat, {
|
|
121
|
-
name: field.name,
|
|
122
|
-
value: field.value,
|
|
123
|
-
onBlur: field.onBlur,
|
|
124
|
-
onValueChange: values => {
|
|
125
|
-
field.onChange(values.value);
|
|
126
|
-
},
|
|
127
|
-
format: "##.###.###/####-##",
|
|
128
|
-
customInput: Input,
|
|
129
|
-
placeholder: "12.345.678/0000-00",
|
|
130
|
-
...patternFormatProps
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
// src/yup/schema.ts
|
|
137
|
-
yup.addMethod(yup.string, "cnpj", function () {
|
|
138
|
-
return this.test("valid-cnpj", "Invalid CNPJ", value => {
|
|
139
|
-
return isCnpjValid(value);
|
|
140
|
-
});
|
|
141
|
-
});
|
|
142
|
-
yup.addMethod(yup.string, "password", function ({
|
|
143
|
-
required
|
|
144
|
-
} = {}) {
|
|
145
|
-
const schema = this.trim();
|
|
146
|
-
if (required) {
|
|
147
|
-
schema.required("Password is required");
|
|
148
|
-
}
|
|
149
|
-
return schema.min(8, "Password must be at least 8 characters long");
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
// src/yup/yup.ts
|
|
153
|
-
import * as yup2 from "yup";
|
|
154
|
-
|
|
155
3
|
// src/Form.tsx
|
|
156
4
|
import { Box } from "@ttoss/ui";
|
|
157
5
|
import { FormProvider } from "react-hook-form";
|
|
158
|
-
import { jsx
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
159
7
|
var Form = ({
|
|
160
8
|
children,
|
|
161
9
|
onSubmit,
|
|
162
10
|
sx,
|
|
163
11
|
...formMethods
|
|
164
12
|
}) => {
|
|
165
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */jsx(FormProvider, {
|
|
166
14
|
...formMethods,
|
|
167
|
-
children: /* @__PURE__ */
|
|
15
|
+
children: /* @__PURE__ */jsx(Box, {
|
|
168
16
|
as: "form",
|
|
169
17
|
variant: "forms.form",
|
|
170
18
|
onSubmit: formMethods.handleSubmit(data => {
|
|
@@ -181,7 +29,7 @@ import { ErrorMessage } from "@hookform/error-message";
|
|
|
181
29
|
import { useFormContext } from "react-hook-form";
|
|
182
30
|
import { FormattedMessage } from "@ttoss/react-i18n";
|
|
183
31
|
import { HelpText } from "@ttoss/ui";
|
|
184
|
-
import { jsx as
|
|
32
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
185
33
|
var isMessageDescriptor = possibleMessageDescriptor => {
|
|
186
34
|
return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
|
|
187
35
|
};
|
|
@@ -194,13 +42,13 @@ var FormErrorMessage = ({
|
|
|
194
42
|
errors
|
|
195
43
|
}
|
|
196
44
|
} = useFormContext();
|
|
197
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */jsx2(ErrorMessage, {
|
|
198
46
|
name,
|
|
199
47
|
errors,
|
|
200
48
|
render: ({
|
|
201
49
|
message
|
|
202
50
|
}) => {
|
|
203
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */jsx2(HelpText, {
|
|
204
52
|
negative: true,
|
|
205
53
|
disabled,
|
|
206
54
|
children: (() => {
|
|
@@ -208,7 +56,7 @@ var FormErrorMessage = ({
|
|
|
208
56
|
return message;
|
|
209
57
|
}
|
|
210
58
|
if (isMessageDescriptor(message)) {
|
|
211
|
-
return /* @__PURE__ */
|
|
59
|
+
return /* @__PURE__ */jsx2(FormattedMessage, {
|
|
212
60
|
...message
|
|
213
61
|
});
|
|
214
62
|
}
|
|
@@ -223,7 +71,7 @@ var FormErrorMessage = ({
|
|
|
223
71
|
import * as React from "react";
|
|
224
72
|
import { useController } from "react-hook-form";
|
|
225
73
|
import { Flex, Label } from "@ttoss/ui";
|
|
226
|
-
import { Fragment, jsx as
|
|
74
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
227
75
|
var FormField = ({
|
|
228
76
|
label,
|
|
229
77
|
id: idProp,
|
|
@@ -248,7 +96,7 @@ var FormField = ({
|
|
|
248
96
|
}
|
|
249
97
|
const childProps = child.props;
|
|
250
98
|
return /* @__PURE__ */jsxs(Fragment, {
|
|
251
|
-
children: [label && /* @__PURE__ */
|
|
99
|
+
children: [label && /* @__PURE__ */jsx3(Label, {
|
|
252
100
|
"aria-disabled": disabled,
|
|
253
101
|
htmlFor: id,
|
|
254
102
|
tooltip,
|
|
@@ -269,17 +117,17 @@ var FormField = ({
|
|
|
269
117
|
...sx
|
|
270
118
|
},
|
|
271
119
|
css,
|
|
272
|
-
children: [memoizedRender, /* @__PURE__ */
|
|
120
|
+
children: [memoizedRender, /* @__PURE__ */jsx3(FormErrorMessage, {
|
|
273
121
|
name
|
|
274
122
|
})]
|
|
275
123
|
});
|
|
276
124
|
};
|
|
277
125
|
|
|
278
126
|
// src/FormFieldCheckbox.tsx
|
|
279
|
-
import * as React2 from "react";
|
|
280
127
|
import { Checkbox, Flex as Flex2, Label as Label2 } from "@ttoss/ui";
|
|
128
|
+
import * as React2 from "react";
|
|
281
129
|
import { useController as useController2 } from "react-hook-form";
|
|
282
|
-
import { jsx as
|
|
130
|
+
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
283
131
|
var FormFieldCheckbox = ({
|
|
284
132
|
label,
|
|
285
133
|
name,
|
|
@@ -310,14 +158,14 @@ var FormFieldCheckbox = ({
|
|
|
310
158
|
width: "100%",
|
|
311
159
|
...sx
|
|
312
160
|
},
|
|
313
|
-
children: [/* @__PURE__ */
|
|
161
|
+
children: [/* @__PURE__ */jsx4(Flex2, {
|
|
314
162
|
sx: {
|
|
315
163
|
alignItems: "center"
|
|
316
164
|
},
|
|
317
165
|
children: /* @__PURE__ */jsxs2(Label2, {
|
|
318
166
|
"aria-disabled": checkboxProps.disabled,
|
|
319
167
|
htmlFor: id,
|
|
320
|
-
children: [/* @__PURE__ */
|
|
168
|
+
children: [/* @__PURE__ */jsx4(Checkbox, {
|
|
321
169
|
id,
|
|
322
170
|
ref,
|
|
323
171
|
checked: value,
|
|
@@ -328,36 +176,36 @@ var FormFieldCheckbox = ({
|
|
|
328
176
|
...checkboxProps
|
|
329
177
|
}), label]
|
|
330
178
|
})
|
|
331
|
-
}), /* @__PURE__ */
|
|
179
|
+
}), /* @__PURE__ */jsx4(FormErrorMessage, {
|
|
332
180
|
name
|
|
333
181
|
})]
|
|
334
182
|
});
|
|
335
183
|
};
|
|
336
184
|
|
|
337
185
|
// src/FormFieldPatternFormat.tsx
|
|
338
|
-
import { Input
|
|
339
|
-
import { PatternFormat
|
|
340
|
-
import { jsx as
|
|
186
|
+
import { Input } from "@ttoss/ui";
|
|
187
|
+
import { PatternFormat } from "react-number-format";
|
|
188
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
341
189
|
var FormFieldPatternFormat = ({
|
|
342
190
|
label,
|
|
343
191
|
name,
|
|
344
192
|
...patternFormatProps
|
|
345
193
|
}) => {
|
|
346
|
-
return /* @__PURE__ */
|
|
194
|
+
return /* @__PURE__ */jsx5(FormField, {
|
|
347
195
|
name,
|
|
348
196
|
label,
|
|
349
197
|
render: ({
|
|
350
198
|
field,
|
|
351
199
|
fieldState
|
|
352
200
|
}) => {
|
|
353
|
-
return /* @__PURE__ */
|
|
201
|
+
return /* @__PURE__ */jsx5(PatternFormat, {
|
|
354
202
|
name: field.name,
|
|
355
203
|
value: field.value,
|
|
356
204
|
onBlur: field.onBlur,
|
|
357
205
|
onValueChange: values => {
|
|
358
206
|
field.onChange(values.value);
|
|
359
207
|
},
|
|
360
|
-
customInput:
|
|
208
|
+
customInput: Input,
|
|
361
209
|
"aria-invalid": Boolean(fieldState.error).valueOf(),
|
|
362
210
|
...patternFormatProps
|
|
363
211
|
});
|
|
@@ -366,13 +214,13 @@ var FormFieldPatternFormat = ({
|
|
|
366
214
|
};
|
|
367
215
|
|
|
368
216
|
// src/FormFieldCreditCardNumber.tsx
|
|
369
|
-
import { jsx as
|
|
217
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
370
218
|
var FormFieldCreditCardNumber = ({
|
|
371
219
|
label,
|
|
372
220
|
name,
|
|
373
221
|
...formFieldPatternFormatProps
|
|
374
222
|
}) => {
|
|
375
|
-
return /* @__PURE__ */
|
|
223
|
+
return /* @__PURE__ */jsx6(FormFieldPatternFormat, {
|
|
376
224
|
name,
|
|
377
225
|
label,
|
|
378
226
|
format: "#### #### #### ####",
|
|
@@ -382,28 +230,28 @@ var FormFieldCreditCardNumber = ({
|
|
|
382
230
|
};
|
|
383
231
|
|
|
384
232
|
// src/FormFieldNumericFormat.tsx
|
|
385
|
-
import { Input as
|
|
233
|
+
import { Input as Input2 } from "@ttoss/ui";
|
|
386
234
|
import { NumericFormat } from "react-number-format";
|
|
387
|
-
import { jsx as
|
|
235
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
388
236
|
var FormFieldNumericFormat = ({
|
|
389
237
|
label,
|
|
390
238
|
name,
|
|
391
239
|
...numericFormatProps
|
|
392
240
|
}) => {
|
|
393
|
-
return /* @__PURE__ */
|
|
241
|
+
return /* @__PURE__ */jsx7(FormField, {
|
|
394
242
|
label,
|
|
395
243
|
name,
|
|
396
244
|
render: ({
|
|
397
245
|
field
|
|
398
246
|
}) => {
|
|
399
|
-
return /* @__PURE__ */
|
|
247
|
+
return /* @__PURE__ */jsx7(NumericFormat, {
|
|
400
248
|
name: field.name,
|
|
401
249
|
value: field.value,
|
|
402
250
|
onBlur: field.onBlur,
|
|
403
251
|
onValueChange: values => {
|
|
404
252
|
field.onChange(values.floatValue);
|
|
405
253
|
},
|
|
406
|
-
customInput:
|
|
254
|
+
customInput: Input2,
|
|
407
255
|
...numericFormatProps
|
|
408
256
|
});
|
|
409
257
|
}
|
|
@@ -411,7 +259,7 @@ var FormFieldNumericFormat = ({
|
|
|
411
259
|
};
|
|
412
260
|
|
|
413
261
|
// src/FormFieldCurrencyInput.tsx
|
|
414
|
-
import { jsx as
|
|
262
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
415
263
|
var FormFieldCurrencyInput = ({
|
|
416
264
|
label,
|
|
417
265
|
name,
|
|
@@ -420,7 +268,7 @@ var FormFieldCurrencyInput = ({
|
|
|
420
268
|
thousandSeparator,
|
|
421
269
|
...formFieldNumericFormatProps
|
|
422
270
|
}) => {
|
|
423
|
-
return /* @__PURE__ */
|
|
271
|
+
return /* @__PURE__ */jsx8(FormFieldNumericFormat, {
|
|
424
272
|
name,
|
|
425
273
|
label,
|
|
426
274
|
fixedDecimalScale: true,
|
|
@@ -435,8 +283,8 @@ var FormFieldCurrencyInput = ({
|
|
|
435
283
|
};
|
|
436
284
|
|
|
437
285
|
// src/FormFieldInput.tsx
|
|
438
|
-
import { Input as
|
|
439
|
-
import { jsx as
|
|
286
|
+
import { Input as Input3 } from "@ttoss/ui";
|
|
287
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
440
288
|
var FormFieldInput = ({
|
|
441
289
|
label,
|
|
442
290
|
name,
|
|
@@ -446,7 +294,7 @@ var FormFieldInput = ({
|
|
|
446
294
|
defaultValue = "",
|
|
447
295
|
...inputProps
|
|
448
296
|
}) => {
|
|
449
|
-
return /* @__PURE__ */
|
|
297
|
+
return /* @__PURE__ */jsx9(FormField, {
|
|
450
298
|
name,
|
|
451
299
|
label,
|
|
452
300
|
disabled: inputProps.disabled,
|
|
@@ -458,7 +306,7 @@ var FormFieldInput = ({
|
|
|
458
306
|
field,
|
|
459
307
|
fieldState
|
|
460
308
|
}) => {
|
|
461
|
-
return /* @__PURE__ */
|
|
309
|
+
return /* @__PURE__ */jsx9(Input3, {
|
|
462
310
|
...inputProps,
|
|
463
311
|
...field,
|
|
464
312
|
"aria-invalid": fieldState.error ? "true" : void 0
|
|
@@ -469,7 +317,7 @@ var FormFieldInput = ({
|
|
|
469
317
|
|
|
470
318
|
// src/FormFieldPassword.tsx
|
|
471
319
|
import { InputPassword } from "@ttoss/ui";
|
|
472
|
-
import { jsx as
|
|
320
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
473
321
|
var FormFieldPassword = ({
|
|
474
322
|
label,
|
|
475
323
|
name,
|
|
@@ -479,7 +327,7 @@ var FormFieldPassword = ({
|
|
|
479
327
|
defaultValue = "",
|
|
480
328
|
...inputProps
|
|
481
329
|
}) => {
|
|
482
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */jsx10(FormField, {
|
|
483
331
|
name,
|
|
484
332
|
label,
|
|
485
333
|
disabled: inputProps.disabled,
|
|
@@ -491,7 +339,7 @@ var FormFieldPassword = ({
|
|
|
491
339
|
field,
|
|
492
340
|
fieldState
|
|
493
341
|
}) => {
|
|
494
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */jsx10(InputPassword, {
|
|
495
343
|
...inputProps,
|
|
496
344
|
...field,
|
|
497
345
|
"aria-invalid": fieldState.error ? "true" : void 0
|
|
@@ -503,7 +351,7 @@ var FormFieldPassword = ({
|
|
|
503
351
|
// src/FormFieldRadio.tsx
|
|
504
352
|
import { Box as Box2, Flex as Flex3, Label as Label3, Radio } from "@ttoss/ui";
|
|
505
353
|
import { useController as useController3 } from "react-hook-form";
|
|
506
|
-
import { jsx as
|
|
354
|
+
import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
507
355
|
var FormFieldRadio = ({
|
|
508
356
|
label,
|
|
509
357
|
name,
|
|
@@ -529,17 +377,17 @@ var FormFieldRadio = ({
|
|
|
529
377
|
width: "100%",
|
|
530
378
|
...sx
|
|
531
379
|
},
|
|
532
|
-
children: [label && /* @__PURE__ */
|
|
380
|
+
children: [label && /* @__PURE__ */jsx11(Label3, {
|
|
533
381
|
sx: {
|
|
534
382
|
marginBottom: "md"
|
|
535
383
|
},
|
|
536
384
|
children: label
|
|
537
|
-
}), /* @__PURE__ */
|
|
385
|
+
}), /* @__PURE__ */jsx11(Box2, {
|
|
538
386
|
children: options.map(option => {
|
|
539
387
|
const id = `form-field-radio-${name}-${option.value}`;
|
|
540
388
|
return /* @__PURE__ */jsxs3(Label3, {
|
|
541
389
|
htmlFor: id,
|
|
542
|
-
children: [/* @__PURE__ */
|
|
390
|
+
children: [/* @__PURE__ */jsx11(Radio, {
|
|
543
391
|
ref,
|
|
544
392
|
onChange,
|
|
545
393
|
onBlur,
|
|
@@ -551,7 +399,7 @@ var FormFieldRadio = ({
|
|
|
551
399
|
}), option.label]
|
|
552
400
|
}, id);
|
|
553
401
|
})
|
|
554
|
-
}), /* @__PURE__ */
|
|
402
|
+
}), /* @__PURE__ */jsx11(FormErrorMessage, {
|
|
555
403
|
name
|
|
556
404
|
})]
|
|
557
405
|
});
|
|
@@ -559,7 +407,7 @@ var FormFieldRadio = ({
|
|
|
559
407
|
|
|
560
408
|
// src/FormFieldSelect.tsx
|
|
561
409
|
import { Select } from "@ttoss/ui";
|
|
562
|
-
import { jsx as
|
|
410
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
563
411
|
var FormFieldSelect = ({
|
|
564
412
|
label,
|
|
565
413
|
name,
|
|
@@ -572,7 +420,7 @@ var FormFieldSelect = ({
|
|
|
572
420
|
onTooltipClick,
|
|
573
421
|
...selectProps
|
|
574
422
|
}) => {
|
|
575
|
-
return /* @__PURE__ */
|
|
423
|
+
return /* @__PURE__ */jsx12(FormField, {
|
|
576
424
|
name,
|
|
577
425
|
label,
|
|
578
426
|
id,
|
|
@@ -586,7 +434,7 @@ var FormFieldSelect = ({
|
|
|
586
434
|
field,
|
|
587
435
|
fieldState
|
|
588
436
|
}) => {
|
|
589
|
-
return /* @__PURE__ */
|
|
437
|
+
return /* @__PURE__ */jsx12(Select, {
|
|
590
438
|
...selectProps,
|
|
591
439
|
...field,
|
|
592
440
|
isDisabled: disabled,
|
|
@@ -598,7 +446,7 @@ var FormFieldSelect = ({
|
|
|
598
446
|
|
|
599
447
|
// src/FormFieldTextarea.tsx
|
|
600
448
|
import { Textarea } from "@ttoss/ui";
|
|
601
|
-
import { jsx as
|
|
449
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
602
450
|
var FormFieldTextarea = ({
|
|
603
451
|
label,
|
|
604
452
|
name,
|
|
@@ -606,7 +454,7 @@ var FormFieldTextarea = ({
|
|
|
606
454
|
...textareaProps
|
|
607
455
|
}) => {
|
|
608
456
|
const id = `form-field-textarea-${name}`;
|
|
609
|
-
return /* @__PURE__ */
|
|
457
|
+
return /* @__PURE__ */jsx13(FormField, {
|
|
610
458
|
label,
|
|
611
459
|
name,
|
|
612
460
|
id,
|
|
@@ -615,7 +463,7 @@ var FormFieldTextarea = ({
|
|
|
615
463
|
field,
|
|
616
464
|
fieldState
|
|
617
465
|
}) => {
|
|
618
|
-
return /* @__PURE__ */
|
|
466
|
+
return /* @__PURE__ */jsx13(Textarea, {
|
|
619
467
|
...field,
|
|
620
468
|
...textareaProps,
|
|
621
469
|
"aria-invalid": fieldState.error ? "true" : void 0
|
|
@@ -627,7 +475,7 @@ var FormFieldTextarea = ({
|
|
|
627
475
|
// src/FormGroup.tsx
|
|
628
476
|
import * as React3 from "react";
|
|
629
477
|
import { Box as Box3, Flex as Flex4, Text } from "@ttoss/ui";
|
|
630
|
-
import { jsx as
|
|
478
|
+
import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
631
479
|
var FormGroupLevelsManagerContext = React3.createContext({
|
|
632
480
|
levelsLength: 1,
|
|
633
481
|
registerChild: () => {
|
|
@@ -643,7 +491,7 @@ var FormGroupLevelsManager = ({
|
|
|
643
491
|
setLevelsLength(level + 1);
|
|
644
492
|
}
|
|
645
493
|
}, [levelsLength]);
|
|
646
|
-
return /* @__PURE__ */
|
|
494
|
+
return /* @__PURE__ */jsx14(FormGroupLevelsManagerContext.Provider, {
|
|
647
495
|
value: {
|
|
648
496
|
levelsLength,
|
|
649
497
|
registerChild
|
|
@@ -695,21 +543,21 @@ var FormGroupWrapper = ({
|
|
|
695
543
|
marginBottom: "lg",
|
|
696
544
|
...boxProps.sx
|
|
697
545
|
},
|
|
698
|
-
children: [title && /* @__PURE__ */
|
|
546
|
+
children: [title && /* @__PURE__ */jsx14(Box3, {
|
|
699
547
|
sx: {
|
|
700
548
|
marginBottom: "md"
|
|
701
549
|
},
|
|
702
|
-
children: /* @__PURE__ */
|
|
550
|
+
children: /* @__PURE__ */jsx14(Text, {
|
|
703
551
|
sx: {
|
|
704
552
|
fontSize: "2xl",
|
|
705
553
|
fontWeight: "bold"
|
|
706
554
|
},
|
|
707
555
|
children: title
|
|
708
556
|
})
|
|
709
|
-
}), /* @__PURE__ */
|
|
557
|
+
}), /* @__PURE__ */jsx14(Flex4, {
|
|
710
558
|
sx: childrenContainerSx,
|
|
711
559
|
children
|
|
712
|
-
}), name && /* @__PURE__ */
|
|
560
|
+
}), name && /* @__PURE__ */jsx14(FormErrorMessage, {
|
|
713
561
|
name
|
|
714
562
|
})]
|
|
715
563
|
});
|
|
@@ -719,21 +567,171 @@ var FormGroup = props => {
|
|
|
719
567
|
level
|
|
720
568
|
} = useFormGroup();
|
|
721
569
|
const currentLevel = level === void 0 ? 0 : level + 1;
|
|
722
|
-
return /* @__PURE__ */
|
|
570
|
+
return /* @__PURE__ */jsx14(FormGroupContext.Provider, {
|
|
723
571
|
value: {
|
|
724
572
|
parentLevel: currentLevel
|
|
725
573
|
},
|
|
726
|
-
children: currentLevel === 0 ? /* @__PURE__ */
|
|
727
|
-
children: /* @__PURE__ */
|
|
574
|
+
children: currentLevel === 0 ? /* @__PURE__ */jsx14(FormGroupLevelsManager, {
|
|
575
|
+
children: /* @__PURE__ */jsx14(FormGroupWrapper, {
|
|
728
576
|
...props
|
|
729
577
|
})
|
|
730
|
-
}) : /* @__PURE__ */
|
|
578
|
+
}) : /* @__PURE__ */jsx14(FormGroupWrapper, {
|
|
731
579
|
...props
|
|
732
580
|
})
|
|
733
581
|
});
|
|
734
582
|
};
|
|
735
583
|
|
|
584
|
+
// src/yup/i18n.ts
|
|
585
|
+
import { defineMessage } from "@ttoss/react-i18n";
|
|
586
|
+
import { setLocale } from "yup";
|
|
587
|
+
setLocale({
|
|
588
|
+
mixed: {
|
|
589
|
+
required: defineMessage({
|
|
590
|
+
id: "MfWGyg",
|
|
591
|
+
defaultMessage: [{
|
|
592
|
+
"type": 0,
|
|
593
|
+
"value": "Field is required"
|
|
594
|
+
}]
|
|
595
|
+
}),
|
|
596
|
+
notType: ({
|
|
597
|
+
type
|
|
598
|
+
}) => {
|
|
599
|
+
return {
|
|
600
|
+
...defineMessage({
|
|
601
|
+
id: "ZhaPt0",
|
|
602
|
+
defaultMessage: [{
|
|
603
|
+
"type": 0,
|
|
604
|
+
"value": "Invalid Value for Field of type "
|
|
605
|
+
}, {
|
|
606
|
+
"type": 1,
|
|
607
|
+
"value": "type"
|
|
608
|
+
}]
|
|
609
|
+
}),
|
|
610
|
+
values: {
|
|
611
|
+
type
|
|
612
|
+
}
|
|
613
|
+
};
|
|
614
|
+
}
|
|
615
|
+
},
|
|
616
|
+
string: {
|
|
617
|
+
min: ({
|
|
618
|
+
min
|
|
619
|
+
}) => {
|
|
620
|
+
return {
|
|
621
|
+
...defineMessage({
|
|
622
|
+
id: "D1C6fR",
|
|
623
|
+
defaultMessage: [{
|
|
624
|
+
"type": 0,
|
|
625
|
+
"value": "Field must be at least "
|
|
626
|
+
}, {
|
|
627
|
+
"type": 1,
|
|
628
|
+
"value": "min"
|
|
629
|
+
}, {
|
|
630
|
+
"type": 0,
|
|
631
|
+
"value": " characters"
|
|
632
|
+
}]
|
|
633
|
+
}),
|
|
634
|
+
values: {
|
|
635
|
+
min
|
|
636
|
+
}
|
|
637
|
+
};
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
});
|
|
641
|
+
|
|
642
|
+
// src/yup/schema.ts
|
|
643
|
+
import * as yup from "yup";
|
|
644
|
+
|
|
645
|
+
// src/Brazil/FormFieldCNPJ.tsx
|
|
646
|
+
import { Input as Input4 } from "@ttoss/ui";
|
|
647
|
+
import { PatternFormat as PatternFormat2 } from "react-number-format";
|
|
648
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
649
|
+
var isCnpjValid = cnpj => {
|
|
650
|
+
if (cnpj?.length != 14) {
|
|
651
|
+
return false;
|
|
652
|
+
}
|
|
653
|
+
if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
|
|
654
|
+
return false;
|
|
655
|
+
}
|
|
656
|
+
let size = cnpj.length - 2;
|
|
657
|
+
let numbers = cnpj.substring(0, size);
|
|
658
|
+
const digits = cnpj.substring(size);
|
|
659
|
+
let soma = 0;
|
|
660
|
+
let pos = size - 7;
|
|
661
|
+
for (let i = size; i >= 1; i--) {
|
|
662
|
+
soma += numbers.charAt(size - i) * pos--;
|
|
663
|
+
if (pos < 2) {
|
|
664
|
+
pos = 9;
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
668
|
+
if (result != digits.charAt(0)) {
|
|
669
|
+
return false;
|
|
670
|
+
}
|
|
671
|
+
size = size + 1;
|
|
672
|
+
numbers = cnpj.substring(0, size);
|
|
673
|
+
soma = 0;
|
|
674
|
+
pos = size - 7;
|
|
675
|
+
for (let i = size; i >= 1; i--) {
|
|
676
|
+
soma += numbers.charAt(size - i) * pos--;
|
|
677
|
+
if (pos < 2) {
|
|
678
|
+
pos = 9;
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
682
|
+
if (result != digits.charAt(1)) {
|
|
683
|
+
return false;
|
|
684
|
+
}
|
|
685
|
+
return true;
|
|
686
|
+
};
|
|
687
|
+
var FormFieldCNPJ = ({
|
|
688
|
+
label,
|
|
689
|
+
name,
|
|
690
|
+
...patternFormatProps
|
|
691
|
+
}) => {
|
|
692
|
+
return /* @__PURE__ */jsx15(FormField, {
|
|
693
|
+
name,
|
|
694
|
+
label,
|
|
695
|
+
render: ({
|
|
696
|
+
field
|
|
697
|
+
}) => {
|
|
698
|
+
return /* @__PURE__ */jsx15(PatternFormat2, {
|
|
699
|
+
name: field.name,
|
|
700
|
+
value: field.value,
|
|
701
|
+
onBlur: field.onBlur,
|
|
702
|
+
onValueChange: values => {
|
|
703
|
+
field.onChange(values.value);
|
|
704
|
+
},
|
|
705
|
+
format: "##.###.###/####-##",
|
|
706
|
+
customInput: Input4,
|
|
707
|
+
placeholder: "12.345.678/0000-00",
|
|
708
|
+
...patternFormatProps
|
|
709
|
+
});
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
};
|
|
713
|
+
|
|
714
|
+
// src/yup/schema.ts
|
|
715
|
+
yup.addMethod(yup.string, "cnpj", function () {
|
|
716
|
+
return this.test("valid-cnpj", "Invalid CNPJ", value => {
|
|
717
|
+
return isCnpjValid(value);
|
|
718
|
+
});
|
|
719
|
+
});
|
|
720
|
+
yup.addMethod(yup.string, "password", function ({
|
|
721
|
+
required
|
|
722
|
+
} = {}) {
|
|
723
|
+
const schema = this.trim();
|
|
724
|
+
if (required) {
|
|
725
|
+
schema.required("Password is required");
|
|
726
|
+
}
|
|
727
|
+
return schema.min(8, "Password must be at least 8 characters long");
|
|
728
|
+
});
|
|
729
|
+
|
|
730
|
+
// src/yup/yup.ts
|
|
731
|
+
import * as yup2 from "yup";
|
|
732
|
+
|
|
736
733
|
// src/index.ts
|
|
737
|
-
import {
|
|
734
|
+
import { yupResolver } from "@hookform/resolvers/yup";
|
|
735
|
+
import { Controller, FormProvider as FormProvider2, useController as useController4, useFieldArray, useForm, useFormContext as useFormContext2, useFormState, useWatch } from "react-hook-form";
|
|
738
736
|
export * from "react-hook-form";
|
|
739
|
-
export {
|
|
737
|
+
export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController4 as useController, useFieldArray, useForm, useFormContext2 as useFormContext, useFormState, useWatch };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-
|
|
2
|
+
import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-GB65RGLC.js";
|
|
3
3
|
export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
export { yupResolver } from '@hookform/resolvers/yup';
|
|
2
|
-
import './typings.d-HZBqJJjn.js';
|
|
3
|
-
import * as yup from 'yup';
|
|
4
|
-
export { yup };
|
|
5
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
2
|
import * as React from 'react';
|
|
7
3
|
import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
|
|
@@ -11,6 +7,10 @@ export { Controller, FormProvider, useController, useFieldArray, useForm, useFor
|
|
|
11
7
|
import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.js';
|
|
12
8
|
export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CkcL14ho.js';
|
|
13
9
|
import { NumericFormatProps } from 'react-number-format';
|
|
10
|
+
import './typings.d-HZBqJJjn.js';
|
|
11
|
+
import * as yup from 'yup';
|
|
12
|
+
export { yup };
|
|
13
|
+
export { yupResolver } from '@hookform/resolvers/yup';
|
|
14
14
|
|
|
15
15
|
declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
|
|
16
16
|
children?: React.ReactNode;
|
|
@@ -38,7 +38,7 @@ type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TNam
|
|
|
38
38
|
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
39
39
|
|
|
40
40
|
declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
|
|
41
|
-
label?:
|
|
41
|
+
label?: React.ReactNode;
|
|
42
42
|
name: FieldPath<TFieldValues>;
|
|
43
43
|
} & CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
44
44
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/forms",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "ttoss",
|
|
6
6
|
"contributors": [
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.8.0",
|
|
42
|
-
"@ttoss/react-i18n": "^2.0.
|
|
43
|
-
"@ttoss/ui": "^5.0.
|
|
42
|
+
"@ttoss/react-i18n": "^2.0.9",
|
|
43
|
+
"@ttoss/ui": "^5.0.15"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@types/jest": "^29.5.14",
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"tsup": "^8.3.5",
|
|
52
52
|
"yup": "^1.6.1",
|
|
53
53
|
"@ttoss/config": "^1.35.2",
|
|
54
|
+
"@ttoss/react-icons": "^0.4.9",
|
|
54
55
|
"@ttoss/i18n-cli": "^0.7.26",
|
|
55
|
-
"@ttoss/react-i18n": "^2.0.
|
|
56
|
-
"@ttoss/
|
|
57
|
-
"@ttoss/
|
|
58
|
-
"@ttoss/test-utils": "^2.1.21"
|
|
56
|
+
"@ttoss/react-i18n": "^2.0.9",
|
|
57
|
+
"@ttoss/ui": "^5.0.15",
|
|
58
|
+
"@ttoss/test-utils": "^2.1.22"
|
|
59
59
|
},
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public",
|