fix: update Coloris color swatches in TextSettings after loading custom styles

Dispatch input events on color inputs after syncFromStore so Coloris
updates its ::before pseudo-element swatches with loaded values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 14:02:33 +01:00
parent f760e1942a
commit 342a6eccf1
2 changed files with 18 additions and 5 deletions

View file

@ -19,7 +19,7 @@ Customcss:
@page {
size: A4;
margin: 50mm 15mm 26mm 15mm;
background: rgba(255, 255, 255, 1);
background: rgb(227, 33, 33);
}
body {
@ -35,10 +35,10 @@ p {
font-weight: 300;
font-family: Arial;
font-style: italic;
padding-top: 20mm;
padding-right: 20mm;
padding-bottom: 20mm;
padding-left: 20mm;
padding-top: 0mm;
padding-right: 0mm;
padding-bottom: 0mm;
padding-left: 0mm;
}
h1 {

View file

@ -64,6 +64,7 @@
<label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
<div class="input-with-color">
<input
ref="colorInput"
id="text-color"
type="text"
v-model="color"
@ -80,6 +81,7 @@
<label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
<div class="input-with-color">
<input
ref="backgroundInput"
id="text-background"
type="text"
v-model="background"
@ -400,6 +402,8 @@ const fontSize = ref({ value: 16, unit: 'px' });
const alignment = ref('left');
const color = ref('rgb(0, 0, 0)');
const background = ref('transparent');
const colorInput = ref(null);
const backgroundInput = ref(null);
const marginOuterDetailed = ref({
top: { value: 0, unit: 'mm' },
@ -739,6 +743,14 @@ const syncFromStore = () => {
isUpdatingFromStore = false;
};
const updateColorisButtons = () => {
[colorInput.value, backgroundInput.value].forEach((input) => {
if (input) {
input.dispatchEvent(new Event('input', { bubbles: true }));
}
});
};
onMounted(() => {
Coloris.init();
Coloris({
@ -749,6 +761,7 @@ onMounted(() => {
swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
});
syncFromStore();
setTimeout(updateColorisButtons, 100);
});
</script>