From e23fd12ff42bf7b2280f6308f60a5e3c729a0e5b Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:12:22 +0000 Subject: [PATCH 1/6] Theming API: Update themes folder structure and all exports --- .../themes/{utils => actions}/extendPreset.js | 0 components/lib/themes/actions/index.js | 5 +++++ components/lib/themes/actions/package.json | 6 +++++ .../themes/{utils => actions}/updatePreset.js | 3 +-- .../lib/themes/actions/updatePrimary.js | 15 +++++++++++++ .../lib/themes/actions/updateSurface.js | 22 +++++++++++++++++++ .../themes/{utils => actions}/updateTheme.js | 0 .../themes/{utils => helpers}/color/index.js | 0 .../themes/{utils => helpers}/color/mix.js | 0 .../{utils => helpers}/color/palette.js | 0 .../themes/{utils => helpers}/color/shade.js | 0 .../themes/{utils => helpers}/color/tint.js | 0 .../lib/themes/{utils => helpers}/dt.js | 3 +-- components/lib/themes/helpers/index.js | 3 +++ components/lib/themes/helpers/package.json | 6 +++++ .../themes/{utils => helpers}/toVariables.js | 3 +-- components/lib/themes/index.js | 5 ++++- .../primeone/base/calendar/package.json | 6 +++++ .../base/{global.js => global/index.js} | 0 .../themes/primeone/base/global/package.json | 6 +++++ components/lib/themes/primeone/base/index.js | 2 +- .../primeone/presets/aura/avatar/index.js | 4 ++-- .../primeone/presets/aura/floatlabel/index.js | 2 +- .../{utils/service.js => service/index.js} | 0 components/lib/themes/service/package.json | 6 +++++ components/lib/themes/utils/index.js | 7 ------ components/lib/themes/utils/package.json | 6 +++++ 27 files changed, 92 insertions(+), 18 deletions(-) rename components/lib/themes/{utils => actions}/extendPreset.js (100%) create mode 100644 components/lib/themes/actions/index.js create mode 100644 components/lib/themes/actions/package.json rename components/lib/themes/{utils => actions}/updatePreset.js (84%) create mode 100644 components/lib/themes/actions/updatePrimary.js create mode 100644 components/lib/themes/actions/updateSurface.js rename components/lib/themes/{utils => actions}/updateTheme.js (100%) rename components/lib/themes/{utils => helpers}/color/index.js (100%) rename components/lib/themes/{utils => helpers}/color/mix.js (100%) rename components/lib/themes/{utils => helpers}/color/palette.js (100%) rename components/lib/themes/{utils => helpers}/color/shade.js (100%) rename components/lib/themes/{utils => helpers}/color/tint.js (100%) rename components/lib/themes/{utils => helpers}/dt.js (93%) create mode 100644 components/lib/themes/helpers/index.js create mode 100644 components/lib/themes/helpers/package.json rename components/lib/themes/{utils => helpers}/toVariables.js (96%) rename components/lib/themes/primeone/base/{global.js => global/index.js} (100%) create mode 100644 components/lib/themes/primeone/base/global/package.json rename components/lib/themes/{utils/service.js => service/index.js} (100%) create mode 100644 components/lib/themes/service/package.json create mode 100644 components/lib/themes/utils/package.json diff --git a/components/lib/themes/utils/extendPreset.js b/components/lib/themes/actions/extendPreset.js similarity index 100% rename from components/lib/themes/utils/extendPreset.js rename to components/lib/themes/actions/extendPreset.js diff --git a/components/lib/themes/actions/index.js b/components/lib/themes/actions/index.js new file mode 100644 index 000000000..727194f8c --- /dev/null +++ b/components/lib/themes/actions/index.js @@ -0,0 +1,5 @@ +export { default as extendPreset } from './extendPreset'; +export { default as updatePreset } from './updatePreset'; +export { default as updatePrimary } from './updatePrimary'; +export { default as updateSurface } from './updateSurface'; +export { default as updateTheme } from './updateTheme'; diff --git a/components/lib/themes/actions/package.json b/components/lib/themes/actions/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/actions/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/utils/updatePreset.js b/components/lib/themes/actions/updatePreset.js similarity index 84% rename from components/lib/themes/utils/updatePreset.js rename to components/lib/themes/actions/updatePreset.js index 527065549..e36f053c2 100644 --- a/components/lib/themes/utils/updatePreset.js +++ b/components/lib/themes/actions/updatePreset.js @@ -1,8 +1,7 @@ import Theme, { SharedUtils } from 'primevue/themes'; -const VARIABLE = Theme.defaults.variable; - export default (preset) => { + const VARIABLE = Theme.defaults.variable; const newPreset = SharedUtils.object.mergeKeysByRegex(Theme.getPreset(), preset, VARIABLE.excludedKeyRegex); Theme.setPreset(newPreset); diff --git a/components/lib/themes/actions/updatePrimary.js b/components/lib/themes/actions/updatePrimary.js new file mode 100644 index 000000000..c3441ba52 --- /dev/null +++ b/components/lib/themes/actions/updatePrimary.js @@ -0,0 +1,15 @@ +import Theme from 'primevue/themes'; + +export default (primary) => { + const { primitive, semantic, components, directives } = Theme.getPreset(); + const newPreset = { + primitive, + semantic: { ...semantic, primary }, + components, + directives + }; + + Theme.setPreset(newPreset); + + return newPreset; +}; diff --git a/components/lib/themes/actions/updateSurface.js b/components/lib/themes/actions/updateSurface.js new file mode 100644 index 000000000..740f3fcb8 --- /dev/null +++ b/components/lib/themes/actions/updateSurface.js @@ -0,0 +1,22 @@ +import Theme from 'primevue/themes'; + +export default (surface) => { + const { primitive, semantic, components, directives } = Theme.getPreset(); + const hasLightDark = surface?.hasOwnProperty('light') || surface?.hasOwnProperty('dark'); + const newColorScheme = { + colorScheme: { + light: { ...semantic?.colorScheme?.light, ...{ surface: hasLightDark ? surface?.light : surface } }, + dark: { ...semantic?.colorScheme?.dark, ...{ surface: hasLightDark ? surface?.dark : surface } } + } + }; + const newPreset = { + primitive, + semantic: { ...semantic, ...newColorScheme }, + components, + directives + }; + + Theme.setPreset(newPreset); + + return newPreset; +}; diff --git a/components/lib/themes/utils/updateTheme.js b/components/lib/themes/actions/updateTheme.js similarity index 100% rename from components/lib/themes/utils/updateTheme.js rename to components/lib/themes/actions/updateTheme.js diff --git a/components/lib/themes/utils/color/index.js b/components/lib/themes/helpers/color/index.js similarity index 100% rename from components/lib/themes/utils/color/index.js rename to components/lib/themes/helpers/color/index.js diff --git a/components/lib/themes/utils/color/mix.js b/components/lib/themes/helpers/color/mix.js similarity index 100% rename from components/lib/themes/utils/color/mix.js rename to components/lib/themes/helpers/color/mix.js diff --git a/components/lib/themes/utils/color/palette.js b/components/lib/themes/helpers/color/palette.js similarity index 100% rename from components/lib/themes/utils/color/palette.js rename to components/lib/themes/helpers/color/palette.js diff --git a/components/lib/themes/utils/color/shade.js b/components/lib/themes/helpers/color/shade.js similarity index 100% rename from components/lib/themes/utils/color/shade.js rename to components/lib/themes/helpers/color/shade.js diff --git a/components/lib/themes/utils/color/tint.js b/components/lib/themes/helpers/color/tint.js similarity index 100% rename from components/lib/themes/utils/color/tint.js rename to components/lib/themes/helpers/color/tint.js diff --git a/components/lib/themes/utils/dt.js b/components/lib/themes/helpers/dt.js similarity index 93% rename from components/lib/themes/utils/dt.js rename to components/lib/themes/helpers/dt.js index 3ce2cafd4..b7238b67c 100644 --- a/components/lib/themes/utils/dt.js +++ b/components/lib/themes/helpers/dt.js @@ -1,7 +1,5 @@ import Theme, { SharedUtils } from 'primevue/themes'; -const VARIABLE = Theme.defaults.variable; - export const $dt = (tokenPath, type) => { const config = Theme.getPConfig(); @@ -10,6 +8,7 @@ export const $dt = (tokenPath, type) => { export const dt = (theme = {}, tokenPath, type) => { if (tokenPath) { + const VARIABLE = Theme.defaults.variable; const { prefix, transform } = theme?.options || {}; const regex = /{([^}]*)}/g; const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`; diff --git a/components/lib/themes/helpers/index.js b/components/lib/themes/helpers/index.js new file mode 100644 index 000000000..4795c147f --- /dev/null +++ b/components/lib/themes/helpers/index.js @@ -0,0 +1,3 @@ +export * from './color/index.js'; +export * from './dt'; +export { default as toVariables } from './toVariables'; diff --git a/components/lib/themes/helpers/package.json b/components/lib/themes/helpers/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/helpers/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/utils/toVariables.js b/components/lib/themes/helpers/toVariables.js similarity index 96% rename from components/lib/themes/utils/toVariables.js rename to components/lib/themes/helpers/toVariables.js index 6df4ffe57..5c683f164 100644 --- a/components/lib/themes/utils/toVariables.js +++ b/components/lib/themes/helpers/toVariables.js @@ -1,8 +1,7 @@ import Theme, { SharedUtils } from 'primevue/themes'; -const VARIABLE = Theme.defaults.variable; - export default function (theme, options = {}) { + const VARIABLE = Theme.defaults.variable; const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options; const _toVariables = (_theme, _prefix = '') => { diff --git a/components/lib/themes/index.js b/components/lib/themes/index.js index 3f756ed2a..a39c3063b 100644 --- a/components/lib/themes/index.js +++ b/components/lib/themes/index.js @@ -1,2 +1,5 @@ +export * from 'primevue/themes/actions'; export { default } from 'primevue/themes/config'; -export * from './utils'; +export * from 'primevue/themes/helpers'; +export { default as ThemeService } from 'primevue/themes/service'; +export * from 'primevue/themes/utils'; diff --git a/components/lib/themes/primeone/base/calendar/package.json b/components/lib/themes/primeone/base/calendar/package.json index e69de29bb..f8e9d7ae0 100644 --- a/components/lib/themes/primeone/base/calendar/package.json +++ b/components/lib/themes/primeone/base/calendar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/base/global.js b/components/lib/themes/primeone/base/global/index.js similarity index 100% rename from components/lib/themes/primeone/base/global.js rename to components/lib/themes/primeone/base/global/index.js diff --git a/components/lib/themes/primeone/base/global/package.json b/components/lib/themes/primeone/base/global/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/global/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index c10741b2c..fbcaa35da 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -84,8 +84,8 @@ import treeselect from 'primevue/themes/primeone/base/treeselect'; import treetable from 'primevue/themes/primeone/base/treetable'; export default { + global, components: { - global, accordion, autocomplete, avatar, diff --git a/components/lib/themes/primeone/presets/aura/avatar/index.js b/components/lib/themes/primeone/presets/aura/avatar/index.js index d43f62714..f704c4f3c 100644 --- a/components/lib/themes/primeone/presets/aura/avatar/index.js +++ b/components/lib/themes/primeone/presets/aura/avatar/index.js @@ -2,7 +2,7 @@ export default { colorScheme: { light: { root: { - background: '{surface.200}', + background: '{surface.200}' }, grouped: { borderColor: '{surface.0}' @@ -10,7 +10,7 @@ export default { }, dark: { root: { - background: '{surface.700}', + background: '{surface.700}' }, grouped: { borderColor: '{surface.900}' diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/index.js b/components/lib/themes/primeone/presets/aura/floatlabel/index.js index 01001adcb..e83127703 100644 --- a/components/lib/themes/primeone/presets/aura/floatlabel/index.js +++ b/components/lib/themes/primeone/presets/aura/floatlabel/index.js @@ -2,6 +2,6 @@ export default { root: { color: '{form.field.float.label.color}', focusColor: '{form.field.float.label.focus.color}', - invalidColor: '{form.field.float.label.invalid.color}', + invalidColor: '{form.field.float.label.invalid.color}' } }; diff --git a/components/lib/themes/utils/service.js b/components/lib/themes/service/index.js similarity index 100% rename from components/lib/themes/utils/service.js rename to components/lib/themes/service/index.js diff --git a/components/lib/themes/service/package.json b/components/lib/themes/service/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/service/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/utils/index.js b/components/lib/themes/utils/index.js index 5cf31f277..885be7b97 100644 --- a/components/lib/themes/utils/index.js +++ b/components/lib/themes/utils/index.js @@ -1,9 +1,2 @@ -export * from './color'; -export * from './dt'; -export { default as extendPreset } from './extendPreset'; -export { default as ThemeService } from './service'; export { default as SharedUtils } from './sharedUtils'; export { default as ThemeUtils } from './themeUtils'; -export { default as toVariables } from './toVariables'; -export { default as updatePreset } from './updatePreset'; -export { default as updateTheme } from './updateTheme'; diff --git a/components/lib/themes/utils/package.json b/components/lib/themes/utils/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/utils/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} From 19531031611dfd3d6b98b67bd0592688f116327e Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:13:15 +0000 Subject: [PATCH 2/6] Theming API: Change package build --- build-meta.js | 37 ++++++------ nuxt-vite.config.js | 140 +++++++++++++++----------------------------- rollup.config.js | 86 ++++++++++++++++++++++++++- 3 files changed, 150 insertions(+), 113 deletions(-) diff --git a/build-meta.js b/build-meta.js index bad43d1ab..8c5df610f 100644 --- a/build-meta.js +++ b/build-meta.js @@ -2,30 +2,33 @@ const fs = require('fs-extra'); const path = require('path'); function copyDependencies(inFolder, outFolder, subFolder) { - fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true }) - .filter((dir) => dir.isDirectory()) - .forEach(({ name: folderName }) => { - fs.readdirSync(path.resolve(__dirname, inFolder + folderName)).forEach((file) => { - if (file === 'package.json' || file.endsWith('d.ts') || file.endsWith('vue')) { - fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file); - } - }); + fs.readdirSync(inFolder, { withFileTypes: true }).forEach((entry) => { + const fileName = entry.name; + const sourcePath = path.join(inFolder, fileName); + const destPath = path.join(outFolder, fileName); - if (subFolder) { - try { - fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => { - if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) { - fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile); - } - }); - } catch {} + if (entry.isDirectory()) { + copyDependencies(sourcePath, destPath, subFolder); + } else { + if (fileName === 'package.json' || fileName.endsWith('d.ts') || fileName.endsWith('.vue')) { + if (subFolder && sourcePath.includes(subFolder)) { + const subDestPath = path.join(outFolder, fileName.replace(subFolder, '')); + + fs.ensureDirSync(path.dirname(subDestPath)); + fs.copyFileSync(sourcePath, subDestPath); + } else { + fs.ensureDirSync(path.dirname(destPath)); + fs.copyFileSync(sourcePath, destPath); + } } - }); + } + }); } copyDependencies('./components/lib/', 'dist/', '/style'); copyDependencies('./components/lib/icons/', 'dist/icons/'); copyDependencies('./components/lib/passthrough/', 'dist/passthrough/'); +copyDependencies('./components/lib/themes/', 'dist/themes/'); fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts'); fs.copySync(path.resolve(__dirname, './README.md'), 'dist/README.md'); diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index dea41c71a..bc5b0b0e5 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -162,102 +162,54 @@ const ICON_ALIAS = { 'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue') }; -const THEME_COMPONENTS = [ - 'accordion', - 'autocomplete', - 'avatar', - 'badge', - 'blockui', - 'breadcrumb', - 'button', - 'calendar', - 'card', - 'carousel', - 'cascadeselect', - 'checkbox', - 'chip', - 'chips', - 'colorpicker', - 'confirmdialog', - 'confirmpopup', - 'contextmenu', - 'datatable', - 'dataview', - 'dialog', - 'divider', - 'dock', - 'dropdown', - 'editor', - 'fieldset', - 'fileupload', - 'floatlabel', - 'galleria', - 'iconfield', - 'image', - 'inlinemessage', - 'inplace', - 'inputgroup', - 'inputnumber', - 'inputotp', - 'inputswitch', - 'inputtext', - 'knob', - 'listbox', - 'megamenu', - 'menu', - 'menubar', - 'message', - 'metergroup', - 'multiselect', - 'orderlist', - 'organizationchart', - 'overlaypanel', - 'paginator', - 'panel', - 'panelmenu', - 'password', - 'picklist', - 'progressbar', - 'progressspinner', - 'radiobutton', - 'rating', - 'scrollpanel', - 'scrolltop', - 'selectbutton', - 'sidebar', - 'skeleton', - 'slider', - 'speeddial', - 'splitbutton', - 'splitter', - 'steps', - 'stepper', - 'tabmenu', - 'tabview', - 'tag', - 'terminal', - 'textarea', - 'tieredmenu', - 'timeline', - 'toast', - 'togglebutton', - 'toolbar', - 'tooltip', - 'tree', - 'treeselect', - 'treetable' -]; +// prettier-ignore +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable']; + +const createThemeAlias = (design, presets) => { + const baseAlias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/base/${name}/index.js`); + + return acc; + }, {}); + + const presetAlias = presets?.reduce((p_acc, p_name) => { + const p_alias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/${name}/index.js`); + + return acc; + }, {}); + + p_acc = { ...p_acc, ...p_alias }; + + return p_acc; + }, {}); + + const otherAlias = presets?.reduce((p_acc, p_name) => { + p_acc = { + ...p_acc, + [`primevue/themes/${design}/presets/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/presets/${p_name}/index.js`), + [`primevue/themes/${design}/${p_name}`]: path.resolve(__dirname, `./components/lib/themes/${design}/${p_name}/index.js`) + }; + + return p_acc; + }, {}); + + const coreAlias = { + [`primevue/themes/${design}/base/global`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/global/index.js`), + [`primevue/themes/${design}/base`]: path.resolve(__dirname, `./components/lib/themes/${design}/base/index.js`), + [`primevue/themes/${design}`]: path.resolve(__dirname, `./components/lib/themes/${design}/index.js`) + }; + + return { ...baseAlias, ...presetAlias, ...otherAlias, ...coreAlias }; +}; + const THEME_ALIAS = { - 'primevue/themes/primeone/base/global': path.resolve(__dirname, './components/lib/themes/primeone/base/global.js'), - ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/presets/aura/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/presets/aura/${name}/index.js`)), acc), {}), - ...THEME_COMPONENTS.reduce((acc, name) => ((acc[`primevue/themes/primeone/base/${name}`] = path.resolve(__dirname, `./components/lib/themes/primeone/base/${name}/index.js`)), acc), {}), - 'primevue/themes/primeone/base': path.resolve(__dirname, './components/lib/themes/primeone/base/index.js'), - 'primevue/themes/primeone/presets/aura': path.resolve(__dirname, './components/lib/themes/primeone/presets/aura/index.js'), - 'primevue/themes/primeone/presets': path.resolve(__dirname, './components/lib/themes/primeone/presets/index.js'), - 'primevue/themes/primeone/aura': path.resolve(__dirname, './components/lib/themes/primeone/aura/index.js'), - 'primevue/themes/primeone': path.resolve(__dirname, './components/lib/themes/primeone/index.js'), - 'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'), 'primevue/themes/utils': path.resolve(__dirname, './components/lib/themes/utils/index.js'), + 'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'), + 'primevue/themes/service': path.resolve(__dirname, './components/lib/themes/service/index.js'), + 'primevue/themes/helpers': path.resolve(__dirname, './components/lib/themes/helpers/index.js'), + 'primevue/themes/actions': path.resolve(__dirname, './components/lib/themes/actions/index.js'), + ...createThemeAlias('primeone', ['aura']), 'primevue/themes': path.resolve(__dirname, './components/lib/themes/index.js') }; diff --git a/rollup.config.js b/rollup.config.js index f705e2122..c537a0e66 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -173,6 +173,57 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/virtualscroller/style': 'primevue.virtualscroller.style' }; +// prettier-ignore +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','calendar','card','carousel','cascadeselect','checkbox','chip','chips','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','dialog','divider','dock','dropdown','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputgroup','inputnumber','inputotp','inputswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','selectbutton','sidebar','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toolbar','tooltip','tree','treeselect','treetable']; + +const createThemeDependencies = (design, presets) => { + const baseDeps = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/base/${name}`] = `primevue.themes.${design}.base.${name}`; + + return acc; + }, {}); + + const presetDeps = presets?.reduce((p_acc, p_name) => { + const p_alias = THEME_COMPONENTS.reduce((acc, name) => { + acc[`primevue/themes/${design}/presets/${p_name}/${name}`] = `primevue.themes.${design}.presets.${p_name}.${name}`; + + return acc; + }, {}); + + p_acc = { ...p_acc, ...p_alias }; + + return p_acc; + }, {}); + + const otherDeps = presets?.reduce((p_acc, p_name) => { + p_acc = { + ...p_acc, + [`primevue/themes/${design}/presets/${p_name}`]: `primevue.themes.${design}.presets.${p_name}`, + [`primevue/themes/${design}/${p_name}`]: `primevue.themes.${design}.${p_name}` + }; + + return p_acc; + }, {}); + + const coreDeps = { + [`primevue/themes/${design}/base/global`]: `primevue.themes.${design}.base.global`, + [`primevue/themes/${design}/base`]: `primevue.themes.${design}.base`, + [`primevue/themes/${design}`]: `primevue.themes.${design}` + }; + + return { ...baseDeps, ...presetDeps, ...otherDeps, ...coreDeps }; +}; + +const CORE_THEME_DEPENDENCIES = { + ...createThemeDependencies('primeone', ['aura']), + 'primevue/themes/actions': 'primevue.themes.actions', + 'primevue/themes/config': 'primevue.themes.config', + 'primevue/themes/helpers': 'primevue.themes.helpers', + 'primevue/themes/service': 'primevue.themes.service', + 'primevue/themes/utils': 'primevue.themes.utils', + 'primevue/themes': 'primevue.themes' +}; + const CORE_DEPENDENCIES = { 'primevue/utils': 'primevue.utils', 'primevue/api': 'primevue.api', @@ -212,7 +263,8 @@ const CORE_DEPENDENCIES = { 'primevue/badge': 'primevue.badge', 'primevue/listbox': 'primevue.listbox', 'primevue/togglebutton': 'primevue.togglebutton', - ...CORE_PASSTHROUGH_DEPENDENCIES + ...CORE_PASSTHROUGH_DEPENDENCIES, + ...CORE_THEME_DEPENDENCIES }; // dependencies @@ -405,6 +457,36 @@ function addStyle() { }); } +function traverseDir(dir, condition, callback) { + try { + const files = fs.readdirSync(dir); + + files.forEach((file) => { + const filePath = path.join(dir, file); + const fileStat = fs.statSync(filePath); + + if (fileStat.isDirectory()) { + traverseDir(filePath, condition, callback); + } else if (condition?.(file) && fileStat.isFile()) { + callback?.(file, filePath, dir); + } + }); + } catch {} +} + +function addThemes() { + traverseDir( + path.resolve(__dirname, './components/lib/themes'), + (file) => file === 'index.js', + (file, filePath, folderPath) => { + const searchFolder = '/components/lib/'; + const fpath = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length); + + addEntry(fpath, file, 'index'); + } + ); +} + function addDirectives() { addEntry('basedirective', 'BaseDirective.js', 'basedirective'); addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective'); @@ -421,7 +503,6 @@ function addConfig() { function addPassThrough() { addEntry('passthrough', 'index.js', 'index'); - addEntry('passthrough/tailwind', 'index.js', 'index'); } function addUtils() { @@ -499,6 +580,7 @@ function addPackageJson() { addUtils(); addStyle(); +addThemes(); addBase(); addApi(); addConfig(); From f937fc499ddec4cc90a96798eca780d4372e2720 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:13:42 +0000 Subject: [PATCH 3/6] Theming API: Refactor on ThemeUtils --- components/lib/themes/utils/themeUtils.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js index 5ecea88ab..3f20227ce 100644 --- a/components/lib/themes/utils/themeUtils.js +++ b/components/lib/themes/utils/themeUtils.js @@ -56,18 +56,14 @@ export default { const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : ''; primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, set, defaults); - semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults)}${this._transformCSS( - name, - `${dark_css}color-scheme:dark`, - 'dark', - 'variable', - options, - set, - defaults - )}`; + + const semantic_light_css = this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults); + const semantic_dark_css = this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults); + + semantic_css = `${semantic_light_css}${semantic_dark_css}`; } - global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) }); + global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) }); return { primitive: primitive_css, From b532a016f9a52f8b428b67adeaa4d76dd5a01a13 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:14:07 +0000 Subject: [PATCH 4/6] Fixed lint issue --- components/lib/togglebutton/ToggleButton.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts index 0dcb68d1d..6486bc4b8 100755 --- a/components/lib/togglebutton/ToggleButton.d.ts +++ b/components/lib/togglebutton/ToggleButton.d.ts @@ -12,7 +12,7 @@ import { ComponentHooks } from '../basecomponent'; import { PassThroughOptions } from '../passthrough'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; -export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined; +export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. @@ -48,7 +48,7 @@ export interface ToggleButtonPassThroughMethodOptions { * Custom passthrough(pt) options. * @see {@link ToggleButtonProps.pt} */ -export interface ToggleButtonPassThroughOptions { +export interface ToggleButtonPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ From a9f08884c0e2bd42767d15ca868aa8ce19542cec Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 27 Mar 2024 13:15:11 +0000 Subject: [PATCH 5/6] Use updatePrimary and updateSurface actions in AppConfig --- layouts/AppConfigurator.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index bb1f72c9d..8de9a89f6 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -38,7 +38,7 @@