Selector
Uso
El componente SSelector renderiza un selector desplegable. Usa v-model para enlazar el valor seleccionado. Pasa un arreglo de opciones a través de la prop options.
También disponible como SSelectorBlock con soporte para label, texto de ayuda y texto de error.
Búsqueda
Habilita la prop search para permitir filtrar opciones por texto. El componente realiza filtrado local automático por defecto. Establece search="manual" para manejar el filtrado externamente a través del evento query.
Limpiable
La prop clearable agrega un botón de limpieza que reinicia el valor seleccionado al hacer clic.
Bordes redondeados
La prop rounded controla el radio de borde del botón del selector.
Deshabilitado
La prop disabled previene la interacción del usuario con el selector.
Error
La prop error aplica estilos de error para indicar una falla de validación.
Cargando
La prop loading muestra un indicador de carga dentro del selector.
Opciones de objetos
Cuando las opciones son objetos, usa optionLabel para especificar la propiedad de visualización y optionValue para especificar la propiedad del valor usada para la comparación.
Opciones agrupadas
Usa optionGroupLabel y optionGroupItems para renderizar opciones organizadas en grupos.
Opción personalizada
Usa el slot option para personalizar cómo se renderiza cada opción en el desplegable.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
modelValue | Record<string, any> | string | - | El valor seleccionado (usar con v-model) |
options | (Record<string, any> | string)[] | - | Arreglo de opciones disponibles |
placeholder | string | - | Texto de marcador cuando no hay opción seleccionada |
optionLabel | string | 'label' | Nombre de la propiedad a mostrar para opciones de objetos |
optionValue | string | - | Nombre de la propiedad usada como valor para opciones de objetos |
optionGroupLabel | string | - | Nombre de la propiedad para etiquetas de grupo |
optionGroupItems | string | - | Nombre de la propiedad para el arreglo de elementos del grupo |
search | boolean | 'manual' | - | Habilita la búsqueda. true para filtrado local, 'manual' para filtrado externo vía evento query |
clearable | boolean | - | Muestra un botón de limpieza cuando hay un valor seleccionado |
rounded | 'both' | 'left' | 'right' | 'none' | 'full' | 'both' | Estilo de radio de borde |
disabled | boolean | - | Deshabilita el selector |
error | boolean | - | Aplica estilos de error |
loading | boolean | - | Muestra un indicador de carga |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:modelValue | Record<string, any> | string | undefined | Se emite cuando el valor seleccionado cambia |
query | string | Se emite cuando el valor del input de búsqueda cambia |
Slots
| Nombre | Props | Descripción |
|---|---|---|
option | { option } | Renderizado personalizado para cada opción en el desplegable |