From b536277910d0ae4ea8ea591c1d438d185a2bfc57 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 24 May 2024 16:41:18 +0100 Subject: [PATCH] Fixed #65 - Add PrimeVue-v4 support --- package.json | 7 +++-- src/module.ts | 23 ++++++++++++-- src/runtime/core/components/index.ts | 47 ++++++++++++++++++++++++---- src/runtime/plugin.server.ts | 4 ++- src/types.d.ts | 5 +-- 5 files changed, 71 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 0bacff9..72d4dcd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-primevue", - "version": "3.0.0", + "version": "4.0.0-rc.1", "description": "Nuxt module for PrimeVue", "keywords": [ "vue", @@ -10,7 +10,8 @@ "nuxt3", "primevue", "primevue nuxt module", - "primevue nuxt3" + "primevue nuxt3", + "primevue 4" ], "repository": { "type": "git", @@ -45,7 +46,7 @@ "dependencies": { "@nuxt/kit": "^3.7.3", "pathe": "^1.1.2", - "primevue": "^3.51.0" + "primevue": "^4.0.0.rc1" }, "devDependencies": { "@types/node": "^18.17.17", diff --git a/src/module.ts b/src/module.ts index ef0e159..7e300c1 100644 --- a/src/module.ts +++ b/src/module.ts @@ -16,6 +16,7 @@ export default defineNuxtModule({ resolvePath: undefined, cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities', importPT: undefined, + importTheme: undefined, options: {}, components: { prefix: '', @@ -42,7 +43,8 @@ export default defineNuxtModule({ const resolver = createResolver(import.meta.url); const registered = register(moduleOptions); - const { importPT, options } = moduleOptions; + const { importPT, importTheme, options } = moduleOptions; + const hasTheme = importTheme && !options.unstyled; nuxt.options.runtimeConfig.public.primevue = { ...moduleOptions, @@ -54,6 +56,12 @@ export default defineNuxtModule({ const styleContent = () => ` ${registered.styles.map((style: any) => `import ${style.as} from '${style.from}';`).join('\n')} +${ + hasTheme + ? `import { Theme } from 'primevue/themes'; +import ${importTheme.as} from '${normalize(importTheme.from)}';\n` + : '' +} const stylesToTop = [${registered.injectStylesAsStringToTop.join('')}].join(''); const styleProps = { @@ -64,7 +72,14 @@ const styles = [ ${registered.styles.map((item) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} ].join(''); -export { styles, stylesToTop }; +${hasTheme ? `Theme.setTheme(${importTheme.as})` : ''} + +const themes = [ + ${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, stylesToTop, themes }; `; nuxt.options.alias['#primevue-style'] = addTemplate({ filename: 'primevue-style.mjs', @@ -82,14 +97,16 @@ ${registered.config.map((config: any) => `import ${config.as} from '${config.fro ${registered.services.map((service: any) => `import ${service.as} from '${service.from}';`).join('\n')} ${registered.directives.map((directive: any) => `import ${directive.as} from '${directive.from}';`).join('\n')} ${importPT ? `import ${importPT.as} from '${normalize(importPT.from)}';\n` : ''} +${hasTheme ? `import ${importTheme.as} from '${normalize(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 = ${hasTheme ? `{ theme: ${importTheme.as} }` : `{}`}; - usePrimeVue && vueApp.use(PrimeVue, { ...options, ...pt }); + usePrimeVue && vueApp.use(PrimeVue, { ...options, ...pt, ...theme }); ${registered.services.map((service: any) => `vueApp.use(${service.as});`).join('\n')} ${registered.directives.map((directive: any) => `vueApp.directive('${directive.name}', ${directive.as});`).join('\n')} }); diff --git a/src/runtime/core/components/index.ts b/src/runtime/core/components/index.ts index d05d45f..da4fc3d 100644 --- a/src/runtime/core/components/index.ts +++ b/src/runtime/core/components/index.ts @@ -5,10 +5,12 @@ const form = [ 'Checkbox', 'Chips', 'ColorPicker', + 'DatePicker', 'Dropdown', 'Editor', 'FloatLabel', 'IconField', + 'InputChips', 'InputGroup', 'InputGroupAddon', 'InputIcon', @@ -23,21 +25,54 @@ const form = [ 'Password', 'RadioButton', 'Rating', + 'Select', 'SelectButton', 'Slider', 'Textarea', 'ToggleButton', - 'TreeSelect', - 'TriStateCheckbox' + 'ToggleSwitch', + 'TreeSelect' ]; const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton']; -const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller']; +const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller']; -const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar']; +const panel = [ + 'Accordion', + 'AccordionPanel', + 'AccordionHeader', + 'AccordionContent', + 'AccordionTab', + 'Card', + 'DeferredContent', + 'Divider', + 'Fieldset', + 'Panel', + 'ScrollPanel', + 'Splitter', + 'SplitterPanel', + 'Stepper', + 'StepperPanel', + 'TabView', + 'Tabs', + 'TabList', + 'Tab', + 'TabPanels', + 'TabPanel', + 'Toolbar' +]; -const overlay = [{ name: 'ConfirmDialog', use: { as: 'ConfirmationService' } }, { name: 'ConfirmPopup', use: { as: 'ConfirmationService' } }, 'Dialog', { name: 'DynamicDialog', use: { as: 'DialogService' } }, 'OverlayPanel', 'Sidebar']; +const overlay = [ + { name: 'ConfirmDialog', use: { as: 'ConfirmationService' } }, + { name: 'ConfirmPopup', use: { as: 'ConfirmationService' } }, + 'Dialog', + 'Drawer', + { name: 'DynamicDialog', use: { as: 'DialogService' } }, + 'OverlayPanel', + 'Popover', + 'Sidebar' +]; const file = ['FileUpload']; @@ -49,6 +84,6 @@ const messages = ['Message', 'InlineMessage', { name: 'Toast', use: { as: 'Toast const media = ['Carousel', 'Galleria', 'Image']; -const misc = ['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal']; +const misc = ['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'OverlayBadge', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal']; export const components = [...form, ...button, ...data, ...panel, ...overlay, ...file, ...menu, ...chart, ...messages, ...media, ...misc].map((c) => (typeof c === 'string' ? { name: c } : c)); diff --git a/src/runtime/plugin.server.ts b/src/runtime/plugin.server.ts index bd3deac..f28d159 100644 --- a/src/runtime/plugin.server.ts +++ b/src/runtime/plugin.server.ts @@ -1,6 +1,6 @@ import type { NitroApp } from 'nitropack'; // @ts-expect-error -import { styles, stylesToTop } from '#primevue-style'; +import { styles, stylesToTop, themes } from '#primevue-style'; //import { useRuntimeConfig } from '#imports'; type NitroAppPlugin = (nitro: NitroApp) => void; @@ -11,5 +11,7 @@ export default defineNitroPlugin(async (nitroApp) => { nitroApp.hooks.hook('render:html' as any, (html: any) => { html.head.unshift(stylesToTop); html.head.push(styles); + html.head.push(themes); + //html.htmlAttrs.push('class="p-dark"'); // @todo }); }); diff --git a/src/types.d.ts b/src/types.d.ts index 0719883..75d60e3 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -7,7 +7,8 @@ export interface ModuleOptions { usePrimeVue?: boolean; resolvePath?: any; cssLayerOrder?: string; - importPT?: ImportPTOptions; + importPT?: ImportOptions; + importTheme?: ImportOptions; options?: PrimeVueOptions; components?: ComponentsType; directives?: DirectivesType; @@ -16,7 +17,7 @@ export interface ModuleOptions { export interface PrimeVueOptions extends PrimeVueConfiguration {} -export interface ImportPTOptions { +export interface ImportOptions { as?: string; from: string; }