traxxx/assets/components/header/search.vue

<template>
	<form
		class="search"
		@submit.prevent="search"
	>
		<input
			ref="search"
			v-model="query"
			type="search"
			class="search-input"
			placeholder="Search..."
		>
		<button
			type="submit"
			class="search-button"
		><Icon
			icon="search"
		/></button>
	</form>
</template>

<script>
async function search() {
	if (this.query) {
		this.$router.push({ name: 'search', query: { q: this.query } });
		this.$emit('search');
	}
}

function searching(to) {
	if (to) {
		this.$refs.search.focus();
	}
}

function route(to) {
	if (to.name !== 'search') {
		this.query = null;
	}
}

export default {
	props: {
		searching: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			query: this.$route.query ? this.$route.query.q : null,
		};
	},
	emits: ['search'],
	watch: {
		$route: route,
		searching,
	},
	methods: {
		search,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.search {
    height: 100%;
    max-width: 20rem;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    border-left: solid 1px var(--shadow-hint);
	margin: 0 .25rem 0 0;

    &.compact {
        padding: 0;
        border: none;

		.search-input {
			padding: .75rem .5rem .75rem .75rem;
		}

        .search-button {
            padding: 1rem 1rem .75rem .25rem;
            margin: 0;
        }
    }
}

.search-input {
    height: 100%;
    width: 100%;
    padding: .5rem 0 .5rem .75rem;
    border: none;
    color: var(--text);
    background: var(--background);
    outline: none;
    font-size: 1rem;
    outline: none;

    &::placeholder {
        color: var(--shadow);
    }

    &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        padding: .5rem;
        position: relative;
        right: 0;
        color: var(--text);
        background: url('/img/cancel-circle2.svg');
        opacity: .25;

        &:hover {
            opacity: .5;
            cursor: pointer;
        }
    }

    &:focus {
		&::placeholder {
			color: var(--shadow-weak);
		}

		& + .search-button:not(:hover) .icon {
			fill: var(--shadow);
		}
    }
}

.search-button {
    height: 100%;
    padding: 0 1.25rem 0 1rem;
    background: none;
    border: none;
    margin: .3rem 0 0 0;
    outline: none;

    .icon {
        fill: var(--shadow-weak);
    }

    &:hover {
        cursor: pointer;

        .icon {
            fill: var(--primary);
        }
    }
}
</style>