primevue 3.26.1 → 3.27.0

package/button/button.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.button = (function (Ripple, vue) {
+this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
@@ -39,7 +40,7 @@ this.primevue.button = (function (Ripple, vue) {
             },
             loadingIcon: {
                 type: String,
-                default: 'pi pi-spinner pi-spin'
+                default: undefined
             },
             link: {
                 type: Boolean,
@@ -79,11 +80,11 @@ this.primevue.button = (function (Ripple, vue) {
                 return [
                     'p-button p-component',
                     {
-                        'p-button-icon-only': this.icon && !this.label,
+                        'p-button-icon-only': this.hasIcon && !this.label,
                         'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                         'p-disabled': this.$attrs.disabled || this.loading,
                         'p-button-loading': this.loading,
-                        'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                        'p-button-loading-label-only': this.loading && !this.hasIcon && this.label,
                         'p-button-link': this.link,
                         [`p-button-${this.severity}`]: this.severity,
                         'p-button-raised': this.raised,
@@ -98,7 +99,6 @@ this.primevue.button = (function (Ripple, vue) {
             },
             iconStyleClass() {
                 return [
-                    this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                     'p-button-icon',
                     this.iconClass,
                     {
@@ -109,6 +109,9 @@ this.primevue.button = (function (Ripple, vue) {
                     }
                 ];
             },
+            loadingIconStyleClass() {
+                return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+            },
             badgeStyleClass() {
                 return [
                     'p-badge p-component',
@@ -123,8 +126,14 @@ this.primevue.button = (function (Ripple, vue) {
             },
             defaultAriaLabel() {
                 return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+            },
+            hasIcon() {
+                return this.icon || this.$slots.icon;
             }
         },
+        components: {
+            SpinnerIcon: SpinnerIcon__default["default"]
+        },
         directives: {
             ripple: Ripple__default["default"]
         }
@@ -134,6 +143,7 @@ this.primevue.button = (function (Ripple, vue) {
     const _hoisted_2 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -142,27 +152,45 @@ this.primevue.button = (function (Ripple, vue) {
         "aria-label": $options.defaultAriaLabel,
         disabled: $options.disabled
       }, [
-        vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          ($props.loading && !$props.icon)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 0,
-                class: vue.normalizeClass($options.iconStyleClass)
-              }, null, 2))
-            : vue.createCommentVNode("", true),
-          ($props.icon)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 1,
-                class: vue.normalizeClass($options.iconStyleClass)
-              }, null, 2))
-            : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
-          ($props.badge)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
-                key: 2,
-                class: vue.normalizeClass($options.badgeStyleClass)
-              }, vue.toDisplayString($props.badge), 3))
-            : vue.createCommentVNode("", true)
-        ])
+        vue.renderSlot(_ctx.$slots, "default"),
+        (!_ctx.$slots.default)
+          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              ($props.loading)
+                ? vue.renderSlot(_ctx.$slots, "loadingicon", {
+                    key: 0,
+                    class: vue.normalizeClass($options.loadingIconStyleClass)
+                  }, () => [
+                    ($props.loadingIcon)
+                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                          key: 0,
+                          class: vue.normalizeClass([$options.loadingIconStyleClass, $props.loadingIcon])
+                        }, null, 2))
+                      : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                          key: 1,
+                          class: vue.normalizeClass($options.loadingIconStyleClass),
+                          spin: ""
+                        }, null, 8, ["class"]))
+                  ])
+                : vue.renderSlot(_ctx.$slots, "icon", {
+                    key: 1,
+                    class: vue.normalizeClass($options.iconStyleClass)
+                  }, () => [
+                    ($props.icon)
+                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                          key: 0,
+                          class: vue.normalizeClass([$options.iconStyleClass, $props.icon])
+                        }, null, 2))
+                      : vue.createCommentVNode("", true)
+                  ]),
+              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
+              ($props.badge)
+                ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 2,
+                    class: vue.normalizeClass($options.badgeStyleClass)
+                  }, vue.toDisplayString($props.badge), 3))
+                : vue.createCommentVNode("", true)
+            ], 64))
+          : vue.createCommentVNode("", true)
       ], 10, _hoisted_1)), [
         [_directive_ripple]
       ])
@@ -172,4 +200,4 @@ this.primevue.button = (function (Ripple, vue) {
 
     return script;
 
-})(primevue.ripple, Vue);
+})(primevue.icons.spinner, primevue.ripple, Vue);

package/button/button.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.button=function(t,e){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i={name:"Button",props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:"pi pi-spinner pi-spin"},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.icon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.icon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return[this.loading?"p-button-loading-icon "+this.loadingIcon:this.icon,"p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]}},directives:{ripple:l(t).default}};const n=["aria-label","disabled"],o={class:"p-button-label"};return i.render=function(t,l,i,a,s,u){const d=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(u.buttonClass),type:"button","aria-label":u.defaultAriaLabel,disabled:u.disabled},[e.renderSlot(t.$slots,"default",{},(()=>[i.loading&&!i.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(u.iconStyleClass)},null,2)):e.createCommentVNode("",!0),i.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(u.iconStyleClass)},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",o,e.toDisplayString(i.label||" "),1),i.badge?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.badgeStyleClass)},e.toDisplayString(i.badge),3)):e.createCommentVNode("",!0)]))],10,n)),[[d]])},i}(primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.button=function(t,e,l){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(t),i=n(e),s={name:"Button",props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:void 0},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.hasIcon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.hasIcon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return["p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},loadingIconStyleClass(){return["p-button-loading-icon pi-spin",this.iconStyleClass]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:o.default},directives:{ripple:i.default}};const a=["aria-label","disabled"],r={class:"p-button-label"};return s.render=function(t,e,n,o,i,s){const d=l.resolveComponent("SpinnerIcon"),u=l.resolveDirective("ripple");return l.withDirectives((l.openBlock(),l.createElementBlock("button",{class:l.normalizeClass(s.buttonClass),type:"button","aria-label":s.defaultAriaLabel,disabled:s.disabled},[l.renderSlot(t.$slots,"default"),t.$slots.default?l.createCommentVNode("",!0):(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[n.loading?l.renderSlot(t.$slots,"loadingicon",{key:0,class:l.normalizeClass(s.loadingIconStyleClass)},(()=>[n.loadingIcon?(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass([s.loadingIconStyleClass,n.loadingIcon])},null,2)):(l.openBlock(),l.createBlock(d,{key:1,class:l.normalizeClass(s.loadingIconStyleClass),spin:""},null,8,["class"]))])):l.renderSlot(t.$slots,"icon",{key:1,class:l.normalizeClass(s.iconStyleClass)},(()=>[n.icon?(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass([s.iconStyleClass,n.icon])},null,2)):l.createCommentVNode("",!0)])),l.createElementVNode("span",r,l.toDisplayString(n.label||" "),1),n.badge?(l.openBlock(),l.createElementBlock("span",{key:2,class:l.normalizeClass(s.badgeStyleClass)},l.toDisplayString(n.badge),3)):l.createCommentVNode("",!0)],64))],10,a)),[[u]])},s}(primevue.icons.spinner,primevue.ripple,Vue);

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