From 596f3abed912b68dd939433f77193838cc67aec0 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 2 Aug 2023 13:39:12 +0300 Subject: [PATCH] Fixed #4230 - Add custom global.css option to Pass Through(PT) --- .../lib/basecomponent/BaseComponent.vue | 54 +++++++++++++------ components/lib/config/PrimeVue.d.ts | 3 ++ components/lib/usestyle/UseStyle.js | 12 +++-- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index 59e30e904..530328763 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/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', @@ -379,10 +380,7 @@ export default { isUnstyled: { immediate: true, handler(newValue) { - if (!newValue) { - loadStyle(); - this.$options.css && this.$css.loadStyle(); - } + !newValue && this._loadStyle(); } } }, @@ -395,6 +393,7 @@ export default { }, beforeMount() { loadBaseStyle(); + this._loadGlobalStyles(); this._hook('onBeforeMount'); }, mounted() { @@ -420,6 +419,25 @@ export default { selfHook?.(); globalHook?.(); }, + _loadStyle() { + loadStyle(); + this.$options.css && this.$css.loadStyle(); + }, + _loadGlobalStyles() { + /* + * @todo Add self custom css support; + * + * + * 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); + }, _getHostInstance(instance) { return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; }, @@ -434,15 +452,9 @@ 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 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 === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }), [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) @@ -455,19 +467,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]; } @@ -485,8 +502,11 @@ export default { isUnstyled() { return this.unstyled !== undefined ? this.unstyled : this.$primevue.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 }; } } }; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index 97e1767a9..bc2cc7c5e 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -210,6 +210,9 @@ export interface PrimeVuePTOptions { focustrap?: FocusTrapDirectivePassThroughOptions; ripple?: RippleDirectivePassThroughOptions; }; + global?: { + css?: (options: any) => string | string | undefined; + }; } export interface PrimeVueLocaleAriaOptions { diff --git a/components/lib/usestyle/UseStyle.js b/components/lib/usestyle/UseStyle.js index d96b1519b..d57201fdb 100644 --- a/components/lib/usestyle/UseStyle.js +++ b/components/lib/usestyle/UseStyle.js @@ -23,17 +23,23 @@ export function useStyle(css, options = {}) { let stop = () => {}; - const load = () => { + /* @todo: Improve _options params */ + const load = (_css, _options = {}) => { if (!document) return; - styleRef.value = document.querySelector(`style[data-primevue-style-id="${name}"]`) || document.getElementById(id) || document.createElement('style'); + const [_name, _id] = [_options.name || name, _options.id || id]; + + styleRef.value = document.querySelector(`style[data-primevue-style-id="${_name}"]`) || document.getElementById(_id) || document.createElement('style'); if (!styleRef.value.isConnected) { + cssRef.value = _css || css; + styleRef.value.type = 'text/css'; - id && (styleRef.value.id = id); + _id && (styleRef.value.id = _id); media && (styleRef.value.media = media); document.head.appendChild(styleRef.value); name && styleRef.value.setAttribute('data-primevue-style-id', name); + DomHandler.setAttributes(styleRef.value, _options); } if (isLoaded.value) return;