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

Docs for checkbox and radio

pull/12/head
cagataycivici 2019-05-22 18:54:46 +03:00
parent 624b67350d
commit dfcd5e08e2
4 changed files with 302 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/checkbox/Checkbox.vue
View File

@ -21,7 +21,8 @@ export default {
inputId: String,
autofocus: Boolean,
autocomplete: String,
disabled: Boolean
disabled: Boolean,
binary: Boolean
},
model: {
prop: 'modelValue',
@ -37,15 +38,15 @@ export default {
if (!this.disabled) {
let newModelValue;
if (Array.isArray(this.modelValue)) {
if (this.binary) {
newModelValue = !this.modelValue;
}
else {
if (this.checked)
newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
else
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
}
else {
newModelValue = !this.modelValue;
}
this.$emit('click', event);
this.$emit('input', newModelValue);
@ -64,7 +65,7 @@ export default {
},
computed: {
checked() {
return Array.isArray(this.modelValue) ? ObjectUtils.contains(this.value, this.modelValue) : this.modelValue;
return this.binary ? this.modelValue : ObjectUtils.contains(this.value, this.modelValue);
}
}
}

24
src/views/checkbox/CheckboxDoc.vue
View File

@ -10,7 +10,7 @@ import Checkbox from 'primevue/checkbox';
<h3>Getting Started</h3>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<CodeHighlight>
&lt;Checkbox id=&quot;binary&quot; inputId=&quot;binary&quot; v-model=&quot;checked&quot; /&gt;
&lt;Checkbox v-model=&quot;checked&quot; :binary="true" /&gt;
</CodeHighlight>
<h3>Multiple Values</h3>
@ -32,22 +32,8 @@ export default {
}
</CodeHighlight>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related
checkboxes as checked by default.</p>
<CodeHighlight lang="js">
export default {
data() {
return {
themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
selectedThemes: []
}
},
created() {
this.selectedThemes = this.themes.slice(1,3);
}
}
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
@ -95,13 +81,19 @@ export default {
<td>autocomplete</td>
<td>string</td>
<td>null</td>
<td>When specifies, whether or not an the element should have autocomplete enabled.</td>
<td>Whether an the element should have autocomplete enabled.</td>
</tr>
<tr>
<td>autofocus</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should automatically get focus when the page loads.</td>
</tr>
<tr>
<td>binary</td>
<td>boolean</td>
<td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td>
</tr>
</tbody>
</table>

2
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -85,7 +85,7 @@ export default {
<td>autocomplete</td>
<td>string</td>
<td>null</td>
<td>When specifies, whether or not an the element should have autocomplete enabled.</td>
<td>Whether or not an the element should have autocomplete enabled.</td>
</tr>
</tbody>
</table>

12
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -49,17 +49,17 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
<td>false</td>
<td>When present, it specifies that the element value cannot be altered.</td>
</tr>
<tr>
<td>autocomplete</td>
<td>string</td>
<td>null</td>
<td>When specifies, whether or not an the element should have autocomplete enabled.</td>
</tr>
<tr>
<td>autofocus</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should automatically get focus when the page loads.</td>
</tr>
<tr>
<td>autocomplete</td>
<td>string</td>
<td>null</td>
<td>Whether an the element should have autocomplete enabled.</td>
</tr>
</tbody>
</table>