primevue 3.34.0 → 3.35.0

package/calendar/BaseCalendar.vue

@@ -3,150 +3,152 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-.p-calendar {
-    display: inline-flex;
-    max-width: 100%;
-}
-
-.p-calendar .p-inputtext {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-calendar-w-btn .p-inputtext {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-calendar-w-btn .p-datepicker-trigger {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-/* Fluid */
-.p-fluid .p-calendar {
-    display: flex;
-}
-
-.p-fluid .p-calendar .p-inputtext {
-    width: 1%;
-}
-
-/* Datepicker */
-.p-calendar .p-datepicker {
-    min-width: 100%;
-}
-
-.p-datepicker {
-    width: auto;
-}
-
-.p-datepicker-inline {
-    display: inline-block;
-    overflow-x: auto;
-}
-
-/* Header */
-.p-datepicker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-datepicker-header .p-datepicker-title {
-    margin: 0 auto;
-}
-
-.p-datepicker-prev,
-.p-datepicker-next {
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Multiple Month DatePicker */
-.p-datepicker-multiple-month .p-datepicker-group-container {
-    display: flex;
-}
-
-.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
-    flex: 1 1 auto;
-}
-
-/* DatePicker Table */
-.p-datepicker table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.p-datepicker td > span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    margin: 0 auto;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Month Picker */
-.p-monthpicker-month {
-    width: 33.3%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Year Picker */
-.p-yearpicker-year {
-    width: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-}
-
-/*  Button Bar */
-.p-datepicker-buttonbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-/* Time Picker */
-.p-timepicker {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-timepicker button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-timepicker > div {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
-
-/* Touch UI */
-.p-datepicker-touch-ui,
-.p-calendar .p-datepicker-touch-ui {
-    min-width: 80vw;
+@layer primevue {
+    .p-calendar {
+        display: inline-flex;
+        max-width: 100%;
+    }
+    
+    .p-calendar .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+    
+    .p-calendar-w-btn .p-inputtext {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    
+    .p-calendar-w-btn .p-datepicker-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    
+    /* Fluid */
+    .p-fluid .p-calendar {
+        display: flex;
+    }
+    
+    .p-fluid .p-calendar .p-inputtext {
+        width: 1%;
+    }
+    
+    /* Datepicker */
+    .p-calendar .p-datepicker {
+        min-width: 100%;
+    }
+    
+    .p-datepicker {
+        width: auto;
+    }
+    
+    .p-datepicker-inline {
+        display: inline-block;
+        overflow-x: auto;
+    }
+    
+    /* Header */
+    .p-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .p-datepicker-header .p-datepicker-title {
+        margin: 0 auto;
+    }
+    
+    .p-datepicker-prev,
+    .p-datepicker-next {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Multiple Month DatePicker */
+    .p-datepicker-multiple-month .p-datepicker-group-container {
+        display: flex;
+    }
+    
+    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+        flex: 1 1 auto;
+    }
+    
+    /* DatePicker Table */
+    .p-datepicker table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    
+    .p-datepicker td > span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Month Picker */
+    .p-monthpicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Year Picker */
+    .p-yearpicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /*  Button Bar */
+    .p-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    /* Time Picker */
+    .p-timepicker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .p-timepicker button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-timepicker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+    
+    /* Touch UI */
+    .p-datepicker-touch-ui,
+    .p-calendar .p-datepicker-touch-ui {
+        min-width: 80vw;
+    }
 }
 `;
 
@@ -162,7 +164,8 @@ const classes = {
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': state.focused
+            'p-inputwrapper-focus': state.focused,
+            'p-focus': state.focused || state.overlayVisible
         }
     ],
     input: 'p-inputtext p-component',
@@ -198,7 +201,7 @@ const classes = {
     weekNumber: 'p-datepicker-weeknumber',
     weekLabelContainer: 'p-disabled',
     day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
-    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }],
+    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
     monthPicker: 'p-monthpicker',
     month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
     yearPicker: 'p-yearpicker',

package/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[];

package/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>
@@ -1619,6 +1649,7 @@ export default {
 
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         disableModality() {
@@ -1653,6 +1684,7 @@ export default {
 
             if (!hasBlockerMasks) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         updateCurrentMetaData() {
@@ -2001,31 +2033,37 @@ export default {
 
                 case 'ArrowUp': {
                     cellContent.tabIndex = '-1';
-                    let prevRow = cell.parentElement.previousElementSibling;
 
-                    if (prevRow) {
-                        let tableRowIndex = DomHandler.index(cell.parentElement);
-                        const tableRows = Array.from(cell.parentElement.parentElement.children);
-                        const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+                    if (event.altKey) {
+                        this.overlayVisible = false;
+                        this.focused = true;
+                    } else {
+                        let prevRow = cell.parentElement.previousElementSibling;
 
-                        let hasNextFocusableDate = prevTableRows.find((el) => {
-                            let focusCell = el.children[cellIndex].children[0];
+                        if (prevRow) {
+                            let tableRowIndex = DomHandler.index(cell.parentElement);
+                            const tableRows = Array.from(cell.parentElement.parentElement.children);
+                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
 
-                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
-                        });
+                            let hasNextFocusableDate = prevTableRows.find((el) => {
+                                let focusCell = el.children[cellIndex].children[0];
 
-                        if (hasNextFocusableDate) {
-                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                            });
 
-                            focusCell.tabIndex = '0';
-                            focusCell.focus();
+                            if (hasNextFocusableDate) {
+                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                                focusCell.tabIndex = '0';
+                                focusCell.focus();
+                            } else {
+                                this.navigationState = { backward: true };
+                                this.navBackward(event);
+                            }
                         } else {
                             this.navigationState = { backward: true };
                             this.navBackward(event);
                         }
-                    } else {
-                        this.navigationState = { backward: true };
-                        this.navBackward(event);
                     }
 
                     event.preventDefault();
@@ -2448,10 +2486,10 @@ export default {
                 cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
 
                 if (!cell) {
-                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)');
+                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
 
                     if (todayCell) cell = todayCell;
-                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
                 }
             }
 
@@ -2459,7 +2497,7 @@ export default {
                 cell.tabIndex = '0';
 
                 if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
-                    cell.focus();
+                    if (!this.manualInput) cell.focus();
                 }
 
                 this.preventFocus = false;