You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.7 KiB
120 lines
2.7 KiB
<template>
|
|
<div
|
|
class="sort xl:tw-px-[35px] xl:tw-py-[30px] xl:tw-border-solid xl:tw-border xl:tw-border-neutrals-200 xl:tw-rounded-[30px]">
|
|
<!-- tw-mb-[26px] xl:tw-mb-[30px] -->
|
|
<div class="">
|
|
<span class="t20 tw-text-primary-1">{{ results
|
|
}}<span class="tw-body-3 tw-ml-[10px] tw-text-[#757575]">{{
|
|
$t("Results")
|
|
}}</span></span>
|
|
</div>
|
|
<div class="tw-hidden xl:tw-block">
|
|
<div class="tw-flex tw-justify-items-start tw-gap-[50px] tw-pt-[20px]">
|
|
<div class="tw-body-3">
|
|
{{ $t("Sort By") }}
|
|
</div>
|
|
<div class="tw-body-3">
|
|
|
|
|
</div>
|
|
<div class="" v-for="(item, index) in sortType" :key="index">
|
|
<button :for="item.value" class="tw-body-3 tw-text-base-secondary focus:tw-text-primary-1" @click="onClick(item)">
|
|
{{ $t(item.name) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-flex tw-justify-between tw-items-cente xl:tw-hidden">
|
|
<button class="btn-filter tw-text-transparent" @click="$emit('filter', true)">
|
|
filter
|
|
</button>
|
|
<select class="tw-py-[9px] tw-rounded-[10px]" name="sort_by" v-model="sort" @change="onChnage()">
|
|
<option value="0">{{ $t("Select option") }}</option>
|
|
<option v-for="item in sortType" :key=item.value :value="item.value">
|
|
{{ $t(item.name) }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
results: {
|
|
type: Number,
|
|
},
|
|
sortType: {
|
|
type: Array,
|
|
},
|
|
sortBy: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
sort: this.sortBy ? this.sortBy : "0",
|
|
options: {}
|
|
};
|
|
},
|
|
watch: {
|
|
sortBy: {
|
|
handler: function () {
|
|
this.sort = this.sortBy;
|
|
},
|
|
},
|
|
sort: {
|
|
handler: function () {
|
|
this.$emit("sort", this.sort);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
onClick(item) {
|
|
this.sort = item.value;
|
|
},
|
|
onChnage() {
|
|
this.$emit("sort", this.sort);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
label {
|
|
cursor: pointer;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
// input:checked+label {
|
|
// color: #f48800 !important;
|
|
// }
|
|
|
|
select {
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-size: 9px 6px;
|
|
background-position: right 20px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.rightBorder {
|
|
position: relative;
|
|
color: #757575;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
display: block;
|
|
content: " ";
|
|
width: 1px;
|
|
height: 13px;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
background-color: #e5e5e5;
|
|
}
|
|
}
|
|
|
|
.btn-filter {
|
|
background-image: url("~/assets/svg/filter.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 40px;
|
|
}
|
|
</style>
|