MultiSelect

<template lang="pug">
MultiSelect(
  :options="opciones"
  v-model="valoresSeleccionados"
  placeholder="Selecciona opciones"
  :animation="0.3"
  :maxCount="3"
  @select="manejarSeleccion"
)
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Define las opciones disponibles
const opciones = [
  { label: 'Opción 1', value: 'op1' },
  { label: 'Opción 2', value: 'op2' },
  { label: 'Opción 3', value: 'op3' },
  { label: 'Opción 4', value: 'op4' }
]

// Almacena los valores seleccionados
const valoresSeleccionados = ref([])

// Define la función que manejará el evento `select`
const manejarSeleccion = (valores) => {
  console.log('Valores seleccionados:', valores)
  // Aquí puedes realizar acciones adicionales con los valores seleccionados
}
</script>

<template lang="pug">
FormField(name="asignaturas", v-slot="{ componentField }")
  FormItem
    FormLabel Asignaturas
    FormControl
      MultiSelect(
        v-model="asignaturasSeleccionadas"
        placeholder="Elegir Asignatura(s)"
        :max-count="3"
        @select="(value) => { form.setFieldValue('asignaturas', value) }"
        :options="asignaturasOptions"
      )
    FormMessage
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Valores seleccionados
const asignaturasSeleccionadas = ref<string[]>([])

// Opciones computadas desde una lista de asignaturas
const asignaturasOptions = computed(() => {
  return listaAsignaturas.value?.map((a) => {
    return {
      label: a.alias || a.asignaturaSige?.nombre || a.asignaturaCurricular?.nombre || '',
      value: `${a.id}`
    }
  })
})

// Ejemplo de integración con un formulario (con zod o similar)
const form = useForm({
  validationSchema: formSchema,
  initialValues: {
    asignaturas: []
  }
})

// Actualizar valores cuando cambia el curso
watch(() => form.values.cursoId, async (newValue) => {
  if (newValue) {
    // Obtener asignaturas relacionadas con el curso seleccionado
    const response = await obtenerAsignaturasPorCurso(newValue)
    listaAsignaturas.value = response
    
    // Resetear selección
    form.setFieldValue('asignaturas', [])
    asignaturasSeleccionadas.value = []
  }
})
</script>