primevue 3.31.0 → 3.32.1

package/button/button.js

@@ -123,7 +123,12 @@ this.primevue.button = (function (Badge, SpinnerIcon, Ripple, BaseComponent, vue
       "extends": script$1,
       methods: {
         getPTOptions: function getPTOptions(key) {
+          var _this$$parent, _this$$parent2;
           return this.ptm(key, {
+            parent: {
+              props: (_this$$parent = this.$parent) === null || _this$$parent === void 0 ? void 0 : _this$$parent.$props,
+              state: (_this$$parent2 = this.$parent) === null || _this$$parent2 === void 0 ? void 0 : _this$$parent2.$data
+            },
             context: {
               disabled: this.disabled
             }
@@ -178,11 +183,11 @@ this.primevue.button = (function (Badge, SpinnerIcon, Ripple, BaseComponent, vue
           }, _ctx.ptm('loadingIcon')), null, 16, ["class"]))];
         }) : vue.renderSlot(_ctx.$slots, "icon", {
           key: 1,
-          "class": vue.normalizeClass(_ctx.cx('icon'))
+          "class": vue.normalizeClass([_ctx.cx('icon')])
         }, function () {
           return [_ctx.icon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
             key: 0,
-            "class": [_ctx.cx('icon'), _ctx.icon]
+            "class": [_ctx.cx('icon'), _ctx.icon, _ctx.iconClass]
           }, _ctx.ptm('icon')), null, 16)) : vue.createCommentVNode("", true)];
         }), vue.createElementVNode("span", vue.mergeProps({
           "class": _ctx.cx('label')

package/button/button.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.button=function(e,t,n,o,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e),r=i(t),s=i(n);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function c(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){var t=d(e,"string");return"symbol"===u(t)?t:String(t)}function d(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==u(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var b={name:"Button",extends:{name:"BaseButton",extends:i(o).default,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}},css:{classes:{root:function(e){var t,n=e.instance,o=e.props;return["p-button p-component",(t={"p-button-icon-only":n.hasIcon&&!o.label&&!o.badge,"p-button-vertical":("top"===o.iconPos||"bottom"===o.iconPos)&&o.label,"p-disabled":n.$attrs.disabled||""===n.$attrs.disabled||o.loading,"p-button-loading":o.loading,"p-button-loading-label-only":o.loading&&!n.hasIcon&&o.label,"p-button-link":o.link},c(t,"p-button-".concat(o.severity),o.severity),c(t,"p-button-raised",o.raised),c(t,"p-button-rounded",o.rounded),c(t,"p-button-text",o.text),c(t,"p-button-outlined",o.outlined),c(t,"p-button-sm","small"===o.size),c(t,"p-button-lg","large"===o.size),c(t,"p-button-plain",o.plain),t)]},loadingIcon:"p-button-loading-icon pi-spin",icon:function(e){var t=e.props;return["p-button-icon",{"p-button-icon-left":"left"===t.iconPos&&t.label,"p-button-icon-right":"right"===t.iconPos&&t.label,"p-button-icon-top":"top"===t.iconPos&&t.label,"p-button-icon-bottom":"bottom"===t.iconPos&&t.label}]},label:"p-button-label"}},provide:function(){return{$parentInstance:this}}},methods:{getPTOptions:function(e){return this.ptm(e,{context:{disabled:this.disabled}})}},computed:{disabled:function(){return this.$attrs.disabled||""===this.$attrs.disabled||this.loading},defaultAriaLabel:function(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon:function(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:r.default,Badge:a.default},directives:{ripple:s.default}},f=["aria-label","disabled","data-pc-severity"];return b.render=function(e,t,n,o,i,a){var r=l.resolveComponent("SpinnerIcon"),s=l.resolveComponent("Badge"),u=l.resolveDirective("ripple");return l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({class:e.cx("root"),type:"button","aria-label":a.defaultAriaLabel,disabled:a.disabled},a.getPTOptions("root"),{"data-pc-name":"button","data-pc-severity":e.severity}),[l.renderSlot(e.$slots,"default",{},(function(){return[e.loading?l.renderSlot(e.$slots,"loadingicon",{key:0,class:l.normalizeClass([e.cx("loadingIcon"),e.cx("icon")])},(function(){return[e.loadingIcon?(l.openBlock(),l.createElementBlock("span",l.mergeProps({key:0,class:[e.cx("loadingIcon"),e.cx("icon"),e.loadingIcon]},e.ptm("loadingIcon")),null,16)):(l.openBlock(),l.createBlock(r,l.mergeProps({key:1,class:[e.cx("loadingIcon"),e.cx("icon")],spin:""},e.ptm("loadingIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"icon",{key:1,class:l.normalizeClass(e.cx("icon"))},(function(){return[e.icon?(l.openBlock(),l.createElementBlock("span",l.mergeProps({key:0,class:[e.cx("icon"),e.icon]},e.ptm("icon")),null,16)):l.createCommentVNode("",!0)]})),l.createElementVNode("span",l.mergeProps({class:e.cx("label")},e.ptm("label")),l.toDisplayString(e.label||" "),17),e.badge?(l.openBlock(),l.createBlock(s,l.mergeProps({key:2,value:e.badge,class:e.badgeClass,unstyled:e.unstyled},e.ptm("badge")),null,16,["value","class","unstyled"])):l.createCommentVNode("",!0)]}))],16,f)),[[u]])},b}(primevue.badge,primevue.icons.spinner,primevue.ripple,primevue.basecomponent,Vue);
+this.primevue=this.primevue||{},this.primevue.button=function(e,t,n,o,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e),r=i(t),s=i(n);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function c(e,t,n){return(t=p(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){var t=d(e,"string");return"symbol"===u(t)?t:String(t)}function d(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==u(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var b={name:"Button",extends:{name:"BaseButton",extends:i(o).default,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}},css:{classes:{root:function(e){var t,n=e.instance,o=e.props;return["p-button p-component",(t={"p-button-icon-only":n.hasIcon&&!o.label&&!o.badge,"p-button-vertical":("top"===o.iconPos||"bottom"===o.iconPos)&&o.label,"p-disabled":n.$attrs.disabled||""===n.$attrs.disabled||o.loading,"p-button-loading":o.loading,"p-button-loading-label-only":o.loading&&!n.hasIcon&&o.label,"p-button-link":o.link},c(t,"p-button-".concat(o.severity),o.severity),c(t,"p-button-raised",o.raised),c(t,"p-button-rounded",o.rounded),c(t,"p-button-text",o.text),c(t,"p-button-outlined",o.outlined),c(t,"p-button-sm","small"===o.size),c(t,"p-button-lg","large"===o.size),c(t,"p-button-plain",o.plain),t)]},loadingIcon:"p-button-loading-icon pi-spin",icon:function(e){var t=e.props;return["p-button-icon",{"p-button-icon-left":"left"===t.iconPos&&t.label,"p-button-icon-right":"right"===t.iconPos&&t.label,"p-button-icon-top":"top"===t.iconPos&&t.label,"p-button-icon-bottom":"bottom"===t.iconPos&&t.label}]},label:"p-button-label"}},provide:function(){return{$parentInstance:this}}},methods:{getPTOptions:function(e){var t,n;return this.ptm(e,{parent:{props:null===(t=this.$parent)||void 0===t?void 0:t.$props,state:null===(n=this.$parent)||void 0===n?void 0:n.$data},context:{disabled:this.disabled}})}},computed:{disabled:function(){return this.$attrs.disabled||""===this.$attrs.disabled||this.loading},defaultAriaLabel:function(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon:function(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:r.default,Badge:a.default},directives:{ripple:s.default}},f=["aria-label","disabled","data-pc-severity"];return b.render=function(e,t,n,o,i,a){var r=l.resolveComponent("SpinnerIcon"),s=l.resolveComponent("Badge"),u=l.resolveDirective("ripple");return l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({class:e.cx("root"),type:"button","aria-label":a.defaultAriaLabel,disabled:a.disabled},a.getPTOptions("root"),{"data-pc-name":"button","data-pc-severity":e.severity}),[l.renderSlot(e.$slots,"default",{},(function(){return[e.loading?l.renderSlot(e.$slots,"loadingicon",{key:0,class:l.normalizeClass([e.cx("loadingIcon"),e.cx("icon")])},(function(){return[e.loadingIcon?(l.openBlock(),l.createElementBlock("span",l.mergeProps({key:0,class:[e.cx("loadingIcon"),e.cx("icon"),e.loadingIcon]},e.ptm("loadingIcon")),null,16)):(l.openBlock(),l.createBlock(r,l.mergeProps({key:1,class:[e.cx("loadingIcon"),e.cx("icon")],spin:""},e.ptm("loadingIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"icon",{key:1,class:l.normalizeClass([e.cx("icon")])},(function(){return[e.icon?(l.openBlock(),l.createElementBlock("span",l.mergeProps({key:0,class:[e.cx("icon"),e.icon,e.iconClass]},e.ptm("icon")),null,16)):l.createCommentVNode("",!0)]})),l.createElementVNode("span",l.mergeProps({class:e.cx("label")},e.ptm("label")),l.toDisplayString(e.label||" "),17),e.badge?(l.openBlock(),l.createBlock(s,l.mergeProps({key:2,value:e.badge,class:e.badgeClass,unstyled:e.unstyled},e.ptm("badge")),null,16,["value","class","unstyled"])):l.createCommentVNode("",!0)]}))],16,f)),[[u]])},b}(primevue.badge,primevue.icons.spinner,primevue.ripple,primevue.basecomponent,Vue);

package/calendar/Calendar.d.ts

@@ -7,13 +7,15 @@
  * @module calendar
  *
  */
-import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
 
+export declare type CalendarPassThroughTransitionType = TransitionProps | ((options: CalendarPassThroughMethodOptions) => TransitionProps) | undefined;
+
 /**
  * Custom passthrough(pt) option method.
  */
@@ -21,6 +23,7 @@ export interface CalendarPassThroughMethodOptions {
     instance: any;
     props: CalendarProps;
     state: CalendarState;
+    context: CalendarContext;
 }
 
 /**
@@ -88,207 +91,211 @@ export interface CalendarBlurEvent {
  */
 export interface CalendarPassThroughOptions {
     /**
-     * Uses to pass attributes to the root's DOM element.
+     * Used to pass attributes to the root's DOM element.
      */
     root?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the input's DOM element.
+     * Used to pass attributes to the input's DOM element.
      */
     input?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Button component.
+     * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptionType}
      */
     dropdownButton?: ButtonPassThroughOptionType;
     /**
-     * Uses to pass attributes to the panel's DOM element.
+     * Used to pass attributes to the panel's DOM element.
      */
     panel?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the group container's DOM element.
+     * Used to pass attributes to the group container's DOM element.
      */
     groupContainer?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the group's DOM element.
+     * Used to pass attributes to the group's DOM element.
      */
     group?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the header's DOM element.
+     * Used to pass attributes to the header's DOM element.
      */
     header?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Button component.
+     * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptionType}
      */
     previousButton?: ButtonPassThroughOptionType;
     /**
-     * Uses to pass attributes to the title's DOM element.
+     * Used to pass attributes to the title's DOM element.
      */
     title?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the month title's DOM element.
+     * Used to pass attributes to the month title's DOM element.
      */
     monthTitle?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the year title's DOM element.
+     * Used to pass attributes to the year title's DOM element.
      */
     yearTitle?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the decade title's DOM element.
+     * Used to pass attributes to the decade title's DOM element.
      */
     decadeTitle?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Button component.
+     * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptionType}
      */
     nextButton?: ButtonPassThroughOptionType;
     /**
-     * Uses to pass attributes to the container's DOM element.
+     * Used to pass attributes to the container's DOM element.
      */
     container?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table's DOM element.
+     * Used to pass attributes to the table's DOM element.
      */
     table?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table header's DOM element.
+     * Used to pass attributes to the table header's DOM element.
      */
     tableHeader?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table header row's DOM element.
+     * Used to pass attributes to the table header row's DOM element.
      */
     tableHeaderRow?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the week header's DOM element.
+     * Used to pass attributes to the week header's DOM element.
      */
     weekHeader?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table header cell's DOM element.
+     * Used to pass attributes to the table header cell's DOM element.
      */
     tableHeaderCell?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the week label's DOM element.
+     * Used to pass attributes to the week label's DOM element.
      */
     weekLabel?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the week day's DOM element.
+     * Used to pass attributes to the week day's DOM element.
      */
     weekDay?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table body's DOM element.
+     * Used to pass attributes to the table body's DOM element.
      */
     tableBody?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the table body row's DOM element.
+     * Used to pass attributes to the table body row's DOM element.
      */
     tableBodyRow?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the week number's DOM element.
+     * Used to pass attributes to the week number's DOM element.
      */
     weekNumber?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the week label container's DOM element.
+     * Used to pass attributes to the week label container's DOM element.
      */
     weekLabelContainer?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the day's DOM element.
+     * Used to pass attributes to the day's DOM element.
      */
     day?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the day label's DOM element.
+     * Used to pass attributes to the day label's DOM element.
      */
     dayLabel?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the month picker's DOM element.
+     * Used to pass attributes to the month picker's DOM element.
      */
     monthPicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the month's DOM element.
+     * Used to pass attributes to the month's DOM element.
      */
     month?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the year picker's DOM element.
+     * Used to pass attributes to the year picker's DOM element.
      */
     yearPicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the year's DOM element.
+     * Used to pass attributes to the year's DOM element.
      */
     year?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the time picker's DOM element.
+     * Used to pass attributes to the time picker's DOM element.
      */
     timePicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the hour picker's DOM element.
+     * Used to pass attributes to the hour picker's DOM element.
      */
     hourPicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the hour's DOM element.
+     * Used to pass attributes to the hour's DOM element.
      */
     hour?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the separatorc ontainer's DOM element.
+     * Used to pass attributes to the separatorc ontainer's DOM element.
      */
     separatorContainer?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the separator's DOM element.
+     * Used to pass attributes to the separator's DOM element.
      */
     separator?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the minute picker's DOM element.
+     * Used to pass attributes to the minute picker's DOM element.
      */
     minutePicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the minute's DOM element.
+     * Used to pass attributes to the minute's DOM element.
      */
     minute?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the second picker's DOM element.
+     * Used to pass attributes to the second picker's DOM element.
      */
     secondPicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the second's DOM element.
+     * Used to pass attributes to the second's DOM element.
      */
     second?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the ampm picker's DOM element.
+     * Used to pass attributes to the ampm picker's DOM element.
      */
     ampmPicker?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the ampm's DOM element.
+     * Used to pass attributes to the ampm's DOM element.
      */
     ampm?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the buttonbar's DOM element.
+     * Used to pass attributes to the buttonbar's DOM element.
      */
     buttonbar?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Button component.
+     * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptionType}
      */
     todayButton?: ButtonPassThroughOptionType;
     /**
-     * Uses to pass attributes to the Button component.
+     * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptionType}
      */
     clearButton?: ButtonPassThroughOptionType;
     /**
-     * Uses to pass attributes to the aria selected day's DOM element.
+     * Used to pass attributes to the aria selected day's DOM element.
      */
     hiddenSelectedDay?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the aria month's DOM element.
+     * Used to pass attributes to the aria month's DOM element.
      */
     hiddenMonth?: CalendarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the aria year's DOM element.
+     * Used to pass attributes to the aria year's DOM element.
      */
     hiddenYear?: CalendarPassThroughOptionType;
     /**
-     * Uses to manage all lifecycle hooks
+     * Used to manage all lifecycle hooks
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: CalendarPassThroughTransitionType;
 }
 
 /**
@@ -344,6 +351,75 @@ export interface CalendarState {
     currentView: string;
 }
 
+/**
+ * Defines current options in Calendar component.
+ */
+export interface CalendarContext {
+    /**
+     * Current date.
+     */
+    date: string | Date | string[] | Date[] | undefined | null;
+    /**
+     * Current today state of the calendar's day.
+     * @defaultValue false
+     */
+    today: boolean;
+    /**
+     * Current other month state of the calendar's day.
+     */
+    otherMonth: boolean;
+    /**
+     * Current selected state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current month state.
+     */
+    month: CalendarMonthOptions;
+    /**
+     * Current month index state.
+     */
+    monthIndex: number;
+    /**
+     * Current year state.
+     */
+    year: CalendarYearOptions;
+}
+
+/**
+ * Defines cuurent month options.
+ */
+export interface CalendarMonthOptions {
+    /**
+     * Month value.
+     */
+    value: string;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines current year options.
+ */
+export interface CalendarYearOptions {
+    /**
+     * Year value.
+     */
+    value: number;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
 /**
  * Defines valid properties in Calendar component.
  */
@@ -588,7 +664,7 @@ export interface CalendarProps {
      */
     inputClass?: string | object | undefined;
     /**
-     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
@@ -600,7 +676,7 @@ export interface CalendarProps {
      */
     panelClass?: string | object | undefined;
     /**
-     * Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
      */
     panelProps?: HTMLAttributes | undefined;
     /**
@@ -612,10 +688,10 @@ export interface CalendarProps {
      */
     'aria-label'?: string | undefined;
     /**
-     * Uses to pass attributes to DOM elements inside the component.
+     * Used to pass attributes to DOM elements inside the component.
      * @type {CalendarPassThroughOptions}
      */
-    pt?: CalendarPassThroughOptions;
+    pt?: PTOptions<CalendarPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

package/calendar/Calendar.vue

@@ -48,7 +48,7 @@
             </template>
         </CalendarButton>
         <Portal :appendTo="appendTo" :disabled="inline">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
                 <div
                     v-if="inline || overlayVisible"
                     :ref="overlayRef"
@@ -134,7 +134,7 @@
                                     <table :class="cx('table')" role="grid" v-bind="ptm('table')">
                                         <thead v-bind="ptm('tableHeader')">
                                             <tr v-bind="ptm('tableHeaderRow')">
-                                                <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader')" :data-p-disabled="true">
+                                                <th v-if="showWeek" scope="col" :class="cx('weekHeader')" v-bind="ptm('weekHeader', { context: { disabled: showWeek } })" :data-p-disabled="showWeek">
                                                     <span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
                                                 </th>
                                                 <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
@@ -145,12 +145,28 @@
                                         <tbody v-bind="ptm('tableBody')">
                                             <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
                                                 <td v-if="showWeek" :class="cx('weekNumber')" v-bind="ptm('weekNumber')">
-                                                    <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer')" :data-p-disabled="true">
+                                                    <span :class="cx('weekLabelContainer')" v-bind="ptm('weekLabelContainer', { context: { disabled: showWeek } })" :data-p-disabled="showWeek">
                                                         <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
                                                         {{ month.weekNumbers[i] }}
                                                     </span>
                                                 </td>
-                                                <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="cx('day', { date })" v-bind="ptm('day')" :data-p-today="date.today" :data-p-other-month="date.otherMonth">
+                                                <td
+                                                    v-for="date of week"
+                                                    :key="date.day + '' + date.month"
+                                                    :aria-label="date.day"
+                                                    :class="cx('day', { date })"
+                                                    v-bind="
+                                                        ptm('day', {
+                                                            context: {
+                                                                date,
+                                                                today: date.today,
+                                                                otherMonth: date.otherMonth
+                                                            }
+                                                        })
+                                                    "
+                                                    :data-p-today="date.today"
+                                                    :data-p-other-month="date.otherMonth"
+                                                >
                                                     <span
                                                         v-ripple
                                                         :class="cx('dayLabel', { date })"
@@ -159,7 +175,15 @@
                                                         @keydown="onDateCellKeydown($event, date, groupIndex)"
                                                         :aria-selected="isSelected(date)"
                                                         :aria-disabled="!date.selectable"
-                                                        v-bind="ptm('dayLabel')"
+                                                        v-bind="
+                                                            ptm('dayLabel', {
+                                                                context: {
+                                                                    date,
+                                                                    selected: isSelected(date),
+                                                                    disabled: !date.selectable
+                                                                }
+                                                            })
+                                                        "
                                                         :data-p-disabled="!date.selectable"
                                                         :data-p-highlight="isSelected(date)"
                                                     >
@@ -183,7 +207,16 @@
                                 @click="onMonthSelect($event, { month: m, index: i })"
                                 @keydown="onMonthCellKeydown($event, { month: m, index: i })"
                                 :class="cx('month', { month: m, index: i })"
-                                v-bind="ptm('month')"
+                                v-bind="
+                                    ptm('month', {
+                                        context: {
+                                            month: m,
+                                            monthIndex: i,
+                                            selected: isMonthSelected(i),
+                                            disabled: !m.selectable
+                                        }
+                                    })
+                                "
                                 :data-p-disabled="!m.selectable"
                                 :data-p-highlight="isMonthSelected(i)"
                             >
@@ -201,7 +234,15 @@
                                 @click="onYearSelect($event, y)"
                                 @keydown="onYearCellKeydown($event, y)"
                                 :class="cx('year', { year: y })"
-                                v-bind="ptm('year')"
+                                v-bind="
+                                    ptm('year', {
+                                        context: {
+                                            year: y,
+                                            selected: isYearSelected(y.value),
+                                            disabled: !y.selectable
+                                        }
+                                    })
+                                "
                                 :data-p-disabled="!y.selectable"
                                 :data-p-highlight="isYearSelected(y.value)"
                             >
@@ -1375,7 +1416,7 @@ export default {
         },
         incrementHour(event) {
             let prevHour = this.currentHour;
-            let newHour = this.currentHour + this.stepHour;
+            let newHour = this.currentHour + Number(this.stepHour);
             let newPM = this.pm;
 
             if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
@@ -1417,7 +1458,7 @@ export default {
             event.preventDefault();
         },
         incrementMinute(event) {
-            let newMinute = this.currentMinute + this.stepMinute;
+            let newMinute = this.currentMinute + Number(this.stepMinute);
 
             if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
                 this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
@@ -1437,7 +1478,7 @@ export default {
             event.preventDefault();
         },
         incrementSecond(event) {
-            let newSecond = this.currentSecond + this.stepSecond;
+            let newSecond = this.currentSecond + Number(this.stepSecond);
 
             if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
                 this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
@@ -2541,13 +2582,15 @@ export default {
                 if (!this.responsiveStyleElement) {
                     this.responsiveStyleElement = document.createElement('style');
                     this.responsiveStyleElement.type = 'text/css';
+                    DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                     document.body.appendChild(this.responsiveStyleElement);
                 }
 
                 let innerHTML = '';
 
                 if (this.responsiveOptions) {
-                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
 
                     for (let i = 0; i < responsiveOptions.length; i++) {
                         let { breakpoint, numMonths } = responsiveOptions[i];