Show label colors when searching for labels

src/components/input/multiselect.vue

@@ -44,7 +44,9 @@
 				>
 					<span>
 						<slot name="searchResult" :option="query">
+							<span class="search-result">
 								{{ query }}
+							</span>
 						</slot>
 					</span>
 					<span class="hint-text">
@@ -63,7 +65,7 @@
 				>
 					<span>
 						<slot name="searchResult" :option="data">
-							{{ label !== '' ? data[label] : data }}
+							<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
 						</slot>
 					</span>
 					<span class="hint-text">

src/components/tasks/partials/editLabels.vue

@@ -20,6 +20,19 @@
 				<a @click="removeLabel(props.item)" class="delete is-small"></a>
 			</span>
 		</template>
+		<template v-slot:searchResult="props">
+			<span
+				v-if="typeof props.option === 'string'"
+				class="tag ml-2">
+				<span>{{ props.option }}</span>
+			</span>
+			<span
+				v-else
+				:style="{'background': props.option.hexColor, 'color': props.option.textColor}"
+				class="tag ml-2">
+				<span>{{ props.option.title }}</span>
+			</span>
+		</template>
 	</multiselect>
 </template>
 

src/styles/components/base/multiselect.scss

@@ -80,23 +80,25 @@
 			text-transform: none;
 			font-family: $family-sans-serif;
 			font-weight: normal;
+			padding: 0;
 
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			overflow: hidden;
 
-			span:first-child {
+			.search-result {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
+				padding: .5rem 1rem;
 			}
 
 			.hint-text {
 				font-size: .75rem;
 				color: transparent;
 				transition: color $transition;
-				padding-left: .5rem;
+				padding: 0 .5rem;
 			}
 
 			&:focus, &:hover {