@comfyorg/design-system 1.0.1 → 1.2.0

package/dist/shared/MenuContent-ChqlM3xA.js

@@ -0,0 +1,80 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { menuContentClass } from "../menu/menuStyles.js";
+import { createBlock, createPropsRestProxy, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DropdownMenuContent, DropdownMenuPortal, injectDropdownMenuRootContext, useForwardPropsEmits } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuContent.vue
+var MenuContent_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MenuContent",
+	props: {
+		forceMount: { type: Boolean },
+		loop: { type: Boolean },
+		memoDependencies: {},
+		side: {},
+		sideOffset: {},
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		to: {},
+		width: { default: "default" },
+		maxHeight: { default: "available" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, [
+			"class",
+			"to",
+			"width",
+			"maxHeight"
+		]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		const rootContext = injectDropdownMenuRootContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuPortal), {
+				key: Number(unref(rootContext).open.value),
+				to: __props.to
+			}, {
+				default: withCtx(() => [createVNode(unref(DropdownMenuContent), mergeProps({
+					...unref(forwarded),
+					..._ctx.$attrs
+				}, { class: unref(cn)(unref(menuContentClass), __props.width === "trigger" && "w-(--reka-dropdown-menu-trigger-width) min-w-0 overflow-hidden", __props.width === "compact" && "w-max min-w-46.5", __props.maxHeight === "available" && "max-h-(--reka-dropdown-menu-content-available-height)", __props.maxHeight === "compact" && "max-h-64", __props.maxHeight === "viewport" && "max-h-[min(40vh,var(--reka-dropdown-menu-content-available-height))]", __props.class) }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			}, 8, ["to"]);
+		};
+	}
+});
+//#endregion
+export { MenuContent_default as t };

package/dist/shared/MenuItemContent--dPNoBmU.js

