Fixed #1583 - Add trueValue-falseValue to Checkbox v2

primefaces · Sep 22, 2021 · 40b25fb · 40b25fb
1 parent 42e135b
commit 40b25fb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js
@@ -10,6 +10,18 @@ const CheckboxProps = [
         type: "boolean",
         default: "false",
         description: "Allows to select a boolean value instead of multiple values."
+    },
+    {
+        name: "trueValue",
+        type: "any",
+        default: "true",
+        description: "Value in checked state."
+    },
+    {
+        name: "falseValue",
+        type: "any",
+        default: "true",
+        description: "Value in unchecked state."
     }
 ];
 

diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
@@ -4,6 +4,8 @@ declare class Checkbox extends Vue {
     value?: null;
     modelValue?: null;
     binary?: boolean;
+    trueValue?: any;
+    falseValue?: any;
     $emit(eventName: 'click', event: Event): this;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', event: Event): this;

diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
@@ -17,7 +17,15 @@ export default {
     props: {
         value: null,
         modelValue: null,
-        binary: Boolean
+        binary: Boolean,
+        trueValue: {
+            type: null,
+            default: true
+        },
+        falseValue: {
+            type: null,
+            default: false
+        }
     },
     model: {
         prop: 'modelValue',
@@ -34,7 +42,7 @@ export default {
                 let newModelValue;
 
                 if (this.binary) {
-                    newModelValue = !this.modelValue;
+                    newModelValue = this.checked ? this.falseValue : this.trueValue;
                 }
                 else {
                     if (this.checked)
@@ -60,7 +68,7 @@ export default {
     },
     computed: {
         checked() {
-            return this.binary ? this.modelValue : ObjectUtils.contains(this.value, this.modelValue);
+            return this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
         },
         containerClass() {
             return ['p-checkbox p-component', {'p-checkbox-checked': this.checked, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];

diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
@@ -59,6 +59,18 @@ export default {
                                 <td>boolean</td>
                                 <td>false</td>
                                 <td>Allows to select a boolean value instead of multiple values.</td>
+                            </tr>
+                            <tr>
+                                <td>trueValue</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Value in checked state.</td>
+                            </tr>
+                            <tr>
+                                <td>falseValue</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Value in unchecked state.</td>
                             </tr>
 						</tbody>
 					</table>