traxxx/assets/components/alerts/search.vue

<template>
	<div>
		<input
			ref="input"
			v-model="query"
			:placeholder="label || `Search ${content}`"
			class="input"
			@input="search"
		>

		<ul
			v-if="results.length > 0"
			class="nolist"
		>
			<li
				v-for="result in results"
				:key="`result-${result.id}`"
				class="result"
				@click="selectResult(result)"
			>
				<Icon
					v-if="result.type === 'network'"
					v-tooltip="'Network'"
					icon="device_hub"
				/>

				<Icon
					v-if="result.type === 'channel'"
					v-tooltip="'Channel'"
					icon="tv"
				/>

				<img
					v-if="result.avatar"
					:src="getPath(result.avatar)"
					class="avatar"
				>{{ result.name }}
			</li>
		</ul>
	</div>
</template>

<script>
async function search() {
	if (this.content === 'actors') {
		this.results = await this.$store.dispatch('searchActors', {
			query: this.query,
			minLength: 1,
			limit: 10,
		});
	}

	if (this.content === 'entities') {
		this.results = await this.$store.dispatch('searchEntities', {
			query: this.query,
			limit: 10,
		});
	}

	if (this.content === 'tags') {
		this.results = await this.$store.dispatch('searchTags', {
			query: this.query,
			minLength: 1,
			limit: 10,
		});
	}

	if (this.content === 'stashes') {
		this.results = this.$store.state.auth.user.stashes.filter(stash => new RegExp(this.query).test(stash.name));
	}
}

function selectResult(item) {
	this.query = null;
	this.results = [];

	this.$emit('select', item);
}

async function mounted() {
	this.$refs.input.focus();

	if (this.defaults.length > 0 && this.content === 'tags') {
		this.results = await this.$store.dispatch('fetchTags', {
			slugs: this.defaults,
		});
	}

	if (this.content === 'stashes') {
		this.results = this.$store.state.auth.user.stashes;
	}
}

export default {
	props: {
		content: {
			type: String,
			default: null,
		},
		defaults: {
			type: Array,
			default: () => [],
		},
		label: {
			type: String,
			default: null,
		},
	},
	data() {
		return {
			query: null,
			results: [],
		};
	},
	emits: ['select'],
	mounted,
	methods: {
		search,
		selectResult,
	},
};
</script>

<style lang="scss" scoped>
.result {
	display: flex;
	align-items: center;
	padding: .5rem;

	&:hover {
		color: var(--primary);
		cursor: pointer;
	}
}

.avatar {
	height: 2rem;
	margin: 0 .5rem 0 0;
}

.icon {
	fill: var(--shadow);
	margin: -.1rem .75rem 0 0;
}
</style>