vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5898 - Themes are installed by the wrong package

pull/5917/head
Mert Sincan 2024-06-15 07:14:31 +01:00
parent 03c536bd6c
commit 2fdfe2f13e
47 changed files with 57 additions and 993 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
},
"scripts": {
"setup": "rm -rf **/node_modules **/**/node_modules **/dist ./pnpm-lock.yaml && pnpm install",
"link": "pnpm --filter './packages/*' dev:link",
"release": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks",
"release:beta": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --tag beta",
"release:rc": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --tag rc",

5
packages/auto-import-resolver/package.json
View File

@ -33,7 +33,8 @@
"build": "NODE_ENV=production INPUT_DIR=./ OUTPUT_DIR=dist/ pnpm run build:package",
"build:package": "pnpm run build:prebuild && tsup && pnpm run build:postbuild",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primevue/metadata": "workspace:*"
@ -45,4 +46,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

7
packages/core/package.json
View File

@ -44,10 +44,11 @@
"build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
"build:package": "pnpm run build:prebuild && rollup -c && pnpm run build:postbuild",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primevue/themes": "workspace:*"
"@primeuix/styled": "^0.0.1"
},
"peerDependencies": {
"vue": "^3.0.0"
@ -55,4 +56,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

5
packages/core/rollup.config.mjs
View File

@ -19,7 +19,7 @@ const GLOBALS = {
// externals
const GLOBAL_EXTERNALS = ['vue'];
const INLINE_EXTERNALS = [/@primevue\/themes\/.*/];
const INLINE_EXTERNALS = ['@primeuix/styled'];
const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
// alias
@ -42,8 +42,7 @@ const ALIAS_ENTRIES = [
return targetFile ? path.join(folderPath, targetFile) : null;
}
},
{ find: '@primevue/themes', replacement: path.resolve(__dirname, '../themes/src/index.js') }
}
];
// plugins

2
packages/core/src/base/style/BaseStyle.js
View File

