diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 1b7c329..96209ed 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -47,7 +47,7 @@
@@ -218,6 +245,7 @@ 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 marginOuter = reactive({ value: 0, unit: 'mm' });
const paddingInner = reactive({ value: 0, unit: 'mm' });
@@ -242,6 +270,7 @@ const styleProps = [
const unitProps = [
{ css: 'font-size', ref: fontSize, debounce: true },
+ { css: 'line-height', ref: lineHeight, debounce: true },
{ css: 'margin', ref: marginOuter, debounce: true },
{ css: 'padding', ref: paddingInner, debounce: true },
];
@@ -478,6 +507,12 @@ 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;
diff --git a/src/components/ui/NumberInput.vue b/src/components/ui/NumberInput.vue
index 58f99cc..4aeda87 100644
--- a/src/components/ui/NumberInput.vue
+++ b/src/components/ui/NumberInput.vue
@@ -89,15 +89,17 @@ const handleInput = (event) => {
emit('update:modelValue', value);
};
+const decimals = (props.step.toString().split('.')[1] || '').length;
+
const increment = () => {
- const newValue = props.modelValue + props.step;
+ const newValue = parseFloat((props.modelValue + props.step).toFixed(decimals));
if (props.max === undefined || newValue <= props.max) {
emit('update:modelValue', newValue);
}
};
const decrement = () => {
- const newValue = props.modelValue - props.step;
+ const newValue = parseFloat((props.modelValue - props.step).toFixed(decimals));
if (props.min === undefined || newValue >= props.min) {
emit('update:modelValue', newValue);
}