@golstats/gsc-top-player 1.0.0

package/src/components/comparative/computedProperties.js

@@ -0,0 +1,327 @@
+export default {
+  computed: {
+    sizeTabsFontMP() {
+      const width = this.elementSize.width
+      if (width <= 380) {
+        return '12px'
+      } else if (width <= 768) {
+        return '14px'
+      } else {
+        return '16px'
+      }
+    },
+    sizeTabsFontMS() {
+      const width = this.elementSize.width
+      if (width <= 600) {
+        return '12px'
+      } else if (width <= 768) {
+        return '13px'
+      } else {
+        return '14px'
+      }
+    },
+    sizeTabsMS() {
+      const width = this.elementSize.width
+      if (width <= 480) {
+        return '145px'
+      } else if (width <= 600) {
+        return '153px'
+      } else if (width <= 620) {
+        return '163px'
+      } else if (width <= 640) {
+        return '170px'
+      } else if (width <= 660) {
+        return '175px'
+      } else if (width <= 680) {
+        return '180px'
+      } else if (width <= 700) {
+        return '185px'
+      } else if (width <= 720) {
+        return '195px'
+      } else {
+        return '200px'
+      }
+    },
+    sizeTabsMP() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return '68px'
+      } else if (width <= 330) {
+        return '73px'
+      } else if (width <= 340) {
+        return '78px'
+      } else if (width <= 350) {
+        return '82px'
+      } else if (width <= 360) {
+        return '90px'
+      } else if (width <= 370) {
+        return '90px'
+      } else if (width <= 390) {
+        return '95px'
+      } else if (width <= 410) {
+        return '105px'
+      } else if (width <= 430) {
+        return '110px'
+      } else if (width <= 450) {
+        return '117px'
+      } else if (width <= 470) {
+        return '122px'
+      } else if (width <= 500) {
+        return '130px'
+      } else if (width <= 530) {
+        return '138px'
+      } else if (width <= 560) {
+        return '155px'
+      } else if (width <= 590) {
+        return '163px'
+      } else if (width <= 620) {
+        return '175px'
+      } else if (width <= 650) {
+        return '180px'
+      } else if (width <= 680) {
+        return '195px'
+      } else if (width <= 730) {
+        return '210px'
+      } else if (width <= 768) {
+        return '100px'
+      } else {
+        return '110px'
+      }
+    },
+    comextleyemdmultipleleaguesClass() {
+      const width = this.elementSize.width
+      if (width <= 380) {
+        return this.$style.comtextleyemdmultipleleagues380
+      } else {
+        return this.$style.comtextleyemdmultipleleagues
+      }
+    },
+    comdropdownParentClass() {
+      const width = this.elementSize.width
+      if (width <= 730) {
+        return this.$style.comdropdownParent730
+      } else {
+        return this.$style.comdropdownParent
+      }
+    },
+    comdescubreVideosClass() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.comdescubreVideos960
+      } else if (width <= 1232) {
+        return this.$style.comdescubreVideos1232
+      } else {
+        return this.$style.comdescubreVideos
+      }
+    },
+    comquitarFiltrosClass() {
+      const width = this.elementSize.width
+      if (width <= 380) {
+        return this.$style.comquitarFiltros380
+      } else if (width <= 480) {
+        return this.$style.comquitarFiltros480
+      } else if (width <= 730) {
+        return this.$style.comquitarFiltros730
+      } else {
+        return this.$style.comquitarFiltros
+      }
+    },
+    commejoresJugadoresClass() {
+      const width = this.elementSize.width
+      if (width <= 480) {
+        return this.$style.commejoresJugadores480
+      } else if (width <= 730) {
+        return this.$style.commejoresJugadores730
+      } else {
+        return this.$style.commejoresJugadores
+      }
+    },
+    menuSectionClass() {
+      const width = this.elementSize.width
+      if (width <= 960) {
+        return this.$style.commenuSection960
+      } else {
+        return this.$style.commenuSection
+      }
+    },
+    topFiltersClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.comtopFilters420
+      } else if (width <= 460) {
+        return this.$style.comtopFilters460
+      } else if (width <= 1232) {
+        return this.$style.comtopFilters1232
+      } else {
+        return this.$style.comtopFilters
+      }
+    },
+    toniKroosWrapperClass() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return this.$style.comtoniKroosWrapper320
+      } else if (width <= 420) {
+        return this.$style.comtoniKroosWrapper420
+      } else if (width <= 916) {
+        return this.$style.comtoniKroosWrapper760
+      } else if (width <= 975) {
+        return this.$style.comtoniKroosWrapper975
+      } else if (width <= 1079) {
+        return this.$style.comtoniKroosWrapper1080
+      } else {
+        return this.$style.comtoniKroosWrapper
+      }
+    },
+    containerTablesClass() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return this.$style.comcontainerTables320
+      } else if (width <= 916) {
+        return this.$style.comcontainerTables760
+      } else if (width <= 1079) {
+        return this.$style.comcontainerTables960
+      } else {
+        return this.$style.comcontainerTables
+      }
+    },
+    containerTheBestClass() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return this.$style.comcontainerTheBest320
+      } else if (width <= 960) {
+        return this.$style.comcontainerTheBest960
+      } else if (width <= 1232) {
+        return this.$style.comcontainerTheBest1232
+      } else {
+        return this.$style.comcontainerTheBest
+      }
+    },
+    menuSectionHeaderClass() {
+      const width = this.elementSize.width
+      if (width <= 730) {
+        return this.$style.commenuSectionHeader730
+      } else if (width <= 960) {
+        return this.$style.commenuSectionHeader960
+      } else if (width <= 1232) {
+        return this.$style.commenuSectionHeader1232
+      } else {
+        return this.$style.commenuSectionHeader
+      }
+    },
+    losMejoresClass() {
+      const width = this.elementSize.width
+      if (width <= 380) {
+        return this.$style.comlosMejores380
+      } else if (width <= 530) {
+        return this.$style.comlosMejores530
+      } else if (width <= 730) {
+        return this.$style.comlosMejores730
+      } else {
+        return this.$style.comlosMejores
+      }
+    },
+    dropdownClass() {
+      const width = this.elementSize.width
+      if (width <= 730) {
+        return this.$style.comdropdown730
+      } else {
+        return this.$style.comdropdown
+      }
+    },
+    dropdown1Class() {
+      const width = this.elementSize.width
+      if (width <= 730) {
+        return this.$style.comdropdown1730
+      } else {
+        return this.$style.comdropdown1
+      }
+    },
+
+    menuSectionParentHeaderClass() {
+      const width = this.elementSize.width
+      if (width <= 430) {
+        return this.$style.commenuSectionParentHeader430
+      } else if (width <= 730) {
+        return this.$style.commenuSectionParentHeader730
+      } else if (width <= 960) {
+        return this.$style.commenuSectionParentHeader960
+      } else if (width <= 1232) {
+        return this.$style.commenuSectionParentHeader1232
+      } else {
+        return this.$style.commenuSectionParentHeader
+      }
+    },
+    templateLosMejoresClass() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return this.$style.comtemplateLosMejores1320
+      } else if (width <= 350) {
+        return this.$style.comtemplateLosMejores1350
+      } else if (width <= 420) {
+        return this.$style.comtemplateLosMejores1420
+      } else if (width <= 540) {
+        return this.$style.comtemplateLosMejores1540
+      } else if (width <= 960) {
+        return this.$style.comtemplateLosMejores1960
+      } else if (width <= 1232) {
+        return this.$style.comtemplateLosMejores11232
+      } else {
+        return this.$style.comtemplateLosMejores1
+      }
+    },
+    containerMenuClass() {
+      const width = this.elementSize.width
+      if (width <= 760) {
+        return this.$style.comcontainerMenu760
+      } else {
+        return this.$style.comcontainerMenu
+      }
+    },
+    titleSectionClass() {
+      const width = this.elementSize.width
+      if (width <= 540) {
+        return this.$style.comtitleSection540
+      } else {
+        return this.$style.comtitleSection
+      }
+    },
+    containerSectionClass() {
+      const width = this.elementSize.width
+      if (width <= 319) {
+        return this.$style.comcontainerSection320
+      } else if (width <= 350) {
+        return this.$style.comcontainerSection350
+      } else if (width <= 960) {
+        return this.$style.comcontainerSection960
+      } else if (width <= 1232) {
+        return this.$style.comcontainerSection1232
+      } else {
+        return this.$style.comcontainerSection
+      }
+    },
+    filtersContainerClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.comfiltersContainer420
+      } else if (width <= 760) {
+        return this.$style.comfiltersContainer760
+      } else if (width <= 1232) {
+        return this.$style.comfiltersContainer1232
+      } else {
+        return this.$style.comfiltersContainer
+      }
+    },
+    topFiltersParentClass() {
+      const width = this.elementSize.width
+      if (width <= 420) {
+        return this.$style.comtopFiltersParent420
+      } else if (width <= 460) {
+        return this.$style.comtopFiltersParent460
+      } else if (width <= 1232) {
+        return this.$style.comtopFiltersParent1232
+      } else {
+        return this.$style.comtopFiltersParent
+      }
+    }
+  }
+}

