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