vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/chips/Chips.vue
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;
} }

158
src/views/chips/ChipsDoc.vue
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;
@ -32,32 +32,26 @@ import Chips from 'primevue/chips';
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Value of the component.</td> <td>Value of the component.</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>max</td>
<td>boolean</td> <td>number</td>
<td>false</td> <td>null</td>
<td>When present, it specifies that the element should be disabled.</td> <td>Maximum number of entries allowed.</td>
</tr> </tr>
<tr>
<td>max</td>
<td>number</td>
<td>null</td>
<td>Maximum number of entries allowed.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -66,40 +60,40 @@ import Chips from 'primevue/chips';
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<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>
<td>originalEvent: Browser event <br/> <td>originalEvent: Browser event <br/>
value: Added item value</td> value: Added item value</td>
<td>Callback to invoke when a chip is added.</td> <td>Callback to invoke when a chip is added.</td>
</tr> </tr>
<tr> <tr>
<td>remove</td> <td>remove</td>
<td>originalEvent: Browser event <br/> <td>originalEvent: Browser event <br/>
value: Removed item value</td> value: Removed item value</td>
<td>Callback to invoke when a chip is removed.</td> <td>Callback to invoke when a chip is removed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -109,32 +103,32 @@ import Chips from 'primevue/chips';
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-chips</td> <td>p-chips</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token</td> <td>p-chips-token</td>
<td>Chip element container.</td> <td>Chip element container.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-icon</td> <td>p-chips-token-icon</td>
<td>Icon of a chip.</td> <td>Icon of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-label</td> <td>p-chips-token-label</td>
<td>label of a chip.</td> <td>label of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-input-token</td> <td>p-chips-input-token</td>
<td>Container of input element.</td> <td>Container of input element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>