From 71715f5523da3f1a046db57c72210af95e47f605 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 1 Apr 2024 10:46:31 +0100 Subject: [PATCH 1/4] Fixed #5502 - Add PrimeVueStyled and PrimeVueUnstyled plugins --- components/lib/config/PrimeVue.js | 51 ++++--------------- components/lib/styled/PrimeVueStyled.d.ts | 1 + components/lib/styled/PrimeVueStyled.js | 50 ++++++++++++++++++ components/lib/styled/package.json | 6 +++ components/lib/unstyled/PrimeVueUnstyled.d.ts | 1 + components/lib/unstyled/PrimeVueUnstyled.js | 11 ++++ components/lib/unstyled/package.json | 6 +++ 7 files changed, 85 insertions(+), 41 deletions(-) create mode 100644 components/lib/styled/PrimeVueStyled.d.ts create mode 100644 components/lib/styled/PrimeVueStyled.js create mode 100644 components/lib/styled/package.json create mode 100644 components/lib/unstyled/PrimeVueUnstyled.d.ts create mode 100644 components/lib/unstyled/PrimeVueUnstyled.js create mode 100644 components/lib/unstyled/package.json diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js index 19dda3140..2fd736135 100644 --- a/components/lib/config/PrimeVue.js +++ b/components/lib/config/PrimeVue.js @@ -1,8 +1,5 @@ import { FilterMatchMode } from 'primevue/api'; -import Theme, { ThemeService } from 'primevue/themes'; -import PrimeOne from 'primevue/themes/primeone'; -import Aura from 'primevue/themes/primeone/aura'; -import { inject, reactive, ref, watch } from 'vue'; +import { inject, reactive } from 'vue'; export const defaultOptions = { ripple: false, @@ -136,21 +133,11 @@ export const defaultOptions = { menu: 1000, tooltip: 1100 }, - theme: { - base: PrimeOne, - preset: Aura, - options: { - prefix: 'p', - darkModeSelector: 'system', - cssLayer: false - } - }, pt: undefined, ptOptions: { mergeSections: true, mergeProps: false }, - unstyled: false, csp: { nonce: undefined } @@ -168,37 +155,19 @@ export function usePrimeVue() { return PrimeVue; } -function setupTheme(app, PrimeVue) { - const isChanged = ref(false); +export function setup(app, options) { + const PrimeVue = { + config: reactive(options) + }; - watch( - PrimeVue.config.theme, - (newValue) => { - if (!isChanged.value) { - Theme.setTheme(newValue); - } + app.config.globalProperties.$primevue = PrimeVue; + app.provide(PrimeVueSymbol, PrimeVue); - isChanged.value = false; - }, - { immediate: true, deep: true } - ); - - ThemeService.on('theme:change', function (newTheme) { - isChanged.value = true; - app.config.globalProperties.$primevue.config.theme = newTheme; - }); + return PrimeVue; } export default { - install: (app, options) => { - const configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions }; - const PrimeVue = { - config: reactive(configOptions) - }; - - app.config.globalProperties.$primevue = PrimeVue; - app.provide(PrimeVueSymbol, PrimeVue); - - setupTheme(app, PrimeVue); + install: () => { + console.error("This plugin has been removed in v4 version. Use 'PrimeVueStyled' plugin for styled mode, and 'PrimeVueUnstyled' plugin for unstyled mode."); } }; diff --git a/components/lib/styled/PrimeVueStyled.d.ts b/components/lib/styled/PrimeVueStyled.d.ts new file mode 100644 index 000000000..49b48d7c5 --- /dev/null +++ b/components/lib/styled/PrimeVueStyled.d.ts @@ -0,0 +1 @@ +export * from '../config'; diff --git a/components/lib/styled/PrimeVueStyled.js b/components/lib/styled/PrimeVueStyled.js new file mode 100644 index 000000000..56d56360b --- /dev/null +++ b/components/lib/styled/PrimeVueStyled.js @@ -0,0 +1,50 @@ +import * as PrimeVueConfig from 'primevue/config'; +import Theme, { ThemeService } from 'primevue/themes'; +import PrimeOne from 'primevue/themes/primeone'; +import Aura from 'primevue/themes/primeone/aura'; +import { ref, watch } from 'vue'; + +export const defaultOptions = { + ...PrimeVueConfig.defaultOptions, + theme: { + base: PrimeOne, + preset: Aura, + options: { + prefix: 'p', + darkModeSelector: 'system', + cssLayer: false + } + } +}; + +export const { usePrimeVue } = PrimeVueConfig; + +function setupTheme(app, PrimeVue) { + const isChanged = ref(false); + + watch( + PrimeVue.config.theme, + (newValue) => { + if (!isChanged.value) { + Theme.setTheme(newValue); + } + + isChanged.value = false; + }, + { immediate: true, deep: true } + ); + + ThemeService.on('theme:change', function (newTheme) { + isChanged.value = true; + app.config.globalProperties.$primevue.config.theme = newTheme; + }); +} + +export default { + install: (app, options) => { + const configOptions = { ...defaultOptions, ...options, unstyled: false }; + const PrimeVue = PrimeVueConfig.setup(app, configOptions); + + setupTheme(app, PrimeVue); + } +}; diff --git a/components/lib/styled/package.json b/components/lib/styled/package.json new file mode 100644 index 000000000..251a56cfa --- /dev/null +++ b/components/lib/styled/package.json @@ -0,0 +1,6 @@ +{ + "main": "./primevuestyled.cjs.js", + "module": "./primevuestyled.esm.js", + "unpkg": "./primevuestyled.min.js", + "types": "./PrimeVueStyled.d.ts" +} diff --git a/components/lib/unstyled/PrimeVueUnstyled.d.ts b/components/lib/unstyled/PrimeVueUnstyled.d.ts new file mode 100644 index 000000000..49b48d7c5 --- /dev/null +++ b/components/lib/unstyled/PrimeVueUnstyled.d.ts @@ -0,0 +1 @@ +export * from '../config'; diff --git a/components/lib/unstyled/PrimeVueUnstyled.js b/components/lib/unstyled/PrimeVueUnstyled.js new file mode 100644 index 000000000..b1149a5ee --- /dev/null +++ b/components/lib/unstyled/PrimeVueUnstyled.js @@ -0,0 +1,11 @@ +import * as PrimeVueConfig from 'primevue/config'; + +export const { defaultOptions, usePrimeVue } = PrimeVueConfig; + +export default { + install: (app, options) => { + const configOptions = { ...defaultOptions, ...options, unstyled: true }; + + PrimeVueConfig.setup(app, configOptions); + } +}; diff --git a/components/lib/unstyled/package.json b/components/lib/unstyled/package.json new file mode 100644 index 000000000..34156019c --- /dev/null +++ b/components/lib/unstyled/package.json @@ -0,0 +1,6 @@ +{ + "main": "./primevueunstyled.cjs.js", + "module": "./primevueunstyled.esm.js", + "unpkg": "./primevueunstyled.min.js", + "types": "./PrimeVueUnstyled.d.ts" +} From a0852af364a18e0ef1edcf68c7b8e274c0eadd60 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 1 Apr 2024 10:47:38 +0100 Subject: [PATCH 2/4] Fixed #5504 - Remove unstyled option from plugin options --- components/lib/config/PrimeVue.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index f580b251e..12ec2e6b4 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -103,7 +103,6 @@ export interface PrimeVueConfiguration { zIndex?: PrimeVueZIndexOptions; pt?: PassThrough; ptOptions?: PassThroughOptions; - unstyled?: boolean; csp?: PrimeVueCSPOptions; } From 194c301b7aeb40be346af103061ca1fe65bdcb85 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 1 Apr 2024 10:48:51 +0100 Subject: [PATCH 3/4] Update nuxt module --- modules/nuxt-primevue/module.js | 18 ++++++++++-------- modules/nuxt-primevue/register.js | 30 ++++++++++++++++++------------ 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/modules/nuxt-primevue/module.js b/modules/nuxt-primevue/module.js index d6f4014ba..c6c821496 100644 --- a/modules/nuxt-primevue/module.js +++ b/modules/nuxt-primevue/module.js @@ -15,6 +15,7 @@ export default defineNuxtModule({ layerOrder: 'tailwind-base, primevue, tailwind-utilities', importPT: undefined, importTheme: undefined, + unstyled: false, options: {}, components: { prefix: '', @@ -39,7 +40,8 @@ export default defineNuxtModule({ setup(moduleOptions, nuxt) { const resolver = createResolver(import.meta.url); const registered = register(moduleOptions); - const { importPT, importTheme, options } = moduleOptions; + const { importPT, importTheme, options, unstyled } = moduleOptions; + const hasTheme = importTheme && !unstyled; nuxt.options.runtimeConfig.public.primevue = { ...moduleOptions, @@ -52,7 +54,7 @@ export default defineNuxtModule({ const styleContent = () => ` ${registered.styles.map((style) => `import ${style.as} from '${style.from}';`).join('\n')} ${ - importTheme + hasTheme ? `import Theme from 'primevue/themes'; import ${importTheme.as} from '${importTheme.from}';\n` : '' @@ -66,11 +68,11 @@ const styles = [ ${registered.styles.map((item) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} ].join(''); -${importTheme ? `Theme.setTheme(${importTheme.as})` : ''} +${hasTheme ? `Theme.setTheme(${importTheme.as})` : ''} const themes = [ - ${importTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''` : ''}, - ${importTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',') : ''} + ${hasTheme ? `${registered.styles[0].as} && ${registered.styles[0].as}.getCommonThemeStyleSheet ? ${registered.styles[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''` : ''}, + ${hasTheme ? registered.styles.map((item) => `${item.as} && ${item.as}.getThemeStyleSheet ? ${item.as}.getThemeStyleSheet(undefined, styleProps) : ''`).join(',') : ''} ].join(''); export { styles, themes }; @@ -92,16 +94,16 @@ ${registered.config.map((config) => `import ${config.as} from '${config.from}';` ${registered.services.map((service) => `import ${service.as} from '${service.from}';`).join('\n')} ${registered.directives.map((directive) => `import ${directive.as} from '${directive.from}';`).join('\n')} ${importPT ? `import ${importPT.as} from '${importPT.from}';\n` : ''} -${importTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''} +${hasTheme ? `import ${importTheme.as} from '${importTheme.from}';\n` : ''} export default defineNuxtPlugin(({ vueApp }) => { const runtimeConfig = useRuntimeConfig(); const config = runtimeConfig?.public?.primevue ?? {}; const { usePrimeVue = true, options = {} } = config; const pt = ${importPT ? `{ pt: ${importPT.as} }` : `{}`}; - const theme = ${importTheme ? `{ theme: ${importTheme.as} }` : `{}`}; + const theme = ${hasTheme ? `{ theme: ${importTheme.as} }` : `{}`}; - usePrimeVue && vueApp.use(PrimeVue, { ...options, ...pt, ...theme }); + usePrimeVue && vueApp.use(${unstyled ? 'PrimeVueUnstyled' : 'PrimeVueStyled'}, { ...options, ...pt, ...theme }); ${registered.services.map((service) => `vueApp.use(${service.as});`).join('\n')} ${registered.directives.map((directive) => `vueApp.directive('${directive.name}', ${directive.as});`).join('\n')} }); diff --git a/modules/nuxt-primevue/register.js b/modules/nuxt-primevue/register.js index 5dc094a46..07da9dc85 100644 --- a/modules/nuxt-primevue/register.js +++ b/modules/nuxt-primevue/register.js @@ -17,13 +17,19 @@ function registerItems(items = [], options = {}, params) { }); } -function registerConfig(resolvePath) { +function registerConfig(resolvePath, unstyled = false) { return [ - { - name: 'PrimeVue', - as: 'PrimeVue', - from: resolvePath({ name: 'PrimeVue', as: 'PrimeVue', from: `primevue/config`, type: 'config' }) - } + unstyled + ? { + name: 'PrimeVueUnstyled', + as: 'PrimeVueUnstyled', + from: resolvePath({ name: 'PrimeVueUnstyled', as: 'PrimeVueUnstyled', from: `primevue/unstyled`, type: 'config' }) + } + : { + name: 'PrimeVueStyled', + as: 'PrimeVueStyled', + from: resolvePath({ name: 'PrimeVueStyled', as: 'PrimeVueStyled', from: `primevue/styled`, type: 'config' }) + } ]; } @@ -94,7 +100,7 @@ function registerServices(resolvePath, registered) { })); } -function registerStyles(resolvePath, registered, options) { +function registerStyles(resolvePath, registered, moduleOptions) { const styles = [ { name: 'BaseStyle', @@ -103,7 +109,7 @@ function registerStyles(resolvePath, registered, options) { } ]; - if (!options?.unstyled) { + if (!moduleOptions.unstyled) { if (Utils.object.isNotEmpty(registered?.components)) { styles.push({ name: 'BaseComponentStyle', @@ -127,14 +133,14 @@ function registerStyles(resolvePath, registered, options) { return styles; } -function registerInjectStylesAsString(options) { - return [Utils.object.createStyleAsString(options.layerOrder ? `@layer ${options.layerOrder}` : undefined, { name: 'layer-order' })]; +function registerInjectStylesAsString(moduleOptions) { + return [Utils.object.createStyleAsString(moduleOptions.layerOrder ? `@layer ${moduleOptions.layerOrder}` : undefined, { name: 'layer-order' })]; } export function register(moduleOptions) { const resolvePath = (resolveOptions) => Utils.object.getPath(moduleOptions.resolvePath, resolveOptions); - const config = registerConfig(resolvePath); + const config = registerConfig(resolvePath, moduleOptions.unstyled); const components = registerComponents(resolvePath, moduleOptions.components); const directives = registerDirectives(resolvePath, moduleOptions.directives); const composables = registerComposables(resolvePath, moduleOptions.composables); @@ -144,7 +150,7 @@ export function register(moduleOptions) { composables }; const services = registerServices(resolvePath, registered); - const styles = registerStyles(resolvePath, registered, moduleOptions.options); + const styles = registerStyles(resolvePath, registered, moduleOptions); const injectStylesAsString = registerInjectStylesAsString(moduleOptions); return { From 546dbbf25f9e2b82c68a3fda94bfce5e09661e56 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 1 Apr 2024 10:49:35 +0100 Subject: [PATCH 4/4] Update rollup --- nuxt-vite.config.js | 3 +++ rollup.config.js | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index fab1bf9fb..75c0233be 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -221,6 +221,9 @@ export default { }, alias: { 'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'), + 'primevue/config': path.resolve(__dirname, './components/lib/config/PrimeVue.js'), + 'primevue/styled': path.resolve(__dirname, './components/lib/styled/PrimeVueStyled.js'), + 'primevue/unstyled': path.resolve(__dirname, './components/lib/unstyled/PrimeVueUnstyled.js'), 'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'), ...STYLE_ALIAS, ...THEME_ALIAS, diff --git a/rollup.config.js b/rollup.config.js index 7258cdfc8..a113c8934 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -229,6 +229,8 @@ const CORE_DEPENDENCIES = { 'primevue/utils': 'primevue.utils', 'primevue/api': 'primevue.api', 'primevue/config': 'primevue.config', + 'primevue/styled': 'primevue.styled', + 'primevue/unstyled': 'primevue.unstyled', 'primevue/base': 'primevue.base', 'primevue/usestyle': 'primevue.usestyle', ...CORE_STYLE_DEPENDENCIES, @@ -309,7 +311,7 @@ const TERSER_PLUGIN_OPTIONS = { const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)]; function addEntry(folder, inFile, outFile) { - const exports = inFile === 'PrimeVue.js' || folder === 'passthrough/tailwind' ? 'named' : 'auto'; + const exports = inFile.startsWith('PrimeVue') || folder === 'passthrough/tailwind' ? 'named' : 'auto'; const useCorePlugin = Object.keys(GLOBAL_COMPONENT_DEPENDENCIES).some((d) => d.replace('primevue/', '') === folder); const plugins = PLUGINS; const external = EXTERNAL_COMPONENT; @@ -500,6 +502,8 @@ function addDirectives() { function addConfig() { addEntry('config', 'PrimeVue.js', 'config'); + addEntry('styled', 'PrimeVueStyled.js', 'primevuestyled'); + addEntry('unstyled', 'PrimeVueUnstyled.js', 'primevueunstyled'); } function addPassThrough() {