primevue 3.30.0 → 3.30.2

package/column/Column.d.ts

@@ -17,7 +17,7 @@ import { DropdownPassThroughOptionType } from '../dropdown';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
 
-export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
+export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
@@ -141,6 +141,10 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the filter menu button's DOM element.
      */
     filterMenuButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter menu icon's DOM element.
+     */
+    filterMenuIcon?: ColumnPassThroughOptionType;
     /**
      * Uses to pass attributes to the header filter clear button's DOM element.
      */
@@ -594,6 +598,50 @@ export interface ColumnContext {
      * @defaultValue false
      */
     disabled: boolean;
+    /**
+     * Current sort state of the column as a boolean.
+     * @defaultValue false
+     */
+    sorted: boolean;
+    /**
+     * Current frozen state of the column as a boolean.
+     * @defaultValue false
+     */
+    frozen: boolean;
+    /**
+     * Current resizable state of the column as a boolean.
+     * @defaultValue false
+     */
+    resizable: boolean;
+    /**
+     * Current size state of the table.
+     */
+    size: string;
+    /**
+     * Current gridlines state of the table as a boolean.
+     * @defaultValue false
+     */
+    showGridlines: boolean;
+    /**
+     * Current highlighted state of the filter row item as a boolean.
+     * @defaultValue false
+     */
+    highlighted: boolean;
+    /**
+     * Current hidden state of the filter clear button of a column as a boolean.
+     * @defaultValue false
+     */
+    hidden: boolean;
+    /**
+     * Current visible state of the filter menu of a column as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current active state of the filter menu of a column as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
 }
 
 /**

package/columngroup/ColumnGroup.d.ts

@@ -9,7 +9,7 @@ import { ComponentHooks } from '../basecomponent';
 import { DataTablePassThroughOptions } from '../datatable';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes) | null | undefined;
+export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
@@ -72,6 +72,11 @@ export interface ColumnGroupContext {
      * Current type of the column group.
      */
     type: string;
+    /**
+     * Current scrollable state of column group as a boolean.
+     * @defaultValue false
+     */
+    scrollable: boolean;
 }
 
 /**

package/config/PrimeVue.d.ts

@@ -88,7 +88,7 @@ import { TreeTablePassThroughOptions } from '../treetable';
 import { DefaultPTOptions } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
-interface PrimeVueConfiguration {
+export interface PrimeVueConfiguration {
     ripple?: boolean;
     inputStyle?: string;
     locale?: PrimeVueLocaleOptions;
@@ -98,14 +98,14 @@ interface PrimeVueConfiguration {
     unstyled?: boolean;
 }
 
-interface PrimeVueZIndexOptions {
+export interface PrimeVueZIndexOptions {
     modal?: number;
     overlay?: number;
     menu?: number;
     tooltip?: number;
 }
 
-interface PrimeVuePTOptions {
+export interface PrimeVuePTOptions {
     accordion?: DefaultPTOptions<AccordionPassThroughOptions>;
     accordiontab?: DefaultPTOptions<AccordionTabPassThroughOptions>;
     autocomplete?: DefaultPTOptions<AutoCompletePassThroughOptions>;
@@ -198,7 +198,7 @@ interface PrimeVuePTOptions {
     };
 }
 
-interface PrimeVueLocaleAriaOptions {
+export interface PrimeVueLocaleAriaOptions {
     trueLabel?: string;
     falseLabel?: string;
     nullLabel?: string;
@@ -249,7 +249,7 @@ interface PrimeVueLocaleAriaOptions {
     rotateLeft?: string;
 }
 
-interface PrimeVueLocaleOptions {
+export interface PrimeVueLocaleOptions {
     startsWith?: string;
     contains?: string;
     notContains?: string;
@@ -317,7 +317,12 @@ interface PrimeVueLocaleOptions {
     aria?: PrimeVueLocaleAriaOptions;
 }
 
-export declare function usePrimeVue(): { config: PrimeVueConfiguration };
+export type PrimeVueChangeTheme = (currentTheme: string, newTheme: string, linkElementId: string, callback?: Function) => void;
+
+export declare function usePrimeVue(): {
+    config: PrimeVueConfiguration;
+    changeTheme: PrimeVueChangeTheme;
+};
 
 declare const plugin: Plugin;
 export default plugin;
@@ -326,6 +331,7 @@ declare module 'vue/types/vue' {
     interface Vue {
         $primevue: {
             config: PrimeVueConfiguration;
+            changeTheme: PrimeVueChangeTheme;
         };
     }
 }
@@ -334,6 +340,7 @@ declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         $primevue: {
             config: PrimeVueConfiguration;
+            changeTheme: PrimeVueChangeTheme;
         };
     }
 }

package/confirmdialog/ConfirmDialog.d.ts

@@ -13,7 +13,7 @@ import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes) | null | undefined;
+export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/confirmpopup/ConfirmPopup.d.ts

@@ -13,7 +13,7 @@ import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
+export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/contextmenu/ContextMenu.d.ts

@@ -13,7 +13,7 @@ import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes) | null | undefined;
+export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.

package/core/core.js

@@ -866,10 +866,18 @@ this.primevue.utils = (function (exports) {
       },
       toFlatCase: function toFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+      },
+      toKebabCase: function toKebabCase(str) {
+        // convert snake, camel and pascal cases to kebab case
+        return this.isString(str) ? str.replace(/(_)/g, '-').replace(/[A-Z]/g, function (c, i) {
+          return i === 0 ? c : '-' + c.toLowerCase();
+        }).toLowerCase() : str;
       },
       toCapitalCase: function toCapitalCase(str) {
-        return this.isNotEmpty(str) ? str[0].toUpperCase() + str.slice(1) : str;
+        return this.isString(str, {
+          empty: false
+        }) ? str[0].toUpperCase() + str.slice(1) : str;
       },
       isEmpty: function isEmpty(value) {
         return value === null || value === undefined || value === '' || Array.isArray(value) && value.length === 0 || !(value instanceof Date) && _typeof(value) === 'object' && Object.keys(value).length === 0;
@@ -881,13 +889,19 @@ this.primevue.utils = (function (exports) {
         return !!(value && value.constructor && value.call && value.apply);
       },
       isObject: function isObject(value) {
-        return value !== null && value instanceof Object && value.constructor === Object;
+        var empty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        return value instanceof Object && value.constructor === Object && (empty || Object.keys(value).length !== 0);
       },
       isDate: function isDate(value) {
-        return value !== null && value instanceof Date && value.constructor === Date;
+        return value instanceof Date && value.constructor === Date;
       },
       isArray: function isArray(value) {
-        return value !== null && Array.isArray(value);
+        var empty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        return Array.isArray(value) && (empty || value.length !== 0);
+      },
+      isString: function isString(value) {
+        var empty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        return typeof value === 'string' && (empty || value !== '');
       },
       isPrintableCharacter: function isPrintableCharacter() {
         var _char = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -1698,6 +1712,85 @@ this.primevue.config = (function (exports, api, vue) {
 
 })({}, primevue.api, Vue);
 
+this.primevue = this.primevue || {};
+this.primevue.usestyle = (function (exports, utils, vue) {
+    'use strict';
+
+    /*
+     * Ported from useStyleTag in @vueuse/core
+     * https://github.com/vueuse
+     */
+    function tryOnMounted(fn) {
+      var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (vue.getCurrentInstance()) vue.onMounted(fn);else if (sync) fn();else vue.nextTick(fn);
+    }
+    var _id = 0;
+    function useStyle(css) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var isLoaded = vue.ref(false);
+      var cssRef = vue.ref(css);
+      var styleRef = vue.ref(null);
+      var defaultDocument = utils.DomHandler.isClient() ? window.document : undefined;
+      var _options$document = options.document,
+        document = _options$document === void 0 ? defaultDocument : _options$document,
+        _options$immediate = options.immediate,
+        immediate = _options$immediate === void 0 ? true : _options$immediate,
+        _options$manual = options.manual,
+        manual = _options$manual === void 0 ? false : _options$manual,
+        _options$name = options.name,
+        name = _options$name === void 0 ? "style_".concat(++_id) : _options$name,
+        _options$id = options.id,
+        id = _options$id === void 0 ? undefined : _options$id,
+        _options$media = options.media,
+        media = _options$media === void 0 ? undefined : _options$media;
+      var stop = function stop() {};
+      var load = function load() {
+        if (!document) return;
+        styleRef.value = document.querySelector("style[data-primevue-style-id=\"".concat(name, "\"]")) || document.getElementById(id) || document.createElement('style');
+        if (!styleRef.value.isConnected) {
+          styleRef.value.type = 'text/css';
+          id && (styleRef.value.id = id);
+          media && (styleRef.value.media = media);
+          document.head.appendChild(styleRef.value);
+          name && styleRef.value.setAttribute('data-primevue-style-id', name);
+        }
+        if (isLoaded.value) return;
+        stop = vue.watch(cssRef, function (value) {
+          styleRef.value.textContent = value;
+        }, {
+          immediate: true
+        });
+        isLoaded.value = true;
+      };
+      var unload = function unload() {
+        if (!document || !isLoaded.value) return;
+        stop();
+        utils.DomHandler.isExist(styleRef.value) && document.head.removeChild(styleRef.value);
+        isLoaded.value = false;
+      };
+      if (immediate && !manual) tryOnMounted(load);
+
+      /*if (!manual)
+        tryOnScopeDispose(unload)*/
+
+      return {
+        id: id,
+        name: name,
+        css: cssRef,
+        unload: unload,
+        load: load,
+        isLoaded: vue.readonly(isLoaded)
+      };
+    }
+
+    exports.useStyle = useStyle;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({}, primevue.utils, Vue);
+
 this.primevue = this.primevue || {};
 this.primevue.base = (function (exports, usestyle) {
     'use strict';
@@ -1756,9 +1849,15 @@ this.primevue.basedirective = (function (base, utils, vue) {
         var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
         var params = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
         var searchInDefaultPT = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+        var getValue = function getValue() {
+          var value = BaseDirective._getOptionValue.apply(BaseDirective, arguments);
+          return utils.ObjectUtils.isString(value) || utils.ObjectUtils.isArray(value) ? {
+            "class": value
+          } : value;
+        };
         var datasetPrefix = 'data-pc-';
-        var self = BaseDirective._getOptionValue(obj, key, params);
-        var globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
+        var self = getValue(obj, key, params);
+        var globalPT = searchInDefaultPT ? getValue(instance.defaultPT, key, params) : undefined;
         var merged = vue.mergeProps(self, globalPT, _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), utils.ObjectUtils.toFlatCase(instance.$name))), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), utils.ObjectUtils.toFlatCase(key))));
         return merged;
       },
