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" +}