Actualizados todos los componentes a Vue3

src/components/Inicio/curso/bloque.vue

@@ -23,7 +23,30 @@ td
         obtenerClaseCursoGeneral
     } from "../tablaHorarios/funcionesResaltado.coffee"
 
-    export default
+    setup = (props) =>
+
+        obtenerClase = (grupo) =>
+            claseEspecifica = obtenerClaseGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
+            claseGeneral = obtenerClaseCursoGeneral claseEspecifica
+
+            [claseEspecifica, claseGeneral]
+
+        resaltarCeldasGrupo = (grupo) =>
+            resaltarGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
+
+        quitarResaltadoGrupo = (grupo) =>
+            removerResaltadoGrupo props.nombreAño, props.abreviado, grupo, props.esLab
+        toggleActivo = (grupo) =>
+            activarGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
+
+        {
+            obtenerClase
+            resaltarCeldasGrupo
+            quitarResaltadoGrupo
+            toggleActivo
+        }
+
+    export default {
         name: "bloque"
         props:
             grupos:
@@ -41,20 +64,8 @@ td
             abreviado:
                 type: String
                 required: true
-        methods:
+        setup
-            obtenerClase: (grupo) ->
+    }
-                claseEspecifica = obtenerClaseGrupoCurso @nombreAño, @abreviado, grupo, @esLab
-                claseGeneral = obtenerClaseCursoGeneral claseEspecifica
-
-                [claseEspecifica, claseGeneral]
-
-            resaltarCeldasGrupo: (grupo) ->
-                resaltarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
-
-            quitarResaltadoGrupo: (grupo) ->
-                removerResaltadoGrupo @nombreAño, @abreviado, grupo, @esLab
-            toggleActivo: (grupo) ->
-                activarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
 
 #
 </script>

src/components/Inicio/tabla-horarios.vue

@@ -20,47 +20,57 @@ table.tabla_horario(border="1")
 </template>
 
 <script lang="coffee">
+    import {ref, computed} from "vue"
     import celda from "./tablaHorarios/celda.vue"
 
-    export default
+    setup = (props) =>
+        dias = ref ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
+        horas = ref [
+            "07:00 - 07:50"
+            "07:50 - 08:40"
+            "08:40 - 08:50"
+            "08:50 - 09:40"
+            "09:40 - 10:30"
+            "10:30 - 10:40"
+            "10:40 - 11:30"
+            "11:30 - 12:20"
+            "12:20 - 13:10"
+            "13:10 - 14:00"
+            "14:00 - 14:50"
+            "14:50 - 15:40"
+            "15:40 - 15:50"
+            "15:50 - 16:40"
+            "16:40 - 17:30"
+            "17:30 - 17:40"
+            "17:40 - 18:30"
+            "18:30 - 19:20"
+            "19:20 - 20:10"
+        ]
+        horasDescanso = ref [
+            "08:40 - 08:50"
+            "10:30 - 10:40"
+            "15:40 - 15:50"
+            "17:30 - 17:40"
+        ]
+
+        nombreStore = computed (=> "_" + props.nombreAño.substring 0, (props.nombreAño.indexOf " "))
+
+        {
+            dias
+            horas
+            horasDescanso
+            nombreStore
+        }
+
+    export default {
         name: "tabla-horarios"
-        components: { celda }
+        components: {celda}
-        data: ->
-            dias: ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
-            horas: [
-                "07:00 - 07:50"
-                "07:50 - 08:40"
-                "08:40 - 08:50"
-                "08:50 - 09:40"
-                "09:40 - 10:30"
-                "10:30 - 10:40"
-                "10:40 - 11:30"
-                "11:30 - 12:20"
-                "12:20 - 13:10"
-                "13:10 - 14:00"
-                "14:00 - 14:50"
-                "14:50 - 15:40"
-                "15:40 - 15:50"
-                "15:50 - 16:40"
-                "16:40 - 17:30"
-                "17:30 - 17:40"
-                "17:40 - 18:30"
-                "18:30 - 19:20"
-                "19:20 - 20:10"
-            ]
-            horasDescanso: [
-                "08:40 - 08:50"
-                "10:30 - 10:40"
-                "15:40 - 15:50"
-                "17:30 - 17:40"
-            ]
         props:
             nombreAño:
                 type: String
                 required: true
-        computed:
+        setup
-            nombreStore: -> "_" + (@nombreAño.substring 0, @nombreAño.indexOf " ")
+    }
-
 
 #
 </script>