@@ -2055,11 +2154,11 @@ this.primevue.basecomponent = (function (base, usestyle, utils, vue) {
     function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
     function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
     var inlineStyles = {};
-    var buttonStyles = "\n.p-button {\n    margin: 0;\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    vertical-align: bottom;\n    text-align: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-button-label {\n    flex: 1 1 auto;\n}\n\n.p-button-icon-right {\n    order: 1;\n}\n\n.p-button:disabled {\n    cursor: default;\n}\n\n.p-button-icon-only {\n    justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n    visibility: hidden;\n    width: 0;\n    flex: 0 0 auto;\n}\n\n.p-button-vertical {\n    flex-direction: column;\n}\n\n.p-button-icon-bottom {\n    order: 2;\n}\n\n.p-buttonset .p-button {\n    margin: 0;\n}\n\n.p-buttonset .p-button:not(:last-child) {\n    border-right: 0 none;\n}\n\n.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {\n    border-radius: 0;\n}\n\n.p-buttonset .p-button:first-of-type {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-buttonset .p-button:last-of-type {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-buttonset .p-button:focus {\n    position: relative;\n    z-index: 1;\n}\n";
+    var buttonStyles = "\n.p-button {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    vertical-align: bottom;\n    text-align: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-button-label {\n    flex: 1 1 auto;\n}\n\n.p-button-icon-right {\n    order: 1;\n}\n\n.p-button:disabled {\n    cursor: default;\n}\n\n.p-button-icon-only {\n    justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n    visibility: hidden;\n    width: 0;\n    flex: 0 0 auto;\n}\n\n.p-button-vertical {\n    flex-direction: column;\n}\n\n.p-button-icon-bottom {\n    order: 2;\n}\n\n.p-buttonset .p-button {\n    margin: 0;\n}\n\n.p-buttonset .p-button:not(:last-child) {\n    border-right: 0 none;\n}\n\n.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {\n    border-radius: 0;\n}\n\n.p-buttonset .p-button:first-of-type {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-buttonset .p-button:last-of-type {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-buttonset .p-button:focus {\n    position: relative;\n    z-index: 1;\n}\n";
     var checkboxStyles = "\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: default;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n";
-    var inputTextStyles = "\n.p-inputtext {\n    margin: 0;\n}\n\n.p-fluid .p-inputtext {\n    width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup-addon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n    display: block;\n    position: relative;\n}\n\n.p-float-label label {\n    position: absolute;\n    pointer-events: none;\n    top: 50%;\n    margin-top: -.5rem;\n    transition-property: all;\n    transition-timing-function: ease;\n    line-height: 1;\n}\n\n.p-float-label textarea ~ label {\n    top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label {\n    top: -.75rem;\n    font-size: 12px;\n}\n\n.p-float-label .input:-webkit-autofill ~ label {\n    top: -20px;\n    font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n    opacity: 0;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n    opacity: 1;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n    position: relative;\n    display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > i,\n.p-input-icon-right > svg {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n    display: block;\n    width: 100%;\n}\n";
+    var inputTextStyles = "\n.p-fluid .p-inputtext {\n    width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup-addon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n    display: block;\n    position: relative;\n}\n\n.p-float-label label {\n    position: absolute;\n    pointer-events: none;\n    top: 50%;\n    margin-top: -.5rem;\n    transition-property: all;\n    transition-timing-function: ease;\n    line-height: 1;\n}\n\n.p-float-label textarea ~ label {\n    top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label {\n    top: -.75rem;\n    font-size: 12px;\n}\n\n.p-float-label .input:-webkit-autofill ~ label {\n    top: -20px;\n    font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n    opacity: 0;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n    opacity: 1;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n    position: relative;\n    display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > i,\n.p-input-icon-right > svg {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n    display: block;\n    width: 100%;\n}\n";
     var radioButtonStyles = "\n.p-radiobutton {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n}\n\n.p-radiobutton.p-radiobutton-disabled {\n    cursor: default;\n}\n\n.p-radiobutton-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.p-radiobutton-icon {\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    transform: translateZ(0) scale(.1);\n    border-radius: 50%;\n    visibility: hidden;\n}\n\n.p-radiobutton-box.p-highlight .p-radiobutton-icon {\n    transform: translateZ(0) scale(1.0, 1.0);\n    visibility: visible;\n}\n";
-    var styles = "\n.p-component, .p-component * {\n    box-sizing: border-box;\n}\n\n.p-hidden-space {\n    visibility: hidden;\n}\n\n.p-reset {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    outline: 0;\n    text-decoration: none;\n    font-size: 100%;\n    list-style: none;\n}\n\n.p-disabled, .p-disabled * {\n    cursor: default !important;\n    pointer-events: none;\n    user-select: none;\n}\n\n.p-component-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n\n.p-unselectable-text {\n    user-select: none;\n}\n\n.p-sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    word-wrap: normal !important;\n}\n\ninput[type=\"button\"],\ninput[type=\"submit\"],\ninput[type=\"reset\"],\ninput[type=\"file\"]::-webkit-file-upload-button,\nbutton { /* @todo */\n    border-radius: 0;\n}\n\n.p-link {\n\ttext-align: left;\n\tbackground-color: transparent;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: none;\n    cursor: pointer;\n    user-select: none;\n}\n\n.p-link:disabled {\n\tcursor: default;\n}\n\n/* Non vue overlay animations */\n.p-connected-overlay {\n    opacity: 0;\n    transform: scaleY(0.8);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-connected-overlay-visible {\n    opacity: 1;\n    transform: scaleY(1);\n}\n\n.p-connected-overlay-hidden {\n    opacity: 0;\n    transform: scaleY(1);\n    transition: opacity .1s linear;\n}\n\n/* Vue based overlay animations */\n.p-connected-overlay-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n\n.p-connected-overlay-leave-to {\n    opacity: 0;\n}\n\n.p-connected-overlay-enter-active {\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-connected-overlay-leave-active {\n    transition: opacity .1s linear;\n}\n\n/* Toggleable Content */\n.p-toggleable-content-enter-from,\n.p-toggleable-content-leave-to {\n    max-height: 0;\n}\n\n.p-toggleable-content-enter-to,\n.p-toggleable-content-leave-from {\n    max-height: 1000px;\n}\n\n.p-toggleable-content-leave-active {\n    overflow: hidden;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);\n}\n\n.p-toggleable-content-enter-active {\n    overflow: hidden;\n    transition: max-height 1s ease-in-out;\n}\n".concat(buttonStyles, "\n").concat(checkboxStyles, "\n").concat(inputTextStyles, "\n").concat(radioButtonStyles, "\n");
+    var styles = "\n.p-component, .p-component * {\n    box-sizing: border-box;\n}\n\n.p-hidden-space {\n    visibility: hidden;\n}\n\n.p-reset {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    outline: 0;\n    text-decoration: none;\n    font-size: 100%;\n    list-style: none;\n}\n\n.p-disabled, .p-disabled * {\n    cursor: default !important;\n    pointer-events: none;\n    user-select: none;\n}\n\n.p-component-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n\n.p-unselectable-text {\n    user-select: none;\n}\n\n.p-sr-only {\n    border: 0;\n    clip: rect(1px, 1px, 1px, 1px);\n    clip-path: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    word-wrap: normal !important;\n}\n\n.p-link {\n\ttext-align: left;\n\tbackground-color: transparent;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: none;\n    cursor: pointer;\n    user-select: none;\n}\n\n.p-link:disabled {\n\tcursor: default;\n}\n\n/* Non vue overlay animations */\n.p-connected-overlay {\n    opacity: 0;\n    transform: scaleY(0.8);\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-connected-overlay-visible {\n    opacity: 1;\n    transform: scaleY(1);\n}\n\n.p-connected-overlay-hidden {\n    opacity: 0;\n    transform: scaleY(1);\n    transition: opacity .1s linear;\n}\n\n/* Vue based overlay animations */\n.p-connected-overlay-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n\n.p-connected-overlay-leave-to {\n    opacity: 0;\n}\n\n.p-connected-overlay-enter-active {\n    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-connected-overlay-leave-active {\n    transition: opacity .1s linear;\n}\n\n/* Toggleable Content */\n.p-toggleable-content-enter-from,\n.p-toggleable-content-leave-to {\n    max-height: 0;\n}\n\n.p-toggleable-content-enter-to,\n.p-toggleable-content-leave-from {\n    max-height: 1000px;\n}\n\n.p-toggleable-content-leave-active {\n    overflow: hidden;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);\n}\n\n.p-toggleable-content-enter-active {\n    overflow: hidden;\n    transition: max-height 1s ease-in-out;\n}\n".concat(buttonStyles, "\n").concat(checkboxStyles, "\n").concat(inputTextStyles, "\n").concat(radioButtonStyles, "\n");
     var _useStyle = usestyle.useStyle(styles, {
         name: 'common',
         manual: true
@@ -2140,13 +2239,20 @@ this.primevue.basecomponent = (function (base, usestyle, utils, vue) {
           }) || ''], params), fKeys.join('.'), params) : undefined : utils.ObjectUtils.getItemValue(options, params);
         },
         _getPTValue: function _getPTValue() {
+          var _this = this;
           var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
           var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
           var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
           var searchInDefaultPT = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+          var getValue = function getValue() {
+            var value = _this._getOptionValue.apply(_this, arguments);
+            return utils.ObjectUtils.isString(value) || utils.ObjectUtils.isArray(value) ? {
+              "class": value
+            } : value;
+          };
           var datasetPrefix = 'data-pc-';
-          var self = this._getOptionValue(obj, key, params);
-          var globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined;
+          var self = getValue(obj, key, params);
+          var globalPT = searchInDefaultPT ? /./g.test(key) && !!params[key.split('.')[0]] ? getValue(this.globalPT, key, params) : getValue(this.defaultPT, key, params) : undefined;
           var merged = vue.mergeProps(self, globalPT, _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), utils.ObjectUtils.toFlatCase(this.$.type.name))), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), utils.ObjectUtils.toFlatCase(key))));
           return merged;
           /*
@@ -2205,10 +2311,15 @@ this.primevue.basecomponent = (function (base, usestyle, utils, vue) {
         }
       },
       computed: {
+        globalPT: function globalPT() {
+          return utils.ObjectUtils.getItemValue(this.$primevue.config.pt, {
+            instance: this
+          });
+        },
         defaultPT: function defaultPT() {
           return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, {
             instance: this
-          });
+          }) || this.globalPT;
         },
         isUnstyled: function isUnstyled() {
           return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
@@ -5940,83 +6051,6 @@ this.primevue.usedialog = (function (exports, vue) {
 
 })({}, Vue);
 
-this.primevue = this.primevue || {};
-this.primevue.usestyle = (function (exports, utils, vue) {
-    'use strict';
-
-    /*
-     * Ported from useStyleTag in @vueuse/core
-     * https://github.com/vueuse
-     */
-    function tryOnMounted(fn) {
-      var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      if (vue.getCurrentInstance()) vue.onMounted(fn);else if (sync) fn();else vue.nextTick(fn);
-    }
-    var _id = 0;
-    function useStyle(css) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var isLoaded = vue.ref(false);
-      var defaultDocument = utils.DomHandler.isClient() ? window.document : undefined;
-      var _options$document = options.document,
-        document = _options$document === void 0 ? defaultDocument : _options$document,
-        _options$immediate = options.immediate,
-        immediate = _options$immediate === void 0 ? true : _options$immediate,
-        _options$manual = options.manual,
-        manual = _options$manual === void 0 ? false : _options$manual,
-        _options$name = options.name,
-        name = _options$name === void 0 ? "style_".concat(++_id) : _options$name,
-        _options$id = options.id,
-        id = _options$id === void 0 ? undefined : _options$id,
-        _options$media = options.media,
-        media = _options$media === void 0 ? undefined : _options$media;
-      var cssRef = vue.ref(css);
-      var stop = function stop() {};
-      var load = function load() {
-        if (!document) return;
-        var el = document.querySelector("style[data-primevue-style-id=\"".concat(name, "\"]")) || document.getElementById(id) || document.createElement('style');
-        if (!el.isConnected) {
-          el.type = 'text/css';
-          id && (el.id = id);
-          media && (el.media = media);
-          document.head.appendChild(el);
-          name && el.setAttribute('data-primevue-style-id', name);
-        }
-        if (isLoaded.value) return;
-        stop = vue.watch(cssRef, function (value) {
-          el.textContent = value;
-        }, {
-          immediate: true
-        });
-        isLoaded.value = true;
-      };
-      var unload = function unload() {
-        if (!document || !isLoaded.value) return;
-        stop();
-        document.head.removeChild(document.getElementById(id));
-        isLoaded.value = false;
-      };
-      if (immediate && !manual) tryOnMounted(load);
-
-      /*if (!manual)
-        tryOnScopeDispose(unload)*/
-
-      return {
-        id: id,
-        css: cssRef,
-        unload: unload,
-        load: load,
-        isLoaded: vue.readonly(isLoaded)
-      };
-    }
-
-    exports.useStyle = useStyle;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-    return exports;
-
-})({}, primevue.utils, Vue);
-
 this.primevue = this.primevue || {};
 this.primevue.button = (function (Badge, SpinnerIcon, Ripple, BaseComponent, vue) {
     'use strict';
@@ -6275,7 +6309,8 @@ this.primevue.inputtext = (function (BaseComponent, vue) {
         ptmParams: function ptmParams() {
           return {
             context: {
-              filled: this.filled
+              filled: this.filled,
+              disabled: this.$attrs.disabled || this.$attrs.disabled === ''
             }
           };
         }
@@ -7485,8 +7520,8 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
       wrapper: 'p-message-wrapper',
       icon: 'p-message-icon',
       text: 'p-message-text',
-      button: 'p-message-close p-link',
-      buttonIcon: 'p-message-close-icon'
+      closeButton: 'p-message-close p-link',
+      closeIcon: 'p-message-close-icon'
     };
     var _useStyle = usestyle.useStyle(styles, {
         name: 'message',
@@ -7623,20 +7658,20 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
             "class": ["p-message-text", _ctx.cx('text')]
           }, _ctx.ptm('text')), [vue.renderSlot(_ctx.$slots, "default")], 16), _ctx.closable ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             key: 0,
-            "class": _ctx.cx('button'),
+            "class": _ctx.cx('closeButton'),
             "aria-label": $options.closeAriaLabel,
             type: "button",
             onClick: _cache[0] || (_cache[0] = function ($event) {
               return $options.close($event);
             })
-          }, _objectSpread(_objectSpread({}, _ctx.closeButtonProps), _ctx.ptm('button'))), [vue.renderSlot(_ctx.$slots, "closeicon", {}, function () {
+          }, _objectSpread(_objectSpread(_objectSpread({}, _ctx.closeButtonProps), _ctx.ptm('button')), _ctx.ptm('closeButton'))), [vue.renderSlot(_ctx.$slots, "closeicon", {}, function () {
             return [_ctx.closeIcon ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
               key: 0,
-              "class": [_ctx.cx('buttonIcon'), _ctx.closeIcon]
-            }, _ctx.ptm('buttonIcon')), null, 16)) : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
+              "class": [_ctx.cx('closeIcon'), _ctx.closeIcon]
+            }, _objectSpread(_objectSpread({}, _ctx.ptm('buttonIcon')), _ctx.ptm('closeIcon'))), null, 16)) : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
               key: 1,
