@golstats/gsc-lineups-reports 1.0.9 → 1.1.0

package/src/components/Lineup2D/LineupMainHeader.vue

@@ -1,223 +1,223 @@
-<template>
-    <div class="main-header" :class="mainHeaderClass(type)" >
-        <div class="team" :class="{ disabled: !isLocalSelected &&  type === 'Recientes' }">
-            <div class="team__img-container" :style="teamSelected != localTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">
-                <img :src="localTeam.img" v-if="localTeam.acronym != '-'">
-            </div>
-            <div class="team__acronym" :style="teamSelected != localTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'" v-if="localTeam.acronym != '-'">{{ localTeam.acronym }}</div>
-            <div v-if="type === 'Probables'" class="team_rival">
-                <div class="team__vs">vs</div>
-                <img v-if="probablyTeamHome.img!= '-'" :src="probablyTeamHome.img" class="img-post--left">
-                <div v-if="probablyTeamHome.acronym != '-'" class="team__acronym--gray team__acronym--gray--left">{{ probablyTeamHome.acronym }}</div>
-            </div>
-        </div>
-        <div v-if="['Historicos', 'Postmatch'].includes(type)" class="main-header__score">
-            {{ score }}
-        </div>
-        <div v-else-if="type === 'Recientes'" class="main-header__switch">
-            <GSCSwitchRadio width="43px" height="20px" heightCircle="17px" widthCircle="17px" circle-color-switch="#cbee6b" :text-option-left="localTeam.acronym" @change="changeSwitchRadio" :text-option-right="visitTeam.acronym" font-color="white" :value-default="teamSelect" :hidden-labels="true" />
-        </div>
-        <div class="team">
-            <div v-if="type === 'Probables'" class="team_rival">
-                <div class="team__acronym--gray team__acronym--gray--right" v-if="probablyTeamAway.acronym != '-'">{{ probablyTeamAway.acronym }}</div>
-                    <img v-if="probablyTeamAway.img != '-'" :src="probablyTeamAway.img" class="img-post">
-                <div class="team__vs">vs</div>
-            </div>
-            <div class="team__acronym" :style="teamSelected != visitTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">{{ visitTeam.acronym }}</div>
-            <div class="team__img-container left" :style="teamSelected != visitTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">
-                <img v-if="visitTeam.img != '-'" :src="visitTeam.img">
-            </div>
-        </div>
-    </div>
-
-</template>
-<script setup>
-import { GSCSwitchRadio } from '@golstats/gsc-switch-radio'
-import { ref } from 'vue'
-import '@@/@golstats/gsc-switch-radio/dist/style.css'
-
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'Historicos'
-    },
-    score: {
-        type: String,
-        default: '2 - 3'
-    },
-    //{ acronym: '', img: ''}
-    localTeam: {
-        type: Object,
-        default: () => ({})
-    },
-    visitTeam: {
-        type: Object,
-        default: () => ({})
-    },
-    probablyTeamHome: {
-        type: Object,
-        default: () => ({})
-    },
-    probablyTeamAway: {
-        type: Object,
-        default: () => ({})
-    }  
-})
-const emit = defineEmits(['change'])
-const changeSwitchRadio = (val) => {
-        if(typeof val === 'string') teamSelected.value = val
-        emit('change', val)
-    }
-const isLocalSelected= ref(true)
-let teamSelected = ref(props.localTeam.acronym)
-</script>
-<script >
-export default {
-    methods: {
-        mainHeaderClass: function(type) {
-            let clase = ''
-            if (type === 'Recientes')  clase = 'main-header-recientes'
-            if (type === 'Probables')  clase = 'main-header-probables'
-            return clase
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.team_rival {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0px;
-    visibility: visible;
-    width: auto;
-    @media screen and (max-width: 500px) {
-        visibility: hidden;
-        width: 0;
-    }
-}
-.main-header-recientes {
-    padding-bottom: 16px;
-    border-bottom: 1px solid #3D3D49;
-}
-
-.main-header-probables {
-    @media screen and (max-width: 724px) {
-        justify-content: center;
-    }
-}
-.main-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    .team {
-        display: flex;
-        align-items: center;
-        &__img-container {
-            height: 42px;
-            width: 42px;
-            border-radius: 50%;
-            border: 0.873px solid #0033C5;
-            box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 25%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 10px 0 0;
-            position: relative;
-            &.left {
-                margin: 0 0 0 10px;
-                border: 0.873px solid #CBEE6B;
-            }
-            img {
-                width: 28px;
-                height: 28px;
-                z-index: 1;
-            }
-            &::after {
-                content: " ";
-                height: 80%;
-                width: 80%;
-                position: absolute;
-                border-radius: 109.091px;
-                background: #172531;
-            }
-        }
-        &__acronym {
-            color: #F4F4F4;
-            font-family: Poppins,sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 220.495%;
-            letter-spacing: 0.309px;
-            &--gray {
-                color: rgba(255, 255, 255, 0.70);
-                margin-left: 2px;
-                @media screen and (max-width: 724px) {
-                    font-size: 10px;
-                    &--left {
-                        margin-right: 13px;
-                    }
-                    &--right {
-                        margin-left: 13px;
-                    }
-                }
-            }
-            @media screen and (max-width: 724px) {
-/*                font-size: 10px; */
-            }
-
-        }
-        &__vs {
-            color: rgba(255, 255, 255, 0.70);
-            font-family: Poppins,sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 20.065px; /* 143.322% */
-            letter-spacing: -0.14px;
-            margin: 0 5px 0 10px;
-            @media screen and (max-width: 724px) {
-                font-size: 10px;
-            }
-        }
-        &.disabled {
-            opacity: 0.7;
-        }
-        .img-post {
-            width: 30px;
-            margin-left: 5px;
-        }
-        .img-post--left {
-            width: 30px;
-            margin-right: 5px;
-        }
-    }
-
-    &__score {
-        display: flex;
-        width: 71px;
-        height: 31px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 17px;
-        background-color: rgba(255, 255, 255, .1);
-        color: #FFF;
-        text-align: center;
-        font-family: Inter, sans-serif;
-        font-size: 15px;
-        font-weight: 600;
-        padding: 6.524074554443359px 17.397533416748047px;
-        gap: 5px;
-        text-wrap: nowrap;
-    }
-
-    &__switch {
-        display: flex;
-        width: 71px;
-        height: 31px;
-        justify-content: center;
-        align-items: center;
-    }
-}
-
+<template>
+    <div class="main-header" :class="mainHeaderClass(type)" >
+        <div class="team" :class="{ disabled: !isLocalSelected &&  type === 'Recientes' }">
+            <div class="team__img-container" :style="teamSelected != localTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">
+                <img :src="localTeam.img" v-if="localTeam.acronym != '-'">
+            </div>
+            <div class="team__acronym" :style="teamSelected != localTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'" v-if="localTeam.acronym != '-'">{{ localTeam.acronym }}</div>
+            <div v-if="type === 'Probables'" class="team_rival">
+                <div class="team__vs">vs</div>
+                <img v-if="probablyTeamHome.img!= '-'" :src="probablyTeamHome.img" class="img-post--left">
+                <div v-if="probablyTeamHome.acronym != '-'" class="team__acronym--gray team__acronym--gray--left">{{ probablyTeamHome.acronym }}</div>
+            </div>
+        </div>
+        <div v-if="['Historicos', 'Postmatch'].includes(type)" class="main-header__score">
+            {{ score }}
+        </div>
+        <div v-else-if="type === 'Recientes'" class="main-header__switch">
+            <GSCSwitchRadio width="43px" height="20px" heightCircle="17px" widthCircle="17px" circle-color-switch="#cbee6b" :text-option-left="localTeam.acronym" @change="changeSwitchRadio" :text-option-right="visitTeam.acronym" font-color="white" :value-default="teamSelect" :hidden-labels="true" />
+        </div>
+        <div class="team">
+            <div v-if="type === 'Probables'" class="team_rival">
+                <div class="team__acronym--gray team__acronym--gray--right" v-if="probablyTeamAway.acronym != '-'">{{ probablyTeamAway.acronym }}</div>
+                    <img v-if="probablyTeamAway.img != '-'" :src="probablyTeamAway.img" class="img-post">
+                <div class="team__vs">vs</div>
+            </div>
+            <div class="team__acronym" :style="teamSelected != visitTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">{{ visitTeam.acronym }}</div>
+            <div class="team__img-container left" :style="teamSelected != visitTeam.acronym && type==='Recientes' ? 'opacity: 0.5' : 'opacity: 1'">
+                <img v-if="visitTeam.img != '-'" :src="visitTeam.img">
+            </div>
+        </div>
+    </div>
+
+</template>
+<script setup>
+import { GSCSwitchRadio } from '@golstats/gsc-switch-radio'
+import { ref } from 'vue'
+import '@@/@golstats/gsc-switch-radio/dist/style.css'
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'Historicos'
+    },
+    score: {
+        type: String,
+        default: '2 - 3'
+    },
+    //{ acronym: '', img: ''}
+    localTeam: {
+        type: Object,
+        default: () => ({})
+    },
+    visitTeam: {
+        type: Object,
+        default: () => ({})
+    },
+    probablyTeamHome: {
+        type: Object,
+        default: () => ({})
+    },
+    probablyTeamAway: {
+        type: Object,
+        default: () => ({})
+    }  
+})
+const emit = defineEmits(['change'])
+const changeSwitchRadio = (val) => {
+        if(typeof val === 'string') teamSelected.value = val
+        emit('change', val)
+    }
+const isLocalSelected= ref(true)
+let teamSelected = ref(props.localTeam.acronym)
+</script>
+<script >
+export default {
+    methods: {
+        mainHeaderClass: function(type) {
+            let clase = ''
+            if (type === 'Recientes')  clase = 'main-header-recientes'
+            if (type === 'Probables')  clase = 'main-header-probables'
+            return clase
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.team_rival {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0px;
+    visibility: visible;
+    width: auto;
+    @media screen and (max-width: 500px) {
+        visibility: hidden;
+        width: 0;
+    }
+}
+.main-header-recientes {
+    padding-bottom: 16px;
+    border-bottom: 1px solid #3D3D49;
+}
+
+.main-header-probables {
+    @media screen and (max-width: 724px) {
+        justify-content: center;
+    }
+}
+.main-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .team {
+        display: flex;
+        align-items: center;
+        &__img-container {
+            height: 42px;
+            width: 42px;
+            border-radius: 50%;
+            border: 0.873px solid #0033C5;
+            box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 25%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 10px 0 0;
+            position: relative;
+            &.left {
+                margin: 0 0 0 10px;
+                border: 0.873px solid #CBEE6B;
+            }
+            img {
+                width: 28px;
+                height: 28px;
+                z-index: 1;
+            }
+            &::after {
+                content: " ";
+                height: 80%;
+                width: 80%;
+                position: absolute;
+                border-radius: 109.091px;
+                background: #172531;
+            }
+        }
+        &__acronym {
+            color: #F4F4F4;
+            font-family: Poppins,sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 220.495%;
+            letter-spacing: 0.309px;
+            &--gray {
+                color: rgba(255, 255, 255, 0.70);
+                margin-left: 2px;
+                @media screen and (max-width: 724px) {
+                    font-size: 10px;
+                    &--left {
+                        margin-right: 13px;
+                    }
+                    &--right {
+                        margin-left: 13px;
+                    }
+                }
+            }
+            @media screen and (max-width: 724px) {
+/*                font-size: 10px; */
+            }
+
+        }
+        &__vs {
+            color: rgba(255, 255, 255, 0.70);
+            font-family: Poppins,sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20.065px; /* 143.322% */
+            letter-spacing: -0.14px;
+            margin: 0 5px 0 10px;
+            @media screen and (max-width: 724px) {
+                font-size: 10px;
+            }
+        }
+        &.disabled {
+            opacity: 0.7;
+        }
+        .img-post {
+            width: 30px;
+            margin-left: 5px;
+        }
+        .img-post--left {
+            width: 30px;
+            margin-right: 5px;
+        }
+    }
+
+    &__score {
+        display: flex;
+        width: 71px;
+        height: 31px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 17px;
+        background-color: rgba(255, 255, 255, .1);
+        color: #FFF;
+        text-align: center;
+        font-family: Inter, sans-serif;
+        font-size: 15px;
+        font-weight: 600;
+        padding: 6.524074554443359px 17.397533416748047px;
+        gap: 5px;
+        text-wrap: nowrap;
+    }
+
+    &__switch {
+        display: flex;
+        width: 71px;
+        height: 31px;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
 </style>

package/src/components/Lineup2D/LineupRecentItem.vue

@@ -1,111 +1,111 @@
-<template>
-    <div class="recent-item">
-        <div class="recent-item__team-info">
-            <div class="recent-item__team">
-                <div class="recent-item__acronym">
-                    {{ game.home_team_abbreviation }}
-                </div>
-                <img :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+game.home_team+'.png'" class="left">
-            </div>
-            <div class="recent-item__score">
-                {{ game.score[0]}} - {{ game.score[4] }}
-            </div>
-            <div class="recent-item__team">
-                <img :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+game.away_team+'.png'">
-                <div class="recent-item__acronym">
-                    {{ game.away_team_abbreviation }}
-                </div>
-            </div>
-        </div>
-        <div class="recent-item__status">
-            <template v-if="game.home_team_abbreviation == teamSelect">
-                <template v-if="game.home_match_result == 1">Ganado</template>
-                <template v-if="game.home_match_result == 2">Perdido</template>
-                <template v-if="game.home_match_result == 3">Empatado</template>
-            </template>
-            <template v-if="game.away_team_abbreviation == teamSelect">
-                <template v-if="game.visiting_match_result  == 1">Ganado</template>
-                <template v-if="game.visiting_match_result  == 2">Perdido</template>
-                <template v-if="game.visiting_match_result  == 3">Empatado</template>
-            </template>
-        </div>
-    </div>
-</template>
-<script setup>
-defineProps({
-    score: {
-        type: String,
-        default: '2 - 3'
-    }, 
-    status: {
-        type: String,
-        default: 'Ganado'
-    },
-    game: {
-        type: Object,
-        default: () => ({})
-    },
-    teamSelect: {
-        type: String,
-        default: '1'
-    }
-})
-</script>
-<style lang="scss" scoped>
-.recent-item {
-    width: 200px;
-    max-width: 264px;
-    margin: auto;
-    &__team-info {
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
-    }
-    &__team {
-        display: flex;
-        align-items: center;
-    }
-    &__acronym {
-        color: rgba(255, 255, 255, 0.70);
-        font-family: Poppins, sans-serif;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20.065px; /* 143.322% */
-        letter-spacing: -0.14px;
-    }
-    &__score {
-        border-radius: 17.398px;
-        border: 0.5px solid #CBEE6B;
-        background: rgba(255, 255, 255, 0.10);
-        width: 70px;
-        height: 32px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #FFF;
-        text-align: center;
-        font-family: Inter, sans-serif;
-        font-size: 15.223px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-    }
-    img {
-        height: 29px;
-        width: 29px;
-        margin: 0 5px 0 0;
-    }
-    .left {
-        margin: 0 0 0 5px;
-    }
-    &__status {
-        margin: auto;
-        color: rgba(255, 255, 255, 0.70);
-        text-align: center;
-        font-family: Poppins, sans-serif;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-    }
-}
+<template>
+    <div class="recent-item">
+        <div class="recent-item__team-info">
+            <div class="recent-item__team">
+                <div class="recent-item__acronym">
+                    {{ game.home_team_abbreviation }}
+                </div>
+                <img :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+game.home_team+'.png'" class="left">
+            </div>
+            <div class="recent-item__score">
+                {{ game.score[0]}} - {{ game.score[4] }}
+            </div>
+            <div class="recent-item__team">
+                <img :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+game.away_team+'.png'">
+                <div class="recent-item__acronym">
+                    {{ game.away_team_abbreviation }}
+                </div>
+            </div>
+        </div>
+        <div class="recent-item__status">
+            <template v-if="game.home_team_abbreviation == teamSelect">
+                <template v-if="game.home_match_result == 1">Ganado</template>
+                <template v-if="game.home_match_result == 2">Perdido</template>
+                <template v-if="game.home_match_result == 3">Empatado</template>
+            </template>
+            <template v-if="game.away_team_abbreviation == teamSelect">
+                <template v-if="game.visiting_match_result  == 1">Ganado</template>
+                <template v-if="game.visiting_match_result  == 2">Perdido</template>
+                <template v-if="game.visiting_match_result  == 3">Empatado</template>
+            </template>
+        </div>
+    </div>
+</template>
+<script setup>
+defineProps({
+    score: {
+        type: String,
+        default: '2 - 3'
+    }, 
+    status: {
+        type: String,
+        default: 'Ganado'
+    },
+    game: {
+        type: Object,
+        default: () => ({})
+    },
+    teamSelect: {
+        type: String,
+        default: '1'
+    }
+})
+</script>
+<style lang="scss" scoped>
+.recent-item {
+    width: 200px;
+    max-width: 264px;
+    margin: auto;
+    &__team-info {
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+    }
+    &__team {
+        display: flex;
+        align-items: center;
+    }
+    &__acronym {
+        color: rgba(255, 255, 255, 0.70);
+        font-family: Poppins, sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20.065px; /* 143.322% */
+        letter-spacing: -0.14px;
+    }
+    &__score {
+        border-radius: 17.398px;
+        border: 0.5px solid #CBEE6B;
+        background: rgba(255, 255, 255, 0.10);
+        width: 70px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #FFF;
+        text-align: center;
+        font-family: Inter, sans-serif;
+        font-size: 15.223px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+    }
+    img {
+        height: 29px;
+        width: 29px;
+        margin: 0 5px 0 0;
+    }
+    .left {
+        margin: 0 0 0 5px;
+    }
+    &__status {
+        margin: auto;
+        color: rgba(255, 255, 255, 0.70);
+        text-align: center;
+        font-family: Poppins, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+    }
+}
 </style>