<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Marques
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div x-data="storeFilters('')" class="flex flex-col gap-4 md:gap-6 w-full">
<label class="relative">
<input x-model="search" type="text" placeholder="Rechercher" class="w-full leading-icon">
<svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
</svg>
</label>
<div x-show="items.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<template x-for="item in filteredItems" :key="item.label">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.locator.currentSelectedFilters[category].includes(item.label)" @click="$store.locator.updateFilter(category, item.label)" type="checkbox">
<span x-text="item.label + ' (' + item.count + ')'"></span>
</label>
</template>
</div>
</div>
<script>
function storeFilters(category) {
return {
search: '',
category: category,
items: [],
init() {
// Observer les changements dans les filtres du type actuel
this.$watch('$store.locator.currentFilterList', (value) => {
if (value && value[this.category]) {
this.items = value[this.category];
}
}, {
deep: true
});
// Initialisation immédiate si les données sont déjà disponibles
if (this.$store.locator.currentFilterList?.[this.category]) {
this.items = this.$store.locator.currentFilterList[this.category];
}
},
get filteredItems() {
if (this.search === '') {
return this.items;
}
return this.items.filter(item =>
item.toLowerCase()
.replace(/ /g, '')
.includes(this.search.toLowerCase().replace(/ /g, ''))
);
}
}
}
</script>
</div>
</div>
{% set accordionContent %}
<div x-data="storeFilters('{{ category }}')" class="flex flex-col gap-4 md:gap-6 w-full">
<label class="relative">
<input x-model="search" type="text" placeholder="Rechercher" class="w-full leading-icon">
{% render "@icons-library--search-outline" with {size:16} %}
</label>
<div x-show="items.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<template x-for="item in filteredItems" :key="item.label">
<label class="selection-control-label selection-control-size-md">
<input
:checked="$store.locator.currentSelectedFilters[category].includes(item.label)"
@click="$store.locator.updateFilter(category, item.label)"
type="checkbox">
<span x-text="item.label + ' (' + item.count + ')'"></span>
</label>
</template>
</div>
</div>
<script>
function storeFilters(category) {
return {
search: '',
category: category,
items: [],
init() {
// Observer les changements dans les filtres du type actuel
this.$watch('$store.locator.currentFilterList', (value) => {
if (value && value[this.category]) {
this.items = value[this.category];
}
}, { deep: true });
// Initialisation immédiate si les données sont déjà disponibles
if (this.$store.locator.currentFilterList?.[this.category]) {
this.items = this.$store.locator.currentFilterList[this.category];
}
},
get filteredItems() {
if (this.search === '') {
return this.items;
}
return this.items.filter(item =>
item.toLowerCase()
.replace(/ /g, '')
.includes(this.search.toLowerCase().replace(/ /g, ''))
);
}
}
}
</script>
{% endset %}
{% render "@accordion--filter" with {
title: category == 'mutuals' ? 'Mutuelles' : 'Marques',
content: accordionContent
} %}
{
"name": "searchable-checkboxes",
"checkboxes": [
{
"label": "Option 1"
},
{
"label": "Option 2"
},
{
"label": "Option 3"
},
{
"label": "Option 4"
}
]
}
No notes defined.