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

Migrated chips to new v-model and $attrs api

pull/496/head
Cagatay Civici 2020-09-18 15:42:32 +03:00
parent b8b9c336d7
commit 24b45d3664
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/chips/Chips.vue
View File

@ -1,14 +1,14 @@
<template>
<div :class="containerClass">
<div :class="containerClass" :style="style">
<ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
<li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token">
<li v-for="(val,i) of modelValue" :key="`${i}_${val}`" class="p-chips-token">
<slot name="chip" :value="val">
<span class="p-chips-token-label">{{val}}</span>
<span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
</slot>
</li>
<li class="p-chips-input-token">
<input ref="input" type="text" @focus="onFocus($event)" @blur="onBlur($event)" :placeholder="placeholder" @input="inputValue = $event.target.value"
<input ref="input" type="text" v-bind="$attrs" @focus="onFocus" @blur="onBlur($event)" :placeholder="placeholder" @input="onInput"
@keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
</li>
</ul>
@ -17,8 +17,9 @@
<script>
export default {
inheritAttrs: false,
props: {
value: {
modelValue: {
type: Array,
default: null
},
@ -45,7 +46,9 @@ export default {
placeholder: {
type: String,
default: null
}
},
class: null,
style: null
},
data() {
return {
@ -57,16 +60,17 @@ export default {
onWrapperClick() {
this.$refs.input.focus();
},
onFocus(event) {
onInput(event) {
this.inputValue = event.target.value;
},
onFocus() {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
if (this.addOnBlur) {
this.addItem(event, event.target.value, false);
}
this.$emit('blur', event);
},
onKeyDown(event) {
const inputValue = event.target.value;
@ -74,8 +78,8 @@ export default {
switch(event.which) {
//backspace
case 8:
if (inputValue.length === 0 && this.value && this.value.length > 0) {
this.removeItem(event, this.value.length - 1);
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
this.removeItem(event, this.modelValue.length - 1);
}
break;
@ -99,7 +103,7 @@ export default {
if (this.separator) {
let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
if (pastedData) {
let value = this.value || [];
let value = this.modelValue || [];
let pastedValues = pastedData.split(this.separator);
pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
value = [...value, ...pastedValues];
@ -108,7 +112,7 @@ export default {
}
},
updateModel(event, value, preventDefault) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
this.$emit('add', {
originalEvent: event,
value: value
@ -122,7 +126,7 @@ export default {
},
addItem(event, item, preventDefault) {
if (item && item.trim().length) {
let value = this.value ? [...this.value]: [];
let value = this.modelValue ? [...this.modelValue]: [];
if (this.allowDuplicate || value.indexOf(item) === -1) {
value.push(item);
this.updateModel(event, value, preventDefault);
@ -134,9 +138,9 @@ export default {
return;
}
let values = [...this.value];
let values = [...this.modelValue];
const removedItem = values.splice(index, 1);
this.$emit('input', values);
this.$emit('update:modelValue', values);
this.$emit('remove', {
originalEvent: event,
value: removedItem
@ -145,11 +149,11 @@ export default {
},
computed: {
maxedOut() {
return this.max && this.value && this.max === this.value.length;
return this.max && this.modelValue && this.max === this.modelValue.length;
},
containerClass() {
return ['p-chips p-component p-inputwrapper', {
'p-inputwrapper-filled': ((this.value && this.value.length) || (this.inputValue && this.inputValue.length)),
return ['p-chips p-component p-inputwrapper', this.class, {
'p-inputwrapper-filled': ((this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length)),
'p-inputwrapper-focus': this.focused
}];
}