Merge branch 'primefaces:master' into Tooltip_autohide

primefaces · Sep 7, 2023 · e70380c · e70380c
2 parents f9e259e + 78ce9d1
commit e70380c
Show file tree

Hide file tree

Showing 34 changed files with 467 additions and 134 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
@@ -106,7 +106,7 @@
         >
             <template #icon>
                 <slot name="dropdownicon" :class="dropdownIcon">
-                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />
                 </slot>
             </template>
         </Button>

diff --git a/components/lib/breadcrumb/Breadcrumb.vue b/components/lib/breadcrumb/Breadcrumb.vue
@@ -2,7 +2,7 @@
     <nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
         <ol :class="cx('menu')" v-bind="ptm('menu')">
             <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
-            <template v-for="(item, i) of model" :key="item.label">
+            <template v-for="(item, i) of model" :key="item.label + '_' + i">
                 <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
                     <slot name="separator">
                         <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />

diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
@@ -753,15 +753,21 @@ export interface CalendarSlots {
     }): VNode[];
     /**
      * Custom dropdown icon template.
+     * @param {Object} scope - dropdown icon slot's params.
      */
-    dropdownicon(): VNode[];
+    dropdownicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom previous icon template.
      * @param {Object} scope - previous icon slot's params.
      */
     previousicon(scope: {
         /**
-         * Style class of the dropdown icon
+         * Style class of the previous icon
          */
         class: any;
     }): VNode[];
