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

Fixed #252 - Separator, addOnBlur and allowDuplicate for Chips

pull/310/head
cagataycivici 2020-04-07 12:22:46 +03:00
parent c15d8f7cee
commit a9fe3617e4
4 changed files with 113 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/chips/Chips.d.ts vendored
View File

@ -4,6 +4,9 @@ export declare class Chips extends Vue {
value?: any[];
max?: number;
ariaLabelledBy?: string;
addOnBlur?: boolean;
allowDuplicate?: boolean;
separator?: string;
$emit(eventName: 'focus', event: Event): this;
$emit(eventName: 'blur', event: Event): this;
$emit(eventName: 'input', value: any[]): this;

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

@ -8,7 +8,8 @@
</slot>
</li>
<li class="p-chips-input-token">
<input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
<input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)"
@keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
</li>
</ul>
</div>
@ -17,9 +18,30 @@
<script>
export default {
props: {
value: Array,
max: Number,
ariaLabelledBy: null
value: {
type: Array,
default: null
},
max: {
type: Number,
default: null
},
separator: {
type: String,
default: null
},
ariaLabelledBy: {
type: String,
default: null
},
addOnBlur: {
type: Boolean,
default: null
},
allowDuplicate: {
type: Boolean,
default: true
}
},
data() {
return {
@ -36,6 +58,9 @@ export default {
},
onBlur(event) {
this.focused = false;
if (this.addOnBlur) {
this.addItem(event, event.target.value, false);
}
this.$emit('blur', event);
},
onKeyDown(event) {
@ -51,19 +76,51 @@ export default {
//enter
case 13:
if (inputValue && inputValue.trim().length && (!this.max || this.max > this.value.length)) {
let values = this.value ? [...this.value]: [];
values.push(inputValue);
this.$emit('input', values);
this.$emit('add', {
originalEvent: event,
value: values
});
if (inputValue && inputValue.trim().length && !this.maxedOut) {
this.addItem(event, inputValue, true);
}
this.$refs.input.value = '';
event.preventDefault();
break;
default:
if (this.separator) {
if (this.separator === ',' && event.which === 188) {
this.addItem(event, inputValue, true);
}
}
break;
}
},
onPaste(event) {
if (this.separator) {
let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
if (pastedData) {
let value = this.value || [];
let pastedValues = pastedData.split(this.separator);
pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
value = [...value, ...pastedValues];
this.updateModel(event, value, true);
}
}
},
updateModel(event, value, preventDefault) {
this.$emit('input', value);
this.$emit('add', {
originalEvent: event,
value: value
});
this.$refs.input.value = '';
if (preventDefault) {
event.preventDefault();
}
},
addItem(event, item, preventDefault) {
if (item && item.trim().length) {
let value = this.value ? [...this.value]: [];
if (this.allowDuplicate || value.indexOf(item) === -1) {
value.push(item);
this.updateModel(event, value, preventDefault);
}
}
},
removeItem(event, index) {

8
src/views/chips/ChipsDemo.vue
View File

@ -11,8 +11,11 @@
<h3 class="first">Basic</h3>
<Chips v-model="value1" />
<h3>Comma Separator</h3>
<Chips v-model="value2" separator="," />
<h3>Template</h3>
<Chips v-model="value2">
<Chips v-model="value3">
<template #chip="slotProps">
<div>
<span>{{slotProps.value}} - (active) </span>
@ -33,7 +36,8 @@ export default {
data() {
return {
value1: null,
value2: null
value2: null,
value3: null
}
},
components: {

42
src/views/chips/ChipsDoc.vue
View File

@ -42,22 +42,40 @@ import Chips from 'primevue/chips';
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
<td>addOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>Whether to add an item when the input loses focus.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
<td>allowDuplicate</td>
<td>boolean</td>
<td>true</td>
<td>Whether to allow duplicate values or not.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr>
</tbody>
</table>
@ -153,8 +171,11 @@ import Chips from 'primevue/chips';
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Chips v-model="value1" /&gt;
&lt;h3&gt;Comma Separator&lt;/h3&gt;
&lt;Chips v-model="value2" separator="," /&gt;
&lt;h3&gt;Template&lt;/h3&gt;
&lt;Chips v-model="value2"&gt;
&lt;Chips v-model="value3"&gt;
&lt;template #chip="slotProps"&gt;
&lt;div&gt;
&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt;
@ -170,7 +191,8 @@ export default {
data() {
return {
value1: null,
value2: null
value2: null,
value3: null
}
}
}