Multi Selector
Uso
El componente SMultiSelector renderiza un selector multiple desplegable. Usa v-model para enlazar los valores seleccionados como un arreglo. Pasa un arreglo de opciones a traves de la prop options. Los valores seleccionados se muestran como badges dentro del boton.
Busqueda
Habilita la prop search para permitir filtrar opciones por texto. Usa el evento query para manejar el filtrado externamente.
Limpiable
La prop clearable agrega un boton de limpieza que reinicia todos los valores seleccionados al hacer clic.
Removible
La prop removable agrega un boton de eliminar a cada badge, permitiendo deseleccionar elementos individuales directamente desde el area del boton.
Compacto
La prop compact reemplaza los badges con un texto resumen mostrando el numero de selecciones (ej. "3 selecciones").
Conteo
La prop count limita el numero de badges visibles. Cuando hay mas elementos seleccionados, se muestra un badge "+N". Por defecto es 3.
Lista de badges
La prop badgeList muestra una lista de badges removibles dentro del encabezado del desplegable, permitiendo a los usuarios ver y gestionar todas las selecciones dentro del area del dropdown.
Bordes redondeados
La prop rounded controla el radio de borde del boton del selector.
Deshabilitado
La prop disabled previene la interaccion del usuario con el selector.
Error
La prop error aplica estilos de error para indicar una falla de validacion.
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 visualizacion y optionValue para especificar la propiedad del valor usada para la comparacion.
Opciones agrupadas
Usa optionGroupLabel y optionGroupItems para renderizar opciones organizadas en grupos.
Opcion personalizada
Usa el slot option para personalizar como se renderiza cada opcion en el desplegable.
Props
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | (Record<string, any> | string)[] | - | Los valores seleccionados (usar con v-model) |
options | (Record<string, any> | string)[] | - | Arreglo de opciones disponibles |
placeholder | string | - | Texto de marcador cuando no hay opcion 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 | - | Habilita un input de busqueda en el desplegable |
clearable | boolean | - | Muestra un boton de limpieza cuando hay valores seleccionados |
removable | boolean | - | Agrega un boton de eliminar a cada badge |
compact | boolean | - | Muestra texto con el conteo de selecciones en lugar de badges |
count | number | 3 | Numero maximo de badges visibles antes de mostrar "+N" |
badgeList | boolean | - | Muestra una lista de badges dentro del encabezado del desplegable |
handler | boolean | - | Muestra un boton de agregar cuando search esta habilitado |
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 | Descripcion |
|---|---|---|
update:modelValue | (Record<string, any> | string)[] | undefined | Se emite cuando los valores seleccionados cambian |
query | string | Se emite cuando el valor del input de busqueda cambia |
add | Record<string, any> | Se emite cuando se agrega una nueva opcion a traves del handler |
Slots
| Nombre | Props | Descripcion |
|---|---|---|
option | { option } | Renderizado personalizado para cada opcion en el desplegable |