<template>
<form class="form"> <input v-on:input="search" type="text" name="search" placeholder="User opens a page" class="form__searchInput"> <div class="form__caption">49 step definitions</div> </form>
</template>
<script lang=“ts”> import { defineComponent } from 'vue'
interface SearchForm {
timer: null | number;
}
export default defineComponent({
name: "Form", data() { return { timer: null } as SearchForm }, methods: { search(event: KeyboardEvent) { if (this.timer) {clearTimeout(this.timer)} this.timer = setTimeout(() => { let element = event.target as HTMLInputElement this.$emit("filter", element.value) }, 300) } }
}) </script>
<style type=“text/css”> .form {
margin-bottom: 42px;
}
.form__searchInput {
max-width: 440px; width: 100%; border-radius: 4px; height: 32px; border: 0; font-size: 16px; padding-left: 8px;
}
.form__caption {
padding-left: 8px; font-size: 12px; color: rgba(0, 0, 0, 58%); margin-top: 3px;
} </style>