Merge branch 'v4' of https://github.com/primefaces/primevue into v4

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

doc/checkbox/IndeterminateDoc.vue

@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>indeterminate</i> is present, the checkbox state specified as indeterminate.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox v-model="checked" indeterminate binary />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Checkbox v-model="checked" indeterminate binary />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

pages/checkbox/index.vue

@@ -18,6 +18,7 @@ import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
 import FilledDoc from '@/doc/checkbox/FilledDoc.vue';
 import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
 import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
+import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
 import PTComponent from '@/doc/checkbox/pt/index.vue';
 import ThemingDoc from '@/doc/checkbox/theming/index.vue';
@@ -36,6 +37,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                },
                 {
                     id: 'group',
                     label: 'Group',