Fixed #1470 - Add trueValue-falseValue to InputSwitch

primefaces · Aug 25, 2021 · 53a69eb · 53a69eb
1 parent 3a85424
commit 53a69eb
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/api-generator/components/inputswitch.js b/api-generator/components/inputswitch.js
@@ -16,6 +16,18 @@ const InputSwitchProps = [
         type: "any",
         default: "null",
         description: "Inline of the component."
+    },
+    {
+        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/inputswitch/InputSwitch.d.ts b/src/components/inputswitch/InputSwitch.d.ts
@@ -2,6 +2,8 @@ interface InputSwitchProps {
     modelValue?: boolean;
     class?: string;
     style?: any;
+    trueValue?: any;
+    falseValue?: any;
 }
 
 declare class InputSwitch {

diff --git a/src/components/inputswitch/InputSwitch.vue b/src/components/inputswitch/InputSwitch.vue
@@ -16,7 +16,15 @@ export default {
     props: {
         modelValue: Boolean,
         class: null,
-        style: null
+        style: null,
+        trueValue: {
+            type: null,
+            default: true
+        },
+        falseValue: {
+            type: null,
+            default: false
+        }
     },
     data() {
         return {
@@ -26,10 +34,11 @@ export default {
     methods: {
         onClick(event) {
             if (!this.$attrs.disabled) {
+                const newValue = this.checked ? this.falseValue : this.trueValue;
                 this.$emit('click', event);
-                this.$emit('update:modelValue', !this.modelValue);
+                this.$emit('update:modelValue', newValue);
                 this.$emit('change', event);
-                this.$emit('input', !this.modelValue);
+                this.$emit('input', newValue);
                 this.$refs.input.focus();
             }
             event.preventDefault();
@@ -48,11 +57,14 @@ export default {
             return [
                 'p-inputswitch p-component', this.class,
                 {
-                    'p-inputswitch-checked': this.modelValue,
+                    'p-inputswitch-checked': this.checked,
 					'p-disabled': this.$attrs.disabled,
                     'p-focus': this.focused
                 }
             ];
+        },
+        checked() {
+            return this.modelValue === this.trueValue;
         }
     }
 }

diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
@@ -67,6 +67,18 @@ export default {
                         <td>string</td>
                         <td>null</td>
                         <td>Inline style of the component.</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>