12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <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>
|