Combobox
Uso
El componente SCombobox renderiza un selector desplegable accesible. Usa hijos SComboboxOption para definir las opciones disponibles y displayButtonText para controlar el texto mostrado.
Busqueda
Establece search en 'auto' para habilitar un input de busqueda integrado que filtra las opciones automaticamente. La funcion displayButtonText es requerida cuando la busqueda esta habilitada.
Grupos de Opciones
Usa SComboboxOptionGroup para organizar las opciones en grupos con etiquetas.
Error
Establece error en true para mostrar el combobox con estilo de error.
Deshabilitado
Establece disabled en true para evitar la interaccion del usuario.
Block
El componente SComboboxBlock envuelve a SCombobox con una etiqueta, texto de ayuda y texto de error. Combina todas las props del componente base con label, helpText y errorText. Cuando se proporciona errorText, el estado de error se aplica automaticamente.
Props
SCombobox
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | string | number | object | - | El valor seleccionado (v-model) |
search | true | 'auto' | - | Habilita el input de busqueda ('auto' filtra opciones localmente) |
displayButtonText | (option: unknown) => string | - | Funcion para mostrar el texto del valor seleccionado |
rounded | 'both' | 'left' | 'right' | 'none' | 'full' | 'both' | Estilo de radio de borde |
error | boolean | false | Muestra estilos de error |
disabled | boolean | false | Deshabilita el combobox |
flipOptions | boolean | false | Alinea el desplegable a la derecha |
queryDebounce | number | 500 | Tiempo de debounce en ms para consultas de busqueda |
id | string | - | Atributo HTML id |
class | string | - | Clases CSS adicionales |
SComboboxOption
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
value | string | number | object | - | El valor de la opcion |
disabled | boolean | false | Deshabilita la opcion |
class | string | - | Clases CSS adicionales |
SComboboxOptionGroup
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
label | string | - | El texto de la etiqueta del grupo |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | number | object | Se emite cuando el valor seleccionado cambia |
query | string | Se emite cuando la consulta de busqueda cambia |
Slots
SCombobox
| Nombre | Descripcion |
|---|---|
default | Componentes SComboboxOption o SComboboxOptionGroup |
button | Contenido personalizado para la visualizacion del boton |
SComboboxOption
| Nombre | Descripcion |
|---|---|
default | El contenido de texto de la opcion |
SComboboxOptionGroup
| Nombre | Descripcion |
|---|---|
default | Componentes SComboboxOption dentro de este grupo |