@ -1,6 +1,6 @@
import { Theme, dt } from '@primeuix/styled';
import { useStyle } from '@primevue/core/usestyle';
import { ObjectUtils } from '@primevue/core/utils';
import { Theme, dt } from '@primevue/themes';
const theme = ({ dt }) => `
* {

2
packages/core/src/basecomponent/BaseComponent.vue
View File

@ -2,7 +2,7 @@
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils';
import { Theme, ThemeService } from '@primevue/themes';
import { Theme, ThemeService } from '@primeuix/styled';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';

2
packages/core/src/basedirective/BaseDirective.js
View File

@ -1,8 +1,8 @@
import { Theme, ThemeService } from '@primeuix/styled';
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import PrimeVueService from '@primevue/core/service';
import { ObjectUtils, UniqueComponentId } from '@primevue/core/utils';
import { Theme, ThemeService } from '@primevue/themes';
import { mergeProps } from 'vue';
const BaseDirective = {

2
packages/core/src/config/PrimeVue.js
View File

@ -1,7 +1,7 @@
import { Theme, ThemeService } from '@primeuix/styled';
import { FilterMatchMode } from '@primevue/core/api';
import BaseStyle from '@primevue/core/base/style';
import PrimeVueService from '@primevue/core/service';
import { Theme, ThemeService } from '@primevue/themes';
import { inject, reactive, ref, watch } from 'vue';
export const defaultOptions = {

2
packages/core/src/utils/DomHandler.js
View File

@ -1,4 +1,4 @@
import { $dt } from '@primevue/themes';
import { $dt } from '@primeuix/styled';
export default {
innerWidth(el) {

3
packages/core/tsconfig.json
View File

@ -16,8 +16,7 @@
"incremental": true,
"baseUrl": ".",
"paths": {
"@primevue/core/*": ["./src/*"],
"primevue/themes/*": ["../../packages/themes/src/*"]
"@primevue/core/*": ["./src/*"]
}
},
"include": ["**/*.ts", "src/*"],

5
packages/icons/package.json
View File

@ -35,7 +35,8 @@
"build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
"build:package": "pnpm run build:prebuild && rollup -c && pnpm run build:postbuild",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primevue/core": "workspace:*"
@ -43,4 +44,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

5
packages/metadata/package.json
View File

@ -34,7 +34,8 @@
"build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
"build:package": "pnpm run build:prebuild && tsup && pnpm run build:postbuild",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"devDependencies": {
"tsup": "^8.1.0"
@ -42,4 +43,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

3
packages/nuxt-module/package.json
View File

@ -51,6 +51,7 @@
"dev": "nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
"dev:link": "pnpm link --global && npm link",
"test": "vitest run",
"test:watch": "vitest watch"
},
@ -75,4 +76,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

5
packages/nuxt-module/src/module.ts
View File

@ -53,15 +53,12 @@ export default defineNuxtModule<ModuleOptions>({
//nuxt.options.build.transpile.push('nuxt');
nuxt.options.build.transpile.push('primevue');
/*nuxt.options.build.transpile.push('@primevue/core');
nuxt.options.build.transpile.push('@primevue/icons');
nuxt.options.build.transpile.push('@primevue/themes');*/
const styleContent = () => `
${registered.styles.map((style: any) => `import ${style.as} from '${style.from}';`).join('\n')}
${
hasTheme
? `import { Theme } from '@primevue/themes';
? `import { Theme } from '@primeuix/styled';
import ${importTheme.as} from '${normalize(importTheme.from)}';\n`
: ''
}

5
packages/primevue/package.json
View File

@ -318,7 +318,8 @@
"build:package": "pnpm run build:prebuild && pnpm run build:api && rollup -c && pnpm run build:postbuild",
"build:api": "node ./scripts/build-api.js",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primevue/core": "workspace:*",
@ -327,4 +328,4 @@
"engines": {
"node": ">=12.11.0"
}
}
}

5
packages/primevue/rollup.config.mjs
View File

@ -19,7 +19,7 @@ const GLOBALS = {
// externals
const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/];
const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/, '@primeuix/styled'];
const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
// alias
@ -56,8 +56,7 @@ const ALIAS_ENTRIES = [
{ find: '@primevue/core/utils', replacement: path.resolve(__dirname, '../core/src/utils/Utils.js') },
{ find: '@primevue/core', replacement: path.resolve(__dirname, '../core/src/index.js') },
{ find: '@primevue/icons/baseicon/style', replacement: path.resolve(__dirname, '../icons/src/baseicon/style/BaseIconStyle.js') },
{ find: '@primevue/icons/baseicon', replacement: path.resolve(__dirname, '../icons/src/baseicon/BaseIcon.vue') },
{ find: '@primevue/themes', replacement: path.resolve(__dirname, '../themes/src/index.js') }
{ find: '@primevue/icons/baseicon', replacement: path.resolve(__dirname, '../icons/src/baseicon/BaseIcon.vue') }
];
// plugins

2
packages/primevue/scripts/prebuild.mjs
View File

@ -23,7 +23,7 @@ export { default as BaseIcon } from '@primevue/icons/baseicon';
export { default as BaseIconStyle } from '@primevue/icons/baseicon/style';
// Themes
export * from '@primevue/themes';
export * from '@primeuix/styled';
// UseConfirm
export * from './useconfirm/UseConfirm.js';

2
packages/primevue/src/confirmpopup/ConfirmPopup.vue
View File

@ -59,7 +59,7 @@
<script>
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from '@primevue/core/utils';
import { $dt } from '@primevue/themes';
import { $dt } from '@primeuix/styled';
import Button from 'primevue/button';
import ConfirmationEventBus from 'primevue/confirmationeventbus';
import FocusTrap from 'primevue/focustrap';

2
packages/primevue/src/knob/BaseKnob.vue
View File

@ -1,6 +1,6 @@
<script>
import BaseComponent from '@primevue/core/basecomponent';
import { $dt } from '@primevue/themes';
import { $dt } from '@primeuix/styled';
import KnobStyle from 'primevue/knob/style';
export default {

2
packages/primevue/src/popover/Popover.vue
View File

@ -15,7 +15,7 @@
<script>
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils';
import { $dt } from '@primevue/themes';
import { $dt } from '@primeuix/styled';
import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';

2
packages/primevue/src/primevue.js
View File

@ -6,7 +6,7 @@ export { default as BaseIcon } from '@primevue/icons/baseicon';
export { default as BaseIconStyle } from '@primevue/icons/baseicon/style';
// Themes
export * from '@primevue/themes';
export * from '@primeuix/styled';
// UseConfirm
export * from './useconfirm/UseConfirm.js';

2
packages/primevue/src/speeddial/SpeedDial.vue
View File

@ -66,7 +66,7 @@
<script>
import { DomHandler, UniqueComponentId } from '@primevue/core/utils';
import PlusIcon from '@primevue/icons/plus';
import { $dt } from '@primevue/themes';
import { $dt } from '@primeuix/styled';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip';

22
packages/themes/package.json
View File

@ -20,7 +20,19 @@
".": "./src/index.js",
"./aura": "./src/presets/aura/index.js",
"./lara": "./src/presets/lara/index.js",
"./nora": "./src/presets/nora/index.js"
"./nora": "./src/presets/nora/index.js",
"./aura/*": {
"types": "./types/*/index.d.ts",
"import": "./src/presets/aura/*/index.js"
},
"./lara/*": {
"types": "./types/*/index.d.ts",
"import": "./src/presets/lara/*/index.js"
},
"./nora/*": {
"types": "./types/*/index.d.ts",
"import": "./src/presets/nora/*/index.js"
}
},
"publishConfig": {
"main": "./index.mjs",
@ -57,9 +69,13 @@
"build:package": "pnpm run build:prebuild && pnpm run build:tokens && rollup -c && pnpm run build:postbuild",
"build:tokens": "node ./scripts/build-tokens.js",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:postbuild": "node ./scripts/postbuild.mjs"
"build:postbuild": "node ./scripts/postbuild.mjs",
"dev:link": "pnpm link --global && npm link"
},
"peerDependencies": {
"@primeuix/styled": "^0.0.1"
},
"engines": {
"node": ">=12.11.0"
}
}
}

3
packages/themes/src/core/actions/definePreset.js
View File

@ -1,3 +0,0 @@
import { SharedUtils } from '../utils/index.js';
export default (...presets) => SharedUtils.object.mergeKeys(...presets);

6
packages/themes/src/core/actions/index.js
View File

@ -1,6 +0,0 @@
export { default as definePreset } from './definePreset';
export { default as updatePreset } from './updatePreset';
export { default as updatePrimaryPalette } from './updatePrimaryPalette';
export { default as updateSurfacePalette } from './updateSurfacePalette';
export { default as usePreset } from './usePreset';
export { default as useTheme } from './useTheme';

10
packages/themes/src/core/actions/updatePreset.js
View File

@ -1,10 +0,0 @@
import Theme from '../config/index.js';
import { SharedUtils } from '../utils/index.js';
export default (...presets) => {
const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), ...presets);
Theme.setPreset(newPreset);
return newPreset;
};

3
packages/themes/src/core/actions/updatePrimaryPalette.js
View File

@ -1,3 +0,0 @@
import { $t } from '../helpers/index.js';
export default (primary) => $t().primaryPalette(primary).update().preset;

3
packages/themes/src/core/actions/updateSurfacePalette.js
View File

@ -1,3 +0,0 @@
import { $t } from '../helpers/index.js';
export default (surface) => $t().surfacePalette(surface).update().preset;

10
packages/themes/src/core/actions/usePreset.js
View File

@ -1,10 +0,0 @@
import Theme from '../config/index.js';
import { SharedUtils } from '../utils/index.js';
export default (...presets) => {
const newPreset = SharedUtils.object.mergeKeys(...presets);
Theme.setPreset(newPreset);
return newPreset;
};

3
packages/themes/src/core/actions/useTheme.js
View File

@ -1,3 +0,0 @@
import { $t } from '../helpers/index.js';
export default (theme) => $t(theme).update({ mergePresets: false });

145
packages/themes/src/core/config/index.js
View File

@ -1,145 +0,0 @@
import ThemeService from '../service/index.js';
import { ThemeUtils } from '../utils/index.js';
export default {
defaults: {
variable: {
prefix: 'p',
selector: ':root',
excludedKeyRegex: /^(primitive|semantic|components|directives|variables|colorscheme|light|dark|common|root|states)$/gi
},
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
},
_theme: undefined,
_layerNames: new Set(),
_loadedStyleNames: new Set(),
_loadingStyles: new Set(),
_tokens: {},
update(newValues = {}) {
const { theme } = newValues;
if (theme) {
this._theme = {
...theme,
options: {
...this.defaults.options,
...theme.options
}
};
this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
this.clearLoadedStyleNames();
}
},
get theme() {
return this._theme;
},
get preset() {
return this.theme?.preset || {};
},
get options() {
return this.theme?.options || {};
},
get tokens() {
return this._tokens;
},
getTheme() {
return this.theme;
},
setTheme(newValue) {
this.update({ theme: newValue });
ThemeService.emit('theme:change', newValue);
},
getPreset() {
return this.preset;
},
setPreset(newValue) {
this._theme = { ...this.theme, preset: newValue };
this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
this.clearLoadedStyleNames();
ThemeService.emit('preset:change', newValue);
ThemeService.emit('theme:change', this.theme);
},
getOptions() {
return this.options;
},
setOptions(newValue) {
this._theme = { ...this.theme, options: newValue };
this.clearLoadedStyleNames();
ThemeService.emit('options:change', newValue);
ThemeService.emit('theme:change', this.theme);
},
getLayerNames() {
return [...this._layerNames];
},
setLayerNames(layerName) {
this._layerNames.add(layerName);
},
getLoadedStyleNames() {
return this._loadedStyleNames;
},
isStyleNameLoaded(name) {
return this._loadedStyleNames.has(name);
},
setLoadedStyleName(name) {
this._loadedStyleNames.add(name);
},
deleteLoadedStyleName(name) {
this._loadedStyleNames.delete(name);
},
clearLoadedStyleNames() {
this._loadedStyleNames.clear();
},
getTokenValue(tokenPath) {
return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
},
getCommon(name = '', params) {
return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
},
getComponent(name = '', params) {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return ThemeUtils.getPresetC(options);
},
getDirective(name = '', params) {
const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return ThemeUtils.getPresetD(options);
},
getCustomPreset(name = '', preset, selector, params) {
const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
return ThemeUtils.getPreset(options);
},
getLayerOrderCSS(name = '') {
return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
},
transformCSS(name = '', css, type = 'style', mode) {
return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
},
getCommonStyleSheet(name = '', params, props = {}) {
return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
},
getStyleSheet(name, params, props = {}) {
return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
},
onStyleMounted(name) {
this._loadingStyles.add(name);
},
onStyleUpdated(name) {
this._loadingStyles.add(name);
},
onStyleLoaded(event, { name }) {
if (this._loadingStyles.size) {
this._loadingStyles.delete(name);
ThemeService.emit(`theme:${name}:load`, event); // Exp: ThemeService.emit('theme:panel-style:load', event)
!this._loadingStyles.size && ThemeService.emit('theme:load');
}
}
};

4
packages/themes/src/core/helpers/color/index.js
View File

@ -1,4 +0,0 @@
export { default as mix } from './mix';
export { default as palette } from './palette';
export { default as shade } from './shade';
export { default as tint } from './tint';

39
packages/themes/src/core/helpers/color/mix.js
View File

@ -1,39 +0,0 @@
function normalizeColor(color) {
if (color.length === 4) {
color = `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
}
return color;
}
function hexToRgb(hex) {
var bigint = parseInt(hex.substring(1), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return { r, g, b };
}
function rgbToHex(r, g, b) {
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}
export default (color1, color2, weight) => {
color1 = normalizeColor(color1);
color2 = normalizeColor(color2);
var p = weight / 100;
var w = p * 2 - 1;
var w1 = (w + 1) / 2.0;
var w2 = 1 - w1;
var rgb1 = hexToRgb(color1);
var rgb2 = hexToRgb(color2);
var r = Math.round(rgb1.r * w1 + rgb2.r * w2);
var g = Math.round(rgb1.g * w1 + rgb2.g * w2);
var b = Math.round(rgb1.b * w1 + rgb2.b * w2);
return rgbToHex(r, g, b);
};

14
packages/themes/src/core/helpers/color/palette.js
View File

@ -1,14 +0,0 @@
import shade from './shade';
import tint from './tint';
const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
export default (color) => {
if (/{([^}]*)}/g.test(color)) {
const token = color.replace(/{|}/g, '');
return scales.reduce((acc, scale) => ((acc[scale] = `{${token}.${scale}}`), acc), {});
}
return typeof color === 'string' ? scales.reduce((acc, scale, i) => ((acc[scale] = i <= 5 ? tint(color, (5 - i) * 19) : shade(color, (i - 5) * 15)), acc), {}) : color;
};

