Core package
Esta página aún no está disponible en tu idioma.
Here you can find a list of interfaces and types used in the core package.
Global
All types and interfaces that you have to know to use the useConfig
, and the Faivform contexts.
Config
Property | Type | Description |
---|---|---|
fields | ContextStyles | undefined | Global built-in componets styles. |
base | FaivBaseTheme | undefined | Global base CSS variables shared between light and dark themes. |
light | FaivFormTheme | undefined | Global light theme. |
dark | FaivFormTheme | undefined | Global dark theme. |
onLight | FaivCSSVars | undefined | Global faivform CSS variables for light theme. |
onDark | FaivCSSVars | undefined | Global faivform CSS variables for dark theme. |
ContextForm
An interface that defines the form context.
Property | Type | Description |
---|---|---|
loading | Writable<boolean> | Whether the form is loading or not. |
errors | Writable< Errors <Data>> | The errors of the fields. |
data | Writable<Data> | The values of the fields. |
styles | Writable< ContextStyles > | The styles of the form. |
reset | (clear?: boolean, starting?: Data) => void | Resets the form. |
setError | (field: Keys, error?: string | null) => Promise<void> | Sets the error of a field. |
setField | (field: Keys, value: Data[Keys], validate?: boolean) => Promise<void> | Sets the value of a field. |
check | (event: UserEvent <HTMLInputElement | HTMLTextAreaElement, FocusEvent | Event>) => Promise<void> | Checks the value of a field. |
ContextStyles
An interface that defines the field styles.
Property | Type | Description |
---|---|---|
replace | boolean | undefined | Whether the styles should replace the default styles or not. |
field | FieldStyles | undefined | The styles of the Field . |
select | SelectStyles | undefined | The styles of the Select . |
option | OptionStyles | undefined | The styles of the Option . |
file | FileStyles | undefined | The styles of the File . |
errors | ErrorsStyles | undefined | The styles of the Errors . |
icons | Icons | null | undefined | The icons of the form. |
FaivBaseTheme
An interface that defines the base theme.
Property | Type | Description |
---|---|---|
font | string | undefined | The font family of the fields. |
space | string | undefined | The space of the fields. |
radius | string | undefined | The border radius of the fields. |
white | string | undefined | White color used in the fields. |
black | string | undefined | Black color used in the fields. |
FaivFormTheme
An type that defines the faivform theme.
Property | Type | Description |
---|---|---|
primary | FaivFormThemePalette | undefined | The primary theme. |
secondary | FaivFormThemePalette | undefined | The secondary theme. |
accent | FaivFormThemePalette | undefined | The accent theme. |
error | FaivFormThemePalette | undefined | The error theme. |
warning | FaivFormThemePalette | undefined | The warning theme. |
success | FaivFormThemePalette | undefined | The success theme. |
placeholder | FaivFormThemePalette | undefined | The placeholder theme. |
FaivFormThemePalette
A type that defines the faivform theme palette.
Property | Type | Description |
---|---|---|
50 | string | undefined | The 50 color of the theme. |
100 | string | undefined | The 100 color of the theme. |
200 | string | undefined | The 200 color of the theme. |
300 | string | undefined | The 300 color of the theme. |
400 | string | undefined | The 400 color of the theme. |
500 | string | undefined | The 500 color of the theme. |
600 | string | undefined | The 600 color of the theme. |
700 | string | undefined | The 700 color of the theme. |
800 | string | undefined | The 800 color of the theme. |
900 | string | undefined | The 900 color of the theme. |
FaivCSSVars
A type that defines the faivform CSS variables.
Property | Type | Description |
---|---|---|
primary | FaivColorVars | undefined | The primary CSS vars. |
secondary | FaivColorVars | undefined | The secondary CSS vars. |
accent | FaivColorVars | undefined | The accent CSS vars. |
error | FaivColorVars | undefined | The error CSS vars. |
warning | FaivColorVars | undefined | The warning CSS vars. |
success | FaivColorVars | undefined | The success CSS vars. |
placeholder | FaivColorVars | undefined | The placeholder CSS vars. |
shadow | FaivShadowVars | undefined | The shadow CSS vars. |
border | FaivBorderVars | undefined | The border CSS vars. |
FaivColorVars
An interface that defines the faivform color CSS variables.
Property | Type | Description |
---|---|---|
color | string | undefined | The color CSS variable. |
opacity | string | undefined | The opacity CSS variable. |
text | string | undefined | The text color CSS variable. |
“text-opacity” | string | undefined | The text color opacity CSS variable. |
font | string | undefined | The font CSS variable. |
FaivShadowVars
An interface that defines the faivform shadow CSS variables.
Property | Type | Description |
---|---|---|
base | string | undefined | The shadow CSS variable. |
size | string | undefined | The size CSS variable. |
color | string | undefined | The color CSS variable. |
opacity | string | undefined | The opacity color CSS variable. |
FaivBorderVars
An interface that defines the faivform border CSS variables.
Property | Type | Description |
---|---|---|
base | string | undefined | The border CSS variable. |
width | string | undefined | The width CSS variable. |
style | string | undefined | The style CSS variable. |
color | string | undefined | The color CSS variable. |
opacity | string | undefined | The opacity color CSS variable. |
Faivform
All types and interfaces that you have to know to use the core package.
FaivFormConfig
An interface that defines the config of the form.
Property | Type | Description |
---|---|---|
fields | FieldsSchema | Adapter | The fields of the form. |
styles | ContextStyles | undefined | The styles of the form. |
context | string | undefined | The context of the form. |
FaivFormStore
An interface that defines the store of the form.
This contains all the properties of the ContextForm
interface and the following:
Property | Type | Description |
---|---|---|
submit | submit<T = Data>(action: SubmitAction <T>, config?: SubmitConfig <T>) => Submit ` | Submits the form. |
Adapter
An abstract class that defines the methods that an adapter must implement.
Method | Description |
---|---|
initial(): { fields: Data; errors: Errors <Data>; } | Returns the initial values of the fields and errors. |
validate<T = Data>(data: T): Promise<void> | Validates the data. |
field(field: keyof Data, value: Data[keyof Data], errors: Writable< Errors <Data>>): Promise<void> | Validates a field. |
errors(error: unknown, errors: Writable< Errors <Data>>, handle?: (error: unknown) => (void | Promise<void>)): Promise<void> | Handles an error. |
SubmitAction
An type that defines the submit action.
Property | Type | Description |
---|---|---|
values | Data | The values of the form. |
SubmitConfig
An interface that defines the submit config.
Property | Type | Description |
---|---|---|
error | ((error: unknown) => (void | Promise<void>)) | undefined | A function that handles the error. |
finish | VoidFunction | undefined | A function that is called when the submit action is finished whether it was successful or not. |
reset | boolean | undefined | Whether the form should be reset or not. |
initial | Data | undefined | The initial values of the form. |
Submit
An type that defines the function that is called when the form is submitted.
Property | Type | Description |
---|---|---|
event | UserEvent <HTMLFormElement, SubmitEvent> | The submit event. |
UserEvent
An object type that defines the user event. It extends the native event to safely access the current target.
Property | Type | Description |
---|---|---|
currentTarget | EventTarget & Element | The current target of the event. |
… | Event | All the properties of the event used. |
Errors
An object type that defines the errors of the fields.
Property | Type | Description |
---|---|---|
[field] | string | null | The error of a field. |
Schemas
All schemas are defined using TypeScript types. This means that you can use them to define the type of your data.
FieldsSchema
A object type that defines a schema for a set of fields.
Property | Type | Description |
---|---|---|
[field] | Schema | FieldPropSchema | ArraySchema | FieldsSchema | A field schema. |
Schema
A type that defines the type of a field.
Value | Description |
---|---|
RegExp | A regular expression. |
"string" | A string. |
"number" | A number. |
"boolean" | A boolean. |
"date" | A date. |
"file" | A file. |
FieldPropSchema
A object type that defines the type of a field.
Property | Type | Description |
---|---|---|
type | Schema | The type of the field. |
required | boolean | undefined | Whether the field is required or not. |
min | number | undefined | The minimum value of the field. |
max | number | undefined | The maximum value of the field. |
ArraySchema
A object type that defines the type of an array.
Property | Type | Description |
---|---|---|
type | "array" | Indicates that the field is an array. |
item | Schema | FieldPropSchema | ArraySchema | FieldsSchema | The type of the items in the array. |
required | boolean | undefined | Whether the array is required or not. |
min | number | undefined | The minimum length of the array. |
max | number | undefined | The maximum length of the array. |
Styles
All types and interfaces that you have to know to use the styles.
FieldStyles
An interface that defines the field styles.
Property | Type | Description |
---|---|---|
container | string | undefined | Field container class |
label | string | undefined | Field label class |
input | string | undefined | Field input class |
error | string | undefined | Field error class |
area | string | undefined | Field type textarea class |
check | string | undefined | Field type checkbox class |
action | string | undefined | Field type password action class |
icon | string | undefined | Field type password icon class |
checked | string | undefined | Field type checkbox checked icon |
hide | string | undefined | Field type password hide icon. |
show | string | undefined | Field type password show icon. |
SelectStyles
An interface that defines the select styles.
Property | Type | Description |
---|---|---|
container | string | undefined | Select container class |
label | string | undefined | Select label class |
select | string | undefined | Select select class |
value | string | undefined | Select value class |
item | string | undefined | Select item class |
remove | string | undefined | Select remove class |
searchable | string | undefined | Select searchable class |
nonsearchable | string | undefined | Select nonsearchable class |
error | string | undefined | Select error class |
clear | string | undefined | Select clear class |
arrow | string | undefined | Select arrow icon |
icon | string | undefined | Select icon class |
options | string | undefined | Select options class |
option | string | undefined | Select option class |
empty | string | undefined | Select empty class |
OptionStyles
An interface that defines the option styles.
Property | Type | Description |
---|---|---|
container | string | undefined | Options container class |
legend | string | undefined | Options label class |
option | string | undefined | Option class |
label | string | undefined | Option label class |
input | string | undefined | Option input class |
content | string | undefined | Option content class |
error | string | undefined | Option error class |
FileStyles
An interface that defines the file styles.
Property | Type | Description |
---|---|---|
container | string | undefined | File container class |
item | string | undefined | File item class |
cover | string | undefined | File cover class |
remove | string | undefined | File remove class |
items | string | undefined | File items class |
retry | string | undefined | File retry class |
content | string | undefined | File content class |
label | string | undefined | File label class |
input | string | undefined | File input class |
error | string | undefined | File error class |
ErrorsStyles
An interface that defines the errors styles.
Property | Type | Description |
---|---|---|
container | string | undefined | Errors list class |
item | string | undefined | Errors item class |
Icons
An interface that defines the icons of the fields.
Property | Type | Description |
---|---|---|
checked | string | undefined | The icon of the checkbox. |
hide | string | undefined | The icon of the password when it is hidden. |
show | string | undefined | The icon of the password when it is shown. |
clear | string | undefined | The icon of the clear button. |
arrow | string | undefined | The icon of the arrow. |
remove | string | undefined | The icon of the remove button. |
retry | string | undefined | The icon of the retry button. |
Built-in components
All types and interfaces that you have to know to use the built-in components.
SelectOption
An interface that defines the select option.
Property | Type | Description |
---|---|---|
key | string | undefined | The key of the option. |
label | string | The label of the option. |
value | string | The value of the option. |
fixed | boolean | undefined | Whether the option is fixed or not. |
disabled | boolean | undefined | Whether the option is disabled or not. |
OptionItem
An interface that defines the option item.
Property | Type | Description |
---|---|---|
key | string | undefined | The key of the option. |
label | string | undefined | The label of the option. |
value | string | The value of the option. |
disabled | boolean | undefined | Whether the option is disabled or not. |