@golstats/gsc-lineups-reports 1.0.9 → 1.1.0

package/src/components/gsc-filter.vue

@@ -1,287 +1,287 @@
-<template>
-    <div class="filter-modal" :style="{ zIndex }">
-        <div v-if="showButton" 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 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: '',
-        },
-        zIndex: {
-            type: Number,
-            default: 1
-        },
-        showButton: {
-            type: Boolean,
-            default: false
-        },
-        marginModal: {
-            type: String,
-            default: '0px'
-        },
-        isOpen: {
-            type: Boolean,
-            default: false
-        },
-        reset: {
-            type: Boolean,
-            default: false,
-        },
-        itemSelect: {
-            type: Object,
-            default: () =>  {}
-        },
-        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 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 = () => {
-        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 == 2){
-                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  })
-        
-    }
-    const goBack = () => {
-        
-        emit('change', { selectedFilterTeam: selectedFilterTeam.value, selectedFilterResults: selectedFilterResults.value  })
-    }
-</script>
-<style lang="scss" scoped>
-.filter-modal {
-    width: auto;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
-    background: #25333E;
-    position: relative;
-    height: min-content;
-    cursor: pointer;
-    &__input {
-        display: flex;
-        align-items: center;
-        padding: 0 8px 0 12px;
-    }
-    input {
-        padding: 8px;
-        cursor: pointer;
-        width: 100%;
-        border: none;
-        background: transparent;
-        outline: none;
-        color: #FFF;
-        font-family: Poppins, sans-serif;
-        font-size: .875rem;
-        font-weight: 400;
-        line-height: 1.5rem;    
-    }
-    &__content {
-        position: absolute;
-        top: calc(100% + 30px);
-        left: v-bind(marginModal) !important;
-        font-size: 12px;
-        min-width: 100%;
-        z-index: 10;
-        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;
-    }
-}
+<template>
+    <div class="filter-modal" :style="{ zIndex }">
+        <div v-if="showButton" 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 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: '',
+        },
+        zIndex: {
+            type: Number,
+            default: 1
+        },
+        showButton: {
+            type: Boolean,
+            default: false
+        },
+        marginModal: {
+            type: String,
+            default: '0px'
+        },
+        isOpen: {
+            type: Boolean,
+            default: false
+        },
+        reset: {
+            type: Boolean,
+            default: false,
+        },
+        itemSelect: {
+            type: Object,
+            default: () =>  {}
+        },
+        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 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 = () => {
+        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 == 2){
+                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  })
+        
+    }
+    const goBack = () => {
+        
+        emit('change', { selectedFilterTeam: selectedFilterTeam.value, selectedFilterResults: selectedFilterResults.value  })
+    }
+</script>
+<style lang="scss" scoped>
+.filter-modal {
+    width: auto;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: #25333E;
+    position: relative;
+    height: min-content;
+    cursor: pointer;
+    &__input {
+        display: flex;
+        align-items: center;
+        padding: 0 8px 0 12px;
+    }
+    input {
+        padding: 8px;
+        cursor: pointer;
+        width: 100%;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: #FFF;
+        font-family: Poppins, sans-serif;
+        font-size: .875rem;
+        font-weight: 400;
+        line-height: 1.5rem;    
+    }
+    &__content {
+        position: absolute;
+        top: calc(100% + 30px);
+        left: v-bind(marginModal) !important;
+        font-size: 12px;
+        min-width: 100%;
+        z-index: 10;
+        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>