From 4d48f903afa41a34ffa379ae4e9ffac208daac95 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 23 Aug 2024 22:42:20 +0200
Subject: [PATCH] refactor(editor): Convert Node.vue component to composition
 API (no-changelog) (#10535)

---
 packages/editor-ui/src/components/Node.vue | 1265 +++++++++-----------
 1 file changed, 588 insertions(+), 677 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 44372b826..1e35b38ed 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,12 +1,12 @@
 <template>
 	<div
-		v-if="data"
+		v-if="node"
 		:id="nodeId"
-		:ref="data.name"
+		:ref="node.name"
 		:class="nodeWrapperClass"
 		:style="nodeWrapperStyles"
 		data-test-id="canvas-node"
-		:data-name="data.name"
+		:data-name="node.name"
 		:data-node-type="nodeType?.name"
 		@contextmenu="(e: MouseEvent) => openContextMenu(e, 'node-right-click')"
 	>
@@ -30,19 +30,19 @@
 				<i v-if="isTriggerNode" class="trigger-icon">
 					<n8n-tooltip placement="bottom">
 						<template #content>
-							<span v-html="$locale.baseText('node.thisIsATriggerNode')" />
+							<span v-html="i18n.baseText('node.thisIsATriggerNode')" />
 						</template>
 						<FontAwesomeIcon icon="bolt" size="lg" />
 					</n8n-tooltip>
 				</i>
 				<div
-					v-if="!data.disabled"
+					v-if="!node.disabled"
 					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
 				>
 					<div v-if="hasIssues && !hideNodeIssues" class="node-issues" data-test-id="node-issues">
 						<n8n-tooltip :show-after="500" placement="bottom">
 							<template #content>
-								<TitledList :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
+								<TitledList :title="`${i18n.baseText('node.issues')}:`" :items="nodeIssues" />
 							</template>
 							<FontAwesomeIcon icon="exclamation-triangle" />
 						</n8n-tooltip>
@@ -68,7 +68,7 @@
 					</span>
 				</div>
 
-				<div class="node-executing-info" :title="$locale.baseText('node.nodeIsExecuting')">
+				<div class="node-executing-info" :title="i18n.baseText('node.nodeIsExecuting')">
 					<FontAwesomeIcon icon="sync-alt" spin />
 				</div>
 
@@ -91,7 +91,7 @@
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>
-							{{ $locale.baseText('node.discovery.pinData.canvas') }}
+							{{ i18n.baseText('node.discovery.pinData.canvas') }}
 						</template>
 						<span />
 					</n8n-tooltip>
@@ -103,7 +103,7 @@
 					:size="40"
 					:shrink="false"
 					:color-default="iconColorDefault"
-					:disabled="data.disabled"
+					:disabled="node.disabled"
 				/>
 			</div>
 
@@ -120,7 +120,7 @@
 				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
-				<p v-if="data.disabled">({{ $locale.baseText('node.disabled') }})</p>
+				<p v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</p>
 			</div>
 			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
 				{{ nodeSubtitle }}
@@ -135,7 +135,7 @@
 			@mousedown.stop
 		>
 			<div class="node-options-inner">
-				<n8n-icon-button
+				<N8nIconButton
 					v-if="!isConfigNode"
 					data-test-id="execute-node-button"
 					type="tertiary"
@@ -143,10 +143,10 @@
 					size="small"
 					icon="play"
 					:disabled="workflowRunning"
-					:title="$locale.baseText('node.testStep')"
+					:title="i18n.baseText('node.testStep')"
 					@click="executeNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="disable-node-button"
 					type="tertiary"
 					text
@@ -155,16 +155,16 @@
 					:title="nodeDisabledTitle"
 					@click="toggleDisableNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="delete-node-button"
 					type="tertiary"
 					size="small"
 					text
 					icon="trash"
-					:title="$locale.baseText('node.delete')"
+					:title="i18n.baseText('node.delete')"
 					@click="deleteNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="overflow-node-button"
 					type="tertiary"
 					size="small"
@@ -177,697 +177,608 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType, CSSProperties } from 'vue';
-import { mapStores } from 'pinia';
-import xss from 'xss';
+<script setup lang="ts">
 import { useStorage } from '@/composables/useStorage';
 import {
 	CUSTOM_API_CALL_KEY,
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
 	MANUAL_TRIGGER_NODE_TYPE,
 	NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
-	NOT_DUPLICATABLE_NODE_TYPES,
 	SIMULATE_NODE_TYPE,
 	SIMULATE_TRIGGER_NODE_TYPE,
 	WAIT_TIME_UNLIMITED,
 } from '@/constants';
-import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
 import type {
 	ConnectionTypes,
 	ExecutionSummary,
-	INodeInputConfiguration,
 	INodeOutputConfiguration,
-	INodeTypeDescription,
 	ITaskData,
 	NodeOperationError,
 	Workflow,
 } from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
+import type { StyleValue } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import xss from 'xss';
 
 import NodeIcon from '@/components/NodeIcon.vue';
 import TitledList from '@/components/TitledList.vue';
 
-import { get } from 'lodash-es';
-import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
+import { useContextMenu } from '@/composables/useContextMenu';
+import { useDebounce } from '@/composables/useDebounce';
+import { useI18n } from '@/composables/useI18n';
+import { useNodeBase } from '@/composables/useNodeBase';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { useTelemetry } from '@/composables/useTelemetry';
 import type { INodeUi, XYPosition } from '@/Interface';
-import { useUIStore } from '@/stores/ui.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { EnableNodeToggleCommand } from '@/models/history';
+import { useUIStore } from '@/stores/ui.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { useContextMenu } from '@/composables/useContextMenu';
-import { useNodeHelpers } from '@/composables/useNodeHelpers';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { usePinnedData } from '@/composables/usePinnedData';
-import { useDeviceSupport } from 'n8n-design-system';
-import { useDebounce } from '@/composables/useDebounce';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { useCanvasStore } from '@/stores/canvas.store';
-import { useHistoryStore } from '@/stores/history.store';
-import { useNodeBase } from '@/composables/useNodeBase';
+import { get } from 'lodash-es';
+import { N8nIconButton, useDeviceSupport } from 'n8n-design-system';
 
-export default defineComponent({
-	name: 'Node',
-	components: {
-		TitledList,
-		FontAwesomeIcon,
-		NodeIcon,
-	},
-	props: {
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-		disablePointerEvents: {
-			type: Boolean,
-			default: false,
-		},
-		hideNodeIssues: {
-			type: Boolean,
-			default: false,
-		},
-		name: {
-			type: String,
-			required: true,
-		},
-		instance: {
-			type: Object as PropType<BrowserJsPlumbInstance>,
-			required: true,
-		},
-		isReadOnly: {
-			type: Boolean,
-		},
-		isActive: {
-			type: Boolean,
-		},
-		hideActions: {
-			type: Boolean,
-		},
-		disableSelecting: {
-			type: Boolean,
-		},
-		showCustomTooltip: {
-			type: Boolean,
-		},
-		workflow: {
-			type: Object as PropType<Workflow>,
-			required: true,
-		},
-	},
-	emits: {
-		run: null,
-		runWorkflow: null,
-		removeNode: null,
-		toggleDisableNode: null,
-	},
-	setup(props, { emit }) {
-		const workflowsStore = useWorkflowsStore();
-		const contextMenu = useContextMenu();
-		const externalHooks = useExternalHooks();
-		const nodeHelpers = useNodeHelpers();
-		const node = workflowsStore.getNodeByName(props.name);
-		const pinnedData = usePinnedData(node);
-		const deviceSupport = useDeviceSupport();
-		const { callDebounced } = useDebounce();
+type Props = {
+	name: string;
+	instance: BrowserJsPlumbInstance;
+	workflow: Workflow;
+	isReadOnly?: boolean;
+	isActive?: boolean;
+	hideActions?: boolean;
+	disableSelecting?: boolean;
+	showCustomTooltip?: boolean;
+	isProductionExecutionPreview?: boolean;
+	disablePointerEvents?: boolean;
+	hideNodeIssues?: boolean;
+};
 
-		const nodeBase = useNodeBase({
-			name: props.name,
-			instance: props.instance,
-			workflowObject: props.workflow,
-			isReadOnly: props.isReadOnly,
-			emit: emit as (event: string, ...args: unknown[]) => void,
-		});
-
-		return {
-			contextMenu,
-			externalHooks,
-			nodeHelpers,
-			pinnedData,
-			deviceSupport,
-			...nodeBase,
-			callDebounced,
-		};
-	},
-	data() {
-		return {
-			isTouchActive: false,
-			nodeSubtitle: '',
-			showTriggerNodeTooltip: false,
-			pinDataDiscoveryTooltipVisible: false,
-			dragging: false,
-			unwatchWorkflowDataItems: () => {},
-		};
-	},
-	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useCanvasStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-			useHistoryStore,
-		),
-		data(): INodeUi | null {
-			return this.workflowsStore.getNodeByName(this.name);
-		},
-		nodeId(): string {
-			return this.data?.id || '';
-		},
-		showPinnedDataInfo(): boolean {
-			return this.pinnedData.hasData.value && !this.isProductionExecutionPreview;
-		},
-		isDuplicatable(): boolean {
-			if (!this.nodeType) return true;
-			if (NOT_DUPLICATABLE_NODE_TYPES.includes(this.nodeType.name)) return false;
-			return (
-				this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes
-			);
-		},
-		isScheduledGroup(): boolean {
-			return this.nodeType?.group.includes('schedule') === true;
-		},
-		iconColorDefault(): string | undefined {
-			if (this.isConfigNode) {
-				return 'var(--color-text-base)';
-			}
-			return undefined;
-		},
-		nodeRunData(): ITaskData[] {
-			if (!this.data) return [];
-
-			return this.workflowsStore.getWorkflowResultDataByNodeName(this.data.name) ?? [];
-		},
-		hasIssues(): boolean {
-			if (this.nodeExecutionStatus && ['crashed', 'error'].includes(this.nodeExecutionStatus))
-				return true;
-			if (this.pinnedData.hasData.value) return false;
-			if (this.data?.issues !== undefined && Object.keys(this.data.issues).length) {
-				return true;
-			}
-			return false;
-		},
-		workflowDataItems(): number {
-			const workflowResultDataNode = this.nodeRunData;
-			if (workflowResultDataNode === null) {
-				return 0;
-			}
-
-			return workflowResultDataNode.length;
-		},
-		canvasOffsetPosition() {
-			return this.uiStore.nodeViewOffsetPosition;
-		},
-		getTriggerNodeTooltip(): string | undefined {
-			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
-				const nodeName = this.$locale.shortNodeType(this.nodeType.name);
-				const { eventTriggerDescription } = this.nodeType;
-				return this.$locale
-					.nodeText()
-					.eventTriggerDescription(nodeName, eventTriggerDescription ?? '');
-			} else {
-				return this.$locale.baseText('node.waitingForYouToCreateAnEventIn', {
-					interpolate: {
-						nodeType: this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '',
-					},
-				});
-			}
-		},
-		isPollingTypeNode(): boolean {
-			return !!this.nodeType?.polling;
-		},
-		isExecuting(): boolean {
-			if (!this.data) return false;
-			return this.workflowsStore.isNodeExecuting(this.data.name);
-		},
-		isSingleActiveTriggerNode(): boolean {
-			const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
-			});
-
-			return nodes.length === 1;
-		},
-		isManualTypeNode(): boolean {
-			return this.data?.type === MANUAL_TRIGGER_NODE_TYPE;
-		},
-		isConfigNode(): boolean {
-			if (!this.data) return false;
-			return this.nodeTypesStore.isConfigNode(this.workflow, this.data, this.data.type ?? '');
-		},
-		isConfigurableNode(): boolean {
-			if (!this.data) return false;
-
-			return this.nodeTypesStore.isConfigurableNode(
-				this.workflow,
-				this.data,
-				this.data?.type ?? '',
-			);
-		},
-		isTriggerNode(): boolean {
-			return this.data ? this.nodeTypesStore.isTriggerNode(this.data.type) : false;
-		},
-		isTriggerNodeTooltipEmpty(): boolean {
-			return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
-		},
-		isNodeDisabled(): boolean | undefined {
-			return this.node && this.node.disabled;
-		},
-		nodeType(): INodeTypeDescription | null {
-			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
-		},
-		node(): INodeUi | undefined {
-			// same as this.data but reactive..
-			return this.workflowsStore.nodesByName[this.name] as INodeUi | undefined;
-		},
-		sameTypeNodes(): INodeUi[] {
-			return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data?.type);
-		},
-		nodeWrapperClass() {
-			const classes: Record<string, boolean> = {
-				'node-wrapper': true,
-				'node-wrapper--trigger': this.isTriggerNode,
-				'node-wrapper--configurable': this.isConfigurableNode,
-				'node-wrapper--config': this.isConfigNode,
-			};
-
-			if (this.outputs.length) {
-				const outputTypes = NodeHelpers.getConnectionTypes(this.outputs);
-				const otherOutputs = outputTypes.filter(
-					(outputName) => outputName !== NodeConnectionType.Main,
-				);
-				if (otherOutputs.length) {
-					otherOutputs.forEach((outputName) => {
-						classes[`node-wrapper--connection-type-${outputName}`] = true;
-					});
-				}
-			}
-
-			return classes;
-		},
-		nodeWrapperStyles() {
-			const styles: CSSProperties = {
-				left: this.position[0] + 'px',
-				top: this.position[1] + 'px',
-			};
-
-			if (this.node && this.nodeType) {
-				const inputs =
-					NodeHelpers.getNodeInputs(this.workflow, this.node, this.nodeType) ||
-					([] as Array<ConnectionTypes | INodeInputConfiguration>);
-				const inputTypes = NodeHelpers.getConnectionTypes(inputs);
-
-				const nonMainInputs = inputTypes.filter((input) => input !== NodeConnectionType.Main);
-				if (nonMainInputs.length) {
-					const requiredNonMainInputs = inputs.filter(
-						(input) => typeof input !== 'string' && input.required,
-					);
-
-					let spacerCount = 0;
-					if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
-						const requiredNonMainInputsCount = requiredNonMainInputs.length;
-						const optionalNonMainInputsCount = nonMainInputs.length - requiredNonMainInputsCount;
-						spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
-					}
-
-					styles['--configurable-node-input-count'] = nonMainInputs.length + spacerCount;
-				}
-
-				const mainInputs = inputTypes.filter((output) => output === NodeConnectionType.Main);
-				styles['--node-main-input-count'] = mainInputs.length;
-
-				let outputs = [] as Array<ConnectionTypes | INodeOutputConfiguration>;
-				if (this.workflow.nodes[this.node.name]) {
-					outputs = NodeHelpers.getNodeOutputs(this.workflow, this.node, this.nodeType);
-				}
-
-				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
-
-				const mainOutputs = outputTypes.filter((output) => output === NodeConnectionType.Main);
-				styles['--node-main-output-count'] = mainOutputs.length;
-			}
-
-			return styles;
-		},
-		nodeClass(): object {
-			return {
-				'node-box': true,
-				disabled: this.data?.disabled,
-				executing: this.isExecuting,
-			};
-		},
-		nodeExecutionStatus(): string {
-			const nodeExecutionRunData = this.workflowsStore.getWorkflowRunData?.[this.name];
-			if (nodeExecutionRunData) {
-				return nodeExecutionRunData.filter(Boolean)[0].executionStatus ?? '';
-			}
-			return '';
-		},
-		nodeIssues(): string[] {
-			const issues: string[] = [];
-			const nodeExecutionRunData = this.workflowsStore.getWorkflowRunData?.[this.name];
-			if (nodeExecutionRunData) {
-				nodeExecutionRunData.forEach((executionRunData) => {
-					if (executionRunData?.error) {
-						const { message, description } = executionRunData.error;
-						const issue = `${message}${description ? ` (${description})` : ''}`;
-						issues.push(xss(issue));
-					}
-				});
-			}
-			if (this.data?.issues !== undefined) {
-				issues.push(...NodeHelpers.nodeIssuesToString(this.data.issues, this.data));
-			}
-			return issues;
-		},
-		nodeDisabledTitle(): string {
-			return this.data?.disabled
-				? this.$locale.baseText('node.enable')
-				: this.$locale.baseText('node.disable');
-		},
-		position(): XYPosition {
-			return this.node ? this.node.position : [0, 0];
-		},
-		showDisabledLineThrough(): boolean {
-			return (
-				!this.isConfigurableNode &&
-				!!(this.data?.disabled && this.inputs.length === 1 && this.outputs.length === 1)
-			);
-		},
-		shortNodeType(): string {
-			return this.$locale.shortNodeType(this.data?.type ?? '');
-		},
-		nodeTitle(): string {
-			if (this.data?.name === 'Start') {
-				return this.$locale.headerText({
-					key: 'headers.start.displayName',
-					fallback: 'Start',
-				});
-			}
-
-			return this.data?.name ?? '';
-		},
-		waiting(): string | undefined {
-			const workflowExecution = this.workflowsStore.getWorkflowExecution as ExecutionSummary;
-
-			if (workflowExecution?.waitTill) {
-				const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
-				if (this.name === lastNodeExecuted) {
-					const waitDate = new Date(workflowExecution.waitTill);
-					if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
-						return this.$locale.baseText(
-							'node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall',
-						);
-					}
-					return this.$locale.baseText('node.nodeIsWaitingTill', {
-						interpolate: {
-							date: waitDate.toLocaleDateString(),
-							time: waitDate.toLocaleTimeString(),
-						},
-					});
-				}
-			}
-
-			return undefined;
-		},
-		workflowRunning(): boolean {
-			return this.uiStore.isActionActive['workflowRunning'];
-		},
-		nodeStyle() {
-			const returnStyles: {
-				[key: string]: string;
-			} = {};
-
-			let borderColor = '--color-foreground-xdark';
-
-			if (this.isConfigurableNode || this.isConfigNode) {
-				borderColor = '--color-foreground-dark';
-			}
-
-			if (this.data?.disabled) {
-				borderColor = '--color-foreground-base';
-			} else if (!this.isExecuting) {
-				if (this.hasIssues && !this.hideNodeIssues) {
-					// Do not set red border if there is an issue with the configuration node
-					if (
-						(this.nodeRunData?.[0]?.error as NodeOperationError)?.functionality !==
-						'configuration-node'
-					) {
-						borderColor = '--color-danger';
-						returnStyles['border-width'] = '2px';
-						returnStyles['border-style'] = 'solid';
-					}
-				} else if (!!this.waiting || this.showPinnedDataInfo) {
-					borderColor = '--color-node-pinned-border';
-				} else if (this.nodeExecutionStatus === 'unknown') {
-					borderColor = '--color-foreground-xdark';
-				} else if (this.workflowDataItems) {
-					returnStyles['border-width'] = '2px';
-					returnStyles['border-style'] = 'solid';
-					borderColor = '--color-success';
-				}
-			}
-
-			returnStyles['border-color'] = `var(${borderColor})`;
-
-			return returnStyles;
-		},
-		isSelected(): boolean {
-			return (
-				this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data?.name) !==
-				undefined
-			);
-		},
-		shiftOutputCount(): boolean {
-			return !!(this.nodeType && this.outputs.length > 2);
-		},
-		shouldShowTriggerTooltip(): boolean {
-			return (
-				!!this.node &&
-				this.isTriggerNode &&
-				!this.isPollingTypeNode &&
-				!this.pinnedData.hasData.value &&
-				!this.isNodeDisabled &&
-				this.workflowRunning &&
-				this.workflowDataItems === 0 &&
-				this.isSingleActiveTriggerNode &&
-				!this.isTriggerNodeTooltipEmpty &&
-				!this.hasIssues &&
-				!this.dragging
-			);
-		},
-		isContextMenuOpen(): boolean {
-			return (
-				this.contextMenu.isOpen.value &&
-				this.contextMenu.target.value?.source === 'node-button' &&
-				this.contextMenu.target.value.nodeId === this.data?.id
-			);
-		},
-		iconNodeType() {
-			if (
-				this.data?.type === SIMULATE_NODE_TYPE ||
-				this.data?.type === SIMULATE_TRIGGER_NODE_TYPE
-			) {
-				const icon = this.data.parameters?.icon as string;
-				const iconNodeType = this.workflow.expression.getSimpleParameterValue(
-					this.data,
-					icon,
-					'internal',
-					{},
-				);
-				if (iconNodeType && typeof iconNodeType === 'string') {
-					return this.nodeTypesStore.getNodeType(iconNodeType);
-				}
-			}
-
-			return this.nodeType;
-		},
-	},
-	watch: {
-		isActive(newValue, oldValue) {
-			if (!newValue && oldValue) {
-				this.setSubtitle();
-			}
-		},
-		canvasOffsetPosition() {
-			if (this.showTriggerNodeTooltip) {
-				this.showTriggerNodeTooltip = false;
-				setTimeout(() => {
-					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
-				}, 200);
-			}
-
-			if (this.pinDataDiscoveryTooltipVisible) {
-				this.pinDataDiscoveryTooltipVisible = false;
-				setTimeout(() => {
-					this.pinDataDiscoveryTooltipVisible = true;
-				}, 200);
-			}
-		},
-		shouldShowTriggerTooltip(shouldShowTriggerTooltip) {
-			if (shouldShowTriggerTooltip) {
-				setTimeout(() => {
-					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
-				}, 2500);
-			} else {
-				this.showTriggerNodeTooltip = false;
-			}
-		},
-		nodeRunData: {
-			deep: true,
-			handler(newValue) {
-				if (!this.data) {
-					return;
-				}
-
-				this.$emit('run', { name: this.data.name, data: newValue, waiting: !!this.waiting });
-			},
-		},
-	},
-	created() {
-		const hasSeenPinDataTooltip = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value;
-		if (!hasSeenPinDataTooltip) {
-			this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
-				this.showPinDataDiscoveryTooltip(dataItemsCount);
-			});
-		}
-	},
-	mounted() {
-		// Initialize the node
-		if (this.data !== null) {
-			try {
-				this.addNode(this.data);
-			} catch (error) {
-				// This breaks when new nodes are loaded into store but workflow tab is not currently active
-				// Shouldn't affect anything
-			}
-		}
-
-		setTimeout(() => {
-			this.setSubtitle();
-		}, 0);
-		if (this.nodeRunData) {
-			setTimeout(() => {
-				this.$emit('run', {
-					name: this.data?.name,
-					data: this.nodeRunData,
-					waiting: !!this.waiting,
-				});
-			}, 0);
-		}
-	},
-	methods: {
-		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
-			if (
-				!this.isTriggerNode ||
-				this.isManualTypeNode ||
-				this.isScheduledGroup ||
-				this.uiStore.isAnyModalOpen ||
-				dataItemsCount === 0
-			)
-				return;
-
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
-
-			this.pinDataDiscoveryTooltipVisible = true;
-			this.unwatchWorkflowDataItems();
-		},
-		setSubtitle() {
-			if (!this.data || !this.nodeType) return;
-			// why is this not a computed property? because it's a very expensive operation
-			// it requires expressions to resolve each subtitle...
-			// and ends up bogging down the UI with big workflows, for example when pasting a workflow or even opening a node...
-			// so we only update it when necessary (when node is mounted and when it's opened and closed (isActive))
-			try {
-				const nodeSubtitle =
-					this.nodeHelpers.getNodeSubtitle(this.data, this.nodeType, this.workflow) ?? '';
-
-				this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY) ? '' : nodeSubtitle;
-			} catch (e) {
-				// avoid breaking UI if expression error occurs
-			}
-		},
-		disableNode() {
-			if (this.data !== null) {
-				this.nodeHelpers.disableNodes([this.data]);
-				this.historyStore.pushCommandToUndo(
-					new EnableNodeToggleCommand(
-						this.data.name,
-						!this.data.disabled,
-						this.data.disabled === true,
-					),
-				);
-				this.$telemetry.track('User clicked node hover button', {
-					node_type: this.data.type,
-					button_name: 'disable',
-					workflow_id: this.workflowsStore.workflowId,
-				});
-			}
-		},
-
-		executeNode() {
-			this.$emit('runWorkflow', this.data?.name, 'Node.executeNode');
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'execute',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-
-		deleteNode() {
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'delete',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-
-			this.$emit('removeNode', this.data?.name);
-		},
-
-		toggleDisableNode(event: MouseEvent) {
-			(event.currentTarget as HTMLButtonElement).blur();
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'disable',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-			this.$emit('toggleDisableNode', this.data);
-		},
-
-		onClick(event: MouseEvent) {
-			void this.callDebounced(this.onClickDebounced, { debounceTime: 50, trailing: true }, event);
-		},
-
-		onClickDebounced(...args: unknown[]) {
-			const event = args[0] as MouseEvent;
-			const isDoubleClick = event.detail >= 2;
-			if (isDoubleClick) {
-				this.setNodeActive();
-			} else {
-				this.mouseLeftClick(event);
-			}
-		},
-
-		setNodeActive() {
-			this.ndvStore.activeNodeName = this.data ? this.data.name : '';
-			this.pinDataDiscoveryTooltipVisible = false;
-		},
-		touchStart() {
-			if (this.deviceSupport.isTouchDevice && !this.deviceSupport.isMacOs && !this.isTouchActive) {
-				this.isTouchActive = true;
-				setTimeout(() => {
-					this.isTouchActive = false;
-				}, 2000);
-			}
-		},
-		openContextMenu(event: MouseEvent, source: 'node-button' | 'node-right-click') {
-			if (this.data) {
-				this.contextMenu.open(event, { source, nodeId: this.data.id });
-			}
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	isReadOnly: false,
+	isActive: false,
+	hideActions: false,
+	disableSelecting: false,
+	showCustomTooltip: false,
+	isProductionExecutionPreview: false,
+	disablePointerEvents: false,
+	hideNodeIssues: false,
 });
