mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
:class="{
|
||
|
|
[$style.creatorNode]: true,
|
||
|
|
[$style.hasAction]: !showActionArrow,
|
||
|
|
}"
|
||
|
|
v-on="$listeners"
|
||
|
|
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" />
|
||
|
|
<trigger-icon v-if="isTrigger" :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>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||
|
|
import TriggerIcon from './TriggerIcon.vue';
|
||
|
|
import N8nTooltip from '../N8nTooltip';
|
||
|
|
|
||
|
|
export interface Props {
|
||
|
|
active?: boolean;
|
||
|
|
isTrigger?: boolean;
|
||
|
|
description?: string;
|
||
|
|
title: string;
|
||
|
|
showActionArrow?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<Props>();
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
(event: 'tooltipClick', $e: MouseEvent): void;
|
||
|
|
}>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" module>
|
||
|
|
.creatorNode {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 1;
|
||
|
|
padding: 11px 8px 11px 0;
|
||
|
|
|
||
|
|
&.hasAction {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.creatorNode:hover .panelIcon {
|
||
|
|
color: var(--color-text-light);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panelIcon {
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: var(--spacing-2xs);
|
||
|
|
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(--spacing-s);
|
||
|
|
|
||
|
|
& > :global(*) {
|
||
|
|
min-width: 25px;
|
||
|
|
max-width: 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
font-weight: var(--font-weight-bold);
|
||
|
|
font-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-colo, var(--color-text-base));
|
||
|
|
}
|
||
|
|
|
||
|
|
.triggerIcon {
|
||
|
|
margin-left: var(--spacing-2xs);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.el-tooltip svg {
|
||
|
|
color: var(--color-foreground-xdark);
|
||
|
|
}
|
||
|
|
</style>
|