primevue 3.46.0 → 3.47.0

package/datatable/BaseDataTable.vue

@@ -250,6 +250,10 @@ export default {
             type: Boolean,
             default: false
         },
+        highlightOnSelect: {
+            type: Boolean,
+            default: false
+        },
         size: {
             type: String,
             default: null

package/datatable/BodyCell.vue

@@ -18,7 +18,17 @@
         :data-p-frozen-column="columnProp('frozen')"
     >
         <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
-        <component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
+        <component
+            v-if="column.children && column.children.body && !d_editing"
+            :is="column.children.body"
+            :data="rowData"
+            :column="column"
+            :field="field"
+            :index="rowIndex"
+            :frozenRow="frozenRow"
+            :editorInitCallback="editorInitCallback"
+            :rowTogglerCallback="toggleRow"
+        />
         <component
             v-else-if="column.children && column.children.editor && d_editing"
             :is="column.children.editor"

package/datatable/BodyRow.vue

@@ -276,8 +276,11 @@ export default {
         };
     },
     watch: {
-        expandedRows(newValue) {
-            this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
+        expandedRows: {
+            immediate: true,
+            handler(newValue) {
+                this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
+            }
         }
     },
     methods: {

package/datatable/ColumnFilter.vue

@@ -22,12 +22,12 @@
             <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
         </button>
         <Portal>
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
                 <div
                     v-if="overlayVisible"
                     :ref="overlayRef"
                     :id="overlayId"
-                    v-focustrap="{ autoFocus: true }"
+                    v-focustrap
                     :aria-modal="overlayVisible"
                     role="dialog"
                     :class="[cx('filterOverlay'), filterMenuClass]"
@@ -550,6 +550,9 @@ export default {
 
             OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
+        onOverlayAfterEnter() {
+            this.overlay?.$focustrap?.autoFocus();
+        },
         onOverlayLeave() {
             this.onOverlayHide();
         },

package/datatable/DataTable.d.ts

@@ -1105,6 +1105,11 @@ export interface DataTableProps {
      * @defaultValue false
      */
     stripedRows?: boolean | undefined;
+    /**
+     *  Highlights automatically the first item.
+     *  @defaultValue false
+     */
+    highlightOnSelect?: boolean | undefined;
     /**
      * Defines the size of the table.
      */

package/datatable/DataTable.vue

@@ -794,9 +794,9 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
-                if (e.originalEvent.target.getAttribute('data-pc-section') === 'rowtogglericon' || e.originalEvent.target.parentElement.getAttribute('data-pc-section') === 'rowtogglericon') return;
+                if (event.target?.getAttribute('data-pc-section') === 'rowtogglericon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtogglericon') return;
 
-                const targetRow = e.originalEvent.target.closest('tr[data-p-selectable-row="true"]');
+                const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]');
 
                 focusedItem.tabIndex = '-1';
                 targetRow.tabIndex = '0';

package/datatable/HeaderCell.vue

@@ -37,6 +37,7 @@
                 :disabled="empty"
                 :headerCheckboxIconTemplate="column.children && column.children.headercheckboxicon"
                 :column="column"
+                :unstyled="unstyled"
                 :pt="pt"
             />
             <DTColumnFilter
@@ -212,7 +213,7 @@ export default {
                 },
                 context: {
                     index: this.index,
-                    sortable: this.column.props.sortable === '' || this.column.props.sortable,
+                    sortable: this.columnProp('sortable') === '' || this.columnProp('sortable'),
                     sorted: this.isColumnSorted(),
                     resizable: this.resizableColumns,
                     size: this.$parentInstance?.$parentInstance?.size,

package/datatable/HeaderCheckbox.vue

@@ -1,29 +1,16 @@
 <template>
-    <div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                ref="input"
-                type="checkbox"
-                :checked="checked"
-                :disabled="disabled"
-                :tabindex="disabled ? null : '0'"
-                :aria-label="headerCheckboxAriaLabel"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                v-bind="getColumnPT('hiddenHeaderInput')"
-            />
-        </div>
-        <div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
-            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
-            <CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
-        </div>
-    </div>
+    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')">
+        <template #icon="slotProps">
+            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
+            <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" />
+        </template>
+    </Checkbox>
 </template>
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import Checkbox from 'primevue/checkbox';
 import CheckIcon from 'primevue/icons/check';
-import { DomHandler } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
@@ -40,11 +27,6 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
         getColumnPT(key) {
             const columnMetaData = {
@@ -56,7 +38,6 @@ export default {
                 },
                 context: {
                     checked: this.checked,
-                    focused: this.focused,
                     disabled: this.disabled
                 }
             };
@@ -66,21 +47,11 @@ export default {
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
         },
-        onClick(event) {
-            if (!this.disabled) {
-                this.$emit('change', {
-                    originalEvent: event,
-                    checked: !this.checked
-                });
-
-                DomHandler.focus(this.$refs.input);
-            }
-        },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
+        onChange(event) {
+            this.$emit('change', {
+                originalEvent: event,
+                checked: !this.checked
+            });
         }
     },
     computed: {
@@ -89,7 +60,8 @@ export default {
         }
     },
     components: {
-        CheckIcon: CheckIcon
+        CheckIcon,
+        Checkbox
     }
 };
 </script>

package/datatable/RowCheckbox.vue

@@ -1,30 +1,16 @@
 <template>
-    <div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                ref="input"
-                type="checkbox"
-                :checked="checked"
-                :disabled="$attrs.disabled"
-                :tabindex="$attrs.disabled ? null : '0'"
-                :aria-label="checkboxAriaLabel"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                @keydown="onKeydown"
-                v-bind="getColumnPT('hiddenInput')"
-            />
-        </div>
-        <div ref="box" :class="cx('checkbox')" v-bind="getColumnPT('checkbox')">
-            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
-            <CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
-        </div>
-    </div>
+    <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowCheckbox')">
+        <template #icon="slotProps">
+            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
+            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" />
+        </template>
+    </Checkbox>
 </template>
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import Checkbox from 'primevue/checkbox';
 import CheckIcon from 'primevue/icons/check';
-import { DomHandler } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
@@ -45,11 +31,6 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
         getColumnPT(key) {
             const columnMetaData = {
@@ -62,7 +43,6 @@ export default {
                 context: {
                     index: this.index,
                     checked: this.checked,
-                    focused: this.focused,
                     disabled: this.$attrs.disabled
                 }
             };
@@ -72,35 +52,12 @@ export default {
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
         },
-        onClick(event) {
+        onChange(event) {
             if (!this.$attrs.disabled) {
                 this.$emit('change', {
                     originalEvent: event,
                     data: this.value
                 });
-
-                DomHandler.focus(this.$refs.input);
-            }
-
-            event.preventDefault();
-            event.stopPropagation();
-        },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
-        },
-        onKeydown(event) {
-            switch (event.code) {
-                case 'Space': {
-                    this.onClick(event);
-
-                    break;
-                }
-
-                default:
-                    break;
             }
         }
     },
@@ -110,7 +67,8 @@ export default {
         }
     },
     components: {
-        CheckIcon: CheckIcon
+        CheckIcon,
+        Checkbox
     }
 };
 </script>

package/datatable/RowRadioButton.vue

@@ -1,24 +1,16 @@
 <template>
-    <div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
-        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
-        </div>
-        <div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
-            <div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
-        </div>
-    </div>
+    <RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowRadiobutton')" />
 </template>
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { DomHandler } from 'primevue/utils';
+import RadioButton from 'primevue/radiobutton';
 import { mergeProps } from 'vue';
 
 export default {
     name: 'RowRadioButton',
     hostName: 'DataTable',
     extends: BaseComponent,
-    inheritAttrs: false,
     emits: ['change'],
     props: {
         value: null,
@@ -30,11 +22,6 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
         getColumnPT(key) {
             const columnMetaData = {
@@ -47,7 +34,6 @@ export default {
                 context: {
                     index: this.index,
                     checked: this.checked,
-                    focused: this.focused,
                     disabled: this.$attrs.disabled
                 }
             };
@@ -57,24 +43,17 @@ export default {
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
         },
-        onClick(event) {
-            if (!this.disabled) {
-                if (!this.checked) {
-                    this.$emit('change', {
-                        originalEvent: event,
-                        data: this.value
-                    });
-
-                    DomHandler.focus(this.$refs.input);
-                }
+        onChange(event) {
+            if (!this.$attrs.disabled) {
+                this.$emit('change', {
+                    originalEvent: event,
+                    data: this.value
+                });
             }
-        },
-        onFocus() {
-            this.focused = true;
-        },
-        onBlur() {
-            this.focused = false;
         }
+    },
+    components: {
+        RadioButton
     }
 };
 </script>

package/datatable/TableHeader.vue

@@ -36,6 +36,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :unstyled="unstyled"
                         :pt="pt"
                     />
                 </template>
@@ -48,7 +49,7 @@
                         :class="getFilterColumnHeaderClass(col)"
                         v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
                     >
-                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
+                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :unstyled="unstyled" :pt="pt" />
                         <DTColumnFilter
                             v-if="col.children && col.children.filter"
                             :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
@@ -118,6 +119,7 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :unstyled="unstyled"
                         :pt="pt"
                     />
                 </template>