mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
00a4b8b0c6
This extracts all core and editor changes from #7246 and #7137, so that we can get these changes merged first. ADO-1120 [DB Tests](https://github.com/n8n-io/n8n/actions/runs/6379749011) [E2E Tests](https://github.com/n8n-io/n8n/actions/runs/6379751480) [Workflow Tests](https://github.com/n8n-io/n8n/actions/runs/6379752828) --------- Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com> Co-authored-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
135 lines
2.9 KiB
Vue
135 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from '@/composables';
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import N8nTooltip from '../N8nTooltip';
|
|
|
|
export interface Props {
|
|
active?: boolean;
|
|
isAi?: boolean;
|
|
isTrigger?: boolean;
|
|
description?: string;
|
|
title: string;
|
|
showActionArrow?: boolean;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
defineEmits<{
|
|
(event: 'tooltipClick', $e: MouseEvent): void;
|
|
}>();
|
|
|
|
const i18n = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="{
|
|
[$style.creatorNode]: true,
|
|
[$style.hasAction]: !showActionArrow,
|
|
}"
|
|
v-bind="$attrs"
|
|
>
|
|
<div :class="$style.nodeIcon">
|
|
<slot name="icon" />
|
|
</div>
|
|
<div>
|
|
<div :class="$style.details">
|
|
<span :class="$style.name" v-text="title" data-test-id="node-creator-item-name" />
|
|
<font-awesome-icon
|
|
icon="bolt"
|
|
v-if="isTrigger"
|
|
size="xs"
|
|
:title="i18n.baseText('nodeCreator.nodeItem.triggerIconTitle')"
|
|
:class="$style.triggerIcon"
|
|
/>
|
|
<n8n-tooltip
|
|
v-if="!!$slots.tooltip"
|
|
placement="top"
|
|
data-test-id="node-creator-item-tooltip"
|
|
>
|
|
<template #content>
|
|
<slot name="tooltip" />
|
|
</template>
|
|
<n8n-icon :class="$style.tooltipIcon" icon="cube" />
|
|
</n8n-tooltip>
|
|
</div>
|
|
<p :class="$style.description" v-if="description" v-text="description" />
|
|
</div>
|
|
<slot name="dragContent" />
|
|
<button :class="$style.panelIcon" v-if="showActionArrow">
|
|
<font-awesome-icon :class="$style.panelArrow" icon="arrow-right" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.creatorNode {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
padding: var(--spacing-xs) var(--spacing-2xs) var(--spacing-xs) 0;
|
|
|
|
&.hasAction {
|
|
user-select: none;
|
|
}
|
|
}
|
|
.creatorNode:hover .panelIcon {
|
|
color: var(--action-arrow-color-hover, var(--color-text-light));
|
|
}
|
|
|
|
.panelIcon {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-left: var(--spacing-2xs);
|
|
color: var(--action-arrow-color, var(--color-text-lighter));
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
.tooltipIcon {
|
|
margin-left: var(--spacing-3xs);
|
|
}
|
|
.panelArrow {
|
|
font-size: var(--font-size-2xs);
|
|
width: 12px;
|
|
}
|
|
.details {
|
|
align-items: center;
|
|
}
|
|
.nodeIcon {
|
|
display: flex;
|
|
margin-right: var(--node-icon-margin-right, var(--spacing-s));
|
|
}
|
|
.name {
|
|
font-weight: var(--node-creator-name-weight, var(--font-weight-bold));
|
|
font-size: var(--node-creator-name-size, var(--font-size-s));
|
|
line-height: 1.115rem;
|
|
}
|
|
.description {
|
|
margin-top: var(--spacing-5xs);
|
|
font-size: var(--font-size-2xs);
|
|
line-height: 1rem;
|
|
font-weight: 400;
|
|
color: var(--node-creator-description-colos, var(--color-text-base));
|
|
}
|
|
|
|
.aiIcon {
|
|
margin-left: var(--spacing-3xs);
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.triggerIcon {
|
|
margin-left: var(--spacing-3xs);
|
|
color: var(--color-primary);
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-tooltip svg {
|
|
color: var(--color-foreground-xdark);
|
|
}
|
|
</style>
|