3
packages/themes/src/core/helpers/color/shade.js
View File

@ -1,3 +0,0 @@
import mix from './mix';
export default (color, percent) => mix('#000000', color, percent);

3
packages/themes/src/core/helpers/color/tint.js
View File

@ -1,3 +0,0 @@
import mix from './mix';
export default (color, percent) => mix('#ffffff', color, percent);

4
packages/themes/src/core/helpers/css.js
View File

@ -1,4 +0,0 @@
import { SharedUtils } from '../utils/index.js';
import { dt } from './dt';
export const css = (style) => SharedUtils.object.getItemValue(style, { dt });

34
packages/themes/src/core/helpers/dt.js
View File

@ -1,34 +0,0 @@
import Theme from '../config/index.js';
import { SharedUtils } from '../utils/index.js';
export const $dt = (tokenPath) => {
const theme = Theme.getTheme();
const variable = dtwt(theme, tokenPath, undefined, 'variable');
const name = variable.match(/--[\w-]+/g)?.[0];
const value = dtwt(theme, tokenPath, undefined, 'value');
return {
name,
variable,
value
};
};
export const dt = (...args) => {
return dtwt(Theme.getTheme(), ...args);
};
export const dtwt = (theme = {}, tokenPath, fallback, type = 'variable') => {
if (tokenPath) {
const { variable: VARIABLE, options: OPTIONS } = Theme.defaults || {};
const { prefix, transform } = theme?.options || OPTIONS || {};
const regex = /{([^}]*)}/g;
const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;
const isStrictTransform = type === 'value' || transform === 'strict'; // @todo - TRANSFORM: strict | lenient(default)
return isStrictTransform ? Theme.getTokenValue(tokenPath) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex], fallback);
}
return '';
};

