@atom8n/n8n-editor-ui 2.2.0

package/dist/assets/WorkflowLocation-CQ9Sq-2y.js

@@ -0,0 +1,164 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, M as createVNode, P as defineComponent, T as createBlock, bt as withCtx, et as openBlock, j as createTextVNode, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { bn as N8nText_default, mt as N8nLink_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import { t as router_default } from "./router-DNpzz3GH.js";
+var WorkflowLocation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "WorkflowLocation",
+	props: {
+		workflowId: {},
+		workflowName: { default: void 0 },
+		homeProject: { default: void 0 },
+		parentFolder: { default: void 0 },
+		asLinks: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const i18n = useI18n();
+		const projectName = computed(() => {
+			if (props.homeProject?.type === "personal") return i18n.baseText("projects.menu.personal");
+			return props.homeProject?.name ?? "";
+		});
+		const projectLink = computed(() => {
+			if (!props.homeProject) return "";
+			return router_default.resolve({
+				name: VIEWS.PROJECTS_WORKFLOWS,
+				params: { projectId: props.homeProject.id }
+			}).fullPath;
+		});
+		const folderLink = computed(() => {
+			if (!props.homeProject || !props.parentFolder) return "";
+			return `/projects/${props.homeProject.id}/folders/${props.parentFolder.id}/workflows`;
+		});
+		const workflowLink = computed(() => {
+			if (!props.workflowId) return "";
+			return router_default.resolve({
+				name: VIEWS.WORKFLOW,
+				params: { name: props.workflowId }
+			}).fullPath;
+		});
+		const hasGrandparentFolder = computed(() => !!props.parentFolder?.parentFolderId);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style["location-container"]) }, [
+				_ctx.homeProject ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(_ctx.$style.truncate)
+				}, [_ctx.asLinks ? (openBlock(), createBlock(unref(N8nLink_default), {
+					key: 0,
+					"data-test-id": "workflow-location-project-link",
+					to: projectLink.value,
+					theme: "text",
+					class: normalizeClass([_ctx.$style["location-link"], _ctx.$style.truncate]),
+					"new-window": true
+				}, {
+					default: withCtx(() => [createVNode(unref(N8nText_default), {
+						class: normalizeClass(_ctx.$style.truncate),
+						"data-test-id": "workflow-location-project-name"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(projectName.value), 1)]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				}, 8, ["to", "class"])) : (openBlock(), createBlock(unref(N8nText_default), {
+					key: 1,
+					class: normalizeClass(_ctx.$style.truncate),
+					"data-test-id": "workflow-location-project-name"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(projectName.value), 1)]),
+					_: 1
+				}, 8, ["class"]))], 2)) : createCommentVNode("", true),
+				_ctx.parentFolder || _ctx.workflowName ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(_ctx.$style.separator),
+					"data-test-id": "workflow-location-separator"
+				}, " / ", 2)) : createCommentVNode("", true),
+				hasGrandparentFolder.value ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(_ctx.$style.grandparent),
+					"data-test-id": "workflow-location-grandparent"
+				}, [createBaseVNode("span", { class: normalizeClass(_ctx.$style.ellipsis) }, "...", 2), createBaseVNode("span", {
+					class: normalizeClass(_ctx.$style.separator),
+					"data-test-id": "workflow-location-ellipsis-separator"
+				}, "/", 2)], 2)) : createCommentVNode("", true),
+				_ctx.parentFolder ? (openBlock(), createElementBlock("span", {
+					key: 3,
+					class: normalizeClass(_ctx.$style["parent-folder"])
+				}, [_ctx.asLinks && _ctx.homeProject ? (openBlock(), createBlock(unref(N8nLink_default), {
+					key: 0,
+					"data-test-id": "workflow-location-folder-link",
+					to: folderLink.value,
+					theme: "text",
+					class: normalizeClass([_ctx.$style["location-link"], _ctx.$style.truncate]),
+					"new-window": true
+				}, {
+					default: withCtx(() => [createVNode(unref(N8nText_default), {
+						class: normalizeClass(_ctx.$style.truncate),
+						"data-test-id": "workflow-location-folder-name"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(_ctx.parentFolder.name), 1)]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				}, 8, ["to", "class"])) : (openBlock(), createBlock(unref(N8nText_default), {
+					key: 1,
+					class: normalizeClass(_ctx.$style.truncate),
+					"data-test-id": "workflow-location-folder-name"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.parentFolder.name), 1)]),
+					_: 1
+				}, 8, ["class"]))], 2)) : createCommentVNode("", true),
+				_ctx.parentFolder && _ctx.workflowName ? (openBlock(), createElementBlock("span", {
+					key: 4,
+					class: normalizeClass(_ctx.$style.separator)
+				}, "/", 2)) : createCommentVNode("", true),
+				_ctx.workflowName ? (openBlock(), createElementBlock("span", {
+					key: 5,
+					class: normalizeClass([_ctx.$style["workflow-name"], _ctx.$style.truncate])
+				}, [_ctx.asLinks && _ctx.workflowId ? (openBlock(), createBlock(unref(N8nLink_default), {
+					key: 0,
+					"data-test-id": "workflow-location-workflow-link",
+					to: workflowLink.value,
+					theme: "text",
+					class: normalizeClass([_ctx.$style["location-link"], _ctx.$style.truncate]),
+					"new-window": true
+				}, {
+					default: withCtx(() => [createVNode(unref(N8nText_default), {
+						class: normalizeClass(_ctx.$style.truncate),
+						"data-test-id": "workflow-location-workflow-name"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(_ctx.workflowName), 1)]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				}, 8, ["to", "class"])) : (openBlock(), createBlock(unref(N8nText_default), {
+					key: 1,
+					class: normalizeClass(_ctx.$style.truncate),
+					"data-test-id": "workflow-location-workflow-name"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(_ctx.workflowName), 1)]),
+					_: 1
+				}, 8, ["class"]))], 2)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+const ellipsis = "_ellipsis_1dhhj_132";
+const separator = "_separator_1dhhj_137";
+const grandparent = "_grandparent_1dhhj_142";
+const truncate = "_truncate_1dhhj_156";
+var WorkflowLocation_vue_vue_type_style_index_0_lang_module_default = {
+	"location-container": "_location-container_1dhhj_123",
+	ellipsis,
+	separator,
+	grandparent,
+	"parent-folder": "_parent-folder_1dhhj_148",
+	truncate,
+	"location-link": "_location-link_1dhhj_164",
+	"workflow-name": "_workflow-name_1dhhj_168"
+};
+var WorkflowLocation_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowLocation_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowLocation_vue_vue_type_style_index_0_lang_module_default }]]);
+export { WorkflowLocation_default as t };

