Add form support to `RadioButton`
parent
c806a8c749
commit
2a63b3fdce
|
@ -1,30 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import BaseComponent from '@primevue/core/basecomponent';
|
import BaseInput from '@primevue/core/baseinput';
|
||||||
import RadioButtonStyle from 'primevue/radiobutton/style';
|
import RadioButtonStyle from 'primevue/radiobutton/style';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BaseRadioButton',
|
name: 'BaseRadioButton',
|
||||||
extends: BaseComponent,
|
extends: BaseInput,
|
||||||
props: {
|
props: {
|
||||||
value: null,
|
value: null,
|
||||||
modelValue: null,
|
|
||||||
binary: Boolean,
|
binary: Boolean,
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
variant: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
invalid: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
readonly: {
|
readonly: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default {
|
||||||
name: 'RadioButton',
|
name: 'RadioButton',
|
||||||
extends: BaseRadioButton,
|
extends: BaseRadioButton,
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
emits: ['update:modelValue', 'change', 'focus', 'blur'],
|
emits: ['change', 'focus', 'blur'],
|
||||||
methods: {
|
methods: {
|
||||||
getPTOptions(key) {
|
getPTOptions(key) {
|
||||||
const _ptm = key === 'root' ? this.ptmi : this.ptm;
|
const _ptm = key === 'root' ? this.ptmi : this.ptm;
|
||||||
|
@ -49,7 +49,7 @@ export default {
|
||||||
if (!this.disabled && !this.readonly) {
|
if (!this.disabled && !this.readonly) {
|
||||||
const newModelValue = this.binary ? !this.checked : this.value;
|
const newModelValue = this.binary ? !this.checked : this.value;
|
||||||
|
|
||||||
this.$emit('update:modelValue', newModelValue);
|
this.updateValue(newModelValue, event);
|
||||||
this.$emit('change', event);
|
this.$emit('change', event);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -58,11 +58,12 @@ export default {
|
||||||
},
|
},
|
||||||
onBlur(event) {
|
onBlur(event) {
|
||||||
this.$emit('blur', event);
|
this.$emit('blur', event);
|
||||||
|
this.formField.onBlur?.(event);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
checked() {
|
checked() {
|
||||||
return this.modelValue != null && (this.binary ? !!this.modelValue : equals(this.modelValue, this.value));
|
return this.d_value != null && (this.binary ? !!this.d_value : equals(this.d_value, this.value));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -125,8 +125,8 @@ const classes = {
|
||||||
{
|
{
|
||||||
'p-radiobutton-checked': instance.checked,
|
'p-radiobutton-checked': instance.checked,
|
||||||
'p-disabled': props.disabled,
|
'p-disabled': props.disabled,
|
||||||
'p-invalid': props.invalid,
|
'p-invalid': instance.$invalid,
|
||||||
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
|
'p-variant-filled': instance.$variant === 'filled'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
box: 'p-radiobutton-box',
|
box: 'p-radiobutton-box',
|
||||||
|
|
Loading…
Reference in New Issue