primevue 3.26.1 → 3.28.0

package/calendar/Calendar.d.ts

@@ -109,27 +109,27 @@ export interface CalendarProps {
     showIcon?: boolean | undefined;
     /**
      * Icon of the calendar button.
-     * @defaultValue pi pi-calendar
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     icon?: string | undefined;
     /**
      * Icon to show in the previous button.
-     * @defaultValue pi pi-chevron-left
+     * @deprecated since v3.27.0. Use 'previousicon' slot.
      */
     previousIcon?: string | undefined;
     /**
      * Icon to show in the next button.
-     * @defaultValue pi pi-chevron-right
+     * @deprecated since v3.27.0. Use 'nexticon' slot.
      */
     nextIcon?: string | undefined;
     /**
      * Icon to show in each of the increment buttons.
-     * @defaultValue pi pi-chevron-up
+     * @deprecated since v3.27.0. Use 'incrementicon' slot.
      */
     incrementIcon?: string | undefined;
     /**
      * Icon to show in each of the decrement buttons.
-     * @defaultValue pi pi-chevron-down
+     * @deprecated since v3.27.0. Use 'decrementicon' slot.
      */
     decrementIcon?: string | undefined;
     /**
@@ -368,6 +368,26 @@ export interface CalendarSlots {
          */
         years: string[] | undefined;
     }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     */
