mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix menu item event handling

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/design-system/src/components/N8nMenu/Menu.vue
View file

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

28
packages/design-system/src/components/N8nMenuItem/MenuItem.vue
View file

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