mobilizon/js/src/components/SearchField.vue
Thomas Citharel 2749491467
Fix invalid HTML (<div> inside <label>)
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2022-04-21 17:13:21 +02:00

61 lines
1.3 KiB
Vue

<template>
<b-field label-for="navSearchField" class="-mt-2">
<b-input
:placeholder="defaultPlaceHolder"
type="search"
id="navSearchField"
icon="magnify"
icon-clickable
rounded
custom-class="searchField"
dir="auto"
v-model="search"
@keyup.native.enter="enter"
>
</b-input>
<template #label>
<span class="sr-only">{{ defaultPlaceHolder }}</span>
</template>
</b-field>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../router/name";
@Component
export default class SearchField extends Vue {
@Prop({ type: String, required: false }) placeholder!: string;
search = "";
async enter(): Promise<void> {
this.$emit("navbar-search");
await this.$router.push({
name: RouteName.SEARCH,
query: { term: this.search },
});
}
get defaultPlaceHolder(): string {
// We can't use "this" inside @Prop's default value.
return this.placeholder || (this.$t("Search") as string);
}
}
</script>
<style lang="scss">
label span.visually-hidden {
display: none;
}
input.searchField {
box-shadow: none;
border-color: #b5b5b5;
border-radius: 9999px !important;
&::placeholder {
color: gray;
}
}
</style>