Doc work on Chips

pull/12/head
cagataycivici 2019-05-22 17:23:04 +03:00
parent 60801822d1
commit 3b177f64ed
2 changed files with 78 additions and 86 deletions

View File

@ -8,7 +8,7 @@
</slot> </slot>
</li> </li>
<li class="p-chips-input-token"> <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> </li>
</ul> </ul>
</div> </div>
@ -16,10 +16,8 @@
<script> <script>
export default { export default {
inheritAttrs: false,
props: { props: {
value: Array, value: Array,
disabled: Boolean,
max: Number max: Number
}, },
data() { data() {
@ -68,7 +66,7 @@ export default {
} }
}, },
removeItem(event, index) { removeItem(event, index) {
if (this.disabled) { if (this.$attrs.disabled) {
return; return;
} }

View File

@ -8,13 +8,13 @@ import Chips from 'primevue/chips';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <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> <CodeHighlight>
&lt;Chips v-model=&quot;value&quot; /&gt; &lt;Chips v-model=&quot;value&quot; /&gt;
</CodeHighlight> </CodeHighlight>
<h3>Custom Content</h3> <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> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Chips v-model=&quot;value&quot;&gt; &lt;Chips v-model=&quot;value&quot;&gt;
@ -46,12 +46,6 @@ import Chips from 'primevue/chips';
<td>null</td> <td>null</td>
<td>Value of the component.</td> <td>Value of the component.</td>
</tr> </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> <tr>
<td>max</td> <td>max</td>
<td>number</td> <td>number</td>
@ -75,18 +69,18 @@ import Chips from 'primevue/chips';
<tbody> <tbody>
<tr> <tr>
<td>input</td> <td>input</td>
<td>value: New value of the component</td> <td>value: New value</td>
<td>Callback to invoke on input event of input field.</td> <td>Callback to invoke on value change.</td>
</tr> </tr>
<tr> <tr>
<td>focus</td> <td>focus</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke when a input is focused.</td> <td>Callback to invoke when the input is focused.</td>
</tr> </tr>
<tr> <tr>
<td>blur</td> <td>blur</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke when a input loses focus.</td> <td>Callback to invoke when the input loses focus.</td>
</tr> </tr>
<tr> <tr>
<td>add</td> <td>add</td>