510 lines
No EOL
14 KiB
JSON
510 lines
No EOL
14 KiB
JSON
{
|
|
"type": "component",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/input"
|
|
},
|
|
"props": {
|
|
"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",
|
|
"car_id"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"mask": {
|
|
"type": "String",
|
|
"desc": "Custom mask or one of the predefined mask names",
|
|
"examples": [
|
|
"###-##",
|
|
"date",
|
|
"datetime",
|
|
"time",
|
|
"fulltime",
|
|
"phone",
|
|
"card"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"fill-mask": {
|
|
"type": [
|
|
"Boolean",
|
|
"String"
|
|
],
|
|
"desc": "Fills string with specified characters (or underscore if value is not string) to fill mask's length",
|
|
"examples": [
|
|
"true",
|
|
"'0'",
|
|
"'_'"
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"reverse-fill-mask": {
|
|
"type": "Boolean",
|
|
"desc": "Fills string from the right side of the mask",
|
|
"category": "behavior"
|
|
},
|
|
"unmasked-value": {
|
|
"type": "Boolean",
|
|
"desc": "Model will be unmasked (won't contain tokens/separation characters)",
|
|
"category": "behavior"
|
|
},
|
|
"model-value": {
|
|
"desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
|
|
"required": true,
|
|
"syncable": true,
|
|
"category": "model",
|
|
"type": [
|
|
"String",
|
|
"Number",
|
|
"null",
|
|
"undefined"
|
|
],
|
|
"examples": [
|
|
"v-model=\"myText\""
|
|
]
|
|
},
|
|
"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"
|
|
},
|
|
"shadow-text": {
|
|
"type": "String",
|
|
"desc": "Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file",
|
|
"examples": [
|
|
"rest of the fill value"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"type": {
|
|
"type": "String",
|
|
"desc": "Input type",
|
|
"default": "text",
|
|
"values": [
|
|
"text",
|
|
"password",
|
|
"textarea",
|
|
"email",
|
|
"search",
|
|
"tel",
|
|
"file",
|
|
"number",
|
|
"url",
|
|
"time",
|
|
"date"
|
|
],
|
|
"category": "general",
|
|
"required": false
|
|
},
|
|
"debounce": {
|
|
"type": [
|
|
"String",
|
|
"Number"
|
|
],
|
|
"desc": "Debounce amount (in milliseconds) when updating model",
|
|
"category": "model"
|
|
},
|
|
"maxlength": {
|
|
"type": [
|
|
"String",
|
|
"Number"
|
|
],
|
|
"desc": "Specify a max length of model",
|
|
"category": "model"
|
|
},
|
|
"autogrow": {
|
|
"type": "Boolean",
|
|
"desc": "Make field autogrow along with its content (uses a textarea)",
|
|
"category": "content"
|
|
},
|
|
"input-class": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "Class definitions to be attributed to the underlying input tag",
|
|
"examples": [
|
|
"my-special-class",
|
|
":input-class=\"{ 'my-special-class': <condition> }\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"input-style": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueStyleProp",
|
|
"desc": "Style definitions to be attributed to the underlying input tag",
|
|
"examples": [
|
|
"background-color: #ff0000",
|
|
":input-style=\"{ backgroundColor: '#ff0000' }\""
|
|
],
|
|
"category": "style"
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
},
|
|
"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 component needs to change the model; Is also used by v-model",
|
|
"params": {
|
|
"value": {
|
|
"type": [
|
|
"String",
|
|
"Number",
|
|
"null"
|
|
],
|
|
"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 underlying input tag"
|
|
},
|
|
"blur": {
|
|
"desc": "Lose focus on underlying input tag"
|
|
},
|
|
"select": {
|
|
"desc": "Select input text"
|
|
},
|
|
"getNativeElement": {
|
|
"desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
|
|
"returns": {
|
|
"type": "Element",
|
|
"tsType": "QInputNativeElement",
|
|
"desc": "The underlying native input/textarea DOM Element"
|
|
}
|
|
}
|
|
},
|
|
"computedProps": {
|
|
"hasError": {
|
|
"type": "Boolean",
|
|
"desc": "Whether the component is in error state"
|
|
},
|
|
"nativeEl": {
|
|
"type": "Element",
|
|
"tsType": "QInputNativeElement",
|
|
"desc": "The native input/textarea DOM Element",
|
|
"addedIn": "v2.10.1"
|
|
}
|
|
}
|
|
} |