mohadese namavar
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<ul class="product-sort">
|
|
<li>
|
|
<i class="isax isax-sort"></i>
|
|
<span>{{ $t('ordering') }}:</span>
|
|
</li>
|
|
<li v-for="(sort, i) in sorts" :key="i">
|
|
<router-link :to="{ query: { ...$route.query, sort } }">
|
|
<Button :label="$t(sort)" :disabled="sort == currentSort" link />
|
|
</router-link>
|
|
</li>
|
|
<li>{{ products.length }} {{ $t('commodity') }}</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { products = [] } = inject('data')
|
|
const { sorts } = inject('init')
|
|
const route = useRoute()
|
|
const currentSort = computed(() => route.query.sort || 'mostRelevant')
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-sort {
|
|
@apply flex items-center border-b-2 border-[#EBEBEB] whitespace-nowrap;
|
|
|
|
li:first-child {
|
|
@apply flex items-center gap-2 text-[#333333] ml-1;
|
|
|
|
i {
|
|
@apply text-base xl:text-[1.4em];
|
|
}
|
|
|
|
span {
|
|
@apply text-xs xl:text-[1.1em] font-bold font-vazir;
|
|
}
|
|
}
|
|
|
|
li:last-child {
|
|
@apply mr-auto text-[#999999] text-[1.1em] font-bold font-vazir max-xl:hidden;
|
|
}
|
|
|
|
li {
|
|
button {
|
|
.p-button-label {
|
|
@apply text-[#999999] text-xs xl:text-[1.1em] font-bold font-vazir;
|
|
}
|
|
|
|
&:disabled {
|
|
@apply opacity-100;
|
|
|
|
.p-button-label {
|
|
@apply text-[#47B556];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</style>
|