@golstats/gsc-lineups-reports 1.0.9 → 1.1.1

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>