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

Applied custom tokens to preset

pull/6775/head
Cagatay Civici 2024-11-13 02:11:11 +03:00
parent 9bc4686e3f
commit 632380414e
1 changed files with 55 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
apps/showcase/components/layout/AppDesigner.vue
View File

@ -179,9 +179,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.preset.semantic.primary = this.preset.primitive.emerald; this.replaceColorPalette();
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
}, },
methods: { methods: {
apply() { apply() {
@ -231,30 +229,49 @@ app.mount("#app");
document.body.classList.remove('material'); document.body.classList.remove('material');
} }
usePreset(newPreset);
this.preset = { this.preset = {
primitive: newPreset.primitive, primitive: newPreset.primitive,
semantic: newPreset.semantic semantic: newPreset.semantic
}; };
this.preset.semantic.primary = this.preset.primitive.emerald;
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
usePreset(this.preset);
}, },
saveTheme() { saveTheme() {
const themeRecord = { const localState = {
defaultTheme: this.preset themes: {
defaultTheme: {
preset: this.preset,
customTokens: this.customTokens
}
}
}; };
localStorage.setItem(this.$appState.designerKey, JSON.stringify(themeRecord)); localStorage.setItem(this.$appState.designerKey, JSON.stringify(localState));
}, },
loadFromLocalStorage() { loadFromLocalStorage() {
const savedTheme = localStorage.getItem(this.$appState.designerKey); const localState = localStorage.getItem(this.$appState.designerKey);
if (savedTheme) { if (localState) {
const loadedThemeState = JSON.parse(savedTheme); const parsedLocalState = JSON.parse(localState);
if (parsedLocalState?.themes?.defaultTheme) {
const defaultTheme = parsedLocalState.themes.defaultTheme;
if (defaultTheme.preset) {
this.preset = defaultTheme.preset;
}
if (defaultTheme.customTokens) {
this.customTokens = defaultTheme.customTokens;
}
this.preset = loadedThemeState.defaultTheme;
this.customTokens = loadedThemeState.customTokens;
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer', life: 3000 });
} }
}
}, },
addToken() { addToken() {
this.customTokens = [...this.customTokens, ...[{}]]; this.customTokens = [...this.customTokens, ...[{}]];
@ -263,21 +280,32 @@ app.mount("#app");
this.customTokens.splice(index, 1); this.customTokens.splice(index, 1);
}, },
saveTokens() { saveTokens() {
const themeRecordState = localStorage.getItem(this.$appState.designerKey); this.preset.extend = {};
let themeRecord = null; this.customTokens.forEach((token) => {
this.preset.extend[this.transformTokenName(token.name)] = token.value;
if (themeRecordState) { });
themeRecord = JSON.parse(themeRecordState);
themeRecord.customTokens = this.customTokens;
} else {
themeRecord = {
customTokens: this.customTokens
};
}
localStorage.setItem(this.$appState.designerKey, JSON.stringify(themeRecord));
this.saveTheme();
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
},
replaceColorPalette() {
this.preset.semantic.primary = this.preset.primitive.emerald;
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
},
transformTokenName(name) {
if (name && name.trim().length) {
let tokenNameSections = name.split('.');
let transformedName = '';
tokenNameSections.forEach((section, index) => {
transformedName += index === 0 ? section : section.charAt(0).toUpperCase() + section.substring(1);
});
return transformedName;
} else {
return name;
}
} }
} }
}; };