n8n-editor-ui 1.66.0 → 1.67.0

package/dist/assets/TemplateList-BncQL783.js

@@ -0,0 +1,371 @@
+import { d as defineComponent, p as computed, c as openBlock, h as createElementBlock, F as Fragment, z as renderList, n as normalizeClass, i as createVNode, d4 as _sfc_main$3, t as toDisplayString, f as createCommentVNode, h_ as filterTemplateNodes, _ as _export_sfc, w as withCtx, k as createTextVNode, A as unref, i0 as abbreviateNumber, h$ as _sfc_main$4, e as createBlock, I as withModifiers, g as useI18n, l as resolveComponent, r as ref, o as onMounted, v as onBeforeUnmount, j as createBaseVNode } from "./index-7YFQEQmt.js";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "NodeList",
+  props: {
+    nodes: {},
+    limit: { default: 4 },
+    size: { default: "sm" }
+  },
+  setup(__props) {
+    const props = __props;
+    const filteredCoreNodes = computed(() => {
+      return filterTemplateNodes(props.nodes);
+    });
+    const hiddenNodes = computed(() => {
+      return filteredCoreNodes.value.length - countNodesToBeSliced(filteredCoreNodes.value);
+    });
+    const slicedNodes = computed(() => {
+      return filteredCoreNodes.value.slice(0, countNodesToBeSliced(filteredCoreNodes.value));
+    });
+    const countNodesToBeSliced = (nodes2) => {
+      if (nodes2.length > props.limit) {
+        return props.limit - 1;
+      } else {
+        return props.limit;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.list)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(slicedNodes.value, (node) => {
+          return openBlock(), createElementBlock("div", {
+            key: node.name,
+            class: normalizeClass([_ctx.$style.container, _ctx.$style[_ctx.size]])
+          }, [
+            createVNode(_sfc_main$3, {
+              "node-type": node,
+              size: _ctx.size === "md" ? 24 : 18,
+              "show-tooltip": true
+            }, null, 8, ["node-type", "size"])
+          ], 2);
+        }), 128)),
+        filteredCoreNodes.value.length > _ctx.limit + 1 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([_ctx.$style.button, _ctx.size === "md" ? _ctx.$style.buttonMd : _ctx.$style.buttonSm])
+        }, " +" + toDisplayString(hiddenNodes.value), 3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const list = "_list_10uzg_1";
+const container = "_container_10uzg_9";
+const sm = "_sm_10uzg_14";
+const md = "_md_10uzg_18";
+const button$1 = "_button_10uzg_22";
+const buttonSm = "_buttonSm_10uzg_36";
+const buttonMd = "_buttonMd_10uzg_43";
+const style0$2 = {
+  list,
+  container,
+  sm,
+  md,
+  button: button$1,
+  buttonSm,
+  buttonMd
+};
+const cssModules$2 = {
+  "$style": style0$2
+};
+const NodeList = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const _hoisted_1$1 = { key: 1 };
+const _hoisted_2$1 = { key: 0 };
+const nodesToBeShown = 5;
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "TemplateCard",
+  props: {
+    workflow: {},
+    lastItem: { type: Boolean, default: false },
+    firstItem: { type: Boolean, default: false },
+    useWorkflowButton: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    simpleView: { type: Boolean, default: false }
+  },
+  emits: ["useWorkflow", "click"],
+  setup(__props, { emit: __emit }) {
+    const i18n = useI18n();
+    const emit = __emit;
+    function onUseWorkflowClick(e) {
+      emit("useWorkflow", e);
+    }
+    function onCardClick(e) {
+      emit("click", e);
+    }
+    return (_ctx, _cache) => {
+      const _component_n8n_loading = resolveComponent("n8n-loading");
+      const _component_n8n_heading = resolveComponent("n8n-heading");
+      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      const _component_n8n_text = resolveComponent("n8n-text");
+      const _component_n8n_button = resolveComponent("n8n-button");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.card,
+          _ctx.lastItem && _ctx.$style.last,
+          _ctx.firstItem && _ctx.$style.first,
+          !_ctx.loading && _ctx.$style.loaded
+        ]),
+        "data-test-id": "template-card",
+        onClick: onCardClick
+      }, [
+        _ctx.loading ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.loading)
+        }, [
+          createVNode(_component_n8n_loading, {
+            rows: 2,
+            "shrink-last": false,
+            loading: _ctx.loading
+          }, null, 8, ["loading"])
+        ], 2)) : _ctx.workflow ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+          createVNode(_component_n8n_heading, {
+            bold: true,
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.workflow.name), 1)
+            ]),
+            _: 1
+          }),
+          !_ctx.simpleView ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.content)
+          }, [
+            _ctx.workflow.totalViews ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+              createVNode(_component_n8n_text, {
+                size: "small",
+                color: "text-light"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_font_awesome_icon, { icon: "eye" }),
+                  createTextVNode(" " + toDisplayString(unref(abbreviateNumber)(_ctx.workflow.totalViews)), 1)
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true),
+            _ctx.workflow.totalViews ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.line),
+              textContent: "|"
+            }, null, 2)) : createCommentVNode("", true),
+            createVNode(_component_n8n_text, {
+              size: "small",
+              color: "text-light"
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  date: _ctx.workflow.createdAt
+                }, null, 8, ["date"])
+              ]),
+              _: 1
+            }),
+            _ctx.workflow.user ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass(_ctx.$style.line),
+              textContent: "|"
+            }, null, 2)) : createCommentVNode("", true),
+            _ctx.workflow.user ? (openBlock(), createBlock(_component_n8n_text, {
+              key: 3,
+              size: "small",
+              color: "text-light"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("template.byAuthor", {
+                  interpolate: { name: _ctx.workflow.user.username }
+                })), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        !_ctx.loading && _ctx.workflow ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass([_ctx.$style.nodesContainer, _ctx.useWorkflowButton && _ctx.$style.hideOnHover])
+        }, [
+          _ctx.workflow.nodes ? (openBlock(), createBlock(NodeList, {
+            key: 0,
+            nodes: _ctx.workflow.nodes,
+            limit: nodesToBeShown,
+            size: "md"
+          }, null, 8, ["nodes"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        _ctx.useWorkflowButton ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: normalizeClass(_ctx.$style.buttonContainer)
+        }, [
+          _ctx.useWorkflowButton ? (openBlock(), createBlock(_component_n8n_button, {
+            key: 0,
+            outline: "",
+            label: "Use workflow",
+            "data-test-id": "use-workflow-button",
+            onClick: withModifiers(onUseWorkflowClick, ["stop"])
+          })) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const nodes$1 = "_nodes_psqnp_1";
+const icon = "_icon_psqnp_8";
+const card = "_card_psqnp_12";
+const hideOnHover = "_hideOnHover_psqnp_24";
+const buttonContainer = "_buttonContainer_psqnp_27";
+const loaded = "_loaded_psqnp_38";
+const first = "_first_psqnp_42";
+const last = "_last_psqnp_48";
+const content = "_content_psqnp_53";
+const line = "_line_psqnp_58";
+const loading = "_loading_psqnp_64";
+const nodesContainer = "_nodesContainer_psqnp_69";
+const style0$1 = {
+  nodes: nodes$1,
+  icon,
+  card,
+  hideOnHover,
+  buttonContainer,
+  loaded,
+  first,
+  last,
+  content,
+  line,
+  loading,
+  nodesContainer
+};
+const cssModules$1 = {
+  "$style": style0$1
+};
+const TemplateCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const _hoisted_1 = {
+  key: 0,
+  "data-test-id": "template-count-label"
+};
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = {
+  key: 1,
+  "data-test-id": "templates-loading-container"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TemplateList",
+  props: {
+    workflows: { default: () => [] },
+    infiniteScrollEnabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    useWorkflowButton: { type: Boolean, default: false },
+    totalWorkflows: { default: 0 },
+    simpleView: { type: Boolean, default: false },
+    totalCount: { default: 0 }
+  },
+  emits: ["loadMore", "openTemplate", "useWorkflow"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const loader = ref(null);
+    onMounted(() => {
+      if (props.infiniteScrollEnabled) {
+        const content2 = document.getElementById("content");
+        if (content2) {
+          content2.addEventListener("scroll", onScroll);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      const content2 = document.getElementById("content");
+      if (content2) {
+        content2.removeEventListener("scroll", onScroll);
+      }
+    });
+    function onScroll() {
+      const loaderRef = loader.value;
+      if (!loaderRef || props.loading) {
+        return;
+      }
+      const rect = loaderRef.getBoundingClientRect();
+      const inView = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+      if (inView) {
+        emit("loadMore");
+      }
+    }
+    function onCardClick(event, id) {
+      emit("openTemplate", { event, id });
+    }
+    function onUseWorkflow(event, id) {
+      emit("useWorkflow", { event, id });
+    }
+    return (_ctx, _cache) => {
+      const _component_n8n_heading = resolveComponent("n8n-heading");
+      return _ctx.loading || _ctx.workflows.length ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.list)
+      }, [
+        !_ctx.simpleView ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createVNode(_component_n8n_heading, {
+            bold: true,
+            size: "medium",
+            color: "text-light"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.$locale.baseText("templates.workflows")) + " ", 1),
+              _ctx.totalCount > 0 ? (openBlock(), createElementBlock("span", _hoisted_1, "(" + toDisplayString(_ctx.totalCount) + ")", 1)) : createCommentVNode("", true),
+              !_ctx.loading && _ctx.totalWorkflows ? (openBlock(), createElementBlock("span", {
+                key: 1,
+                textContent: toDisplayString(`(${_ctx.totalWorkflows})`)
+              }, null, 8, _hoisted_2)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 2)) : createCommentVNode("", true),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.container)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.workflows, (workflow, index) => {
+            return openBlock(), createBlock(TemplateCard, {
+              key: workflow.id,
+              workflow,
+              "first-item": index === 0,
+              "simple-view": _ctx.simpleView,
+              "last-item": index === _ctx.workflows.length - 1 && !_ctx.loading,
+              "use-workflow-button": _ctx.useWorkflowButton,
+              onClick: (e) => onCardClick(e, workflow.id),
+              onUseWorkflow: (e) => onUseWorkflow(e, workflow.id)
+            }, null, 8, ["workflow", "first-item", "simple-view", "last-item", "use-workflow-button", "onClick", "onUseWorkflow"]);
+          }), 128)),
+          _ctx.infiniteScrollEnabled ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "loader",
+            ref: loader
+          }, null, 512)) : createCommentVNode("", true),
+          _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(4, (n) => {
+              return createVNode(TemplateCard, {
+                key: "index-" + n,
+                loading: true,
+                "first-item": _ctx.workflows.length === 0 && n === 1,
+                "last-item": n === 4
+              }, null, 8, ["first-item", "last-item"]);
+            }), 64))
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const header = "_header_1ivn7_1";
+const workflowButton = "_workflowButton_1ivn7_5";
+const button = "_button_1ivn7_5";
+const nodes = "_nodes_1ivn7_8";
+const style0 = {
+  header,
+  workflowButton,
+  button,
+  nodes
+};
+const cssModules = {
+  "$style": style0
+};
+const TemplateList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NodeList as N,
+  TemplateList as T
+};

