Fixed #1470 - Add trueValue-falseValue to InputSwitch
parent
3a854247be
commit
53a69ebd72
|
@ -16,6 +16,18 @@ const InputSwitchProps = [
|
||||||
type: "any",
|
type: "any",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Inline of the component."
|
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."
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,8 @@ interface InputSwitchProps {
|
||||||
modelValue?: boolean;
|
modelValue?: boolean;
|
||||||
class?: string;
|
class?: string;
|
||||||
style?: any;
|
style?: any;
|
||||||
|
trueValue?: any;
|
||||||
|
falseValue?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare class InputSwitch {
|
declare class InputSwitch {
|
||||||
|
|
|
@ -16,7 +16,15 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
modelValue: Boolean,
|
modelValue: Boolean,
|
||||||
class: null,
|
class: null,
|
||||||
style: null
|
style: null,
|
||||||
|
trueValue: {
|
||||||
|
type: null,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
falseValue: {
|
||||||
|
type: null,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -26,10 +34,11 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
onClick(event) {
|
onClick(event) {
|
||||||
if (!this.$attrs.disabled) {
|
if (!this.$attrs.disabled) {
|
||||||
|
const newValue = this.checked ? this.falseValue : this.trueValue;
|
||||||
this.$emit('click', event);
|
this.$emit('click', event);
|
||||||
this.$emit('update:modelValue', !this.modelValue);
|
this.$emit('update:modelValue', newValue);
|
||||||
this.$emit('change', event);
|
this.$emit('change', event);
|
||||||
this.$emit('input', !this.modelValue);
|
this.$emit('input', newValue);
|
||||||
this.$refs.input.focus();
|
this.$refs.input.focus();
|
||||||
}
|
}
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -48,11 +57,14 @@ export default {
|
||||||
return [
|
return [
|
||||||
'p-inputswitch p-component', this.class,
|
'p-inputswitch p-component', this.class,
|
||||||
{
|
{
|
||||||
'p-inputswitch-checked': this.modelValue,
|
'p-inputswitch-checked': this.checked,
|
||||||
'p-disabled': this.$attrs.disabled,
|
'p-disabled': this.$attrs.disabled,
|
||||||
'p-focus': this.focused
|
'p-focus': this.focused
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
},
|
||||||
|
checked() {
|
||||||
|
return this.modelValue === this.trueValue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,6 +67,18 @@ export default {
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Inline style of the component.</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>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue