@v-c/menu 1.0.6 → 1.0.8

package/dist/Menu.d.ts

@@ -74,6 +74,7 @@ export interface MenuProps {
     id?: string;
     labelRender?: (item: ItemType) => any;
     extraRender?: (item: ItemType) => any;
+    iconRender?: (item: ItemType) => any;
 }
 declare const Menu: import('vue').DefineSetupFnComponent<MenuProps, {}, {}, MenuProps & {}, import('vue').PublicProps>;
 export default Menu;

package/dist/Menu.js

@@ -179,7 +179,7 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 	}));
 	useMenuContextProvider(computed(() => {
 		return {
-			prefixCls: props.prefixCls || defaults.prefixCls,
+			prefixCls: props.prefixCls,
 			rootClass: props.rootClass,
 			classes: props.classes,
 			styles: props.styles,
@@ -225,10 +225,12 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 		}
 	});
 	return () => {
+		const { prefixCls, rootClass } = props;
 		const children = filterEmpty(slots.default?.());
 		childList.value = parseItems(children, props?.items, EMPTY_LIST, props?._internalComponents || {}, props?.prefixCls || defaults.prefixCls, {
 			labelRender: props?.labelRender,
-			extraRender: props?.extraRender
+			extraRender: props?.extraRender,
+			iconRender: props?.iconRender
 		});
 		const measureChildList = parseItems(children, props?.items, EMPTY_LIST, {}, props?.prefixCls || defaults.prefixCls);
 		const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index) => createVNode(MenuContext_default, {
@@ -239,15 +241,20 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 		}, _isSlot(child) ? child : { default: () => [child] }));
 		const container = createVNode(Overflow, mergeProps({
 			"ref": containerRef,
-			"prefixCls": `${props.prefixCls || defaults.prefixCls}-overflow`,
+			"prefixCls": `${prefixCls}-overflow`,
 			"component": "ul",
 			"itemComponent": MenuItem_default,
-			"class": classNames(props.prefixCls || defaults.prefixCls, `${props.prefixCls || defaults.prefixCls}-root`, `${props.prefixCls || defaults.prefixCls}-${internalMode.value}`, _attrs.class || "", {
-				[`${props.prefixCls || defaults.prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
-				[`${props.prefixCls || defaults.prefixCls}-rtl`]: isRtl.value
-			}, props.rootClass),
+			"class": classNames(prefixCls, `${prefixCls}-root`, `${prefixCls}-${internalMode.value}`, _attrs.class || "", {
+				[`${prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
+				[`${prefixCls}-rtl`]: isRtl.value
+			}, rootClass),
 			"style": _attrs.style,
-			"data": wrappedChildList,
+			"data": wrappedChildList
+		}, {
+			dir: props.direction,
+			role: "menu",
+			tabindex: _attrs.tabindex ?? 0
+		}, {
 			"renderRawItem": (node) => {
 				return node;
 			},
@@ -509,6 +516,11 @@ var Menu_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attr
 			type: Function,
 			required: false,
 			default: void 0
+		},
+		iconRender: {
+			type: Function,
+			required: false,
+			default: void 0
 		}
 	}, defaults),
 	name: "VcMenu",

package/dist/SubMenu/index.d.ts

@@ -1,6 +1,6 @@
+import { SubMenuType } from '../interface';
 import { VueNode } from '@v-c/util/dist/type';
 import { CSSProperties } from 'vue';
-import { PopupRender, SubMenuType } from '../interface';
 export type SemanticName = 'list' | 'listTitle';
 export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
     classes?: Partial<Record<SemanticName, string>>;
@@ -12,7 +12,6 @@ export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'la
     eventKey?: string;
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
-    popupRender?: PopupRender;
 }
 declare const SubMenu: import('vue').DefineSetupFnComponent<SubMenuProps, {}, {}, SubMenuProps & {}, import('vue').PublicProps>;
 export default SubMenu;

package/dist/SubMenu/index.js

@@ -3,8 +3,10 @@ import { PathTrackerContext, useFullPath, useMeasure, usePathUserContext } from
 import Icon_default from "../Icon.js";
 import { useMenuId } from "../context/IdContext.js";
 import { usePrivateContext } from "../context/PrivateContext.js";
+import useMemoCallback from "../hooks/useMemoCallback.js";
 import useActive from "../hooks/useActive.js";
 import useDirectionStyle from "../hooks/useDirectionStyle.js";
+import { warnItemProp } from "../utils/warnUtil.js";
 import { parseChildren } from "../utils/commonUtil.js";
 import SubMenuList_default from "./SubMenuList.js";
 import InlineSubMenuList_default from "./InlineSubMenuList.js";
@@ -41,6 +43,7 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 	const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
 	const mergedDisabled = computed(() => !!(contextDisabled.value || props?.disabled));
 	if (process.env.NODE_ENV !== "production" && props?.warnKey) warning$1(false, "SubMenu should not leave undefined `key`.");
+	const mergedItemIcon = computed(() => props?.itemIcon ?? menuContext?.value?.itemIcon);
 	const mergedExpandIcon = computed(() => props?.expandIcon ?? contextExpandIcon.value);
 	const originOpen = computed(() => {
 		const key = props?.eventKey;
@@ -89,6 +92,10 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 		});
 		if (mode.value === "inline" && key) onOpenChange(key, !originOpen.value);
 	};