package/src/components/comparative/filtersTypes.js

@@ -0,0 +1,117 @@
+export const playsTypes = [
+  {
+    id: 1,
+    name: 'Goles',
+    isSelected: false
+  },
+  {
+    id: 2,
+    name: 'Pases acertados',
+    isSelected: false
+  },
+  {
+    id: 3,
+    name: 'Balones recuperados en disputa',
+    isSelected: false
+  },
+  {
+    id: 4,
+    name: 'Asistencias',
+    isSelected: false
+  },
+  {
+    id: 5,
+    name: 'Participaciones en gol',
+    isSelected: false
+  },
+  {
+    id: 6,
+    name: 'Tiros a gol',
+    isSelected: false
+  },
+  {
+    id: 7,
+    name: 'Tiros a gol que llegaron a la portería',
+    isSelected: false
+  },
+  {
+    id: 8,
+    name: 'Cabeceos en área rival',
+    isSelected: false
+  },
+  {
+    id: 9,
+    name: 'Cabeceos en área propia',
+    isSelected: false
+  },
+  {
+    id: 10,
+    name: 'Centros',
+    isSelected: false
+  },
+  {
+    id: 11,
+    name: 'Centros acertados',
+    isSelected: false
+  },
+  {
+    id: 12,
+    name: '1vs1 exitosos ofensivos',
+    isSelected: false
+  },
+  {
+    id: 13,
+    name: '1vs1 exitosos ofensivos que terminaron en gol',
+    isSelected: false
+  },
+  {
+    id: 14,
+    name: '1vs1 defensivos exitoso',
+    isSelected: false
+  },
+  {
+    id: 15,
+    name: 'Rechaces',
+    isSelected: false
+  },
+  {
+    id: 16,
+    name: 'Balones ganados en área propia',
+    isSelected: false
+  },
+  {
+    id: 17,
+    name: 'Balones ganados en área rival',
+    isSelected: false
+  },
+  {
+    id: 18,
+    name: 'Faltas cometidas',
+    isSelected: false
+  },
+  {
+    id: 19,
+    name: 'Faltas recibidas',
+    isSelected: false
+  },
+  {
+    id: 20,
+    name: 'Tarjetas amarillas',
+    isSelected: false
+  },
+  {
+    id: 21,
+    name: 'Tarjetas rojas',
+    isSelected: false
+  },
+  {
+    id: 22,
+    name: 'Atajadas',
+    isSelected: false
+  },
+  {
+    id: 23,
+    name: 'Tiros de Esquina',
+    isSelected: false
+  }
+]

