fix(editor): Fix menu item event handling

This commit is contained in:
Csaba Tuncsik 2023-07-27 10:00:14 +02:00
parent 6312287315
commit 7c45b63dfe
2 changed files with 29 additions and 32 deletions

View file

@ -23,7 +23,7 @@
:tooltipDelay="tooltipDelay"
:mode="mode"
:activeTab="activeTab"
@select="onSelect"
:handle-select="onSelect"
/>
</el-menu>
</div>
@ -38,7 +38,7 @@
:tooltipDelay="tooltipDelay"
:mode="mode"
:activeTab="activeTab"
@select="onSelect"
:handle-select="onSelect"
/>
</el-menu>
<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
@ -139,17 +139,26 @@ export default defineComponent({
},
},
methods: {
onSelect(option: string): void {
if (this.mode === 'tabs') {
this.activeTab = option;
onSelect(item: IMenuItem): void {
if (item && item.type === 'link' && item.properties) {
const href: string = item.properties.href;
if (!href) {
return;
}
if (item.properties.newWindow) {
window.open(href);
} else {
window.location.assign(item.properties.href);
}
}
this.$emit('select', option);
this.$emit('update:modelValue', option);
},
},
watch: {
modelValue(value: string) {
this.activeTab = value;
if (this.mode === 'tabs') {
this.activeTab = item.id;
}
this.$emit('select', item.id);
this.$emit('update:modelValue', item.id);
},
},
});

View file

@ -22,14 +22,15 @@
<span :class="$style.label">{{ item.label }}</span>
</template>
<n8n-menu-item
v-for="item in availableChildren"
:key="item.id"
:item="item"
v-for="child in availableChildren"
:key="child.id"
:item="child"
:compact="compact"
:tooltipDelay="tooltipDelay"
:popperClass="popperClass"
:mode="mode"
:activeTab="activeTab"
:handle-select="handleSelect"
/>
</el-sub-menu>
<n8n-tooltip
@ -50,7 +51,7 @@
}"
data-test-id="menu-item"
:index="item.id"
@click="onItemClick(item)"
@click="handleSelect(item)"
>
<n8n-icon
v-if="item.icon"
@ -115,6 +116,9 @@ export default defineComponent({
activeTab: {
type: String,
},
handleSelect: {
type: Function as PropType<(item: IMenuItem) => void>,
},
},
computed: {
availableChildren(): IMenuItem[] {
@ -156,22 +160,6 @@ export default defineComponent({
return item.id === this.activeTab;
}
},
onItemClick(item: IMenuItem) {
if (item && item.type === 'link' && item.properties) {
const href: string = item.properties.href;
if (!href) {
return;
}
if (item.properties.newWindow) {
window.open(href);
} else {
window.location.assign(item.properties.href);
}
}
this.$emit('select', item.id);
},
},
});
</script>