Fixed #252 - Separator, addOnBlur and allowDuplicate for Chips

src/components/chips/Chips.d.ts

@@ -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;

src/components/chips/Chips.vue

@@ -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,
+        value: {
-        max: Number,
+            type: Array,
-        ariaLabelledBy: null
+            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)) {
+                    if (inputValue && inputValue.trim().length && !this.maxedOut) {
-                        let values = this.value ? [...this.value]: [];
+                        this.addItem(event, inputValue, true);
-                        values.push(inputValue);
+                    }
-                        this.$emit('input', values);
+                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: values
+                value: value
             });
-                    }
-
             this.$refs.input.value = '';
+
+            if (preventDefault) {
                 event.preventDefault();
-                break;
+            }
+        },
+        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) {

src/views/chips/ChipsDemo.vue

@@ -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: {

src/views/chips/ChipsDoc.vue

@@ -42,10 +42,22 @@ import Chips from 'primevue/chips';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>value</td>
+                                <td>addOnBlur</td>
-                                <td>array</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to add an item when the input loses focus.</td>
+                            </tr>
+                            <tr>
+                                <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>Value of the component.</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>
@@ -54,10 +66,16 @@ import Chips from 'primevue/chips';
                                 <td>Maximum number of entries allowed.</td>
                             </tr>
                             <tr>
-                                <td>ariaLabelledBy</td>
+                                <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>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</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
 		}
 	}
 }