5
packages/themes/src/core/helpers/index.js
View File

@ -1,5 +0,0 @@
export * from './color/index.js';
export * from './css';
export * from './dt';
export * from './t';
export { default as toVariables } from './toVariables';

66
packages/themes/src/core/helpers/t.js
View File

@ -1,66 +0,0 @@
import Theme from '../config/index.js';
import { SharedUtils } from '../utils/index.js';
export const $t = (theme = {}) => {
let { preset: _preset, options: _options } = theme;
return {
preset(value) {
_preset = _preset ? SharedUtils.object.mergeKeys(_preset, value) : value;
return this;
},
options(value) {
_options = _options ? { ..._options, ...value } : value;
return this;
},
// features
primaryPalette(primary) {
const { semantic } = _preset || {};
_preset = { ..._preset, semantic: { ...semantic, primary } };
return this;
},
surfacePalette(surface) {
const { semantic } = _preset || {};
const lightSurface = surface?.hasOwnProperty('light') ? surface?.light : surface;
const darkSurface = surface?.hasOwnProperty('dark') ? surface?.dark : surface;
const newColorScheme = {
colorScheme: {
light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
}
};
_preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
return this;
},
// actions
define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
return {
preset: useDefaultPreset ? Theme.getPreset() : _preset,
options: useDefaultOptions ? Theme.getOptions() : _options
};
},
update({ mergePresets = true, mergeOptions = true } = {}) {
const newTheme = {
preset: mergePresets ? SharedUtils.object.mergeKeys(Theme.getPreset(), _preset) : _preset,
options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
};
Theme.setTheme(newTheme);
return newTheme;
},
use(options) {
const newTheme = this.define(options);
Theme.setTheme(newTheme);
return newTheme;
}
};
};