-              "class": [_ctx.cx('buttonIcon'), _ctx.closeIcon]
-            }, _ctx.ptm('buttonIcon')), null, 16, ["class"]))];
+              "class": [_ctx.cx('closeIcon'), _ctx.closeIcon]
+            }, _objectSpread(_objectSpread({}, _ctx.ptm('buttonIcon')), _ctx.ptm('closeIcon'))), null, 16, ["class"]))];
           })], 16, _hoisted_1)), [[_directive_ripple]]) : vue.createCommentVNode("", true)], 16)], 16), [[vue.vShow, $data.visible]])];
         }),
         _: 3
@@ -9645,7 +9680,9 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                 }),
                 type: "button",
                 tabindex: _ctx.maximizable ? '0' : '-1'
-              }, _ctx.ptm('maximizableButton')), [vue.renderSlot(_ctx.$slots, "maximizeicon", {
+              }, _ctx.ptm('maximizableButton'), {
+                "data-pc-group-section": "headericon"
+              }), [vue.renderSlot(_ctx.$slots, "maximizeicon", {
                 maximized: $data.maximized
               }, function () {
                 return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.maximizeIconComponent), vue.mergeProps({
@@ -9661,7 +9698,9 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                 }),
                 "aria-label": $options.closeAriaLabel,
                 type: "button"
-              }, _objectSpread(_objectSpread({}, _ctx.closeButtonProps), _ctx.ptm('closeButton'))), [vue.renderSlot(_ctx.$slots, "closeicon", {}, function () {
+              }, _objectSpread(_objectSpread({}, _ctx.closeButtonProps), _ctx.ptm('closeButton')), {
+                "data-pc-group-section": "headericon"
+              }), [vue.renderSlot(_ctx.$slots, "closeicon", {}, function () {
                 return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
                   "class": [_ctx.cx('closeButtonIcon'), _ctx.closeIcon]
                 }, _ctx.ptm('closeButtonIcon')), null, 16, ["class"]))];
@@ -9950,7 +9989,7 @@ this.primevue.paginator = (function (utils, BaseComponent, usestyle, vue, AngleD
         "class": vue.normalizeClass(_ctx.cx('jumpToPageDropdown')),
         disabled: $props.disabled,
         unstyled: _ctx.unstyled,
-        pt: _ctx.ptm('jumpTpPageDropdown'),
+        pt: _ctx.ptm('jumpToPageDropdown'),
         "data-pc-section": "jumptopagedropdown"
       }, null, 8, ["modelValue", "options", "class", "disabled", "unstyled", "pt"]);
     }
@@ -10801,9 +10840,11 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, BaseComponent, u
         getPTOptions: function getPTOptions(key) {
           return this.ptm(key, {
             context: {
+              index: this.index,
               expanded: this.expanded,
               selected: this.selected,
-              checked: this.checked
+              checked: this.checked,
+              leaf: this.leaf
             }
           });
         },