@@ -0,0 +1,69 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { t as Switch_default } from "./Switch-DsCzHpDU.js";
+import { t as Badge_default } from "./Badge-D3uWa3yk.js";
+import { t as OverlayIcon_default } from "./OverlayIcon-DntJI-mm.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, toDisplayString, toValue, unref, withCtx } from "vue";
+//#region src/components/menu/MenuItemContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1" };
+var _hoisted_2 = { class: "block truncate" };
+var _hoisted_3 = {
+	key: 0,
+	class: "block max-w-64 text-xs whitespace-normal text-muted-foreground"
+};
+var _hoisted_4 = {
+	key: 4,
+	"data-testid": "menu-item-submenu-indicator",
+	class: "ml-auto icon-[lucide--chevron-right]"
+};
+var _hoisted_5 = {
+	key: 7,
+	class: "ml-auto rounded-sm border bg-secondary p-1 text-xs text-nowrap text-muted-foreground"
+};
+//#endregion
+//#region src/components/menu/MenuItemContent.vue
+var MenuItemContent_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuItemContent",
+	props: {
+		hasSubmenu: { type: Boolean },
+		item: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				__props.item.overlayIcon ? (openBlock(), createBlock(unref(OverlayIcon_default), normalizeProps(mergeProps({ key: 0 }, __props.item.overlayIcon)), null, 16)) : __props.item.icon ? (openBlock(), createElementBlock("i", {
+					key: 1,
+					class: normalizeClass(__props.item.icon)
+				}, null, 2)) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(toValue(__props.item.label)), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(toValue(__props.item.description)), 1)) : createCommentVNode("", true)]),
+				__props.item.trailingIcon ? (openBlock(), createElementBlock("i", {
+					key: 2,
+					class: normalizeClass(unref(cn)(__props.item.trailingIcon, "ml-auto"))
+				}, null, 2)) : createCommentVNode("", true),
+				__props.item.badge ? (openBlock(), createBlock(unref(Badge_default), {
+					key: 3,
+					variant: "pill",
+					severity: "default",
+					class: "ml-3 px-1.5 uppercase"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.item.badge), 1)]),
+					_: 1
+				})) : createCommentVNode("", true),
+				__props.hasSubmenu ? (openBlock(), createElementBlock("i", _hoisted_4)) : __props.item.presentation === "switch" ? (openBlock(), createBlock(unref(Switch_default), {
+					key: 5,
+					"model-value": toValue(__props.item.checked),
+					class: "pointer-events-none ml-4",
+					"aria-hidden": "true",
+					readonly: "",
+					tabindex: "-1"
+				}, null, 8, ["model-value"])) : __props.item.checked !== void 0 ? (openBlock(), createElementBlock("i", {
+					key: 6,
+					"data-testid": "menu-item-indicator",
+					class: normalizeClass(unref(cn)("ml-auto icon-[lucide--check]", !toValue(__props.item.checked) && "invisible"))
+				}, null, 2)) : createCommentVNode("", true),
+				!__props.hasSubmenu && toValue(__props.item.shortcut) ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(toValue(__props.item.shortcut)), 1)) : createCommentVNode("", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { MenuItemContent_default as t };

package/dist/shared/MenuItems-BJKetPV-.js

@@ -0,0 +1,69 @@
+import { t as MenuAction_default } from "./MenuAction-BdghJ23k.js";
+import { t as MenuItemContent_default } from "./MenuItemContent--dPNoBmU.js";
+import { t as MenuSeparator_default } from "./MenuSeparator-Dm6CkPqB.js";
+import { t as MenuSubmenu_default } from "./MenuSubmenu-QHWMyfKF.js";
+import { Fragment, computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, normalizeProps, openBlock, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toValue, unref, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#endregion
+//#region src/components/menu/MenuItems.vue
+var MenuItems_default = /* @__PURE__ */ defineComponent({
+	name: "MenuItems",
+	__name: "MenuItems",
+	props: {
+		items: {},
+		itemContent: { type: Function }
+	},
+	emits: ["select", "activate"],
+	setup(__props, { emit: __emit }) {
+		const [DefineItemContent, ReuseItemContent] = createReusableTemplate();
+		const emit = __emit;
+		const visibleItems = computed(() => __props.items.filter((item) => toValue(item.visible) !== false));
+		return (_ctx, _cache) => {
+			const _component_MenuItems = resolveComponent("MenuItems", true);
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineItemContent), null, {
+				default: withCtx(({ item, hasSubmenu }) => [__props.itemContent ? (openBlock(), createBlock(resolveDynamicComponent(__props.itemContent), normalizeProps(mergeProps({ key: 0 }, {
+					item,
+					hasSubmenu
+				})), null, 16)) : renderSlot(_ctx.$slots, "item", {
+					item,
+					hasSubmenu
+				}, () => [createVNode(MenuItemContent_default, {
+					item,
+					"has-submenu": hasSubmenu
+				}, null, 8, ["item", "has-submenu"])], void 0, 1)]),
+				_: 3
+			}), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.key ?? toValue(item.label) ?? index }, [item.separator ? (openBlock(), createBlock(MenuSeparator_default, { key: 0 })) : item.items || item.radioGroup ? (openBlock(), createBlock(MenuSubmenu_default, {
+					key: 1,
+					item
+				}, {
+					content: withCtx(({ items: childItems }) => [createVNode(_component_MenuItems, {
+						items: childItems,
+						"item-content": __props.itemContent ?? _ctx.$slots.item,
+						onSelect: _cache[0] || (_cache[0] = ($event) => emit("select")),
+						onActivate: _cache[1] || (_cache[1] = ($event) => emit("activate", $event))
+					}, null, 8, ["items", "item-content"])]),
+					default: withCtx(() => [createVNode(unref(ReuseItemContent), {
+						item,
+						"has-submenu": true
+					}, null, 8, ["item"])]),
+					_: 2
+				}, 1032, ["item"])) : (openBlock(), createBlock(MenuAction_default, {
+					key: 2,
+					item,
+					"allow-commandless": Boolean(__props.itemContent ?? _ctx.$slots.item),
+					onSelect: _cache[2] || (_cache[2] = ($event) => emit("select")),
+					onActivate: _cache[3] || (_cache[3] = ($event) => emit("activate", $event))
+				}, {
+					default: withCtx(() => [createVNode(unref(ReuseItemContent), {
+						item,
+						"has-submenu": false
+					}, null, 8, ["item"])]),
+					_: 2
+				}, 1032, ["item", "allow-commandless"]))], 64);
+			}), 128))], 64);
+		};
+	}
+});
+//#endregion
+export { MenuItems_default as t };