38
packages/themes/src/core/helpers/toVariables.js
View File

@ -1,38 +0,0 @@
import Theme from '../config/index.js';
import { SharedUtils } from '../utils/index.js';
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 = '') => {
return Object.entries(_theme).reduce(
(acc, [key, value]) => {
const px = SharedUtils.object.test(excludedKeyRegex, key) ? SharedUtils.object.toNormalizeVariable(_prefix) : SharedUtils.object.toNormalizeVariable(_prefix, SharedUtils.object.toKebabCase(key));
const v = SharedUtils.object.toValue(value);
if (SharedUtils.object.isObject(v)) {
const { variables, tokens } = _toVariables(v, px);
SharedUtils.object.merge(acc['tokens'], tokens);
SharedUtils.object.merge(acc['variables'], variables);
} else {
acc['tokens'].push((prefix ? px.replace(`${prefix}-`, '') : px).replaceAll('-', '.'));
SharedUtils.object.setProperty(acc['variables'], SharedUtils.object.getVariableName(px), SharedUtils.object.getVariableValue(v, px, prefix, [excludedKeyRegex]));
}
return acc;
},
{ variables: [], tokens: [] }
);
};
const { variables, tokens } = _toVariables(theme, prefix);
return {
value: variables,
tokens,
declarations: variables.join(''),
css: SharedUtils.object.getRule(selector, variables.join(''))
};
}

40
packages/themes/src/core/service/index.js
View File

@ -1,40 +0,0 @@
function createService() {
const allHandlers = new Map();
return {
on(type, handler) {
let handlers = allHandlers.get(type);
if (!handlers) handlers = [handler];
else handlers.push(handler);
allHandlers.set(type, handlers);
return this;
},
off(type, handler) {
let handlers = allHandlers.get(type);
if (handlers) {
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
}
return this;
},
emit(type, evt) {
let handlers = allHandlers.get(type);
if (handlers) {
handlers.slice().map((handler) => {
handler(evt);
});
}
}
};
}
const ThemeService = createService();
export default ThemeService;

2
packages/themes/src/core/utils/index.js
View File

@ -1,2 +0,0 @@
export { default as SharedUtils } from './sharedUtils';
export { default as ThemeUtils } from './themeUtils';

225
packages/themes/src/core/utils/sharedUtils.js
View File

