Replace vue-multiselect with a custom component (#366)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/366
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/namespace/namespace-search.vue

@@ -1,31 +1,20 @@
 <template>
 	<multiselect
-		:internal-search="true"
 		:loading="namespaceService.loading"
-		:multiple="false"
-		:options="namespaces"
-		:searchable="true"
-		:showNoOptions="false"
-		@search-change="findNamespaces"
+		placeholder="Search for a namespace..."
+		@search="findNamespaces"
+		:search-results="namespaces"
 		@select="select"
 		label="title"
-		placeholder="Search for a namespace..."
-		track-by="id"
-		v-model="namespace">
-		<template slot="clear" slot-scope="props">
-			<div
-				@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
-				v-if="namespace.id !== 0"></div>
-		</template>
-		<span slot="noResult">No namespace found. Consider changing the search query.</span>
-	</multiselect>
+		v-model="namespace"
+	/>
 </template>
 
 <script>
 import NamespaceService from '../../services/namespace'
 import NamespaceModel from '../../models/namespace'
-import LoadingComponent from '../misc/loading'
-import ErrorComponent from '../misc/error'
+
+import Multiselect from '@/components/input/multiselect'
 
 export default {
 	name: 'namespace-search',
@@ -37,12 +26,7 @@ export default {
 		}
 	},
 	components: {
-		multiselect: () => ({
-			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		Multiselect,
 	},
 	created() {
 		this.namespaceService = new NamespaceService()