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

add module setting text-decoration

Browse source
This commit is contained in:
Julie Blanc 2026-03-08 09:54:36 +01:00
parent 8a896277bf
commit ec1b23d67a
7 changed files with 124 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/composables/useElementSettings.js
View file

@ -37,6 +37,11 @@ export function useElementSettings({ margin, padding, basePopup }) {
const borderWidth = reactive({ ...ELEMENT_DEFAULTS.borderWidth });
const borderStyle = ref(ELEMENT_DEFAULTS.borderStyle);
const borderColor = ref(ELEMENT_DEFAULTS.borderColor);
const textDecorationLine = ref(ELEMENT_DEFAULTS.textDecorationLine);
const textDecorationStyle = ref(ELEMENT_DEFAULTS.textDecorationStyle);
const textDecorationThickness = reactive({ ...ELEMENT_DEFAULTS.textDecorationThickness });
const textDecorationColor = ref(ELEMENT_DEFAULTS.textDecorationColor);
const textUnderlineOffset = reactive({ ...ELEMENT_DEFAULTS.textUnderlineOffset });
// --- Toggle state ---
const settingEnabled = reactive({
@ -47,6 +52,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
color: false,
background: false,
border: false,
textDecoration: false,
margin: false,
padding: false,
});
@ -93,12 +99,17 @@ export function useElementSettings({ margin, padding, basePopup }) {
{ css: 'background', group: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
{ css: 'border-style', group: 'border', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false },
{ css: 'border-color', group: 'border', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true },
{ css: 'text-decoration-line', group: 'textDecoration', get: () => textDecorationLine.value, set: v => textDecorationLine.value = v || 'underline', debounce: false },
{ css: 'text-decoration-style', group: 'textDecoration', get: () => textDecorationStyle.value, set: v => textDecorationStyle.value = v || 'solid', debounce: false },
{ css: 'text-decoration-color', group: 'textDecoration', get: () => textDecorationColor.value, set: v => textDecorationColor.value = v, debounce: true },
];
const unitProps = [
{ css: 'font-size', group: 'fontSize', ref: fontSize, debounce: true },
{ css: 'line-height', group: 'lineHeight', ref: lineHeight, debounce: true },
{ css: 'border-width', group: 'border', ref: borderWidth, debounce: true },
{ css: 'text-decoration-thickness', group: 'textDecoration', ref: textDecorationThickness, debounce: true },
{ css: 'text-underline-offset', group: 'textDecoration', ref: textUnderlineOffset, debounce: true },
];
const settingGroups = {
@ -109,6 +120,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
color: ['color'],
background: ['background'],
border: ['border-width', 'border-style', 'border-color'],
textDecoration: ['text-decoration-line', 'text-decoration-style', 'text-decoration-thickness', 'text-decoration-color', 'text-underline-offset'],
margin: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
};
@ -283,6 +295,21 @@ export function useElementSettings({ margin, padding, basePopup }) {
{ css: 'border-color', group: 'border',
getValue: () => borderColor.value,
skip: () => !settingEnabled.border || borderWidth.value === 0 },
{ css: 'text-decoration-line', group: 'textDecoration',
getValue: () => textDecorationLine.value,
skip: () => !settingEnabled.textDecoration },
{ css: 'text-decoration-style', group: 'textDecoration',
getValue: () => textDecorationStyle.value,
skip: () => !settingEnabled.textDecoration },
{ css: 'text-decoration-thickness', group: 'textDecoration',
getValue: () => `${textDecorationThickness.value}${textDecorationThickness.unit}`,
skip: () => !settingEnabled.textDecoration },
{ css: 'text-decoration-color', group: 'textDecoration',
getValue: () => textDecorationColor.value,
skip: () => !settingEnabled.textDecoration },
{ css: 'text-underline-offset', group: 'textDecoration',
getValue: () => `${textUnderlineOffset.value}${textUnderlineOffset.unit}`,
skip: () => !settingEnabled.textDecoration },
];
const isInlineElement = computed(() => !!INLINE_DEFAULTS[currentTag.value]);
@ -812,6 +839,11 @@ export function useElementSettings({ margin, padding, basePopup }) {
borderWidth,
borderStyle,
borderColor,
textDecorationLine,
textDecorationStyle,
textDecorationThickness,
textDecorationColor,
textUnderlineOffset,
settingEnabled,
settingCache,
textDefaults,