package/dist/shared/MenuRadioGroup-Bpjt9sHI.js

@@ -0,0 +1,65 @@
+import { t as TextTooltip_default } from "./TextTooltip-ClHQl84h.js";
+import { t as MenuItemContent_default } from "./MenuItemContent--dPNoBmU.js";
+import { t as MenuRadioItem_default } from "./MenuRadioItem-h7hh_RGU.js";
+import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, mergeModels, openBlock, renderList, unref, useModel, withCtx } from "vue";
+import { DropdownMenuRadioGroup } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+//#endregion
+//#region src/components/menu/MenuRadioGroup.vue
+var MenuRadioGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuRadioGroup",
+	props: /*@__PURE__*/ mergeModels({ options: {} }, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const selected = useModel(__props, "modelValue");
+		const emit = __emit;
+		const [DefineItem, ReuseItem] = createReusableTemplate({ props: { option: {
+			type: Object,
+			required: true
+		} } });
+		function select(option, event) {
+			selected.value = option.value;
+			option.command?.();
+			emit("select", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineItem), null, {
+				default: withCtx(({ option }) => [createVNode(MenuRadioItem_default, {
+					value: option.value,
+					onSelect: ($event) => select(option, $event)
+				}, {
+					default: withCtx(() => [createVNode(MenuItemContent_default, {
+						item: {
+							label: option.label,
+							icon: option.icon,
+							checked: selected.value === option.value
+						},
+						"has-submenu": false
+					}, null, 8, ["item"])]),
+					_: 2
+				}, 1032, ["value", "onSelect"])]),
+				_: 1
+			}), createVNode(unref(DropdownMenuRadioGroup), { "model-value": selected.value }, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					return openBlock(), createElementBlock(Fragment, { key: option.value }, [option.tooltip ? (openBlock(), createBlock(unref(TextTooltip_default), {
+						key: 0,
+						text: option.tooltip,
+						side: "right"
+					}, {
+						default: withCtx(() => [createVNode(unref(ReuseItem), { option }, null, 8, ["option"])]),
+						_: 2
+					}, 1032, ["text"])) : (openBlock(), createBlock(unref(ReuseItem), {
+						key: 1,
+						option
+					}, null, 8, ["option"]))], 64);
+				}), 128))]),
+				_: 1
+			}, 8, ["model-value"])], 64);
+		};
+	}
+});
+//#endregion
+export { MenuRadioGroup_default as t };

package/dist/shared/MenuRadioItem-h7hh_RGU.js

