refactor: extract reusable UI components and composables from TextSettings
Major refactoring to improve code quality and reduce duplication: TextSettings.vue: 1127 → 269 lines (-76%) New composables: - useCssUpdater.js: generic CSS update/remove functions - useCssSync.js: CSS parsing to form fields New UI components: - UnitToggle.vue: reusable unit selector buttons - InputWithUnit.vue: number input with unit toggle - MarginEditor.vue: simple/detailed margin editor with sync Benefits: - Reusable components for other settings panels - Centralized CSS manipulation logic - Better separation of concerns - Easier to test and maintain 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
94112ab1a8
commit
c4d2015a69
6 changed files with 647 additions and 1006 deletions
File diff suppressed because it is too large
Load diff
70
src/components/ui/InputWithUnit.vue
Normal file
70
src/components/ui/InputWithUnit.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
v-if="showRange"
|
||||
type="range"
|
||||
:value="modelValue.value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
@input="updateValue(Number($event.target.value))"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
:value="modelValue.value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
class="size-input"
|
||||
@input="updateValue(Number($event.target.value))"
|
||||
/>
|
||||
<UnitToggle
|
||||
:modelValue="modelValue.unit"
|
||||
:units="units"
|
||||
@update:modelValue="updateUnit"
|
||||
/>
|
||||
<slot name="after" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import UnitToggle from './UnitToggle.vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (v) => 'value' in v && 'unit' in v
|
||||
},
|
||||
units: {
|
||||
type: Array,
|
||||
default: () => ['mm', 'px']
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showRange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const updateValue = (value) => {
|
||||
emit('update:modelValue', { ...props.modelValue, value });
|
||||
};
|
||||
|
||||
const updateUnit = (unit) => {
|
||||
emit('update:modelValue', { ...props.modelValue, unit });
|
||||
};
|
||||
</script>
|
||||
162
src/components/ui/MarginEditor.vue
Normal file
162
src/components/ui/MarginEditor.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div class="margin-editor">
|
||||
<div class="field">
|
||||
<label :for="id">{{ label }}</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
:id="id"
|
||||
type="number"
|
||||
:value="simple.value"
|
||||
min="0"
|
||||
@input="updateSimpleValue(Number($event.target.value))"
|
||||
/>
|
||||
<UnitToggle
|
||||
:modelValue="simple.unit"
|
||||
:units="units"
|
||||
@update:modelValue="updateSimpleUnit"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="collapse-toggle"
|
||||
:class="{ expanded }"
|
||||
@click="toggleExpanded"
|
||||
title="Réglages détaillés"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="expanded" class="subsection collapsed-section">
|
||||
<div v-for="side in sides" :key="side.key" class="field">
|
||||
<label :for="`${id}-${side.key}`">{{ side.label }}</label>
|
||||
<div class="input-with-unit">
|
||||
<input
|
||||
:id="`${id}-${side.key}`"
|
||||
type="number"
|
||||
:value="detailed[side.key].value"
|
||||
min="0"
|
||||
@input="updateDetailedValue(side.key, Number($event.target.value))"
|
||||
/>
|
||||
<UnitToggle
|
||||
:modelValue="detailed[side.key].unit"
|
||||
:units="units"
|
||||
@update:modelValue="(unit) => updateDetailedUnit(side.key, unit)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import UnitToggle from './UnitToggle.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
simple: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (v) => 'value' in v && 'unit' in v
|
||||
},
|
||||
detailed: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (v) => ['top', 'right', 'bottom', 'left'].every(k => k in v)
|
||||
},
|
||||
units: {
|
||||
type: Array,
|
||||
default: () => ['mm', 'px']
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:simple', 'update:detailed', 'change']);
|
||||
|
||||
const expanded = ref(false);
|
||||
let isSyncing = false;
|
||||
|
||||
const sides = [
|
||||
{ key: 'top', label: 'Haut' },
|
||||
{ key: 'bottom', label: 'Bas' },
|
||||
{ key: 'left', label: 'Gauche' },
|
||||
{ key: 'right', label: 'Droite' }
|
||||
];
|
||||
|
||||
const toggleExpanded = () => {
|
||||
expanded.value = !expanded.value;
|
||||
if (expanded.value) {
|
||||
// Sync detailed values from simple when expanding
|
||||
syncDetailedFromSimple();
|
||||
}
|
||||
};
|
||||
|
||||
const syncDetailedFromSimple = () => {
|
||||
isSyncing = true;
|
||||
const newDetailed = {};
|
||||
for (const side of sides) {
|
||||
newDetailed[side.key] = { value: props.simple.value, unit: props.simple.unit };
|
||||
}
|
||||
emit('update:detailed', newDetailed);
|
||||
isSyncing = false;
|
||||
};
|
||||
|
||||
const updateSimpleValue = (value) => {
|
||||
const newSimple = { ...props.simple, value };
|
||||
emit('update:simple', newSimple);
|
||||
|
||||
// Sync all detailed values
|
||||
isSyncing = true;
|
||||
const newDetailed = {};
|
||||
for (const side of sides) {
|
||||
newDetailed[side.key] = { value, unit: props.simple.unit };
|
||||
}
|
||||
emit('update:detailed', newDetailed);
|
||||
isSyncing = false;
|
||||
|
||||
emit('change', { type: 'simple', simple: newSimple });
|
||||
};
|
||||
|
||||
const updateSimpleUnit = (unit) => {
|
||||
const newSimple = { ...props.simple, unit };
|
||||
emit('update:simple', newSimple);
|
||||
|
||||
// Sync all detailed units
|
||||
isSyncing = true;
|
||||
const newDetailed = {};
|
||||
for (const side of sides) {
|
||||
newDetailed[side.key] = { ...props.detailed[side.key], unit };
|
||||
}
|
||||
emit('update:detailed', newDetailed);
|
||||
isSyncing = false;
|
||||
|
||||
emit('change', { type: 'simple', simple: newSimple });
|
||||
};
|
||||
|
||||
const updateDetailedValue = (key, value) => {
|
||||
if (isSyncing) return;
|
||||
const newDetailed = { ...props.detailed, [key]: { ...props.detailed[key], value } };
|
||||
emit('update:detailed', newDetailed);
|
||||
if (expanded.value) {
|
||||
emit('change', { type: 'detailed', detailed: newDetailed });
|
||||
}
|
||||
};
|
||||
|
||||
const updateDetailedUnit = (key, unit) => {
|
||||
if (isSyncing) return;
|
||||
const newDetailed = { ...props.detailed, [key]: { ...props.detailed[key], unit } };
|
||||
emit('update:detailed', newDetailed);
|
||||
if (expanded.value) {
|
||||
emit('change', { type: 'detailed', detailed: newDetailed });
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ expanded });
|
||||
</script>
|
||||
28
src/components/ui/UnitToggle.vue
Normal file
28
src/components/ui/UnitToggle.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div class="unit-toggle">
|
||||
<button
|
||||
v-for="unit in units"
|
||||
:key="unit"
|
||||
type="button"
|
||||
:class="{ active: modelValue === unit }"
|
||||
@click="$emit('update:modelValue', unit)"
|
||||
>
|
||||
{{ unit }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
units: {
|
||||
type: Array,
|
||||
default: () => ['mm', 'px']
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(['update:modelValue']);
|
||||
</script>
|
||||
119
src/composables/useCssSync.js
Normal file
119
src/composables/useCssSync.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
|
||||
export function useCssSync() {
|
||||
const store = useStylesheetStore();
|
||||
|
||||
/**
|
||||
* Extract a simple CSS value (string)
|
||||
*/
|
||||
const extractValue = (selector, property) => {
|
||||
const block = store.extractBlock(selector);
|
||||
if (!block) return null;
|
||||
|
||||
const match = block.match(new RegExp(`${property}:\\s*([^;]+)`, 'i'));
|
||||
return match ? match[1].trim() : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract a numeric CSS value with unit
|
||||
* Returns { value: number, unit: string } or null
|
||||
*/
|
||||
const extractNumericValue = (selector, property, allowedUnits = ['px', 'em', 'rem', 'mm']) => {
|
||||
const block = store.extractBlock(selector);
|
||||
if (!block) return null;
|
||||
|
||||
const unitsPattern = allowedUnits.join('|');
|
||||
const match = block.match(new RegExp(`${property}:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
|
||||
|
||||
if (match) {
|
||||
return {
|
||||
value: parseFloat(match[1]),
|
||||
unit: match[2].toLowerCase()
|
||||
};
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract margin/padding shorthand (handles 1 or 4 values)
|
||||
* Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } }
|
||||
*/
|
||||
const extractSpacing = (selector, property, allowedUnits = ['mm', 'px']) => {
|
||||
const block = store.extractBlock(selector);
|
||||
if (!block) return null;
|
||||
|
||||
const unitsPattern = allowedUnits.join('|');
|
||||
|
||||
// Check for detailed properties first (property-top, property-right, etc.)
|
||||
const topMatch = block.match(new RegExp(`${property}-top:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
|
||||
|
||||
if (topMatch) {
|
||||
const rightMatch = block.match(new RegExp(`${property}-right:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
|
||||
const bottomMatch = block.match(new RegExp(`${property}-bottom:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
|
||||
const leftMatch = block.match(new RegExp(`${property}-left:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
|
||||
|
||||
return {
|
||||
detailed: {
|
||||
top: topMatch ? { value: parseFloat(topMatch[1]), unit: topMatch[2] } : { value: 0, unit: 'mm' },
|
||||
right: rightMatch ? { value: parseFloat(rightMatch[1]), unit: rightMatch[2] } : { value: 0, unit: 'mm' },
|
||||
bottom: bottomMatch ? { value: parseFloat(bottomMatch[1]), unit: bottomMatch[2] } : { value: 0, unit: 'mm' },
|
||||
left: leftMatch ? { value: parseFloat(leftMatch[1]), unit: leftMatch[2] } : { value: 0, unit: 'mm' },
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Check for shorthand property
|
||||
const shorthandMatch = block.match(new RegExp(`${property}:\\s*([^;]+)`, 'i'));
|
||||
if (!shorthandMatch) return null;
|
||||
|
||||
const shorthandValue = shorthandMatch[1].trim();
|
||||
|
||||
// Check for 4-value format: "0mm 0mm 24mm 0mm" (top right bottom left)
|
||||
const fourValuePattern = new RegExp(
|
||||
`^([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})$`,
|
||||
'i'
|
||||
);
|
||||
const fourValueMatch = shorthandValue.match(fourValuePattern);
|
||||
|
||||
if (fourValueMatch) {
|
||||
return {
|
||||
detailed: {
|
||||
top: { value: parseFloat(fourValueMatch[1]), unit: fourValueMatch[2] },
|
||||
right: { value: parseFloat(fourValueMatch[3]), unit: fourValueMatch[4] },
|
||||
bottom: { value: parseFloat(fourValueMatch[5]), unit: fourValueMatch[6] },
|
||||
left: { value: parseFloat(fourValueMatch[7]), unit: fourValueMatch[8] },
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Single value format: "10mm"
|
||||
const singleValuePattern = new RegExp(`^([0-9.]+)(${unitsPattern})$`, 'i');
|
||||
const singleValueMatch = shorthandValue.match(singleValuePattern);
|
||||
|
||||
if (singleValueMatch) {
|
||||
return {
|
||||
simple: {
|
||||
value: parseFloat(singleValueMatch[1]),
|
||||
unit: singleValueMatch[2]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a property value equals a specific string
|
||||
*/
|
||||
const hasValue = (selector, property, expectedValue) => {
|
||||
const value = extractValue(selector, property);
|
||||
return value === expectedValue;
|
||||
};
|
||||
|
||||
return {
|
||||
extractValue,
|
||||
extractNumericValue,
|
||||
extractSpacing,
|
||||
hasValue,
|
||||
};
|
||||
}
|
||||
120
src/composables/useCssUpdater.js
Normal file
120
src/composables/useCssUpdater.js
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import { useStylesheetStore } from '../stores/stylesheet';
|
||||
|
||||
export function useCssUpdater() {
|
||||
const store = useStylesheetStore();
|
||||
|
||||
/**
|
||||
* Update or add a CSS property for a given selector
|
||||
*/
|
||||
const updateStyle = (selector, property, value) => {
|
||||
const currentBlock = store.extractBlock(selector) || createRule(selector);
|
||||
|
||||
if (currentBlock.includes(`${property}:`)) {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
|
||||
`$1${value}`
|
||||
);
|
||||
store.content = store.content.replace(currentBlock, updatedBlock);
|
||||
} else {
|
||||
const updatedBlock = currentBlock.replace(
|
||||
/(\s*})$/,
|
||||
` ${property}: ${value};\n$1`
|
||||
);
|
||||
store.content = store.content.replace(currentBlock, updatedBlock);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove a CSS property from a selector
|
||||
*/
|
||||
const removeProperty = (selector, property) => {
|
||||
const currentBlock = store.extractBlock(selector);
|
||||
if (!currentBlock) return;
|
||||
|
||||
const updatedBlock = currentBlock.replace(
|
||||
new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'),
|
||||
''
|
||||
);
|
||||
|
||||
if (updatedBlock !== currentBlock) {
|
||||
store.content = store.content.replace(currentBlock, updatedBlock);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove multiple CSS properties from a selector
|
||||
*/
|
||||
const removeProperties = (selector, properties) => {
|
||||
let currentBlock = store.extractBlock(selector);
|
||||
if (!currentBlock) return;
|
||||
|
||||
let updatedBlock = currentBlock;
|
||||
for (const property of properties) {
|
||||
updatedBlock = updatedBlock.replace(
|
||||
new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'),
|
||||
''
|
||||
);
|
||||
}
|
||||
|
||||
if (updatedBlock !== currentBlock) {
|
||||
store.content = store.content.replace(currentBlock, updatedBlock);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a new CSS rule for a selector
|
||||
*/
|
||||
const createRule = (selector) => {
|
||||
store.content += `\n\n${selector} {\n}\n`;
|
||||
return `${selector} {\n}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove detailed margin properties and set shorthand
|
||||
*/
|
||||
const setMargin = (selector, value, unit) => {
|
||||
removeProperties(selector, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']);
|
||||
updateStyle(selector, 'margin', `${value}${unit}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove shorthand margin and set detailed margins
|
||||
*/
|
||||
const setDetailedMargins = (selector, top, right, bottom, left) => {
|
||||
removeProperty(selector, 'margin');
|
||||
updateStyle(selector, 'margin-top', `${top.value}${top.unit}`);
|
||||
updateStyle(selector, 'margin-right', `${right.value}${right.unit}`);
|
||||
updateStyle(selector, 'margin-bottom', `${bottom.value}${bottom.unit}`);
|
||||
updateStyle(selector, 'margin-left', `${left.value}${left.unit}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove detailed padding properties and set shorthand
|
||||
*/
|
||||
const setPadding = (selector, value, unit) => {
|
||||
removeProperties(selector, ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']);
|
||||
updateStyle(selector, 'padding', `${value}${unit}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove shorthand padding and set detailed padding
|
||||
*/
|
||||
const setDetailedPadding = (selector, top, right, bottom, left) => {
|
||||
removeProperty(selector, 'padding');
|
||||
updateStyle(selector, 'padding-top', `${top.value}${top.unit}`);
|
||||
updateStyle(selector, 'padding-right', `${right.value}${right.unit}`);
|
||||
updateStyle(selector, 'padding-bottom', `${bottom.value}${bottom.unit}`);
|
||||
updateStyle(selector, 'padding-left', `${left.value}${left.unit}`);
|
||||
};
|
||||
|
||||
return {
|
||||
updateStyle,
|
||||
removeProperty,
|
||||
removeProperties,
|
||||
createRule,
|
||||
setMargin,
|
||||
setDetailedMargins,
|
||||
setPadding,
|
||||
setDetailedPadding,
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue