primevue 3.24.0 → 3.26.0

package/calendar/Calendar.d.ts

@@ -307,11 +307,11 @@ export interface CalendarProps {
     /**
      * Inline style of the input field.
      */
-    inputStyle?: any | undefined;
+    inputStyle?: object | undefined;
     /**
      * Style class of the input field.
      */
-    inputClass?: any | undefined;
+    inputClass?: string | object | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
      */
@@ -319,11 +319,11 @@ export interface CalendarProps {
     /**
      * Inline style of the overlay panel.
      */
-    panelStyle?: any | undefined;
+    panelStyle?: object | undefined;
     /**
      * Style class of the overlay panel.
      */
-    panelClass?: any | undefined;
+    panelClass?: string | object | undefined;
     /**
      * Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
      */

package/calendar/Calendar.vue

@@ -96,7 +96,7 @@
                                             {{ getYear(month) }}
                                         </button>
                                         <span v-if="currentView === 'year'" class="p-datepicker-decade">
-                                            <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0] }} - {{ yearPickerValues[yearPickerValues.length - 1] }} </slot>
+                                            <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
                                         </span>
                                     </div>
                                     <button
@@ -154,18 +154,34 @@
                             </div>
                         </div>
                         <div v-if="currentView === 'month'" class="p-monthpicker">
-                            <span v-for="(m, i) of monthPickerValues" :key="m" v-ripple @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event, i)" class="p-monthpicker-month" :class="{ 'p-highlight': isMonthSelected(i) }">
-                                {{ m }}
+                            <span
+                                v-for="(m, i) of monthPickerValues"
+                                :key="m"
+                                v-ripple
+                                @click="onMonthSelect($event, { month: m, index: i })"
+                                @keydown="onMonthCellKeydown($event, { month: m, index: i })"
+                                class="p-monthpicker-month"
+                                :class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': !m.selectable }"
+                            >
+                                {{ m.value }}
                                 <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
-                                    {{ m }}
+                                    {{ m.value }}
                                 </div>
                             </span>
                         </div>
                         <div v-if="currentView === 'year'" class="p-yearpicker">
-                            <span v-for="y of yearPickerValues" :key="y" v-ripple @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event, y)" class="p-yearpicker-year" :class="{ 'p-highlight': isYearSelected(y) }">
-                                {{ y }}
-                                <div v-if="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite">
-                                    {{ y }}
+                            <span
+                                v-for="y of yearPickerValues"
+                                :key="y.value"
+                                v-ripple
+                                @click="onYearSelect($event, y)"
+                                @keydown="onYearCellKeydown($event, y)"
+                                class="p-yearpicker-year"
+                                :class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': !y.selectable }"
+                            >
+                                {{ y.value }}
+                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite">
+                                    {{ y.value }}
                                 </div>
                             </span>
                         </div>
