92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex relative mx-auto w-full max-w-md">
|
|
<label for="navSearchField" class="sr-only">{{ defaultPlaceHolder }}</label>
|
|
<input
|
|
class="
|
|
border-2 border-primary
|
|
bg-red
|
|
transition
|
|
h-12
|
|
px-5
|
|
pr-16
|
|
rounded-md
|
|
focus:outline-none
|
|
w-full
|
|
text-black text-lg
|
|
"
|
|
type="search"
|
|
name="search"
|
|
id="navSearchField"
|
|
dir="auto"
|
|
:placeholder="defaultPlaceHolder"
|
|
v-model="search"
|
|
@keyup.enter="enter"
|
|
/>
|
|
<button type="submit" class="absolute right-2 top-3 mr-4">
|
|
<svg
|
|
class="text-black h-6 w-4 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
version="1.1"
|
|
id="Capa_1"
|
|
x="0px"
|
|
y="0px"
|
|
viewBox="0 0 56.966 56.966"
|
|
style="enable-background: new 0 0 56.966 56.966"
|
|
xml:space="preserve"
|
|
width="512px"
|
|
height="512px"
|
|
>
|
|
<path
|
|
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import RouteName from "../router/name";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
placeholder: {
|
|
required: false,
|
|
type: String,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const search = "";
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
const defaultPlaceHolder = props.placeholder || t("Search");
|
|
return { search, defaultPlaceHolder };
|
|
},
|
|
methods: {
|
|
async enter(): Promise<void> {
|
|
this.$emit("navbar-search");
|
|
await this.$router.push({
|
|
name: RouteName.SEARCH,
|
|
query: { term: this.search },
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
label span.visually-hidden {
|
|
display: none;
|
|
}
|
|
|
|
input.searchField {
|
|
box-shadow: none;
|
|
border-color: #b5b5b5;
|
|
|
|
&::placeholder {
|
|
color: gray;
|
|
}
|
|
}
|
|
</style>
|