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

Refactor on AppDesigner

pull/6841/head
Cagatay Civici 2024-11-22 13:02:06 +03:00
parent 1f9df34b3f
commit e8695f61e9
7 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/showcase/components/landing/HeroSection.vue
View File

@ -6,7 +6,7 @@
Enhance your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier. Enhance your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
</p> </p>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<PrimeVueNuxtLink to="/setup" class="linkbox linkbox-primary"> <PrimeVueNuxtLink to="/setup" class="linkbox linkbox-primary" @click="onGetStartedClick">
<span>Get Started </span> <span>Get Started </span>
<i class="pi pi-arrow-right ms-4"></i> <i class="pi pi-arrow-right ms-4"></i>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
@ -514,6 +514,9 @@ export default {
this.isSlimMenu = !this.isSlimMenu; this.isSlimMenu = !this.isSlimMenu;
this.isSlimMenuSelected = this.isSlimMenu; this.isSlimMenuSelected = this.isSlimMenu;
}, },
onGetStartedClick() {
this.$appState.designer.active = false;
},
setChartData() { setChartData() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const borderColor = documentStyle.getPropertyValue('--p-content-border-color'); const borderColor = documentStyle.getPropertyValue('--p-content-border-color');

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

@ -1,6 +1,6 @@
<template> <template>
<Drawer <Drawer
v-model:visible="$appState.designerActive" v-model:visible="$appState.designer.active"
header="Theme Designer" header="Theme Designer"
position="right" position="right"
class="designer !w-screen md:!w-[48rem]" class="designer !w-screen md:!w-[48rem]"
@ -14,7 +14,7 @@
footer: '!p-5' footer: '!p-5'
}" }"
> >
<Tabs v-model:value="activeTab" :lazy="deferredTabs"> <Tabs v-model:value="$appState.designer.activeTab" :lazy="deferredTabs">
<TabList> <TabList>
<Tab value="0">Base</Tab> <Tab value="0">Base</Tab>
<Tab value="1">Primitive</Tab> <Tab value="1">Primitive</Tab>
@ -85,12 +85,12 @@
<TabPanels class="!px-0"> <TabPanels class="!px-0">
<TabPanel value="cs-0"> <TabPanel value="cs-0">
<form @keydown="onKeyDown"> <form @keydown="onKeyDown">
<DesignCS :value="preset.semantic.colorScheme.light" /> <DesignCS :value="$appState.designer.preset.semantic.colorScheme.light" />
</form> </form>
</TabPanel> </TabPanel>
<TabPanel value="cs-1"> <TabPanel value="cs-1">
<form @keydown="onKeyDown"> <form @keydown="onKeyDown">
<DesignCS :value="preset.semantic.colorScheme.dark" /> <DesignCS :value="$appState.designer.preset.semantic.colorScheme.dark" />
</form> </form>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
@ -105,7 +105,7 @@
<TabPanel value="4"> <TabPanel value="4">
<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> <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"> <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
<li v-for="(token, index) of customTokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2"> <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">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<label class="flex items-center gap-2 flex-auto"> <label class="flex items-center gap-2 flex-auto">
<span class="text-sm">Name</span> <span class="text-sm">Name</span>
@ -134,7 +134,7 @@
Add New Add New
</button> </button>
<button <button
v-if="customTokens.length" v-if="$appState.designer.customTokens.length"
type="button" type="button"
@click="saveTokens" @click="saveTokens"
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" 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"
@ -157,7 +157,7 @@
Download Download
</button> </button>
<button <button
v-if="activeTab !== '0'" v-if="$appState.designer.activeTab !== '0'"
type="button" type="button"
@click="apply" @click="apply"
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" 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"
@ -188,41 +188,42 @@ const presets = {
export default { export default {
provide() { provide() {
return { return {
$preset: computed(() => this.preset), $preset: computed(() => this.$appState.designer.preset)
$acTokens: computed(() => this.acTokens)
}; };
}, },
data() { data() {
return { return {
activeTab: '0',
deferredTabs: true, deferredTabs: true,
preset: {
primitive: Aura.primitive,
semantic: Aura.semantic
},
presetOptions: [ presetOptions: [
{ label: 'Aura', value: 'Aura' }, { label: 'Aura', value: 'Aura' },
{ label: 'Material', value: 'Material' }, { label: 'Material', value: 'Material' },
{ label: 'Lara', value: 'Lara' }, { label: 'Lara', value: 'Lara' },
{ label: 'Nora', value: 'Nora' } { label: 'Nora', value: 'Nora' }
], ]
customTokens: [],
acTokens: []
}; };
}, },
mounted() { mounted() {
this.replaceColorPalette(); if (!this.$appState.designer.preset) {
this.generateACTokens(null, this.preset); const defaultPreset = presets.Aura;
this.$appState.designer.preset = {
primitive: defaultPreset.primitive,
semantic: defaultPreset.semantic
};
this.replaceColorPalette();
this.generateACTokens(null, this.$appState.designer.preset);
}
}, },
methods: { methods: {
apply() { apply() {
this.saveTheme(); this.saveTheme();
updatePreset(this.preset); updatePreset(this.$appState.designer.preset);
EventBus.emit('theme-palette-change'); EventBus.emit('theme-palette-change');
}, },
download() { download() {
const basePreset = this.$appState.preset; const basePreset = this.$appState.preset;
const theme = JSON.stringify(this.preset, null, 4).replace(/"([^"]+)":/g, '$1:'); const theme = JSON.stringify(this.$appState.designer.preset, null, 4).replace(/"([^"]+)":/g, '$1:');
const textContent = `import { createApp } from "vue"; const textContent = `import { createApp } from "vue";
import PrimeVue from "primevue/config"; import PrimeVue from "primevue/config";
import {${basePreset}} from "@primevue/themes/${basePreset.toLowerCase()}"; import {${basePreset}} from "@primevue/themes/${basePreset.toLowerCase()}";
@ -264,31 +265,29 @@ app.mount("#app");
document.body.classList.remove('material'); document.body.classList.remove('material');
} }
this.preset = { this.$appState.designer.preset = {
primitive: newPreset.primitive, primitive: newPreset.primitive,
semantic: newPreset.semantic semantic: newPreset.semantic
}; };
this.preset.semantic.primary = this.preset.primitive.emerald; this.replaceColorPalette();
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
usePreset(this.preset); usePreset(this.$appState.designer.preset);
}, },
saveTheme() { saveTheme() {
const localState = { const localState = {
themes: { themes: {
defaultTheme: { defaultTheme: {
preset: this.preset, preset: this.$appState.designer.preset,
customTokens: this.customTokens customTokens: this.$appState.designer.customTokens
} }
} }
}; };
localStorage.setItem(this.$appState.designerKey, JSON.stringify(localState)); localStorage.setItem(this.$appState.designer.key, JSON.stringify(localState));
}, },
loadFromLocalStorage() { loadFromLocalStorage() {
const localState = localStorage.getItem(this.$appState.designerKey); const localState = localStorage.getItem(this.$appState.designer.key);
if (localState) { if (localState) {
const parsedLocalState = JSON.parse(localState); const parsedLocalState = JSON.parse(localState);
@ -297,29 +296,31 @@ app.mount("#app");
const defaultTheme = parsedLocalState.themes.defaultTheme; const defaultTheme = parsedLocalState.themes.defaultTheme;
if (defaultTheme.preset) { if (defaultTheme.preset) {
this.preset = defaultTheme.preset; this.$appState.designer.preset = defaultTheme.preset;
usePreset(this.preset); usePreset(this.$appState.designer.preset);
} }
if (defaultTheme.customTokens) { if (defaultTheme.customTokens) {
this.customTokens = defaultTheme.customTokens; this.$appState.designer.customTokens = defaultTheme.customTokens;
this.refreshACTokens(); this.refreshACTokens();
} }
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer.', life: 3000 });
} }
} else {
this.$toast.add({ severity: 'warn', summary: 'Error', detail: 'No saved theme found.', life: 3000 });
} }
}, },
addToken() { addToken() {
this.customTokens = [...this.customTokens, ...[{}]]; this.$appState.designer.customTokens = [...this.$appState.designer.customTokens, ...[{}]];
}, },
removeToken(index) { removeToken(index) {
this.customTokens.splice(index, 1); this.$appState.designer.customTokens.splice(index, 1);
}, },
saveTokens() { saveTokens() {
this.preset.extend = {}; this.$appState.designer.preset.extend = {};
this.customTokens.forEach((token) => { this.$appState.designer.customTokens.forEach((token) => {
this.preset.extend[this.transformTokenName(token.name)] = token.value; this.$appState.designer.preset.extend[this.transformTokenName(token.name)] = token.value;
}); });
this.refreshACTokens(); this.refreshACTokens();
@ -327,9 +328,9 @@ app.mount("#app");
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
}, },
replaceColorPalette() { replaceColorPalette() {
this.preset.semantic.primary = this.preset.primitive.emerald; this.$appState.designer.preset.semantic.primary = this.$appState.designer.preset.primitive.emerald;
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate }; this.$appState.designer.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc }; this.$appState.designer.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.preset.primitive.zinc };
}, },
transformTokenName(name) { transformTokenName(name) {
if (name && name.trim().length) { if (name && name.trim().length) {
@ -365,14 +366,14 @@ app.mount("#app");
const tokenValue = $dt(tokenName).value; const tokenValue = $dt(tokenName).value;
const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName); const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
this.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() { refreshACTokens() {
this.acTokens = []; this.$appState.designer.acTokens = [];
this.generateACTokens(null, this.preset); this.generateACTokens(null, this.$appState.designer.preset);
}, },
onKeyDown(event) { onKeyDown(event) {
if (event.code === 'Enter' || event.code === 'NumpadEnter') { if (event.code === 'Enter' || event.code === 'NumpadEnter') {

2
apps/showcase/components/layout/AppTopBar.vue
View File

@ -248,7 +248,7 @@ export default {
this.container = el; this.container = el;
}, },
toggleDesigner() { toggleDesigner() {
this.$appState.designerActive = !this.$appState.designerActive; this.$appState.designer.active = !this.$appState.designer.active;
} }
} }
}; };

3
apps/showcase/components/layout/designer/DesignTokenField.vue
View File

@ -58,7 +58,6 @@ export default {
default: undefined default: undefined
} }
}, },
inject: ['$acTokens'],
data() { data() {
return { return {
id: null, id: null,
@ -80,7 +79,7 @@ export default {
const query = event.query; const query = event.query;
if (query.startsWith('{')) { if (query.startsWith('{')) {
this.items = this.$acTokens.filter((t) => t.label.startsWith(query)); this.items = this.$appState.designer.acTokens.filter((t) => t.label.startsWith(query));
} else { } else {
this.items = []; this.items = [];
} }

4
apps/showcase/pages/index.vue
View File

@ -10,6 +10,7 @@
<BlockSection /> <BlockSection />
<TemplateSection /> <TemplateSection />
<FooterSection /> <FooterSection />
<Toast />
</div> </div>
</template> </template>
@ -34,6 +35,9 @@ export default {
default: null default: null
} }
}, },
created() {
this.$appState.designer.active = false;
},
mounted() { mounted() {
let afId = this.$route.query['af_id']; let afId = this.$route.query['af_id'];

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

@ -14,8 +14,14 @@ const $appState = {
newsActive: false, newsActive: false,
announcement: null, announcement: null,
storageKey: 'primevue', storageKey: 'primevue',
designerKey: 'primevue-designer-theme', designer: {
designerActive: false key: 'primevue-designer-theme',
active: false,
activeTab: '0',
preset: null,
customTokens: [],
acTokens: []
}
}); });
} }
}; };

2
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -313,7 +313,7 @@ export default {
this.clicked = false; this.clicked = false;
this.focusedOptionIndex = -1; this.focusedOptionIndex = -1;
isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput?.$el);
}; };
setTimeout(() => { setTimeout(() => {