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

Adjustments to API updates

Browse source
This commit is contained in:
Cagatay Civici 2024-12-27 23:17:25 +03:00
parent b76e39faa6
commit 1c7e4f9baf
6 changed files with 129 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,24 +25,7 @@
<DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" /> <DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
<template #footer> <template #footer>
<div v-if="$appState.designer.active.view === 'editor'" class="flex justify-between gap-2"> <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
<button
type="button"
@click="download"
icon="pi pi-download"
class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Download
</button>
<button
type="button"
@click="apply"
icon="pi pi-download"
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"
>
Apply
</button>
</div>
</template> </template>
</Drawer> </Drawer>
</template> </template>
@ -53,9 +36,10 @@ import { $dt } from '@primevue/themes';
export default { export default {
provide() { provide() {
return { return {
designerUtils: { designerService: {
refreshACTokens: this.refreshACTokens, refreshACTokens: this.refreshACTokens,
saveTheme: this.saveTheme saveTheme: this.saveTheme,
downloadTheme: this.downloadTheme
} }
}; };
}, },
@ -71,18 +55,9 @@ export default {
onHide() { onHide() {
this.deferredTabs = true; this.deferredTabs = true;
}, },
download() { downloadTheme(theme) {
// TODO: Fetch from endpoint // TODO: Fetch from endpoint
}, },
apply() {
saveTheme();
updatePreset(this.$appState.designer.theme.preset);
EventBus.emit('theme-palette-change');
},
saveTheme() {
// TODO: Save to DB or Local Storage
console.log('theme saved');
},
camelCaseToDotCase(name) { camelCaseToDotCase(name) {
return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase(); return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase();
}, },
@ -111,7 +86,6 @@ export default {
refreshACTokens() { refreshACTokens() {
this.$appState.designer.theme.acTokens = []; this.$appState.designer.theme.acTokens = [];
this.generateACTokens(null, this.$appState.designer.theme.preset); this.generateACTokens(null, this.$appState.designer.theme.preset);
console.log('refresh tokens');
}, },
openDashboard() { openDashboard() {
this.$appState.designer.activeView = 'dashboard'; this.$appState.designer.activeView = 'dashboard';

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

@ -1,7 +1,7 @@
<template> <template>
<section class="mb-6"> <section class="mb-6">
<span class="block text-lg font-semibold mb-2">Theme Name</span> <span class="block text-lg font-semibold mb-2">Theme Name</span>
<input v-model="themeName" type="text" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" /> <input v-model="themeName" type="text" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" maxlength="25" />
</section> </section>
<section class="mb-6"> <section class="mb-6">
@ -96,28 +96,43 @@ export default {
document.body.classList.remove('material'); document.body.classList.remove('material');
} }
const { error } = await $fetch(this.designerApiBase + '/theme/create', { const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
method: 'POST', method: 'POST',
body: { body: {
name: this.themeName, name: this.themeName,
preset: newPreset, preset: newPreset,
license_key: this.$appState.designer.licenseKey license_key: this.$appState.designer.licenseKey,
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 { } else {
this.$appState.designer.theme = { this.loadThemeEditor(data.t_key, newPreset);
}
},
async createThemeFromFigma() {
const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
method: 'POST',
body: {
name: this.themeName, name: this.themeName,
preset: newPreset, figma_tokens: this.figmaData,
customTokens: [], license_key: this.$appState.designer.licenseKey,
acTokens: [] config: {
}; font_size: '14px',
this.replaceColorPalette(); font_family: 'Inter var'
usePreset(newPreset); }
}
});
this.$appState.designer.activeView = 'editor'; if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
} }
}, },
onFileSelect(event) { onFileSelect(event) {
@ -139,30 +154,22 @@ export default {
reader.readAsText(file); reader.readAsText(file);
}, },
async createThemeFromFigma() { loadThemeEditor(t_key, preset) {
const { data: newPreset, error } = await $fetch(this.designerApiBase + '/theme/figma', { this.$appState.designer.theme = {
method: 'POST', name: this.themeName,
body: { key: t_key,
name: this.themeName, preset: preset,
figma_tokens: this.figmaData, customTokens: [],
license_key: this.$appState.designer.licenseKey acTokens: [],
config: {
baseFontSize: '14px',
fontFamily: 'Inter var'
} }
}); };
this.replaceColorPalette();
usePreset(preset);
if (error) { this.$appState.designer.activeView = 'editor';
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.$appState.designer.theme = {
name: this.themeName,
preset: newPreset,
customTokens: [],
acTokens: []
};
this.replaceColorPalette();
usePreset(newPreset);
this.$appState.designer.activeView = 'editor';
}
} }
} }
}; };

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