@ -1,225 +0,0 @@
export default {
object: {
isEmpty(value) {
return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
},
isNotEmpty(value) {
return !this.isEmpty(value);
},
isFunction(value) {
return !!(value && value.constructor && value.call && value.apply);
},
isObject(value, empty = true) {
return value instanceof Object && value.constructor === Object && (empty || Object.keys(value).length !== 0);
},
isArray(value, empty = true) {
return Array.isArray(value) && (empty || value.length !== 0);
},
isString(value, empty = true) {
return typeof value === 'string' && (empty || value !== '');
},
isNumber(value) {
return !isNaN(value);
},
toFlatCase(str) {
// convert snake, kebab, camel and pascal cases to flat case
return this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
},
toKebabCase(str) {
// convert snake, camel and pascal cases to kebab case
return this.isString(str)
? str
.replace(/(_)/g, '-')
.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '-' + c.toLowerCase()))
.toLowerCase()
: str;
},
toTokenKey(str) {
return this.isString(str) ? str.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '.' + c.toLowerCase())).toLowerCase() : str;
},
merge(value1, value2) {
if (this.isArray(value1)) {
value1.push(...(value2 || []));
} else if (this.isObject(value1)) {
Object.assign(value1, value2);
}
},
mergeKeysByRegex(target = {}, source = {}, regex) {
const mergedObj = { ...target };
Object.keys(source).forEach((key) => {
if (this.test(regex, key)) {
if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
mergedObj[key] = this.mergeKeysByRegex(target[key], source[key], regex);
} else {
mergedObj[key] = source[key];
}
} else {
mergedObj[key] = source[key];
}
});
return mergedObj;
},
mergeKeys(...args) {
const _mergeKeys = (target = {}, source = {}) => {
const mergedObj = { ...target };
Object.keys(source).forEach((key) => {
if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
mergedObj[key] = _mergeKeys(target[key], source[key]);
} else {
mergedObj[key] = source[key];
}
});
return mergedObj;
};
return args.reduce((acc, obj, i) => (i === 0 ? obj : _mergeKeys(acc, obj)), {});
},
getItemValue(obj, ...params) {
return this.isFunction(obj) ? obj(...params) : obj;
},
getOptionValue(options, key = '', params = {}) {
const fKeys = this.toFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey
? this.isObject(options)
? this.getOptionValue(this.getItemValue(options[Object.keys(options).find((k) => this.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: this.getItemValue(options, params);
},
test(regex, str) {
if (regex) {
const match = regex.test(str);
regex.lastIndex = 0;
return match;
}
return false;
},
toValue(value) {
// Check for Figma (value-type)
return this.isObject(value) && value.hasOwnProperty('value') && value.hasOwnProperty('type') ? value.value : value;
},
toUnit(value, variable = '') {
const excludedProperties = ['opacity', 'z-index', 'line-height', 'font-weight', 'flex', 'flex-grow', 'flex-shrink', 'order'];
if (!excludedProperties.some((property) => variable.endsWith(property))) {
const val = `${value}`.trim();
const valArr = val.split(' ');
return valArr.map((v) => (this.isNumber(v) ? `${v}px` : v)).join(' ');
}
return value;
},
toNormalizePrefix(prefix) {
return prefix.replaceAll(/ /g, '').replace(/[^\w]/g, '-');
},
toNormalizeVariable(prefix = '', variable = '') {
return this.toNormalizePrefix(`${this.isString(prefix, false) && this.isString(variable, false) ? `${prefix}-` : prefix}${variable}`);
},
getVariableName(prefix = '', variable = '') {
return `--${this.toNormalizeVariable(prefix, variable)}`;
},
getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = [], fallback) {
if (this.isString(value)) {
const regex = /{([^}]*)}/g;
const val = value.trim();
if (this.test(regex, val)) {
const _val = val.replaceAll(regex, (v) => {
const path = v.replace(/{|}/g, '');
const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => this.test(_r, _v)));
return `var(${this.getVariableName(prefix, this.toKebabCase(keys.join('-')))}${this.isNotEmpty(fallback) ? `, ${fallback}` : ''})`;
});
const calculationRegex = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
const cleanedVarRegex = /var\([^)]+\)/g;
return this.test(calculationRegex, _val.replace(cleanedVarRegex, '0')) ? `calc(${_val})` : _val;
}
return this.toUnit(val, variable);
} else if (this.isNumber(value)) {
return this.toUnit(value, variable);
}
return undefined;
},
getComputedValue(obj = {}, value) {
if (this.isString(value)) {
const regex = /{([^}]*)}/g;
const val = value.trim();
return this.test(regex, val) ? val.replaceAll(regex, (v) => this.getOptionValue(obj, v.replace(/{|}/g, ''))) : val;
} else if (this.isNumber(value)) {
return value;
}
return undefined;
},
setProperty(properties, key, value) {
if (this.isString(key, false)) {
properties.push(`${key}:${value};`);
}
},
getRule(selector, properties) {
if (selector) {
return `${selector}{${properties}}`;
}
return '';
},
minifyCSS(css) {
return css
? css
.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
.replace(/ {2,}/g, ' ')
.replace(/ ([{:}]) /g, '$1')
.replace(/([;,]) /g, '$1')
.replace(/ !/g, '!')
.replace(/: /g, ':')
: css;
}
},
dom: {
isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
},
addClass(element, className) {
if (element && className && !this.hasClass(element, className)) {
if (element.classList) element.classList.add(className);
else element.className += ' ' + className;
}
},
removeClass(element, className) {
if (element && className) {
if (element.classList) element.classList.remove(className);
else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
},
hasClass(element, className) {
if (element) {
if (element.classList) return element.classList.contains(className);
else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
},
removeMultipleClasses(element, classNames) {
if (element && classNames) {
[classNames]
.flat()
.filter(Boolean)
.forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className)));
}
}
}
};

