primevue 3.31.0 → 3.32.0

package/basecomponent/BaseComponent.vue

@@ -357,6 +357,7 @@ ${radioButtonStyles}
 `;
 
 const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
+const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
 
 export default {
     name: 'BaseComponent',
@@ -380,8 +381,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (!newValue) {
-                    loadStyle();
-                    this.$options.css && this.$css.loadStyle();
+                    loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+                    this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
                 }
             }
         }
@@ -394,7 +395,8 @@ export default {
         this._hook('onCreated');
     },
     beforeMount() {
-        loadBaseStyle();
+        loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
+        this._loadGlobalStyles();
         this._hook('onBeforeMount');
     },
     mounted() {
@@ -415,10 +417,25 @@ export default {
     methods: {
         _hook(hookName) {
             const selfHook = this._getOptionValue(this.pt, `hooks.${hookName}`);
-            const globalHook = this._getOptionValue(this.globalPT, `hooks.${hookName}`);
+            const defaultHook = this._getOptionValue(this.defaultPT, `hooks.${hookName}`);
 
             selfHook?.();
-            globalHook?.();
+            defaultHook?.();
+        },
+        _loadGlobalStyles() {
+            /*
+             * @todo Add self custom css support;
+             * <Panel :pt="{ css: `...` }" .../>
+             *
+             * const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
+             * const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
+             * const mergedCSS = mergeProps(selfCSS, defaultCSS);
+             * ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
+             */
+
+            const globalCSS = this._getOptionValue(this.globalPT, 'global.css', this.$params);
+
+            ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -434,19 +451,17 @@ export default {
                 : ObjectUtils.getItemValue(options, params);
         },
         _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
-            const getValue = (...args) => {
-                const value = this._getOptionValue(...args);
-
-                return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
-            };
-
             const datasetPrefix = 'data-pc-';
-            const self = getValue(obj, key, params);
-            const globalPT = searchInDefaultPT ? (/./g.test(key) && !!params[key.split('.')[0]] ? getValue(this.globalPT, key, params) : getValue(this.defaultPT, key, params)) : undefined;
-            const merged = mergeProps(self, globalPT, {
-                ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
-                [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
-            });
+            const self = this._getPTClassValue(obj, key, params);
+            const globalPT = searchInDefaultPT ? (/./g.test(key) && !!params[key.split('.')[0]] ? this._getPTClassValue(this.globalPT, key, params) : this._getPTClassValue(this.defaultPT, key, params)) : undefined;
+            const merged = mergeProps(
+                self,
+                globalPT,
+                key !== 'transition' && {
+                    ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
+                    [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
+                }
+            );
 
             return merged;
             /*
@@ -455,19 +470,24 @@ export default {
              * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
              */
         },
+        _getPTClassValue(...args) {
+            const value = this._getOptionValue(...args);
+
+            return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
+        },
         ptm(key = '', params = {}) {
-            return this._getPTValue(this.pt, key, { instance: this, props: this.$props, state: this.$data, ...params });
+            return this._getPTValue(this.pt, key, { ...this.$params, ...params });
         },
         ptmo(obj = {}, key = '', params = {}) {
             return this._getPTValue(obj, key, { instance: this, ...params }, false);
         },
         cx(key = '', params = {}) {
-            return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
+            return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
-                const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
-                const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
+                const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
+                const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
 
                 return [base, self];
             }
@@ -477,16 +497,22 @@ export default {
     },
     computed: {
         globalPT() {
-            return ObjectUtils.getItemValue(this.$primevue.config.pt, { instance: this });
+            return ObjectUtils.getItemValue(this.$config.pt, { instance: this });
         },
         defaultPT() {
-            return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this }) || this.globalPT;
+            return this._getOptionValue(this.$config.pt, this.$options.hostName || this.$.type.name, { instance: this }) || this.globalPT;
         },
         isUnstyled() {
-            return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
+            return this.unstyled !== undefined ? this.unstyled : this.$config.unstyled;
+        },
+        $params() {
+            return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
         },
         $css() {
-            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
+            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
+        },
+        $config() {
+            return this.$primevue?.config;
         }
     }
 };

package/basecomponent/basecomponent.cjs.js

@@ -22,6 +22,11 @@ var _useStyle = usestyle.useStyle(styles, {
     manual: true
   }),
   loadStyle = _useStyle.load;
+var _useStyle2 = usestyle.useStyle('', {
+    name: 'global',
+    manual: true
+  }),
+  loadGlobalStyle = _useStyle2.load;
 var script = {
   name: 'BaseComponent',
   props: {
@@ -44,8 +49,13 @@ var script = {
       immediate: true,
       handler: function handler(newValue) {
         if (!newValue) {
-          loadStyle();
-          this.$options.css && this.$css.loadStyle();
+          var _this$$config, _this$$config2;
+          loadStyle(undefined, {
+            nonce: (_this$$config = this.$config) === null || _this$$config === void 0 || (_this$$config = _this$$config.csp) === null || _this$$config === void 0 ? void 0 : _this$$config.nonce
+          });
+          this.$options.css && this.$css.loadStyle(undefined, {
+            nonce: (_this$$config2 = this.$config) === null || _this$$config2 === void 0 || (_this$$config2 = _this$$config2.csp) === null || _this$$config2 === void 0 ? void 0 : _this$$config2.nonce
+          });
         }
       }
     }
@@ -59,7 +69,11 @@ var script = {
     this._hook('onCreated');
   },
   beforeMount: function beforeMount() {
-    base.loadBaseStyle();
+    var _this$$config3;
+    base.loadBaseStyle(undefined, {
+      nonce: (_this$$config3 = this.$config) === null || _this$$config3 === void 0 || (_this$$config3 = _this$$config3.csp) === null || _this$$config3 === void 0 ? void 0 : _this$$config3.nonce
+    });
+    this._loadGlobalStyles();
     this._hook('onBeforeMount');
   },
   mounted: function mounted() {
@@ -80,9 +94,26 @@ var script = {
   methods: {
     _hook: function _hook(hookName) {
       var selfHook = this._getOptionValue(this.pt, "hooks.".concat(hookName));
-      var globalHook = this._getOptionValue(this.globalPT, "hooks.".concat(hookName));
+      var defaultHook = this._getOptionValue(this.defaultPT, "hooks.".concat(hookName));
       selfHook === null || selfHook === void 0 ? void 0 : selfHook();
-      globalHook === null || globalHook === void 0 ? void 0 : globalHook();
+      defaultHook === null || defaultHook === void 0 ? void 0 : defaultHook();
+    },
+    _loadGlobalStyles: function _loadGlobalStyles() {
+      var _this$$config4;
+      /*
+       * @todo Add self custom css support;
+       * <Panel :pt="{ css: `...` }" .../>
+       *
+       * const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
+       * const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
+       * const mergedCSS = mergeProps(selfCSS, defaultCSS);
+       * ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
+       */
+
+      var globalCSS = this._getOptionValue(this.globalPT, 'global.css', this.$params);
+      utils.ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, {
+        nonce: (_this$$config4 = this.$config) === null || _this$$config4 === void 0 || (_this$$config4 = _this$$config4.csp) === null || _this$$config4 === void 0 ? void 0 : _this$$config4.nonce
+      });
     },
     _getHostInstance: function _getHostInstance(instance) {
       return instance ? this.$options.hostName ? instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance) : instance.$parentInstance : undefined;
@@ -97,21 +128,14 @@ var script = {
       }) || ''], 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 = 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))));
+      var self = this._getPTClassValue(obj, key, params);
+      var globalPT = searchInDefaultPT ? /./g.test(key) && !!params[key.split('.')[0]] ? this._getPTClassValue(this.globalPT, key, params) : this._getPTClassValue(this.defaultPT, key, params) : undefined;
+      var merged = vue.mergeProps(self, globalPT, key !== 'transition' && _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), utils.ObjectUtils.toFlatCase(this.$.type.name))), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), utils.ObjectUtils.toFlatCase(key))));
       return merged;
       /*
        * @todo: The 'class' option in self can always be more powerful to style the component easily.
@@ -119,14 +143,16 @@ var script = {
        * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
        */
     },
+    _getPTClassValue: function _getPTClassValue() {
+      var value = this._getOptionValue.apply(this, arguments);
+      return utils.ObjectUtils.isString(value) || utils.ObjectUtils.isArray(value) ? {
+        "class": value
+      } : value;
+    },
     ptm: function ptm() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return this._getPTValue(this.pt, key, _objectSpread({
-        instance: this,
-        props: this.$props,
-        state: this.$data
-      }, params));
+      return this._getPTValue(this.pt, key, _objectSpread(_objectSpread({}, this.$params), params));
     },
     ptmo: function ptmo() {
       var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -139,30 +165,15 @@ var script = {
     cx: function cx() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, _objectSpread({
-        instance: this,
-        props: this.$props,
-        state: this.$data,
-        parentInstance: this.$parentInstance
-      }, params)) : undefined;
+      return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, _objectSpread(_objectSpread({}, this.$params), params)) : undefined;
     },
     sx: function sx() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (when) {
-        var self = this._getOptionValue(this.$css.inlineStyles, key, _objectSpread({
-          instance: this,
-          props: this.$props,
-          state: this.$data,
-          parentInstance: this.$parentInstance
-        }, params));
-        var base = this._getOptionValue(inlineStyles, key, _objectSpread({
-          instance: this,
-          props: this.$props,
-          state: this.$data,
-          parentInstance: this.$parentInstance
-        }, params));
+        var self = this._getOptionValue(this.$css.inlineStyles, key, _objectSpread(_objectSpread({}, this.$params), params));
+        var base = this._getOptionValue(inlineStyles, key, _objectSpread(_objectSpread({}, this.$params), params));
         return [base, self];
       }
       return undefined;
@@ -170,24 +181,37 @@ var script = {
   },
   computed: {
     globalPT: function globalPT() {
-      return utils.ObjectUtils.getItemValue(this.$primevue.config.pt, {
+      return utils.ObjectUtils.getItemValue(this.$config.pt, {
         instance: this
       });
     },
     defaultPT: function defaultPT() {
-      return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, {
+      return this._getOptionValue(this.$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;
+      return this.unstyled !== undefined ? this.unstyled : this.$config.unstyled;
+    },
+    $params: function $params() {
+      return {
+        instance: this,
+        props: this.$props,
+        state: this.$data,
+        parentInstance: this.$parentInstance
+      };
     },
     $css: function $css() {
       return _objectSpread(_objectSpread({
         classes: undefined,
         inlineStyles: undefined,
-        loadStyle: function loadStyle() {}
+        loadStyle: function loadStyle() {},
+        loadCustomStyle: function loadCustomStyle() {}
       }, (this._getHostInstance(this) || {}).$css), this.$options.css);
+    },
+    $config: function $config() {
+      var _this$$primevue2;
+      return (_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 ? void 0 : _this$$primevue2.config;
     }
   }
 };

package/basecomponent/basecomponent.cjs.min.js

@@ -1 +1 @@
-"use strict";var n=require("primevue/base"),t=require("primevue/usestyle"),e=require("primevue/utils"),o=require("vue");function i(n){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},i(n)}function l(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,o)}return e}function a(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?l(Object(e),!0).forEach((function(t){r(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function r(n,t,e){return(t=s(t))in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function s(n){var t=p(n,"string");return"symbol"===i(t)?t:String(t)}function p(n,t){if("object"!==i(n)||null===n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var o=e.call(n,t||"default");if("object"!==i(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}var c={},u="\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("\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","\n").concat("\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","\n").concat("\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","\n").concat("\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","\n"),d=t.useStyle(u,{name:"common",manual:!0}).load,b={name:"BaseComponent",props:{pt:{type:Object,default:void 0},unstyled:{type:Boolean,default:void 0}},inject:{$parentInstance:{default:void 0}},watch:{isUnstyled:{immediate:!0,handler:function(n){n||(d(),this.$options.css&&this.$css.loadStyle())}}},beforeCreate:function(){var n,t,e,o;null===(n=this.pt)||void 0===n||null===(n=n.hooks)||void 0===n||null===(t=n.onBeforeCreate)||void 0===t||t.call(n),null===(e=this.$primevue)||void 0===e||null===(e=e.config)||void 0===e||null===(e=e.pt)||void 0===e||null===(e=e[this.$.type.name])||void 0===e||null===(e=e.hooks)||void 0===e||null===(o=e.onBeforeCreate)||void 0===o||o.call(e)},created:function(){this._hook("onCreated")},beforeMount:function(){n.loadBaseStyle(),this._hook("onBeforeMount")},mounted:function(){this._hook("onMounted")},beforeUpdate:function(){this._hook("onBeforeUpdate")},updated:function(){this._hook("onUpdated")},beforeUnmount:function(){this._hook("onBeforeUnmount")},unmounted:function(){this._hook("onUnmounted")},methods:{_hook:function(n){var t=this._getOptionValue(this.pt,"hooks.".concat(n)),e=this._getOptionValue(this.globalPT,"hooks.".concat(n));null==t||t(),null==e||e()},_getHostInstance:function(n){return n?this.$options.hostName?n.$.type.name===this.$options.hostName?n:this._getHostInstance(n.$parentInstance):n.$parentInstance:void 0},_getOptionValue:function(n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e.ObjectUtils.toFlatCase(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"").split("."),i=o.shift();return i?e.ObjectUtils.isObject(n)?this._getOptionValue(e.ObjectUtils.getItemValue(n[Object.keys(n).find((function(n){return e.ObjectUtils.toFlatCase(n)===i}))||""],t),o.join("."),t):void 0:e.ObjectUtils.getItemValue(n,t)},_getPTValue:function(){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},l=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],s=function(){var t=n._getOptionValue.apply(n,arguments);return e.ObjectUtils.isString(t)||e.ObjectUtils.isArray(t)?{class:t}:t},p="data-pc-",c=s(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t,i),u=l?/./g.test(t)&&i[t.split(".")[0]]?s(this.globalPT,t,i):s(this.defaultPT,t,i):void 0;return o.mergeProps(c,u,a(a({},"root"===t&&r({},"".concat(p,"name"),e.ObjectUtils.toFlatCase(this.$.type.name))),{},r({},"".concat(p,"section"),e.ObjectUtils.toFlatCase(t))))},ptm:function(){return this._getPTValue(this.pt,arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",a({instance:this,props:this.$props,state:this.$data},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}))},ptmo:function(){return this._getPTValue(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",a({instance:this},arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),!1)},cx:function(){return this.isUnstyled?void 0:this._getOptionValue(this.$css.classes,arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",a({instance:this,props:this.$props,state:this.$data,parentInstance:this.$parentInstance},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}))},sx:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!(arguments.length>1&&void 0!==arguments[1])||arguments[1]){var e=this._getOptionValue(this.$css.inlineStyles,n,a({instance:this,props:this.$props,state:this.$data,parentInstance:this.$parentInstance},t));return[this._getOptionValue(c,n,a({instance:this,props:this.$props,state:this.$data,parentInstance:this.$parentInstance},t)),e]}}},computed:{globalPT:function(){return e.ObjectUtils.getItemValue(this.$primevue.config.pt,{instance:this})},defaultPT:function(){return this._getOptionValue(this.$primevue.config.pt,this.$options.hostName||this.$.type.name,{instance:this})||this.globalPT},isUnstyled:function(){return void 0!==this.unstyled?this.unstyled:this.$primevue.config.unstyled},$css:function(){return a(a({classes:void 0,inlineStyles:void 0,loadStyle:function(){}},(this._getHostInstance(this)||{}).$css),this.$options.css)}}};module.exports=b;
+"use strict";var n=require("primevue/base"),t=require("primevue/usestyle"),e=require("primevue/utils"),o=require("vue");function i(n){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},i(n)}function l(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,o)}return e}function a(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?l(Object(e),!0).forEach((function(t){r(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function r(n,t,e){return(t=s(t))in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function s(n){var t=p(n,"string");return"symbol"===i(t)?t:String(t)}function p(n,t){if("object"!==i(n)||null===n)return n;var e=n[Symbol.toPrimitive];if(void 0!==e){var o=e.call(n,t||"default");if("object"!==i(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}var c={},u="\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("\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","\n").concat("\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","\n").concat("\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","\n").concat("\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","\n"),d=t.useStyle(u,{name:"common",manual:!0}).load,b=t.useStyle("",{name:"global",manual:!0}).load,f={name:"BaseComponent",props:{pt:{type:Object,default:void 0},unstyled:{type:Boolean,default:void 0}},inject:{$parentInstance:{default:void 0}},watch:{isUnstyled:{immediate:!0,handler:function(n){var t,e;n||(d(void 0,{nonce:null===(t=this.$config)||void 0===t||null===(t=t.csp)||void 0===t?void 0:t.nonce}),this.$options.css&&this.$css.loadStyle(void 0,{nonce:null===(e=this.$config)||void 0===e||null===(e=e.csp)||void 0===e?void 0:e.nonce}))}}},beforeCreate:function(){var n,t,e,o;null===(n=this.pt)||void 0===n||null===(n=n.hooks)||void 0===n||null===(t=n.onBeforeCreate)||void 0===t||t.call(n),null===(e=this.$primevue)||void 0===e||null===(e=e.config)||void 0===e||null===(e=e.pt)||void 0===e||null===(e=e[this.$.type.name])||void 0===e||null===(e=e.hooks)||void 0===e||null===(o=e.onBeforeCreate)||void 0===o||o.call(e)},created:function(){this._hook("onCreated")},beforeMount:function(){var t;n.loadBaseStyle(void 0,{nonce:null===(t=this.$config)||void 0===t||null===(t=t.csp)||void 0===t?void 0:t.nonce}),this._loadGlobalStyles(),this._hook("onBeforeMount")},mounted:function(){this._hook("onMounted")},beforeUpdate:function(){this._hook("onBeforeUpdate")},updated:function(){this._hook("onUpdated")},beforeUnmount:function(){this._hook("onBeforeUnmount")},unmounted:function(){this._hook("onUnmounted")},methods:{_hook:function(n){var t=this._getOptionValue(this.pt,"hooks.".concat(n)),e=this._getOptionValue(this.defaultPT,"hooks.".concat(n));null==t||t(),null==e||e()},_loadGlobalStyles:function(){var n,t=this._getOptionValue(this.globalPT,"global.css",this.$params);e.ObjectUtils.isNotEmpty(t)&&b(t,{nonce:null===(n=this.$config)||void 0===n||null===(n=n.csp)||void 0===n?void 0:n.nonce})},_getHostInstance:function(n){return n?this.$options.hostName?n.$.type.name===this.$options.hostName?n:this._getHostInstance(n.$parentInstance):n.$parentInstance:void 0},_getOptionValue:function(n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e.ObjectUtils.toFlatCase(arguments.length>1&&void 0!==arguments[1]?arguments[1]:"").split("."),i=o.shift();return i?e.ObjectUtils.isObject(n)?this._getOptionValue(e.ObjectUtils.getItemValue(n[Object.keys(n).find((function(n){return e.ObjectUtils.toFlatCase(n)===i}))||""],t),o.join("."),t):void 0:e.ObjectUtils.getItemValue(n,t)},_getPTValue:function(){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],l="data-pc-",s=this._getPTClassValue(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n,t),p=i?/./g.test(n)&&t[n.split(".")[0]]?this._getPTClassValue(this.globalPT,n,t):this._getPTClassValue(this.defaultPT,n,t):void 0;return o.mergeProps(s,p,"transition"!==n&&a(a({},"root"===n&&r({},"".concat(l,"name"),e.ObjectUtils.toFlatCase(this.$.type.name))),{},r({},"".concat(l,"section"),e.ObjectUtils.toFlatCase(n))))},_getPTClassValue:function(){var n=this._getOptionValue.apply(this,arguments);return e.ObjectUtils.isString(n)||e.ObjectUtils.isArray(n)?{class:n}:n},ptm:function(){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this._getPTValue(this.pt,arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",a(a({},this.$params),n))},ptmo:function(){return this._getPTValue(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",a({instance:this},arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),!1)},cx:function(){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.isUnstyled?void 0:this._getOptionValue(this.$css.classes,arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",a(a({},this.$params),n))},sx:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!(arguments.length>1&&void 0!==arguments[1])||arguments[1]){var e=this._getOptionValue(this.$css.inlineStyles,n,a(a({},this.$params),t));return[this._getOptionValue(c,n,a(a({},this.$params),t)),e]}}},computed:{globalPT:function(){return e.ObjectUtils.getItemValue(this.$config.pt,{instance:this})},defaultPT:function(){return this._getOptionValue(this.$config.pt,this.$options.hostName||this.$.type.name,{instance:this})||this.globalPT},isUnstyled:function(){return void 0!==this.unstyled?this.unstyled:this.$config.unstyled},$params:function(){return{instance:this,props:this.$props,state:this.$data,parentInstance:this.$parentInstance}},$css:function(){return a(a({classes:void 0,inlineStyles:void 0,loadStyle:function(){},loadCustomStyle:function(){}},(this._getHostInstance(this)||{}).$css),this.$options.css)},$config:function(){var n;return null===(n=this.$primevue)||void 0===n?void 0:n.config}}};module.exports=f;

package/basecomponent/basecomponent.esm.js

@@ -20,6 +20,11 @@ var _useStyle = useStyle(styles, {
     manual: true
   }),
   loadStyle = _useStyle.load;
+var _useStyle2 = useStyle('', {
+    name: 'global',
+    manual: true
+  }),
+  loadGlobalStyle = _useStyle2.load;
 var script = {
   name: 'BaseComponent',
   props: {
@@ -42,8 +47,13 @@ var script = {
       immediate: true,
       handler: function handler(newValue) {
         if (!newValue) {
-          loadStyle();
-          this.$options.css && this.$css.loadStyle();
+          var _this$$config, _this$$config2;
+          loadStyle(undefined, {
+            nonce: (_this$$config = this.$config) === null || _this$$config === void 0 || (_this$$config = _this$$config.csp) === null || _this$$config === void 0 ? void 0 : _this$$config.nonce
+          });
+          this.$options.css && this.$css.loadStyle(undefined, {
+            nonce: (_this$$config2 = this.$config) === null || _this$$config2 === void 0 || (_this$$config2 = _this$$config2.csp) === null || _this$$config2 === void 0 ? void 0 : _this$$config2.nonce
+          });
         }
       }
     }
@@ -57,7 +67,11 @@ var script = {
     this._hook('onCreated');
   },
   beforeMount: function beforeMount() {
-    loadBaseStyle();
+    var _this$$config3;
+    loadBaseStyle(undefined, {
+      nonce: (_this$$config3 = this.$config) === null || _this$$config3 === void 0 || (_this$$config3 = _this$$config3.csp) === null || _this$$config3 === void 0 ? void 0 : _this$$config3.nonce
+    });
+    this._loadGlobalStyles();
     this._hook('onBeforeMount');
   },
   mounted: function mounted() {
@@ -78,9 +92,26 @@ var script = {
   methods: {
     _hook: function _hook(hookName) {
       var selfHook = this._getOptionValue(this.pt, "hooks.".concat(hookName));
-      var globalHook = this._getOptionValue(this.globalPT, "hooks.".concat(hookName));
+      var defaultHook = this._getOptionValue(this.defaultPT, "hooks.".concat(hookName));
       selfHook === null || selfHook === void 0 ? void 0 : selfHook();
-      globalHook === null || globalHook === void 0 ? void 0 : globalHook();
+      defaultHook === null || defaultHook === void 0 ? void 0 : defaultHook();
+    },
+    _loadGlobalStyles: function _loadGlobalStyles() {
+      var _this$$config4;
+      /*
+       * @todo Add self custom css support;
+       * <Panel :pt="{ css: `...` }" .../>
+       *
+       * const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
+       * const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
+       * const mergedCSS = mergeProps(selfCSS, defaultCSS);
+       * ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
+       */
+
+      var globalCSS = this._getOptionValue(this.globalPT, 'global.css', this.$params);
+      ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, {
+        nonce: (_this$$config4 = this.$config) === null || _this$$config4 === void 0 || (_this$$config4 = _this$$config4.csp) === null || _this$$config4 === void 0 ? void 0 : _this$$config4.nonce
+      });
     },
     _getHostInstance: function _getHostInstance(instance) {
       return instance ? this.$options.hostName ? instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance) : instance.$parentInstance : undefined;
@@ -95,21 +126,14 @@ var script = {
       }) || ''], params), fKeys.join('.'), params) : undefined : 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 ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? {
-          "class": value
-        } : value;
-      };
       var datasetPrefix = 'data-pc-';
-      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 = mergeProps(self, globalPT, _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), ObjectUtils.toFlatCase(this.$.type.name))), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), ObjectUtils.toFlatCase(key))));
+      var self = this._getPTClassValue(obj, key, params);
+      var globalPT = searchInDefaultPT ? /./g.test(key) && !!params[key.split('.')[0]] ? this._getPTClassValue(this.globalPT, key, params) : this._getPTClassValue(this.defaultPT, key, params) : undefined;
+      var merged = mergeProps(self, globalPT, key !== 'transition' && _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), ObjectUtils.toFlatCase(this.$.type.name))), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), ObjectUtils.toFlatCase(key))));
       return merged;
       /*
        * @todo: The 'class' option in self can always be more powerful to style the component easily.
@@ -117,14 +141,16 @@ var script = {
        * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
        */
     },
+    _getPTClassValue: function _getPTClassValue() {
+      var value = this._getOptionValue.apply(this, arguments);
+      return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? {
+        "class": value
+      } : value;
+    },
     ptm: function ptm() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return this._getPTValue(this.pt, key, _objectSpread({
-        instance: this,
-        props: this.$props,
-        state: this.$data
-      }, params));
+      return this._getPTValue(this.pt, key, _objectSpread(_objectSpread({}, this.$params), params));
     },
     ptmo: function ptmo() {
       var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -137,30 +163,15 @@ var script = {
     cx: function cx() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, _objectSpread({
-        instance: this,
-        props: this.$props,
-        state: this.$data,
-        parentInstance: this.$parentInstance
-      }, params)) : undefined;
+      return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, _objectSpread(_objectSpread({}, this.$params), params)) : undefined;
     },
     sx: function sx() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (when) {
-        var self = this._getOptionValue(this.$css.inlineStyles, key, _objectSpread({
-          instance: this,
-          props: this.$props,
-          state: this.$data,
-          parentInstance: this.$parentInstance
-        }, params));
-        var base = this._getOptionValue(inlineStyles, key, _objectSpread({
-          instance: this,
-          props: this.$props,
-          state: this.$data,
-          parentInstance: this.$parentInstance
-        }, params));
+        var self = this._getOptionValue(this.$css.inlineStyles, key, _objectSpread(_objectSpread({}, this.$params), params));
+        var base = this._getOptionValue(inlineStyles, key, _objectSpread(_objectSpread({}, this.$params), params));
         return [base, self];
       }
       return undefined;
@@ -168,24 +179,37 @@ var script = {
   },
   computed: {
     globalPT: function globalPT() {
-      return ObjectUtils.getItemValue(this.$primevue.config.pt, {
+      return ObjectUtils.getItemValue(this.$config.pt, {
         instance: this
       });
     },
     defaultPT: function defaultPT() {
-      return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, {
+      return this._getOptionValue(this.$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;
+      return this.unstyled !== undefined ? this.unstyled : this.$config.unstyled;
+    },
+    $params: function $params() {
+      return {
+        instance: this,
+        props: this.$props,
+        state: this.$data,
+        parentInstance: this.$parentInstance
+      };
     },
     $css: function $css() {
       return _objectSpread(_objectSpread({
         classes: undefined,
         inlineStyles: undefined,
-        loadStyle: function loadStyle() {}
+        loadStyle: function loadStyle() {},
+        loadCustomStyle: function loadCustomStyle() {}
       }, (this._getHostInstance(this) || {}).$css), this.$options.css);
+    },
+    $config: function $config() {
+      var _this$$primevue2;
+      return (_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 ? void 0 : _this$$primevue2.config;
     }
   }
 };