+	const onMergedItemClick = useMemoCallback((info) => {
+		props?.onClick?.(warnItemProp(info));
+		menuContext?.value?.onItemClick?.(info);
+	});
 	const onPopupVisibleChange = (newVisible) => {
 		const key = props?.eventKey;
 		if (mode.value !== "inline" && key) onOpenChange(key, newVisible);
@@ -186,7 +193,14 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			open: open.value,
 			disabled: mergedDisabled.value
 		});
-		return listNode;
+		return createVNode(MenuContext_default, {
+			"classes": classes,
+			"styles": styles,
+			"onItemClick": onMergedItemClick,
+			"mode": mode.value === "horizontal" ? "vertical" : mode.value,
+			"itemIcon": mergedItemIcon.value,
+			"expandIcon": mergedExpandIcon.value
+		}, _isSlot(listNode) ? listNode : { default: () => [listNode] });
 	};
 }, {
 	props: {
@@ -228,11 +242,6 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			required: false,
 			default: void 0
 		},
-		popupRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
 		type: {
 			type: String,
 			required: false,
@@ -299,6 +308,11 @@ var InternalSubMenu = /* @__PURE__ */ defineComponent((props, { slots, attrs })
 			required: false,
 			default: void 0
 		},
+		popupRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onClick: {
 			type: Function,
 			required: false,
@@ -392,11 +406,6 @@ var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
-		popupRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
 		type: {
 			type: String,
 			required: false,
@@ -463,6 +472,11 @@ var SubMenu_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		popupRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onClick: {
 			type: Function,
 			required: false,

package/dist/context/MenuContext.js

@@ -5,7 +5,7 @@ function mergeProps$1(origin, target) {
 	const clone = { ...origin };
 	Object.keys(target).forEach((key) => {
 		const value = target[key];
-		if (value !== void 0) target[key] = value;
+		if (value !== void 0) clone[key] = value;
 	});
 	return clone;
 }

package/dist/interface.d.ts

@@ -19,6 +19,7 @@ export interface SubMenuType extends ItemSharedProps {
     popupClassName?: string;
     popupOffset?: number[];
     popupStyle?: CSSProperties;
+    popupRender?: PopupRender;
     onClick?: MenuClickEventHandler;
     onTitleClick?: (info: MenuTitleInfo) => void;
     onTitleMouseEnter?: MenuHoverEventHandler;
@@ -88,7 +89,9 @@ export interface MenuRef {
 export type ComponentType = 'submenu' | 'item' | 'group' | 'divider';
 export type Components = Partial<Record<ComponentType, any>>;
 export type PopupRender = (node: any, info: {
-    item: SubMenuProps;
+    item: SubMenuProps & {
+        key?: any;
+    };
     keys: string[];
 }) => VueNode;
 export {};

package/dist/utils/commonUtil.js

@@ -1,4 +1,4 @@
-import { isVNode } from "vue";
+import { cloneVNode, isVNode } from "vue";
 import { toArray } from "@v-c/util/dist/Children/toArray";
 function parseChildren(children, keyPath) {
 	return toArray(children).map((child, index) => {
@@ -12,13 +12,7 @@ function parseChildren(children, keyPath) {
 				eventKey
 			};
 			if (process.env.NODE_ENV !== "production" && emptyKey) cloneProps.warnKey = true;
-			return {
-				...child,
-				props: {
-					...child.props,
-					...cloneProps
-				}
-			};
+			return cloneVNode(child, { ...cloneProps });
 		}
 		return child;
 	});

package/dist/utils/nodeUtil.d.ts

@@ -3,4 +3,5 @@ import { Components, ItemType } from '../interface';
 export declare function parseItems(children: VueNode | undefined, items: ItemType[] | undefined, keyPath: string[], components: Components, prefixCls?: string, slots?: {
     labelRender?: (item: ItemType) => any;
     extraRender?: (item: ItemType) => any;
+    iconRender?: (item: ItemType) => any;
 }): any[];

package/dist/utils/nodeUtil.js

@@ -18,8 +18,11 @@ function convertItemsToNodes(list, components, prefixCls, slots) {
 			let extra;
 			const _labelRender = slots?.labelRender ? slots.labelRender(opt) : null;
 			const _extraRender = slots?.extraRender ? slots.extraRender(opt) : null;
+			const _iconRender = slots?.iconRender ? slots.iconRender(opt) : null;
 			const labelArr = filterEmpty(Array.isArray(_labelRender) ? _labelRender : [_labelRender]);
 			const extraArr = filterEmpty(Array.isArray(_extraRender) ? _extraRender : [_extraRender]);
+			const iconArr = filterEmpty(Array.isArray(_iconRender) ? _iconRender : [_iconRender]);
+			if (iconArr.length) restProps.icon = iconArr?.[0];
 			if (labelArr.length) label = labelArr?.[0];
 			if (extraArr.length) extra = extraArr?.[0];
 			if (!label) label = opt.label;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@v-c/menu",
   "type": "module",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "menu ui component for vue",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*.js": "./dist/*.js",
     "./dist/*.d.ts": "./dist/*.d.ts",
@@ -25,9 +25,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/trigger": "^1.0.5",
-    "@v-c/overflow": "^1.0.1",
-    "@v-c/util": "^1.0.8"
+    "@v-c/overflow": "^1.0.3",
+    "@v-c/trigger": "^1.0.6",
+    "@v-c/util": "^1.0.9"
   },
   "scripts": {
     "build": "vite build",

package/dist/Divider.cjs

@@ -1,38 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_MenuContext = require("./context/MenuContext.cjs");
-const require_PathContext = require("./context/PathContext.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-var Divider = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const menuContext = require_MenuContext.useMenuContext();
-	const measure = require_PathContext.useMeasure();
-	return () => {
-		const { prefixCls } = menuContext?.value ?? {};
-		if (measure) return null;
-		return (0, vue.createVNode)("li", {
-			"role": "separator",
-			"class": (0, _v_c_util.clsx)(`${prefixCls}-item-divider`, props.class),
-			"style": props.style
-		}, null);
-	};
-}, {
-	props: {
-		style: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		class: {
-			type: String,
-			required: false,
-			default: void 0
-		}
-	},
-	name: "Divider"
-});
-var Divider_default = Divider;
-exports.default = Divider_default;

package/dist/Icon.cjs

@@ -1,45 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-var Icon = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
-	return () => {
-		const { icon, props: iconProps } = props;
-		const children = slots.default?.();
-		let iconNode;
-		if (icon === null || icon === false) return null;
-		if (typeof icon === "function") {
-			const childIcons = icon(iconProps);
-			if (!childIcons) {
-				iconNode = null;
-				return children;
-			}
-			iconNode = (0, _v_c_util_dist_props_util.filterEmpty)(childIcons ? Array.isArray(childIcons) ? childIcons : [childIcons] : []);
-		} else if (typeof icon !== "boolean") iconNode = icon;
-		return iconNode || children || null;
-	};
-}, { props: {
-	icon: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	props: {
-		type: Object,
-		required: false,
-		default: void 0
-	}
-} });
-var Icon_default = Icon;
-exports.default = Icon_default;