vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'v4' of https://github.com/primefaces/primevue into v4

pull/5507/head
tugcekucukoglu 2024-04-01 16:28:38 +03:00
parent c7415e1156 1baa172b88
commit f2869c174d
10 changed files with 72 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/lib/base/style/BaseStyle.js
View File

@ -49,6 +49,9 @@ export default {
getDirectiveThemeCSS(params) { getDirectiveThemeCSS(params) {
return Theme.getDirectiveCSS(this.name, params); return Theme.getDirectiveCSS(this.name, params);
}, },
getPresetThemeCSS(preset, selector, params) {
return Theme.getPresetCSS(this.name, preset, selector, params);
},
getLayerOrderThemeCSS() { getLayerOrderThemeCSS() {
return Theme.getLayerOrderCSS(this.name); return Theme.getLayerOrderCSS(this.name);
}, },

28
components/lib/basecomponent/BaseComponent.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
import Theme, { ThemeService } from 'primevue/themes'; import Theme, { ThemeService } from 'primevue/themes';
import { ObjectUtils } from 'primevue/utils'; import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle'; import BaseComponentStyle from './style/BaseComponentStyle';
@ -19,6 +19,10 @@ export default {
unstyled: { unstyled: {
type: Boolean, type: Boolean,
default: undefined default: undefined
},
dt: {
type: Object,
default: undefined
} }
}, },
inject: { inject: {
@ -38,8 +42,17 @@ export default {
this._loadThemeStyles(); this._loadThemeStyles();
} }
} }
},
dt: {
immediate: true,
handler(newValue) {
if (newValue) {
this._loadScopedThemeStyles(newValue);
}
}
} }
}, },
scopedStyleEl: undefined,
beforeCreate() { beforeCreate() {
const _usept = this.pt?.['_usept']; const _usept = this.pt?.['_usept'];
const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined; const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
@ -61,6 +74,9 @@ export default {
this._hook('onBeforeMount'); this._hook('onBeforeMount');
}, },
mounted() { mounted() {
const rootElement = DomHandler.findSingle(this.$el, `[data-pc-name="${ObjectUtils.toFlatCase(this.$.type.name)}"]`);
rootElement?.setAttribute(this.$attrSelector, '');
this._hook('onMounted'); this._hook('onMounted');
}, },
beforeUpdate() { beforeUpdate() {
@ -73,6 +89,7 @@ export default {
this._hook('onBeforeUnmount'); this._hook('onBeforeUnmount');
}, },
unmounted() { unmounted() {
this.scopedStyleEl?.value?.remove();
this._hook('onUnmounted'); this._hook('onUnmounted');
}, },
methods: { methods: {
@ -143,6 +160,12 @@ export default {
Theme.setLoadedStyleName('layer-order'); Theme.setLoadedStyleName('layer-order');
} }
}, },
_loadScopedThemeStyles(preset) {
const variables = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
const scopedStyle = this.$style?.loadTheme(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
this.scopedStyleEl = scopedStyle.el;
},
_getHostInstance(instance) { _getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
}, },
@ -322,6 +345,9 @@ export default {
return acc; return acc;
}, {}); }, {});
},
$attrSelector() {
return UniqueComponentId('pc');
} }
} }
}; };

5
components/lib/themes/config/index.js
View File

@ -108,6 +108,11 @@ export default {
variables: ThemeUtils.getPresetD(options) variables: ThemeUtils.getPresetD(options)
}; };
}, },
getPresetCSS(name = '', preset, selector, params) {
const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return ThemeUtils.getPreset(options);
},
getLayerOrderCSS(name = '') { getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults); return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
}, },

37
components/lib/themes/utils/themeUtils.js
View File

