vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 01:42:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Redo custom token support

Browse source
This commit is contained in:
Cagatay Civici 2024-12-28 22:21:13 +03:00
parent 121b8fcb24
commit 2ebda30c10
5 changed files with 33 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/showcase/components/layout/AppDesigner.vue
View file

@ -135,13 +135,13 @@ export default {
const tokenValue = $dt(tokenName).value; const tokenValue = $dt(tokenName).value;
const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName); const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
this.$appState.designer.theme.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor }); this.$appState.designer.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
} }
} }
} }
}, },
refreshACTokens() { refreshACTokens() {
this.$appState.designer.theme.acTokens = []; this.$appState.designer.acTokens = [];
this.generateACTokens(null, this.$appState.designer.theme.preset); this.generateACTokens(null, this.$appState.designer.theme.preset);
}, },
openDashboard() { openDashboard() {

5
apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View file

@ -67,6 +67,7 @@ export default {
designerApiBase: runtimeConfig.public.designerApiBase designerApiBase: runtimeConfig.public.designerApiBase
}; };
}, },
inject: ['designerService'],
data() { data() {
return { return {
themeName: null, themeName: null,
@ -171,15 +172,15 @@ export default {
name: this.themeName, name: this.themeName,
key: t_key, key: t_key,
preset: preset, preset: preset,
customTokens: [],
acTokens: [],
config: { config: {
baseFontSize: '14px', baseFontSize: '14px',
fontFamily: 'Inter var' fontFamily: 'Inter var'
} }
}; };
this.design;
this.replaceColorPalette(); this.replaceColorPalette();
usePreset(preset); usePreset(preset);
this.designerService.refreshACTokens();
this.$appState.designer.activeView = 'editor'; this.$appState.designer.activeView = 'editor';
} }

4
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View file

@ -171,9 +171,7 @@ export default {
key: data.t_key, key: data.t_key,
name: data.t_name, name: data.t_name,
preset: JSON.parse(data.t_preset), preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config), config: JSON.parse(data.t_config)
customTokens: [],
acTokens: []
}; };
usePreset(this.$appState.designer.theme.preset); usePreset(this.$appState.designer.theme.preset);

37
apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<span class="leading-6 text-muted-color">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span> <span class="leading-6 text-muted-color">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
<ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4"> <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
<li v-for="(token, index) of $appState.designer.customTokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2"> <li v-for="(token, index) of tokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<label class="flex items-center gap-2 flex-auto"> <label class="flex items-center gap-2 flex-auto">
<span class="text-sm">Name</span> <span class="text-sm">Name</span>
<input v-model="token['name']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" /> <input v-model="token['name']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" placeholder="custom.token.name" />
</label> </label>
<label class="flex items-center gap-2 flex-auto"> <label class="flex items-center gap-2 flex-auto">
<span class="text-sm">Value</span> <span class="text-sm">Value</span>
<input v-model="token['value']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" /> <input v-model="token['value']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" placeholder="token value" />
</label> </label>
<button <button
type="button" type="button"
@ -30,9 +30,8 @@
Add New Add New
</button> </button>
<button <button
v-if="$appState.designer.theme.customTokens.length"
type="button" type="button"
@click="saveTokens" @click="save"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white" class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
> >
Save Save
@ -43,22 +42,38 @@
<script> <script>
export default { export default {
inject: ['designerService'], inject: ['designerService'],
data() {
return {
tokens: []
};
},
created() {
const extend = this.$appState.designer.theme.preset.extend;
this.tokens = [];
if (extend) {
for (let token in extend) {
this.tokens.push({ name: token.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase(), value: extend[token] });
}
}
},
methods: { methods: {
addToken() { addToken() {
this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]]; this.tokens = [...this.tokens, ...[{}]];
}, },
removeToken(index) { removeToken(index) {
this.$appState.designer.theme.customTokens.splice(index, 1); this.tokens.splice(index, 1);
}, },
saveTokens() { save() {
this.$appState.designer.theme.preset.extend = {}; this.$appState.designer.theme.preset.extend = {};
this.$appState.designer.theme.customTokens.forEach((token) => {
this.tokens.forEach((token) => {
this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value; this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value;
}); });
this.designerService.saveTheme(this.$appState.designer.theme);
this.designerService.refreshACTokens(); this.designerService.refreshACTokens();
this.designerService.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 });
}, },
transformTokenName(name) { transformTokenName(name) {

3
apps/showcase/plugins/app-state.js
View file

@ -24,10 +24,9 @@ const $appState = {
key: null, key: null,
name: null, name: null,
preset: null, preset: null,
customTokens: [],
acTokens: [],
config: null config: null
}, },
acTokens: [],
themes: [] themes: []
} }
}); });