enfrancais-app/src/pages/library/LibraryOptions.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>