aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/ModsMenu.vue
blob: 9b62fcfaa28511ee86f29e09c7b5bf7638fe1100 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
    <nav class="fc_mods__menu">
        <el-menu
            default-active="1"
            text-color="#fff"
        >
            <h5>Mods</h5>
            <el-menu-item index="1" @click="$emit('showLocalMods', true)">
                <el-icon><Folder /></el-icon>
                <span>Local</span>
            </el-menu-item>
            <el-menu-item index="2" @click="$emit('showLocalMods', false)">
                <el-icon><Connection /></el-icon>
                <span>Online</span>
            </el-menu-item>

            <!-- Search inputs -->
            <h5>Filter</h5>
            <el-input v-model="$store.state.search.searchValue" placeholder="Search" clearable />
            <el-select
                v-if="!showingLocalMods"
                v-model="$store.state.search.sortValue" 
                placeholder="Sort mods"
            >
                <el-option
                    v-for="item of sortValues"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-if="!showingLocalMods"
                v-model="$store.state.search.selectedCategories"
                multiple
                placeholder="Select categories"
            >
                <el-option
                    v-for="item in $store.state.thunderstoreModsCategories"
                    :key="item"
                    :label="item"
                    :value="item"
                />
            </el-select>

        </el-menu>
    </nav>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { SortOptions } from '../utils/SortOptions.d';

export default defineComponent({
    name: 'ModsMenu',
    props: {
        showingLocalMods: {
            required: true,
            type: Boolean
        }
    },
    mounted() {
        this.$store.state.search.sortValue = this.sortValues[3].value;
    },
    computed: {
        sortValues(): {label: string, value: string}[] {
            return Object.keys(SortOptions).map((key: string) => ({
                value: key,
                label: Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)]
            }));
        }
    }
})
</script>

<style scoped>
.fc_mods__menu {
    display: flex;
    max-width: 222px;
    min-width: 222px;
    padding: 10px;
}

.fc_mods__menu h5 {
    margin: 8px 0 16px 5px;
}

.fc_mods__menu h5:not(:first-child){
    margin-top: 32px;
}

.fc_mods__menu > .el-menu {
    background-color: transparent;
    border: none;
    width: 100%;
}

.fc_mods__menu > .el-menu > .el-menu-item {
    height: 32px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: #e2e6e7;
}

.fc_mods__menu > .el-menu > .el-menu-item:hover {
    background-color: #4e4e4e3b;
}

.fc_mods__menu > .el-menu > .el-menu-item.is-active {
    color: white;
    background-color: #4e4e4e7a;
}

.el-select {
    width: 100%;
    margin-top: 5px;
}
</style>