@@ -504,11 +520,11 @@ export default {
             default: null
         },
         inputClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         inputStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         inputProps: {
@@ -516,11 +532,11 @@ export default {
             default: null
         },
         panelClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         panelStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         panelProps: {
@@ -1632,7 +1648,9 @@ export default {
                 clearInterval(this.timePickerTimer);
             }
         },
-        onMonthSelect(event, index) {
+        onMonthSelect(event, { month, index }) {
+            // if (month.selectable) return;
+
             if (this.view === 'month') {
                 this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
             } else {
@@ -1644,10 +1662,12 @@ export default {
             setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
+            // if (year.isSelectable) return;
+
             if (this.view === 'year') {
-                this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+                this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
             } else {
-                this.currentYear = year;
+                this.currentYear = year.value;
                 this.currentView = 'month';
                 this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
             }
@@ -2878,8 +2898,30 @@ export default {
         monthPickerValues() {
             let monthPickerValues = [];
 
+            const isSelectableMonth = (baseMonth) => {
+                if (this.minDate) {
+                    const minMonth = this.minDate.getMonth();
+                    const minYear = this.minDate.getFullYear();
+
+                    if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
+                        return false;
+                    }
+                }
+
+                if (this.maxDate) {
+                    const maxMonth = this.maxDate.getMonth();
+                    const maxYear = this.maxDate.getFullYear();
+
+                    if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            };
+
             for (let i = 0; i <= 11; i++) {
-                monthPickerValues.push(this.$primevue.config.locale.monthNamesShort[i]);
+                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
             }
 
             return monthPickerValues;
@@ -2888,8 +2930,20 @@ export default {
             let yearPickerValues = [];
             let base = this.currentYear - (this.currentYear % 10);
 
+            const isSelectableYear = (baseYear) => {
+                if (this.minDate) {
+                    if (this.minDate.getFullYear() > baseYear) return false;
+                }
+
+                if (this.maxDate) {
+                    if (this.maxDate.getFullYear() < baseYear) return false;
+                }
+
+                return true;
+            };
+
             for (let i = 0; i < 10; i++) {
-                yearPickerValues.push(base + i);
+                yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
             }
 
             return yearPickerValues;

package/calendar/calendar.cjs.js

@@ -201,11 +201,11 @@ var script = {
             default: null
         },
         inputClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         inputStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         inputProps: {
@@ -213,11 +213,11 @@ var script = {
             default: null
         },
         panelClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         panelStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         panelProps: {
@@ -1329,7 +1329,9 @@ var script = {
                 clearInterval(this.timePickerTimer);
             }
         },
-        onMonthSelect(event, index) {
+        onMonthSelect(event, { month, index }) {
+            // if (month.selectable) return;
+
             if (this.view === 'month') {
                 this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
             } else {
@@ -1341,10 +1343,12 @@ var script = {
             setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
+            // if (year.isSelectable) return;
+
             if (this.view === 'year') {
-                this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+                this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
             } else {
-                this.currentYear = year;
+                this.currentYear = year.value;
                 this.currentView = 'month';
                 this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
             }
@@ -2556,8 +2560,30 @@ var script = {
         monthPickerValues() {
             let monthPickerValues = [];
 
+            const isSelectableMonth = (baseMonth) => {
+                if (this.minDate) {
+                    const minMonth = this.minDate.getMonth();
+                    const minYear = this.minDate.getFullYear();
+
+                    if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
+                        return false;
+                    }
+                }
+
+                if (this.maxDate) {
+                    const maxMonth = this.maxDate.getMonth();
+                    const maxYear = this.maxDate.getFullYear();
+
+                    if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            };
+
             for (let i = 0; i <= 11; i++) {
-                monthPickerValues.push(this.$primevue.config.locale.monthNamesShort[i]);
+                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
             }
 
             return monthPickerValues;
@@ -2566,8 +2592,20 @@ var script = {
             let yearPickerValues = [];
             let base = this.currentYear - (this.currentYear % 10);
 
+            const isSelectableYear = (baseYear) => {
+                if (this.minDate) {
+                    if (this.minDate.getFullYear() > baseYear) return false;
+                }
+
+                if (this.maxDate) {
+                    if (this.maxDate.getFullYear() < baseYear) return false;
+                }
+
+                return true;
+            };
+
             for (let i = 0; i < 10; i++) {
-                yearPickerValues.push(base + i);
+                yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
             }
 
             return yearPickerValues;
@@ -2842,7 +2880,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   ($data.currentView === 'year')
                                     ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, [
                                         vue.renderSlot(_ctx.$slots, "decade", { years: $options.yearPickerValues }, () => [
-                                          vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0]) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1]), 1)
+                                          vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0].value) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1].value), 1)
                                         ])
                                       ]))
                                     : vue.createCommentVNode("", true)
@@ -2937,13 +2975,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.monthPickerValues, (m, i) => {
                                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                                   key: m,
-                                  onClick: $event => ($options.onMonthSelect($event, i)),
-                                  onKeydown: $event => ($options.onMonthCellKeydown($event, i)),
-                                  class: vue.normalizeClass(["p-monthpicker-month", { 'p-highlight': $options.isMonthSelected(i) }])
+                                  onClick: $event => ($options.onMonthSelect($event, { month: m, index: i })),
+                                  onKeydown: $event => ($options.onMonthCellKeydown($event, { month: m, index: i })),
+                                  class: vue.normalizeClass(["p-monthpicker-month", { 'p-highlight': $options.isMonthSelected(i), 'p-disabled': !m.selectable }])
                                 }, [
-                                  vue.createTextVNode(vue.toDisplayString(m) + " ", 1),
+                                  vue.createTextVNode(vue.toDisplayString(m.value) + " ", 1),
                                   ($options.isMonthSelected(i))
-                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, vue.toDisplayString(m), 1))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, vue.toDisplayString(m.value), 1))
                                     : vue.createCommentVNode("", true)
                                 ], 42, _hoisted_23)), [
                                   [_directive_ripple]
@@ -2955,14 +2993,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_25, [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.yearPickerValues, (y) => {
                                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-                                  key: y,
+                                  key: y.value,
                                   onClick: $event => ($options.onYearSelect($event, y)),
                                   onKeydown: $event => ($options.onYearCellKeydown($event, y)),
-                                  class: vue.normalizeClass(["p-yearpicker-year", { 'p-highlight': $options.isYearSelected(y) }])
+                                  class: vue.normalizeClass(["p-yearpicker-year", { 'p-highlight': $options.isYearSelected(y.value), 'p-disabled': !y.selectable }])
                                 }, [
-                                  vue.createTextVNode(vue.toDisplayString(y) + " ", 1),
-                                  ($options.isYearSelected(y))
-                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_27, vue.toDisplayString(y), 1))
+                                  vue.createTextVNode(vue.toDisplayString(y.value) + " ", 1),
+                                  ($options.isYearSelected(y.value))
+                                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_27, vue.toDisplayString(y.value), 1))
                                     : vue.createCommentVNode("", true)
                                 ], 42, _hoisted_26)), [
                                   [_directive_ripple]