83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<script>
|
|
import { storeToRefs } from "pinia";
|
|
import { useFormStore } from "src/stores/forms";
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "SortSelect",
|
|
components: {},
|
|
setup() {
|
|
const formStore = useFormStore();
|
|
const { sortProductFilters } = storeToRefs(formStore);
|
|
|
|
function handleOrder(order) {
|
|
sortProductFilters.value.order = order;
|
|
sortProductFilters.value.isOpenOrderFilter = false;
|
|
}
|
|
|
|
return { sortProductFilters, handleOrder };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="order-values" role="select">
|
|
<div
|
|
role="option"
|
|
class="order-values-option"
|
|
@click="handleOrder('lowest-price')"
|
|
>
|
|
<p class="filter-paragraph">menor precio</p>
|
|
</div>
|
|
|
|
<div
|
|
role="option"
|
|
class="order-values-option"
|
|
@click="handleOrder('highest-price')"
|
|
>
|
|
<p class="filter-paragraph">mayor precio</p>
|
|
</div>
|
|
|
|
<div
|
|
role="option"
|
|
class="order-values-option"
|
|
@click="handleOrder('latest')"
|
|
>
|
|
<p class="filter-paragraph">más recientes</p>
|
|
</div>
|
|
|
|
<div
|
|
role="option"
|
|
class="order-values-option"
|
|
@click="handleOrder('recommended')"
|
|
>
|
|
<p class="filter-paragraph">recomendados</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-values {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
position: absolute;
|
|
top: 22px;
|
|
right: -10px;
|
|
left: -20px;
|
|
z-index: 10;
|
|
background-color: $secondary-10;
|
|
padding: 0px 10px 10px;
|
|
padding-right: 10px;
|
|
border-radius: 0px 0px 10px 10px;
|
|
|
|
&-option {
|
|
cursor: pointer;
|
|
& .filter-paragraph {
|
|
color: inherit;
|
|
font-size: $font-14;
|
|
}
|
|
}
|
|
}
|
|
</style>
|