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

Fixed editor issues

pull/6798/head
Cagatay Civici 2024-11-14 12:57:46 +03:00
parent 5a03589ef4
commit 4c62eaf39b
4 changed files with 11 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -157,8 +157,7 @@
<script> <script>
import EventBus from '@/app/AppEventBus'; import EventBus from '@/app/AppEventBus';
import { NoirPreset } from '@/themes/app-theme.js'; import { $dt, updatePreset, usePreset } from '@primevue/themes';
import { $dt, $t, updatePreset, usePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura'; import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara'; import Lara from '@primevue/themes/lara';
import Material from '@primevue/themes/material'; import Material from '@primevue/themes/material';
@ -184,8 +183,8 @@ export default {
activeTab: '0', activeTab: '0',
deferredTabs: true, deferredTabs: true,
preset: { preset: {
primitive: NoirPreset.primitive, primitive: Aura.primitive,
semantic: NoirPreset.semantic semantic: Aura.semantic
}, },
presetOptions: [ presetOptions: [
{ label: 'Aura', value: 'Aura' }, { label: 'Aura', value: 'Aura' },
@ -202,173 +201,6 @@ export default {
this.generateACTokens(null, this.preset); this.generateACTokens(null, this.preset);
}, },
methods: { methods: {
getPresetExt() {
const color = this.primaryColors.find((c) => c.name === this.selectedPrimaryColor);
if (color.name === 'noir') {
document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
return {
semantic: {
primary: {
50: '{surface.50}',
100: '{surface.100}',
200: '{surface.200}',
300: '{surface.300}',
400: '{surface.400}',
500: '{surface.500}',
600: '{surface.600}',
700: '{surface.700}',
800: '{surface.800}',
900: '{surface.900}',
950: '{surface.950}'
},
colorScheme: {
light: {
primary: {
color: '{primary.950}',
contrastColor: '#ffffff',
hoverColor: '{primary.800}',
activeColor: '{primary.700}'
},
highlight: {
background: '{primary.950}',
focusBackground: '{primary.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
},
dark: {
primary: {
color: '{primary.50}',
contrastColor: '{primary.950}',
hoverColor: '{primary.200}',
activeColor: '{primary.300}'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.300}',
color: '{primary.950}',
focusColor: '{primary.950}'
}
}
}
}
};
} else {
document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
if (this.$appState.preset === 'Nora') {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.600}',
contrastColor: '#ffffff',
hoverColor: '{primary.700}',
activeColor: '{primary.800}'
},
highlight: {
background: '{primary.600}',
focusBackground: '{primary.700}',
color: '#ffffff',
focusColor: '#ffffff'
}
},
dark: {
primary: {
color: '{primary.500}',
contrastColor: '{surface.900}',
hoverColor: '{primary.400}',
activeColor: '{primary.300}'
},
highlight: {
background: '{primary.500}',
focusBackground: '{primary.400}',
color: '{surface.900}',
focusColor: '{surface.900}'
}
}
}
}
};
} else if (this.$appState.preset === 'Material') {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.400}',
activeColor: '{primary.300}'
},
highlight: {
background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
color: '{primary.700}',
focusColor: '{primary.800}'
}
},
dark: {
primary: {
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
};
} else {
return {
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.100}',
color: '{primary.700}',
focusColor: '{primary.800}'
}
},
dark: {
primary: {
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
};
}
}
},
apply() { apply() {
this.saveTheme(); this.saveTheme();
updatePreset(this.preset); updatePreset(this.preset);
@ -418,8 +250,6 @@ app.mount("#app");
document.body.classList.remove('material'); document.body.classList.remove('material');
} }
/*
@todo: ask to the team about this
this.preset = { this.preset = {
primitive: newPreset.primitive, primitive: newPreset.primitive,
semantic: newPreset.semantic semantic: newPreset.semantic
@ -430,13 +260,6 @@ app.mount("#app");
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc }; this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
usePreset(this.preset); usePreset(this.preset);
*/
const currentPreset = $t().preset(newPreset).preset(this.getPresetExt()).use({ useDefaultOptions: true }).preset;
this.preset = {
primitive: currentPreset.primitive,
semantic: currentPreset.semantic
};
}, },
saveTheme() { saveTheme() {
const localState = { const localState = {
@ -490,12 +313,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() {
/*
@todo: ask to the team about this
this.preset.semantic.primary = this.preset.primitive.emerald; this.preset.semantic.primary = this.preset.primitive.emerald;
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate }; this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc }; this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
*/
}, },
transformTokenName(name) { transformTokenName(name) {
if (name && name.trim().length) { if (name && name.trim().length) {
@ -552,28 +372,6 @@ app.mount("#app");
onHide() { onHide() {
this.deferredTabs = true; this.deferredTabs = true;
} }
},
computed: {
selectedPrimaryColor() {
return this.$appState.primary;
},
selectedSurfaceColor() {
return this.$appState.surface;
},
primaryColors() {
const presetPalette = presets[this.$appState.preset].primitive;
const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
const palettes = [{ name: 'noir', palette: {} }];
colors.forEach((color) => {
palettes.push({
name: color,
palette: presetPalette[color]
});
});
return palettes;
}
} }
}; };
</script> </script>

15
apps/showcase/components/layout/designer/DesignColorPalette.vue
View File

@ -1,29 +1,16 @@
<template> <template>
<div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden"> <div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="(color, i) of value" :key="i + '_' + color" class="w-8 h-8" :style="getStyle(color)" :title="color"></div> <div v-for="color of value" :key="color" class="w-8 h-8" :style="{ backgroundColor: color }" :title="color"></div>
</div> </div>
</template> </template>
<script> <script>
import { isObject } from '@primeuix/utils';
import { $dt } from '@primevue/themes';
export default { export default {
props: { props: {
value: { value: {
type: Object, type: Object,
default: null default: null
} }
},
methods: {
getStyle(color) {
const colorScheme = this.$appState.darkTheme ? 'light' : 'dark';
const token = color?.replace(/{|}/g, '');
const tokenValue = $dt(token)?.value;
const backgroundColor = (isObject(tokenValue) ? tokenValue[colorScheme]?.value : tokenValue) ?? color;
return { backgroundColor };
}
} }
}; };
</script> </script>

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

@ -65,12 +65,12 @@ export default {
items: null items: null
}; };
}, },
mounted() { created() {
this.id = 'dt_field_' + UniqueComponentId(); this.id = 'dt_field_' + UniqueComponentId();
}, },
methods: { methods: {
onOptionSelect(event) { onOptionSelect(event) {
this.$emit('update:modelValue', event.value); this.$emit('update:modelValue', event.value.label);
event.originalEvent.stopPropagation(); event.originalEvent.stopPropagation();
}, },
onInput(event) { onInput(event) {
@ -88,7 +88,9 @@ export default {
}, },
computed: { computed: {
previewColor() { previewColor() {
return this.modelValue && this.modelValue.startsWith('{') && this.modelValue.endsWith('}') ? $dt(this.modelValue).variable : this.modelValue; const tokenValue = typeof this.modelValue === 'object' ? this.modelValue.label : this.modelValue;
return tokenValue && tokenValue.trim().length && tokenValue.startsWith('{') && tokenValue.endsWith('}') ? $dt(tokenValue).variable : tokenValue;
}, },
inputId() { inputId() {
return this.id + '_input'; return this.id + '_input';

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

@ -3,7 +3,7 @@
<section class="flex justify-between items-center mb-4"> <section class="flex justify-between items-center mb-4">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<span class="text-sm">Primary</span> <span class="text-sm">Primary</span>
<input :defaultValue="primaryColor" @input="onPrimaryColorChange($event)" type="color" :title="$preset.semantic.primary['500']" /> <input :value="$preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
</div> </div>
<DesignColorPalette :value="$preset.semantic.primary" /> <DesignColorPalette :value="$preset.semantic.primary" />
</section> </section>
@ -49,26 +49,13 @@
</template> </template>
<script> <script>
import { isObject } from '@primeuix/utils'; import { palette } from '@primevue/themes';
import { $dt, palette } from '@primevue/themes';
export default { export default {
inject: ['$preset'], inject: ['$preset'],
data() {
return {
primaryColor: this.getColor('{primary.500}')
};
},
methods: { methods: {
onPrimaryColorChange(event) { onPrimaryColorChange(event) {
this.$preset.semantic.primary = palette(event.target.value); this.$preset.semantic.primary = palette(event.target.value);
},
getColor(color) {
const colorScheme = this.$appState.darkTheme ? 'light' : 'dark';
const token = color?.replace(/{|}/g, '');
const tokenValue = $dt(token)?.value;
return (isObject(tokenValue) ? tokenValue[colorScheme]?.value : tokenValue) ?? color;
} }
} }
}; };