package/dist/assets/WorkflowOnboardingView-C49gt0Jr.js

@@ -0,0 +1,61 @@
+import { D as createElementBlock, P as defineComponent, Z as onMounted, et as openBlock } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import "./truncate-C0KYt7i3.js";
+import { P as useWorkflowsStore, l as useTemplatesStore, vr as useLoadingService } from "./builder.store-Czk2ipDE.js";
+import "./empty-BuGRxzl4.js";
+import { _ as useRoute, v as useRouter } from "./get-BcEmeOxn.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+import "./_baseOrderBy-N8Be_6z6.js";
+import "./dateformat-hG8NERse.js";
+import "./useDebounce-Br5_1ug-.js";
+var WorkflowOnboardingView_default = /* @__PURE__ */ defineComponent({
+	__name: "WorkflowOnboardingView",
+	setup(__props) {
+		const loadingService = useLoadingService();
+		const templateStore = useTemplatesStore();
+		const workflowsStore = useWorkflowsStore();
+		const router = useRouter();
+		const route = useRoute();
+		const i18n = useI18n();
+		const openWorkflowTemplate = async (templateId) => {
+			try {
+				loadingService.startLoading();
+				const template = await templateStore.getFixedWorkflowTemplate(templateId);
+				if (!template) throw new Error();
+				const name = i18n.baseText("onboarding.title", { interpolate: { name: template.name } });
+				const workflow = await workflowsStore.createNewWorkflow({
+					name,
+					connections: template.workflow.connections,
+					nodes: template.workflow.nodes.map(workflowsStore.convertTemplateNodeToNodeUi),
+					pinData: template.workflow.pinData,
+					settings: template.workflow.settings,
+					meta: { onboardingId: templateId }
+				});
+				await router.replace({
+					name: VIEWS.WORKFLOW,
+					params: { name: workflow.id },
+					query: { onboardingId: templateId }
+				});
+				loadingService.stopLoading();
+			} catch (e) {
+				await router.replace({ name: VIEWS.NEW_WORKFLOW });
+				loadingService.stopLoading();
+				throw new Error(`Could not load onboarding template ${templateId}`);
+			}
+		};
+		onMounted(async () => {
+			const templateId = route.params.id;
+			if (!templateId || typeof templateId !== "string") {
+				await router.replace({ name: VIEWS.NEW_WORKFLOW });
+				return;
+			}
+			await openWorkflowTemplate(templateId);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div");
+		};
+	}
+});
+export { WorkflowOnboardingView_default as default };

package/dist/assets/WorkflowPreview-CXdvv4Nq.js

@@ -0,0 +1,186 @@
+import { C as computed, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, Z as onMounted, _t as watch, et as openBlock, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { Sn as N8nSpinner_default, at as N8nLoading_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { Zn as useProjectsStore, y as useToast } from "./builder.store-Czk2ipDE.js";
+import { t as useExecutionsStore } from "./executions.store-B9uRYwgv.js";
+var _hoisted_1 = ["src"];
+var WorkflowPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "WorkflowPreview",
+	props: {
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		mode: { default: "workflow" },
+		workflow: { default: void 0 },
+		executionId: { default: void 0 },
+		executionMode: { default: void 0 },
+		nodeId: { default: void 0 },
+		loaderType: { default: "image" },
+		canOpenNDV: {
+			type: Boolean,
+			default: true
+		},
+		hideNodeIssues: {
+			type: Boolean,
+			default: false
+		},
+		focusOnLoad: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const i18n = useI18n();
+		const toast = useToast();
+		const executionsStore = useExecutionsStore();
+		const projectsStore = useProjectsStore();
+		const iframeRef = ref(null);
+		const nodeViewDetailsOpened = ref(false);
+		const ready = ref(false);
+		const insideIframe = ref(false);
+		const scrollX = ref(0);
+		const scrollY = ref(0);
+		const iframeSrc = computed(() => {
+			const apiBaseUrl = window.__API_BASE_URL__;
+			if (apiBaseUrl) return `${apiBaseUrl}/workflows/demo`;
+			return `${window.BASE_PATH ?? "/"}workflows/demo`;
+		});
+		const showPreview = computed(() => {
+			return !props.loading && (props.mode === "workflow" && !!props.workflow || props.mode === "execution" && !!props.executionId) && ready.value;
+		});
+		const loadWorkflow = () => {
+			try {
+				if (!props.workflow) throw new Error(i18n.baseText("workflowPreview.showError.missingWorkflow"));
+				if (!props.workflow.nodes || !Array.isArray(props.workflow.nodes)) throw new Error(i18n.baseText("workflowPreview.showError.arrayEmpty"));
+				iframeRef.value?.contentWindow?.postMessage?.(JSON.stringify({
+					command: "openWorkflow",
+					workflow: props.workflow,
+					canOpenNDV: props.canOpenNDV,
+					hideNodeIssues: props.hideNodeIssues,
+					projectId: projectsStore.currentProjectId
+				}), "*");
+			} catch (error) {
+				toast.showError(error, i18n.baseText("workflowPreview.showError.previewError.title"), i18n.baseText("workflowPreview.showError.previewError.message"));
+			}
+		};
+		const loadExecution = () => {
+			try {
+				if (!props.executionId) throw new Error(i18n.baseText("workflowPreview.showError.missingExecution"));
+				iframeRef.value?.contentWindow?.postMessage?.(JSON.stringify({
+					command: "openExecution",
+					executionId: props.executionId,
+					executionMode: props.executionMode ?? "",
+					nodeId: props.nodeId,
+					canOpenNDV: props.canOpenNDV,
+					projectId: projectsStore.currentProjectId
+				}), "*");
+				if (executionsStore.activeExecution) iframeRef.value?.contentWindow?.postMessage?.(JSON.stringify({
+					command: "setActiveExecution",
+					executionId: executionsStore.activeExecution.id
+				}), "*");
+			} catch (error) {
+				toast.showError(error, i18n.baseText("workflowPreview.showError.previewError.title"), i18n.baseText("workflowPreview.executionMode.showError.previewError.message"));
+			}
+		};
+		const onMouseEnter = () => {
+			insideIframe.value = true;
+			scrollX.value = window.scrollX;
+			scrollY.value = window.scrollY;
+		};
+		const onMouseLeave = () => {
+			insideIframe.value = false;
+		};
+		const receiveMessage = ({ data }) => {
+			if (!data?.includes?.("\"command\"")) return;
+			try {
+				const json = JSON.parse(data);
+				if (json.command === "n8nReady") onReady();
+				else if (json.command === "openNDV") onOpenNDV();
+				else if (json.command === "closeNDV") onCloseNDV();
+				else if (json.command === "error") onError();
+			} catch (e) {
+				console.error(e);
+			}
+		};
+		const onReady = () => {
+			ready.value = true;
+			if (props.focusOnLoad) setTimeout(() => {
+				iframeRef.value?.contentWindow?.focus();
+			});
+		};
+		const onOpenNDV = () => {
+			nodeViewDetailsOpened.value = true;
+		};
+		const onCloseNDV = () => {
+			nodeViewDetailsOpened.value = false;
+		};
+		const onError = () => {
+			emit("close");
+		};
+		const onDocumentScroll = () => {
+			if (insideIframe.value) window.scrollTo(scrollX.value, scrollY.value);
+		};
+		onMounted(() => {
+			window.addEventListener("message", receiveMessage);
+			document.addEventListener("scroll", onDocumentScroll);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("message", receiveMessage);
+			document.removeEventListener("scroll", onDocumentScroll);
+		});
+		watch(() => showPreview.value, () => {
+			if (showPreview.value) {
+				if (props.mode === "workflow") loadWorkflow();
+				else if (props.mode === "execution") loadExecution();
+			}
+		});
+		watch(() => props.executionId, () => {
+			if (props.mode === "execution" && props.executionId) loadExecution();
+		});
+		watch(() => props.workflow, () => {
+			if (props.mode === "workflow" && props.workflow) loadWorkflow();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(_ctx.$style.container) }, [_ctx.loaderType === "image" && !showPreview.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(_ctx.$style.imageLoader)
+			}, [createVNode(unref(N8nLoading_default), {
+				loading: !showPreview.value,
+				rows: 1,
+				variant: "image"
+			}, null, 8, ["loading"])], 2)) : _ctx.loaderType === "spinner" && !showPreview.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(_ctx.$style.spinner)
+			}, [createVNode(unref(N8nSpinner_default), { type: "dots" })], 2)) : createCommentVNode("", true), createBaseVNode("iframe", {
+				ref_key: "iframeRef",
+				ref: iframeRef,
+				class: normalizeClass({
+					[_ctx.$style.workflow]: !nodeViewDetailsOpened.value,
+					[_ctx.$style.executionPreview]: _ctx.mode === "execution",
+					[_ctx.$style.openNDV]: nodeViewDetailsOpened.value,
+					[_ctx.$style.show]: showPreview.value
+				}),
+				src: iframeSrc.value,
+				"data-test-id": "workflow-preview-iframe",
+				onMouseenter: onMouseEnter,
+				onMouseleave: onMouseLeave
+			}, null, 42, _hoisted_1)], 2);
+		};
+	}
+});
+var WorkflowPreview_vue_vue_type_style_index_0_lang_module_default = {
+	container: "_container_5lcvo_123",
+	workflow: "_workflow_5lcvo_130",
+	show: "_show_5lcvo_136",
+	openNDV: "_openNDV_5lcvo_142",
+	spinner: "_spinner_5lcvo_151",
+	imageLoader: "_imageLoader_5lcvo_159",
+	executionPreview: "_executionPreview_5lcvo_167"
+};
+var WorkflowPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default(WorkflowPreview_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": WorkflowPreview_vue_vue_type_style_index_0_lang_module_default }]]);
+export { WorkflowPreview_default as t };

package/dist/assets/WorkflowTagsDropdown-QwbICWjN.js

@@ -0,0 +1,71 @@
+import { C as computed, P as defineComponent, T as createBlock, et as openBlock } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { Hn as useTagsStore, aa as useUIStore, as as TAGS_MANAGER_MODAL_KEY } from "./builder.store-Czk2ipDE.js";
+import { t as TagsDropdown_default } from "./TagsDropdown-Bvx_Hd6Q.js";
+var WorkflowTagsDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "WorkflowTagsDropdown",
+	props: {
+		placeholder: { default: "" },
+		modelValue: { default: () => [] },
+		createEnabled: {
+			type: Boolean,
+			default: true
+		},
+		eventBus: { default: null }
+	},
+	emits: [
+		"update:modelValue",
+		"esc",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const tagsStore = useTagsStore();
+		const uiStore = useUIStore();
+		const selectedTags = computed({
+			get: () => props.modelValue,
+			set: (value) => emit("update:modelValue", value)
+		});
+		const allTags = computed(() => tagsStore.allTags);
+		const isLoading = computed(() => tagsStore.isLoading);
+		const tagsById = computed(() => tagsStore.tagsById);
+		async function createTag(name) {
+			return await tagsStore.create(name);
+		}
+		function handleManageTags() {
+			uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
+		}
+		function handleEsc() {
+			emit("esc");
+		}
+		function handleBlur() {
+			emit("blur");
+		}
+		tagsStore.fetchAll();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TagsDropdown_default, {
+				modelValue: selectedTags.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedTags.value = $event),
+				placeholder: _ctx.placeholder,
+				"create-enabled": _ctx.createEnabled,
+				"event-bus": _ctx.eventBus,
+				"all-tags": allTags.value,
+				"is-loading": isLoading.value,
+				"tags-by-id": tagsById.value,
+				"create-tag": createTag,
+				onManageTags: handleManageTags,
+				onEsc: handleEsc,
+				onBlur: handleBlur
+			}, null, 8, [
+				"modelValue",
+				"placeholder",
+				"create-enabled",
+				"event-bus",
+				"all-tags",
+				"is-loading",
+				"tags-by-id"
+			]);
+		};
+	}
+});
+export { WorkflowTagsDropdown_default as t };