mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 01:56:46 +00:00
390841bbf0
* WIP * WIP * Extract actions into composable * WIP: Preserve categories when searching * WIP * WIP: Tweak styles * WIP: Refactor node creator * WIP: Finish Node Creator node view/subcategories refactor * WIP: Finished actions refactor * Cleanup & Lintfix * WIP: Improve memory managment * Fix interactions * WIP * WIP: Keyboard navigation * Improve keyboard navigation and memory managment * Finished view refactor * FIx custom api calls and activation callouts * Fix actions tracking and cleanup * Product review fixes * Telemetry fixes * Fix node creator e2es * Set action name font size and actionsEmpty font weight * Fix failing credentials spec * Make sure to select first action item when switching from nodes panel to actions panel * Add actions panel e2e tests * Cleanup * Fix actions generation and cleanup * Add correct Learn More link and adjust displaying of trigger icon * Change trigger icon condition to use nodeType group * Cleanup nodeTypesUtils and snapshots and lintfixes * Lint fixes * Refine logic to show trigger icon in node creator * Add unit tests & clean up * Add `003_auto_insert_action` experiment, hide empty sections for opposite root view * Lintfix * Do not show empty category tooltips and only show activation callout in triger root view * Fix no-results node creator view * Spacings tweaks and root rendering logic adjustment * Add unit tests * Lint and e2e fixes * Revert CLI changes, fix unit tests * Remove useless comments * Sync master, replace $externalHooks mixin * Lint fix * Focus first action when panel slides in, not category * Address PR comments * Lint fix * Remove `setAddedNodeActionParameters` optional track param * Further simplify setAddedNodeActionParameters * Fix pnpn lock file * Fix types imports * Fix 13-pinning spec
121 lines
2.7 KiB
Vue
121 lines
2.7 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" />
|
|
<font-awesome-icon icon="bolt" v-if="isTrigger" size="xs" :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 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: 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));
|
|
}
|
|
|
|
.triggerIcon {
|
|
margin-left: var(--spacing-3xs);
|
|
color: var(--color-primary);
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-tooltip svg {
|
|
color: var(--color-foreground-xdark);
|
|
}
|
|
</style>
|