From dfcd5e08e2fccf5a94803435e828b0116ed2ebdc Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 22 May 2019 18:54:46 +0300 Subject: [PATCH] Docs for checkbox and radio --- src/components/checkbox/Checkbox.vue | 13 +- src/views/checkbox/CheckboxDoc.vue | 218 +++++++++--------- src/views/radiobutton/RadioButtonDoc.vue | 196 ++++++++-------- .../tristatecheckbox/TriStateCheckboxDoc.vue | 184 +++++++-------- 4 files changed, 302 insertions(+), 309 deletions(-) diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue index d4aa9fc7b..2b5e1563e 100644 --- a/src/components/checkbox/Checkbox.vue +++ b/src/components/checkbox/Checkbox.vue @@ -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); } } } diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue index 632c4e743..e5fdf9f48 100644 --- a/src/views/checkbox/CheckboxDoc.vue +++ b/src/views/checkbox/CheckboxDoc.vue @@ -10,7 +10,7 @@ import Checkbox from 'primevue/checkbox';

Getting Started

Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.

-<Checkbox id="binary" inputId="binary" v-model="checked" /> +<Checkbox v-model="checked" :binary="true" />

Multiple Values

@@ -32,77 +32,69 @@ export default { } -

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.

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

Properties

- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
inputIdstringnullUnique identifier of the inner native checkbox.
valueanynullValue of the checkbox.
namestringnullName of the checkbox element .
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
modelValueanynullValue of the checkbox.
autocompletestringnullWhen specifies, whether or not an the element should have autocomplete enabled.
autofocusbooleanfalseWhen present, it specifies that the element should automatically get focus when the page loads.
inputIdstringnullUnique identifier of the inner native checkbox.
valueanynullValue of the checkbox.
namestringnullName of the checkbox element .
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
modelValueanynullValue of the checkbox.
autocompletestringnullWhether an the element should have autocomplete enabled.
autofocusbooleanfalseWhen present, it specifies that the element should automatically get focus when the page loads.
binarybooleanfalseAllows to select a boolean value instead of multiple values.
@@ -111,38 +103,38 @@ export default {
- - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
NameParametersDescription
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
@@ -152,28 +144,28 @@ export default {
- - - - + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
NameElement
NameElement
p-chkboxContainer element
p-chkbox-boxContainer of icon.
p-chkbox-iconIcon element.
p-chkbox-labelLabel element.
p-chkboxContainer element
p-chkbox-boxContainer of icon.
p-chkbox-iconIcon element.
p-chkbox-labelLabel element.
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue index a83881baf..a2d81afd8 100644 --- a/src/views/radiobutton/RadioButtonDoc.vue +++ b/src/views/radiobutton/RadioButtonDoc.vue @@ -37,56 +37,56 @@ export default {
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
inputIdstringnullUnique identifier of the inner native radiobutton.
namestringnullName of the checkbox element .
valueanynullValue of the radiobutton.
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
modelValueanynullValue of the checkbox.
autofocusbooleannullWhen present, it specifies that the element should automatically get focus when the page loads.
autocompletestringnullWhen specifies, whether or not an the element should have autocomplete enabled.
inputIdstringnullUnique identifier of the inner native radiobutton.
namestringnullName of the checkbox element .
valueanynullValue of the radiobutton.
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
modelValueanynullValue of the checkbox.
autofocusbooleannullWhen present, it specifies that the element should automatically get focus when the page loads.
autocompletestringnullWhether or not an the element should have autocomplete enabled.
@@ -95,38 +95,38 @@ export default {
- - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
NameParametersDescription
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
@@ -136,28 +136,28 @@ export default {
- - - - + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
NameElement
NameElement
p-radiobuttonContainer element
p-radiobutton-boxContainer of icon.
p-radiobutton-iconIcon element.
p-radiobutton-labelLabel element.
p-radiobuttonContainer element
p-radiobutton-boxContainer of icon.
p-radiobutton-iconIcon element.
p-radiobutton-labelLabel element.
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue index 2fdd022c5..90988f391 100644 --- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue +++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue @@ -17,50 +17,50 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
- - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
NameTypeDefaultDescription
inputIdstringnullUnique identifier of the native checkbox element.
valueanynullValue of the TriStateCheckbox.
namestringnullName of the checkbox element .
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
autocompletestringnullWhen specifies, whether or not an the element should have autocomplete enabled.
autofocusbooleanfalseWhen present, it specifies that the element should automatically get focus when the page loads.
inputIdstringnullUnique identifier of the native checkbox element.
valueanynullValue of the TriStateCheckbox.
namestringnullName of the checkbox element .
disabledbooleanfalseWhen present, it specifies that the element value cannot be altered.
autofocusbooleanfalseWhen present, it specifies that the element should automatically get focus when the page loads.
autocompletestringnullWhether an the element should have autocomplete enabled.
@@ -69,38 +69,38 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
- - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
NameParametersDescription
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
changeevent: Browser eventCallback to invoke on value change.
inputevent: Value of checkboxCallback to invoke on click.
clickevent: Browser eventCallback to invoke click.
focusevent: Browser eventCallback to invoke on focus.
blurevent: Browser eventCallback to invoke on blur.
@@ -110,28 +110,28 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
- - - - + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
NameElement
NameElement
p-chkboxContainer element
p-tristatechkboxContainer element
p-chkbox-boxContainer of icon.
p-chkbox-iconIcon element.
p-chkboxContainer element
p-tristatechkboxContainer element
p-chkbox-boxContainer of icon.
p-chkbox-iconIcon element.