@n8n/design-system 2.2.1 → 2.3.0

package/dist/n8n-design-system.es.js

@@ -16320,10 +16320,12 @@ var Tooltip_default$1 = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 					default: withCtx(() => [renderSlot(e.$slots, "description", {}, () => [withDirectives(createElementVNode("span", null, null, 512), [[r, e.description]])])]),
 					_: 3
 				})], 2)) : createCommentVNode("", !0),
-				createVNode(Tooltip_default$1, { disabled: !e.buttonDisabled }, {
+				e.buttonText ? (openBlock(), createBlock(Tooltip_default$1, {
+					key: 3,
+					disabled: !e.buttonDisabled
+				}, {
 					content: withCtx(() => [renderSlot(e.$slots, "disabledButtonTooltip")]),
-					default: withCtx(() => [e.buttonText ? (openBlock(), createBlock(unref(N8nButton_default), {
-						key: 0,
+					default: withCtx(() => [createVNode(unref(N8nButton_default), {
 						label: e.buttonText,
 						type: e.buttonType,
 						disabled: e.buttonDisabled,
@@ -16336,15 +16338,15 @@ var Tooltip_default$1 = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @_
 						"type",
 						"disabled",
 						"icon"
-					])) : createCommentVNode("", !0)]),
+					])]),
 					_: 3
-				}, 8, ["disabled"]),
+				}, 8, ["disabled"])) : createCommentVNode("", !0),
 				e.$slots.additionalContent ? (openBlock(), createElementBlock("div", {
-					key: 3,
+					key: 4,
 					class: normalizeClass(e.$style["additional-content"])
 				}, [renderSlot(e.$slots, "additionalContent")], 2)) : createCommentVNode("", !0),
 				e.calloutText ? (openBlock(), createBlock(unref(N8nCallout_default), {
-					key: 4,
+					key: 5,
 					theme: e.calloutTheme,
 					icon: e.calloutIcon,
 					class: normalizeClass(e.$style.callout)
@@ -44349,33 +44351,43 @@ var import_markdown_it = /* @__PURE__ */ __toESM(require_markdown_it()), import_
 	emits: ["click"],
 	setup(e, { emit: n }) {
 		let r = e, i = n, o = computed(() => {
-			if (r.item.route) return r.item.route.to;
-			if (r.item.link) return r.item.link.href;
-		}), s = computed(() => {
+			if (!r.item.disabled) {
+				if (r.item.route) return r.item.route.to;
+				if (r.item.link) return r.item.link.href;
+			}
+		}), s = () => {
+			r.item.disabled || i("click");
+		}, l = computed(() => {
 			if (typeof r.item.icon == "object" && r.item.icon?.type === "icon") return r.item.icon.value;
 			if (typeof r.item.icon == "string") return r.item.icon;
-		}), l = computed(() => {
+		}), d = computed(() => {
 			if (typeof r.item.icon != "string") return r.item.icon?.color;
-		});
+		}), f = computed(() => !r.compact && !(r.item.disabled && r.item.disabledReason)), k = computed(() => {
+			if (r.item.disabled && r.item.disabledReason) return r.item.disabledReason;
+			if (r.compact) return r.item.label;
+		}), $ = computed(() => r.item.disabled && r.item.disabledReason ? "top" : "right");
 		return (e, n) => (openBlock(), createElementBlock("div", {
 			"data-test-id": e.item.id,
 			class: normalizeClass(e.$style.menuItemWrapper)
 		}, [createVNode(unref(N8nTooltip_default), {
-			placement: "right",
-			disabled: !e.compact,
+			placement: $.value,
+			disabled: f.value,
 			"show-after": 500
-		}, createSlots({
+		}, {
+			content: withCtx(() => [createTextVNode(toDisplayString(k.value), 1)]),
 			default: withCtx(() => [createVNode(unref(N8nRoute_default), {
 				id: e.item.id,
 				to: o.value,
 				role: "menuitem",
 				class: normalizeClass([e.$style.menuItem, {
 					[e.$style.active]: e.active,
-					[e.$style.compact]: e.compact
+					[e.$style.compact]: e.compact,
+					[e.$style.disabled]: e.item.disabled
 				}]),
 				"aria-label": r.ariaLabel ?? r.item.label,
+				"aria-disabled": e.item.disabled,
 				"data-test-id": "menu-item",
-				onClick: n[0] ||= (e) => i("click")
+				onClick: s
 			}, {
 				default: withCtx(() => [
 					e.item.icon ? (openBlock(), createElementBlock("div", {
@@ -44384,23 +44396,23 @@ var import_markdown_it = /* @__PURE__ */ __toESM(require_markdown_it()), import_
 					}, [e.item.icon && typeof e.item.icon == "object" && e.item.icon.type === "emoji" ? (openBlock(), createBlock(unref(N8nText_default), {
 						key: 0,
 						class: normalizeClass(e.$style.menuItemEmoji),
-						color: l.value
+						color: d.value
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(e.item.icon.value), 1)]),
 						_: 1
-					}, 8, ["class", "color"])) : s.value ? (openBlock(), createBlock(unref(N8nIcon_default), {
+					}, 8, ["class", "color"])) : l.value ? (openBlock(), createBlock(unref(N8nIcon_default), {
 						key: 1,
-						color: l.value,
-						icon: s.value
+						color: d.value,
+						icon: l.value
 					}, null, 8, ["color", "icon"])) : createCommentVNode("", !0)], 2)) : createCommentVNode("", !0),
 					createElementVNode("div", { class: normalizeClass(e.$style.menuItemLabel) }, [e.compact ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(N8nText_default), {
 						key: 0,
 						class: normalizeClass(e.$style.menuItemText),
-						color: "text-dark"
+						color: e.item.disabled ? "text-light" : "text-dark"
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(e.item.label), 1)]),
 						_: 1
-					}, 8, ["class"])), !e.compact && e.item.beta ? (openBlock(), createBlock(BetaTag_default, { key: 1 })) : createCommentVNode("", !0)], 2),
+					}, 8, ["class", "color"])), !e.compact && e.item.beta ? (openBlock(), createBlock(BetaTag_default, { key: 1 })) : createCommentVNode("", !0)], 2),
 					e.item.children && !e.compact ? (openBlock(), createBlock(unref(N8nIcon_default), {
 						key: 1,
 						icon: "chevron-right",
@@ -44412,25 +44424,23 @@ var import_markdown_it = /* @__PURE__ */ __toESM(require_markdown_it()), import_
 				"id",
 				"to",
 				"class",
-				"aria-label"
+				"aria-label",
+				"aria-disabled"
 			])]),
