-
+
@@ -297,6 +184,7 @@ import { ref, reactive, computed, watch, nextTick } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
+import UnitToggle from './ui/UnitToggle.vue';
import BasePopup from './ui/BasePopup.vue';
import { convertUnit } from '../utils/unit-conversion';
@@ -318,7 +206,6 @@ const selectedElement = ref(null);
const elementInstanceCount = ref(0);
const colorInput = ref(null);
const backgroundInput = ref(null);
-const borderColorInput = ref(null);
let isUpdatingFromStore = false;
const { debouncedUpdate } = useDebounce(500);
@@ -326,100 +213,39 @@ const { debouncedUpdate } = useDebounce(500);
// Style properties — flat refs for simple values, reactive for value+unit
const fontFamily = ref('Alegreya Sans');
const italic = ref(false);
-const bold = ref(false);
+const fontWeight = ref(400);
const textAlign = ref('left');
const color = ref('rgb(0, 0, 0)');
const background = ref('transparent');
const fontSize = reactive({ value: 23, unit: 'px' });
-const lineHeight = reactive({ value: 28, unit: 'px' });
-const borderWidth = reactive({ value: 0, unit: 'px' });
-const borderStyle = ref('solid');
-const borderColor = ref('#000000');
-
-const marginLocked = ref(true);
-const margin = reactive({
- top: { value: 0, unit: 'mm' },
- right: { value: 0, unit: 'mm' },
- bottom: { value: 0, unit: 'mm' },
- left: { value: 0, unit: 'mm' },
-});
-
-const paddingLocked = ref(true);
-const padding = reactive({
- top: { value: 0, unit: 'mm' },
- right: { value: 0, unit: 'mm' },
- bottom: { value: 0, unit: 'mm' },
- left: { value: 0, unit: 'mm' },
-});
+const marginOuter = reactive({ value: 0, unit: 'mm' });
+const paddingInner = reactive({ value: 0, unit: 'mm' });
// Constants
const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
+const weights = ['200', '300', '400', '600', '800'];
+
+const fontWeightString = computed({
+ get: () => String(fontWeight.value),
+ set: (val) => { fontWeight.value = parseInt(val); }
+});
// Style property descriptors
const styleProps = [
{ css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
{ css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false },
- { css: 'font-weight', get: () => bold.value ? 'bold' : 'normal', set: v => bold.value = v === 'bold' || parseInt(v) >= 700, debounce: false },
+ { css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false },
{ css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
{ css: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
{ css: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
- { css: 'border-style', get: () => borderStyle.value, set: v => borderStyle.value = v || 'solid', debounce: false },
- { css: 'border-color', get: () => borderColor.value, set: v => borderColor.value = v, debounce: true },
];
const unitProps = [
{ css: 'font-size', ref: fontSize, debounce: true },
- { css: 'line-height', ref: lineHeight, debounce: true },
- { css: 'border-width', ref: borderWidth, debounce: true },
+ { css: 'margin', ref: marginOuter, debounce: true },
+ { css: 'padding', ref: paddingInner, debounce: true },
];
-const sides = [
- { key: 'top', label: 'Haut' },
- { key: 'bottom', label: 'Bas' },
- { key: 'left', label: 'Gauche' },
- { key: 'right', label: 'Droite' },
-];
-
-const updateMarginValue = (side, value) => {
- if (marginLocked.value) {
- for (const s of ['top', 'right', 'bottom', 'left']) margin[s].value = value;
- } else {
- margin[side].value = value;
- }
-};
-
-const updateMarginUnit = (side, unit) => {
- if (marginLocked.value) {
- for (const s of ['top', 'right', 'bottom', 'left']) {
- margin[s].value = convertUnit(margin[s].value, margin[s].unit, unit);
- margin[s].unit = unit;
- }
- } else {
- margin[side].value = convertUnit(margin[side].value, margin[side].unit, unit);
- margin[side].unit = unit;
- }
-};
-
-const updatePaddingValue = (side, value) => {
- if (paddingLocked.value) {
- for (const s of ['top', 'right', 'bottom', 'left']) padding[s].value = value;
- } else {
- padding[side].value = value;
- }
-};
-
-const updatePaddingUnit = (side, unit) => {
- if (paddingLocked.value) {
- for (const s of ['top', 'right', 'bottom', 'left']) {
- padding[s].value = convertUnit(padding[s].value, padding[s].unit, unit);
- padding[s].unit = unit;
- }
- } else {
- padding[side].value = convertUnit(padding[side].value, padding[side].unit, unit);
- padding[side].unit = unit;
- }
-};
-
// Generic update: push a single property to the stylesheet store
const updateProp = (cssProp, value, unit) => {
if (!selector.value) return;
@@ -470,11 +296,9 @@ const generatePreviewCss = () => {
for (const prop of styleProps) {
const val = prop.get();
- if (!val) continue;
- if (prop.css === 'font-style' && val !== 'italic') continue;
- if (prop.css === 'font-weight' && val === 'normal') continue;
- if ((prop.css === 'border-style' || prop.css === 'border-color') && borderWidth.value === 0) continue;
- properties.push(` ${prop.css}: ${val};`);
+ if (val && (prop.css !== 'font-style' || val === 'italic')) {
+ properties.push(` ${prop.css}: ${val};`);
+ }
}
for (const prop of unitProps) {
@@ -483,17 +307,6 @@ const generatePreviewCss = () => {
}
}
- for (const side of ['top', 'right', 'bottom', 'left']) {
- if (margin[side].value !== undefined && margin[side].value !== null) {
- properties.push(` margin-${side}: ${margin[side].value}${margin[side].unit};`);
- }
- }
- for (const side of ['top', 'right', 'bottom', 'left']) {
- if (padding[side].value !== undefined && padding[side].value !== null) {
- properties.push(` padding-${side}: ${padding[side].value}${padding[side].unit};`);
- }
- }
-
if (properties.length === 0) return '';
return `${selector.value} {\n${properties.join('\n')}\n}`;
@@ -522,10 +335,6 @@ const applyAllStyles = () => {
for (const prop of unitProps) {
updateProp(prop.css, prop.ref.value, prop.ref.unit);
}
- for (const side of ['top', 'right', 'bottom', 'left']) {
- updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
- updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
- }
};
// Watchers — simple props
@@ -550,50 +359,6 @@ for (const prop of unitProps) {
});
}
-// Watchers — margin sides
-watch(
- () => [margin.top.value, margin.right.value, margin.bottom.value, margin.left.value],
- () => {
- if (isUpdatingFromStore) return;
- debouncedUpdate(() => {
- for (const side of ['top', 'right', 'bottom', 'left']) {
- updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
- }
- });
- }
-);
-watch(
- () => [margin.top.unit, margin.right.unit, margin.bottom.unit, margin.left.unit],
- () => {
- if (isUpdatingFromStore) return;
- for (const side of ['top', 'right', 'bottom', 'left']) {
- updateProp(`margin-${side}`, margin[side].value, margin[side].unit);
- }
- }
-);
-
-// Watchers — padding sides
-watch(
- () => [padding.top.value, padding.right.value, padding.bottom.value, padding.left.value],
- () => {
- if (isUpdatingFromStore) return;
- debouncedUpdate(() => {
- for (const side of ['top', 'right', 'bottom', 'left']) {
- updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
- }
- });
- }
-);
-watch(
- () => [padding.top.unit, padding.right.unit, padding.bottom.unit, padding.left.unit],
- () => {
- if (isUpdatingFromStore) return;
- for (const side of ['top', 'right', 'bottom', 'left']) {
- updateProp(`padding-${side}`, padding[side].value, padding[side].unit);
- }
- }
-);
-
const handleCssInput = (newCss) => {
const oldBlock = elementCss.value;
if (oldBlock) {
@@ -646,47 +411,6 @@ const loadValuesFromStylesheet = () => {
prop.ref.unit = data.unit;
}
}
-
- // Margin sides — try individual first, fallback to shorthand
- const spacingSides = ['top', 'right', 'bottom', 'left'];
- let anyMarginFound = false;
- for (const side of spacingSides) {
- const data = stylesheetStore.extractValue(selector.value, `margin-${side}`);
- if (data && data.value !== undefined) {
- margin[side].value = data.value;
- margin[side].unit = data.unit;
- anyMarginFound = true;
- }
- }
- if (!anyMarginFound) {
- const data = stylesheetStore.extractValue(selector.value, 'margin');
- if (data && data.value !== undefined) {
- for (const side of spacingSides) {
- margin[side].value = data.value;
- margin[side].unit = data.unit;
- }
- }
- }
-
- // Padding sides — try individual first, fallback to shorthand
- let anyPaddingFound = false;
- for (const side of spacingSides) {
- const data = stylesheetStore.extractValue(selector.value, `padding-${side}`);
- if (data && data.value !== undefined) {
- padding[side].value = data.value;
- padding[side].unit = data.unit;
- anyPaddingFound = true;
- }
- }
- if (!anyPaddingFound) {
- const data = stylesheetStore.extractValue(selector.value, 'padding');
- if (data && data.value !== undefined) {
- for (const side of spacingSides) {
- padding[side].value = data.value;
- padding[side].unit = data.unit;
- }
- }
- }
} catch (error) {
console.error('Error loading values from stylesheet:', error);
}
@@ -746,7 +470,7 @@ const toggleInheritance = () => {
fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
italic.value = cs.fontStyle === 'italic';
- bold.value = parseInt(cs.fontWeight) >= 700;
+ fontWeight.value = parseInt(cs.fontWeight);
const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
if (fontSizeMatch) {
@@ -754,36 +478,20 @@ const toggleInheritance = () => {
fontSize.unit = fontSizeMatch[2];
}
- const lineHeightMatch = cs.lineHeight.match(/([\d.]+)(px|rem|em|pt)/);
- if (lineHeightMatch) {
- lineHeight.value = parseFloat(lineHeightMatch[1]);
- lineHeight.unit = lineHeightMatch[2];
- }
-
textAlign.value = cs.textAlign;
color.value = cs.color;
background.value = cs.backgroundColor;
- const borderWidthMatch = cs.borderTopWidth.match(/([\d.]+)(px)/);
- if (borderWidthMatch) {
- borderWidth.value = parseFloat(borderWidthMatch[1]);
- borderWidth.unit = 'px';
+ const marginMatch = cs.marginTop.match(/([\d.]+)(px|mm|pt)/);
+ if (marginMatch) {
+ marginOuter.value = parseFloat(marginMatch[1]);
+ marginOuter.unit = marginMatch[2];
}
- borderStyle.value = cs.borderTopStyle || 'solid';
- borderColor.value = cs.borderTopColor || '#000000';
- for (const side of ['top', 'right', 'bottom', 'left']) {
- const cssSide = side.charAt(0).toUpperCase() + side.slice(1);
- const marginMatch = cs[`margin${cssSide}`].match(/([\d.]+)(px|mm|pt)/);
- if (marginMatch) {
- margin[side].value = parseFloat(marginMatch[1]);
- margin[side].unit = marginMatch[2];
- }
- const paddingMatch = cs[`padding${cssSide}`].match(/([\d.]+)(px|mm|pt)/);
- if (paddingMatch) {
- padding[side].value = parseFloat(paddingMatch[1]);
- padding[side].unit = paddingMatch[2];
- }
+ const paddingMatch = cs.paddingTop.match(/([\d.]+)(px|mm|pt)/);
+ if (paddingMatch) {
+ paddingInner.value = parseFloat(paddingMatch[1]);
+ paddingInner.unit = paddingMatch[2];
}
isUpdatingFromStore = false;
@@ -815,38 +523,4 @@ defineExpose({ handleIframeClick, close, visible });
color: var(--color-purple);
font-size: 0.875rem;
}
-
-.settings-subsection-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 0.25rem;
-}
-
-.lock-toggle {
- display: flex;
- align-items: center;
- justify-content: center;
- background: none;
- border: 1px solid transparent;
- border-radius: 3px;
- cursor: pointer;
- padding: 2px 4px;
- color: var(--color-text-muted, #999);
- transition: color 0.15s, border-color 0.15s;
-}
-
-.lock-toggle:hover:not(:disabled) {
- color: var(--color-text, #333);
- border-color: var(--color-border, #ccc);
-}
-
-.lock-toggle.locked {
- color: var(--color-purple, #7c3aed);
-}
-
-.lock-toggle:disabled {
- opacity: 0.4;
- cursor: not-allowed;
-}
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index e4a706f..e7da376 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -12,7 +12,7 @@
-
+
diff --git a/src/components/ui/NumberInput.vue b/src/components/ui/NumberInput.vue
index 4aeda87..58f99cc 100644
--- a/src/components/ui/NumberInput.vue
+++ b/src/components/ui/NumberInput.vue
@@ -89,17 +89,15 @@ const handleInput = (event) => {
emit('update:modelValue', value);
};
-const decimals = (props.step.toString().split('.')[1] || '').length;
-
const increment = () => {
- const newValue = parseFloat((props.modelValue + props.step).toFixed(decimals));
+ const newValue = props.modelValue + props.step;
if (props.max === undefined || newValue <= props.max) {
emit('update:modelValue', newValue);
}
};
const decrement = () => {
- const newValue = parseFloat((props.modelValue - props.step).toFixed(decimals));
+ const newValue = props.modelValue - props.step;
if (props.min === undefined || newValue >= props.min) {
emit('update:modelValue', newValue);
}