package/src/components/comparative/gsc-button.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div
+      v-if="type == 0"
+      :class="['button', status && typeOnOff && 'button-active']"
+      :style="[customStyle, status && typeOnOff && customActive]"
+      @click="btnClick"
+    >
+      <img
+        :class="mini ? 'icon-txt' : 'icon'"
+        :style="{ width: iconSize }"
+        :src="icon"
+        v-if="icon && iconPosition.toLowerCase() === 'left'"
+      />
+      <div class="text" v-if="textValue">{{ textValue }}</div>
+      <img
+        class="icon"
+        :style="{ width: iconSize }"
+        :src="icon"
+        v-if="icon && iconPosition.toLowerCase() === 'right'"
+      />
+    </div>
+    <div v-if="type == 1" class="button-target" @click="btnClick">
+      <div class="stats">
+        <img class="iconstats" src="https://golstatsimages.blob.core.windows.net/todoelfut/playdes.png" />
+        <div class="numstats">{{ textStat }}</div>
+      </div>
+      <div class="leyend">{{ textCategory }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: { type: Number, default: 0 },
+    value: { type: Boolean, default: false },
+    textValue: String,
+    icon: {
+      type: String,
+      default: 'https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png'
+    },
+    iconPosition: { type: String, default: 'left' },
+    iconSize: String,
+    mini: { type: Boolean, default: false },
+    fontColor: { type: String, default: '#FFFFFF' },
+    textDecoration: String,
+    fontSize: { type: String, default: '16px' },
+    fontSizeStat: { type: String, default: '16px' },
+    fontStyle: String,
+    fontFamily: { type: String, default: 'Poppins-Regular' },
+    height: { type: String, default: 'fit-content' },
+    width: { type: String, default: 'fit-content' },
+    buttonMaxWidth: { type: String, default: 'auto' },
+    borderRadius: { type: String, default: '0px' },
+    borderType: { type: String, default: 'solid' },
+    borderWidth: { type: Number, default: 0 },
+    borderWidthBtn: { type: String, default: '2px' },
+    borderColor: String,
+    backgroundColor: { type: String, default: 'none' },
+    activeBackgroundColor: { type: String, default: '#000000' },
+    activeBorderWidth: { type: Number, default: 2 },
+    activeBorderType: { type: String, default: 'solid' },
+    activeBorderColor: { type: String, default: '#cbee6b' },
+    activeColorText: { type: String, default: '#FFFFFF' },
+    cursorType: { type: String, default: 'default' },
+    typeOnOff: { type: Boolean, default: false },
+    textCategory: String,
+    textStat: String,
+    marginLeftStat: { type: String, default: '15%' }
+  },
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(newValue) {
+        this.status = newValue
+      }
+    }
+  },
+  data() {
+    return { status: false }
+  },
+  computed: {
+    customStyle() {
+      return {
+        height: this.height,
+        width: this.width,
+        maxWidth: this.buttonMaxWidth,
+        backgroundColor: this.backgroundColor,
+        borderRadius: this.borderRadius,
+        border: `${this.borderType} ${this.borderWidth}px ${this.borderColor}`,
+        color: this.fontColor,
+        textDecoration: this.textDecoration,
+        cursor: this.cursorType,
+        fontSize: this.fontSize,
+        fontStyle: this.fontStyle,
+        fontFamily: `${this.fontFamily} !important`
+      }
+    },
+    customActive() {
+      return {
+        backgroundColor: this.activeBackgroundColor,
+        color: this.activeColorText,
+        border: `${this.activeBorderType} ${this.activeBorderWidth}px ${this.activeBorderColor}`
+      }
+    }
+  },
+  methods: {
+    btnClick(id) {
+      this.$emit('click', id)
+      if (this.typeOnOff) {
+        this.status = !this.status
+        this.$emit('status', this.status)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button,
+.button-active {
+  display: inline-flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  overflow: none;
+  cursor: pointer !important;
+  padding: 0 6px;
+}
+.button:hover {
+  cursor: pointer !important;
+  opacity: 0.8;
+}
+.button-target {
+  display: inline-block;
+  overflow: hidden;
+  height: v-bind(height);
+  border-width: v-bind(borderWidthBtn) !important;
+  border-style: v-bind(borderType) !important;
+  border-color: v-bind(borderColor) !important;
+  border-radius: v-bind(borderRadius) !important;
+  width: v-bind(width);
+  background-color: v-bind(backgroundColor);
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  overflow: none;
+  cursor: pointer !important;
+  cursor: v-bind(cursorType) !important;
+  font-size: v-bind(fontSize) !important;
+  font-style: v-bind(fontStyle) !important;
+  font-family: v-bind(fontFamily) !important;
+}
+.stats {
+  display: inline-flex;
+  width: 100%;
+  padding-top: 5px;
+  justify-content: left;
+  align-items: center;
+  align-content: center;
+  height: 60%;
+}
+.iconstats {
+  width: 14px;
+  height: 14px;
+  margin-left: v-bind(marginLeftStat); /* dinamico */
+}
+.numstats {
+  font-family: 'Poppins-SemiBold';
+  color: #ffffff;
+  font-size: v-bind(fontSizeStat);
+  margin-left: 7px;
+}
+.leyend {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  font-family: 'Poppins-Regular';
+  color: #a0a3a5;
+  width: 100%;
+  height: 15%;
+}
+.icon {
+  margin-left: 0px;
+}
+.icon-txt {
+  margin-left: 2px;
+}
+.text {
+  font-size: 10px;
+  padding: 4px;
+  max-width: 98%;
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  font-size: v-bind(fontSize) !important;
+  font-style: v-bind(fontStyle) !important;
+  font-family: v-bind(fontFamily) !important;
+}
+.text-mini {
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+}
+</style>