studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

font-size, line-height, color → defaults values

Browse source
This commit is contained in:
Julie Blanc 2026-03-05 15:59:38 +01:00
parent fa56118e75
commit 8b99326de2
3 changed files with 127 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/editor/TextSettings.vue
View file

@ -16,14 +16,6 @@
<select id="text-font" v-model="font" disabled class="field--view-only" title="Fonctionnalité à venir">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select>
<div class="field-checkbox">
<input id="text-italic" type="checkbox" v-model="italic" />
<label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
</div>
<div class="field-checkbox">
<input id="text-bold" type="checkbox" v-model="bold" />
<label for="text-bold" class="label-with-tooltip" data-css="font-weight">Gras</label>
</div>
</div>
</div>
</div>
@ -42,6 +34,20 @@
</div>
</div>
<!-- Interlignage -->
<div class="settings-subsection">
<div class="field field-text-size">
<label for="text-lineheight-range" class="label-with-tooltip" data-css="line-height">Interlignage</label>
<InputWithUnit
v-model="lineHeight"
:units="['px']"
:min="0"
:max="72"
showRange
/>
</div>
</div>
<!-- Couleurs -->
<div class="settings-subsection">
<div class="field field-simple">
@ -83,9 +89,8 @@ const fonts = ['Alegreya Sans', 'Arial', 'Georgia', 'Helvetica', 'Times New Roma
// State
const font = ref('Alegreya Sans');
const italic = ref(false);
const bold = ref(false);
const fontSize = ref({ value: 16, unit: 'px' });
const lineHeight = ref({ value: 20, unit: 'px' });
const color = ref('rgb(0, 0, 0)');
const colorInput = ref(null);
@ -93,25 +98,16 @@ let isUpdatingFromStore = false;
// Watchers for body styles
watch(font, (val) => {
textDefaults.fontFamily = val;
if (isUpdatingFromStore) return;
updateStyle('body', 'font-family', `"${val}"`);
});
watch(italic, (val) => {
if (isUpdatingFromStore) return;
updateStyle('p', 'font-style', val ? 'italic' : 'normal');
});
}, { immediate: true });
watch(color, (val) => {
textDefaults.color = val;
if (isUpdatingFromStore) return;
updateStyle('body', 'color', val);
});
// Watchers for paragraph styles
watch(bold, (val) => {
if (isUpdatingFromStore) return;
updateStyle('p', 'font-weight', val ? 'bold' : 'normal');
});
}, { immediate: true });
watch(fontSize, (val) => {
textDefaults.fontSize = { value: val.value, unit: val.unit };
@ -121,25 +117,28 @@ watch(fontSize, (val) => {
});
}, { deep: true, immediate: true });
watch(lineHeight, (val) => {
textDefaults.lineHeight = { value: val.value, unit: val.unit };
if (isUpdatingFromStore) return;
debouncedUpdate(() => {
updateStyle('p', 'line-height', `${val.value}${val.unit}`);
});
}, { deep: true, immediate: true });
// Sync from store
const syncFromStore = () => {
isUpdatingFromStore = true;
// Body styles
const fontStyle = extractValue('p', 'font-style');
if (fontStyle) italic.value = fontStyle === 'italic';
const colorVal = extractValue('body', 'color');
if (colorVal) color.value = colorVal;
// Paragraph styles
const fontWeight = extractValue('p', 'font-weight');
if (fontWeight) bold.value = fontWeight === 'bold' || parseInt(fontWeight) >= 700;
const fontSizeVal = extractNumericValue('p', 'font-size', ['px']); // ['px', 'em', 'rem']
if (fontSizeVal) fontSize.value = fontSizeVal;
const lineHeightVal = extractNumericValue('p', 'line-height', ['px']);
if (lineHeightVal) lineHeight.value = lineHeightVal;
isUpdatingFromStore = false;
};