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

158
src/views/chips/ChipsDoc.vue
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;
@ -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>