Fixed editor issues
Cagatay Civici
parent
5a03589ef4
commit
4c62eaf39b
|
|
@ -157,8 +157,7 @@
|
|||
|
||||
<script>
|
||||
import EventBus from '@/app/AppEventBus';
|
||||
import { NoirPreset } from '@/themes/app-theme.js';
|
||||
import { $dt, $t, updatePreset, usePreset } from '@primevue/themes';
|
||||
import { $dt, updatePreset, usePreset } from '@primevue/themes';
|
||||
import Aura from '@primevue/themes/aura';
|
||||
import Lara from '@primevue/themes/lara';
|
||||
import Material from '@primevue/themes/material';
|
||||
|
|
@ -184,8 +183,8 @@ export default {
|
|||
activeTab: '0',
|
||||
deferredTabs: true,
|
||||
preset: {
|
||||
primitive: NoirPreset.primitive,
|
||||
semantic: NoirPreset.semantic
|
||||
primitive: Aura.primitive,
|
||||
semantic: Aura.semantic
|
||||
},
|
||||
presetOptions: [
|
||||
{ label: 'Aura', value: 'Aura' },
|
||||
|
|
@ -202,173 +201,6 @@ export default {
|
|||
this.generateACTokens(null, this.preset);
|
||||
},
|
||||
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() {
|
||||
this.saveTheme();
|
||||
updatePreset(this.preset);
|
||||
|
|
@ -418,8 +250,6 @@ app.mount("#app");
|
|||
document.body.classList.remove('material');
|
||||
}
|
||||
|
||||
/*
|
||||
@todo: ask to the team about this
|
||||
this.preset = {
|
||||
primitive: newPreset.primitive,
|
||||
semantic: newPreset.semantic
|
||||
|
|
@ -430,13 +260,6 @@ app.mount("#app");
|
|||
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
|
||||
|
||||
usePreset(this.preset);
|
||||
*/
|
||||
const currentPreset = $t().preset(newPreset).preset(this.getPresetExt()).use({ useDefaultOptions: true }).preset;
|
||||
|
||||
this.preset = {
|
||||
primitive: currentPreset.primitive,
|
||||
semantic: currentPreset.semantic
|
||||
};
|
||||
},
|
||||
saveTheme() {
|
||||
const localState = {
|
||||
|
|
@ -490,12 +313,9 @@ app.mount("#app");
|
|||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
|
||||
},
|
||||
replaceColorPalette() {
|
||||
/*
|
||||
@todo: ask to the team about this
|
||||
this.preset.semantic.primary = this.preset.primitive.emerald;
|
||||
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
|
||||
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
|
||||
*/
|
||||
},
|
||||
transformTokenName(name) {
|
||||
if (name && name.trim().length) {
|
||||
|
|
@ -552,28 +372,6 @@ app.mount("#app");
|
|||
onHide() {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,16 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isObject } from '@primeuix/utils';
|
||||
import { $dt } from '@primevue/themes';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -65,12 +65,12 @@ export default {
|
|||
items: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
created() {
|
||||
this.id = 'dt_field_' + UniqueComponentId();
|
||||
},
|
||||
methods: {
|
||||
onOptionSelect(event) {
|
||||
this.$emit('update:modelValue', event.value);
|
||||
this.$emit('update:modelValue', event.value.label);
|
||||
event.originalEvent.stopPropagation();
|
||||
},
|
||||
onInput(event) {
|
||||
|
|
@ -88,7 +88,9 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
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() {
|
||||
return this.id + '_input';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<section class="flex justify-between items-center mb-4">
|
||||
<div class="flex gap-2 items-center">
|
||||
<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>
|
||||
<DesignColorPalette :value="$preset.semantic.primary" />
|
||||
</section>
|
||||
|
|
@ -49,26 +49,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { isObject } from '@primeuix/utils';
|
||||
import { $dt, palette } from '@primevue/themes';
|
||||
import { palette } from '@primevue/themes';
|
||||
|
||||
export default {
|
||||
inject: ['$preset'],
|
||||
data() {
|
||||
return {
|
||||
primaryColor: this.getColor('{primary.500}')
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onPrimaryColorChange(event) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue