admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 10:31:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Standardize components sections order (no-changelog) (#10540)

Browse Source
This commit is contained in:
Ricardo Espinoza
2024-08-24 09:24:08 -04:00
committed by GitHub
parent 4d48f903af
commit 609bc4d97d
215 changed files with 10387 additions and 10376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
View File

@@ -1,25 +1,3 @@
<template>
<n8n-node-creator-node
draggable
:class="$style.action"
:title="action.displayName"
:is-trigger="isTriggerAction(action)"
data-keyboard-nav="true"
@dragstart="onDragStart"
@dragend="onDragEnd"
>
<template #dragContent>
<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
</div>
</template>
<template #icon>
<NodeIcon :node-type="action" />
</template>
</n8n-node-creator-node>
</template>
<script setup lang="ts">
import { reactive, computed, toRefs } from 'vue';
import type { ActionTypeDescription, SimplifiedNodeType } from '@/Interface';
@@ -116,6 +94,28 @@ function onDragEnd(): void {
const { draggableDataTransfer, dragging } = toRefs(state);
</script>
<template>
<n8n-node-creator-node
draggable
:class="$style.action"
:title="action.displayName"
:is-trigger="isTriggerAction(action)"
data-keyboard-nav="true"
@dragstart="onDragStart"
@dragend="onDragEnd"
>
<template #dragContent>
<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
</div>
</template>
<template #icon>
<NodeIcon :node-type="action" />
</template>
</n8n-node-creator-node>
</template>
<style lang="scss" module>
.action {
--node-creator-name-size: var(--font-size-2xs);

12
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
View File

@@ -1,9 +1,3 @@
<template>
<div :class="$style.label">
<span :class="$style.name" v-text="item.key" />
</div>
</template>
<script lang="ts" setup>
import type { LabelItemProps } from '@/Interface';
@@ -13,6 +7,12 @@ export interface Props {
defineProps<Props>();
</script>
<template>
<div :class="$style.label">
<span :class="$style.name" v-text="item.key" />
</div>
</template>
<style lang="scss" module>
.label {
margin-left: var(--spacing-s);

20
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
View File

@@ -1,3 +1,13 @@
<script setup lang="ts">
import type { LinkItemProps } from '@/Interface';
export interface Props {
link: LinkItemProps;
}
defineProps<Props>();
</script>
<template>
<n8n-node-creator-node
:class="$style.creatorLink"
@@ -13,16 +23,6 @@
</n8n-node-creator-node>
</template>
<script setup lang="ts">
import type { LinkItemProps } from '@/Interface';
export interface Props {
link: LinkItemProps;
}
defineProps<Props>();
</script>
<style lang="scss" module>
.creatorLink {
--action-arrow-color: var(--color-text-light);

85
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
View File

@@ -1,45 +1,3 @@
<template>
<!-- Node Item is draggable only if it doesn't contain actions -->
<n8n-node-creator-node
:draggable="!showActionArrow"
:class="$style.nodeItem"
:description="description"
:title="displayName"
:show-action-arrow="showActionArrow"
:is-trigger="isTrigger"
:data-test-id="dataTestId"
:tag="nodeType.tag"
@dragstart="onDragStart"
@dragend="onDragEnd"
>
<template #icon>
<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
</template>
<template v-if="isCommunityNode" #tooltip>
<p
:class="$style.communityNodeIcon"
@click="onCommunityNodeTooltipClick"
v-html="
i18n.baseText('generic.communityNode.tooltip', {
interpolate: {
packageName: nodeType.name.split('.')[0],
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
},
})
"
/>
</template>
<template #dragContent>
<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
</div>
</template>
</n8n-node-creator-node>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { SimplifiedNodeType } from '@/Interface';
@@ -181,6 +139,49 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
}
}
</script>
<template>
<!-- Node Item is draggable only if it doesn't contain actions -->
<n8n-node-creator-node
:draggable="!showActionArrow"
:class="$style.nodeItem"
:description="description"
:title="displayName"
:show-action-arrow="showActionArrow"
:is-trigger="isTrigger"
:data-test-id="dataTestId"
:tag="nodeType.tag"
@dragstart="onDragStart"
@dragend="onDragEnd"
>
<template #icon>
<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
</template>
<template v-if="isCommunityNode" #tooltip>
<p
:class="$style.communityNodeIcon"
@click="onCommunityNodeTooltipClick"
v-html="
i18n.baseText('generic.communityNode.tooltip', {
interpolate: {
packageName: nodeType.name.split('.')[0],
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
},
})
"
/>
</template>
<template #dragContent>
<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
</div>
</template>
</n8n-node-creator-node>
</template>
<style lang="scss" module>
.nodeItem {
--trigger-icon-background-color: #{$trigger-icon-background-color};

32
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
View File

@@ -1,3 +1,19 @@
<script setup lang="ts">
import type { SubcategoryItemProps } from '@/Interface';
import { camelCase } from 'lodash-es';
import { computed } from 'vue';
import { useI18n } from '@/composables/useI18n';
import type { BaseTextKey } from '@/plugins/i18n';
export interface Props {
item: SubcategoryItemProps;
}
const props = defineProps<Props>();
const i18n = useI18n();
const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
</script>
<template>
<n8n-node-creator-node
:class="$style.subCategory"
@@ -20,22 +36,6 @@
</n8n-node-creator-node>
</template>
<script setup lang="ts">
import type { SubcategoryItemProps } from '@/Interface';
import { camelCase } from 'lodash-es';
import { computed } from 'vue';
import { useI18n } from '@/composables/useI18n';
import type { BaseTextKey } from '@/plugins/i18n';
export interface Props {
item: SubcategoryItemProps;
}
const props = defineProps<Props>();
const i18n = useI18n();
const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
</script>
<style lang="scss" module>
.subCategory {
--action-arrow-color: var(--color-text-light);

20
packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
View File

@@ -1,3 +1,13 @@
<script setup lang="ts">
import type { ViewItemProps } from '@/Interface';
export interface Props {
view: ViewItemProps;
}
defineProps<Props>();
</script>
<template>
<n8n-node-creator-node
:class="$style.view"
@@ -13,16 +23,6 @@
</n8n-node-creator-node>
</template>
<script setup lang="ts">
import type { ViewItemProps } from '@/Interface';
export interface Props {
view: ViewItemProps;
}
defineProps<Props>();
</script>
<style lang="scss" module>
.view {
--action-arrow-color: var(--color-text-light);

52
packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
View File

@@ -1,29 +1,3 @@
<template>
<div>
<aside
:class="{
[$style.nodeCreatorScrim]: true,
[$style.active]: showScrim,
}"
/>
<SlideTransition>
<div
v-if="active"
ref="nodeCreator"
:class="{ [$style.nodeCreator]: true }"
:style="nodeCreatorInlineStyle"
data-test-id="node-creator"
@dragover="onDragOver"
@drop="onDrop"
@mousedown="onMouseDown"
@mouseup="onMouseUp"
>
<NodesListPanel @node-type-selected="onNodeTypeSelected" />
</div>
</SlideTransition>
</div>
</template>
<script setup lang="ts">
import { watch, reactive, toRefs, computed, onBeforeUnmount } from 'vue';
@@ -163,6 +137,32 @@ onBeforeUnmount(() => {
});
</script>
<template>
<div>
<aside
:class="{
[$style.nodeCreatorScrim]: true,
[$style.active]: showScrim,
}"
/>
<SlideTransition>
<div
v-if="active"
ref="nodeCreator"
:class="{ [$style.nodeCreator]: true }"
:style="nodeCreatorInlineStyle"
data-test-id="node-creator"
@dragover="onDragOver"
@drop="onDrop"
@mousedown="onMouseDown"
@mouseup="onMouseUp"
>
<NodesListPanel @node-type-selected="onNodeTypeSelected" />
</div>
</SlideTransition>
</div>
</template>
<style module lang="scss">
:global(strong) {
font-weight: var(--font-weight-bold);

38
packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
View File

@@ -1,3 +1,22 @@
<script setup lang="ts">
import {
REQUEST_NODE_FORM_URL,
REGULAR_NODE_CREATOR_VIEW,
TRIGGER_NODE_CREATOR_VIEW,
} from '@/constants';
import type { NodeFilterType } from '@/Interface';
import NoResultsIcon from './NoResultsIcon.vue';
export interface Props {
showIcon?: boolean;
showRequest?: boolean;
rootView?: NodeFilterType;
}
defineProps<Props>();
</script>
<template>
<div
:class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }"
@@ -44,25 +63,6 @@
</div>
</template>
<script setup lang="ts">
import {
REQUEST_NODE_FORM_URL,
REGULAR_NODE_CREATOR_VIEW,
TRIGGER_NODE_CREATOR_VIEW,
} from '@/constants';
import type { NodeFilterType } from '@/Interface';
import NoResultsIcon from './NoResultsIcon.vue';
export interface Props {
showIcon?: boolean;
showRequest?: boolean;
rootView?: NodeFilterType;
}
defineProps<Props>();
</script>
<style lang="scss" module>
.noResults {
background-color: $node-creator-no-results-background-color;

50
packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
View File

@@ -1,28 +1,3 @@
<template>
<div :class="$style.searchContainer" data-test-id="search-bar">
<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
<font-awesome-icon icon="search" size="sm" />
</div>
<div :class="$style.text">
<input
ref="inputRef"
:placeholder="placeholder"
:value="modelValue"
:class="$style.input"
autofocus
data-test-id="node-creator-search-bar"
tabindex="0"
@input="onInput"
/>
</div>
<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
<button :class="[$style.clear, $style.clickable]">
<font-awesome-icon icon="times-circle" />
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -75,6 +50,31 @@ defineExpose({
});
</script>
<template>
<div :class="$style.searchContainer" data-test-id="search-bar">
<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
<font-awesome-icon icon="search" size="sm" />
</div>
<div :class="$style.text">
<input
ref="inputRef"
:placeholder="placeholder"
:value="modelValue"
:class="$style.input"
autofocus
data-test-id="node-creator-search-bar"
tabindex="0"
@input="onInput"
/>
</div>
<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
<button :class="[$style.clear, $style.clickable]">
<font-awesome-icon icon="times-circle" />
</button>
</div>
</div>
</template>
<style lang="scss" module>
.searchContainer {
display: flex;