From 24b45d3664eb122219ec6bdcb32e39b537190e3f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 18 Sep 2020 15:42:32 +0300
Subject: [PATCH] Migrated chips to new v-model and $attrs api

---
 src/components/chips/Chips.vue | 40 +++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index 4ba21b58a..caab9a97d 100755
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -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
             }];
         }