427 lines
No EOL
12 KiB
JSON
427 lines
No EOL
12 KiB
JSON
{
|
|
"type": "component",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/field"
|
|
},
|
|
"props": {
|
|
"model-value": {
|
|
"type": "Any",
|
|
"desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
|
|
"category": "model"
|
|
},
|
|
"error": {
|
|
"type": "Boolean",
|
|
"desc": "Does field have validation errors?",
|
|
"category": "behavior"
|
|
},
|
|
"error-message": {
|
|
"type": "String",
|
|
"desc": "Validation error message (gets displayed only if 'error' is set to 'true')",
|
|
"examples": [
|
|
"Username must have at least 5 characters"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"no-error-icon": {
|
|
"type": "Boolean",
|
|
"desc": "Hide error icon when there is an error",
|
|
"category": "content"
|
|
},
|
|
"rules": {
|
|
"type": "Array",
|
|
"tsType": "ValidationRule",
|
|
"desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
|
|
"examples": [
|
|
":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",
|
|
":rules=\"[ 'fulltime' ]\"",
|
|
":rules=\"[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"reactive-rules": {
|
|
"type": "Boolean",
|
|
"desc": "By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it",
|
|
"category": "behavior"
|
|
},
|
|
"lazy-rules": {
|
|
"type": [
|
|
"Boolean",
|
|
"String"
|
|
],
|
|
"desc": "If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself",
|
|
"values": [
|
|
"(Boolean) true",
|
|
"(Boolean) false",
|
|
"ondemand"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"label": {
|
|
"type": "String",
|
|
"desc": "A text label that will “float” up above the input field, once the field gets focus",
|
|
"examples": [
|
|
"Username"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"stack-label": {
|
|
"type": "Boolean",
|
|
"desc": "Label will be always shown above the field regardless of field content (if any)",
|
|
"category": "content"
|
|
},
|
|
"hint": {
|
|
"type": "String",
|
|
"desc": "Helper (hint) text which gets placed below your wrapped form component",
|
|
"examples": [
|
|
"Fill in between 3 and 12 characters"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"hide-hint": {
|
|
"type": "Boolean",
|
|
"desc": "Hide the helper (hint) text when field doesn't have focus",
|
|
"category": "content"
|
|
},
|
|
"prefix": {
|
|
"type": "String",
|
|
"desc": "Prefix",
|
|
"examples": [
|
|
"$"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"suffix": {
|
|
"type": "String",
|
|
"desc": "Suffix",
|
|
"examples": [
|
|
"@gmail.com"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"label-color": {
|
|
"type": "String",
|
|
"tsType": "NamedColor",
|
|
"desc": "Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused",
|
|
"examples": [
|
|
"primary",
|
|
"teal",
|
|
"teal-10"
|
|
],
|
|
"category": "style"
|
|
},
|
|
"color": {
|
|
"type": "String",
|
|
"tsType": "NamedColor",
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
|
"examples": [
|
|
"primary",
|
|
"teal",
|
|
"teal-10"
|
|
],
|
|
"category": "style"
|
|
},
|
|
"bg-color": {
|
|
"type": "String",
|
|
"tsType": "NamedColor",
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
|
"examples": [
|
|
"primary",
|
|
"teal",
|
|
"teal-10"
|
|
],
|
|
"category": "style"
|
|
},
|
|
"dark": {
|
|
"type": "Boolean",
|
|
"desc": "Notify the component that the background is a dark color",
|
|
"category": "style"
|
|
},
|
|
"loading": {
|
|
"type": "Boolean",
|
|
"desc": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.",
|
|
"category": "behavior|content"
|
|
},
|
|
"clearable": {
|
|
"type": "Boolean",
|
|
"desc": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null",
|
|
"category": "behavior|content"
|
|
},
|
|
"clear-icon": {
|
|
"type": "String",
|
|
"desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
|
|
"examples": [
|
|
"close"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"filled": {
|
|
"type": "Boolean",
|
|
"desc": "Use 'filled' design for the field",
|
|
"category": "style"
|
|
},
|
|
"outlined": {
|
|
"type": "Boolean",
|
|
"desc": "Use 'outlined' design for the field",
|
|
"category": "style"
|
|
},
|
|
"borderless": {
|
|
"type": "Boolean",
|
|
"desc": "Use 'borderless' design for the field",
|
|
"category": "style"
|
|
},
|
|
"standout": {
|
|
"type": [
|
|
"Boolean",
|
|
"String"
|
|
],
|
|
"desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
|
|
"examples": [
|
|
"standout",
|
|
"standout=\"bg-primary text-white\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"label-slot": {
|
|
"type": "Boolean",
|
|
"desc": "Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set",
|
|
"category": "content"
|
|
},
|
|
"bottom-slots": {
|
|
"type": "Boolean",
|
|
"desc": "Enables bottom slots ('error', 'hint', 'counter')",
|
|
"category": "content"
|
|
},
|
|
"hide-bottom-space": {
|
|
"type": "Boolean",
|
|
"desc": "Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content",
|
|
"category": "style"
|
|
},
|
|
"counter": {
|
|
"type": "Boolean",
|
|
"desc": "Show an automatic counter on bottom right",
|
|
"category": "content"
|
|
},
|
|
"rounded": {
|
|
"type": "Boolean",
|
|
"desc": "Applies a small standard border-radius for a squared shape of the component",
|
|
"category": "style"
|
|
},
|
|
"square": {
|
|
"type": "Boolean",
|
|
"desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop",
|
|
"category": "style"
|
|
},
|
|
"dense": {
|
|
"type": "Boolean",
|
|
"desc": "Dense mode; occupies less space",
|
|
"category": "style"
|
|
},
|
|
"item-aligned": {
|
|
"type": "Boolean",
|
|
"desc": "Match inner content alignment to that of QItem",
|
|
"category": "style"
|
|
},
|
|
"disable": {
|
|
"type": "Boolean",
|
|
"desc": "Put component in disabled mode",
|
|
"category": "state"
|
|
},
|
|
"readonly": {
|
|
"type": "Boolean",
|
|
"desc": "Put component in readonly mode",
|
|
"category": "state"
|
|
},
|
|
"autofocus": {
|
|
"type": "Boolean",
|
|
"desc": "Focus field on initial component render",
|
|
"category": "behavior"
|
|
},
|
|
"for": {
|
|
"type": "String",
|
|
"desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
|
|
"examples": [
|
|
"myFieldsId"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"name": {
|
|
"type": "String",
|
|
"desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists",
|
|
"examples": [
|
|
"car_id"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"maxlength": {
|
|
"type": [
|
|
"String",
|
|
"Number"
|
|
],
|
|
"desc": "Specify a max length of model",
|
|
"category": "model"
|
|
}
|
|
},
|
|
"slots": {
|
|
"default": {
|
|
"desc": "Field main content"
|
|
},
|
|
"prepend": {
|
|
"desc": "Prepend inner field; Suggestions: QIcon, QBtn"
|
|
},
|
|
"append": {
|
|
"desc": "Append to inner field; Suggestions: QIcon, QBtn"
|
|
},
|
|
"before": {
|
|
"desc": "Prepend outer field; Suggestions: QIcon, QBtn"
|
|
},
|
|
"after": {
|
|
"desc": "Append outer field; Suggestions: QIcon, QBtn"
|
|
},
|
|
"label": {
|
|
"desc": "Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored"
|
|
},
|
|
"error": {
|
|
"desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
|
|
},
|
|
"hint": {
|
|
"desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
|
|
},
|
|
"counter": {
|
|
"desc": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
|
|
},
|
|
"loading": {
|
|
"desc": "Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop"
|
|
},
|
|
"control": {
|
|
"desc": "Slot for controls; Suggestion QSlider, QRange, QKnob, ...",
|
|
"scope": {
|
|
"id": {
|
|
"type": "String",
|
|
"desc": "Element id used in the `for` attribute of the field label. Can be used to link the control to the label",
|
|
"examples": [
|
|
"qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa"
|
|
]
|
|
},
|
|
"field": {
|
|
"type": "Element",
|
|
"desc": "DOM element of the field"
|
|
},
|
|
"editable": {
|
|
"type": "Boolean",
|
|
"desc": "Field is editable"
|
|
},
|
|
"focused": {
|
|
"type": "Boolean",
|
|
"desc": "Field has focus"
|
|
},
|
|
"floatingLabel": {
|
|
"type": "Boolean",
|
|
"desc": "Field's label is floating"
|
|
},
|
|
"modelValue": {
|
|
"type": "Any",
|
|
"desc": "Field's value",
|
|
"examples": [
|
|
0.241,
|
|
"Text"
|
|
]
|
|
},
|
|
"emitValue": {
|
|
"type": "Function",
|
|
"desc": "Function that emits an @input event in the context of the field",
|
|
"params": {
|
|
"value": {
|
|
"type": "Any",
|
|
"required": true,
|
|
"desc": "Value to be emitted",
|
|
"examples": [
|
|
0,
|
|
"Changed text"
|
|
]
|
|
}
|
|
},
|
|
"returns": null
|
|
}
|
|
}
|
|
},
|
|
"rawControl": {
|
|
"internal": true
|
|
}
|
|
},
|
|
"events": {
|
|
"clear": {
|
|
"desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
|
|
"params": {
|
|
"value": {
|
|
"type": "Any",
|
|
"desc": "The previous value before clearing it"
|
|
}
|
|
}
|
|
},
|
|
"update:model-value": {
|
|
"desc": "Emitted when the model changes, only when used with 'clearable' or the 'control' scoped slot.",
|
|
"params": {
|
|
"value": {
|
|
"type": "Any",
|
|
"desc": "New model value",
|
|
"required": true
|
|
}
|
|
}
|
|
},
|
|
"focus": {
|
|
"desc": "Emitted when component gets focused",
|
|
"params": {
|
|
"evt": {
|
|
"type": "Event",
|
|
"desc": "JS event object"
|
|
}
|
|
}
|
|
},
|
|
"blur": {
|
|
"desc": "Emitted when component loses focus",
|
|
"params": {
|
|
"evt": {
|
|
"type": "Event",
|
|
"desc": "JS event object"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"methods": {
|
|
"resetValidation": {
|
|
"desc": "Reset validation status"
|
|
},
|
|
"validate": {
|
|
"desc": "Trigger a validation",
|
|
"params": {
|
|
"value": {
|
|
"type": "Any",
|
|
"desc": "Optional value to validate against"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": [
|
|
"Boolean",
|
|
"Promise<boolean>"
|
|
],
|
|
"desc": "True/false if no async rules, otherwise a Promise with the outcome (true -> validation was a success, false -> invalid models detected)",
|
|
"examples": [
|
|
"true",
|
|
"validate().then(outcome => { ... })"
|
|
]
|
|
}
|
|
},
|
|
"focus": {
|
|
"desc": "Focus field"
|
|
},
|
|
"blur": {
|
|
"desc": "Blur field (lose focus)"
|
|
}
|
|
},
|
|
"computedProps": {
|
|
"hasError": {
|
|
"type": "Boolean",
|
|
"desc": "Whether the component is in error state"
|
|
}
|
|
}
|
|
} |