-			_: 2
-		}, [e.compact ? {
-			name: "content",
-			fn: withCtx(() => [createTextVNode(toDisplayString(e.item.label), 1)]),
-			key: "0"
-		} : void 0]), 1032, ["disabled"])], 10, _hoisted_1$22));
+			_: 1
+		}, 8, ["placement", "disabled"])], 10, _hoisted_1$22));
 	}
 }), [["__cssModules", { $style: {
-	menuItemWrapper: "_menuItemWrapper_13uwg_1",
-	menuItem: "_menuItem_13uwg_1",
-	menuItemIcon: "_menuItemIcon_13uwg_22",
-	active: "_active_13uwg_25",
-	compact: "_compact_13uwg_32",
-	menuItemText: "_menuItemText_13uwg_41",
-	notification: "_notification_13uwg_62",
-	menuItemEmoji: "_menuItemEmoji_13uwg_73",
-	menuItemLabel: "_menuItemLabel_13uwg_82"
+	menuItemWrapper: "_menuItemWrapper_khzjs_1",
+	menuItem: "_menuItem_khzjs_1",
+	disabled: "_disabled_khzjs_22",
+	menuItemIcon: "_menuItemIcon_khzjs_22",
+	active: "_active_khzjs_25",
+	compact: "_compact_khzjs_32",
+	menuItemText: "_menuItemText_khzjs_45",
+	notification: "_notification_khzjs_66",
+	menuItemEmoji: "_menuItemEmoji_khzjs_77",
+	menuItemLabel: "_menuItemLabel_khzjs_86"
 } }]]), ConditionalRouterLink_default = /* @__PURE__ */ defineComponent({
 	name: "ConditionalRouterLink",
 	inheritAttrs: !1,