@ -71,19 +71,24 @@ export default {
global: global_css global: global_css
}; };
}, },
getPresetC({ name = '', theme = {}, params, set, defaults }) { getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
const { preset, options } = theme; const { colorScheme, ...vRest } = preset;
const { colorScheme, ...vRest } = preset?.components?.[name] || {};
const { dark, ...csRest } = colorScheme || {}; const { dark, ...csRest } = colorScheme || {};
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : ''; const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults); const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults); const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults, selector);
return `${light_variable_css}${dark_variable_css}`; return `${light_variable_css}${dark_variable_css}`;
}, },
getPresetC({ name = '', theme = {}, params, set, defaults }) {
const { preset, options } = theme;
const cPreset = preset?.components?.[name];
return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
},
getBaseC({ name = '', theme = {}, params, set, defaults }) { getBaseC({ name = '', theme = {}, params, set, defaults }) {
const { base, options } = theme; const { base, options } = theme;
const { css } = base?.components?.[name] || {}; const { css } = base?.components?.[name] || {};
@ -94,16 +99,9 @@ export default {
getPresetD({ name = '', theme = {}, params, set, defaults }) { getPresetD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', ''); const dName = name.replace('-directive', '');
const { preset, options } = theme; const { preset, options } = theme;
const { colorScheme, ...vRest } = preset?.directives?.[dName] || {}; const dPreset = preset?.directives?.[dName];
const { dark, ...csRest } = colorScheme || {};
const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [dName]: vRest }, options).declarations : '';
const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [dName]: csRest }, options).declarations : '';
const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [dName]: dark }, options).declarations : '';
const light_variable_css = this._transformCSS(dName, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults); return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
const dark_variable_css = this._transformCSS(dName, dark_css, 'dark', 'variable', options, set, defaults);
return `${light_variable_css}${dark_variable_css}`;
}, },
getBaseD({ name = '', theme = {}, params, set, defaults }) { getBaseD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', ''); const dName = name.replace('-directive', '');
@ -235,23 +233,24 @@ export default {
_toVariables(theme, options) { _toVariables(theme, options) {
return toVariables(theme, { prefix: options?.prefix }); return toVariables(theme, { prefix: options?.prefix });
}, },
_transformCSS(name, css, mode, type, options = {}, set, defaults) { _transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
if (SharedUtils.object.isNotEmpty(css)) { if (SharedUtils.object.isNotEmpty(css)) {
const { cssLayer } = options; const { cssLayer } = options;
if (type !== 'style') { if (type !== 'style') {
const colorSchemeOption = this.getColorSchemeOption(options, defaults); const colorSchemeOption = this.getColorSchemeOption(options, defaults);
const _css = selector ? SharedUtils.object.getRule(selector, css) : css;
css = css =
mode === 'dark' mode === 'dark'
? colorSchemeOption.reduce((acc, { selector }) => { ? colorSchemeOption.reduce((acc, { selector: _selector }) => {
if (SharedUtils.object.isNotEmpty(selector)) { if (SharedUtils.object.isNotEmpty(_selector)) {
acc += selector.includes('[CSS]') ? selector.replace('[CSS]', css) : SharedUtils.object.getRule(selector, css); acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', _css) : SharedUtils.object.getRule(_selector, _css);
} }
return acc; return acc;
}, '') }, '')
: SharedUtils.object.getRule(':root', css); : SharedUtils.object.getRule(selector ?? ':root', css);
} }
if (cssLayer) { if (cssLayer) {

2
components/lib/utils/DomHandler.js
View File

@ -180,7 +180,7 @@ export default {
}, },
findSingle(element, selector) { findSingle(element, selector) {
return this.isElement(element) ? element.querySelector(selector) : null; return this.isElement(element) ? (element.matches(selector) ? element : element.querySelector(selector)) : null;
}, },
createElement(type, attributes = {}, ...children) { createElement(type, attributes = {}, ...children) {

10
components/lib/utils/UniqueComponentId.js
View File

@ -1,7 +1,11 @@
var lastId = 0; const lastIds = {};
export default function (prefix = 'pv_id_') { export default function (prefix = 'pv_id_') {
lastId++; if (!lastIds.hasOwnProperty(prefix)) {
lastIds[prefix] = 0;
}
return `${prefix}${lastId}`; lastIds[prefix]++;
return `${prefix}${lastIds[prefix]}`;
} }

4
doc/migration/v4/breakingchanges/ComponentsDoc.vue
View File

@ -6,8 +6,8 @@
<li><i>DataViewLayoutOptions</i> is removed, use SelectButton instead as in the demo.</li> <li><i>DataViewLayoutOptions</i> is removed, use SelectButton instead as in the demo.</li>
<li><i>TriStateCheckbox</i> is removed, use Checkbox with the new <i>indeterminate</i> state as a replacement.</li> <li><i>TriStateCheckbox</i> is removed, use Checkbox with the new <i>indeterminate</i> state as a replacement.</li>
<li> <li>
Enhancements to internal structure of some components, see the tickets <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer" class="doc-link">#5426</a> and Enhancements to internal structure of some components, see the tickets <a href="https://github.com/primefaces/primevue/issues/5426" target="_blank" rel="noopener noreferrer" class="doc-link">#5426</a> and
<a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer" class="doc-link">#5437</a> for more information. <a href="https://github.com/primefaces/primevue/issues/5437" target="_blank" rel="noopener noreferrer" class="doc-link">#5437</a> for more information.
</li> </li>
</ul> </ul>
</template> </template>

48
doc/migration/v4/breakingchanges/PluginDoc.vue
View File

@ -1,48 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>PrimeVue</i> plugin is replaced with <i>PrimeVueStyled</i> and <i>PrimeVueUnstyled</i> plugins depending on the theming mode.</p>
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
//v3 styled mode
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);
//v4 styled mode
import PrimeVueStyled from 'primevue/styled';
const app = createApp(App);
app.use(PrimeVueStyled);
`
},
code2: {
basic: `
///v3 unstyled mode
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true
});
///v4 unstyled mode
import PrimeVueUnstyled from 'primevue/styled';
const app = createApp(App);
app.use(PrimeVueUnstyled);
`
}
};
}
};
</script>

18
doc/theming/styled/ScopedTokensDoc.vue
View File

@ -27,8 +27,8 @@ export default {
borderRadius: '4px' borderRadius: '4px'
}, },
handle: { handle: {
checkedBackground: '{amber.900}', checkedBackground: '{amber.50}',
checkedHoverBackground: '{amber.950}' checkedHoverBackground: '{amber.100}'
} }
}, },
dark: { dark: {
@ -38,8 +38,8 @@ export default {
borderRadius: '4px' borderRadius: '4px'
}, },
handle: { handle: {
checkedBackground: '{amber.50}', checkedBackground: '{amber.900}',
checkedHoverBackground: '{amber.100}' checkedHoverBackground: '{amber.800}'
} }
} }
} }
@ -49,7 +49,7 @@ export default {
<template> <template>
<div> <div>
<InputSwitch v-model="checked1" /> <InputSwitch v-model="checked1" />
<InputSwitch v-model="checked2" :dt"amberSwitch" /> <InputSwitch v-model="checked2" :dt="amberSwitch" />
</div> </div>
</template> </template>
@ -70,8 +70,8 @@ const amberSwitch = ref({
borderRadius: '4px' borderRadius: '4px'
}, },
handle: { handle: {
checkedBackground: '{amber.900}', checkedBackground: '{amber.50}',
checkedHoverBackground: '{amber.950}' checkedHoverBackground: '{amber.100}'
} }
}, },
dark: { dark: {
@ -81,8 +81,8 @@ const amberSwitch = ref({
borderRadius: '4px' borderRadius: '4px'
}, },
handle: { handle: {
checkedBackground: '{amber.50}', checkedBackground: '{amber.900}',
checkedHoverBackground: '{amber.100}' checkedHoverBackground: '{amber.800}'
} }
} }
} }

6
pages/migration/v4/index.vue
View File

@ -19,7 +19,6 @@
import NewFeaturesDoc from '@/doc/migration/v4/NewFeaturesDoc.vue'; import NewFeaturesDoc from '@/doc/migration/v4/NewFeaturesDoc.vue';
import OverviewDoc from '@/doc/migration/v4/OverviewDoc.vue'; import OverviewDoc from '@/doc/migration/v4/OverviewDoc.vue';
import ComponentsDoc from '@/doc/migration/v4/breakingchanges/ComponentsDoc.vue'; import ComponentsDoc from '@/doc/migration/v4/breakingchanges/ComponentsDoc.vue';
import PluginDoc from '@/doc/migration/v4/breakingchanges/PluginDoc.vue';
import StyledModeDoc from '@/doc/migration/v4/breakingchanges/StyledModeDoc.vue'; import StyledModeDoc from '@/doc/migration/v4/breakingchanges/StyledModeDoc.vue';
export default { export default {
@ -40,11 +39,6 @@ export default {
id: 'breakingchanges', id: 'breakingchanges',
label: 'Breaking Changes', label: 'Breaking Changes',
children: [ children: [
{
id: 'plugin',
label: 'Plugin',
component: PluginDoc
},
{ {
id: 'styledmode', id: 'styledmode',
label: 'Styled Mode', label: 'Styled Mode',