283
packages/themes/src/core/utils/themeUtils.js
View File

@ -1,283 +0,0 @@
import { toVariables } from '../helpers/index.js';
import SharedUtils from './sharedUtils';
export default {
regex: {
rules: {
class: {
pattern: /^\.([a-zA-Z][\w-]*)$/,
resolve(value) {
return { type: 'class', selector: value, matched: this.pattern.test(value.trim()) };
}
},
attr: {
pattern: /^\[(.*)\]$/,
resolve(value) {
return { type: 'attr', selector: `:root${value}`, matched: this.pattern.test(value.trim()) };
}
},
media: {
pattern: /^@media (.*)$/,
resolve(value) {
return { type: 'media', selector: `${value}{:root{[CSS]}}`, matched: this.pattern.test(value.trim()) };
}
},
system: {
pattern: /^system$/,
resolve(value) {
return { type: 'system', selector: '@media (prefers-color-scheme: dark){:root{[CSS]}}', matched: this.pattern.test(value.trim()) };
}
},
custom: {
resolve(value) {
return { type: 'custom', selector: value, matched: true };
}
}
},
resolve(value) {
const rules = Object.keys(this.rules)
.filter((k) => k !== 'custom')
.map((r) => this.rules[r]);
return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
}
},
_toVariables(theme, options) {
return toVariables(theme, { prefix: options?.prefix });
},
getCommon({ name = '', theme = {}, params, set, defaults }) {
const { preset, options } = theme;
let primitive_css, primitive_tokens, semantic_css, semantic_tokens;
if (SharedUtils.object.isNotEmpty(preset)) {
const { primitive, semantic } = preset;
const { colorScheme, ...sRest } = semantic || {};
const { dark, ...csRest } = colorScheme || {};
const prim_var = SharedUtils.object.isNotEmpty(primitive) ? this._toVariables({ primitive }, options) : {};
const sRest_var = SharedUtils.object.isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options) : {};
const csRest_var = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options) : {};
const dark_var = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark }, options) : {};
const [prim_css, prim_tokens] = [prim_var.declarations ?? '', prim_var.tokens];
const [sRest_css, sRest_tokens] = [sRest_var.declarations ?? '', sRest_var.tokens || []];
const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
const [dark_css, dark_tokens] = [dark_var.declarations ?? '', dark_var.tokens || []];
primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
primitive_tokens = prim_tokens;
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}`;
semantic_tokens = [...new Set([...sRest_tokens, ...csRest_tokens, ...dark_tokens])];
}
return {
primitive: {
css: primitive_css,
tokens: primitive_tokens
},
semantic: {
css: semantic_css,
tokens: semantic_tokens
}
};
},
getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
const _name = name.replace('-directive', '');
const { colorScheme, ...vRest } = preset;
const { dark, ...csRest } = colorScheme || {};
const vRest_var = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [_name]: vRest }, options) : {};
const csRest_var = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [_name]: csRest }, options) : {};
const dark_var = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [_name]: dark }, options) : {};
const [vRest_css, vRest_tokens] = [vRest_var.declarations ?? '', vRest_var.tokens || []];
const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
const [dark_css, dark_tokens] = [dark_var.declarations ?? '', dark_var.tokens || []];
const tokens = [...new Set([...vRest_tokens, ...csRest_tokens, ...dark_tokens])];
const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
const dark_variable_css = this.transformCSS(_name, dark_css, 'dark', 'variable', options, set, defaults, selector);
return {
css: `${light_variable_css}${dark_variable_css}`,
tokens
};
},
getPresetC({ name = '', theme = {}, params, set, defaults }) {
const { preset, options } = theme;
const cPreset = preset?.components?.[name];
return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
},
getPresetD({ name = '', theme = {}, params, set, defaults }) {
const dName = name.replace('-directive', '');
const { preset, options } = theme;
const dPreset = preset?.directives?.[dName];
return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
},
getColorSchemeOption(options, defaults) {
return this.regex.resolve(options.darkModeSelector ?? defaults.options.darkModeSelector);
},
getLayerOrder(name, options = {}, params, defaults) {
const { cssLayer } = options;
if (cssLayer) {
const order = SharedUtils.object.getItemValue(cssLayer.order || 'primeui', params);
return `@layer ${order}`;
}
return '';
},
getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const common = this.getCommon({ name, theme, params, set, defaults });
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
return Object.entries(common || {})
.reduce((acc, [key, value]) => {
if (value?.css) {
const _css = SharedUtils.object.minifyCSS(value?.css);
const id = `${key}-variables`;
acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`);
}
return acc;
}, [])
.join('');
},
getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
const options = { name, theme, params, set, defaults };
const preset_css = (name.includes('-directive') ? this.getPresetD(options) : this.getPresetC(options))?.css;
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
return preset_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${SharedUtils.object.minifyCSS(preset_css)}</style>` : '';
},
createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
Object.entries(obj).forEach(([key, value]) => {
const currentKey = SharedUtils.object.test(defaults.variable.excludedKeyRegex, key) ? parentKey : parentKey ? `${parentKey}.${SharedUtils.object.toTokenKey(key)}` : SharedUtils.object.toTokenKey(key);
const currentPath = parentPath ? `${parentPath}.${key}` : key;
if (SharedUtils.object.isObject(value)) {
this.createTokens(value, defaults, currentKey, currentPath, tokens);
} else {
tokens[currentKey] ||= {
paths: [],
computed(colorScheme, tokenPathMap = {}) {
if (colorScheme) {
const path = this.paths.find((p) => p.scheme === colorScheme) || this.paths.find((p) => p.scheme === 'none');
return path?.computed(colorScheme, tokenPathMap['binding']);
}
return this.paths.map((p) => p.computed(p.scheme, tokenPathMap[p.scheme]));
}
};
tokens[currentKey].paths.push({
path: currentPath,
value,
scheme: currentPath.includes('colorScheme.light') ? 'light' : currentPath.includes('colorScheme.dark') ? 'dark' : 'none',
computed(colorScheme, tokenPathMap = {}) {
const regex = /{([^}]*)}/g;
let computedValue = value;
tokenPathMap['name'] = this.path;
tokenPathMap['binding'] ||= {};
if (SharedUtils.object.test(regex, value)) {
const val = value.trim();
const _val = val.replaceAll(regex, (v) => {
const path = v.replace(/{|}/g, '');
return tokens[path]?.computed(colorScheme, tokenPathMap)?.value;
});
const calculationRegex = /(\d+\w*\s+[\+\-\*\/]\s+\d+\w*)/g;
const cleanedVarRegex = /var\([^)]+\)/g;
computedValue = SharedUtils.object.test(calculationRegex, _val.replace(cleanedVarRegex, '0')) ? `calc(${_val})` : _val;
}
SharedUtils.object.isEmpty(tokenPathMap['binding']) && delete tokenPathMap['binding'];
return {
colorScheme,
path: this.path,
paths: tokenPathMap,
value: computedValue.includes('undefined') ? undefined : computedValue
};
}
});
}
});
return tokens;
},
getTokenValue(tokens, path, defaults) {
const normalizePath = (str) => {
const strArr = str.split('.');
return strArr.filter((s) => !SharedUtils.object.test(defaults.variable.excludedKeyRegex, s.toLowerCase())).join('.');
};
const token = normalizePath(path);
const colorScheme = path.includes('colorScheme.light') ? 'light' : path.includes('colorScheme.dark') ? 'dark' : undefined;
const computedValues = [tokens[token]?.computed(colorScheme)].flat().filter((computed) => computed);
return computedValues.length === 1
? computedValues[0].value
: computedValues.reduce((acc = {}, computed) => {
const { colorScheme: cs, ...rest } = computed;
acc[cs] = rest;
return acc;
}, undefined);
},
transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
if (SharedUtils.object.isNotEmpty(css)) {
const { cssLayer } = options;
if (type !== 'style') {
const colorSchemeOption = this.getColorSchemeOption(options, defaults);
const _css = selector ? SharedUtils.object.getRule(selector, css) : css;
css =
mode === 'dark'
? colorSchemeOption.reduce((acc, { selector: _selector }) => {
if (SharedUtils.object.isNotEmpty(_selector)) {
acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', _css) : SharedUtils.object.getRule(_selector, _css);
}
return acc;
}, '')
: SharedUtils.object.getRule(selector ?? ':root', css);
}
if (cssLayer) {
const layerOptions = {
name: 'primeui',
order: 'primeui'
};
SharedUtils.object.isObject(cssLayer) && (layerOptions.name = SharedUtils.object.getItemValue(cssLayer.name, { name, type }));
if (SharedUtils.object.isNotEmpty(layerOptions.name)) {
css = SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css);
set?.layerNames(layerOptions.name);
}
}
return css;
}
return '';
}
};

8
packages/themes/src/index.d.ts vendored
View File

@ -1,7 +1 @@
/* @todo - remove any types */
export function definePreset(...arg: any[]): any;
export function updatePreset(...arg: any[]): any;
export function updatePrimaryPalette(palette?: any): any;
export function updateSurfacePalette(palette?: any): string;
export function usePreset(...arg: any[]): any;
export function useTheme(theme: any): any;
export * from '@primeuix/styled';

6
packages/themes/src/index.js
View File

@ -1,5 +1 @@
export * from './core/actions/index.js';
export { default as Theme } from './core/config/index.js';
export * from './core/helpers/index.js';
export { default as ThemeService } from './core/service/index.js';
export * from './core/utils/index.js';
export * from '@primeuix/styled';