mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import NodeIcon from '@/components/NodeIcon.vue';
|
|
import { type INodeTypeDescription } from 'n8n-workflow';
|
|
import { useI18n } from '@/composables/useI18n';
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
|
import { SCHEMA_PREVIEW_DOCS_URL } from '@/constants';
|
|
|
|
const props = defineProps<{
|
|
title: string;
|
|
collapsable: boolean;
|
|
collapsed: boolean;
|
|
itemCount: number | null;
|
|
info?: string;
|
|
nodeType?: INodeTypeDescription;
|
|
preview?: boolean;
|
|
}>();
|
|
|
|
const i18n = useI18n();
|
|
const isTrigger = computed(() => Boolean(props.nodeType?.group.includes('trigger')));
|
|
const emit = defineEmits<{
|
|
'click:toggle': [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="schema-header-wrapper">
|
|
<div class="schema-header" data-test-id="run-data-schema-header">
|
|
<div class="toggle" @click.capture.stop="emit('click:toggle')">
|
|
<FontAwesomeIcon icon="angle-down" :class="{ 'collapse-icon': true, collapsed }" />
|
|
</div>
|
|
|
|
<NodeIcon
|
|
v-if="nodeType"
|
|
class="icon"
|
|
:class="{ ['icon-trigger']: isTrigger }"
|
|
:node-type="nodeType"
|
|
:size="12"
|
|
/>
|
|
<div class="title">
|
|
{{ title }}
|
|
<span v-if="info" class="info">{{ info }}</span>
|
|
</div>
|
|
<FontAwesomeIcon v-if="isTrigger" class="trigger-icon" icon="bolt" size="xs" />
|
|
<div v-if="itemCount" class="extra-info" data-test-id="run-data-schema-node-item-count">
|
|
{{ i18n.baseText('ndv.output.items', { interpolate: { count: itemCount } }) }}
|
|
</div>
|
|
<div v-else-if="preview" class="extra-info">
|
|
{{ i18n.baseText('dataMapping.schemaView.previewNode') }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="preview && !collapsed"
|
|
class="notice"
|
|
data-test-id="schema-preview-warning"
|
|
@click.stop
|
|
>
|
|
<i18n-t keypath="dataMapping.schemaView.preview">
|
|
<template #link>
|
|
<N8nLink :to="SCHEMA_PREVIEW_DOCS_URL" size="small" bold>
|
|
{{ i18n.baseText('generic.learnMore') }}
|
|
</N8nLink>
|
|
</template>
|
|
</i18n-t>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.schema-header-wrapper {
|
|
padding-bottom: var(--spacing-2xs);
|
|
}
|
|
.schema-header {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.toggle {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.collapse-icon {
|
|
transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
|
|
}
|
|
.collapsed {
|
|
transform: rotateZ(-90deg);
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-3xs);
|
|
border: 1px solid var(--color-foreground-light);
|
|
border-radius: var(--border-radius-base);
|
|
background-color: var(--color-background-xlight);
|
|
margin-right: var(--spacing-2xs);
|
|
}
|
|
|
|
.icon-trigger {
|
|
border-radius: 16px 4px 4px 16px;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.info {
|
|
margin-left: var(--spacing-2xs);
|
|
color: var(--color-text-light);
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
.trigger-icon {
|
|
margin-left: var(--spacing-2xs);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.extra-info {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-light);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.notice {
|
|
margin-left: var(--spacing-2xl);
|
|
margin-top: var(--spacing-2xs);
|
|
padding-bottom: var(--spacing-2xs);
|
|
color: var(--color-text-base);
|
|
font-size: var(--font-size-2xs);
|
|
line-height: var(--font-line-height-loose);
|
|
}
|
|
</style>
|