vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated autocomplete to new v-model API

pull/496/head
Cagatay Civici 2020-09-17 22:21:20 +03:00
parent 8860a174bb
commit f5d283be4e
1 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/autocomplete/AutoComplete.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<span :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible"> <span :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="inputValue" type="text" autoComplete="off" v-if="!multiple" <input ref="input" :class="inputClass" v-bind="$attrs" :value="inputValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" type="text" autoComplete="off" v-if="!multiple"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy"> role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick"> <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
<li v-for="(item, i) of value" :key="i" class="p-autocomplete-token"> <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span> <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
<span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span> <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
</li> </li>
<li class="p-autocomplete-input-token"> <li class="p-autocomplete-input-token">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" <input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy"> role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
</li> </li>
</ul> </ul>
@ -38,7 +38,7 @@ import Ripple from '../ripple/Ripple';
export default { export default {
inheritAttrs: false, inheritAttrs: false,
props: { props: {
value: null, modelValue: null,
suggestions: { suggestions: {
type: Array, type: Array,
default: null default: null
@ -158,12 +158,12 @@ export default {
this.inputTextValue = ''; this.inputTextValue = '';
if (!this.isSelected(item)) { if (!this.isSelected(item)) {
let newValue = this.value ? [...this.value, item] : [item]; let newValue = this.modelValue ? [...this.modelValue, item] : [item];
this.$emit('input', newValue); this.$emit('update:modelValue', newValue);
} }
} }
else { else {
this.$emit('input', item); this.$emit('update:modelValue', item);
} }
this.$emit('item-select', { this.$emit('item-select', {
@ -178,9 +178,9 @@ export default {
this.focus(); this.focus();
}, },
removeItem(event, index) { removeItem(event, index) {
let removedValue = this.value[index]; let removedValue = this.modelValue[index];
let newValue = this.value.filter((val, i) => (index !== i)); let newValue = this.modelValue.filter((val, i) => (index !== i));
this.$emit('input', newValue); this.$emit('update:modelValue', newValue);
this.$emit('item-unselect', { this.$emit('item-unselect', {
originalEvent: event, originalEvent: event,
value: removedValue value: removedValue
@ -238,7 +238,7 @@ export default {
let query = event.target.value; let query = event.target.value;
if (!this.multiple) { if (!this.multiple) {
this.$emit('input', query); this.$emit('update:modelValue', query);
} }
if (query.length === 0) { if (query.length === 0) {
@ -334,11 +334,11 @@ export default {
switch(event.which) { switch(event.which) {
//backspace //backspace
case 8: case 8:
if (this.value && this.value.length && !this.$refs.input.value) { if (this.modelValue && this.modelValue.length && !this.$refs.input.value) {
let removedValue = this.value[this.value.length - 1]; let removedValue = this.modelValue[this.modelValue.length - 1];
let newValue = this.value.slice(0, -1); let newValue = this.modelValue.slice(0, -1);
this.$emit('input', newValue); this.$emit('update:modelValue', newValue);
this.$emit('item-unselect', { this.$emit('item-unselect', {
originalEvent: event, originalEvent: event,
value: removedValue value: removedValue
@ -353,9 +353,9 @@ export default {
}, },
isSelected(val) { isSelected(val) {
let selected = false; let selected = false;
if (this.value && this.value.length) { if (this.modelValue && this.modelValue.length) {
for (let i = 0; i < this.value.length; i++) { for (let i = 0; i < this.modelValue.length; i++) {
if (ObjectUtils.equals(this.value[i], val)) { if (ObjectUtils.equals(this.modelValue[i], val)) {
selected = true; selected = true;
break; break;
} }
@ -382,20 +382,11 @@ export default {
} }
}, },
computed: { computed: {
listeners() {
return {
...this.$listeners,
input: this.onInput,
focus: this.onFocus,
blur: this.onBlur,
keydown: this.onKeyDown
};
},
containerClass() { containerClass() {
return ['p-autocomplete p-component p-inputwrapper', { return ['p-autocomplete p-component p-inputwrapper', {
'p-autocomplete-dd': this.dropdown, 'p-autocomplete-dd': this.dropdown,
'p-autocomplete-multiple': this.multiple, 'p-autocomplete-multiple': this.multiple,
'p-inputwrapper-filled': ((this.value) || (this.inputTextValue && this.inputTextValue.length)), 'p-inputwrapper-filled': ((this.modelValue) || (this.inputTextValue && this.inputTextValue.length)),
'p-inputwrapper-focus': this.focused 'p-inputwrapper-focus': this.focused
}]; }];
}, },
@ -412,13 +403,13 @@ export default {
}]; }];
}, },
inputValue() { inputValue() {
if (this.value) { if (this.modelValue) {
if (this.field) { if (this.field) {
const resolvedFieldData = ObjectUtils.resolveFieldData(this.value, this.field); const resolvedFieldData = ObjectUtils.resolveFieldData(this.modelValue, this.field);
return resolvedFieldData != null ? resolvedFieldData : this.value; return resolvedFieldData != null ? resolvedFieldData : this.modelValue;
} }
else else
return this.value; return this.modelValue;
} }
else { else {
return ''; return '';