package/dist/assets/{TemplatesCollectionView-BxBSljqH.js → TemplatesCollectionView-C9PKPo5y.js}

@@ -1,8 +1,8 @@
-import { i as isFullTemplatesCollection, _ as __unplugin_components_1 } from "./TemplateDetails-BsLVCpdi.js";
-import { _ as __unplugin_components_2 } from "./TemplateList-Bn7ePHhc.js";
-import { T as TemplatesView } from "./TemplatesView-TPTpSdeD.js";
-import { d as defineComponent, aC as useTemplatesStore, gZ as usePostHog, cZ as useNodeTypesStore, U as useRoute, b as useRouter, a3 as useDocumentTitle, r as ref, p as computed, H as watch, o as onMounted, c as openBlock, e as createBlock, aE as createSlots, w as withCtx, j as createBaseVNode, n as normalizeClass, A as unref, h as createElementBlock, i as createVNode, f as createCommentVNode, k as createTextVNode, t as toDisplayString, g as useI18n, V as VIEWS, l as resolveComponent, aF as useExternalHooks, aj as useTelemetry, _ as _export_sfc } from "./index-QAq8Sa9R.js";
-import { u as useTemplateWorkflow } from "./templateActions-ClPy1BRa.js";
+import { i as isFullTemplatesCollection, _ as __unplugin_components_1 } from "./TemplateDetails-Pi49rFlS.js";
+import { T as TemplateList } from "./TemplateList-BncQL783.js";
+import { T as TemplatesView } from "./TemplatesView-DkP9JWHk.js";
+import { d as defineComponent, aD as useTemplatesStore, h1 as usePostHog, c_ as useNodeTypesStore, U as useRoute, b as useRouter, a3 as useDocumentTitle, r as ref, p as computed, H as watch, o as onMounted, c as openBlock, e as createBlock, aF as createSlots, w as withCtx, j as createBaseVNode, n as normalizeClass, A as unref, h as createElementBlock, i as createVNode, f as createCommentVNode, k as createTextVNode, t as toDisplayString, g as useI18n, V as VIEWS, l as resolveComponent, aG as useExternalHooks, ak as useTelemetry, _ as _export_sfc } from "./index-7YFQEQmt.js";
+import { u as useTemplateWorkflow } from "./templateActions-QFQD8amJ.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TemplatesCollectionView",
   setup(__props) {
@@ -40,13 +40,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, 50);
     };
     const onOpenTemplate = ({ event, id }) => {
-      navigateTo(event, VIEWS.TEMPLATE, id);
+      navigateTo(event, VIEWS.TEMPLATE, `${id}`);
     };
     const onUseWorkflow = async ({ event, id }) => {
       await useTemplateWorkflow({
         posthogStore,
         router,
-        templateId: id,
+        templateId: `${id}`,
         inNewBrowserTab: event.metaKey || event.ctrlKey,
         templatesStore,
         externalHooks,
@@ -160,7 +160,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     loading: loading.value
                   }, null, 8, ["content", "images", "loading"])
                 ], 2)) : createCommentVNode("", true),
-                createVNode(__unplugin_components_2, {
+                createVNode(TemplateList, {
                   "infinite-scroll-enabled": false,
                   loading: loading.value,
                   "use-workflow-button": true,