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 {