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

Refactored designer

pull/7024/head
Cagatay Civici 2024-12-28 12:43:15 +03:00
parent 686eba4ea1
commit b8ef0922f5
3 changed files with 79 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,27 +65,30 @@ export default {
this.deferredTabs = true; this.deferredTabs = true;
}, },
async downloadTheme(theme) { async downloadTheme(theme) {
try { if (!this.$appState.designer.licenseKey) {
const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, { this.$toast.add({ severity: 'error', summary: 'Not Available', detail: 'A license is required to download', life: 3000 });
responseType: 'blob' } else {
}); try {
const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, {
responseType: 'blob'
});
if (response.error) { if (response.error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else { } else {
const blobUrl = window.URL.createObjectURL(response); const blobUrl = window.URL.createObjectURL(response);
const link = document.createElement('a'); const link = document.createElement('a');
link.href = blobUrl; link.href = blobUrl;
link.download = theme.t_name + '.zip'; link.download = theme.t_name + '.zip';
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl); window.URL.revokeObjectURL(blobUrl);
}
} catch (err) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
} }
} catch (err) {
console.log(err);
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
} }
}, },
async updateTheme(theme) { async updateTheme(theme) {
@ -104,7 +107,10 @@ export default {
} }
}, },
applyTheme(theme) { applyTheme(theme) {
this.updateTheme(theme); if (this.$appState.designer.licenseKey) {
this.updateTheme(theme);
}
updatePreset(theme.preset); updatePreset(theme.preset);
EventBus.emit('theme-palette-change'); EventBus.emit('theme-palette-change');
}, },

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

@ -96,43 +96,55 @@ export default {
document.body.classList.remove('material'); document.body.classList.remove('material');
} }
const { data, error } = await $fetch(this.designerApiBase + '/theme/create', { if (this.$appState.designer.licenseKey) {
method: 'POST', const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
body: { method: 'POST',
name: this.themeName, body: {
preset: newPreset, name: this.themeName,
license_key: this.$appState.designer.licenseKey, preset: newPreset,
config: { license_key: this.$appState.designer.licenseKey,
font_size: '14px', config: {
font_family: 'Inter var' font_size: '14px',
font_family: 'Inter var'
}
} }
} });
});
if (error) { if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
}
} else { } else {
this.loadThemeEditor(data.t_key, newPreset); this.loadThemeEditor('trial', newPreset);
} }
}, },
async createThemeFromFigma() { async createThemeFromFigma() {
const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', { if (this.figmaData) {
method: 'POST', if (this.$appState.designer.licenseKey) {
body: { const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
name: this.themeName, method: 'POST',
figma_tokens: this.figmaData, body: {
license_key: this.$appState.designer.licenseKey, name: this.themeName,
config: { figma_tokens: this.figmaData,
font_size: '14px', license_key: this.$appState.designer.licenseKey,
font_family: 'Inter var' config: {
} font_size: '14px',
} font_family: 'Inter var'
}); }
}
});
if (error) { if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
}
} else {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
}
} else { } else {
this.loadThemeEditor(data.t_key, newPreset); this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
} }
}, },
onFileSelect(event) { onFileSelect(event) {

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

@ -1,16 +1,17 @@
<template> <template>
<div class="text-lg font-semibold mb-2">License Key</div> <div class="text-lg font-semibold mb-2">License Key</div>
<span class="block text-muted-color leading-6 mb-4" <span class="block text-muted-color leading-6 mb-4"
>A license can be purchased from PrimeStore, if you do not have a license key, you are still able to use the Designer in free tier. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span >A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer with limited features. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme
Designer.</span
> >
<form @submit.prevent class="flex gap-4"> <form @submit.prevent class="flex gap-4">
<input v-model="$appState.designer.licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" /> <input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
<button <button
type="button" type="button"
@click="activate(false)" @click="activate(false)"
icon="pi pi-download" icon="pi pi-download"
:disabled="!$appState.designer.licenseKey" :disabled="!licenseKey"
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 disabled:opacity-60" class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
> >
Activate Activate
</button> </button>
@ -71,6 +72,7 @@ export default {
inject: ['designerService'], inject: ['designerService'],
data() { data() {
return { return {
licenseKey: null,
loading: false, loading: false,
currentTheme: null, currentTheme: null,
confirmDialogVisible: false, confirmDialogVisible: false,
@ -115,7 +117,7 @@ export default {
const keyValue = localStorage.getItem(this.$appState.designer.localStoreKey); const keyValue = localStorage.getItem(this.$appState.designer.localStoreKey);
if (keyValue) { if (keyValue) {
this.$appState.designer.licenseKey = keyValue; this.licenseKey = keyValue;
this.activate(true); this.activate(true);
} }
} else { } else {
@ -124,13 +126,14 @@ export default {
}, },
methods: { methods: {
async activate(silent) { async activate(silent) {
this.loading = true; const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.licenseKey);
const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.$appState.designer.licenseKey);
if (error) { if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else { } else {
if (data.valid) { if (data.valid) {
this.$appState.designer.licenseKey = this.licenseKey;
if (!silent) { if (!silent) {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
} }
@ -142,13 +145,12 @@ export default {
this.$appState.designer.themes = []; this.$appState.designer.themes = [];
} }
} }
this.loading = false;
}, },
openNewTheme() { openNewTheme() {
this.$appState.designer.activeView = 'create_theme'; this.$appState.designer.activeView = 'create_theme';
}, },
async loadThemes() { async loadThemes() {
this.loading = true;
const { data, error } = await $fetch(this.designerApiBase + '/theme/list/' + this.$appState.designer.licenseKey); const { data, error } = await $fetch(this.designerApiBase + '/theme/list/' + this.$appState.designer.licenseKey);
if (error) { if (error) {
@ -156,6 +158,8 @@ export default {
} else { } else {
this.$appState.designer.themes = data; this.$appState.designer.themes = data;
} }
this.loading = false;
}, },
async loadTheme(theme) { async loadTheme(theme) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key); const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key);