Fixed #65 - Add PrimeVue-v4 support

primefaces · May 24, 2024 · b536277 · b536277
1 parent fb938d6
commit b536277
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 15 deletions.
diff --git 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
@@ -16,6 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
     resolvePath: undefined,
     cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
     importPT: undefined,
+    importTheme: undefined,
     options: {},
     components: {
       prefix: '',
@@ -42,7 +43,8 @@ export default defineNuxtModule<ModuleOptions>({
 
     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<ModuleOptions>({
 
     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
@@ -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
@@ -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
@@ -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;
 }