[frontend] Enable v-model binding on the SearchInput component
<i v-if="showMagnify && !spin" style="top: 6px;" class="magnify-icon fa fa-fw fa-search" />
<i v-else lass="magnify-icon fa fa-fw fa-spinner fa-spin" />
<form autocomplete="off">
- <!-- attr: { 'placeHolder' : hasFocus() ? '' : placeHolder }, -->
<input
- v-model="query"
+ :value="value"
class="hue-search-input-el"
autocorrect="off"
autocomplete="do-not-autocomplete"
type="text"
:placeholder="(!hasFocus && placeholder) || ''"
:class="{ 'magnify-icon-input': showMagnify }"
+ @input="$emit('input', $event.target.value)"
@focusin="hasFocus = true"
@focusout="hasFocus = false"
- @keyup.enter="$emit('search', query)"
+ @keyup.enter="$emit('search', value)"
/>
<input
v-model="autocomplete"
import I18n from '../utils/i18n';
import Vue from 'vue';
import Component from 'vue-class-component';
- import { Prop, Watch } from 'vue-property-decorator';
+ import { Prop } from 'vue-property-decorator';
@Component
export default class SearchInput extends Vue {
@Prop({ required: false, default: true })
- showMagnify: boolean;
+ showMagnify?: boolean;
@Prop({ required: false, default: I18n('Search...') })
- placeholder: string;
+ placeholder?: string;
+ @Prop({ required: false, default: '' })
+ value?: string;
spin = false;
- query = '';
autocomplete = '';
throttle = -1;
hasFocus = false;
// TODO: Add autocomplete logic...
-
- @Watch('query')
- queryChanged(): void {
- window.clearTimeout(this.throttle);
- this.throttle = window.setTimeout(() => {
- this.$emit('query-changed', this.query);
- }, 300);
- }
}
</script>
