104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, computed, toRefs } from "vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useClothesCategories } from '@/utils/ClothesCategory'
|
|
//const props = defineProps({
|
|
//})
|
|
const emit = defineEmits([
|
|
'change'
|
|
])
|
|
|
|
const { t } = useI18n()
|
|
|
|
const categoriesList = useClothesCategories();
|
|
|
|
const genderList = computed(() => [
|
|
{ label: t('Wardrobe.assets.genders.male'), value: 'male' },
|
|
{ label: t('Wardrobe.assets.genders.female'), value: 'female' }
|
|
])
|
|
const categories = ref([''])
|
|
const gender = ref([''])
|
|
|
|
const clearFilters = () => {
|
|
categories.value = ['']
|
|
gender.value = ['']
|
|
handleChange()
|
|
}
|
|
const handleChange = () => {
|
|
emit('change', {categories:categories.value, gender:gender.value})
|
|
}
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
</script>
|
|
<template>
|
|
<div class="filters">
|
|
<div class="title">
|
|
<div class="left">Filters</div>
|
|
<div class="right" @click="clearFilters">Clear</div>
|
|
</div>
|
|
<div class="categories">Categories</div>
|
|
<div class="line"></div>
|
|
<div class="multiple">
|
|
<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
|
|
</div>
|
|
<div class="categories">Gender</div>
|
|
<div class="line"></div>
|
|
<div class="multiple">
|
|
<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.filters{
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
.title{
|
|
margin-bottom: 3rem;
|
|
display: flex;
|
|
padding: 0 1.2rem;
|
|
.left{
|
|
margin-right: 12.2rem;
|
|
font-family: "KaiseiOpti-Bold";
|
|
font-weight: 700;
|
|
font-size: 2.4rem;
|
|
line-height: 3.5rem;
|
|
color: #232323;
|
|
}
|
|
.right{
|
|
text-decoration: underline;
|
|
font-family: "KaiseiOpti-Regular";
|
|
font-weight: 400;
|
|
font-size: 1.6rem;
|
|
line-height: 2.4rem;
|
|
letter-spacing: -0.48px;
|
|
text-align: right;
|
|
color: #979797;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.categories{
|
|
font-family: "KaiseiOpti-Bold";
|
|
font-weight: 700;
|
|
font-size: 1.8rem;
|
|
line-height: 2.3rem;
|
|
color: #585858;
|
|
margin-bottom: 1.1rem;
|
|
padding: 0 1.2rem;
|
|
}
|
|
.line{
|
|
border-top: 0.5px solid #C4C4C4;
|
|
width: 27.1rem;
|
|
margin-bottom: 2.2rem;
|
|
}
|
|
.multiple{
|
|
padding: 0 2.3rem;
|
|
margin-bottom: 2.9rem;
|
|
}
|
|
}
|
|
</style> |