+    dropdownicon(): VNode[];
+    /**
+     * Custom previous icon template.
+     */
+    previousicon(): VNode[];
+    /**
+     * Custom next icon template.
+     */
+    nexticon(): VNode[];
+    /**
+     * Custom increment icon template.
+     */
+    incrementicon(): VNode[];
+    /**
+     * Custom decrement icon template.
+     */
+    decrementicon(): VNode[];
 }
 
 /**

package/calendar/Calendar.vue

@@ -29,7 +29,6 @@
         />
         <CalendarButton
             v-if="showIcon"
-            :icon="icon"
             class="p-datepicker-trigger"
             :disabled="disabled"
             @click="onButtonClick"
@@ -38,7 +37,13 @@
             aria-haspopup="dialog"
             :aria-expanded="overlayVisible"
             :aria-controls="panelId"
-        />
+        >
+            <template #icon>
+                <slot name="dropdownicon">
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
+                </slot>
+            </template>
+        </CalendarButton>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
                 <div
@@ -70,7 +75,9 @@
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
                                     >
-                                        <span :class="['p-datepicker-prev-icon', previousIcon]" />
+                                        <slot name="previousicon">
+                                            <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
+                                        </slot>
                                     </button>
                                     <div class="p-datepicker-title">
                                         <button
@@ -109,7 +116,9 @@
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
                                     >
-                                        <span :class="['p-datepicker-next-icon', nextIcon]" />
+                                        <slot name="nexticon">
+                                            <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" />
+                                        </slot>
                                     </button>
                                 </div>
                                 <div v-if="currentView === 'date'" class="p-datepicker-calendar-container">
@@ -202,7 +211,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="incrementIcon" />
+                                <slot name="incrementicon">
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                </slot>
                             </button>
                             <span>{{ formattedCurrentHour }}</span>
                             <button
@@ -219,7 +230,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="decrementIcon" />
+                                <slot name="decrementicon">
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                </slot>
                             </button>
                         </div>
                         <div class="p-separator">
@@ -241,7 +254,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="incrementIcon" />
+                                <slot name="incrementicon">
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                </slot>
                             </button>
                             <span>{{ formattedCurrentMinute }}</span>
                             <button
@@ -259,7 +274,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="decrementIcon" />
+                                <slot name="decrementicon">
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                </slot>
                             </button>
                         </div>
                         <div v-if="showSeconds" class="p-separator">
@@ -281,7 +298,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="incrementIcon" />
+                                <slot name="incrementicon">
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                </slot>
                             </button>
                             <span>{{ formattedCurrentSecond }}</span>
                             <button
@@ -299,7 +318,9 @@
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
                             >
-                                <span :class="decrementIcon" />
+                                <slot name="decrementicon">
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                </slot>
                             </button>
                         </div>
                         <div v-if="hourFormat == '12'" class="p-separator">
@@ -307,11 +328,15 @@
                         </div>
                         <div v-if="hourFormat == '12'" class="p-ampm-picker">
                             <button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
-                                <span :class="incrementIcon" />
+                                <slot name="incrementicon">
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                </slot>
                             </button>
                             <span>{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
                             <button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
-                                <span :class="decrementIcon" />
+                                <slot name="decrementicon">
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                </slot>
                             </button>
                         </div>
                     </div>
@@ -328,6 +353,11 @@
 
 <script>
 import Button from 'primevue/button';
+import CalendarIcon from 'primevue/icons/calendar';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -364,23 +394,23 @@ export default {
         },
         icon: {
             type: String,
-            default: 'pi pi-calendar'
+            default: undefined
         },
         previousIcon: {
             type: String,
-            default: 'pi pi-chevron-left'
+            default: undefined
         },
         nextIcon: {
             type: String,
-            default: 'pi pi-chevron-right'
+            default: undefined
         },
         incrementIcon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         decrementIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         numberOfMonths: {
             type: Number,
@@ -899,6 +929,7 @@ export default {
 
             if (this.currentView === 'month') {
                 this.decrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
             } else if (this.currentView === 'year') {
                 this.decrementDecade();
             } else {
@@ -925,6 +956,7 @@ export default {
 
             if (this.currentView === 'month') {
                 this.incrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
             } else if (this.currentView === 'year') {
                 this.incrementDecade();
             } else {
@@ -1649,8 +1681,6 @@ export default {
             }
         },
         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 {
@@ -1662,8 +1692,6 @@ export default {
             setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
-            // if (year.isSelectable) return;
-
             if (this.view === 'year') {
                 this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
             } else {
@@ -2598,7 +2626,7 @@ export default {
             this.$emit('input', event);
         },
         onInputClick() {
-            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
+            if (this.isEnabled() && !this.overlayVisible) {
                 this.overlayVisible = true;
             }
         },
@@ -2981,7 +3009,12 @@ export default {
     },
     components: {
         CalendarButton: Button,
-        Portal: Portal
+        Portal: Portal,
+        CalendarIcon: CalendarIcon,
+        ChevronLeftIcon: ChevronLeftIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronUpIcon: ChevronUpIcon,
+        ChevronDownIcon: ChevronDownIcon
     },
     directives: {
         ripple: Ripple

package/calendar/calendar.cjs.js

@@ -1,6 +1,11 @@
 'use strict';
 
 var Button = require('primevue/button');
+var CalendarIcon = require('primevue/icons/calendar');
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var ChevronLeftIcon = require('primevue/icons/chevronleft');
+var ChevronRightIcon = require('primevue/icons/chevronright');
+var ChevronUpIcon = require('primevue/icons/chevronup');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
@@ -10,6 +15,11 @@ var vue = require('vue');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var CalendarIcon__default = /*#__PURE__*/_interopDefaultLegacy(CalendarIcon);
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIcon);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
+var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -45,23 +55,23 @@ var script = {
         },
         icon: {
             type: String,
-            default: 'pi pi-calendar'
+            default: undefined
         },
         previousIcon: {
             type: String,
-            default: 'pi pi-chevron-left'
+            default: undefined
         },
         nextIcon: {
             type: String,
-            default: 'pi pi-chevron-right'
+            default: undefined
         },
         incrementIcon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         decrementIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         numberOfMonths: {
             type: Number,
@@ -580,6 +590,7 @@ var script = {
 
             if (this.currentView === 'month') {
                 this.decrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
             } else if (this.currentView === 'year') {
                 this.decrementDecade();
             } else {
@@ -606,6 +617,7 @@ var script = {
 
             if (this.currentView === 'month') {
                 this.incrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
             } else if (this.currentView === 'year') {
                 this.incrementDecade();
             } else {
@@ -1330,8 +1342,6 @@ var script = {
             }
         },
         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 {
@@ -1343,8 +1353,6 @@ var script = {
             setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
-            // if (year.isSelectable) return;
-
             if (this.view === 'year') {
                 this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
             } else {
@@ -2263,7 +2271,7 @@ var script = {
             this.$emit('input', event);
         },
         onInputClick() {
-            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
+            if (this.isEnabled() && !this.overlayVisible) {
                 this.overlayVisible = true;
             }
         },
@@ -2643,7 +2651,12 @@ var script = {
     },
     components: {
         CalendarButton: Button__default["default"],
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        CalendarIcon: CalendarIcon__default["default"],
+        ChevronLeftIcon: ChevronLeftIcon__default["default"],
+        ChevronRightIcon: ChevronRightIcon__default["default"],
+        ChevronUpIcon: ChevronUpIcon__default["default"],
+        ChevronDownIcon: ChevronDownIcon__default["default"]
     },
     directives: {
         ripple: Ripple__default["default"]
@@ -2791,7 +2804,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ($props.showIcon)
       ? (vue.openBlock(), vue.createBlock(_component_CalendarButton, {
           key: 1,
-          icon: $props.icon,
           class: "p-datepicker-trigger",
           disabled: $props.disabled,
           onClick: $options.onButtonClick,
@@ -2800,7 +2812,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-haspopup": "dialog",
           "aria-expanded": $data.overlayVisible,
           "aria-controls": $options.panelId
-        }, null, 8, ["icon", "disabled", "onClick", "aria-label", "aria-expanded", "aria-controls"]))
+        }, {
+          icon: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "dropdownicon", {}, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'CalendarIcon'), {
+                class: vue.normalizeClass($props.icon)
+              }, null, 8, ["class"]))
+            ])
+          ]),
+          _: 3
+        }, 8, ["disabled", "onClick", "aria-label", "aria-expanded", "aria-controls"]))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_Portal, {
       appendTo: $props.appendTo,
@@ -2847,9 +2868,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   disabled: $props.disabled,
                                   "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.prevDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.prevYear : _ctx.$primevue.config.locale.prevMonth
                                 }, [
-                                  vue.createElementVNode("span", {
-                                    class: vue.normalizeClass(['p-datepicker-prev-icon', $props.previousIcon])
-                                  }, null, 2)
+                                  vue.renderSlot(_ctx.$slots, "previousicon", {}, () => [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.previousIcon ? 'span' : 'ChevronLeftIcon'), {
+                                      class: vue.normalizeClass(['p-datepicker-prev-icon', $props.previousIcon])
+                                    }, null, 8, ["class"]))
+                                  ])
                                 ], 40, _hoisted_6)), [
                                   [vue.vShow, $props.showOtherMonths ? groupIndex === 0 : false],
                                   [_directive_ripple]
@@ -2893,9 +2916,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   disabled: $props.disabled,
                                   "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.nextDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.nextYear : _ctx.$primevue.config.locale.nextMonth
                                 }, [
-                                  vue.createElementVNode("span", {
-                                    class: vue.normalizeClass(['p-datepicker-next-icon', $props.nextIcon])
-                                  }, null, 2)
+                                  vue.renderSlot(_ctx.$slots, "nexticon", {}, () => [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.nextIcon ? 'span' : 'ChevronRightIcon'), {
+                                      class: vue.normalizeClass(['p-datepicker-next-icon', $props.nextIcon])
+                                    }, null, 8, ["class"]))
+                                  ])
                                 ], 40, _hoisted_11)), [
                                   [vue.vShow, $props.showOtherMonths ? ($props.numberOfMonths === 1 ? true : groupIndex === $props.numberOfMonths - 1) : false],
                                   [_directive_ripple]
@@ -3030,9 +3055,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ],
                             type: "button"
                           }, [
-                            vue.createElementVNode("span", {
-                              class: vue.normalizeClass($props.incrementIcon)
-                            }, null, 2)
+                            vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
+                                class: vue.normalizeClass($props.incrementIcon)
+                              }, null, 8, ["class"]))
+                            ])
                           ], 40, _hoisted_30)), [
                             [_directive_ripple]
                           ]),
@@ -3054,9 +3081,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ],
                             type: "button"
                           }, [
-                            vue.createElementVNode("span", {
-                              class: vue.normalizeClass($props.decrementIcon)
-                            }, null, 2)
+                            vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
+                                class: vue.normalizeClass($props.decrementIcon)
+                              }, null, 8, ["class"]))
+                            ])
                           ], 40, _hoisted_31)), [
                             [_directive_ripple]
                           ])
@@ -3083,9 +3112,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ],
                             type: "button"
                           }, [
-                            vue.createElementVNode("span", {
-                              class: vue.normalizeClass($props.incrementIcon)
-                            }, null, 2)
+                            vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
+                                class: vue.normalizeClass($props.incrementIcon)
+                              }, null, 8, ["class"]))
+                            ])
                           ], 40, _hoisted_34)), [
                             [_directive_ripple]
                           ]),
@@ -3108,9 +3139,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             ],
                             type: "button"
                           }, [
-                            vue.createElementVNode("span", {
-                              class: vue.normalizeClass($props.decrementIcon)
-                            }, null, 2)
+                            vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
+                                class: vue.normalizeClass($props.decrementIcon)
+                              }, null, 8, ["class"]))
+                            ])
                           ], 40, _hoisted_35)), [
                             [_directive_ripple]
                           ])
