Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x 11x 1x 10x 11x 11x 3x 3x 3x 3x 3x 3x | <template>
<button
class="tb-sort-button"
:class="{'is-active': isActive, 'is-asc': isAsc, 'is-desc': isDesc }"
@click="sort"
>
<slot></slot>
<svg width="16" height="16" viewBox="0 0 20 20">
<path v-show="isAsc" d="M17 13H3l7-8z"/>
<path v-show="isDesc" d="M3 7h14l-7 8z"/>
<path v-show="! isActive" d="M17 9H3l7-8z M3 11h14l-7 8z"/>
</svg>
</button>
</template>
<script>
import configMixin from '../js/mixins/config.js'
export default {
name: 'tb-sort-button',
mixins: [ configMixin ],
props: {
asc: {
type: String,
required: true
},
desc: {
type: String,
required: true
}
},
computed: {
currentOrder() {
return this.$route.query.orderBy || ''
},
orderParams() {
return this.asc && this.desc ? [this.asc, this.desc, null] : [this.asc, this.desc]
},
isAsc() {
return this.currentOrder === this.asc
},
isDesc() {
return this.currentOrder === this.desc
},
isActive() {
return this.isAsc || this.isDesc
}
},
methods: {
sort() {
let sort = {}
sort[this._config.sort.param] = this._getNext()
this.$router.$setParam(sort, false)
},
_getNext() {
let nextIndex = this.orderParams.indexOf(this.currentOrder) + 1
nextIndex = nextIndex >= this.orderParams.length ? 0 : nextIndex
return this.orderParams[nextIndex]
}
}
}
</script> |