From 5ab3715d19c6622d68081dcd38cb8cca777d3ee3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 29 Jun 2021 15:46:13 +0200
Subject: [PATCH] add SearchInput component with icon

---
 src/components/formItems/SearchInput.vue | 58 ++++++++++++++++++++++++
 src/components/formItems/index.js        |  2 +
 src/pages/library/LibraryOptions.vue     | 27 ++---------
 3 files changed, 64 insertions(+), 23 deletions(-)
 create mode 100644 src/components/formItems/SearchInput.vue
 create mode 100644 src/components/formItems/index.js

diff --git a/src/components/formItems/SearchInput.vue b/src/components/formItems/SearchInput.vue
new file mode 100644
index 0000000..2869caf
--- /dev/null
+++ b/src/components/formItems/SearchInput.vue
@@ -0,0 +1,58 @@
+<template>
+  <b-form-group :label="$t('options.search.title')">
+    <b-input-group>
+      <template #append>
+        <b-input-group-text>
+          <svg viewBox="0 0 19 19">
+            <circle cx="7.5" cy="7.5" r="4" />
+            <path d="M 10.5,10.5 L 15.5,15.5" />
+          </svg>
+        </b-input-group-text>
+      </template>
+      <b-form-input
+        :value="value" @input="$emit('input', $event)" id="search-input"
+        trim
+      />
+    </b-input-group>
+  </b-form-group>
+</template>
+
+<script>
+export default {
+  name: 'SearchInput',
+
+  props: {
+    value: { type: String, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-control[type='text'] {
+  border-color: $black;
+  border-right: 0;
+  height: calc(1.75em + #{2 * $border-width});
+}
+
+.input-group-text {
+  border-color: $black;
+  background-color: $white;
+  padding: 0;
+}
+
+svg {
+  display: inline-block;
+  width: 19px;
+  height: 19px;
+  align-self: center;
+  margin-right: .25rem;
+
+  path,
+  circle {
+    fill: none;
+    stroke: $black;
+    stroke-width: 2px;
+    stroke-linecap: round;
+  }
+}
+</style>
diff --git a/src/components/formItems/index.js b/src/components/formItems/index.js
new file mode 100644
index 0000000..911ae13
--- /dev/null
+++ b/src/components/formItems/index.js
@@ -0,0 +1,2 @@
+export { default as MultipleTagsSelect } from './MultipleTagsSelect'
+export { default as SearchInput } from './SearchInput'
diff --git a/src/pages/library/LibraryOptions.vue b/src/pages/library/LibraryOptions.vue
index 590e037..7aa9ff6 100644
--- a/src/pages/library/LibraryOptions.vue
+++ b/src/pages/library/LibraryOptions.vue
@@ -61,16 +61,7 @@
     </b-form-group>
 
     <!-- LIST + MAP ONLY -->
-    <b-form-group
-      v-if="mode !== 'tree'"
-      :label="$t('options.search.title')"
-    >
-      <b-input-group append="search-icon">
-        <b-form-input
-          v-model="activeSearch" id="search-input" trim
-        />
-      </b-input-group>
-    </b-form-group>
+    <search-input v-if="mode !== 'tree'" v-model="activeSearch" />
 
     <!-- TREE ONLY -->
     <b-form-group
@@ -91,13 +82,14 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'
+import { MultipleTagsSelect, SearchInput } from '@/components/formItems'
 
 export default {
   name: 'LibraryOptions',
 
   components: {
-    MultipleTagsSelect
+    MultipleTagsSelect,
+    SearchInput
   },
 
   data () {
@@ -279,17 +271,6 @@ export default {
         }
       }
     }
-
-    .form-control[type='text'] {
-      border-color: $black;
-      border-right: 0;
-      height: calc(1.75em + #{2 * $border-width});
-    }
-
-    .input-group-text {
-      border-color: $black;
-      background-color: transparent;
-    }
   }
 }
 </style>