@ecored-sena/base-kit 0.0.1

package/plugin/components/ScrollHorizontal.vue

@@ -0,0 +1,105 @@
+<template lang="pug">
+.horizontal-scroll__wrapper(ref="hContainer")
+  .horizontal-scroll(
+    :class="[{'horizontal-scroll--item-fw':itemFullWidth},{'row':row}]"
+    :style="[{transform: `translate(${scrollVal}px,0px)`}]"
+  )
+    slot
+</template>
+
+<script>
+export default {
+  name: 'ScrollHorizontal',
+  props: {
+    selectedId: {
+      type: String,
+      default: '',
+    },
+    itemFullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    row: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      scrollVal: 0,
+      ids: [],
+    }
+  },
+  watch: {
+    selectedId(newVal) {
+      if (newVal.length) {
+        this.scroll()
+      }
+    },
+  },
+  mounted() {
+    this.getCords()
+    this.scroll()
+    window.addEventListener('resize', this.scroll)
+  },
+  updated() {
+    this.getCords()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.scroll)
+  },
+  methods: {
+    scroll() {
+      const selectedElementId = this.ids.find(
+        item => item.id === this.selectedId,
+      )?.id
+      const selectedElement = document.getElementById(selectedElementId)
+      if (
+        !Object.keys(this.$slots.default).length ||
+        !this.selectedId.length ||
+        selectedElement === null
+      )
+        return
+      const container = this.$refs.hContainer
+      const scrollContentTotalWidth =
+        selectedElement.offsetWidth * this.ids.length
+      let newScrollVal = selectedElement.offsetLeft
+      const elementsFitInContainer =
+        container.offsetWidth / selectedElement.offsetWidth
+      if (
+        elementsFitInContainer > 1 &&
+        scrollContentTotalWidth - newScrollVal < container.offsetWidth
+      ) {
+        newScrollVal = scrollContentTotalWidth - container.offsetWidth
+      }
+      this.scrollVal = this.ids.length === 1 ? 0 : -newScrollVal
+    },
+    getCords() {
+      if (this.$slots.default) {
+        this.ids = this.$slots.default.map(element => ({
+          id: element.elm.id,
+          key: element.key,
+        }))
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.horizontal-scroll__wrapper
+  overflow: hidden
+.horizontal-scroll
+  display: flex
+  transition: transform 0.5s ease-in-out
+  align-items: center
+  flex-wrap: nowrap
+  &:not(.row)
+    width: 100%
+  &--item-fw
+    & ::v-deep > div
+      flex-grow: 0
+      flex-shrink: 0
+      width: 100%
+      margin: 0 !important
+</style>

package/plugin/components/Separador.vue

@@ -0,0 +1,12 @@
+<template lang="pug">
+.separador-container
+  .separador
+</template>
+
+<script>
+export default {
+  name: 'Separador',
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderA.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: 'SlyderA',
+  mixins: [componentSlotMixins],
+  props: {
+    tipo: {
+      type: String,
+      default: 'a',
+    },
+  },
+  data: () => ({
+    mostrarIndicador: true,
+    secuencial: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderB.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+.slyder-b
+  ScrollHorizontal(v-if="datos.length" :selectedId="selected" item-full-width)
+    .slyder-b__slyde(
+      v-for="(item,index) in datos" 
+      :key="'key-'+getId(index)"
+      :id="getId(index)"
+    )
+      .row
+        .col-lg-8.order-lg-2.mb-4.mb-lg-0
+          figure.slyder-b__img
+            img(:src='item.imagen', :alt='item.leyendaImagen')
+            figcaption(v-if="item.leyendaImagen" v-html="item.leyendaImagen")
+
+        .col-lg-4.order-lg-1
+          h3(v-if="item.hasOwnProperty('titulo')" v-html="item.titulo")
+          p.mb-3(v-html="item.texto")
+          .slyder__action
+            .slyder__pagination {{index+1}}/{{datos.length}}
+            a.slyder__btn(v-if="index -1 >= 0" @click="selected = getId(index -1)")
+              i.fas.fa-angle-left
+            a.slyder__btn(
+              v-if="index != datos.length -1"
+              @click="selected = getId(index +1)"
+              @mouseover="mostrarIndicador = false"
+            )
+              i.fas.fa-angle-right
+              .indicador__container(v-if="mostrarIndicador && index === 0")
+                .indicador--click.indicador--sm
+</template>
+
+<script>
+import ScrollHorizontal from './ScrollHorizontal'
+import slyderMixins from './slyderMixins'
+export default {
+  name: 'SlyderB',
+  components: { ScrollHorizontal },
+  mixins: [slyderMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.selected = this.getId(0)
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderC.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+.slyder-c
+  ScrollHorizontal(v-if="datos.length" :selectedId="selected" item-full-width)
+    .slyder-c__slyde(
+      v-for="(item,index) in datos" 
+      :key="'key-'+getId(index)"
+      :id="getId(index)"
+    )
+      .slyder-c__imagen.mb-4
+        figure.slyder-c__img
+          img(:src='item.imagen', :alt='item.leyendaImagen')
+          figcaption(v-if="item.leyendaImagen") {{item.leyendaImagen}}
+      .slyder-c__content
+        .slyder-c__content__header.mb-4
+          .row
+            .col
+              h3.mb-2.mb-md-0(v-if="item.hasOwnProperty('titulo')" v-html="item.titulo")
+            .col-auto
+              .slyder__action
+                .slyder__pagination {{index+1}}/{{datos.length}}
+                a.slyder__btn(v-if="index -1 >= 0" @click="selected = getId(index -1)")
+                  i.fas.fa-angle-left
+                a.slyder__btn(
+                  v-if="index != datos.length -1"
+                  @click="selected = getId(index +1)"
+                  @mouseover="mostrarIndicador = false"
+                )
+                  i.fas.fa-angle-right
+                  .indicador__container.indicador--left(v-if="mostrarIndicador && index === 0")
+                    .indicador--click.indicador--sm
+                  
+        .slyder-c__content__body
+          p.mb-3(v-html="item.texto")
+
+</template>
+
+<script>
+import slyderMixins from './slyderMixins'
+import ScrollHorizontal from './ScrollHorizontal'
+export default {
+  name: 'SlyderC',
+  components: { ScrollHorizontal },
+  mixins: [slyderMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.selected = this.getId(0)
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderD.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+.slyder-d
+  ScrollHorizontal(v-if="datos.length" :selectedId="selected" item-full-width)
+    .slyder-d__slyde(
+      v-for="(item,index) in datos" 
+      :key="'key-'+getId(index)"
+      :id="getId(index)"
+    )
+      .slyder-d__imagen.mb-4
+        figure.slyder-d__img
+          img(:src='item.imagen', :alt='item.leyendaImagen')
+
+        .slyder-d__content
+          .row
+            .col-md-8.col-lg-6
+              .slyder-d__content__card.p-4
+                h3(v-if="item.hasOwnProperty('titulo')" v-html="item.titulo")
+                p.mb-3(v-html="item.texto")
+                .slyder__action
+                  .slyder__pagination {{index+1}}/{{datos.length}}
+                  a.slyder__btn(v-if="index -1 >= 0" @click="selected = getId(index -1)")
+                    i.fas.fa-angle-left
+                  a.slyder__btn(
+                    v-if="index != datos.length -1"
+                    @click="selected = getId(index +1)"
+                    @mouseover="mostrarIndicador = false"
+                  )
+                    i.fas.fa-angle-right
+                    .indicador__container(v-if="mostrarIndicador && index === 0")
+                      .indicador--click.indicador--sm
+
+</template>
+
+<script>
+import slyderMixins from './slyderMixins'
+import ScrollHorizontal from './ScrollHorizontal'
+export default {
+  name: 'SlyderD',
+  components: { ScrollHorizontal },
+  mixins: [slyderMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.selected = this.getId(0)
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderE.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+.slyder-e
+  ScrollHorizontal(v-if="elements.length && rendered" :selectedId="'sl-' + selected" item-full-width)
+    .slyder-e__slyde(
+      v-for="(item, index) in elements"
+      :key="'sl-key-'+item.id"
+      :id="'sl-'+item.id"
+    )
+      .slyder-e__content(
+        v-child="item.elm"
+      )
+      .slyder-e__actions.d-flex.p-2(
+        :class="[{'justify-content-center' : indicadores === 'centro'},{'justify-content-end' : indicadores === 'derecha'}]"
+      )
+        .slyder__action
+          .slyder__pagination {{index+1}}/{{elements.length}}
+          a.slyder__btn(
+            v-if="navObj.back"
+            @click="selected = navObj.back"
+            @mouseover="mostrarIndicador = false"
+          )
+            i.fas.fa-angle-left
+          a.slyder__btn(
+            v-if="navObj.next"
+            @click="selected = navObj.next" 
+            @mouseover="mostrarIndicador = false"
+          )
+            i.fas.fa-angle-right
+            .indicador__container.indicador--left(v-if="mostrarIndicador && index === 0")
+              .indicador--click.indicador--sm
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import ScrollHorizontal from './ScrollHorizontal'
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'SlyderE',
+  components: { ScrollHorizontal },
+  mixins: [componentSlotMixins],
+  props: {
+    indicadores: {
+      type: String,
+      default: 'izquierda',
+      validator: value =>
+        ['izquierda', 'centro', 'derecha'].indexOf(value) !== -1,
+    },
+  },
+  data: () => ({
+    mostrarIndicador: true,
+    secuencial: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/SlyderF.vue

@@ -0,0 +1,141 @@
+<template lang="pug">
+
+  .slyder-f
+    .slyder-f__btn.pe-3(
+      @click="clickAnterior"
+      :class="{ 'is-disabled': isFirst }"
+    )
+      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"
+      :class="{ 'is-disabled': isLast }"
+    )
+      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: 'SlyderF',
+  components: { ScrollHorizontal },
+  mixins: [componentSlotMixins, slyderMixins],
+  props: {
+    columnas: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isFirst() {
+      if (!this.elements.length) return true
+      return this.selected === this.elements[0].id
+    },
+    isLast() {
+      if (!this.elements.length) return true
+      //const visibleCount = this.getVisibleCardsCount()
+      const visibles = this.getVisibleSlides()
+      console.log('visibles', visibles)
+
+      const ids = this.elements.map(e => e.id)
+      const idx = ids.indexOf(this.selected)
+      return idx >= ids.length - visibles
+    },
+  },
+  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() {
+      if (this.isLast) return
+      const ids = this.elements.map(e => e.id)
+      const idx = ids.indexOf(this.selected)
+      if (idx < ids.length - 1) {
+        this.selected = ids[idx + 1]
+      }
+    },
+    getVisibleCardsCount() {
+      const width = window.innerWidth
+      // Simula Bootstrap: xl ≥ 1200px, lg ≥ 992px
+      if (width >= 1200) return 3 // col-xl-3
+      if (width >= 992) return 2 // col-lg-4
+      if (width >= 768) return 2 // supongamos col-md-6
+      return 1 // móviles
+    },
+    getVisibleSlides() {
+      const clases = this.columnas.split(' ')
+      let cols = 12 // valor por defecto
+
+      // Definir breakpoints de Bootstrap
+      const width = window.innerWidth
+      let claseActiva = null
+
+      // Buscar la clase más específica según el ancho
+      if (width >= 1200) {
+        claseActiva = clases.find(c => c.startsWith('col-xl-'))
+      }
+      if (!claseActiva && width >= 992) {
+        claseActiva = clases.find(c => c.startsWith('col-lg-'))
+      }
+      if (!claseActiva && width >= 768) {
+        claseActiva = clases.find(c => c.startsWith('col-md-'))
+      }
+      if (!claseActiva && width >= 576) {
+        claseActiva = clases.find(c => c.startsWith('col-sm-'))
+      }
+      if (!claseActiva) {
+        claseActiva = clases.find(
+          c => c.startsWith('col-') && !c.match(/col-(sm|md|lg|xl)-/),
+        )
+      }
+
+      // Extraer el número de columnas de la clase activa
+      if (claseActiva) {
+        const match = claseActiva.match(/col(?:-(?:sm|md|lg|xl))?-(\d+)/)
+        if (match) {
+          cols = parseInt(match[1])
+        }
+      }
+
+      // Calcular cuántos slides caben
+      return Math.floor(12 / cols)
+    },
+    mounted() {
+      if (this.elements.length && !this.selected) {
+        this.selected = this.elements[0].id
+      }
+      // Opcional: recalcular al cambiar el tamaño de pantalla
+      window.addEventListener('resize', this.$forceUpdate)
+    },
+  },
+}
+</script>
+
+<style lang="sass">
+.slyder-f__btn.is-disabled
+  opacity: 0.1
+  pointer-events: none
+</style>

package/plugin/components/TabsA.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+.tabs-a
+  .row
+    .col-lg-4.col-xl-3
+      .row
+        .col-sm-6.col-lg-12.mb-3(
+          v-for="(elm,index) of elements"
+          :key="'tabs-menu-'+elm.id"
+        )
+          button.tabs-a__tab(
+            :class="{'tabs-a__tab__selected': selected === elm.id}"
+            @click="selected = elm.id"
+            @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+          ) 
+            .tabs-a__tab__text(v-html="elm.titulo")
+            .indicador__container(v-if="mostrarIndicador && index === 1")
+              .indicador--click
+    
+    .col-lg-8.col-xl-9
+      .tabs-a__content-item(
+        v-for="elm of elements"
+        :key="'tabs-a-content-'+elm.id"
+        v-show="selected === elm.id"
+        :class="{'tabs-a__content-item--active' : selected === elm.id}"
+        v-child="elm.elm"
+      )
+
+  .hidden-slot
+    slot
+
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'TabsA',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/TabsB.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+.tabs-b
+  .tabs-b__header.row.m-0
+    .col-6.col-sm-4.col-lg.tabs-b__tab(
+      v-for="(elm,index) of elements"
+      :key="'tabs-b-menu-'+elm.id"
+      :class="{'tabs-b__tab--active' : selected === elm.id}"
+      @click="selected = elm.id"
+      @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+    )
+      .indicador__container(v-if="mostrarIndicador && index === 1")
+        .indicador--click
+      .tabs-b__tab__icon(v-if="elm.icono")
+        img(:src="elm.icono")
+      .tabs-b__tab__title
+        span(v-html="elm.titulo")
+
+  .tabs-b__content-item(
+    v-for="elm of elements"
+    :key="'tabs-content-'+elm.id"
+    v-show="selected === elm.id"
+    v-child="elm.elm"
+  )
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'TabsB',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/TabsC.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+.tabs-c
+  .tabs-c__header
+    .row.m-0
+      .col-sm-6.col-lg-4.col-xl.tabs-c__tab.py-3(
+        v-for="(elm,index) of elements"
+        :key="'tabs-c-menu-'+elm.id"
+        :class="{'tabs-c__tab--active' : selected === elm.id}"
+        @click="selected = elm.id"
+        role="button"
+        @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+      )
+        .indicador__container(v-if="mostrarIndicador && index === 1")
+          .indicador--click
+        span(v-html="elm.titulo")
+  .tabs-c__content-item(
+    v-for="elm of elements"
+    :key="'tabs-content-'+elm.id"
+    v-show="selected === elm.id"
+    v-child="elm.elm"
+  )
+
+  .hidden-slot
+    slot
+
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'TabsC',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+}
+</script>
+
+<style lang="sass"></style>