147 lines
2.8 KiB
Vue
147 lines
2.8 KiB
Vue
<template>
|
|
<div class="">
|
|
<div class="sort-select">
|
|
<div class="label">{{itemSelect}}</div>
|
|
<img
|
|
draggable="false"
|
|
:class="{'iconUp': dropShow}"
|
|
src='@/assets/market/arrow-down.png'
|
|
@click = "dropShow=!dropShow"
|
|
alt="arrow down"
|
|
/>
|
|
</div>
|
|
<div class="dropdown" :class="{'hide': !dropShow}" >
|
|
<div class="item" v-for="(v, index) in filters" :key="v" @click="selectItem(index)">{{v}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
|
|
@Component({
|
|
name: 'SortSelect',
|
|
components: {
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
dropShow = false
|
|
@Prop() selectedIndex: number
|
|
@Prop() filters: string[]
|
|
|
|
toggleMenu() {
|
|
this.dropShow = !this.dropShow
|
|
}
|
|
|
|
get itemSelect() {
|
|
return this.filters[this.selectedIndex]
|
|
}
|
|
|
|
selectItem(val: number) {
|
|
this.toggleMenu()
|
|
this.$emit('filter-change', val)
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sort-select {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
cursor: default;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 14.5em;
|
|
padding: 1em 1.5em;
|
|
background-color: #36275B;
|
|
border-radius: 0.375em;
|
|
img{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.sort-select .iconUp {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.sort-select .iconUp:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sort-select .iconDown:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sort-select .label {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-weight: lighter;
|
|
font-size: 1.125em;
|
|
color: white;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.sort-select .label.placeholder {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.dropdown {
|
|
position: absolute;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
cursor: default;
|
|
z-index: 10;
|
|
-webkit-transition: all 0.5s;
|
|
transition: all 0.5s;
|
|
margin-top: 0.625em;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
max-height: 37.5em;
|
|
background-color: #36275B;
|
|
border-radius: 0.25em;
|
|
width: 14.5em;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dropdown .item {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0.75em 1.5em;
|
|
font-weight: lighter;
|
|
font-size: 1.125em;
|
|
color: white;
|
|
text-transform: capitalize;
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid #5D58B2;
|
|
}
|
|
}
|
|
|
|
.dropdown .item:hover {
|
|
color: #46E0F4;
|
|
}
|
|
|
|
.dropdown.hide {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
</style>
|