vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add form support to `Checkbox`

pull/6632/head
Mert Sincan 2024-10-18 16:41:44 +01:00
parent a7a1cc35f4
commit 96e23250ca
3 changed files with 10 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/primevue/src/checkbox/BaseCheckbox.vue
View File

@ -1,18 +1,13 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseInput from '@primevue/core/baseinput';
import CheckboxStyle from 'primevue/checkbox/style'; import CheckboxStyle from 'primevue/checkbox/style';
export default { export default {
name: 'BaseCheckbox', name: 'BaseCheckbox',
extends: BaseComponent, extends: BaseInput,
props: { props: {
value: null, value: null,
modelValue: null,
binary: Boolean, binary: Boolean,
name: {
type: String,
default: null
},
indeterminate: { indeterminate: {
type: Boolean, type: Boolean,
default: false default: false
@ -25,18 +20,6 @@ export default {
type: null, type: null,
default: false default: false
}, },
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

11
packages/primevue/src/checkbox/Checkbox.vue
View File

@ -40,7 +40,7 @@ export default {
name: 'Checkbox', name: 'Checkbox',
extends: BaseCheckbox, extends: BaseCheckbox,
inheritAttrs: false, inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'], emits: ['change', 'focus', 'blur', 'update:indeterminate'],
data() { data() {
return { return {
d_indeterminate: this.indeterminate d_indeterminate: this.indeterminate
@ -70,8 +70,8 @@ export default {
if (this.binary) { if (this.binary) {
newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue; newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
} else { } else {
if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !equals(val, this.value)); if (this.checked || this.d_indeterminate) newModelValue = this.d_value.filter((val) => !equals(val, this.value));
else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; else newModelValue = this.d_value ? [...this.d_value, this.value] : [this.value];
} }
if (this.d_indeterminate) { if (this.d_indeterminate) {
@ -79,7 +79,7 @@ export default {
this.$emit('update:indeterminate', this.d_indeterminate); this.$emit('update:indeterminate', this.d_indeterminate);
} }
this.$emit('update:modelValue', newModelValue); this.updateValue(newModelValue, event);
this.$emit('change', event); this.$emit('change', event);
} }
}, },
@ -88,11 +88,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.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : contains(this.value, this.modelValue); return this.d_indeterminate ? false : this.binary ? this.d_value === this.trueValue : contains(this.value, this.d_value);
} }
}, },
components: { components: {

4
packages/primevue/src/checkbox/style/CheckboxStyle.js
View File

@ -120,8 +120,8 @@ const classes = {
{ {
'p-checkbox-checked': instance.checked, 'p-checkbox-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-checkbox-box', box: 'p-checkbox-box',