Key | Default Value | Expected types | Description |
---|---|---|---|
type | 'text' |
"text","password","textarea", "email","number","time","dateNative", "select","multiple","slider","date", "checkbox","html","editor","button" |
defines input type |
row | first availible index after all declared indexes |
Number |
you can place several fields in one row |
order | first availible index after all declared order indexes |
Number |
specify field order in the same row |
label | undefined |
String |
field label |
hint | undefined |
String |
field hint placed below field content |
disable | undefined |
Boolean |
disable field input |
value | '' or [] |
depends on input type | field value |
clearable | true |
Boolean |
adds clear input icon if the field is input |
"clear-icon" | 'close' |
any material ui icon name | Icon names |
required | false |
Boolean |
required inputs need to have value, so that Boolean(value) === true |
visible | true |
Boolean |
field visibility. Invisible fields don't validate but can hold values |
rules | [] |
array of functions | array of rules to validate input value rules are functions with arguments (value, formValues, globalConfig, metaValue) every function must return true to pass validation |
service | false |
Boolean |
if set to false field value won't appear in object of submited values |
group | undefined |
Number or String |
numerical index of the field-group, natural number |
groupLabel | undefined |
String |
label of the group, if one needed |
Name | With arguments | Description |
---|---|---|
onInput | onInput = async (globalConfig, component, value, ?multipleIndex) => {} |
Fires when field's value changes |
onFocus | onFocus = async (globalConfig, component, fieldSettings, ?multipleIndex) => {} |
Fires when field gets focus on it |
onBlur | onBlur = async (globalConfig, component, fieldSettings, ?multipleIndex) => {} |
Fires when field loses focus |
onKeyDown | onKeyDown = async (globalConfig, component, inputVal) => {} |
fires on every user keydown in field types 'creatable' and 'select' |
- globalConfig - reactive object that holds all the information about the form
- component - reference to Vue's field component
Key | Expected types | Description |
---|---|---|
type | "text","password","textarea", "email","number","time","dateNative" |
input field type |
value | `String | |
fieldAttachments | undefined |
Object |
mask | String |
Mask usage example |
prefix | String |
Static string before user input |
suffix | String |
Static string after user input |
See more: https://quasar.dev/vue-components/input#qinput-api
Key | Default value | Expected types | Description |
---|---|---|---|
type | "select" |
"select" |
- |
options | [] |
Array |
Select options. Array elements allowed to have 1 of 3 types { name: String, id: String } { label: String, value: String } String |
multiple | false |
Boolean |
Allows to pick several options |
value | '' or [] |
String or Array |
Array is for multiple select |
fieldAttachments | undefined |
Object |
Describe field attachments |
writable | true |
Boolean |
Allows to filter options by user input |
Key | Default value | Expected types | Description |
---|---|---|---|
type | "multiple" |
"multiple" |
- |
value | [] |
[Object] |
Array of objects with fieldKey: fieldValue pairs { firstName: 'Peter', lastName: 'Griffin' } |
settings | {} |
fieldKey: fieldConfig{} | Field configs that will be used. Keys correspond to value keys |
rules | [] |
Array of functions with following args (multipleLength, formValues, globalConfig, metaValue) => true |
validation rules |
Key | Default value | Expected types | Description |
---|---|---|---|
type | "date" |
"date" |
- |
withInput | true |
Boolean |
Adds text input with date mask |
range | false |
Boolean |
Allows to pick a period between two dates |
value | String or { from: String, to: String } |
DD.MM.YYYY or { from: 'DD.MM.YYYY' , to: 'DD.MM.YYYY' } |
Date value |
fieldAttachments | undefined |
Object |
Describe field attachments |
More properties here: https://quasar.dev/vue-components/date#qdate-api
Key | Default value | Expected types | Description |
---|---|---|---|
type | "checkbox" |
"checkbox" |
- |
value | false |
Boolean |
define if checkbox checked |
fieldAttachments | undefined |
Object |
Describe field attachments |
Key | Default value | Expected types | Description |
---|---|---|---|
type | "html" |
"html" |
- |
value | '' |
String that can contain html |
Example: HTML <em>tags</em> |
service | true |
Boolean |
html has no need to be submited |
Key | Default value | Expected types | Description |
---|---|---|---|
type | "slider" |
"slider" |
- |
value | 0 |
Number |
- |
fieldAttachments | undefined |
Object |
Describe field attachments |
min | 0 |
Number |
lowest allowed slider value |
max | 100 |
Number |
highest allowed slider value |
step | 0.01 |
Number |
slider step |
showValue | true |
Boolean |
if false , there will be no icon of current value on top of slider |
More properties here: https://quasar.dev/vue-components/slider#qslider-api
Rrich text editor with simple Html markup tools
Key | Default value | Expected types | Description |
---|---|---|---|
type | "editor" |
"editor" |
- |
value | '' |
String that can contain html |
Example: HTML <em>tags</em> |
Unlike field.type: 'html' text editor has user input
Button should be used for custom reactivity binded to user actions
Key | Default value | Expected types | Description |
---|---|---|---|
type | "button" |
"button" |
- |
value | '' |
String |
button text |
color | 'primary' |
String |
button color, examples |
size | 'md' |
'xs', 'sm', 'md', 'lg', 'xl' |
button size |
onClick | onClick = async (globalConfig, component, fieldConfig) => {} |
Function |
Semantic name for only event that button can have. You can also use onInput, onFocus or onBlur handlers, that will also fire |
Key | Default value | Expected types | Description |
---|---|---|---|
type | "file" |
"file" |
- |
value | null |
File , FileList , Array , null |
Filelist and Array expected if field.multiple === true |
fieldAttachments | undefined |
Object |
Describe field attachments. fieldAttachments.innerLeft will replace upload icon |
multiple | false |
Boolean |
Allows to pick several files |
accept | '*' |
String |
Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element |
max-files | 1 | Number or String |
Maximum number of files to contain |
max-file-size | undefined |
Number or String |
Maximum size of individual file in bytes |
rawData | true |
Boolean |
recieve file input arguments as ArrayBuffer if true . Receive as File if false |
More properties here: https://quasar.dev/vue-components/file-picker#qfile-api
An input where users can create multiple options manually
Key | Default value | Expected types | Description |
---|---|---|---|
type | "creatable" |
"creatable" |
- |
value | [] |
Array of unique String s |
for example: ['a', 'b', 'abc'] |
createOptionMsg | Введите значение и нажмите 'enter' |
String |
message to client |
onKeyDown | undefined |
function onKeyDown(fbGlobal, vueComponent, value) |
fires on every user keydown |
You can attach different icons and buttons to various inputs. You can also add functionality to them. Field attachment is an Object
inside field config
field: {
outerLeft: {
// here you can describe where to put an attachment
}
}
There are 4 keys availible to describe attachment position: 'outerLeft', 'innerLeft', 'innerRight', 'outerRight' Inside those keys you can describe attachment itself. There're 4 types availible:
- Icon. Expects a material-icon name, see names
outerLeft: {
type: 'icon',
name: 'settings' // name of the icon
},
- Image. Expects image url
innerLeft: {
type: 'img',
src: 'url://some url'
},
- Button. Allows you to run action on user click
innerRight: {
type: 'button',
icon: 'warning',
onClick: (fb, component, field) => {
field.value = 'New value'
}
},
- Html. Expects html injection
innerLeft: {
type: 'html',
value: '<div class="yourCustomClass"></div>'
},
global fields keys should be assigned to
config.global.fields
instance
Global field keys are assigned to each field inside form if they're not specified in field config
Key | Expected types | Description |
---|---|---|
submitInvisible | Boolean |
allows you to submit invisible fields. Affects field.service option |
Custom buttons overrides standart submit buttons, therefore methods described in 'methods' global keys won't work
usage example
const formConfig = {
fields: {
simple: {
required: true
}
},
customButtons: {
custom1: {
label: 'Im custom button',
color: 'orange',
async onClick(globalConfig, formData, buttonSetting, formRef) {
console.log('%c⧭', 'color: #364cd9', formData);
// Validate form
await formRef.validate()
buttonSetting.label = 'reactive self change'
}
},
custom2: {
label: 'Custom btn #2',
color: 'green'
},
},
}
You can use more button settings