@ecored-sena/base-kit 0.0.1

package/plugin/components/ImagenInfograficaB.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+.img-infografica-b(
+  :class="{'img-infografica-b--open': selectedItem}"
+)
+  .img-infografica-b__img(:ref="'img-ref-'+mainId")
+    slot(name="imagen")
+  .img-infografica-b__content(v-if="elements.length")
+    .img-infografica-b__item(
+        v-for="(item, index) in elements"
+        :key="'img-infografica-b-btn-'+item.id"
+        :style="[{top: item.y},{left: item.x}]"
+        @click="selected = item.id"
+      )
+      .indicador--click(v-if="showIndicator && firstElement.id === item.id")
+      .img-infografica-b__item__tooltip
+        span.text-small(v-html="item.tooltip")
+      .img-infografica-b__item__dot
+      .img-infografica-b__item__numero(v-if="item.hasOwnProperty('numero')") {{item.numero}}
+      .img-infografica-b__item__numero(v-else)
+        i.fas.fa-plus
+
+  .img-infografica-b__modal.p-3.p-md-4.p-xl-5(v-if="selectedItem" :style="getImageHeight()")
+    .img-infografica-b__modal__btn-cerrar(@click="selected = 0")
+      i.fas.fa-times
+    .img-infografica-b__modal__contenido(v-child="selectedItem.elm")
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'ImagenInfograficaB',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    firstSelection: false,
+    showIndicator: true,
+  }),
+  computed: {
+    selectedItem() {
+      return this.elements.find(element => element.id === this.selected)
+    },
+    firstElement() {
+      return this.elements.length && this.elements[0]
+    },
+  },
+  watch: {
+    selected() {
+      if (this.showIndicator) {
+        this.showIndicator = false
+      }
+    },
+  },
+  methods: {
+    getImageHeight() {
+      const imgElement = this.$refs['img-ref-' + this.mainId]
+      if (imgElement) {
+        return {
+          'min-height': imgElement.clientHeight + 'px',
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/Inicio.vue

@@ -0,0 +1,128 @@
+<template lang="pug">
+section.inicio
+  BannerHero.mb-5
+
+  //- Desarrollo de contenidos
+  #contenidos.container.tarjeta.tarjeta__template--azul-claro.px-3.py-4.px-sm-5.pb-sm-5.mb-5
+    .titulo__template--a.mb-4
+      h3 Desarrollo<br>de contenidos
+
+    .tarjeta--blanca.p-3.p-sm-4
+      .desarrollo-contenidos
+        router-link.desarrollo-contenidos__item(
+          v-for="item of desarrolloContenidosData"
+          :key="'desarrollo-'+item.nombreRuta"
+          :to="{name: item.nombreRuta}"
+        )
+          .desarrollo-contenidos__item__texto
+            span.desarrollo-contenidos__item__icono(v-if="item.hasOwnProperty('numero')" ) {{item.numero}}
+            i.desarrollo-contenidos__item__icono(v-else :class="item.icono")
+            span(v-html="item.titulo")
+
+          a.boton--sm
+            span.d-none.d-md-block Ver contenido
+            span.d-md-none Ver
+
+  .container.tarjeta.tarjeta__template--azul-claro.creditos-inicio.px-3.py-4.px-sm-5
+
+    .creditos-inicio__container(v-if="creditosInicio")
+      .creditos-inicio__item(v-for="(row, index) in creditosInicio")
+        .row
+          .creditos-inicio__titulo.col-md-3.col-lg-2.mb-3.mb-md-0
+            h5.mb-0(v-html="row.titulo")
+
+          .creditos-inicio__imagenes.col
+            img(v-for="imagen in row.contenido" :src="imagen")
+        hr(v-if="index != creditosInicio.length -1")
+
+    .text-center(v-else)
+      img.d-inline-block.mb-2(src="@/assets/logos/logo-sena.svg" style="width: 100px")
+      h5.mb-0 Ecosistema de recursos educativos digitales
+  Footer
+  
+
+</template>
+<script>
+export default {
+  name: 'Inicio',
+  computed: {
+    menuPrincipalData() {
+      return this.$config.menuPrincipal
+    },
+    creditosInicio() {
+      return this.$config.creditosInicio
+    },
+    desarrolloContenidosData() {
+      const allMenuData = [
+        ...this.menuPrincipalData.menu,
+        ...this.menuPrincipalData.subMenu,
+      ]
+      return allMenuData.filter(item => item.desarrolloContenidos)
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.inicio
+  .footer
+    border-radius: 0 !important
+.resultados-aprendizaje
+  &__item
+    margin-bottom: 20px
+    &:last-child
+      margin-bottom: 0
+
+.desarrollo-contenidos
+  &__item
+    display: flex
+    align-items: center
+    justify-content: space-between
+    margin-bottom: 25px
+    padding: 5px
+    border-radius: $base-border-radius
+
+    &__texto
+      display: flex
+      align-items: center
+      color: $color-sistema-texto
+
+    &__icono
+      display: block
+      background-color: $color-sistema-g
+      font-size: 20px
+      font-weight: $base-black-font-weight
+      text-align: center
+      padding: 10px
+      line-height: 1em
+      width: 40px
+      margin-right: 15px
+
+    &:last-child
+      margin-bottom: 0
+
+    &:hover
+      background-color: $color-sistema-g
+      font-weight: $base-black-font-weight
+      color: $color-sistema-a
+
+.creditos-inicio
+  border-bottom-left-radius: 0 !important
+  border-bottom-right-radius: 0 !important
+  &__container
+    hr
+      margin: 15px 0
+  &__titulo
+    display: flex
+    align-items: center
+  &__item
+  &__imagenes
+    display: flex
+    flex-wrap: wrap
+    img
+      width: auto
+      max-height: 60px
+      margin-right: 15px
+      margin-top: 5px
+      margin-bottom: 5px
+</style>

package/plugin/components/LineaTiempoA.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+.linea-tiempo-a
+  .linea-tiempo-a__row(
+    v-for="(item,index) of datos"
+    :ref="'linea-tiempo-item-'+index"
+  )
+    .linea-tiempo-a__content
+      .linea-tiempo-a__text
+        h3.mb-2(v-html="item.titulo")
+        span(v-html="item.texto")
+
+    .linea-tiempo-a__content
+      .linea-tiempo-a__icon
+        .linea-tiempo-a__icon__container
+          span.h4(v-html="item.ano")
+</template>
+
+<script>
+export default {
+  name: 'LineaTiempoA',
+  props: {
+    datos: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/LineaTiempoB.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.linea-tiempo-b.py-5
+  .linea-tiempo-b__line-row.row
+    .col-5.d-none.d-md-block
+    .col-3.col-md-2
+      .linea-tiempo-b__line
+    .col-9.col-md-5
+
+  .linea-tiempo-b__row.row.align-items-center(
+    v-for="(item,index) of datos"
+    :ref="'linea-tiempo-item-'+index"
+  )
+    .col-5.d-none.d-md-block
+    .col-3.col-md-2
+      .linea-tiempo-b__icon
+        img(:src="item.icono")
+    .col-9.col-md-5
+      .linea-tiempo-b__content
+        h3.mb-2(v-html="item.titulo")
+        span(v-html="item.texto")
+
+</template>
+
+<script>
+export default {
+  name: 'LineaTiempoB',
+  props: {
+    datos: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/LineaTiempoC.vue

@@ -0,0 +1,95 @@
+<template lang="pug">
+.linea-tiempo-c
+  .row.flex-nowrap.mx-0.linea-tiempo-c__header.mb-4
+    .col-2.col-sm-auto.px-0.me-sm-3
+      .linea-tiempo-c__header__btn--left(@click="selected = leftBtnId")
+        i.fas.fa-angle-left
+    .col-8.col-sm.px-0
+      .row.mx-0.flex-nowrap.linea-tiempo-c__header__items
+        ScrollHorizontal(
+          v-if="elements.length"
+          :selectedId="'ltc-header-' + (selected -1)"
+        )
+          .col-6.col-sm-4.px-0.linea-tiempo-c__header__item(
+            v-for="(elm,index) of elements"
+            :key="'ltc-header-key-'+elm.id"
+            :id="'ltc-header-' +elm.id"
+            :class="itemClasses(elm.id)"
+            @click="selected = elm.id"
+            @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+          )
+            .indicador__container(v-if="mostrarIndicador && index === 1")
+              .indicador--click.indicador--sm
+            span.linea-tiempo-c__header__item__year(v-html="elm.titulo" :class="{'text-small' : textSmall }")
+            .linea-tiempo-c__header__item__line-container
+              .linea-tiempo-c__header__item__dot
+    .col-2.col-sm-auto.px-0.ms-sm-3.d-flex.justify-content-end
+      .linea-tiempo-c__header__btn--right(@click="selected = rightBtnId")
+        i.fas.fa-angle-right
+
+  .linea-tiempo-c__content
+    ScrollHorizontal(
+      v-if="elements.length"
+      :selectedId="'ltc-content-' + selected"
+      item-full-width
+    )
+      .linea-tiempo-c__content__item(
+        v-for="item in elements"
+        :key="'ltc-content-key-'+item.id"
+        :id="'ltc-content-'+item.id"
+        v-child="item.elm"
+      )
+    .hidden-slot
+      slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+import ScrollHorizontal from './ScrollHorizontal'
+export default {
+  name: 'LineaTiempoC',
+  components: { ScrollHorizontal },
+  mixins: [componentSlotMixins],
+  props: {
+    textSmall: {
+      type: Boolean,
+    },
+  },
+  data: () => ({
+    headerSelected: 0,
+    mostrarIndicador: true,
+  }),
+  computed: {
+    leftBtnId() {
+      return this.selected - 1 === this.mainId
+        ? this.selected
+        : this.selected - 1
+    },
+    rightBtnId() {
+      return this.selected + 1 ===
+        this.elements[this.elements.length - 1].id + 1
+        ? this.selected
+        : this.selected + 1
+    },
+  },
+  watch: {
+    elements(newVal, oldVal) {
+      if (!oldVal.length && newVal.length) {
+        this.headerSelected = newVal[0].id
+      }
+    },
+  },
+  methods: {
+    itemClasses(id) {
+      return [
+        { 'linea-tiempo-c__header__item--active': id === this.selected },
+        { 'linea-tiempo-c__header__item--before': id < this.selected },
+        this.elements.length > 6 ? 'col-lg-2' : 'col-lg',
+        this.elements.length >= 4 ? 'col-md-3' : 'col-md',
+      ]
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/LineaTiempoD.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+.linea-tiempo-d
+  .linea-tiempo-d__item.row(
+    v-for="(item, index) in elements"
+    :key="'linea-tiempo-d-key-'+item.id"
+    :class="{'linea-tiempo-d__item--selected' : selected === item.id}"
+  )
+    .col-auto.linea-tiempo-d__item__col-number
+      .linea-tiempo-d__item__number.tarjeta.tarjeta--gris(
+        :class="[,{'px-3' : item.numero.length > 1}]"
+         @click="selected = item.id"
+         @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+      )
+        .indicador__container(v-if="mostrarIndicador && index === 1")
+          .indicador--click
+        span(v-html="item.numero")
+      .linea-tiempo-d__item__dots(
+        v-if="index < elements.length -1"
+      )
+
+    .col(:class="{'mb-4' : index < elements.length -1}")
+      .linea-tiempo-d__item__content.tarjeta.tarjeta--gris
+        .linea-tiempo-d__item__content__title.px-3(
+          @click="selected = item.id"
+          @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+        )
+          span(v-html="item.titulo")
+        .linea-tiempo-d__item__content__slot(
+          :style="{ height: rendered && selected === item.id ? getActiveHeight(item.id) : 0 } "
+        )
+          .p-3.pt-0(:ref="item.id" v-child="item.elm" )
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'LineaTiempoD',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/LineaTiempoE.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+.linea-tiempo-e
+  .linea-tiempo-e__item(
+    v-for="(item, index) in elements"
+    :key="'linea-tiempo-e-key-'+item.id"
+  )
+    .linea-tiempo-e__item__header
+      h3.mb-1 {{item.titulo}}
+      p.mb-0(v-if="item.hasOwnProperty('subtitulo')") {{item.subtitulo}}
+    .linea-tiempo-e__item__body(v-child="item.elm")
+
+  .hidden-slot
+    slot
+
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'LineaTiempoE',
+  mixins: [componentSlotMixins],
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/ModalA.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+.modal-a(:class="{'modal-a--abierto' : abrirModal}")
+  .modal-a__fondo(@click="$emit('update:abrir-modal', false)")
+  .modal-a__content.p-5
+    .modal-a__close-btn(@click="$emit('update:abrir-modal', false)")
+      i.fas.fa-times
+    slot
+</template>
+
+<script>
+export default {
+  name: 'ModalA',
+  props: {
+    abrirModal: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/PasosA.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+.pasos-a
+  .pasos-a__item(v-if="elements.length" v-for="(item, index) in elements")
+    .row.align-items-center.d-flex(
+      :class="!isEven(index) && 'flex-row-reverse'"
+    )
+      .col-3.col-sm-2.col-lg-1.pasos-a__numero.text-center.d-inline-flex.justify-content-center.align-items-center(
+        :class="getClass(index)"
+      )
+        .pasos-a__circle
+          .h2(v-if="tipo === 'n'") {{index + 1}}
+          .h2(v-else-if="tipo === 'l'") {{abecedario[index]}}
+      .col.py-3(v-child="item.elm" :class="!isEven(index) && 'text-end'")
+      .col-1
+    
+    .row.pasos-a__linea(v-if="index + 1 != elements.length")
+      .col-3.col-sm-2.col-lg-1.pasos-a__linea__esquina
+        .pasos-a__linea__esquina__linea.top-right(v-if="isEven(index)")
+        .pasos-a__linea__esquina__linea.right-bottom(v-else)
+      .col-6.col-sm-8.col-lg-10
+        .hor-line
+      .col-3.col-sm-2.col-lg-1.pasos-a__linea__esquina
+        .pasos-a__linea__esquina__linea.left-bottom(v-if="isEven(index)")
+        .pasos-a__linea__esquina__linea.top-left(v-else)
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'PasosA',
+  mixins: [componentSlotMixins],
+  props: {
+    tipo: {
+      type: String,
+      default: 'n',
+    },
+  },
+  data: () => ({
+    abecedario: 'ABCDEFGHIJKLMNÑOPQRSTUVWXYZ',
+  }),
+  methods: {
+    getClass(idx) {
+      return idx === 0
+        ? 'bottom'
+        : idx + 1 === this.elements.length
+        ? 'top'
+        : 'full'
+    },
+    isEven(idx) {
+      return idx % 2 === 0
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/PasosB.vue

@@ -0,0 +1,90 @@
+<template lang="pug">
+.pasos-b
+  .row.flex-nowrap.mx-0.pasos-b__header.mb-4
+    .col-2.col-sm-auto.px-0.me-sm-3
+      .pasos-b__header__btn--left(@click="selected = leftBtnId")
+        i.fas.fa-angle-left
+    .col-8.col-sm.px-0
+      .row.mx-0.flex-nowrap.pasos-b__header__items
+        ScrollHorizontal(
+          v-if="elements.length"
+          :selectedId="'pb-header-' + (selected -1)"
+        )
+          .col-6.col-sm-4.px-0.pasos-b__header__item(
+            v-for="(elm,index) of elements"
+            :key="'pb-header-key-'+elm.id"
+            :id="'pb-header-' +elm.id"
+            :class="itemClasses(elm.id)"
+          )
+            .pasos-b__header__item__line-container
+              .pasos-b__header__item__dot 
+                span.text-bold {{index +1}}
+                i.fas.fa-check
+            .pasos-b__header__item__tittle.px-2.text-small(v-html="elm.titulo")
+    .col-2.col-sm-auto.px-0.ms-sm-3.d-flex.justify-content-end
+      .pasos-b__header__btn--right(@click="selected = rightBtnId" @mouseover="mostrarIndicador = false")
+        i.fas.fa-angle-right
+        .indicador__container.indicador--left(v-if="mostrarIndicador")
+          .indicador--click
+
+  .linea-tiempo-c__content
+    ScrollHorizontal(
+      v-if="elements.length"
+      :selectedId="'pb-content-' + selected"
+      item-full-width
+    )
+      .linea-tiempo-c__content__item(
+        v-for="item in elements"
+        :key="'pb-content-key-'+item.id"
+        :id="'pb-content-'+item.id"
+        v-child="item.elm"
+      )
+    .hidden-slot
+      slot
+</template>
+
+<script>
+import ScrollHorizontal from './ScrollHorizontal'
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'PasosB',
+  components: { ScrollHorizontal },
+  mixins: [componentSlotMixins],
+  data: () => ({
+    headerSelected: 0,
+    mostrarIndicador: true,
+  }),
+  computed: {
+    leftBtnId() {
+      return this.selected - 1 === this.mainId
+        ? this.selected
+        : this.selected - 1
+    },
+    rightBtnId() {
+      return this.selected + 1 ===
+        this.elements[this.elements.length - 1].id + 1
+        ? this.selected
+        : this.selected + 1
+    },
+  },
+  watch: {
+    elements(newVal, oldVal) {
+      if (!oldVal.length && newVal.length) {
+        this.headerSelected = newVal[0].id
+      }
+    },
+  },
+  methods: {
+    itemClasses(id) {
+      return [
+        { 'pasos-b__header__item--active': id === this.selected },
+        { 'pasos-b__header__item--before': id < this.selected },
+        this.elements.length > 6 ? 'col-lg-2' : 'col-lg',
+        this.elements.length >= 4 ? 'col-md-3' : 'col-md',
+      ]
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/Referencias.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+.curso-main-container.referencias
+  BannerInterno(icono="fas fa-book" titulo="Referencias bibliográficas")
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5.mb-5
+    .referencias__item(v-for="ref in orderedData" :key="ref.link")
+      span(v-html="ref.referencia")
+      a.ms-1(v-if="ref.link" :href="ref.link" target="_blank")
+        span(v-html="ref.link")
+        i.ms-1.fas.fa-external-link-alt
+      hr.my-3
+</template>
+<script>
+import plantillaMixins from './plantillaMixins'
+export default {
+  name: 'Referencias',
+  mixins: [plantillaMixins],
+  computed: {
+    referenciasData() {
+      return this.$config.referencias
+    },
+    orderedData() {
+      const ArrayOrdered = [...this.referenciasData].sort((a, b) => {
+        const afl = this.quitarAcentos(a.referencia.split(' ')[0].toLowerCase())
+        const bfl = this.quitarAcentos(b.referencia.split(' ')[0].toLowerCase())
+        if (afl < bfl) return -1
+        if (afl > bfl) return 1
+        return 0
+      })
+      return ArrayOrdered
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.referencias
+  &__item
+    &:last-child
+      hr
+        display: none
+    a
+      color: $blue
+      text-decoration: underline
+      overflow-wrap: break-word
+</style>