added search type dropdown with vue-select

src/components/nav/Search.vue

@@ -1,48 +1,81 @@
 <template>
   <div id="search" class="col-11">
-    <form class="search-form">
-      <label for="keys">Search</label>
-      <input
-        id="keys"
-        v-model="keys"
-        type="text"
-        placeholder="search"
-        @keydown.enter.prevent="submit"
-      >
-      <span
-        v-if="!isloading"
-        class="mdi mdi-magnify"
-        title="rechercher"
-        @click.prevent="submit"
-        @keydown.enter.prevent="submit"
-      />
-      <span
-        v-else
-        class="mdi mdi-loading"
-        title="chargement"
-      />
-      <!-- <input
-        id="submit-search"
-        type="submit"
-        name="search"
-        value="Search"
-        class="mdi mdi-magnify"
-        @click.prevent="submit"
-        @keyup.enter="submit"
-      > -->
+    <form class="search-form row">
+      <fieldset class="search col-3">
+        <div>
+          <label for="keys">Search</label>
+          <input
+            id="keys"
+            v-model="keys"
+            type="text"
+            placeholder="search"
+            @keydown.enter.prevent="submit"
+          >
+          <v-select
+            id="search-type"
+            type="select"
+            placeholder="dans ..."
+            append-to-body
+            :calculate-position="withPopper"
+            :options="searchTypeOptions"
+            :clearable="false"
+            :value="searchTypeValue"
+            @input="onSearchTypeSelected"
+          />
+        </div>
+
+        <span
+          v-if="!isloading"
+          class="mdi mdi-magnify"
+          title="rechercher"
+          @click.prevent="submit"
+          @keydown.enter.prevent="submit"
+        />
+        <span
+          v-else
+          class="mdi mdi-loading"
+          title="chargement"
+        />
+        <!-- <input
+          id="submit-search"
+          type="submit"
+          name="search"
+          value="Search"
+          class="mdi mdi-magnify"
+          @click.prevent="submit"
+          @keyup.enter="submit"
+        > -->
+      </fieldset>
+      <fieldset class="filters-nominum col-3">
+        <span>Filters Nominum</span>
+      </fieldset>
+      <fieldset class="filters-locorum col-3">
+        <span>Filters Nominum</span>
+      </fieldset>
+      <fieldset class="filters-operum col-3">
+        <span>Filters Nominum</span>
+      </fieldset>
     </form>
   </div>
 </template>
 
 <script>
 
+import { createPopper } from '@popperjs/core'
+
 import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'Search',
-  // data: () => ({
-  //   typed: ''
-  // }),
+  data: () => ({
+    searchTypeOptions: [
+      { 'code': 'text', 'label': 'Dans les textes' },
+      { 'code': 'nominum', 'label': 'Dans les personnes' },
+      { 'code': 'locorum', 'label': 'Dans les lieux' },
+      { 'code': 'operum', 'label': 'Dans les objets' }
+    ],
+    searchTypeValue: { 'code': 'text', 'label': 'Dans les textes' }
+  }),
   computed: {
     keys: {
       get () { return this.$store.state.Search.keys },
@@ -59,6 +92,52 @@ export default {
     submit () {
       console.log('submited', this.keys)
       this.getResults()
+    },
+    withPopper (dropdownList, component, { width }) {
+      /**
+       * We need to explicitly define the dropdown width since
+       * it is usually inherited from the parent with CSS.
+       */
+      dropdownList.style.width = width
+
+      /**
+       * Here we position the dropdownList relative to the $refs.toggle Element.
+       *
+       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
+       * the dropdownList overlap by 1 pixel.
+       *
+       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
+       * wrapper so that we can set some styles for when the dropdown is placed
+       * above.
+       */
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: 'top',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, -1]
+            }
+          },
+          {
+            name: 'toggleClass',
+            enabled: true,
+            phase: 'write',
+            fn ({ state }) {
+              component.$el.classList.toggle('drop-up', state.placement === 'top')
+            }
+          }]
+      })
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy()
+    },
+    onSearchTypeSelected (e) {
+      console.log('onSearchTypeSelected', e)
+      this.searchTypeValue = e
     }
   }
 }