54 lines
985 B
Markdown
54 lines
985 B
Markdown
|
# Search Filter
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const activeFilters = ref([]);
|
||
|
|
|
||
|
|
function toggleFilter(filter) {
|
||
|
|
const index = activeFilters.value.indexOf(filter);
|
||
|
|
if (index !== -1) {
|
||
|
|
activeFilters.value.splice(index, 1)
|
||
|
|
} else {
|
||
|
|
activeFilters.value.push(filter)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<DemoContainer>
|
||
|
|
<SearchFilter
|
||
|
|
:active-filters="activeFilters"
|
||
|
|
display-name="Client"
|
||
|
|
facet-name="client"
|
||
|
|
@toggle="toggleFilter"
|
||
|
|
>
|
||
|
|
<ClientIcon aria-hidden="true" />
|
||
|
|
</SearchFilter>
|
||
|
|
</DemoContainer>
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const activeFilters = ref([]);
|
||
|
|
|
||
|
|
function toggleFilter(filter) {
|
||
|
|
const index = activeFilters.value.indexOf(filter);
|
||
|
|
if (index !== -1) {
|
||
|
|
activeFilters.value.splice(index, 1)
|
||
|
|
} else {
|
||
|
|
activeFilters.value.push(filter)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<SearchFilter
|
||
|
|
:active-filters="activeFilters"
|
||
|
|
display-name="Client"
|
||
|
|
facet-name="client"
|
||
|
|
@toggle="toggleFilter"
|
||
|
|
>
|
||
|
|
<ClientIcon aria-hidden="true" />
|
||
|
|
</SearchFilter>
|
||
|
|
```
|