@@ -771,7 +777,7 @@ export interface CalendarSlots {
      */
     nexticon(scope: {
         /**
-         * Style class of the dropdown icon
+         * Style class of the next icon
          */
         class: any;
     }): VNode[];
@@ -781,7 +787,7 @@ export interface CalendarSlots {
      */
     incrementicon(scope: {
         /**
-         * Style class of the dropdown icon
+         * Style class of the increment icon
          */
         class: any;
     }): VNode[];
@@ -791,7 +797,7 @@ export interface CalendarSlots {
      */
     decrementicon(scope: {
         /**
-         * Style class of the dropdown icon
+         * Style class of the decrement icon
          */
         class: any;
     }): VNode[];

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
@@ -42,8 +42,8 @@
             data-pc-section="dropdownbutton"
         >
             <template #icon>
-                <slot name="dropdownicon">
-                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="icon" />
+                <slot name="dropdownicon" :class="icon">
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />
                 </slot>
             </template>
         </CalendarButton>
@@ -86,32 +86,62 @@
                                         </slot>
                                     </button>
                                     <div :class="cx('title')" v-bind="ptm('title')">
-                                        <button
-                                            v-if="currentView === 'date'"
-                                            type="button"
-                                            @click="switchToMonthView"
-                                            @keydown="onContainerButtonKeydown"
-                                            :class="cx('monthTitle')"
-                                            :disabled="switchViewButtonDisabled"
-                                            :aria-label="$primevue.config.locale.chooseMonth"
-                                            v-bind="ptm('monthTitle')"
-                                            data-pc-group-section="view"
-                                        >
-                                            {{ getMonthName(month.month) }}
-                                        </button>
-                                        <button
-                                            v-if="currentView !== 'year'"
-                                            type="button"
-                                            @click="switchToYearView"
-                                            @keydown="onContainerButtonKeydown"
-                                            :class="cx('yearTitle')"
-                                            :disabled="switchViewButtonDisabled"
-                                            :aria-label="$primevue.config.locale.chooseYear"
-                                            v-bind="ptm('yearTitle')"
-                                            data-pc-group-section="view"
-                                        >
-                                            {{ getYear(month) }}
-                                        </button>
+                                        <template v-if="$primevue.config.locale.showMonthAfterYear">
+                                            <button
+                                                v-if="currentView !== 'year'"
+                                                type="button"
+                                                @click="switchToYearView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('yearTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseYear"
+                                                v-bind="ptm('yearTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getYear(month) }}
+                                            </button>
+                                            <button
+                                                v-if="currentView === 'date'"
+                                                type="button"
+                                                @click="switchToMonthView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('monthTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseMonth"
+                                                v-bind="ptm('monthTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getMonthName(month.month) }}
+                                            </button>
+                                        </template>
+                                        <template v-else>
+                                            <button
+                                                v-if="currentView === 'date'"
+                                                type="button"
+                                                @click="switchToMonthView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('monthTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseMonth"
+                                                v-bind="ptm('monthTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getMonthName(month.month) }}
+                                            </button>
+                                            <button
+                                                v-if="currentView !== 'year'"
+                                                type="button"
+                                                @click="switchToYearView"
+                                                @keydown="onContainerButtonKeydown"
+                                                :class="cx('yearTitle')"
+                                                :disabled="switchViewButtonDisabled"
+                                                :aria-label="$primevue.config.locale.chooseYear"
+                                                v-bind="ptm('yearTitle')"
+                                                data-pc-group-section="view"
+                                            >
+                                                {{ getYear(month) }}
+                                            </button>
+                                        </template>
                                         <span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
                                             <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
                                         </span>

diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
@@ -892,6 +892,10 @@ export interface ColumnSlots {
      * @param {Object} scope - row toggler icon slot's params.
      */
     rowtogglericon(scope: {
+        /**
+         * Style class of the row toggler icon.
+         */
+        class: string;
         /**
          * Current row expanded state.
          */

diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
@@ -326,6 +326,7 @@ export interface PrimeVueLocaleOptions {
     today?: string;
     weekHeader?: string;
     firstDayOfWeek?: number;
+    showMonthAfterYear?: boolean;
     dateFormat?: string;
     weak?: string;
     medium?: string;

diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
@@ -59,6 +59,7 @@ export const defaultOptions = {
         today: 'Today',
         weekHeader: 'Wk',
         firstDayOfWeek: 0,
+        showMonthAfterYear: false,
         dateFormat: 'mm/dd/yy',
         weak: 'Weak',
         medium: 'Medium',

diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
@@ -63,7 +63,7 @@
                 v-bind="getColumnPT('rowToggler')"
                 data-pc-group-section="rowactionbutton"
             >
-                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
+                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :class="cx('rowTogglerIcon')" :rowExpanded="isRowExpanded" />
                 <template v-else>
                     <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
                     <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />

diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
@@ -87,7 +87,7 @@
                                     :pt="getColumnPT('filterMatchModeDropdown')"
                                     data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
-                                <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
+                                <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"

diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
@@ -1211,19 +1211,63 @@ export interface DataTableSlots {
     /**
      * Custom paginator first page link icon template.
      */
-    paginatorfirstpagelinkicon(): VNode[];
+    paginatorfirstpagelinkicon(scope: {
+        /**
+         * Style class of the paginator first page link icon.
+         * @param {Object} scope - paginatorfirstpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator previous page link icon template.
      */
-    paginatorprevpagelinkicon(): VNode[];
+    paginatorprevpagelinkicon(scope: {
+        /**
+         * Style class of the paginator prev page link icon.
+         * @param {Object} scope - paginatorprevpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator next page link icon template.
      */
-    paginatornextpagelinkicon(): VNode[];
+    paginatornextpagelinkicon(scope: {
+        /**
+         * Style class of the paginator next page link icon.
+         * @param {Object} scope - paginatornextpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom paginator last page link icon template.
      */
-    paginatorlastpagelinkicon(): VNode[];
+    paginatorlastpagelinkicon(scope: {
+        /**
+         * Style class of the paginator last page link icon.
+         * @param {Object} scope - paginatorlastpagelinkicon's params.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorrowsperpagedropdownicon template.
+     * @param {Object} scope - paginatorrowsperpagedropdownicon's params.
+     */
+    paginatorrowsperpagedropdownicon(scope: {
+        /**
+         * Style class of the paginator rows per page dropdown icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom paginatorjumptopagedropdownicon template.
+     * @param {Object} scope - paginatorjumptopagedropdownicon's params.
+     */
+    paginatorjumptopagedropdownicon(scope: {
+        /**
+         * Style class of the paginator jump to page dropdown icon.
+         */
+        class: string;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.

diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
@@ -33,17 +33,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
-            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
-                <slot name="paginatorfirstpagelinkicon"></slot>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon="slotProps">
+                <slot name="paginatorfirstpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
-                <slot name="paginatorprevpagelinkicon"></slot>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon="slotProps">
+                <slot name="paginatorprevpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
-                <slot name="paginatornextpagelinkicon"></slot>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon="slotProps">
+                <slot name="paginatornextpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
-                <slot name="paginatorlastpagelinkicon"></slot>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon="slotProps">
+                <slot name="paginatorlastpagelinkicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
+                <slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
         <div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
@@ -245,17 +251,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
-            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
-                <slot name="paginatorfirstpagelinkicon"></slot>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon="slotProps">
+                <slot name="paginatorfirstpagelinkicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon="slotProps">
+                <slot name="paginatorprevpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
-                <slot name="paginatorprevpagelinkicon"></slot>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon="slotProps">
+                <slot name="paginatornextpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
-                <slot name="paginatornextpagelinkicon"></slot>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon="slotProps">
+                <slot name="paginatorlastpagelinkicon" :class="slotProps.class"></slot>
             </template>
-            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
-                <slot name="paginatorlastpagelinkicon"></slot>
+            <template v-if="$slots.paginatorjumptopagedropdownicon" #jumptopagedropdownicon="slotProps">
+                <slot name="paginatorjumptopagedropdownicon" :class="slotProps.class"></slot>
+            </template>
+            <template v-if="$slots.paginatorrowsperpagedropdownicon" #rowsperpagedropdownicon="slotProps">
+                <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
             </template>
         </DTPaginator>
         <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
@@ -710,7 +722,6 @@ export default {
         },
         onRowClick(e) {
             const event = e.originalEvent;
-            const index = e.index;
             const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
             const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
@@ -791,8 +802,10 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
+                const targetRow = e.originalEvent.target.closest('tr[data-p-selectable-row="true"]');
+
                 focusedItem.tabIndex = '-1';
-                DomHandler.find(body, 'tr[data-p-selectable-row="true"]')[index].tabIndex = '0';
+                targetRow.tabIndex = '0';
             }
         },
         onRowDblClick(e) {

diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
@@ -190,7 +190,7 @@ export default {
             default: 0
         },
         dataKey: {
-            type: String,
+            type: [String, Function],
             default: null
         },
         expandedRowIcon: {

diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
@@ -163,6 +163,7 @@ export default {
             !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onLeave() {
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
             this.$emit('hide');
         },
         onAfterLeave(el) {