mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Scale output item selector input width with value (#10555)

Browse source
This commit is contained in:
Elias Meire 2024-08-27 14:45:28 +02:00 committed by GitHub
parent 1c40135043
commit 52c574d83f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/editor-ui/src/components/InlineExpressionEditor/OutputItemSelect.vue
View file

@ -10,7 +10,9 @@ const hoveringItem = computed(() => ndvStore.getHoveringItem);
const hoveringItemIndex = computed(() => hoveringItem.value?.itemIndex); const hoveringItemIndex = computed(() => hoveringItem.value?.itemIndex);
const isHoveringItem = computed(() => Boolean(hoveringItem.value)); const isHoveringItem = computed(() => Boolean(hoveringItem.value));
const itemsLength = computed(() => ndvStore.ndvInputDataWithPinnedData.length); const itemsLength = computed(() => ndvStore.ndvInputDataWithPinnedData.length);
const itemIndex = computed(() => hoveringItemIndex.value ?? ndvStore.expressionOutputItemIndex); const itemIndex = computed(
() => hoveringItemIndex.value ?? ndvStore.expressionOutputItemIndex ?? 0,
);
const max = computed(() => Math.max(itemsLength.value - 1, 0)); const max = computed(() => Math.max(itemsLength.value - 1, 0));
const isItemIndexEditable = computed(() => !isHoveringItem.value && itemsLength.value > 0); const isItemIndexEditable = computed(() => !isHoveringItem.value && itemsLength.value > 0);
const hideTableHoverHint = computed(() => ndvStore.isTableHoverOnboarded); const hideTableHoverHint = computed(() => ndvStore.isTableHoverOnboarded);
@ -19,6 +21,8 @@ const canSelectNextItem = computed(
() => isItemIndexEditable.value && itemIndex.value < itemsLength.value - 1, () => isItemIndexEditable.value && itemIndex.value < itemsLength.value - 1,
); );
const inputCharWidth = computed(() => itemIndex.value.toString().length);
function updateItemIndex(index: number) { function updateItemIndex(index: number) {
ndvStore.expressionOutputItemIndex = index; ndvStore.expressionOutputItemIndex = index;
} }
@ -47,6 +51,7 @@ function prevItem() {
:min="0" :min="0"
:max="max" :max="max"
:model-value="itemIndex" :model-value="itemIndex"
:style="{ '--input-width': `calc(${inputCharWidth}ch + var(--spacing-s))` }"
@update:model-value="updateItemIndex" @update:model-value="updateItemIndex"
></N8nInputNumber> ></N8nInputNumber>
<N8nIconButton <N8nIconButton
@ -89,14 +94,12 @@ function prevItem() {
align-items: center; align-items: center;
} }
.input { .controls .input {
--input-height: 22px; --input-height: 22px;
--input-width: 26px;
--input-border-top-left-radius: var(--border-radius-base); --input-border-top-left-radius: var(--border-radius-base);
--input-border-bottom-left-radius: var(--border-radius-base); --input-border-bottom-left-radius: var(--border-radius-base);
--input-border-top-right-radius: var(--border-radius-base); --input-border-top-right-radius: var(--border-radius-base);
--input-border-bottom-right-radius: var(--border-radius-base); --input-border-bottom-right-radius: var(--border-radius-base);
max-width: var(--input-width);
line-height: calc(var(--input-height) - var(--spacing-4xs)); line-height: calc(var(--input-height) - var(--spacing-4xs));
&.hovering { &.hovering {
@ -109,6 +112,7 @@ function prevItem() {
line-height: var(--input-height); line-height: var(--input-height);
text-align: center; text-align: center;
padding: 0 var(--spacing-4xs); padding: 0 var(--spacing-4xs);
max-width: var(--input-width);
} }
} }
</style> </style>