@@ -0,0 +1,36 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { menuItemClass } from "../menu/menuStyles.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuRadioItem.vue
+var MenuRadioItem_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuRadioItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		textValue: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuRadioItem), mergeProps(unref(forwarded), { class: unref(cn)(unref(menuItemClass), "w-full", __props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { MenuRadioItem_default as t };

package/dist/shared/MenuSeparator-Dm6CkPqB.js

@@ -0,0 +1,28 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { DropdownMenuSeparator, useForwardProps } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuSeparator.vue
+var MenuSeparator_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSeparator",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardProps(restProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuSeparator), mergeProps(unref(forwarded), { class: unref(cn)("my-1 h-px bg-border/50", __props.class) }), null, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { MenuSeparator_default as t };

package/dist/shared/MenuSub-Dbnj2w-X.js

@@ -0,0 +1,23 @@
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuSub.vue
+var MenuSub_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSub",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const forwarded = useForwardPropsEmits(__props, __emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuSub), normalizeProps(guardReactiveProps(unref(forwarded))), {
+				default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { MenuSub_default as t };

package/dist/shared/MenuSubContent-M-g3fllh.js

@@ -0,0 +1,69 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { menuContentClass } from "../menu/menuStyles.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuSubContent.vue
+var MenuSubContent_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSubContent",
+	props: {
+		forceMount: { type: Boolean },
+		loop: { type: Boolean },
+		memoDependencies: {},
+		sideOffset: {},
+		sideFlip: { type: Boolean },
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		width: { default: "default" },
+		maxHeight: { default: "available" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"entryFocus",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(__props, { emit: __emit }) {
+		const restProps = createPropsRestProxy(__props, [
+			"class",
+			"width",
+			"maxHeight"
+		]);
+		const forwarded = useForwardPropsEmits(restProps, __emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuSubContent), mergeProps(unref(forwarded), {
+				class: unref(cn)(unref(menuContentClass), __props.width === "compact" && "min-w-46.5", __props.maxHeight === "available" && "max-h-(--reka-dropdown-menu-content-available-height)", __props.maxHeight === "compact" && "max-h-64", __props.class),
+				onPointermove: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { MenuSubContent_default as t };

package/dist/shared/MenuSubTrigger-D6-3s2NL.js

@@ -0,0 +1,35 @@
+import { t as cn } from "./src-CnJ6AzLP.js";
+import { menuItemClass } from "../menu/menuStyles.js";
+import { createBlock, createPropsRestProxy, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+//#endregion
+//#region src/components/menu/MenuSubTrigger.vue
+var MenuSubTrigger_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSubTrigger",
+	props: {
+		graceDuration: {},
+		disabled: { type: Boolean },
+		textValue: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const restProps = createPropsRestProxy(__props, ["class"]);
+		const forwarded = useForwardProps(restProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuSubTrigger), mergeProps(unref(forwarded), { class: unref(cn)(unref(menuItemClass), __props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { MenuSubTrigger_default as t };

package/dist/shared/MenuSubmenu-QHWMyfKF.js

@@ -0,0 +1,43 @@
+import { t as MenuRadioGroup_default } from "./MenuRadioGroup-Bpjt9sHI.js";
+import { t as MenuSub_default } from "./MenuSub-Dbnj2w-X.js";
+import { t as MenuSubContent_default } from "./MenuSubContent-M-g3fllh.js";
+import { t as MenuSubTrigger_default } from "./MenuSubTrigger-D6-3s2NL.js";
+import { computed, createBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toValue, withCtx } from "vue";
+//#endregion
+//#region src/components/menu/MenuSubmenu.vue
+var MenuSubmenu_default = /* @__PURE__ */ defineComponent({
+	__name: "MenuSubmenu",
+	props: { item: {} },
+	setup(__props) {
+		const disabled = computed(() => toValue(__props.item.disabled) || (__props.item.items ?? __props.item.radioGroup.options).length === 0);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(MenuSub_default, null, {
+				default: withCtx(() => [createVNode(MenuSubTrigger_default, {
+					"aria-label": toValue(__props.item.label),
+					disabled: disabled.value,
+					class: normalizeClass(toValue(__props.item.class))
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, [
+					"aria-label",
+					"disabled",
+					"class"
+				]), createVNode(MenuSubContent_default, {
+					"side-offset": 2,
+					"align-offset": -5
+				}, {
+					default: withCtx(() => [__props.item.items ? renderSlot(_ctx.$slots, "content", { items: __props.item.items }, void 0, void 0, 0) : (openBlock(), createBlock(MenuRadioGroup_default, {
+						key: 1,
+						"model-value": toValue(__props.item.radioGroup.value),
+						options: __props.item.radioGroup.options
+					}, null, 8, ["model-value", "options"]))]),
+					_: 3
+				})]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { MenuSubmenu_default as t };