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

Redo custom token support

pull/7024/head
Cagatay Civici 2024-12-28 22:21:13 +03:00
parent 121b8fcb24
commit 2ebda30c10
5 changed files with 33 additions and 20 deletions
Show Stats 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 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() {
this.$appState.designer.theme.acTokens = [];
this.$appState.designer.acTokens = [];
this.generateACTokens(null, this.$appState.designer.theme.preset);
},
openDashboard() {

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

@ -67,6 +67,7 @@ export default {
designerApiBase: runtimeConfig.public.designerApiBase
};
},
inject: ['designerService'],
data() {
return {
themeName: null,
@ -171,15 +172,15 @@ export default {
name: this.themeName,
key: t_key,
preset: preset,
customTokens: [],
acTokens: [],
config: {
baseFontSize: '14px',
fontFamily: 'Inter var'
}
};
this.design;
this.replaceColorPalette();
usePreset(preset);
this.designerService.refreshACTokens();
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,
name: data.t_name,
preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config),
customTokens: [],
acTokens: []
config: JSON.parse(data.t_config)
};
usePreset(this.$appState.designer.theme.preset);

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

@ -1,15 +1,15 @@
<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>
<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">
<label class="flex items-center gap-2 flex-auto">
<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 class="flex items-center gap-2 flex-auto">
<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>
<button
type="button"
@ -30,9 +30,8 @@
Add New
</button>
<button
v-if="$appState.designer.theme.customTokens.length"
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"
>
Save
@ -43,22 +42,38 @@
<script>
export default {
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: {
addToken() {
this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]];
this.tokens = [...this.tokens, ...[{}]];
},
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.customTokens.forEach((token) => {
this.tokens.forEach((token) => {
this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value;
});
this.designerService.saveTheme(this.$appState.designer.theme);
this.designerService.refreshACTokens();
this.designerService.saveTheme();
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
},
transformTokenName(name) {

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

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