@ -40,7 +40,7 @@
<input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 py-1" maxlength="100" @blur="renameTheme(theme)" /> <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 py-1" maxlength="100" @blur="renameTheme(theme)" />
<i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i> <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
</div> </div>
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.last_updated) }}</span> <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
</div> </div>
<button <button
type="button" type="button"
@ -68,7 +68,7 @@ export default {
designerApiBase: runtimeConfig.public.designerApiBase designerApiBase: runtimeConfig.public.designerApiBase
}; };
}, },
inject: ['designerUtils'], inject: ['designerService'],
data() { data() {
return { return {
loading: false, loading: false,
@ -100,7 +100,13 @@ export default {
this.duplicateTheme(this.currentTheme); this.duplicateTheme(this.currentTheme);
} }
}, },
{ label: 'Download', icon: 'pi pi-download' } {
label: 'Download',
icon: 'pi pi-download',
command: () => {
this.designerService.downloadTheme(this.currentTheme);
}
}
] ]
}; };
}, },
@ -119,12 +125,12 @@ export default {
methods: { methods: {
async activate(silent) { async activate(silent) {
this.loading = true; this.loading = true;
const { data, error } = await $fetch(this.designerApiBase + '/license/' + this.$appState.designer.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) { if (data.valid) {
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 });
} }
@ -152,20 +158,22 @@ export default {
} }
}, },
async loadTheme(theme) { async loadTheme(theme) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/' + theme.t_key); const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key);
if (error) { if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Code: ' + error.code, life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else { } else {
this.$appState.designer.theme = { this.$appState.designer.theme = {
key: data.t_key,
name: data.t_name, name: data.t_name,
preset: JSON.parse(data.preset), preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config),
customTokens: [], customTokens: [],
acTokens: [] acTokens: []
}; };
usePreset(this.$appState.designer.theme.preset); usePreset(this.$appState.designer.theme.preset);
this.designerUtils.refreshACTokens(); this.designerService.refreshACTokens();
this.$appState.designer.activeView = 'editor'; this.$appState.designer.activeView = 'editor';
} }
}, },

61
apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div class="flex justify-between gap-2">
<button
type="button"
@click="download"
icon="pi pi-download"
class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Download
</button>
<button
type="button"
@click="apply"
icon="pi pi-download"
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"
>
Apply
</button>
</div>
</template>
<script>
import EventBus from '@/app/AppEventBus';
import { updatePreset } from '@primevue/themes';
export default {
setup() {
const runtimeConfig = useRuntimeConfig();
return {
designerApiBase: runtimeConfig.public.designerApiBase
};
},
inject: ['designerService'],
methods: {
download() {
this.designerService.downloadTheme(this.$appState.desiger.theme);
},
apply() {
this.updateTheme();
updatePreset(this.$appState.designer.theme.preset);
EventBus.emit('theme-palette-change');
},
async updateTheme() {
const { error } = await $fetch(this.designerApiBase + '/theme/update', {
method: 'POST',
body: {
key: this.$appState.designer.theme.key,
preset: this.$appState.designer.theme.preset,
config: this.$appState.designer.theme.config,
license_key: this.$appState.designer.licenseKey
}
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
}
}
}
};
</script>

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

@ -42,7 +42,7 @@
<script> <script>
export default { export default {
inject: ['designer'], inject: ['designerService'],
methods: { methods: {
addToken() { addToken() {
this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]]; this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]];
@ -56,8 +56,8 @@ export default {
this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value; this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value;
}); });
designer.refreshACTokens(); this.designerService.refreshACTokens();
designer.saveTheme(); 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 });
}, },

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

@ -21,10 +21,12 @@ const $appState = {
activeView: 'dashboard', activeView: 'dashboard',
activeTab: '0', activeTab: '0',
theme: { theme: {
key: null,
name: null, name: null,
preset: null, preset: null,
customTokens: [], customTokens: [],
acTokens: [] acTokens: [],
config: null
}, },
themes: [] themes: []
} }