fix(editor): Fix schema view pill highlighting (#10936)

This commit is contained in:
Elias Meire
2024-09-25 14:33:49 +02:00
committed by GitHub
parent 9bd247f06b
commit 1b973dcd8d
7 changed files with 79 additions and 45 deletions

View File

@@ -510,6 +510,28 @@ const isCodeNode = computed(
const isHtmlNode = computed(() => !!node.value && node.value.type === HTML_NODE_TYPE);
const isInputTypeString = computed(() => props.parameter.type === 'string');
const isInputTypeNumber = computed(() => props.parameter.type === 'number');
const isInputDataEmpty = computed(() => ndvStore.isNDVDataEmpty('input'));
const isDropDisabled = computed(
() =>
props.parameter.noDataExpression ||
props.isReadOnly ||
isResourceLocatorParameter.value ||
isModelValueExpression.value,
);
const showDragnDropTip = computed(
() =>
isFocused.value &&
(isInputTypeString.value || isInputTypeNumber.value) &&
!isModelValueExpression.value &&
!isDropDisabled.value &&
(!ndvStore.hasInputData || !isInputDataEmpty.value) &&
!ndvStore.isMappingOnboarded &&
ndvStore.isInputParentOfActiveNode,
);
function isRemoteParameterOption(option: INodePropertyOptions) {
return remoteParameterOptionsKeys.value.includes(option.name);
}
@@ -965,7 +987,11 @@ onUpdated(async () => {
</script>
<template>
<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
<div
ref="wrapper"
:class="[parameterInputClasses, { [$style.tipVisible]: showDragnDropTip }]"
@keydown.stop
>
<ExpressionEditModal
:dialog-visible="expressionEditDialogVisible"
:model-value="modelValueExpressionEdit"
@@ -1447,6 +1473,9 @@ onUpdated(async () => {
:disabled="isReadOnly"
@update:model-value="valueChanged"
/>
<div v-if="showDragnDropTip" :class="$style.tip">
<InlineExpressionTip />
</div>
</div>
<ParameterIssues
@@ -1477,6 +1506,7 @@ onUpdated(async () => {
.parameter-input {
display: inline-block;
position: relative;
:deep(.color-input) {
display: flex;
@@ -1609,3 +1639,23 @@ onUpdated(async () => {
}
}
</style>
<style lang="scss" module>
.tipVisible {
--input-border-bottom-left-radius: 0;
--input-border-bottom-right-radius: 0;
}
.tip {
position: absolute;
z-index: 2;
top: 100%;
background: var(--color-code-background);
border: var(--border-base);
border-top: none;
width: 100%;
box-shadow: 0 2px 6px 0 rgba(#441c17, 0.1);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>