src/components/Inicio/tablaHorarios/celda-curso.vue

@@ -1,15 +1,16 @@
 <template lang="pug">
-span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
+span.celda(:class="clases" :eslab="esLab? 'true': 'false'"
     @mouseenter="resaltarCeldasGrupo"
     @mouseleave="quitarResaltadoGrupo"
     @click="toggleActivo")
-    | &nbsp;{{ datos.cursoAbreviado }}
+    | &nbsp;{{ cursoAbreviado }}
-    span &nbsp;{{ (datos.esLab? "L": "") + datos.nombreGrupo }}&nbsp;
+    span &nbsp;{{ (esLab? "L": "") + nombreGrupo }}&nbsp;
 
 //
 </template>
 
 <script lang="coffee">
+    import {ref, computed} from "vue"
     import {
         resaltarGrupoCurso
         removerResaltadoGrupo
@@ -17,47 +18,63 @@ span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
         obtenerClaseGrupoCurso
     } from "./funcionesResaltado.coffee"
 
-    export default
+    setup = (props) =>
+        celdaCursoActiva = ref false
+
+        clases = computed (=>
+            res = []
+            esLab = props.datos.esLab
+            cursoAbreviado = props.datos.cursoAbreviado
+            nombreGrupo = props.datos.nombreGrupo
+            nombreAño = props.nombreAño.substring 0, (props.nombreAño.indexOf " ")
+
+            res.push if esLab then "celda__lab" else "celda__teoria"
+
+            # _PW1
+            res.push "_#{ nombreAño }_#{ cursoAbreviado }"
+
+            # _PW1_LB
+            res.push "_#{ nombreAño }_#{ cursoAbreviado }_#{ if esLab then 'L' else '' }#{ nombreGrupo }"
+
+            res
+        )
+        cursoAbreviado = computed (=> props.datos.cursoAbreviado)
+        nombreGrupo = computed (=> props.datos.nombreGrupo)
+        esLab = computed (=> props.datos.esLab)
+        claseCursoGeneral = computed (=>
+            obtenerClaseGrupoCurso props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
+        )
+
+        resaltarCeldasGrupo = =>
+            resaltarGrupoCurso props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
+        quitarResaltadoGrupo = =>
+            removerResaltadoGrupo props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
+        toggleActivo = =>
+            activarGrupoCursoStr claseCursoGeneral.value
+
+        {
+            celdaCursoActiva
+            clases
+            cursoAbreviado
+            nombreGrupo
+            esLab
+            claseCursoGeneral
+            resaltarCeldasGrupo
+            quitarResaltadoGrupo
+            toggleActivo
+        }
+
+    export default {
         name: "celda-curso"
         props:
             datos:
                 type: Object
-                required: yes
+                required: true
             nombreAño:
                 type: String
-                required: yes
+                required: true
-        data: ->
+        setup
-            celdaCursoActiva: no
+    }
-        computed:
-            clases: ->
-                res = []
-                esLab = @datos.esLab
-                cursoAbreviado = @datos.cursoAbreviado
-                nombreGrupo = @datos.nombreGrupo
-                nombreAño = @nombreAño.substring 0, (@nombreAño.indexOf " ")
-
-                res.push if esLab then "celda__lab" else "celda__teoria"
-
-                # _PW1
-                res.push "_#{ nombreAño }_#{ cursoAbreviado }"
-
-                # _PW1_LB
-                res.push "_#{ nombreAño }_#{ cursoAbreviado }_#{ if esLab then 'L' else '' }#{ nombreGrupo }"
-
-                res
-            cursoAbreviado: -> @datos.cursoAbreviado
-            nombreGrupo: -> @datos.nombreGrupo
-            esLab: -> @datos.esLab
-            claseCursoGeneral: ->
-                obtenerClaseGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
-        methods:
-            resaltarCeldasGrupo: ->
-                resaltarGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
-            quitarResaltadoGrupo: ->
-                removerResaltadoGrupo @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
-            toggleActivo: ->
-                activarGrupoCursoStr @claseCursoGeneral
-
 
 #
 </script>

