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,14 +20,12 @@ table.tabla_horario(border="1")
 </template>
 
 <script lang="coffee">
+    import {ref, computed} from "vue"
     import celda from "./tablaHorarios/celda.vue"
 
-    export default
+    setup = (props) =>
-        name: "tabla-horarios"
+        dias = ref ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
-        components: { celda }
+        horas = ref [
-        data: ->
-            dias: ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
-            horas: [
             "07:00 - 07:50"
             "07:50 - 08:40"
             "08:40 - 08:50"
@@ -48,19 +46,31 @@ table.tabla_horario(border="1")
             "18:30 - 19:20"
             "19:20 - 20:10"
         ]
-            horasDescanso: [
+        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}
         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,24 +18,15 @@ span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
         obtenerClaseGrupoCurso
     } from "./funcionesResaltado.coffee"
 
-    export default
+    setup = (props) =>
-        name: "celda-curso"
+        celdaCursoActiva = ref false
-        props:
+
-            datos:
+        clases = computed (=>
-                type: Object
-                required: yes
-            nombreAño:
-                type: String
-                required: yes
-        data: ->
-            celdaCursoActiva: no
-        computed:
-            clases: ->
             res = []
-                esLab = @datos.esLab
+            esLab = props.datos.esLab
-                cursoAbreviado = @datos.cursoAbreviado
+            cursoAbreviado = props.datos.cursoAbreviado
-                nombreGrupo = @datos.nombreGrupo
+            nombreGrupo = props.datos.nombreGrupo
-                nombreAño = @nombreAño.substring 0, (@nombreAño.indexOf " ")
+            nombreAño = props.nombreAño.substring 0, (props.nombreAño.indexOf " ")
 
             res.push if esLab then "celda__lab" else "celda__teoria"
 
@@ -45,19 +37,44 @@ span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
             res.push "_#{ nombreAño }_#{ cursoAbreviado }_#{ if esLab then 'L' else '' }#{ nombreGrupo }"
 
             res
-            cursoAbreviado: -> @datos.cursoAbreviado
+        )
-            nombreGrupo: -> @datos.nombreGrupo
+        cursoAbreviado = computed (=> props.datos.cursoAbreviado)
-            esLab: -> @datos.esLab
+        nombreGrupo = computed (=> props.datos.nombreGrupo)
-            claseCursoGeneral: ->
+        esLab = computed (=> props.datos.esLab)
-                obtenerClaseGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
+        claseCursoGeneral = computed (=>
-        methods:
+            obtenerClaseGrupoCurso props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
-            resaltarCeldasGrupo: ->
+        )
-                resaltarGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
-            quitarResaltadoGrupo: ->
-                removerResaltadoGrupo @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
-            toggleActivo: ->
-                activarGrupoCursoStr @claseCursoGeneral
 
+        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: true
+            nombreAño:
+                type: String
+                required: true
+        setup
+    }
 
 #
 </script>

src/components/Inicio/tablaHorarios/celda.vue

@@ -6,38 +6,26 @@ 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:
+        datosCeldas = ref []
-            dia:
+
-                type: String
+        identificadoresCelda = computed (=>
-                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
+            parteDia = props.dia.substring 0, 2
             clases.push ("_" + parteDia)
 
-                parteHora = (@hora.substring 0, 2) + (@hora.substring 3, 5)
+            parteHora = (props.hora.substring 0, 2) + (props.hora.substring 3, 5)
             clases.push ("_" + parteHora)
 
             clases.push ("_" + parteDia + parteHora)
 
-                nombreAño = @nombreAño
+            nombreAño = props.nombreAño
             claseAño = nombreAño.substring 0, (nombreAño.indexOf " ")
             clases.push ("_" + claseAño)
 
@@ -45,25 +33,51 @@ td(:class="clases")
             clases.push id
 
             [id, clases]
-            idCelda: -> @identificadoresCelda[0]
+        )
-            clases: ->  @identificadoresCelda[1]
+        idCelda = computed (=> identificadoresCelda.value[0])
-        methods:
+        clases = computed (=> identificadoresCelda.value[1])
-            registrarCelda: -> @$store.commit "registrarCelda", @idCelda
-            recuperarDatosCeldas: -> @datosCeldas = @$store.state.celdas[@idCelda]
 
-        mounted: ->
+        registrarCelda = => store.commit "registrarCelda", idCelda.value
-            vm = this
+        recuperarDatosCeldas = => datosCeldas.value = store.state.celdas[idCelda.value]
-            idCelda = @identificadoresCelda[0]
+
+        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>