This repository has been archived on 2021-09-06. You can view files and clone it, but cannot push or open issues or pull requests.
2021-09-04 15:18:48 +02:00
|
|
|
<template>
|
|
|
|
<form>
|
2021-09-04 16:01:46 +02:00
|
|
|
<input
|
|
|
|
type="search"
|
|
|
|
@input="search"
|
|
|
|
:value="searchTerm"
|
|
|
|
placeholder="Filter items"
|
|
|
|
/>
|
2021-09-04 15:18:48 +02:00
|
|
|
</form>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: ['searchTerm'],
|
|
|
|
emits: ['search'],
|
2021-09-06 21:37:16 +02:00
|
|
|
setup(_, { emit }) {
|
2021-09-04 16:01:46 +02:00
|
|
|
function search(event) {
|
2021-09-06 21:37:16 +02:00
|
|
|
emit('search', event.target.value);
|
2021-09-04 16:01:46 +02:00
|
|
|
}
|
|
|
|
return {
|
|
|
|
search
|
|
|
|
};
|
|
|
|
}
|
2021-09-04 15:18:48 +02:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
input {
|
|
|
|
font: inherit;
|
|
|
|
width: 100%;
|
|
|
|
display: block;
|
|
|
|
padding: 0.15rem;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
}
|
|
|
|
|
|
|
|
input:focus {
|
|
|
|
outline: none;
|
|
|
|
border-color: #00006b;
|
|
|
|
background-color: #eeeeff;
|
|
|
|
}
|
2021-09-04 16:01:46 +02:00
|
|
|
</style>
|