Edit panel > numberInput : fix decrement function
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 17s
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 17s
This commit is contained in:
isUnknown
parent
18e4efc59d
commit
ea0994ed45
3 changed files with 185 additions and 48 deletions
|
|
@ -111,7 +111,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-outer-top"
|
||||
v-model="marginOuterDetailed.top.value"
|
||||
:modelValue="marginOuterDetailed.top.value"
|
||||
@update:modelValue="(value) => marginOuterDetailed.top.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -140,7 +141,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-outer-bottom"
|
||||
v-model="marginOuterDetailed.bottom.value"
|
||||
:modelValue="marginOuterDetailed.bottom.value"
|
||||
@update:modelValue="(value) => marginOuterDetailed.bottom.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -169,7 +171,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-outer-left"
|
||||
v-model="marginOuterDetailed.left.value"
|
||||
:modelValue="marginOuterDetailed.left.value"
|
||||
@update:modelValue="(value) => marginOuterDetailed.left.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -198,7 +201,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-outer-right"
|
||||
v-model="marginOuterDetailed.right.value"
|
||||
:modelValue="marginOuterDetailed.right.value"
|
||||
@update:modelValue="(value) => marginOuterDetailed.right.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -244,7 +248,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-inner-top"
|
||||
v-model="marginInnerDetailed.top.value"
|
||||
:modelValue="marginInnerDetailed.top.value"
|
||||
@update:modelValue="(value) => marginInnerDetailed.top.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -273,7 +278,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-inner-bottom"
|
||||
v-model="marginInnerDetailed.bottom.value"
|
||||
:modelValue="marginInnerDetailed.bottom.value"
|
||||
@update:modelValue="(value) => marginInnerDetailed.bottom.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -302,7 +308,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-inner-left"
|
||||
v-model="marginInnerDetailed.left.value"
|
||||
:modelValue="marginInnerDetailed.left.value"
|
||||
@update:modelValue="(value) => marginInnerDetailed.left.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -331,7 +338,8 @@
|
|||
<div class="input-with-unit">
|
||||
<NumberInput
|
||||
id="margin-inner-right"
|
||||
v-model="marginInnerDetailed.right.value"
|
||||
:modelValue="marginInnerDetailed.right.value"
|
||||
@update:modelValue="(value) => marginInnerDetailed.right.value = value"
|
||||
:min="0"
|
||||
:step="1"
|
||||
/>
|
||||
|
|
@ -410,6 +418,21 @@ const marginInnerDetailed = ref({
|
|||
const marginOuterLinked = ref(false);
|
||||
const marginInnerLinked = ref(false);
|
||||
|
||||
// Track previous values to detect which one changed
|
||||
const prevMarginOuter = ref({
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 24,
|
||||
left: 0
|
||||
});
|
||||
|
||||
const prevMarginInner = ref({
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
});
|
||||
|
||||
let isUpdatingFromStore = false;
|
||||
|
||||
// Update margin outer unit for all sides
|
||||
|
|
@ -462,6 +485,47 @@ watch(fontSize, (val) => {
|
|||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Watch when link is toggled
|
||||
watch(marginOuterLinked, (isLinked) => {
|
||||
if (isLinked) {
|
||||
// When linking, sync all to the first non-zero value or top value
|
||||
const current = marginOuterDetailed.value;
|
||||
const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
|
||||
|
||||
isUpdatingFromStore = true;
|
||||
marginOuterDetailed.value.top.value = syncValue;
|
||||
marginOuterDetailed.value.bottom.value = syncValue;
|
||||
marginOuterDetailed.value.left.value = syncValue;
|
||||
marginOuterDetailed.value.right.value = syncValue;
|
||||
|
||||
prevMarginOuter.value.top = syncValue;
|
||||
prevMarginOuter.value.bottom = syncValue;
|
||||
prevMarginOuter.value.left = syncValue;
|
||||
prevMarginOuter.value.right = syncValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
});
|
||||
|
||||
watch(marginInnerLinked, (isLinked) => {
|
||||
if (isLinked) {
|
||||
// When linking, sync all to the first non-zero value or top value
|
||||
const current = marginInnerDetailed.value;
|
||||
const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
|
||||
|
||||
isUpdatingFromStore = true;
|
||||
marginInnerDetailed.value.top.value = syncValue;
|
||||
marginInnerDetailed.value.bottom.value = syncValue;
|
||||
marginInnerDetailed.value.left.value = syncValue;
|
||||
marginInnerDetailed.value.right.value = syncValue;
|
||||
|
||||
prevMarginInner.value.top = syncValue;
|
||||
prevMarginInner.value.bottom = syncValue;
|
||||
prevMarginInner.value.left = syncValue;
|
||||
prevMarginInner.value.right = syncValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Watch margin outer values
|
||||
watch(() => [
|
||||
marginOuterDetailed.value.top.value,
|
||||
|
|
@ -473,20 +537,40 @@ watch(() => [
|
|||
|
||||
// If linked, sync all values to the one that changed
|
||||
if (marginOuterLinked.value) {
|
||||
// Find which value changed and sync others to it
|
||||
const top = marginOuterDetailed.value.top.value;
|
||||
const bottom = marginOuterDetailed.value.bottom.value;
|
||||
const left = marginOuterDetailed.value.left.value;
|
||||
const right = marginOuterDetailed.value.right.value;
|
||||
const current = {
|
||||
top: marginOuterDetailed.value.top.value,
|
||||
bottom: marginOuterDetailed.value.bottom.value,
|
||||
left: marginOuterDetailed.value.left.value,
|
||||
right: marginOuterDetailed.value.right.value,
|
||||
};
|
||||
|
||||
// Use the max value to determine which one changed (simple heuristic)
|
||||
const maxValue = Math.max(top, bottom, left, right);
|
||||
isUpdatingFromStore = true;
|
||||
marginOuterDetailed.value.top.value = maxValue;
|
||||
marginOuterDetailed.value.bottom.value = maxValue;
|
||||
marginOuterDetailed.value.left.value = maxValue;
|
||||
marginOuterDetailed.value.right.value = maxValue;
|
||||
isUpdatingFromStore = false;
|
||||
// Find which value actually changed by comparing with previous
|
||||
let changedValue = null;
|
||||
if (current.top !== prevMarginOuter.value.top) changedValue = current.top;
|
||||
else if (current.bottom !== prevMarginOuter.value.bottom) changedValue = current.bottom;
|
||||
else if (current.left !== prevMarginOuter.value.left) changedValue = current.left;
|
||||
else if (current.right !== prevMarginOuter.value.right) changedValue = current.right;
|
||||
|
||||
if (changedValue !== null) {
|
||||
isUpdatingFromStore = true;
|
||||
marginOuterDetailed.value.top.value = changedValue;
|
||||
marginOuterDetailed.value.bottom.value = changedValue;
|
||||
marginOuterDetailed.value.left.value = changedValue;
|
||||
marginOuterDetailed.value.right.value = changedValue;
|
||||
|
||||
// Update previous values
|
||||
prevMarginOuter.value.top = changedValue;
|
||||
prevMarginOuter.value.bottom = changedValue;
|
||||
prevMarginOuter.value.left = changedValue;
|
||||
prevMarginOuter.value.right = changedValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
} else {
|
||||
// Update previous values even when not linked
|
||||
prevMarginOuter.value.top = marginOuterDetailed.value.top.value;
|
||||
prevMarginOuter.value.bottom = marginOuterDetailed.value.bottom.value;
|
||||
prevMarginOuter.value.left = marginOuterDetailed.value.left.value;
|
||||
prevMarginOuter.value.right = marginOuterDetailed.value.right.value;
|
||||
}
|
||||
|
||||
debouncedUpdate(() => {
|
||||
|
|
@ -510,18 +594,40 @@ watch(() => [
|
|||
|
||||
// If linked, sync all values to the one that changed
|
||||
if (marginInnerLinked.value) {
|
||||
const top = marginInnerDetailed.value.top.value;
|
||||
const bottom = marginInnerDetailed.value.bottom.value;
|
||||
const left = marginInnerDetailed.value.left.value;
|
||||
const right = marginInnerDetailed.value.right.value;
|
||||
const current = {
|
||||
top: marginInnerDetailed.value.top.value,
|
||||
bottom: marginInnerDetailed.value.bottom.value,
|
||||
left: marginInnerDetailed.value.left.value,
|
||||
right: marginInnerDetailed.value.right.value,
|
||||
};
|
||||
|
||||
const maxValue = Math.max(top, bottom, left, right);
|
||||
isUpdatingFromStore = true;
|
||||
marginInnerDetailed.value.top.value = maxValue;
|
||||
marginInnerDetailed.value.bottom.value = maxValue;
|
||||
marginInnerDetailed.value.left.value = maxValue;
|
||||
marginInnerDetailed.value.right.value = maxValue;
|
||||
isUpdatingFromStore = false;
|
||||
// Find which value actually changed by comparing with previous
|
||||
let changedValue = null;
|
||||
if (current.top !== prevMarginInner.value.top) changedValue = current.top;
|
||||
else if (current.bottom !== prevMarginInner.value.bottom) changedValue = current.bottom;
|
||||
else if (current.left !== prevMarginInner.value.left) changedValue = current.left;
|
||||
else if (current.right !== prevMarginInner.value.right) changedValue = current.right;
|
||||
|
||||
if (changedValue !== null) {
|
||||
isUpdatingFromStore = true;
|
||||
marginInnerDetailed.value.top.value = changedValue;
|
||||
marginInnerDetailed.value.bottom.value = changedValue;
|
||||
marginInnerDetailed.value.left.value = changedValue;
|
||||
marginInnerDetailed.value.right.value = changedValue;
|
||||
|
||||
// Update previous values
|
||||
prevMarginInner.value.top = changedValue;
|
||||
prevMarginInner.value.bottom = changedValue;
|
||||
prevMarginInner.value.left = changedValue;
|
||||
prevMarginInner.value.right = changedValue;
|
||||
isUpdatingFromStore = false;
|
||||
}
|
||||
} else {
|
||||
// Update previous values even when not linked
|
||||
prevMarginInner.value.top = marginInnerDetailed.value.top.value;
|
||||
prevMarginInner.value.bottom = marginInnerDetailed.value.bottom.value;
|
||||
prevMarginInner.value.left = marginInnerDetailed.value.left.value;
|
||||
prevMarginInner.value.right = marginInnerDetailed.value.right.value;
|
||||
}
|
||||
|
||||
debouncedUpdate(() => {
|
||||
|
|
@ -610,6 +716,21 @@ const syncFromStore = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Update previous values to match current state
|
||||
prevMarginOuter.value = {
|
||||
top: marginOuterDetailed.value.top.value,
|
||||
right: marginOuterDetailed.value.right.value,
|
||||
bottom: marginOuterDetailed.value.bottom.value,
|
||||
left: marginOuterDetailed.value.left.value
|
||||
};
|
||||
|
||||
prevMarginInner.value = {
|
||||
top: marginInnerDetailed.value.top.value,
|
||||
right: marginInnerDetailed.value.right.value,
|
||||
bottom: marginInnerDetailed.value.bottom.value,
|
||||
left: marginInnerDetailed.value.left.value
|
||||
};
|
||||
|
||||
isUpdatingFromStore = false;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue