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

Display an error for bad token values, and update theme afte migration

pull/6454/merge
Cagatay Civici 2025-01-13 10:52:11 +03:00
parent 06ae612f3b
commit 8b8a5e2f45
4 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,7 @@
<script>
import EventBus from '@/app/AppEventBus';
import { $dt, updatePreset } from '@primevue/themes';
import { $dt, updatePreset, usePreset } from '@primevue/themes';
export default {
setup() {
@ -50,6 +50,7 @@ export default {
refreshACTokens: this.refreshACTokens,
saveTheme: this.saveTheme,
downloadTheme: this.downloadTheme,
activateTheme: this.activateTheme,
applyTheme: this.applyTheme,
applyFont: this.applyFont,
replaceColorPalette: this.replaceColorPalette
@ -194,6 +195,20 @@ export default {
},
toggleDarkMode() {
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
},
activateTheme(data) {
this.$appState.designer.theme = {
key: data.t_key,
name: data.t_name,
preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config)
};
usePreset(this.$appState.designer.theme.preset);
this.applyFont(this.$appState.designer.theme.config.fontFamily);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.replaceColorPalette();
this.refreshACTokens();
}
},
computed: {

15
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View File

@ -60,8 +60,6 @@
</template>
<script>
import { usePreset } from '@primevue/themes';
export default {
setup() {
const runtimeConfig = useRuntimeConfig();
@ -186,18 +184,7 @@ export default {
if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
this.$appState.designer.theme = {
key: data.t_key,
name: data.t_name,
preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config)
};
usePreset(this.$appState.designer.theme.preset);
this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.designerService.replaceColorPalette();
this.designerService.refreshACTokens();
this.designerService.activateTheme(data);
this.$appState.designer.activeView = 'editor';
}
},

8
apps/showcase/components/layout/designer/editor/DesignTokenField.vue
View File

@ -18,7 +18,10 @@
:showEmptyMessage="false"
:pt="{
pcInputText: {
root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-6': type === 'color' }]
root: [
'border text-zinc-950 dark:text-white rounded-lg py-2 px-2 w-full text-xs',
{ 'pr-6': type === 'color', 'border-red-500 dark:border-red-400 bg-red-50 dark:bg-red-500/30': invalid, 'border-surface-300 dark:border-surface-600': !invalid }
]
},
overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
listContainer: 'max-h-40 overflow-auto',
@ -219,6 +222,9 @@ export default {
},
inputId() {
return this.id + '_input';
},
invalid() {
return this.modelValue == null || this.modelValue.trim().length === 0 || this.modelValue.startsWith(this.componentKey);
}
}
};

4
apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
View File

@ -137,7 +137,7 @@ export default {
});
},
async migrate() {
const { error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
const { data, error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
method: 'PATCH',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
@ -150,6 +150,8 @@ export default {
} else {
this.status = 'updated';
this.missingTokens = [];
this.designerService.activateTheme(data);
}
}
}