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

Adjustments to API updates

pull/7024/head
Cagatay Civici 2024-12-27 23:17:25 +03:00
parent b76e39faa6
commit 1c7e4f9baf
6 changed files with 129 additions and 77 deletions
Show Stats 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" />
<template #footer>
<div v-if="$appState.designer.active.view === 'editor'" 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>
<DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
</template>
</Drawer>
</template>
@ -53,9 +36,10 @@ import { $dt } from '@primevue/themes';
export default {
provide() {
return {
designerUtils: {
designerService: {
refreshACTokens: this.refreshACTokens,
saveTheme: this.saveTheme
saveTheme: this.saveTheme,
downloadTheme: this.downloadTheme
}
};
},
@ -71,18 +55,9 @@ export default {
onHide() {
this.deferredTabs = true;
},
download() {
downloadTheme(theme) {
// 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) {
return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase();
},
@ -111,7 +86,6 @@ export default {
refreshACTokens() {
this.$appState.designer.theme.acTokens = [];
this.generateACTokens(null, this.$appState.designer.theme.preset);
console.log('refresh tokens');
},
openDashboard() {
this.$appState.designer.activeView = 'dashboard';

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

@ -1,7 +1,7 @@
<template>
<section class="mb-6">
<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 class="mb-6">
@ -96,28 +96,43 @@ export default {
document.body.classList.remove('material');
}
const { error } = await $fetch(this.designerApiBase + '/theme/create', {
const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
method: 'POST',
body: {
name: this.themeName,
preset: newPreset,
license_key: this.$appState.designer.licenseKey
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
}
}
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} 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,
preset: newPreset,
customTokens: [],
acTokens: []
};
this.replaceColorPalette();
usePreset(newPreset);
figma_tokens: this.figmaData,
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
}
}
});
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) {
@ -139,30 +154,22 @@ export default {
reader.readAsText(file);
},
async createThemeFromFigma() {
const { data: newPreset, error } = await $fetch(this.designerApiBase + '/theme/figma', {
method: 'POST',
body: {
name: this.themeName,
figma_tokens: this.figmaData,
license_key: this.$appState.designer.licenseKey
loadThemeEditor(t_key, preset) {
this.$appState.designer.theme = {
name: this.themeName,
key: t_key,
preset: preset,
customTokens: [],
acTokens: [],
config: {
baseFontSize: '14px',
fontFamily: 'Inter var'
}
});
};
this.replaceColorPalette();
usePreset(preset);
if (error) {
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';
}
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)" />
<i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
</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>
<button
type="button"
@ -68,7 +68,7 @@ export default {
designerApiBase: runtimeConfig.public.designerApiBase
};
},
inject: ['designerUtils'],
inject: ['designerService'],
data() {
return {
loading: false,
@ -100,7 +100,13 @@ export default {
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: {
async activate(silent) {
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) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
if (data) {
if (data.valid) {
if (!silent) {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
}
@ -152,20 +158,22 @@ export default {
}
},
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) {
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 {
this.$appState.designer.theme = {
key: data.t_key,
name: data.t_name,
preset: JSON.parse(data.preset),
preset: JSON.parse(data.t_preset),
config: JSON.parse(data.t_config),
customTokens: [],
acTokens: []
};
usePreset(this.$appState.designer.theme.preset);
this.designerUtils.refreshACTokens();
this.designerService.refreshACTokens();
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>
export default {
inject: ['designer'],
inject: ['designerService'],
methods: {
addToken() {
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;
});
designer.refreshACTokens();
designer.saveTheme();
this.designerService.refreshACTokens();
this.designerService.saveTheme();
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',
activeTab: '0',
theme: {
key: null,
name: null,
preset: null,
customTokens: [],
acTokens: []
acTokens: [],
config: null
},
themes: []
}