Repo for the search and displace core module including the interface to select files and search and displace operations to run on them.
https://searchanddisplace.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.8 KiB
69 lines
1.8 KiB
<template>
|
|
<Fieldset :legend="displayName" :toggleable="true" class="filter-container">
|
|
|
|
<div v-for="option of optionsList" :key="option.name" class="filter-option">
|
|
<h5>{{ option.name }}</h5>
|
|
|
|
<SelectButton
|
|
:key="option.name"
|
|
v-model="selectedOption"
|
|
:options="option.list"
|
|
optionLabel="name" />
|
|
</div>
|
|
</Fieldset>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
import { FilterOptions } from '../../interfaces/FilterOptions';
|
|
|
|
@Component
|
|
export default class Filter extends Vue {
|
|
|
|
@Prop(String)
|
|
public readonly id!: string;
|
|
|
|
@Prop(String)
|
|
public readonly displayName!: string;
|
|
|
|
@Prop({ default: [] })
|
|
public readonly options!: FilterOptions;
|
|
|
|
private optionsList = new Array;
|
|
|
|
public selectedOption = null;
|
|
|
|
public created()
|
|
{
|
|
for (let index in this.options) {
|
|
let words = index.split('_');
|
|
for (let i = 0; i < words.length; i++) {
|
|
words[i] = words[i].charAt(0).toUpperCase() + words[i].substr(1);
|
|
}
|
|
|
|
|
|
|
|
let option = {
|
|
name: words.join(' '),
|
|
list: new Array
|
|
};
|
|
this.options[index].forEach( opt => {
|
|
option.list.push({
|
|
'name': opt,
|
|
'value': opt
|
|
});
|
|
});
|
|
|
|
this.optionsList.push(option);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.filter-container,
|
|
.filter-option {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|