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>
</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;
}

View File

@ -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;
@ -46,12 +46,6 @@ import Chips from 'primevue/chips';
<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>
@ -75,18 +69,18 @@ import Chips from 'primevue/chips';
<tbody>
<tr>
<td>input</td>
<td>value: New value of the component</td>
<td>Callback to invoke on input event of input field.</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 a input is focused.</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 a input loses focus.</td>
<td>Callback to invoke when the input loses focus.</td>
</tr>
<tr>
<td>add</td>