tethys/resources/js/search/search-results/facet-list.vue
2020-06-10 21:09:26 +02:00

44 lines
1.3 KiB
Vue

<template>
<!-- <span>property: {{ filterName }}</span>
<span>value: {{ myLanguageFilters }}</span>-->
<div class="panel panel-primary">
<h3 class="panel-title filterViewModelName">{{ filterName }}</h3>
<!-- e.g.language -->
<ul class="filter-items" v-bind:class="{'limited':filterItems.length > 1 && collapsed }">
<li v-for="(item, index) in filterItems" :key="index" class="list-group-item">
<!-- <input
class="css-w1gpbi"
name="language"
v-bind:id="item.value"
type="radio"
v-bind:value="item.value"
/>
<label :for="item.value">
<span click: @click="activateItem(item)">{{ item.value }} ({{ item.count }})</span>
</label>-->
<a :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.value }} ({{ item.count }})</a>
</li>
</ul>
<ul class="overflowing" v-if="overflowing == true">
<li>
<span @click="toggle()">{{ uncollapseLabelText }}</span>
</li>
</ul>
</div>
</template>
<script lang="ts">
import FacetList from "./facet-list-class";
export default FacetList;
</script>
<style scoped>
/* local styles */
.disabled {
/* color: #EBEBE4; */
color:lightgray;
pointer-events: none;
text-decoration:line-through;
}
</style>