+
+const emit = defineEmits<{
+	run: [data: { name: string; data: ITaskData[]; waiting: boolean }];
+	runWorkflow: [node: string, source: string];
+	removeNode: [node: string];
+	toggleDisableNode: [node: INodeUi];
+}>();
+
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const uiStore = useUIStore();
+
+const contextMenu = useContextMenu();
+const nodeHelpers = useNodeHelpers();
+const pinnedData = usePinnedData(workflowsStore.getNodeByName(props.name));
+const deviceSupport = useDeviceSupport();
+const { callDebounced } = useDebounce();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const nodeBase = useNodeBase({
+	name: props.name,
+	instance: props.instance,
+	workflowObject: props.workflow,
+	isReadOnly: props.isReadOnly,
+	emit: emit as (event: string, ...args: unknown[]) => void,
+});
+
+const isTouchActive = ref(false);
+const nodeSubtitle = ref('');
+const showTriggerNodeTooltip = ref(false);
+const pinDataDiscoveryTooltipVisible = ref(false);
+const dragging = ref(false);
+
+const node = computed(() => workflowsStore.getNodeByName(props.name));
+const nodeId = computed(() => node.value?.id ?? '');
+const showPinnedDataInfo = computed(
+	() => pinnedData.hasData.value && !props.isProductionExecutionPreview,
+);
+
+const isScheduledGroup = computed(() => nodeType.value?.group.includes('schedule') === true);
+const iconColorDefault = computed(() => {
+	if (isConfigNode.value) {
+		return 'var(--color-text-base)';
+	}
+	return undefined;
+});
+
+const nodeRunData = computed(() => {
+	if (!node.value) return [];
+
+	return workflowsStore.getWorkflowResultDataByNodeName(node.value.name) ?? [];
+});
+
+const hasIssues = computed(() => {
+	if (nodeExecutionStatus.value && ['crashed', 'error'].includes(nodeExecutionStatus.value))
+		return true;
+	if (pinnedData.hasData.value) return false;
+	if (node.value?.issues !== undefined && Object.keys(node.value.issues).length) {
+		return true;
+	}
+	return false;
+});
+
+const workflowDataItems = computed(() => {
+	const workflowResultDataNode = nodeRunData.value;
+	if (workflowResultDataNode === null) {
+		return 0;
+	}
+
+	return workflowResultDataNode.length;
+});
+const canvasOffsetPosition = computed(() => uiStore.nodeViewOffsetPosition);
+
+const getTriggerNodeTooltip = computed(() => {
+	if (nodeType.value !== null && nodeType.value.hasOwnProperty('eventTriggerDescription')) {
+		const nodeName = i18n.shortNodeType(nodeType.value.name);
+		const { eventTriggerDescription } = nodeType.value;
+		return i18n.nodeText().eventTriggerDescription(nodeName, eventTriggerDescription ?? '');
+	} else {
+		return i18n.baseText('node.waitingForYouToCreateAnEventIn', {
+			interpolate: {
+				nodeType: nodeType.value ? getTriggerNodeServiceName(nodeType.value) : '',
+			},
+		});
+	}
+});
+
+const isPollingTypeNode = computed(() => !!nodeType.value?.polling);
+const isExecuting = computed(() => {
+	if (!node.value) return false;
+	return workflowsStore.isNodeExecuting(node.value.name);
+});
+
+const isSingleActiveTriggerNode = computed(() => {
+	const nodes = workflowsStore.workflowTriggerNodes.filter((triggerNode) => {
+		const nodeType = nodeTypesStore.getNodeType(triggerNode.type, triggerNode.typeVersion);
+		return nodeType && nodeType.eventTriggerDescription !== '' && !triggerNode.disabled;
+	});
+
+	return nodes.length === 1;
+});
+
+const isManualTypeNode = computed(() => node.value?.type === MANUAL_TRIGGER_NODE_TYPE);
+
+const isConfigNode = computed(() => {
+	if (!node.value) return false;
+	return nodeTypesStore.isConfigNode(props.workflow, node.value, node.value.type ?? '');
+});
+
+const isConfigurableNode = computed(() => {
+	if (!node.value) return false;
+
+	return nodeTypesStore.isConfigurableNode(props.workflow, node.value, node.value?.type ?? '');
+});
+
+const isTriggerNode = computed(() =>
+	node.value ? nodeTypesStore.isTriggerNode(node.value.type) : false,
+);
+const isTriggerNodeTooltipEmpty = computed(() =>
+	nodeType.value !== null ? nodeType.value.eventTriggerDescription === '' : false,
+);
+const isNodeDisabled = computed(() => node.value?.disabled ?? false);
+const nodeType = computed(
+	() => node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
+);
+const nodeWrapperClass = computed(() => {
+	const classes: Record<string, boolean> = {
+		'node-wrapper': true,
+		'node-wrapper--trigger': isTriggerNode.value,
+		'node-wrapper--configurable': isConfigurableNode.value,
+		'node-wrapper--config': isConfigNode.value,
+	};
+
+	if (nodeBase.outputs.value.length) {
+		const outputTypes = NodeHelpers.getConnectionTypes(nodeBase.outputs.value);
+		const otherOutputs = outputTypes.filter((outputName) => outputName !== NodeConnectionType.Main);
+		if (otherOutputs.length) {
+			otherOutputs.forEach((outputName) => {
+				classes[`node-wrapper--connection-type-${outputName}`] = true;
+			});
+		}
+	}
+
+	return classes;
+});
+
+const nodeWrapperStyles = computed<StyleValue>(() => {
+	const styles: StyleValue = {
+		left: position.value[0] + 'px',
+		top: position.value[1] + 'px',
+	};
+
+	if (node.value && nodeType.value) {
+		const inputs = NodeHelpers.getNodeInputs(props.workflow, node.value, nodeType.value) ?? [];
+		const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+		const nonMainInputs = inputTypes.filter((input) => input !== NodeConnectionType.Main);
+		if (nonMainInputs.length) {
+			const requiredNonMainInputs = inputs.filter(
+				(input) => typeof input !== 'string' && input.required,
+			);
+
+			let spacerCount = 0;
+			if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
+				const requiredNonMainInputsCount = requiredNonMainInputs.length;
+				const optionalNonMainInputsCount = nonMainInputs.length - requiredNonMainInputsCount;
+				spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
+			}
+
+			styles['--configurable-node-input-count'] = nonMainInputs.length + spacerCount;
+		}
+
+		const mainInputs = inputTypes.filter((output) => output === NodeConnectionType.Main);
+		styles['--node-main-input-count'] = mainInputs.length;
+
+		let outputs = [] as Array<ConnectionTypes | INodeOutputConfiguration>;
+		if (props.workflow.nodes[node.value.name]) {
+			outputs = NodeHelpers.getNodeOutputs(props.workflow, node.value, nodeType.value);
+		}
+
+		const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+		const mainOutputs = outputTypes.filter((output) => output === NodeConnectionType.Main);
+		styles['--node-main-output-count'] = mainOutputs.length;
+	}
+
+	return styles;
+});
+
+const nodeClass = computed(() => {
+	return {
+		'node-box': true,
+		disabled: node.value?.disabled,
+		executing: isExecuting.value,
+	};
+});
+
+const nodeExecutionStatus = computed(() => {
+	const nodeExecutionRunData = workflowsStore.getWorkflowRunData?.[props.name];
+	if (nodeExecutionRunData) {
+		return nodeExecutionRunData.filter(Boolean)[0].executionStatus ?? '';
+	}
+	return '';
+});
+
+const nodeIssues = computed(() => {
+	const issues: string[] = [];
+	const nodeExecutionRunData = workflowsStore.getWorkflowRunData?.[props.name];
+	if (nodeExecutionRunData) {
+		nodeExecutionRunData.forEach((executionRunData) => {
+			if (executionRunData?.error) {
+				const { message, description } = executionRunData.error;
+				const issue = `${message}${description ? ` (${description})` : ''}`;
+				issues.push(xss(issue));
+			}
+		});
+	}
+	if (node.value?.issues !== undefined) {
+		issues.push(...NodeHelpers.nodeIssuesToString(node.value.issues, node.value));
+	}
+	return issues;
+});
+
+const nodeDisabledTitle = computed(() => {
+	return node.value?.disabled ? i18n.baseText('node.enable') : i18n.baseText('node.disable');
+});
+
+const position = computed<XYPosition>(() => (node.value ? node.value.position : [0, 0]));
+const showDisabledLineThrough = computed(
+	() =>
+		!isConfigurableNode.value &&
+		!!(
+			node.value?.disabled &&
+			nodeBase.inputs.value.length === 1 &&
+			nodeBase.outputs.value.length === 1
+		),
+);
+
+const nodeTitle = computed(() => {
+	if (node.value?.name === 'Start') {
+		return i18n.headerText({
+			key: 'headers.start.displayName',
+			fallback: 'Start',
+		});
+	}
+
+	return node.value?.name ?? '';
+});
+
+const waiting = computed(() => {
+	const workflowExecution = workflowsStore.getWorkflowExecution as ExecutionSummary;
+
+	if (workflowExecution?.waitTill) {
+		const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
+		if (props.name === lastNodeExecuted) {
+			const waitDate = new Date(workflowExecution.waitTill);
+			if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
+				return i18n.baseText('node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall');
+			}
+			return i18n.baseText('node.nodeIsWaitingTill', {
+				interpolate: {
+					date: waitDate.toLocaleDateString(),
+					time: waitDate.toLocaleTimeString(),
+				},
+			});
+		}
+	}
+
+	return undefined;
+});
+
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
+const nodeStyle = computed<StyleValue>(() => {
+	const returnStyles: StyleValue = {};
+
+	let borderColor = '--color-foreground-xdark';
+
+	if (isConfigurableNode.value || isConfigNode.value) {
+		borderColor = '--color-foreground-dark';
+	}
+
+	if (node.value?.disabled) {
+		borderColor = '--color-foreground-base';
+	} else if (!isExecuting.value) {
+		if (hasIssues.value && !props.hideNodeIssues) {
+			// Do not set red border if there is an issue with the configuration node
+			if (
+				(nodeRunData.value?.[0]?.error as NodeOperationError)?.functionality !==
+				'configuration-node'
+			) {
+				borderColor = '--color-danger';
+				returnStyles['border-width'] = '2px';
+				returnStyles['border-style'] = 'solid';
+			}
+		} else if (!!waiting.value || showPinnedDataInfo.value) {
+			borderColor = '--color-node-pinned-border';
+		} else if (nodeExecutionStatus.value === 'unknown') {
+			borderColor = '--color-foreground-xdark';
+		} else if (workflowDataItems.value) {
+			returnStyles['border-width'] = '2px';
+			returnStyles['border-style'] = 'solid';
+			borderColor = '--color-success';
+		}
+	}
+
+	returnStyles['border-color'] = `var(${borderColor})`;
+
+	return returnStyles;
+});
+
+const isSelected = computed(
+	() => uiStore.getSelectedNodes.find((n) => n.name === node.value?.name) !== undefined,
+);
+
+const shiftOutputCount = computed(() => !!(nodeType.value && nodeBase.outputs.value.length > 2));
+const shouldShowTriggerTooltip = computed(() => {
+	return (
+		!!node.value &&
+		isTriggerNode.value &&
+		!isPollingTypeNode.value &&
+		!pinnedData.hasData.value &&
+		!isNodeDisabled.value &&
+		workflowRunning.value &&
+		workflowDataItems.value === 0 &&
+		isSingleActiveTriggerNode.value &&
+		!isTriggerNodeTooltipEmpty.value &&
+		!hasIssues.value &&
+		!dragging.value
+	);
+});
+
+const isContextMenuOpen = computed(
+	() =>
+		contextMenu.isOpen.value &&
+		contextMenu.target.value?.source === 'node-button' &&
+		contextMenu.target.value.nodeId === node.value?.id,
+);
+
+const iconNodeType = computed(() => {
+	if (node.value?.type === SIMULATE_NODE_TYPE || node.value?.type === SIMULATE_TRIGGER_NODE_TYPE) {
+		const icon = node.value.parameters?.icon as string;
+		const iconValue = props.workflow.expression.getSimpleParameterValue(
+			node.value,
+			icon,
+			'internal',
+			{},
+		);
+		if (iconValue && typeof iconValue === 'string') {
+			return nodeTypesStore.getNodeType(iconValue);
+		}
+	}
+
+	return nodeType.value;
+});
+const hasSeenPinDataTooltip = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG);
+
+watch(
+	() => props.isActive,
+	(newValue, oldValue) => {
+		if (!newValue && oldValue) {
+			setSubtitle();
+		}
+	},
+);
+
+watch(canvasOffsetPosition, () => {
+	if (showTriggerNodeTooltip.value) {
+		showTriggerNodeTooltip.value = false;
+		setTimeout(() => {
+			showTriggerNodeTooltip.value = shouldShowTriggerTooltip.value;
+		}, 200);
+	}
+
+	if (pinDataDiscoveryTooltipVisible.value) {
+		pinDataDiscoveryTooltipVisible.value = false;
+		setTimeout(() => {
+			pinDataDiscoveryTooltipVisible.value = true;
+		}, 200);
+	}
+});
+
+watch(shouldShowTriggerTooltip, (newValue) => {
+	if (newValue) {
+		setTimeout(() => {
+			showTriggerNodeTooltip.value = shouldShowTriggerTooltip.value;
+		}, 2500);
+	} else {
+		showTriggerNodeTooltip.value = false;
+	}
+});
+
+watch(
+	nodeRunData,
+	(newValue) => {
+		if (!node.value) {
+			return;
+		}
+
+		emit('run', { name: node.value.name, data: newValue, waiting: !!waiting.value });
+	},
+	{ deep: true },
+);
+
+const unwatchWorkflowDataItems = watch(workflowDataItems, (dataItemsCount: number) => {
+	if (!hasSeenPinDataTooltip.value) showPinDataDiscoveryTooltip(dataItemsCount);
+});
+
+onMounted(() => {
+	// Initialize the node
+	if (node.value !== null) {
+		try {
+			nodeBase.addNode(node.value);
+		} catch (error) {
+			// This breaks when new nodes are loaded into store but workflow tab is not currently active
+			// Shouldn't affect anything
+		}
+	}
+
+	setTimeout(() => {
+		setSubtitle();
+	}, 0);
+
+	setTimeout(() => {
+		if (nodeRunData.value && node.value) {
+			emit('run', {
+				name: node.value.name,
+				data: nodeRunData.value,
+				waiting: !!waiting.value,
+			});
+		}
+	}, 0);
+});
+
+function showPinDataDiscoveryTooltip(dataItemsCount: number): void {
+	if (
+		!isTriggerNode.value ||
+		isManualTypeNode.value ||
+		isScheduledGroup.value ||
+		uiStore.isAnyModalOpen ||
+		dataItemsCount === 0
+	)
+		return;
+
+	useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+
+	pinDataDiscoveryTooltipVisible.value = true;
+	unwatchWorkflowDataItems();
+}
+
+function setSubtitle() {
+	if (!node.value || !nodeType.value) return;
+	// why is this not a computed property? because it's a very expensive operation
+	// it requires expressions to resolve each subtitle...
+	// and ends up bogging down the UI with big workflows, for example when pasting a workflow or even opening a node...
+	// so we only update it when necessary (when node is mounted and when it's opened and closed (isActive))
+	try {
+		const subtitle = nodeHelpers.getNodeSubtitle(node.value, nodeType.value, props.workflow) ?? '';
+
+		nodeSubtitle.value = subtitle.includes(CUSTOM_API_CALL_KEY) ? '' : subtitle;
+	} catch (e) {
+		// avoid breaking UI if expression error occurs
+	}
+}
+
+function executeNode() {
+	if (!node.value) return;
+	emit('runWorkflow', node.value.name, 'Node.executeNode');
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value.type,
+		button_name: 'execute',
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+
+function deleteNode() {
+	if (!node.value) return;
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value.type,
+		button_name: 'delete',
+		workflow_id: workflowsStore.workflowId,
+	});
+
+	emit('removeNode', node.value.name);
+}
+
+function toggleDisableNode(event: MouseEvent) {
+	if (!node.value) return;
+	(event.currentTarget as HTMLButtonElement).blur();
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value?.type,
+		button_name: 'disable',
+		workflow_id: workflowsStore.workflowId,
+	});
+	emit('toggleDisableNode', node.value);
+}
+
+function onClick(event: MouseEvent) {
+	void callDebounced(onClickDebounced, { debounceTime: 50, trailing: true }, event);
+}
+
+function onClickDebounced(...args: unknown[]) {
+	const event = args[0] as MouseEvent;
+	const isDoubleClick = event.detail >= 2;
+	if (isDoubleClick) {
+		setNodeActive();
+	} else {
+		nodeBase.mouseLeftClick(event);
+	}
+}
+
+function setNodeActive() {
+	ndvStore.activeNodeName = node.value ? node.value.name : '';
+	pinDataDiscoveryTooltipVisible.value = false;
+}
+
+function touchStart() {
+	if (deviceSupport.isTouchDevice && !deviceSupport.isMacOs && !isTouchActive.value) {
+		isTouchActive.value = true;
+		setTimeout(() => {
+			isTouchActive.value = false;
+		}, 2000);
+	}
+}
+
+const touchEnd = nodeBase.touchEnd;
+
+function openContextMenu(event: MouseEvent, source: 'node-button' | 'node-right-click') {
+	if (node.value) {
+		contextMenu.open(event, { source, nodeId: node.value.id });
+	}
+}
 </script>
 
 <style lang="scss" scoped>