primevue 3.28.0 → 3.29.0

package/basecomponent/basecomponent.esm.js

@@ -1,4 +1,5 @@
 import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 var script = {
     name: 'BaseComponent',
@@ -9,17 +10,22 @@ var script = {
         }
     },
     methods: {
-        getPTItem(obj = {}, key = '') {
+        getOption(obj = {}, key = '') {
             const fKey = ObjectUtils.convertToFlatCase(key);
 
             return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
         },
         getPTValue(obj = {}, key = '', params = {}) {
-            const self = ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
-            const globalComponentPT = this.getPTItem(this.$primevue.config.pt, this.$.type.name);
-            const global = ObjectUtils.getItemValue(this.getPTItem(globalComponentPT, key), params);
+            const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
+            const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+            const merged = mergeProps(self, globalPT);
 
-            return { ...global, ...self };
+            return merged;
+            /*
+             * @todo: The 'class' option in self can always be more powerful to style the component easily.
+             *
+             * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+             */
         },
         ptm(key = '', params = {}) {
             return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
@@ -27,6 +33,14 @@ var script = {
         ptmo(obj = {}, key = '', params = {}) {
             return this.getPTValue(obj, key, params);
         }
+    },
+    computed: {
+        defaultPT() {
+            return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+        },
+        defaultsParams() {
+            return { instance: this.$ };
+        }
     }
 };
 

package/basecomponent/basecomponent.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as t}from"primevue/utils";var e={name:"BaseComponent",props:{pt:{type:Object,default:void 0}},methods:{getPTItem(e={},s=""){const a=t.convertToFlatCase(s);return e[Object.keys(e).find((e=>t.convertToFlatCase(e)===a))||""]},getPTValue(e={},s="",a={}){const r=t.getItemValue(this.getPTItem(e,s),a),o=this.getPTItem(this.$primevue.config.pt,this.$.type.name);return{...t.getItemValue(this.getPTItem(o,s),a),...r}},ptm(t="",e={}){return this.getPTValue(this.pt,t,{props:this.$props,state:this.$data,...e})},ptmo(t={},e="",s={}){return this.getPTValue(t,e,s)}}};export{e as default};
+import{ObjectUtils as t}from"primevue/utils";import{mergeProps as e}from"vue";var s={name:"BaseComponent",props:{pt:{type:Object,default:void 0}},methods:{getOption(e={},s=""){const a=t.convertToFlatCase(s);return e[Object.keys(e).find((e=>t.convertToFlatCase(e)===a))||""]},getPTValue(s={},a="",r={}){const i=t.getItemValue(this.getOption(s,a),r),o=t.getItemValue(this.getOption(this.defaultPT,a),r);return e(i,o)},ptm(t="",e={}){return this.getPTValue(this.pt,t,{props:this.$props,state:this.$data,...e})},ptmo(t={},e="",s={}){return this.getPTValue(t,e,s)}},computed:{defaultPT(){return t.getItemValue(this.getOption(this.$primevue.config.pt,this.$.type.name),this.defaultsParams)},defaultsParams(){return{instance:this.$}}}};export{s as default};

package/basecomponent/basecomponent.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.basecomponent = (function (utils) {
+this.primevue.basecomponent = (function (utils, vue) {
     'use strict';
 
     var script = {
@@ -11,17 +11,22 @@ this.primevue.basecomponent = (function (utils) {
             }
         },
         methods: {
-            getPTItem(obj = {}, key = '') {
+            getOption(obj = {}, key = '') {
                 const fKey = utils.ObjectUtils.convertToFlatCase(key);
 
                 return obj[Object.keys(obj).find((k) => utils.ObjectUtils.convertToFlatCase(k) === fKey) || ''];
             },
             getPTValue(obj = {}, key = '', params = {}) {
-                const self = utils.ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
-                const globalComponentPT = this.getPTItem(this.$primevue.config.pt, this.$.type.name);
-                const global = utils.ObjectUtils.getItemValue(this.getPTItem(globalComponentPT, key), params);
+                const self = utils.ObjectUtils.getItemValue(this.getOption(obj, key), params);
+                const globalPT = utils.ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+                const merged = vue.mergeProps(self, globalPT);
 
-                return { ...global, ...self };
+                return merged;
+                /*
+                 * @todo: The 'class' option in self can always be more powerful to style the component easily.
+                 *
+                 * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+                 */
             },
             ptm(key = '', params = {}) {
                 return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
@@ -29,9 +34,17 @@ this.primevue.basecomponent = (function (utils) {
             ptmo(obj = {}, key = '', params = {}) {
                 return this.getPTValue(obj, key, params);
             }
+        },
+        computed: {
+            defaultPT() {
+                return utils.ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+            },
+            defaultsParams() {
+                return { instance: this.$ };
+            }
         }
     };
 
     return script;
 
-})(primevue.utils);
+})(primevue.utils, Vue);

package/basecomponent/basecomponent.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.basecomponent=function(t){"use strict";return{name:"BaseComponent",props:{pt:{type:Object,default:void 0}},methods:{getPTItem(e={},s=""){const i=t.ObjectUtils.convertToFlatCase(s);return e[Object.keys(e).find((e=>t.ObjectUtils.convertToFlatCase(e)===i))||""]},getPTValue(e={},s="",i={}){const r=t.ObjectUtils.getItemValue(this.getPTItem(e,s),i),p=this.getPTItem(this.$primevue.config.pt,this.$.type.name);return{...t.ObjectUtils.getItemValue(this.getPTItem(p,s),i),...r}},ptm(t="",e={}){return this.getPTValue(this.pt,t,{props:this.$props,state:this.$data,...e})},ptmo(t={},e="",s={}){return this.getPTValue(t,e,s)}}}}(primevue.utils);
+this.primevue=this.primevue||{},this.primevue.basecomponent=function(t,e){"use strict";return{name:"BaseComponent",props:{pt:{type:Object,default:void 0}},methods:{getOption(e={},s=""){const i=t.ObjectUtils.convertToFlatCase(s);return e[Object.keys(e).find((e=>t.ObjectUtils.convertToFlatCase(e)===i))||""]},getPTValue(s={},i="",r={}){const u=t.ObjectUtils.getItemValue(this.getOption(s,i),r),a=t.ObjectUtils.getItemValue(this.getOption(this.defaultPT,i),r);return e.mergeProps(u,a)},ptm(t="",e={}){return this.getPTValue(this.pt,t,{props:this.$props,state:this.$data,...e})},ptmo(t={},e="",s={}){return this.getPTValue(t,e,s)}},computed:{defaultPT(){return t.ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt,this.$.type.name),this.defaultsParams)},defaultsParams(){return{instance:this.$}}}}}(primevue.utils,Vue);

package/calendar/Calendar.d.ts

@@ -8,8 +8,19 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CalendarPassThroughMethodOptions {
+    props: CalendarProps;
+    state: CalendarState;
+}
+
 /**
  * Custom Calendar responsive options metadata.
  */
@@ -69,6 +80,259 @@ export interface CalendarBlurEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CalendarProps.pt}
+ */
+export interface CalendarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    dropdownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the group container's DOM element.
+     */
+    groupContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the group's DOM element.
+     */
+    group?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    previousButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month title's DOM element.
+     */
+    monthTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year title's DOM element.
+     */
+    yearTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the decade title's DOM element.
+     */
+    decadeTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    nextButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header's DOM element.
+     */
+    tableHeader?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header row's DOM element.
+     */
+    tableHeaderRow?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header cell's DOM element.
+     */
+    tableHeaderCell?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week label's DOM element.
+     */
+    weekLabel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week day's DOM element.
+     */
+    weekDay?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table body's DOM element.
+     */
+    tableBody?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table body row's DOM element.
+     */
+    tableBodyRow?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week number's DOM element.
+     */
+    weekNumber?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week label container's DOM element.
+     */
+    weekLabelContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the day's DOM element.
+     */
+    day?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the day label's DOM element.
+     */
+    dayLabel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria selected day's DOM element.
+     */
+    ariaSelectedDay?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month picker's DOM element.
+     */
+    monthPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month's DOM element.
+     */
+    month?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria month's DOM element.
+     */
+    ariaMonth?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year picker's DOM element.
+     */
+    yearPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year's DOM element.
+     */
+    year?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria year's DOM element.
+     */
+    ariaYear?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the time picker's DOM element.
+     */
+    timePicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hour picker's DOM element.
+     */
+    hourPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hour's DOM element.
+     */
+    hour?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separatorc ontainer's DOM element.
+     */
+    separatorContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the minute picker's DOM element.
+     */
+    minutePicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the minute's DOM element.
+     */
+    minute?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the second picker's DOM element.
+     */
+    secondPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the second's DOM element.
+     */
+    second?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the ampm picker's DOM element.
+     */
+    ampmPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the ampm's DOM element.
+     */
+    ampm?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    todayButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    clearButton?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CalendarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Calendar component.
+ */
+export interface CalendarState {
+    /**
+     * Current month as a number.
+     */
+    currentMonth: number;
+    /**
+     * Current year as a number.
+     */
+    currentYear: number;
+    /**
+     * Current hour as a number.
+     */
+    currentHour: number;
+    /**
+     * Current minute as a number.
+     */
+    currentMinute: number;
+    /**
+     * Current second as a number.
+     */
+    currentSecond: number;
+    /**
+     * Current pm state as a boolean.
+     * @defaultValue false
+     */
+    pm: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current view state as a string.
+     * @defaultValue 'date'
+     */
+    currentView: string;
+}
+
 /**
  * Defines valid properties in Calendar component.
  */
@@ -336,6 +600,11 @@ export interface CalendarProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CalendarPassThroughOptions}
+     */
+    pt?: CalendarPassThroughOptions;
 }
 
 /**