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

Fixed #5479 - Checkbox: new indeterminate state

pull/5507/head
tugcekucukoglu 2024-03-27 11:40:37 +03:00
parent 5486ec46fe
commit c696989964
5 changed files with 36 additions and 11 deletions
Show Stats 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>

3
components/lib/tree/TreeNode.vue
View File

@ -26,10 +26,9 @@
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
</template>
</button>
<Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :class="cx('nodeCheckbox')" :tabindex="-1" :unstyled="unstyled" :pt="getPTOptions('nodeCheckbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
<Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :indeterminate="partialChecked" :class="cx('nodeCheckbox')" :tabindex="-1" :unstyled="unstyled" :pt="getPTOptions('nodeCheckbox')" :data-p-partialchecked="partialChecked">
<template #icon="slotProps">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="slotProps.checked" :partialChecked="partialChecked" :class="slotProps.class" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getPTOptions('nodeCheckbox.icon')" />
</template>
</Checkbox>
<component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]"></component>

4
components/lib/treetable/BodyCell.vue
View File

@ -18,15 +18,13 @@
:class="cx('rowCheckbox')"
@change="toggleCheckbox"
:tabindex="-1"
:indeterminate="partialChecked"
:unstyled="unstyled"
:pt="getColumnCheckboxPT('rowCheckbox')"
:data-p-highlight="checked"
:data-p-checked="checked"
:data-p-partialchecked="partialChecked"
>
<template #icon="slotProps">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="slotProps.checked" :partialChecked="partialChecked" :class="slotProps.class" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getColumnCheckboxPT('rowCheckbox.icon')" />
</template>
</Checkbox>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />