fix(editor): Vue3 - Fix modal positioning and multi-select tag sizing (#6783)

*  Updating modals positioning within the overlay
* 💄 Implemented multi-select variant with small tabs
* ✔️ Removing password link clicks while modal is open in e2e tests
* Set generous timeout for $paramter resolve
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---------
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
Milorad FIlipović
2023-07-28 17:57:25 +02:00
committed by GitHub
parent 30484a0615
commit 4e491b754f
8 changed files with 32 additions and 7 deletions

View File

@@ -33,6 +33,7 @@
<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
<slot v-if="hasDefaultSlot" />
<n8n-select
:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
v-else-if="type === 'select' || type === 'multi-select'"
:modelValue="modelValue"
:placeholder="placeholder"
@@ -50,6 +51,7 @@
:key="option.value"
:value="option.value"
:label="option.label"
size="small"
/>
</n8n-select>
<n8n-input
@@ -127,6 +129,7 @@ export interface Props {
inactiveLabel?: string;
inactiveColor?: string;
teleported?: boolean;
tagSize?: 'small' | 'medium';
}
const props = withDefaults(defineProps<Props>(), {
@@ -136,6 +139,7 @@ const props = withDefaults(defineProps<Props>(), {
showRequiredAsterisk: true,
validateOnBlur: true,
teleported: true,
tagSize: 'small',
});
const emit = defineEmits<{
@@ -268,4 +272,12 @@ defineExpose({ inputRef });
.errorInput {
--input-border-color: var(--color-danger);
}
.multiSelectSmallTags {
:global(.el-tag) {
height: 24px;
padding: 0 8px;
line-height: 22px;
}
}
</style>