vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #5479 - Checkbox: new indeterminate state

Browse source
This commit is contained in:
tugcekucukoglu 2024-03-27 11:40:37 +03:00
parent 5486ec46fe
commit c696989964
5 changed files with 36 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/lib/checkbox/BaseCheckbox.vue
View file

@ -13,6 +13,10 @@ export default {
type: String,
default: null
},
indeterminate: {
type: Boolean,
default: false
},
trueValue: {
type: null,
default: true

5
components/lib/checkbox/Checkbox.d.ts vendored
View file

@ -111,6 +111,11 @@ export interface CheckboxProps {
* @default false
*/
binary?: boolean;
/**
* When present, it specifies input state as indeterminate.
* @default false
*/
indeterminate?: boolean | undefined;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false

31
components/lib/checkbox/Checkbox.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"
@ -15,6 +15,7 @@
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:aria-invalid="invalid || undefined"
:aria-checked="d_indeterminate ? 'mixed' : undefined"
@focus="onFocus"
@blur="onBlur"
@change="onChange"
@ -23,6 +24,7 @@
<div :class="cx('box')" v-bind="getPTOptions('box')">
<slot name="icon" :checked="checked" :class="cx('icon')">
<CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" />
<MinusIcon v-else-if="d_indeterminate" :class="cx('icon')" v-bind="getPTOptions('icon')" />
</slot>
</div>
</div>
@ -30,6 +32,7 @@
<script>
import CheckIcon from 'primevue/icons/check';
import MinusIcon from 'primevue/icons/minus';
import { ObjectUtils } from 'primevue/utils';
import BaseCheckbox from './BaseCheckbox.vue';
@ -37,7 +40,17 @@ export default {
name: 'Checkbox',
extends: BaseCheckbox,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],
data() {
return {
d_indeterminate: this.indeterminate
};
},
watch: {
indeterminate(newValue) {
this.d_indeterminate = newValue;
}
},
methods: {
getPTOptions(key) {
const _ptm = key === 'root' ? this.ptmi : this.ptm;
@ -54,12 +67,17 @@ export default {
let newModelValue;
if (this.binary) {
newModelValue = this.checked ? this.falseValue : this.trueValue;
newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
} else {
if (this.checked) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
}
if (this.d_indeterminate) {
this.d_indeterminate = false;
this.$emit('update:indeterminate', this.d_indeterminate);
}
this.$emit('update:modelValue', newModelValue);
this.$emit('change', event);
}
@ -73,11 +91,12 @@ export default {
},
computed: {
checked() {
return this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
}
},
components: {
CheckIcon
CheckIcon,
MinusIcon
}
};
</script>