mohadese namavar
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<div class="products-sort-popup">
|
|
<div>
|
|
<Button v-bind="btns.close.props" @click="dialog.close()" />
|
|
<h2>{{ $t("sortBy") }}</h2>
|
|
</div>
|
|
<ul>
|
|
<li v-for="(item, i) in sorts" :key="i">
|
|
<h3 @click="select(item)" v-ripple>
|
|
{{ $t(item) }}
|
|
</h3>
|
|
<i v-if="sort == item" class="isax isax-tick-circle" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { meta } = useRoute()
|
|
const { btns, sorts } = meta.init
|
|
const dialog = inject('dialogRef')
|
|
|
|
const { query } = useRoute()
|
|
const sort = ref(query.sort || "mostVisited");
|
|
const router = useRouter()
|
|
const select = (key) => {
|
|
router.push({ path: '/search', query: {...query, sort: key} })
|
|
dialog.value.close()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.products-sort-popup {
|
|
@apply w-full h-max flex flex-col gap-9 p-6 bg-white rounded-t-[0.6rem];
|
|
|
|
&>div {
|
|
@apply flex items-center gap-3;
|
|
|
|
&>button {
|
|
@apply -mx-4 -my-3 text-[#333333] text-[1.4em] #{!important};
|
|
}
|
|
|
|
&>h2 {
|
|
@apply text-[#333333] text-sm font-medium font-vazir;
|
|
}
|
|
}
|
|
|
|
&>ul {
|
|
@apply w-full flex flex-col gap-4;
|
|
|
|
&>li {
|
|
@apply flex items-center justify-between pb-4 border-b last:border-b-0 text-[#333333];
|
|
|
|
h3 {
|
|
@apply text-xs font-medium font-vazir overflow-hidden relative;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|