95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<div v-if="show" class="d-flex justify-content-between">
|
|
<b-form-group
|
|
:label="$t('options.display.title')"
|
|
v-slot="{ ariaDescribedby }"
|
|
>
|
|
<b-form-radio-group
|
|
id="mode-select"
|
|
v-model="currentMode" :options="modes"
|
|
name="mode-select" :aria-describedby="ariaDescribedby" buttons
|
|
size="sm"
|
|
/>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
v-if="currentMode !== 'tree-map'"
|
|
:label="$t('options.filters.title')"
|
|
>
|
|
<b-form-group
|
|
:label="$t('options.filters.choices.tags')"
|
|
label-for="tags-select"
|
|
>
|
|
<multiple-tags-select
|
|
id="tags-select" :button-text="$t('options.filters.choices.tags')"
|
|
v-model="selectedTags" :options="tags"
|
|
/>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
:label="$t('options.filters.choices.strangeness')"
|
|
label-for="strangeness-input"
|
|
>
|
|
<b-form-input
|
|
id="strangeness-input"
|
|
type="range" min="0" max="5"
|
|
v-model="strangeness"
|
|
/>
|
|
</b-form-group>
|
|
</b-form-group>
|
|
|
|
<b-form-group
|
|
:label="$t('options.search.title')"
|
|
label-for="search-input"
|
|
>
|
|
<b-input-group size="sm" append="search-icon">
|
|
<b-form-input v-model="search" id="search-input" trim />
|
|
</b-input-group>
|
|
</b-form-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'
|
|
|
|
export default {
|
|
name: 'LibraryOptions',
|
|
|
|
components: {
|
|
MultipleTagsSelect
|
|
},
|
|
|
|
props: {
|
|
show: { type: Boolean, required: true },
|
|
mode: { type: String, required: true },
|
|
tags: { type: Array, default: () => ([]) }
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
modes: [
|
|
{ text: this.$t('options.display.choices.tree-map'), value: 'tree-map' },
|
|
{ text: this.$t('options.display.choices.card-map'), value: 'card-map' },
|
|
{ text: this.$t('options.display.choices.card-list'), value: 'card-list' }
|
|
],
|
|
currentMode: this.mode,
|
|
selectedTags: [],
|
|
strangeness: 0,
|
|
search: ''
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
currentMode (mode) {
|
|
this.$router.push({ query: { mode } })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep fieldset > div {
|
|
display: flex;
|
|
}
|
|
</style>
|