@ecored-sena/base-kit 0.0.1

package/README.md

@@ -0,0 +1 @@
+# ecored-pkg-sena

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ecored-sena/base-kit",
+  "version": "0.0.1",
+  "description": "Paquete para el desarrollo de componentes de recursos educativos digitales",
+  "keywords": [
+    "SENA",
+    "ECORED",
+    "ecored-pkg"
+  ],
+  "license": "AGPL-3.0",
+  "author": "ECORED SENA <ecoredsena.dev01@gmail.com>",
+  "type": "commonjs",
+  "main": "./plugin/plugin.js",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build-plugin": "vue-cli-service build --target lib --name my-plugin ./src/plugin.js"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@popperjs/core": "^2.11.8",
+    "aos": "^2.3.4",
+    "bootstrap": "^5.3.8",
+    "vue": "^2.7.16",
+    "vue-router": "^3.6.5",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-plugin-router": "^4.5.19",
+    "@vue/cli-plugin-vuex": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "sass": "^1.97.3",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-pug": "^2.0.0",
+    "vue-template-compiler": "^2.7.16"
+  }
+}

package/plugin/components/AccordionRED.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+.acordion
+  .p-3.pb-0.p-md-4.pb-md-0.mb-3(v-for="(elm, index) of elements" :key="elm.id" :class="cardClass(elm.id)")
+    
+    .acordion__header.mb-3.mb-md-4(
+      @click="selected = selected != elm.id ? elm.id : 0"
+      @mouseover="mostrarIndicador = mostrarIndicador && index === 1 ? false : mostrarIndicador"
+    )
+      .d-flex.align-items-center
+        .acordion__accion(v-if="tipo === 'a'")
+          .acordion__accion__btn--a.h3.mb-0.me-3
+            i.fas.fa-minus(v-if="selected === elm.id")
+            i.fas.fa-plus(v-else)
+            .indicador__container(v-if="mostrarIndicador && index === 1")
+              .indicador--click.indicador--sm
+
+        .acordion__titulo
+          h3.mb-0(v-html="elm.titulo")
+
+      .acordion__accion(v-if="tipo === 'b'")
+        .acordion__accion__btn--b.h3.mb-0
+          i.fas.fa-angle-up(v-if="selected === elm.id")
+          i.fas.fa-angle-down(v-else)
+          .indicador__container.indicador--left(v-if="mostrarIndicador && index === 1")
+            .indicador--click.indicador--sm
+    
+    .acordion__contenido(
+      :style="{ height: rendered && selected === elm.id ? getActiveHeight(elm.id) : 0 } "
+    )
+      .acordion__contenido__item.pb-3.pb-md-4(:ref="elm.id" v-child="elm.elm")
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'AccordionRED',
+  mixins: [componentSlotMixins],
+  props: {
+    claseTarjeta: {
+      type: String,
+      default: '',
+    },
+    tipo: {
+      type: String,
+      default: 'a',
+    },
+  },
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.domUpdated()
+      }, 5000)
+    })
+  },
+  methods: {
+    cardClass(id) {
+      const clasesFinales = []
+      if (this.claseTarjeta.length) {
+        clasesFinales.push(this.claseTarjeta)
+      } else {
+        clasesFinales.push('tarjeta tarjeta--blanca')
+      }
+      if (this.selected === id) {
+        clasesFinales.push('acordion__activo')
+      }
+      return clasesFinales
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/AcordionA.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+.acordion
+  .p-3.pb-0.p-md-4.pb-md-0.mb-3(v-for="(elm, index) of elements" :key="elm.id" :class="cardClass(elm.id)")
+    
+    .acordion__header.mb-3.mb-md-4(
+      @click="selected = selected != elm.id ? elm.id : 0"
+      @mouseover="mostrarIndicador = mostrarIndicador && index === 1 ? false : mostrarIndicador"
+    )
+      .d-flex.align-items-center
+        .acordion__accion(v-if="tipo === 'a'")
+          .acordion__accion__btn--a.h3.mb-0.me-3
+            i.fas.fa-minus(v-if="selected === elm.id")
+            i.fas.fa-plus(v-else)
+            .indicador__container(v-if="mostrarIndicador && index === 1")
+              .indicador--click.indicador--sm
+
+        .acordion__titulo
+          h3.mb-0(v-html="elm.titulo")
+
+      .acordion__accion(v-if="tipo === 'b'")
+        .acordion__accion__btn--b.h3.mb-0
+          i.fas.fa-angle-up(v-if="selected === elm.id")
+          i.fas.fa-angle-down(v-else)
+          .indicador__container.indicador--left(v-if="mostrarIndicador && index === 1")
+            .indicador--click.indicador--sm
+    
+    .acordion__contenido(
+      :style="{ height: rendered && selected === elm.id ? getActiveHeight(elm.id) : 0 } "
+    )
+      .acordion__contenido__item.pb-3.pb-md-4(:ref="elm.id" v-child="elm.elm")
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'AcordionA',
+  mixins: [componentSlotMixins],
+  props: {
+    claseTarjeta: {
+      type: String,
+      default: '',
+    },
+    tipo: {
+      type: String,
+      default: 'a',
+    },
+  },
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.domUpdated()
+      }, 5000)
+    })
+  },
+  methods: {
+    cardClass(id) {
+      const clasesFinales = []
+      if (this.claseTarjeta.length) {
+        clasesFinales.push(this.claseTarjeta)
+      } else {
+        clasesFinales.push('tarjeta tarjeta--blanca')
+      }
+      if (this.selected === id) {
+        clasesFinales.push('acordion__activo')
+      }
+      return clasesFinales
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/Audio.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+.audio.position-relative(@mouseover.once="$emit('audio-hover')")
+  slot
+  .spinner-border.spinner-border-sm(v-if="!audioCanPlay" role="status")
+    span.visually-hidden Loading..
+  button.audio__btn( v-else-if="state ==='pause'"  @click="play")
+    img(src="@/assets/template/audio.svg")
+  button.audio__btn(v-else @click="pause")
+    img(src="@/assets/template/pause.svg")
+</template>
+
+<script>
+import audioMixins from './audioMixins'
+export default {
+  name: 'Audio',
+  mixins: [audioMixins],
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/BannerHero.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+.banner-principal
+  .container.tarjeta(
+    :style="{'background-image': globalData.fondoBannerPrincipal ? `url(${globalData.fondoBannerPrincipal})` : 'none'}"
+  )
+    .row.banner-principal__row
+      .col-lg-7.col-xxl-5.ps-4.ps-sm-5.py-4.py-sm-5.banner-principal__info
+        .banner-principal__componente
+          h1.mb-0(v-html="globalData.Name")
+        .banner-principal__descripcion
+          p.mb-0(v-html="globalData.Description")
+        .banner-principal__accion
+          router-link.boton(:to="{name: iniciarLnk.nombreRuta }")
+            span.me-1 Ver más
+            i.fas.fa-angle-right
+
+      .d-none.d-lg-block.col-lg-5.px-0.banner-principal__img
+        img(:src="globalData.imagenBannerPrincipal")
+        div(v-for="img in extraImgs" :class="img.clases")
+          img(:src="img.imagen")
+</template>
+
+<script>
+import mixins from './plantillaMixins'
+export default {
+  name: 'BannerPrincipal',
+  mixins: [mixins],
+  computed: {
+    globalData() {
+      return this.$config.global
+    },
+    extraImgs() {
+      return this.$config.global.imagenesDecorativasBanner
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.banner-principal
+  p, h1, h2, h3, h4, h5, h6
+    color: $color-banner-text
+
+  .tarjeta
+    background-color: $color-banner-fondo
+    background-size: cover
+    background-position: center
+
+  &__img
+    position: relative
+    &>div
+      position: absolute
+
+  &__info
+    display: flex
+    flex-direction: column
+    justify-content: center
+
+  &__programa
+    display: flex
+    align-items: center
+    margin-bottom: 20px
+
+  &__componente
+    margin-bottom: 20px
+    h1
+      line-height: 1.1em
+
+      @media (max-width: $bp-max-xs)
+        font-size: 2em
+
+  &__descripcion
+    margin-bottom: 20px
+
+  &__row
+    @if $banner-principal-img-x == 'derecha'
+      justify-content: space-between
+    @else
+      justify-content: space-around
+      .banner-principal__img
+        padding-right: 1.5rem!important
+      @media (min-width: $bp-min-sm)
+        .banner-principal__img
+          padding-right: 3rem!important
+
+  &__img
+    @if $banner-principal-img-y == 'arriba'
+      align-self: flex-start
+      padding-bottom: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-bottom: 3rem!important
+    @else if $banner-principal-img-y == 'abajo'
+      align-self: flex-end
+      padding-top: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-top: 3rem!important
+    @else
+      align-self: center
+      padding-top: 1.5rem
+      padding-bottom: 1.5rem
+      @media (min-width: $bp-min-sm)
+        padding-top: 3rem!important
+        padding-bottom: 3rem!important
+</style>

package/plugin/components/CarouselCard.vue

@@ -0,0 +1,70 @@
+<template lang="pug">
+.slyder-f
+  
+  .slyder-f__btn.pe-3(@click="clickAnterior")
+    i.fas.fa-chevron-left
+  .slyder-f__main(:id="'slyder-f-' + mainId")
+    ScrollHorizontal(
+      v-if="elements.length && rendered" 
+      :selectedId="'sl-' + selected"
+      row
+    )
+      .slyder-f__slyde(
+        v-for="(item, index) in elements"
+        :key="'sl-key-'+item.id"
+        :id="'sl-'+item.id"
+        :class="columnas"
+        v-child="item.elm"
+      )
+  .slyder-f__btn.ps-3(@click="clickSiguiente")
+    i.fas.fa-chevron-right
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import ScrollHorizontal from './ScrollHorizontal'
+import componentSlotMixins from './componentSlotMixins'
+import slyderMixins from './slyderMixins'
+export default {
+  name: 'CarouselCard',
+  components: { ScrollHorizontal },
+  mixins: [componentSlotMixins, slyderMixins],
+  props: {
+    columnas: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    clickAnterior() {
+      const ids = this.elements.map(element => element.id)
+      const idxOfSelected = ids.indexOf(this.selected)
+      if (idxOfSelected > 0) {
+        this.selected = ids[idxOfSelected - 1]
+      }
+    },
+    clickSiguiente() {
+      const ids = this.elements.map(element => element.id)
+      const container = document.querySelector('#slyder-f-' + this.mainId)
+      const containerComputedStyles = window.getComputedStyle(container)
+      const containerWidth = parseFloat(containerComputedStyles.width)
+      const elm = document.querySelector(`#sl-${this.elements[0].id}`)
+      const elmComputedStyles = window.getComputedStyle(elm)
+      const elmWidth = parseFloat(elmComputedStyles.width)
+      const elmtsPerContainer = Math.round(containerWidth / elmWidth)
+      const newIds =
+        elmtsPerContainer > 1
+          ? ids.slice(0, ids.length - (elmtsPerContainer - 1))
+          : ids
+      const idxOfSelected = newIds.indexOf(this.selected)
+      if (idxOfSelected < newIds.length - 1) {
+        this.selected = newIds[idxOfSelected + 1]
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/CarouselRED.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+.slyder-a
+  .slyder-a__tipo-a(v-if="tipo === 'a'")
+    .slyder-a__btn--sigt(
+      v-if="navObj.next"
+      @click="selected = navObj.next" 
+      @mouseover="mostrarIndicador = false"
+    )
+      .indicador__container.indicador--left(v-if="mostrarIndicador")
+        .indicador--click
+    .slyder-a__btn--atrs(v-if="navObj.back" @click="selected = navObj.back")
+    .slyder-a__bullets
+      .slyder-a__bullets__item(
+        v-for="bullet in elements"
+        :key="'sl-blt-key-'+bullet.id"
+        :class="{'slyder-a__bullets__item--active' : selected === bullet.id}"
+        @click="selected = bullet.id"
+      )
+  ScrollHorizontal(v-if="elements.length && rendered" :selectedId="'sl-' + selected" item-full-width)
+    .slyder-a__item(
+      v-for="item in elements"
+      :key="'sl-key-'+item.id"
+      :id="'sl-'+item.id"
+      v-child="item.elm"
+    )
+  .slyder-a__tipo-b.mt-3(v-if="tipo === 'b'")
+    .slyder-a__btn--atrs(:class="{'hide' : !navObj.back}" @click="selected = navObj.back")
+    
+    .slyder-a__bullets
+      .slyder-a__bullets__item(
+        v-for="bullet in elements"
+        :key="'sl-blt-key-'+bullet.id"
+        :class="{'slyder-a__bullets__item--active' : selected === bullet.id}"
+        @click="selected = bullet.id"
+      )
+    .slyder-a__btn--sigt(
+      :class="{'hide' : !navObj.next}"
+      @click="selected = navObj.next" 
+      @mouseover="mostrarIndicador = false"
+    )
+      .indicador__container.indicador--left(v-if="mostrarIndicador")
+        .indicador--click
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'CarouselRED',
+  mixins: [componentSlotMixins],
+  props: {
+    tipo: {
+      type: String,
+      default: 'a',
+    },
+  },
+  data: () => ({
+    mostrarIndicador: true,
+    secuencial: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/Complementario.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+.curso-main-container.complementario
+  BannerInterno(icono="far fa-folder-open" titulo="Material complementario")
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5.mb-5
+    .table-responsive
+      table
+        thead
+          tr
+            th(colspan='3' scope="col") Tema
+            th(colspan='5' scope="col") Referencia APA del material
+            th(colspan='2' scope="col") Tipo 
+            th(colspan='2' scope="col") Enlace
+        tbody
+          tr(v-for="(item, index) in computedData" :key="'complementario-'+index")
+            td.text-start(colspan='3' scope="row" v-html="item.tema")
+            td.text-start(colspan='5' scope="row" v-html="item.referencia")
+            td(colspan='2' v-html="item.tipo")
+            td(colspan='2')
+              .complementario__enlaces
+                a.complementario__btn(v-for="link of item.link" :href="link" target="_blank")
+                  i.fas.fa-external-link-alt
+
+</template>
+<script>
+export default {
+  name: 'MaterialComplementario',
+  computed: {
+    complementarioData() {
+      return this.$config.complementario
+    },
+    computedData() {
+      const data = this.$config.complementario
+      return data.map(item => {
+        let nuevoLink = []
+        if (item.link) {
+          if (typeof item.link === 'string') {
+            nuevoLink.push(item.link)
+          } else {
+            nuevoLink = item.link
+          }
+        } else if (item.descarga) {
+          if (typeof item.descarga === 'string') {
+            nuevoLink.push(this.obtenerLink(item.descarga))
+          } else {
+            item.descarga.forEach(link => {
+              nuevoLink.push(this.obtenerLink(link))
+            })
+          }
+        }
+        return {
+          ...item,
+          link: nuevoLink,
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.complementario
+  &__enlaces
+    display: flex
+    justify-content: center
+    flex-wrap: wrap
+    a
+      margin: 0 5px
+  &__btn
+    font-size: 1.5em
+    line-height: 1em
+table
+  width: calc(100% - 1px)
+  min-width: 800px
+  thead
+    background-color: $color-sistema-e
+    th
+      border-color: $color-sistema-e
+  th, td
+    padding: 25px 20px
+    text-align: center
+</style>

package/plugin/components/Creditos.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+  .curso-main-container.creditos-vista
+    BannerInterno(icono="far fa-registered" titulo="Créditos")
+    .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+      .creditos.mb-4.mb-md-5
+        .creditos__item(
+          v-for="(creditoObj, index) of creditosData"
+          :key="'credito-'+index"
+          :class="index != creditosData.length -1 ? 'mb-4' : ''" 
+        )
+          .creditos__titulo {{creditoObj.titulo}}
+          table
+            tbody
+              tr(
+                v-for="(item, idx) of creditoObj.autores" 
+                :key="'autor-'+idx"
+              )
+                td.text-bold(colspan='2' v-html="renderText(item.nombre)")
+                td(colspan='2' v-html="renderText(item.cargo)")
+                td(colspan='3' v-html="renderText(item.centro)")
+      .row.mb-4.mb-md-5
+        .col-md-6.mb-4.mb-md-0
+          .tarjeta.credito.p-3.text-center.h-100
+            img.d-inline-block(src="@/assets/template/creditos-img.svg" style="width: 70px")
+            p(v-html="creditosAdicionales.imagenes")
+        .col-md-6
+          .tarjeta.credito.p-3.text-center.h-100
+            img.d-inline-block(src="@/assets/template/creditos-cc.svg" style="width: 70px;")
+            p.mb-0(v-html="creditosAdicionales.creativeCommons")
+  
+      Footer(all-round)
+    
+      
+  
+</template>
+<script>
+import plantillaMixins from './plantillaMixins'
+export default {
+  name: 'Creditos',
+  mixins: [plantillaMixins],
+  data: () => ({
+    configTitulos: {
+      liderEquipo: 'ECOSISTEMA DE RECURSOS EDUCATIVOS DIGITALES',
+      contenidoInstruccional: 'CONTENIDO INSTRUCCIONAL',
+      desarrolloProducto:
+        'DISEÑO Y DESARROLLO DE RECURSOS EDUCATIVOS DIGITALES',
+      gestoresRepositorio: 'GESTORES DE REPOSITORIO',
+    },
+  }),
+  computed: {
+    creditosData() {
+      return this.$config.creditos
+    },
+    creditosAdicionales() {
+      return this.$config.creditosAdicionales
+    },
+  },
+  methods: {
+    renderText(textObj) {
+      let newText = ''
+      if (Array.isArray(textObj)) {
+        textObj.forEach((texto, index) => {
+          newText += (index ? '<br/>' : '') + texto
+        })
+      } else {
+        newText += textObj
+      }
+      return newText
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.creditos-vista
+  .tarjeta.credito
+    background-color: $color-sistema-d
+
+.creditos
+  color: $color-sistema-b
+  overflow-x: auto
+
+  &__item
+    min-width: 490px
+
+  p
+    line-height: 1.3em
+    margin-bottom: 0
+    color: $color-sistema-b
+
+  &__titulo
+    font-weight: $base-bold-font-weight
+    background-color: $color-sistema-d
+    padding: 5px 10px
+    border-top-radius: $base-border-radius
+    border-top-left-radius: $base-border-radius
+    border-top-right-radius: $base-border-radius
+  table
+    td, th
+      border-color: $color-sistema-d
+</style>

package/plugin/components/Dialogo.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+  .dialogo__chat.dialogo__chat--no-scroll.p-4.me-0
+    DialogoBurbuja.mb-3(
+      v-for="dialogoItem in dialogoComputed"
+      :key="`dialogo-item-${dialogoItem.id}`"
+      :dialogoItem="dialogoItem"
+    )
+
+</template>
+
+<script>
+import dialogoMixins from './dialogoMixins'
+export default {
+  name: 'Dialogo',
+  mixins: [dialogoMixins],
+  props: {
+    dialogo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    dialogoComputed() {
+      return this.dialogoMerge(this.dialogo)
+    },
+  },
+}
+</script>
+
+<style></style>