55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<form
|
|
class="ui inline form"
|
|
@submit.stop.prevent="$emit('search', value)"
|
|
>
|
|
<div :class="['ui', 'action', {icon: isClearable}, 'input']">
|
|
<label
|
|
for="search-query"
|
|
class="hidden"
|
|
>
|
|
<translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
|
|
</label>
|
|
<input
|
|
id="search-query"
|
|
name="search-query"
|
|
type="text"
|
|
:placeholder="placeholder || labels.searchPlaceholder"
|
|
:value="value"
|
|
@input="$emit('input', $event.target.value)"
|
|
>
|
|
<i
|
|
v-if="isClearable"
|
|
class="x link icon"
|
|
:title="labels.clear"
|
|
@click.stop.prevent="$emit('input', ''); $emit('search', value)"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="ui icon basic button"
|
|
>
|
|
<i class="search icon" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: { type: String, required: true },
|
|
placeholder: { type: String, required: false, default: '' }
|
|
},
|
|
computed: {
|
|
labels () {
|
|
return {
|
|
searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search…'),
|
|
clear: this.$pgettext('Content/Library/Button.Label', 'Clear')
|
|
}
|
|
},
|
|
isClearable () {
|
|
return !!this.value
|
|
}
|
|
}
|
|
}
|
|
</script>
|