src/components/Inicio/tablaHorarios/celda.vue

@@ -6,64 +6,78 @@ td(:class="clases")
 </template>
 
 <script lang="coffee">
+    import {ref, computed, onMounted} from "vue"
+    import {useStore} from "vuex"
     import celdaCurso from "./celda-curso.vue"
 
-    export default
+    setup = (props) =>
-        name: "celda",
+        store = useStore()
-        components: { celdaCurso }
-        props:
-            dia:
-                type: String
-                required: yes
-            hora:
-                type: String
-                required: yes
-            nombreAño:
-                type: String
-                required: yes
-            nombreStore:
-                type: String
-                required: yes
-        data: ->
-            datosCeldas: []
-        computed:
-            identificadoresCelda: ->
-                clases = []
-                parteDia = @dia.substring 0, 2
-                clases.push ("_" + parteDia)
 
-                parteHora = (@hora.substring 0, 2) + (@hora.substring 3, 5)
+        datosCeldas = ref []
-                clases.push ("_" + parteHora)
 
-                clases.push ("_" + parteDia + parteHora)
+        identificadoresCelda = computed (=>
+            clases = []
+            parteDia = props.dia.substring 0, 2
+            clases.push ("_" + parteDia)
 
-                nombreAño = @nombreAño
+            parteHora = (props.hora.substring 0, 2) + (props.hora.substring 3, 5)
-                claseAño = nombreAño.substring 0, (nombreAño.indexOf " ")
+            clases.push ("_" + parteHora)
-                clases.push ("_" + claseAño)
 
-                id = "_" + claseAño + parteDia + parteHora
+            clases.push ("_" + parteDia + parteHora)
-                clases.push id
 
-                [id, clases]
+            nombreAño = props.nombreAño
-            idCelda: -> @identificadoresCelda[0]
+            claseAño = nombreAño.substring 0, (nombreAño.indexOf " ")
-            clases: ->  @identificadoresCelda[1]
+            clases.push ("_" + claseAño)
-        methods:
-            registrarCelda: -> @$store.commit "registrarCelda", @idCelda
-            recuperarDatosCeldas: -> @datosCeldas = @$store.state.celdas[@idCelda]
 
-        mounted: ->
+            id = "_" + claseAño + parteDia + parteHora
-            vm = this
+            clases.push id
-            idCelda = @identificadoresCelda[0]
+
+            [id, clases]
+        )
+        idCelda = computed (=> identificadoresCelda.value[0])
+        clases = computed (=> identificadoresCelda.value[1])
+
+        registrarCelda = => store.commit "registrarCelda", idCelda.value
+        recuperarDatosCeldas = => datosCeldas.value = store.state.celdas[idCelda.value]
+
+        onMounted (=>
             promesa = new Promise (resolve) =>
                 intervalo = setInterval (=>
-                    unless vm.$store.state.celdas[idCelda] is undefined
+                    unless store.state.celdas[idCelda.value] is undefined
                         clearInterval intervalo
                         resolve()
                 ), 250
 
-            @registrarCelda()
+            registrarCelda()
             await promesa
-            @recuperarDatosCeldas()
+            recuperarDatosCeldas()
+        )
+
+        {
+            datosCeldas
+            identificadoresCelda
+            idCelda
+            clases
+        }
+
+    export default {
+        name: "celda",
+        components: {celdaCurso}
+        props:
+            dia:
+                type: String
+                required: true
+            hora:
+                type: String
+                required: true
+            nombreAño:
+                type: String
+                required: true
+            nombreStore:
+                type: String
+                required: true
+        setup
+    }
 
 #
 </script>