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

Merge pull request #7277 from cagataycivici/master 

Designer Updates
pull/7278/head
Cagatay Civici 2025-02-19 00:08:54 +03:00 committed by GitHub
parent acb9a5e888 d9793fd5ae
commit df126faa28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 189 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/assets/styles/layout/_core.scss
View File

@ -5,10 +5,6 @@ html {
line-height: normal;
}
.material {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
margin: 0px;
min-height: 100%;

93
apps/showcase/assets/styles/layout/_designer.scss
View File

@ -13,6 +13,23 @@
cursor: pointer;
}
input:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 0px;
}
button:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 2px;
}
.p-icon,
.pi {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
}
[type='color']::-webkit-color-swatch {
border-radius: 4px;
width: 24px;
@ -25,15 +42,15 @@
}
&.p-drawer {
background: light-dark(var(--p-surface-0), var(--p-surface-900));
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
color: light-dark(#09090b, #ffffff);
background: var(--overlay-background);
border-color: var(--border-color);
color: var(--high-contrast-text-color);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.p-fieldset {
background: transparent;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
border-radius: 4px;
color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem;
@ -56,7 +73,11 @@
background: transparent;
border: 0 none;
border-radius: 4px;
outline-color: transparent;
&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}
.p-fieldset-toggle-icon {
@ -84,37 +105,43 @@
.p-tablist-tab-list {
background: transparent;
border-style: solid;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
border-width: 0 0 1px 0;
}
.p-tab {
background: transparent;
border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
color: light-dark(var(--p-surface-500), var(--p-surface-400));
border-color: var(--border-color);
color: var(--text-secondary-color);
padding: 1rem 1.125rem;
font-weight: 600;
transition: none;
margin: 0 0 -1px 0;
&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
background: transparent;
border-color: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0));
color: var(--high-contrast-text-color);
}
.p-tab-active {
background: transparent;
border-color: transparent;
color: light-dark(#09090b, #ffffff);
border-color: var(--high-contrast-text-color);
color: var(--high-contrast-text-color);
}
.p-tablist-active-bar {
display: none;
inset-block-end: -1px;
height: 1px;
background: light-dark(#09090b, #ffffff);
background: var(--high-contrast-text-color);
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
@ -123,23 +150,35 @@
color: inherit;
padding: 0.875rem 0 1.125rem 0;
}
.p-tabpanel {
&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 0;
}
}
}
.p-accordion {
.p-accordionpanel {
border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
}
.p-accordionheader {
padding: 1.125rem;
color: light-dark(var(--p-surface-500), var(--p-surface-400));
color: var(--text-secondary-color);
background: transparent;
border-width: 0;
border-color: unset;
font-weight: 600;
border-radius: 4px;
transition: none;
&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}
.p-accordionpanel:first-child>.p-accordionheader {
@ -159,13 +198,13 @@
}
.p-accordionheader-toggle-icon {
color: light-dark(var(--p-surface-500), var(--p-surface-400));
color: var(--text-secondary-color);
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
background: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0));
color: var(--text-color);
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
@ -175,7 +214,7 @@
.p-accordioncontent-content {
border-width: 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
background-color: transparent;
color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem;
@ -184,21 +223,23 @@
.p-fileupload-choose-button {
padding: 0.5rem 0.75rem;
background: light-dark(#09090b, #ffffff);
border-color: light-dark(#09090b, #ffffff);
color: light-dark(#ffffff, #000000);
background: var(--designer-primary-color);
border-color: var(--designer-primary-color);
color: var(--designer-primary-contrast-color);
cursor: pointer;
font-weight: medium;
border-radius: 4px;
transition: background 0.2s;
transition: background-color 0.2s;
&:hover {
background: light-dark(#27272a, #f3f4f6);
border-color: light-dark(#27272a, #f3f4f6);
&:enabled:hover,
&:enabled:active {
background: var(--designer-primary-emphasis-color);
border-color: var(--designer-primary-emphasis-color);
}
&:focus-visible {
outline: 1px solid light-dark(#09090b, #ffffff);
&:enabled:active,
&:enabled:focus-visible {
outline: 1px solid var(--designer-primary-color);
outline-offset: 2px;
box-shadow: none;
}

4
apps/showcase/assets/styles/layout/variables/main/_dark.scss
View File

@ -25,4 +25,8 @@
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--text-secondary-color);
--designer-primary-color: #ffffff;
--designer-primary-emphasis-color: #f3f4f6;
--designer-primary-contrast-color: #000000;
--designer-focus-outline-color: #ffffff;
}

4
apps/showcase/assets/styles/layout/variables/main/_light.scss
View File

@ -25,4 +25,8 @@
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--text-secondary-color);
--designer-primary-color: #09090b;
--designer-primary-emphasis-color: #27272a;
--designer-primary-contrast-color: #ffffff;
--designer-focus-outline-color: #09090b;
}

7
apps/showcase/components/layout/AppConfigurator.vue
View File

@ -306,13 +306,6 @@ export default {
const preset = presets[value];
const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
if (value === 'Material') {
document.body.classList.add('material');
this.$primevue.config.ripple = true;
} else {
document.body.classList.remove('material');
}
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
},
onRTLChange(value) {

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

@ -1,5 +1,5 @@
<template>
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" blockScroll @after-show="onShow" @after-hide="onHide">
<template #container="{ closeCallback }">
<div class="flex items-center justify-between p-5">
<div class="flex items-center gap-2">
@ -34,7 +34,7 @@
<script>
import EventBus from '@/app/AppEventBus';
import { $dt, updatePreset, usePreset } from '@primeuix/themes';
import { $dt, usePreset } from '@primeuix/themes';
export default {
setup() {
@ -53,7 +53,7 @@ export default {
activateTheme: this.activateTheme,
applyTheme: this.applyTheme,
applyFont: this.applyFont,
replaceColorPalette: this.replaceColorPalette
resolveColor: this.resolveColor
}
};
},
@ -140,9 +140,10 @@ export default {
applyTheme(theme) {
if (this.$appState.designer.verified) {
this.saveTheme(theme);
this.refreshACTokens();
}
updatePreset(theme.preset);
usePreset(theme.preset);
EventBus.emit('theme-palette-change');
},
camelCaseToDotCase(name) {
@ -163,7 +164,7 @@ export default {
const regex = /\.\d+$/;
const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
const tokenValue = $dt(tokenName).value;
const tokenValue = obj[key];
const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
this.$appState.designer.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
@ -207,11 +208,6 @@ export default {
// silent fail as some fonts may have not all the font weights
}
},
replaceColorPalette() {
this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
},
toggleDarkMode() {
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
},
@ -226,7 +222,6 @@ export default {
usePreset(this.$appState.designer.theme.preset);
this.applyFont(this.$appState.designer.theme.config.font_family);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
this.replaceColorPalette();
this.refreshACTokens();
},
getCookie(name) {
@ -241,6 +236,14 @@ export default {
}
return null;
},
resolveColor(token) {
if (token.startsWith('{') && token.endsWith('}')) {
let cssVariable = $dt(token).variable.slice(4, -1);
return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
} else {
return token;
}
}
},
computed: {

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

@ -98,14 +98,10 @@ export default {
},
methods: {
async createThemeFromPreset() {
const newPreset = presets[this.basePreset];
if (this.basePreset === 'Material') {
document.body.classList.add('material');
this.$primevue.config.ripple = true;
if (this.themeName == null || !this.themeName.trim().length) {
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
} else {
document.body.classList.remove('material');
}
const newPreset = presets[this.basePreset];
if (this.$appState.designer.verified) {
const { data, error } = await $fetch(this.designerApiUrl + '/theme/create', {
@ -118,6 +114,7 @@ export default {
name: this.themeName,
preset: newPreset,
project: 'primevue',
base: this.basePreset,
config: {
font_size: '14px',
font_family: 'Inter var'
@ -133,8 +130,12 @@ export default {
} else {
this.loadThemeEditor('trial', newPreset);
}
}
},
async createThemeFromFigma() {
if (this.themeName == null || !this.themeName.trim().length) {
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Name is required', life: 3000 });
} else {
if (this.figmaData) {
if (this.$appState.designer.verified) {
const { data, error } = await $fetch(this.designerApiUrl + '/theme/figma', {
@ -147,6 +148,7 @@ export default {
name: this.themeName,
figma_tokens: this.figmaData,
project: 'primevue',
base: 'Figma',
config: {
font_size: '14px',
font_family: 'Inter var'
@ -169,6 +171,7 @@ export default {
} else {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
}
}
},
onFileSelect(event) {
const file = event.files[0];
@ -199,10 +202,13 @@ export default {
font_family: 'Inter var'
}
};
this.designerService.replaceColorPalette();
this.designerService.applyFont('Inter var');
document.documentElement.style.fontSize = '14px';
usePreset(preset);
this.designerService.refreshACTokens();
this.$appState.designer.activeTab = '0';
this.$appState.designer.activeView = 'editor';
}
}

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

@ -6,11 +6,17 @@
</div>
<div class="text-lg font-semibold mb-2">Authenticate</div>
<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 experience the Designer in trial mode. In trial mode, downloads, figma to code, migration assistant and cloud storage are not available.
<NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
<div v-if="!$appState.designer.verified">
<span class="block leading-6 mb-4"
>Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant. <NuxtLink to="/designer" class="doc-link">Discover</NuxtLink> more about the
Theme Designer by visiting the detailed <NuxtLink to="/designer/guide" class="doc-link">documentation</NuxtLink></span
>
<span class="block text-muted-color leading-6 mb-4">License key and pass key are available at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>.</span>
<span class="block leading-6 mb-4"
>A license can be purchased from <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>, if you do not have a license key, you are still able to experience the Designer in trial
mode. Note that in trial mode, downloads, figma to code, migration assistant and cloud storage are not available.</span
>
<span class="block leading-6 mb-4">Sign-in at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a> to retrieve your license key along with the pass key.</span>
</div>
<form v-if="!$appState.designer.verified" @submit.prevent class="flex gap-4">
<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" placeholder="License Key" />
<input v-model="otp" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700" placeholder="Pass Key" />
@ -40,7 +46,7 @@
]"
@click="openNewTheme"
>
<i class="pi pi-plus !text-2xl"></i>
<i class="pi pi-plus"></i>
</button>
<template v-if="loading">
<Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
@ -57,8 +63,8 @@
</button>
<div class="flex flex-col items-center gap-1">
<div class="group flex items-center gap-2 relative">
<input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center" 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>
<input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center pr-4" maxlength="100" @blur="renameTheme(theme)" />
<i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px"></i>
</div>
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
</div>
@ -189,8 +195,6 @@ export default {
this.currentTheme = null;
usePreset(Aura);
document.body.classList.remove('material');
this.$primevue.config.ripple = false;
}
},
openNewTheme() {
@ -227,6 +231,7 @@ export default {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
this.designerService.activateTheme(data);
this.$appState.designer.activeTab = '0';
this.$appState.designer.activeView = 'editor';
}
},

3
apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="flex flex-1 border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: color }" :title="color"></div>
<div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: designerService.resolveColor(color) }" :title="color"></div>
</div>
</template>
<script>
export default {
inject: ['designerService'],
props: {
value: {
type: Object,

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

@ -2,7 +2,7 @@
<div class="group">
<div class="flex justify-between justify-items-center">
<label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
<button v-if="switchable" type="button" @click="transfer">
<button v-if="switchable" type="button" @click="transfer" tabindex="-1">
<i class="pi pi-sort-alt !text-xs text-zinc-500 dark:text-white/50 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i>
</button>
</div>
@ -10,6 +10,7 @@
<AutoComplete
:modelValue="modelValue"
@input="onInput"
@blur="onBlur"
:inputId="inputId"
:suggestions="items"
@complete="search"
@ -34,7 +35,7 @@
<template #option="slotProps">
<div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4 px-2">
<span>{{ slotProps.option.token }}</span>
<div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: slotProps.option.variable }"></div>
<div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: designerService.resolveColor(slotProps.option.value) }"></div>
<div v-else class="text-xs max-w-16 text-ellipsis whitespace-nowrap overflow-hidden">
{{ slotProps.option.value }}
</div>
@ -47,11 +48,12 @@
</template>
<script>
import { uuid } from '@primeuix/utils';
import { $dt } from '@primeuix/themes';
import { uuid } from '@primeuix/utils';
export default {
emits: ['update:modelValue'],
inject: ['designerService'],
props: {
label: {
type: String,
@ -212,6 +214,9 @@ export default {
delete current[lastKey];
return true;
},
onBlur() {
this.designerService.refreshACTokens();
}
},
computed: {

3
apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
View File

@ -28,6 +28,8 @@
</template>
<script>
import { usePreset } from '@primeuix/themes';
export default {
inject: ['designerService'],
data() {
@ -61,6 +63,7 @@ export default {
});
this.designerService.saveTheme(this.$appState.designer.theme);
usePreset(this.$appState.designer.theme.preset);
this.designerService.refreshACTokens();
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
},

6
apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue
View File

@ -4,7 +4,7 @@
<section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm capitalize block w-20">{{ key }}</span>
<input :value="$appState.designer.theme.preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
<input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" @blur="onBlur" />
</div>
<DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
</section>
@ -16,9 +16,13 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['designerService'],
methods: {
onColorChange(event, color) {
this.$appState.designer.theme.preset.primitive[color] = palette(event.target.value);
},
onBlur() {
this.designerService.refreshACTokens();
}
}
};

6
apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
View File

@ -3,7 +3,7 @@
<section class="flex justify-between items-center mb-5 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm">Primary</span>
<input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
<input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" @onBlur="onColorPickerBlur" />
</div>
<DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
</section>
@ -52,9 +52,13 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['designerService'],
methods: {
onPrimaryColorChange(event) {
this.$appState.designer.theme.preset.semantic.primary = palette(event.target.value);
},
onColorPickerBlur() {
this.designerService.refreshACTokens();
}
}
};

7
apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
View File

@ -3,7 +3,7 @@
<section class="flex justify-between items-center mb-5 gap-8">
<div class="flex gap-2 items-center">
<span class="text-sm">Surface</span>
<input :value="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
<input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" @blur="onColorPickerBlur" />
</div>
<DesignColorPalette :value="$colorScheme.surface" />
</section>
@ -82,10 +82,13 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['$colorScheme'],
inject: ['$colorScheme', 'designerService'],
methods: {
onSurfaceColorChange(event) {
this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };
},
onColorPickerBlur() {
this.designerService.refreshACTokens();
}
}
};

3
apps/showcase/nuxt.config.js
View File

@ -73,8 +73,7 @@ export default defineNuxtConfig({
],
link: [
{ rel: 'icon', href: baseUrl + 'favicon.ico' },
{ rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:400|Roboto:500|Roboto:600|Roboto:700', fetchpriority: 'low' }
{ rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
],
script: [
{