@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/menu/Menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,194 @@
+import { useColors as e } from "../../composables/useColors.js";
+import { useTheme as t } from "../../composables/useTheme.js";
+import { optionalBooleanProp as n } from "../../common/props.js";
+import { useCommon as r } from "../../composables/useCommon.js";
+import i from "../accordion/AccordionItem.js";
+import a from "../divider/Divider.js";
+import o from "./MenuItem.js";
+import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderList as g, resolveComponent as _, unref as v, withCtx as y } from "vue";
+//#region src/components/menu/Menu.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	...r.props(),
+	...e.props("secondary"),
+	items: {
+		type: Array,
+		description: "Menu tree. Each item may nest `items`, links, icons, and dividers."
+	},
+	collapsible: {
+		type: Boolean,
+		default: !0,
+		description: "Allows nested groups to collapse when they have child items."
+	},
+	collapseIcon: {
+		type: String,
+		description: "Default icon for collapsible group headers."
+	},
+	expanded: n("Default expanded state for collapsible groups."),
+	disabled: {
+		type: Boolean,
+		description: "Disables all menu items."
+	},
+	rounded: {
+		type: Boolean,
+		default: !0,
+		description: "Applies rounded corners to menu items."
+	},
+	filled: {
+		type: Boolean,
+		default: !0,
+		description: "Filled item backgrounds (vs. minimal text-only look)."
+	},
+	minimal: n("Hides item labels; icons-only layout.")
+}, x = /* @__PURE__ */ f({
+	name: "XMenu",
+	validators: { ...r.validators() },
+	docs: { emits: {
+		expand: "Emitted when a nested group expands or a linked item becomes active.",
+		"item-click": "Emitted when a menu item is clicked."
+	} },
+	props: b,
+	emits: ["expand", "item-click"],
+	setup(e) {
+		let { styles: n, classes: r, className: f } = t("Menu", {}, e);
+		return (e, t) => {
+			let b = _("x-menu");
+			return e.items ? (h(), u("div", {
+				key: 0,
+				style: m(v(n)),
+				class: p([
+					"space-y-1",
+					v(f),
+					v(r).wrapper
+				])
+			}, [(h(!0), u(s, null, g(e.items, (n, r) => (h(), u(s, { key: r }, [n.items ? (h(), u(s, { key: 0 }, [n.collapsible === !1 ? (h(), u(s, { key: 1 }, [d(o, {
+				item: n,
+				rounded: e.rounded,
+				color: n.color || e.color,
+				filled: n.filled || e.filled,
+				size: n.size || e.size,
+				disabled: e.disabled || n.disabled,
+				minimal: e.minimal,
+				class: "font-medium",
+				inactive: "",
+				onClick: t[2] ||= (t) => e.$emit("item-click")
+			}, null, 8, [
+				"item",
+				"rounded",
+				"color",
+				"filled",
+				"size",
+				"disabled",
+				"minimal"
+			]), d(b, {
+				class: p(["x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
+				items: n.items,
+				color: n.color || e.color,
+				size: n.size || e.size,
+				collapsible: e.collapsible,
+				"collapse-icon": n.collapseIcon || e.collapseIcon,
+				expanded: n.expanded || e.expanded,
+				disabled: e.disabled || n.disabled,
+				minimal: e.minimal,
+				rounded: e.rounded,
+				filled: e.filled,
+				onExpand: t[3] ||= (t) => e.$emit("expand")
+			}, null, 8, [
+				"class",
+				"items",
+				"color",
+				"size",
+				"collapsible",
+				"collapse-icon",
+				"expanded",
+				"disabled",
+				"minimal",
+				"rounded",
+				"filled"
+			])], 64)) : (h(), c(i, {
+				key: 0,
+				icon: n.collapseIcon || e.collapseIcon,
+				expanded: n.expanded || e.expanded,
+				disabled: e.disabled || n.disabled,
+				"show-icon": !!(n.collapseIcon || e.collapseIcon),
+				class: "x-menu-inner space-y-1",
+				onExpand: t[1] ||= (t) => e.$emit("expand")
+			}, {
+				default: y(({}) => [d(o, {
+					item: n,
+					rounded: e.rounded,
+					color: n.color || e.color,
+					filled: n.filled || e.filled,
+					size: n.size || e.size,
+					disabled: e.disabled || n.disabled,
+					minimal: e.minimal,
+					class: "font-medium"
+				}, null, 8, [
+					"item",
+					"rounded",
+					"color",
+					"filled",
+					"size",
+					"disabled",
+					"minimal"
+				])]),
+				content: y(({ expand: r }) => [d(b, {
+					class: p(["border-l ml-4 border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
+					items: n.items,
+					color: n.color || e.color,
+					size: n.size || e.size,
+					collapsible: e.collapsible,
+					"collapse-icon": n.collapseIcon || e.collapseIcon,
+					expanded: n.expanded || e.expanded,
+					disabled: e.disabled || n.disabled,
+					rounded: e.rounded,
+					filled: e.filled,
+					minimal: e.minimal,
+					onExpand: (e) => r(!1),
+					onItemClick: t[0] ||= (t) => e.$emit("item-click")
+				}, null, 8, [
+					"class",
+					"items",
+					"color",
+					"size",
+					"collapsible",
+					"collapse-icon",
+					"expanded",
+					"disabled",
+					"rounded",
+					"filled",
+					"minimal",
+					"onExpand"
+				])]),
+				_: 2
+			}, 1032, [
+				"icon",
+				"expanded",
+				"disabled",
+				"show-icon"
+			]))], 64)) : (h(), u(s, { key: 1 }, [n.divider ? (h(), c(a, { key: 0 })) : (h(), c(o, {
+				key: 1,
+				item: n,
+				rounded: e.rounded,
+				color: n.color || e.color,
+				filled: n.filled || e.filled,
+				size: n.size || e.size,
+				disabled: e.disabled || n.disabled,
+				minimal: e.minimal,
+				class: p({ "my-2": n.divider }),
+				onClick: t[4] ||= (t) => e.$emit("item-click"),
+				onActive: t[5] ||= (t) => e.$emit("expand")
+			}, null, 8, [
+				"item",
+				"rounded",
+				"color",
+				"filled",
+				"size",
+				"disabled",
+				"minimal",
+				"class"
+			]))], 64))], 64))), 128))], 6)) : l("", !0);
+		};
+	}
+});
+//#endregion
+export { x as default };

package/lib/components/menu/MenuItem.js

@@ -0,0 +1,6 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./MenuItem.vue_vue_type_script_setup_true_lang.js";
+import n from "./MenuItem.vue_vue_type_style_index_0_scoped_5aebaff3_lang.module.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }], ["__scopeId", "data-v-5aebaff3"]]);
+//#endregion
+export { r as default };

package/lib/components/menu/MenuItem.vue.d.ts

@@ -5,44 +5,95 @@ declare const menuItemProps: {
     item: {
         type: PropType<MenuArrayItem>;
         default: () => void;
+        description: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        description: string;
     };
-    active: BooleanConstructor;
     attrs: {
         type: ObjectConstructor;
         default: () => void;
+        description: string;
+    };
+    onClick: {
+        type: FunctionConstructor;
+        description: string;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    href: {
+        type: StringConstructor;
+        description: string;
+    };
+    target: {
+        type: StringConstructor;
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconRight: {
+        type: StringConstructor;
+        description: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        description: string;
     };
-    onClick: FunctionConstructor;
-    value: (StringConstructor | NumberConstructor)[];
-    to: (ObjectConstructor | StringConstructor)[];
-    exact: BooleanConstructor;
-    href: StringConstructor;
-    target: StringConstructor;
-    label: StringConstructor;
-    icon: StringConstructor;
-    iconRight: StringConstructor;
-    loading: BooleanConstructor;
     rounded: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     filled: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    selected: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    minimal: import("vue").Prop<boolean | undefined>;
+    prefix: {
+        type: StringConstructor;
+        description: string;
     };
-    selected: BooleanConstructor;
-    disabled: BooleanConstructor;
-    minimal: BooleanConstructor;
-    prefix: StringConstructor;
-    suffix: StringConstructor;
-    checkbox: BooleanConstructor;
+    suffix: {
+        type: StringConstructor;
+        description: string;
+    };
+    checkbox: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>;
@@ -56,87 +107,189 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     item: {
         type: PropType<MenuArrayItem>;
         default: () => void;
+        description: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        description: string;
     };
-    active: BooleanConstructor;
     attrs: {
         type: ObjectConstructor;
         default: () => void;
+        description: string;
+    };
+    onClick: {
+        type: FunctionConstructor;
+        description: string;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    href: {
+        type: StringConstructor;
+        description: string;
+    };
+    target: {
+        type: StringConstructor;
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconRight: {
+        type: StringConstructor;
+        description: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        description: string;
     };
-    onClick: FunctionConstructor;
-    value: (StringConstructor | NumberConstructor)[];
-    to: (ObjectConstructor | StringConstructor)[];
-    exact: BooleanConstructor;
-    href: StringConstructor;
-    target: StringConstructor;
-    label: StringConstructor;
-    icon: StringConstructor;
-    iconRight: StringConstructor;
-    loading: BooleanConstructor;
     rounded: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     filled: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    selected: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
     };
-    selected: BooleanConstructor;
-    disabled: BooleanConstructor;
-    minimal: BooleanConstructor;
-    prefix: StringConstructor;
-    suffix: StringConstructor;
-    checkbox: BooleanConstructor;
+    minimal: import("vue").Prop<boolean | undefined>;
+    prefix: {
+        type: StringConstructor;
+        description: string;
+    };
+    suffix: {
+        type: StringConstructor;
+        description: string;
+    };
+    checkbox: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "active" | "checkbox-click")[], "click" | "active" | "checkbox-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         type: PropType<MenuArrayItem>;
         default: () => void;
+        description: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        description: string;
     };
-    active: BooleanConstructor;
     attrs: {
         type: ObjectConstructor;
         default: () => void;
+        description: string;
+    };
+    onClick: {
+        type: FunctionConstructor;
+        description: string;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    href: {
+        type: StringConstructor;
+        description: string;
+    };
+    target: {
+        type: StringConstructor;
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    iconRight: {
+        type: StringConstructor;
+        description: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        description: string;
     };
-    onClick: FunctionConstructor;
-    value: (StringConstructor | NumberConstructor)[];
-    to: (ObjectConstructor | StringConstructor)[];
-    exact: BooleanConstructor;
-    href: StringConstructor;
-    target: StringConstructor;
-    label: StringConstructor;
-    icon: StringConstructor;
-    iconRight: StringConstructor;
-    loading: BooleanConstructor;
     rounded: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     filled: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
+    };
+    selected: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    minimal: import("vue").Prop<boolean | undefined>;
+    prefix: {
+        type: StringConstructor;
+        description: string;
+    };
+    suffix: {
+        type: StringConstructor;
+        description: string;
     };
-    selected: BooleanConstructor;
-    disabled: BooleanConstructor;
-    minimal: BooleanConstructor;
-    prefix: StringConstructor;
-    suffix: StringConstructor;
-    checkbox: BooleanConstructor;
+    checkbox: import("vue").Prop<boolean | undefined>;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
@@ -151,11 +304,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     active: boolean;
     loading: boolean;
     filled: boolean;
-    minimal: boolean;
     attrs: Record<string, any>;
     exact: boolean;
     selected: boolean;
-    checkbox: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     prefix?(_: {
         item: MenuItemProps;