@@ -3140,9 +3173,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 ],
                                 type: "button"
                               }, [
-                                vue.createElementVNode("span", {
-                                  class: vue.normalizeClass($props.incrementIcon)
-                                }, null, 2)
+                                vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
+                                    class: vue.normalizeClass($props.incrementIcon)
+                                  }, null, 8, ["class"]))
+                                ])
                               ], 40, _hoisted_38)), [
                                 [_directive_ripple]
                               ]),
@@ -3165,9 +3200,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 ],
                                 type: "button"
                               }, [
-                                vue.createElementVNode("span", {
-                                  class: vue.normalizeClass($props.decrementIcon)
-                                }, null, 2)
+                                vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
+                                    class: vue.normalizeClass($props.decrementIcon)
+                                  }, null, 8, ["class"]))
+                                ])
                               ], 40, _hoisted_39)), [
                                 [_directive_ripple]
                               ])
@@ -3187,9 +3224,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 type: "button",
                                 disabled: $props.disabled
                               }, [
-                                vue.createElementVNode("span", {
-                                  class: vue.normalizeClass($props.incrementIcon)
-                                }, null, 2)
+                                vue.renderSlot(_ctx.$slots, "incrementicon", {}, () => [
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementIcon ? 'span' : 'ChevronUpIcon'), {
+                                    class: vue.normalizeClass($props.incrementIcon)
+                                  }, null, 8, ["class"]))
+                                ])
                               ], 8, _hoisted_42)), [
                                 [_directive_ripple]
                               ]),
@@ -3201,9 +3240,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 type: "button",
                                 disabled: $props.disabled
                               }, [
-                                vue.createElementVNode("span", {
-                                  class: vue.normalizeClass($props.decrementIcon)
-                                }, null, 2)
+                                vue.renderSlot(_ctx.$slots, "decrementicon", {}, () => [
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementIcon ? 'span' : 'ChevronDownIcon'), {
+                                    class: vue.normalizeClass($props.decrementIcon)
+                                  }, null, 8, ["class"]))
+                                ])
                               ], 8, _hoisted_43)), [
                                 [_directive_ripple]
                               ])