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:
parent
f760e1942a
commit
342a6eccf1
2 changed files with 18 additions and 5 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue