fix: convert values when switching CSS units to preserve visual size
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 21s

Previously, changing unit (e.g. mm → px) kept the numeric value unchanged,
causing visual changes. Now values are converted through a px pivot unit
so the rendered size stays the same.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 14:08:30 +01:00
parent 342a6eccf1
commit de3bb2a274
5 changed files with 92 additions and 33 deletions

View file

@ -29,6 +29,7 @@
<script setup>
import NumberInput from './NumberInput.vue';
import UnitToggle from './UnitToggle.vue';
import { convertUnit } from '../../utils/unit-conversion';
const props = defineProps({
modelValue: {
@ -64,7 +65,8 @@ const updateValue = (value) => {
emit('update:modelValue', { ...props.modelValue, value });
};
const updateUnit = (unit) => {
emit('update:modelValue', { ...props.modelValue, unit });
const updateUnit = (newUnit) => {
const converted = convertUnit(props.modelValue.value, props.modelValue.unit, newUnit);
emit('update:modelValue', { value: converted, unit: newUnit });
};
</script>