From 3b177f64ed1f9b07b159b66460be436c1e1398c4 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 22 May 2019 17:23:04 +0300
Subject: [PATCH] Doc work on Chips

---
 src/components/chips/Chips.vue |   6 +-
 src/views/chips/ChipsDoc.vue   | 158 ++++++++++++++++-----------------
 2 files changed, 78 insertions(+), 86 deletions(-)

diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index 88e2b3d39..be3f30566 100644
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -8,7 +8,7 @@
                 </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="disabled || maxedOut">
+                <input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" :disabled="$attrs.disabled || maxedOut">
             </li>
         </ul>
     </div>
@@ -16,10 +16,8 @@
 
 <script>
 export default {
-    inheritAttrs: false,
     props: {
         value: Array,
-        disabled: Boolean,
         max: Number
     },
     data() {
@@ -68,7 +66,7 @@ export default {
             }
         },
         removeItem(event, index) {
-            if (this.disabled) {
+            if (this.$attrs.disabled) {
                 return;
             }
             
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index 23a3ac42e..8229c6169 100644
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -8,13 +8,13 @@ import Chips from 'primevue/chips';
 </CodeHighlight>
 
 				<h3>Getting Started</h3>
-				<p>Chips requires an array as its model.</p>
+				<p>An array as the value can be bound using the standard v-model directive.</p>
 <CodeHighlight>
 &lt;Chips v-model=&quot;value&quot; /&gt;
 </CodeHighlight>
 
 				<h3>Custom Content</h3>
-				<p>A chip is customized using a template element where the value is passed as the implicit variable.</p>
+				<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;Chips v-model=&quot;value&quot;&gt;
@@ -32,32 +32,26 @@ import Chips from 'primevue/chips';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>value</td>
-							<td>array</td>
-							<td>null</td>
-							<td>Value of the component.</td>
-						</tr>
-						<tr>
-							<td>disabled</td>
-							<td>boolean</td>
-							<td>false</td>
-							<td>When present, it specifies that the element should be disabled.</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>max</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Maximum number of entries allowed.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -66,40 +60,40 @@ import Chips from 'primevue/chips';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>input</td>
-							<td>value: New value of the component</td>
-							<td>Callback to invoke on input event of input field.</td>
-						</tr>
-						<tr>
-							<td>focus</td>
-							<td>event: Browser event</td>
-							<td>Callback to invoke when a input is focused.</td>
-						</tr>
-						<tr>
-							<td>blur</td>
-							<td>event: Browser event</td>
-							<td>Callback to invoke when a input loses focus.</td>
-						</tr>
-						<tr>
-							<td>add</td>
-							<td>originalEvent: Browser event <br/>
-								value: Added item value</td>
-							<td>Callback to invoke when a chip is added.</td>
-						</tr>
-						<tr>
-							<td>remove</td>
-							<td>originalEvent: Browser event <br/>
-								value: Removed item value</td>
-							<td>Callback to invoke when a chip is removed.</td>
-						</tr>
+                            <tr>
+                                <td>input</td>
+                                <td>value: New value</td>
+                                <td>Callback to invoke on value change.</td>
+                            </tr>
+                            <tr>
+                                <td>focus</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke when the input is focused.</td>
+                            </tr>
+                            <tr>
+                                <td>blur</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke when the input loses focus.</td>
+                            </tr>
+                            <tr>
+                                <td>add</td>
+                                <td>originalEvent: Browser event <br/>
+                                    value: Added item value</td>
+                                <td>Callback to invoke when a chip is added.</td>
+                            </tr>
+                            <tr>
+                                <td>remove</td>
+                                <td>originalEvent: Browser event <br/>
+                                    value: Removed item value</td>
+                                <td>Callback to invoke when a chip is removed.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -109,32 +103,32 @@ import Chips from 'primevue/chips';
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>p-chips</td>
-							<td>Container element</td>
-						</tr>
-						<tr>
-							<td>p-chips-token</td>
-							<td>Chip element container.</td>
-						</tr>
-						<tr>
-							<td>p-chips-token-icon</td>
-							<td>Icon of a chip.</td>
-						</tr>
-						<tr>
-							<td>p-chips-token-label</td>
-							<td>label of a chip.</td>
-						</tr>
-						<tr>
-							<td>p-chips-input-token</td>
-							<td>Container of input element.</td>
-						</tr>
+                            <tr>
+                                <td>p-chips</td>
+                                <td>Container element</td>
+                            </tr>
+                            <tr>
+                                <td>p-chips-token</td>
+                                <td>Chip element container.</td>
+                            </tr>
+                            <tr>
+                                <td>p-chips-token-icon</td>
+                                <td>Icon of a chip.</td>
+                            </tr>
+                            <tr>
+                                <td>p-chips-token-label</td>
+                                <td>label of a chip.</td>
+                            </tr>
+                            <tr>
+                                <td>p-chips-input-token</td>
+                                <td>Container of input element.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>