Fixed #5479 - Checkbox: new indeterminate state

components/lib/checkbox/BaseCheckbox.vue

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

components/lib/checkbox/Checkbox.d.ts

@@ -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

components/lib/checkbox/Checkbox.vue

@@ -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>

components/lib/tree/TreeNode.vue

@@ -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>

components/lib/treetable/BodyCell.vue

@@ -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" />