@golstats/gsc-lineups-reports 1.0.1

package/src/components/Lineup2D/LineupFilter.vue

@@ -0,0 +1,286 @@
+<template>
+    <div class="filter-modal" :style="{ zIndex }">
+        <div class="filter-modal__input" @click="openSelect">
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="vuesax/outline/sort">
+                <g id="sort">
+                <path id="Vector" opacity="0.7" d="M15.75 5.8125H2.25C1.9425 5.8125 1.6875 5.5575 1.6875 5.25C1.6875 4.9425 1.9425 4.6875 2.25 4.6875H15.75C16.0575 4.6875 16.3125 4.9425 16.3125 5.25C16.3125 5.5575 16.0575 5.8125 15.75 5.8125Z" fill="white"/>
+                <path id="Vector_2" opacity="0.7" d="M13.5 9.5625H4.5C4.1925 9.5625 3.9375 9.3075 3.9375 9C3.9375 8.6925 4.1925 8.4375 4.5 8.4375H13.5C13.8075 8.4375 14.0625 8.6925 14.0625 9C14.0625 9.3075 13.8075 9.5625 13.5 9.5625Z" fill="white"/>
+                <path id="Vector_3" opacity="0.7" d="M10.5 13.3125H7.5C7.1925 13.3125 6.9375 13.0575 6.9375 12.75C6.9375 12.4425 7.1925 12.1875 7.5 12.1875H10.5C10.8075 12.1875 11.0625 12.4425 11.0625 12.75C11.0625 13.0575 10.8075 13.3125 10.5 13.3125Z" fill="white"/>
+                </g>
+                </g>
+            </svg>
+            <input class="filter-modal__filter-text" type="text" :value="name" readonly>
+            <svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4 2.62045L6.86193 0.167368C7.12228 -0.0557892 7.54439 -0.0557892 7.80474 0.167368C8.06509 0.390524 8.06509 0.752333 7.80474 0.97549L4.4714 3.83263C4.21105 4.05579 3.78895 4.05579 3.5286 3.83263L0.195262 0.97549C-0.0650874 0.752333 -0.0650874 0.390524 0.195262 0.167368C0.455612 -0.0557892 0.877722 -0.0557892 1.13807 0.167368L4 2.62045Z" fill="#92929D"/>
+            </svg>
+        </div>
+        <div class="filter-modal__content" tabindex="0" ref="filterElement" @focusout="isOpen = false; goBack()" :class="isOpen ? 'open' : 'close'">
+            <div class="filter-modal__padding">
+                <div class="filter-modal__content-header">
+                    <h3>Jugando como:</h3>
+                    <CheckBox v-model="selectedAllTeams" label="Todos" @update:model-value="(value)=> ( value && (selectedFilterTeam = ['local', 'visit']))"  />
+                </div>
+                <ul class="filter-modal__content-options">
+                    <li v-for="item in teamOtp" @click="onSelect(item.id, 'team')" :class="{ active: selectedFilterTeam.includes(item.id)}" >{{ item.name }}</li>
+                </ul>
+                <div class="filter-modal__content-header">
+                    <h3>Resultados:</h3>
+                    <CheckBox v-model="selectedAllResults" label="Todos" @update:model-value="(value)=> ( value && (selectedFilterResults = ['win','lose','draw']))" />
+                </div>
+                <ul class="filter-modal__content-options">
+                    <li v-for="item in resultOtp" @click="onSelect(item.id, 'player')" :class="{ active: selectedFilterResults.includes(item.id)}" >{{ item.name }}</li>
+                </ul>
+            </div>
+            <hr style="border-color: #FFFFFF33;">
+            <div class="filter-modal__buttons">
+                <div class="button filter-modal__text-btn" @click="removeFilter">Quitar filtros</div>
+                <div class="button filter-modal__outline-btn" @click="emitChanges">Listo</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import CheckBox from '@/components/Lineup2D/CheckBox.vue'
+const props =  defineProps({
+        name: {
+            type: String,
+            default: '',
+        },
+        reset: {
+            type: Boolean,
+            default: false,
+        },
+        zIndex: {
+            type: Number,
+            default: 1
+        },
+        componentWidth: {
+            type: Number,
+            default: 768,
+            validator(value) {
+            return value > 0
+            }
+        },
+    })
+    const teamOtp = [{ id: "local", name: 'Local' }, { id: "visit", name: 'Visitante'}]
+    const resultOtp = [{ id: "win", name: 'Ganado' }, { id: "draw", name: 'Empatados' }, { id: "lose", name: 'Perdidos' }]
+
+    const isOpen = ref(false)
+    
+    const filterElement = ref(null)
+    const emit = defineEmits(['update:model-value', 'change'])
+    const backUpFilterTeam = ref(["local", "visit"])
+    const backUpFilterResults = ref(["win","draw", "lose" ])
+    const backUpAllTeams = ref(true)
+    const backUpAllResults = ref(true)
+    const selectedAllTeams = ref(true)
+    const selectedAllResults = ref(true)
+    const selectedFilterTeam = ref(["local", "visit"])
+    const selectedFilterResults = ref(["win","draw", "lose" ])
+
+    const openSelect = () => {
+        isOpen.value = !isOpen.value
+        filterElement.value.focus()
+        backUpFilterTeam.value = JSON.parse(JSON.stringify(selectedFilterTeam.value))
+        backUpFilterResults.value = JSON.parse(JSON.stringify(selectedFilterResults.value))
+        backUpAllTeams.value = selectedAllTeams.value
+        backUpAllResults.value = selectedAllResults.value
+    }
+
+    watch(() => props.itemSelect, (newValue) => {
+        if (newValue) {
+            selectedFilterTeam.value = newValue.selectedFilterTeam
+            selectedFilterResults.value = newValue.selectedFilterResults
+        }
+        })
+
+    watch(() => props.reset, (newValue) => {
+            if (newValue) {
+                removeFilter();
+            }
+        })    
+
+        const onSelect = (filter, type) => {
+            let filterArr
+            if(type === "team") {
+                filterArr = selectedFilterTeam.value
+            } else {
+                filterArr = selectedFilterResults.value
+            }
+            const foundInd = filterArr.findIndex(item => item === filter)
+            if(foundInd == -1) {
+                filterArr.push(filter)
+            } else {
+                if(type == 'team' && selectedFilterTeam.value.length > 1){
+                    filterArr.splice(foundInd,1)
+                }else{
+                    if(type == 'team'){
+                        filterArr.push(filter);
+                    }
+                    if(selectedFilterResults.value.length  > 1){
+                        filterArr.splice(foundInd,1)
+                    }
+                }
+            }
+            selectedAllTeams.value = selectedFilterTeam.value.length == 2 ? true : false
+            selectedAllResults.value = selectedFilterResults.value.length == 3 ? true : false
+    }
+
+    const removeFilter = ()=> {
+        selectedFilterTeam.value = ["local", "visit"]
+        selectedFilterResults.value = ["win","draw", "lose" ]
+        selectedAllTeams.value = true
+        selectedAllResults.value = true
+        emit('change', { selectedFilterTeam: selectedFilterTeam.value, selectedFilterResults: selectedFilterResults.value  })
+    }
+    const emitChanges = () => {
+        emit('change', { selectedFilterTeam: selectedFilterTeam.value, selectedFilterResults: selectedFilterResults.value  })
+        isOpen.value = !isOpen.value
+    }
+    const goBack = () => {
+        emit('change', { selectedFilterTeam: selectedFilterTeam.value, selectedFilterResults: selectedFilterResults.value  })
+    }
+</script>
+<style lang="scss" scoped>
+
+
+.filter-modal {
+    max-width: 103px;
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: #25333E;
+    position: relative;
+    height: 28px;
+    cursor: pointer;
+    @media only screen and (max-width : 500px) {
+        width: 55px;
+    }
+    &__filter-text {
+        @media only screen and (max-width : 500px) {
+            display: none;
+        }
+    }
+    &__input {
+        display: flex;
+        align-items: center;
+        padding: 0 8px 0 12px;
+        font-size: 14px;
+        height: 23px;
+        @media only screen and (max-width : 500px) {
+            justify-content: space-between;
+        }
+    }
+    input {
+        padding: 8px;
+        cursor: pointer;
+        width: 100%;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: #FFF;
+        font-family: Poppins-Regular, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;    
+    }
+    &__content {
+        position: absolute;
+        top: calc(100% + 15px);
+        left: 0;
+        font-size: 12px;
+        min-width: 100%;
+        padding: 0;
+        border-radius: 12px;
+        background: #2E3B46;
+        width: 305px;
+        font-family: Poppins, sans-serif;
+        color: #FFF;
+        overflow: hidden;
+        // overflow-y: auto;
+        &.close {
+            max-height: 0;
+        }
+        &.open {
+            max-height: 600px;
+            // max-height: 400px;
+        }
+    }
+    &__padding {
+        padding: 20px 16.5px;
+    }
+    &__content-header {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 17px;
+        h3 {
+            margin: 0;
+            color: #FFF;
+            font-family: Poppins, sans-serif;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 150%; /* 21px */
+        }
+    }
+    &__content-options {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        margin-bottom: 27px;
+        li:first-child {
+            border-radius: 4px 0 0 4px;
+        }
+        li:last-child {
+            border-radius: 0 4px 4px 0;
+        }
+        li.active {
+            border-color: #CBEE6B;
+        }
+        li {
+        border: 0.8px solid #8EA2AB;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            flex: 1 1 0%;
+        }
+    }
+    &__buttons {
+        height: 60px;
+        border-radius: 0 0 12px 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .button {
+        outline: none;
+        background: transparent;
+        color: #FFF;
+        text-align: center;
+        font-family: Poppins, sans-serif;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 120%; /* 14.4px */
+        letter-spacing: -0.36px;
+        cursor: pointer;
+    }
+    &__text-btn {
+        border: none;
+        color: rgba(255, 255, 255, 0.75);
+        margin-right: 16px;
+        text-decoration-line: underline;
+    }
+    &__outline-btn {
+        color: #FFF;
+        border-radius: 64px;
+        border: 0.8px solid #CBEE6B;
+        padding: 6px 24px;
+    }
+}
+</style>

package/src/components/Lineup2D/LineupMainHeader.vue

@@ -0,0 +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;
+    }
+}
+
+</style>

package/src/components/Lineup2D/LineupRecentItem.vue

@@ -0,0 +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;
+    }
+}
+</style>

package/src/components/Lineup2D/MatchDetails.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="match-details">
+        <ul class="match-details__list">
+            <li v-for="detail in localDetails">
+                <Icons class="icon" :icon="detail.icon" />
+                <span>{{ detail.description }}</span>
+            </li>
+        </ul>
+        <ul class="match-details__list right">
+            <li v-for="detail in foreignDetails">
+                <span>{{ detail.description }}</span>
+                <Icons class="icon" :icon="detail.icon" />
+            </li>
+        </ul>
+    </div>
+</template>
+<script setup>
+import Icons from '@/components/Lineup2D/Icons.vue'
+defineProps({
+    localDetails: {
+        type: Array,
+        default: () => []
+    },
+    foreignDetails: {
+        type: Array,
+        default: () => []
+    }
+})
+</script>
+<style lang="scss" scoped>
+.match-details {
+    max-width: 195px;
+    widows: 100%;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+   &__list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li {
+            color: rgba(255, 255, 255, 0.70);
+            font-family: Poppins, sans-serif;
+            font-size: 9px;
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            text-align: right;
+            line-height: 19.5px; /* 216.667% */
+            letter-spacing: -0.09px;
+            text-transform: capitalize;
+        }
+   }
+   .icon {
+        margin-right: 9px;
+        width: 9px;
+   }
+   &__list.right li {
+        text-align: left;
+        justify-content: flex-end;
+   }
+   &__list.right .icon {
+        margin-right: unset;
+        margin-left: 9px;
+   }
+}
+</style>