feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+23
View File
@@ -0,0 +1,23 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { MenuItemClicked, MenuItemRegistered, MenuProvider, SubMenuProvider } from "./src/types.js";
import { MenuEmits, MenuProps, MenuPropsPublic, _default, menuEmits, menuProps } from "./src/menu.js";
import { MenuItemEmits, MenuItemProps, MenuItemPropsPublic, menuItemEmits, menuItemProps } from "./src/menu-item.js";
import { _default as _default$1 } from "./src/menu-item.vue.js";
import { MenuItemGroupProps, MenuItemGroupPropsPublic, menuItemGroupProps } from "./src/menu-item-group.js";
import { _default as _default$2 } from "./src/menu-item-group.vue.js";
import { SubMenuProps, SubMenuPropsPublic, _default as _default$3, subMenuProps } from "./src/sub-menu.js";
import { MenuInstance, MenuItemGroupInstance, MenuItemInstance, SubMenuInstance } from "./src/instance.js";
import { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from "./src/tokens.js";
//#region ../../packages/components/menu/index.d.ts
declare const ElMenu: SFCWithInstall<typeof _default> & {
MenuItem: typeof _default$1;
MenuItemGroup: typeof _default$2;
SubMenu: typeof _default$3;
};
declare const ElMenuItem: SFCWithInstall<typeof _default$1>;
declare const ElMenuItemGroup: SFCWithInstall<typeof _default$2>;
declare const ElSubMenu: SFCWithInstall<typeof _default$3>;
//#endregion
export { ElMenu, ElMenu as default, ElMenuItem, ElMenuItemGroup, ElSubMenu, MENU_INJECTION_KEY, MenuEmits, MenuInstance, MenuItemClicked, MenuItemEmits, MenuItemGroupInstance, MenuItemGroupProps, MenuItemGroupPropsPublic, MenuItemInstance, MenuItemProps, MenuItemPropsPublic, MenuItemRegistered, MenuProps, MenuPropsPublic, MenuProvider, SUB_MENU_INJECTION_KEY, SubMenuInstance, SubMenuProps, SubMenuPropsPublic, SubMenuProvider, menuEmits, menuItemEmits, menuItemGroupProps, menuItemProps, menuProps, subMenuProps };
+35
View File
@@ -0,0 +1,35 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_tokens = require('./src/tokens.js');
const require_sub_menu = require('./src/sub-menu.js');
const require_menu = require('./src/menu.js');
const require_menu_item = require('./src/menu-item.js');
const require_menu_item$1 = require('./src/menu-item2.js');
const require_menu_item_group = require('./src/menu-item-group.js');
const require_menu_item_group$1 = require('./src/menu-item-group2.js');
//#region ../../packages/components/menu/index.ts
const ElMenu = require_install.withInstall(require_menu.default, {
MenuItem: require_menu_item$1.default,
MenuItemGroup: require_menu_item_group$1.default,
SubMenu: require_sub_menu.default
});
const ElMenuItem = require_install.withNoopInstall(require_menu_item$1.default);
const ElMenuItemGroup = require_install.withNoopInstall(require_menu_item_group$1.default);
const ElSubMenu = require_install.withNoopInstall(require_sub_menu.default);
//#endregion
exports.ElMenu = ElMenu;
exports.default = ElMenu;
exports.ElMenuItem = ElMenuItem;
exports.ElMenuItemGroup = ElMenuItemGroup;
exports.ElSubMenu = ElSubMenu;
exports.MENU_INJECTION_KEY = require_tokens.MENU_INJECTION_KEY;
exports.SUB_MENU_INJECTION_KEY = require_tokens.SUB_MENU_INJECTION_KEY;
exports.menuEmits = require_menu.menuEmits;
exports.menuItemEmits = require_menu_item.menuItemEmits;
exports.menuItemGroupProps = require_menu_item_group.menuItemGroupProps;
exports.menuItemProps = require_menu_item.menuItemProps;
exports.menuProps = require_menu.menuProps;
exports.subMenuProps = require_sub_menu.subMenuProps;
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Menu","withNoopInstall","MenuItem","MenuItemGroup","SubMenu"],"sources":["../../../../../packages/components/menu/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Menu from './src/menu'\nimport MenuItem from './src/menu-item.vue'\nimport MenuItemGroup from './src/menu-item-group.vue'\nimport SubMenu from './src/sub-menu'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElMenu: SFCWithInstall<typeof Menu> & {\n MenuItem: typeof MenuItem\n MenuItemGroup: typeof MenuItemGroup\n SubMenu: typeof SubMenu\n} = withInstall(Menu, {\n MenuItem,\n MenuItemGroup,\n SubMenu,\n})\nexport default ElMenu\nexport const ElMenuItem: SFCWithInstall<typeof MenuItem> =\n withNoopInstall(MenuItem)\nexport const ElMenuItemGroup: SFCWithInstall<typeof MenuItemGroup> =\n withNoopInstall(MenuItemGroup)\nexport const ElSubMenu: SFCWithInstall<typeof SubMenu> =\n withNoopInstall(SubMenu)\n\nexport * from './src/menu'\nexport * from './src/menu-item'\nexport * from './src/menu-item-group'\nexport * from './src/sub-menu'\nexport * from './src/types'\nexport * from './src/instance'\nexport * from './src/tokens'\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,SAITA,4BAAYC,sBAAM;CACpB;CACA;CACA;CACD,CAAC;AAEF,MAAa,aACXC,gCAAgBC,4BAAS;AAC3B,MAAa,kBACXD,gCAAgBE,kCAAc;AAChC,MAAa,YACXF,gCAAgBG,yBAAQ"}
@@ -0,0 +1,17 @@
import { _default } from "./menu.js";
import { _default as _default$1 } from "./menu-item.vue.js";
import { _default as _default$2 } from "./menu-item-group.vue.js";
import { _default as _default$3 } from "./sub-menu.js";
//#region ../../packages/components/menu/src/instance.d.ts
type MenuInstance = InstanceType<typeof _default> & {
open: (index: string) => void;
close: (index: string) => void;
handleResize: () => void;
updateActiveIndex: (index: string) => void;
};
type MenuItemInstance = InstanceType<typeof _default$1> & unknown;
type MenuItemGroupInstance = InstanceType<typeof _default$2> & unknown;
type SubMenuInstance = InstanceType<typeof _default$3> & unknown;
//#endregion
export { MenuInstance, MenuItemGroupInstance, MenuItemInstance, SubMenuInstance };
@@ -0,0 +1 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_menu_collapse_transition_vue_vue_type_script_setup_true_lang = require('./menu-collapse-transition.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/menu/src/menu-collapse-transition.vue
var menu_collapse_transition_default = require_menu_collapse_transition_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = menu_collapse_transition_default;
//# sourceMappingURL=menu-collapse-transition.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-collapse-transition.js","names":[],"sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue"],"sourcesContent":["<template>\n <transition mode=\"out-in\" v-bind=\"listeners\">\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\nimport { addClass, hasClass, removeClass } from '@element-plus/utils'\n\nimport type { BaseTransitionProps, TransitionProps } from 'vue'\n\ndefineOptions({\n name: 'ElMenuCollapseTransition',\n})\n\nconst ns = useNamespace('menu')\nconst listeners = {\n onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n onEnter(el, done) {\n addClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = '1'\n done()\n },\n\n onAfterEnter(el) {\n removeClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = ''\n },\n\n onBeforeLeave(el) {\n if (!el.dataset) (el as any).dataset = {}\n\n if (hasClass(el, ns.m('collapse'))) {\n removeClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n addClass(el, ns.m('collapse'))\n } else {\n addClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n removeClass(el, ns.m('collapse'))\n }\n\n el.style.width = `${el.scrollWidth}px`\n el.style.overflow = 'hidden'\n },\n\n onLeave(el: HTMLElement) {\n addClass(el, 'horizontal-collapse-transition')\n el.style.width = `${el.dataset.scrollWidth}px`\n },\n} as BaseTransitionProps<HTMLElement> as TransitionProps\n</script>\n"],"mappings":""}
@@ -0,0 +1,55 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_style = require('../../../utils/dom/style.js');
const require_index = require('../../../hooks/use-namespace/index.js');
let vue = require("vue");
//#region ../../packages/components/menu/src/menu-collapse-transition.vue?vue&type=script&setup=true&lang.ts
var menu_collapse_transition_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElMenuCollapseTransition",
__name: "menu-collapse-transition",
setup(__props) {
const ns = require_index.useNamespace("menu");
const listeners = {
onBeforeEnter: (el) => el.style.opacity = "0.2",
onEnter(el, done) {
require_style.addClass(el, `${ns.namespace.value}-opacity-transition`);
el.style.opacity = "1";
done();
},
onAfterEnter(el) {
require_style.removeClass(el, `${ns.namespace.value}-opacity-transition`);
el.style.opacity = "";
},
onBeforeLeave(el) {
if (!el.dataset) el.dataset = {};
if (require_style.hasClass(el, ns.m("collapse"))) {
require_style.removeClass(el, ns.m("collapse"));
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
require_style.addClass(el, ns.m("collapse"));
} else {
require_style.addClass(el, ns.m("collapse"));
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
require_style.removeClass(el, ns.m("collapse"));
}
el.style.width = `${el.scrollWidth}px`;
el.style.overflow = "hidden";
},
onLeave(el) {
require_style.addClass(el, "horizontal-collapse-transition");
el.style.width = `${el.dataset.scrollWidth}px`;
}
};
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.mergeProps)({ mode: "out-in" }, listeners), {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
_: 3
}, 16);
};
}
});
//#endregion
exports.default = menu_collapse_transition_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=menu-collapse-transition.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-collapse-transition.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue"],"sourcesContent":["<template>\n <transition mode=\"out-in\" v-bind=\"listeners\">\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\nimport { addClass, hasClass, removeClass } from '@element-plus/utils'\n\nimport type { BaseTransitionProps, TransitionProps } from 'vue'\n\ndefineOptions({\n name: 'ElMenuCollapseTransition',\n})\n\nconst ns = useNamespace('menu')\nconst listeners = {\n onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n onEnter(el, done) {\n addClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = '1'\n done()\n },\n\n onAfterEnter(el) {\n removeClass(el, `${ns.namespace.value}-opacity-transition`)\n el.style.opacity = ''\n },\n\n onBeforeLeave(el) {\n if (!el.dataset) (el as any).dataset = {}\n\n if (hasClass(el, ns.m('collapse'))) {\n removeClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n addClass(el, ns.m('collapse'))\n } else {\n addClass(el, ns.m('collapse'))\n el.dataset.oldOverflow = el.style.overflow\n el.dataset.scrollWidth = el.clientWidth.toString()\n removeClass(el, ns.m('collapse'))\n }\n\n el.style.width = `${el.scrollWidth}px`\n el.style.overflow = 'hidden'\n },\n\n onLeave(el: HTMLElement) {\n addClass(el, 'horizontal-collapse-transition')\n el.style.width = `${el.dataset.scrollWidth}px`\n },\n} as BaseTransitionProps<HTMLElement> as TransitionProps\n</script>\n"],"mappings":";;;;;;;;;;EAgBA,MAAM,KAAK,2BAAa,OAAM;EAC9B,MAAM,YAAY;GAChB,gBAAgB,OAAQ,GAAG,MAAM,UAAU;GAC3C,QAAQ,IAAI,MAAM;AAChB,2BAAS,IAAI,GAAG,GAAG,UAAU,MAAM,qBAAoB;AACvD,OAAG,MAAM,UAAU;AACnB,UAAK;;GAGP,aAAa,IAAI;AACf,8BAAY,IAAI,GAAG,GAAG,UAAU,MAAM,qBAAoB;AAC1D,OAAG,MAAM,UAAU;;GAGrB,cAAc,IAAI;AAChB,QAAI,CAAC,GAAG,QAAS,CAAC,GAAW,UAAU,EAAC;AAExC,QAAI,uBAAS,IAAI,GAAG,EAAE,WAAW,CAAC,EAAE;AAClC,+BAAY,IAAI,GAAG,EAAE,WAAW,CAAA;AAChC,QAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,QAAG,QAAQ,cAAc,GAAG,YAAY,UAAS;AACjD,4BAAS,IAAI,GAAG,EAAE,WAAW,CAAA;WACxB;AACL,4BAAS,IAAI,GAAG,EAAE,WAAW,CAAA;AAC7B,QAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,QAAG,QAAQ,cAAc,GAAG,YAAY,UAAS;AACjD,+BAAY,IAAI,GAAG,EAAE,WAAW,CAAA;;AAGlC,OAAG,MAAM,QAAQ,GAAG,GAAG,YAAY;AACnC,OAAG,MAAM,WAAW;;GAGtB,QAAQ,IAAiB;AACvB,2BAAS,IAAI,iCAAgC;AAC7C,OAAG,MAAM,QAAQ,GAAG,GAAG,QAAQ,YAAY;;GAE9C;;qDAlDc,oCAAA,EAFD,MAAK,UAAQ,EAAS,UAAS,EAAA;oCACjC,qBAAA,KAAA,QAAA,UAAA"}
@@ -0,0 +1,24 @@
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/menu/src/menu-item-group.d.ts
interface MenuItemGroupProps {
/**
* @description group title
*/
title?: string;
}
/**
* @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.
*/
declare const menuItemGroupProps: {
/**
* @description group title
*/
readonly title: StringConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.
*/
type MenuItemGroupPropsPublic = ExtractPublicPropTypes<typeof menuItemGroupProps>;
//#endregion
export { MenuItemGroupProps, MenuItemGroupPropsPublic, menuItemGroupProps };
@@ -0,0 +1,11 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/menu/src/menu-item-group.ts
/**
* @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.
*/
const menuItemGroupProps = { title: String };
//#endregion
exports.menuItemGroupProps = menuItemGroupProps;
//# sourceMappingURL=menu-item-group.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item-group.js","names":[],"sources":["../../../../../../packages/components/menu/src/menu-item-group.ts"],"sourcesContent":["import type { ExtractPublicPropTypes } from 'vue'\n\nexport interface MenuItemGroupProps {\n /**\n * @description group title\n */\n title?: string\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.\n */\nexport const menuItemGroupProps = {\n /**\n * @description group title\n */\n title: String,\n} as const\n\n/**\n * @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.\n */\nexport type MenuItemGroupPropsPublic = ExtractPublicPropTypes<\n typeof menuItemGroupProps\n>\n"],"mappings":";;;;;;AAYA,MAAa,qBAAqB,EAIhC,OAAO,QACR"}
@@ -0,0 +1,20 @@
import { MenuItemGroupProps } from "./menu-item-group.js";
import * as vue from "vue";
//#region ../../packages/components/menu/src/menu-item-group.vue.d.ts
declare var __VLS_1: {}, __VLS_3: {};
type __VLS_Slots = {} & {
title?: (props: typeof __VLS_1) => any;
} & {
default?: (props: typeof __VLS_3) => any;
};
declare const __VLS_base: vue.DefineComponent<MenuItemGroupProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MenuItemGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,21 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_menu_item_group = require('./menu-item-group.js');
let vue = require("vue");
//#region ../../packages/components/menu/src/menu-item-group.vue?vue&type=script&setup=true&lang.ts
var menu_item_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: "ElMenuItemGroup",
__name: "menu-item-group",
props: require_menu_item_group.menuItemGroupProps,
setup(__props) {
const ns = require_index.useNamespace("menu-item-group");
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).b()) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title")) }, [!_ctx.$slots.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.title), 1)], 64)) : (0, vue.renderSlot)(_ctx.$slots, "title", { key: 1 })], 2), (0, vue.createElementVNode)("ul", null, [(0, vue.renderSlot)(_ctx.$slots, "default")])], 2);
};
}
});
//#endregion
exports.default = menu_item_group_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=menu-item-group.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item-group.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/menu/src/menu-item-group.vue"],"sourcesContent":["<template>\n <li :class=\"ns.b()\">\n <div :class=\"ns.e('title')\">\n <template v-if=\"!$slots.title\">{{ title }}</template>\n <slot v-else name=\"title\" />\n </div>\n <ul>\n <slot />\n </ul>\n </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { MenuItemGroupProps } from './menu-item-group'\n\ndefineOptions({\n name: 'ElMenuItemGroup',\n})\ndefineProps<MenuItemGroupProps>()\n\nconst ns = useNamespace('menu-item-group')\n</script>\n"],"mappings":";;;;;;;;;;;EAsBA,MAAM,KAAK,2BAAa,kBAAiB;;4DAblC,MAAA,EARA,8CAAO,GAAE,CAAC,GAAC,CAAA,iCAIR,OAAA,EAHA,8CAAO,GAAE,CAAC,EAAC,QAAA,CAAA,MACEA,KAAAA,OAAO,2DAA6B,cAAA,EAAA,KAAA,GAAA,EAAA,mDAAnB,QAAA,MAAK,EAAA,EAAA,8BACX,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,mCAIzB,MAAA,MAAA,qBADK,KAAA,QAAA,UAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_menu_item_group_vue_vue_type_script_setup_true_lang = require('./menu-item-group.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/menu/src/menu-item-group.vue
var menu_item_group_default = require_menu_item_group_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = menu_item_group_default;
//# sourceMappingURL=menu-item-group2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item-group2.js","names":[],"sources":["../../../../../../packages/components/menu/src/menu-item-group.vue"],"sourcesContent":["<template>\n <li :class=\"ns.b()\">\n <div :class=\"ns.e('title')\">\n <template v-if=\"!$slots.title\">{{ title }}</template>\n <slot v-else name=\"title\" />\n </div>\n <ul>\n <slot />\n </ul>\n </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { MenuItemGroupProps } from './menu-item-group'\n\ndefineOptions({\n name: 'ElMenuItemGroup',\n})\ndefineProps<MenuItemGroupProps>()\n\nconst ns = useNamespace('menu-item-group')\n</script>\n"],"mappings":""}
@@ -0,0 +1,48 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { MenuItemRegistered } from "./types.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
import * as vue_router0 from "vue-router";
import { RouteLocationRaw } from "vue-router";
//#region ../../packages/components/menu/src/menu-item.d.ts
interface MenuItemProps {
/**
* @description unique identification
* - will be required in the next major version
* - required: true
*/
index?: string | null;
/**
* @description Vue Router object
*/
route?: RouteLocationRaw;
/**
* @description whether disabled
*/
disabled?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
*/
declare const menuItemProps: {
readonly index: EpPropFinalized<(new (...args: any[]) => string) | (() => string | null) | (((new (...args: any[]) => string) | (() => string | null)) | null)[], unknown, unknown, null, boolean>;
readonly route: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | vue_router0.RouteLocationAsRelativeGeneric | vue_router0.RouteLocationAsPathGeneric) | (() => string | vue_router0.RouteLocationAsRelativeGeneric | vue_router0.RouteLocationAsPathGeneric) | (((new (...args: any[]) => string | vue_router0.RouteLocationAsRelativeGeneric | vue_router0.RouteLocationAsPathGeneric) | (() => string | vue_router0.RouteLocationAsRelativeGeneric | vue_router0.RouteLocationAsPathGeneric)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
*/
type MenuItemPropsPublic = ExtractPublicPropTypes<typeof menuItemProps>;
declare const menuItemEmits: {
click: (item: MenuItemRegistered) => boolean;
};
type MenuItemEmits = typeof menuItemEmits;
//#endregion
export { MenuItemEmits, MenuItemProps, MenuItemPropsPublic, menuItemEmits, menuItemProps };
@@ -0,0 +1,23 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/menu/src/menu-item.ts
/**
* @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
*/
const menuItemProps = require_runtime$1.buildProps({
index: {
type: require_runtime$1.definePropType([String, null]),
default: null
},
route: { type: require_runtime$1.definePropType([String, Object]) },
disabled: Boolean
});
const menuItemEmits = { click: (item) => (0, _vue_shared.isString)(item.index) && (0, _vue_shared.isArray)(item.indexPath) };
//#endregion
exports.menuItemEmits = menuItemEmits;
exports.menuItemProps = menuItemProps;
//# sourceMappingURL=menu-item.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/menu/src/menu-item.ts"],"sourcesContent":["import {\n buildProps,\n definePropType,\n isArray,\n isString,\n} from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { MenuItemRegistered } from './types'\n\nexport interface MenuItemProps {\n /**\n * @description unique identification\n * - will be required in the next major version\n * - required: true\n */\n index?: string | null\n /**\n * @description Vue Router object\n */\n route?: RouteLocationRaw\n /**\n * @description whether disabled\n */\n disabled?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.\n */\nexport const menuItemProps = buildProps({\n /**\n * @description unique identification\n */\n index: {\n type: definePropType<string | null>([String, null]),\n // will be required in the next major version\n // required: true,\n default: null,\n },\n /**\n * @description Vue Router object\n */\n route: {\n type: definePropType<RouteLocationRaw>([String, Object]),\n },\n /**\n * @description whether disabled\n */\n disabled: Boolean,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.\n */\nexport type MenuItemPropsPublic = ExtractPublicPropTypes<typeof menuItemProps>\n\nexport const menuItemEmits = {\n click: (item: MenuItemRegistered) =>\n isString(item.index) && isArray(item.indexPath),\n}\nexport type MenuItemEmits = typeof menuItemEmits\n"],"mappings":";;;;;;;;;AA+BA,MAAa,gBAAgBA,6BAAW;CAItC,OAAO;EACL,MAAMC,iCAA8B,CAAC,QAAQ,KAAK,CAAC;EAGnD,SAAS;EACV;CAID,OAAO,EACL,MAAMA,iCAAiC,CAAC,QAAQ,OAAO,CAAC,EACzD;CAID,UAAU;CACX,CAAU;AAOX,MAAa,gBAAgB,EAC3B,QAAQ,mCACG,KAAK,MAAM,6BAAY,KAAK,UAAU,EAClD"}
@@ -0,0 +1,72 @@
import { MenuItemRegistered, MenuProvider } from "./types.js";
import { MenuItemProps } from "./menu-item.js";
import * as vue from "vue";
//#region ../../packages/components/menu/src/menu-item.vue.d.ts
declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
type __VLS_Slots = {} & {
title?: (props: typeof __VLS_8) => any;
} & {
default?: (props: typeof __VLS_10) => any;
} & {
default?: (props: typeof __VLS_12) => any;
} & {
title?: (props: typeof __VLS_14) => any;
};
declare const __VLS_base: vue.DefineComponent<MenuItemProps, {
parentMenu: vue.ComputedRef<vue.ComponentInternalInstance>;
rootMenu: MenuProvider;
active: vue.ComputedRef<boolean>;
nsMenu: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
nsMenuItem: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
handleClick: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
click: (item: MenuItemRegistered) => void;
}, string, vue.PublicProps, Readonly<MenuItemProps> & Readonly<{
onClick?: ((item: MenuItemRegistered) => any) | undefined;
}>, {
index: string | null;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,97 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_error = require('../../../utils/error.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../tooltip/index.js');
const require_use_menu = require('./use-menu.js');
const require_tokens = require('./tokens.js');
const require_menu_item = require('./menu-item.js');
let vue = require("vue");
//#region ../../packages/components/menu/src/menu-item.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "ElMenuItem";
var menu_item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
name: COMPONENT_NAME,
__name: "menu-item",
props: require_menu_item.menuItemProps,
emits: require_menu_item.menuItemEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
require_types.isPropAbsent(props.index) && require_error.debugWarn(COMPONENT_NAME, "Missing required prop: \"index\"");
const instance = (0, vue.getCurrentInstance)();
const rootMenu = (0, vue.inject)(require_tokens.MENU_INJECTION_KEY);
const nsMenu = require_index.useNamespace("menu");
const nsMenuItem = require_index.useNamespace("menu-item");
if (!rootMenu) require_error.throwError(COMPONENT_NAME, "can not inject root menu");
const { parentMenu, indexPath } = require_use_menu.default(instance, (0, vue.toRef)(props, "index"));
const subMenu = (0, vue.inject)(`${require_tokens.SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`);
if (!subMenu) require_error.throwError(COMPONENT_NAME, "can not inject sub menu");
const active = (0, vue.computed)(() => props.index === rootMenu.activeIndex);
const item = (0, vue.reactive)({
index: props.index,
indexPath,
active
});
const handleClick = () => {
if (!props.disabled) {
rootMenu.handleMenuItemClick({
index: props.index,
indexPath: indexPath.value,
route: props.route
});
emit("click", item);
}
};
(0, vue.onMounted)(() => {
subMenu.addSubMenu(item);
rootMenu.addMenuItem(item);
});
(0, vue.onBeforeUnmount)(() => {
subMenu.removeSubMenu(item);
rootMenu.removeMenuItem(item);
});
__expose({
parentMenu,
rootMenu,
active,
nsMenu,
nsMenuItem,
handleClick
});
return (_ctx, _cache) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
class: (0, vue.normalizeClass)([
(0, vue.unref)(nsMenuItem).b(),
(0, vue.unref)(nsMenuItem).is("active", active.value),
(0, vue.unref)(nsMenuItem).is("disabled", __props.disabled)
]),
role: "menuitem",
tabindex: "-1",
onClick: handleClick
}, [(0, vue.unref)(parentMenu).type.name === "ElMenu" && (0, vue.unref)(rootMenu).props.collapse && _ctx.$slots.title ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$1.ElTooltip), {
key: 0,
effect: (0, vue.unref)(rootMenu).props.popperEffect,
placement: "right",
"fallback-placements": ["left"],
"popper-class": (0, vue.unref)(rootMenu).props.popperClass,
"popper-style": (0, vue.unref)(rootMenu).props.popperStyle,
persistent: (0, vue.unref)(rootMenu).props.persistent,
"focus-on-target": ""
}, {
content: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "title")]),
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(nsMenu).be("tooltip", "trigger")) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)]),
_: 3
}, 8, [
"effect",
"popper-class",
"popper-style",
"persistent"
])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.renderSlot)(_ctx.$slots, "title")], 64))], 2);
};
}
});
//#endregion
exports.default = menu_item_vue_vue_type_script_setup_true_lang_default;
//# sourceMappingURL=menu-item.vue_vue_type_script_setup_true_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n <li\n :class=\"[\n nsMenuItem.b(),\n nsMenuItem.is('active', active),\n nsMenuItem.is('disabled', disabled),\n ]\"\n role=\"menuitem\"\n tabindex=\"-1\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"rootMenu.props.popperEffect\"\n placement=\"right\"\n :fallback-placements=\"['left']\"\n :popper-class=\"rootMenu.props.popperClass\"\n :popper-style=\"rootMenu.props.popperStyle\"\n :persistent=\"rootMenu.props.persistent\"\n focus-on-target\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div :class=\"nsMenu.be('tooltip', 'trigger')\">\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\" setup>\n// @ts-nocheck\nimport {\n computed,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n reactive,\n toRef,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { debugWarn, isPropAbsent, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport useMenu from './use-menu'\nimport { menuItemEmits } from './menu-item'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { MenuItemProps } from './menu-item'\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n index: null,\n})\nconst emit = defineEmits(menuItemEmits)\n\nisPropAbsent(props.index) &&\n debugWarn(COMPONENT_NAME, 'Missing required prop: \"index\"')\n\nconst instance = getCurrentInstance()!\nconst rootMenu = inject<MenuProvider>(MENU_INJECTION_KEY)\nconst nsMenu = useNamespace('menu')\nconst nsMenuItem = useNamespace('menu-item')\nif (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\nconst { parentMenu, indexPath } = useMenu(instance, toRef(props, 'index'))\n\nconst subMenu = inject<SubMenuProvider>(\n `${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`\n)\nif (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\nconst active = computed(() => props.index === rootMenu.activeIndex)\nconst item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n})\n\nconst handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n}\n\nonMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n})\n\nonBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n})\n\ndefineExpose({\n parentMenu,\n rootMenu,\n active,\n nsMenu,\n nsMenuItem,\n handleClick,\n})\n</script>\n"],"mappings":";;;;;;;;;;;AA4DA,MAAM,iBAAiB;;;;;;;EAIvB,MAAM,QAAQ;EAGd,MAAM,OAAO;AAEb,6BAAa,MAAM,MAAM,IACvB,wBAAU,gBAAgB,mCAAgC;EAE5D,MAAM,wCAA+B;EACrC,MAAM,2BAAgC,kCAAkB;EACxD,MAAM,SAAS,2BAAa,OAAM;EAClC,MAAM,aAAa,2BAAa,YAAW;AAC3C,MAAI,CAAC,SAAU,0BAAW,gBAAgB,2BAA0B;EAEpE,MAAM,EAAE,YAAY,cAAc,yBAAQ,yBAAgB,OAAO,QAAQ,CAAA;EAEzE,MAAM,0BACJ,GAAG,wCAAyB,WAAW,MAAM,MAC/C;AACA,MAAI,CAAC,QAAS,0BAAW,gBAAgB,0BAAyB;EAElE,MAAM,iCAAwB,MAAM,UAAU,SAAS,YAAW;EAClE,MAAM,yBAAoC;GACxC,OAAO,MAAM;GACb;GACA;GACD,CAAA;EAED,MAAM,oBAAoB;AACxB,OAAI,CAAC,MAAM,UAAU;AACnB,aAAS,oBAAoB;KAC3B,OAAO,MAAM;KACb,WAAW,UAAU;KACrB,OAAO,MAAM;KACd,CAAA;AACD,SAAK,SAAS,KAAI;;;AAItB,2BAAgB;AACd,WAAQ,WAAW,KAAI;AACvB,YAAS,YAAY,KAAI;IAC1B;AAED,iCAAsB;AACpB,WAAQ,cAAc,KAAI;AAC1B,YAAS,eAAe,KAAI;IAC7B;AAED,WAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;;4DApFM,MAAA;IAlCF,+BAAK;oBAAU,WAAU,CAAC,GAAC;oBAAU,WAAU,CAAC,GAAE,UAAW,OAAA,MAAM;oBAAS,WAAU,CAAC,GAAE,YAAa,QAAA,SAAQ;;IAK/G,MAAK;IACL,UAAS;IACR,SAAO;sBAGS,WAAU,CAAC,KAAK,SAAI,2BAAyB,SAAQ,CAAC,MAAM,YAAoBA,KAAAA,OAAO,mEAmB3F,0BAAA,EAAA;;IAdV,uBAAQ,SAAQ,CAAC,MAAM;IACxB,WAAU;IACT,uBAAqB,CAAA,OAAQ;IAC7B,+BAAc,SAAQ,CAAC,MAAM;IAC7B,+BAAc,SAAQ,CAAC,MAAM;IAC7B,2BAAY,SAAQ,CAAC,MAAM;IAC5B,mBAAA;;IAEW,gCACY,qBAAA,KAAA,QAAA,QAAA;oCAIjB,6BAAA,OAAA,EAFA,8CAAO,OAAM,CAAC,GAAE,WAAA,UAAA,CAAA,yBACZ,KAAA,QAAA,UAAA;;;;;;;4DAMD,cAAA,EAAA,KAAA,GAAA,EAAA,qBAFD,KAAA,QAAA,UAAA,sBACa,KAAA,QAAA,QAAA"}
@@ -0,0 +1,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_menu_item_vue_vue_type_script_setup_true_lang = require('./menu-item.vue_vue_type_script_setup_true_lang.js');
//#region ../../packages/components/menu/src/menu-item.vue
var menu_item_default = require_menu_item_vue_vue_type_script_setup_true_lang.default;
//#endregion
exports.default = menu_item_default;
//# sourceMappingURL=menu-item2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item2.js","names":[],"sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n <li\n :class=\"[\n nsMenuItem.b(),\n nsMenuItem.is('active', active),\n nsMenuItem.is('disabled', disabled),\n ]\"\n role=\"menuitem\"\n tabindex=\"-1\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"rootMenu.props.popperEffect\"\n placement=\"right\"\n :fallback-placements=\"['left']\"\n :popper-class=\"rootMenu.props.popperClass\"\n :popper-style=\"rootMenu.props.popperStyle\"\n :persistent=\"rootMenu.props.persistent\"\n focus-on-target\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div :class=\"nsMenu.be('tooltip', 'trigger')\">\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\" setup>\n// @ts-nocheck\nimport {\n computed,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n reactive,\n toRef,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { debugWarn, isPropAbsent, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport useMenu from './use-menu'\nimport { menuItemEmits } from './menu-item'\nimport { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'\n\nimport type { MenuItemProps } from './menu-item'\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n index: null,\n})\nconst emit = defineEmits(menuItemEmits)\n\nisPropAbsent(props.index) &&\n debugWarn(COMPONENT_NAME, 'Missing required prop: \"index\"')\n\nconst instance = getCurrentInstance()!\nconst rootMenu = inject<MenuProvider>(MENU_INJECTION_KEY)\nconst nsMenu = useNamespace('menu')\nconst nsMenuItem = useNamespace('menu-item')\nif (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\nconst { parentMenu, indexPath } = useMenu(instance, toRef(props, 'index'))\n\nconst subMenu = inject<SubMenuProvider>(\n `${SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`\n)\nif (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\nconst active = computed(() => props.index === rootMenu.activeIndex)\nconst item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n})\n\nconst handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n}\n\nonMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n})\n\nonBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n})\n\ndefineExpose({\n parentMenu,\n rootMenu,\n active,\n nsMenu,\n nsMenuItem,\n handleClick,\n})\n</script>\n"],"mappings":""}
+130
View File
@@ -0,0 +1,130 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { PopperEffect } from "../../popper/src/popper.js";
import { MenuItemClicked } from "./types.js";
import "../../popper/index.js";
import * as vue from "vue";
import { CSSProperties, Component, ExtractPropTypes, ExtractPublicPropTypes, VNode } from "vue";
import { NavigationFailure } from "vue-router";
//#region ../../packages/components/menu/src/menu.d.ts
declare const menuProps: {
readonly mode: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
readonly defaultActive: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly defaultOpeneds: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => [], boolean>;
readonly uniqueOpened: BooleanConstructor;
readonly router: BooleanConstructor;
readonly menuTrigger: EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly collapse: BooleanConstructor;
readonly backgroundColor: StringConstructor;
readonly textColor: StringConstructor;
readonly activeTextColor: StringConstructor;
readonly closeOnClickOutside: BooleanConstructor;
readonly collapseTransition: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly ellipsis: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly popperOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly ellipsisIcon: EpPropFinalized<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | (((new (...args: any[]) => (string | Component) & {}) | (() => string | Component)) | null)[], unknown, unknown, () => vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
readonly popperEffect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "dark", boolean>;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
};
type MenuProps = ExtractPropTypes<typeof menuProps>;
type MenuPropsPublic = ExtractPublicPropTypes<typeof menuProps>;
declare const menuEmits: {
close: (index: string, indexPath: string[]) => boolean;
open: (index: string, indexPath: string[]) => boolean;
select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure>) => boolean;
};
type MenuEmits = typeof menuEmits;
declare const _default: vue.DefineComponent<ExtractPropTypes<{
readonly mode: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
readonly defaultActive: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly defaultOpeneds: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => [], boolean>;
readonly uniqueOpened: BooleanConstructor;
readonly router: BooleanConstructor;
readonly menuTrigger: EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly collapse: BooleanConstructor;
readonly backgroundColor: StringConstructor;
readonly textColor: StringConstructor;
readonly activeTextColor: StringConstructor;
readonly closeOnClickOutside: BooleanConstructor;
readonly collapseTransition: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly ellipsis: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly popperOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly ellipsisIcon: EpPropFinalized<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | (((new (...args: any[]) => (string | Component) & {}) | (() => string | Component)) | null)[], unknown, unknown, () => vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
readonly popperEffect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "dark", boolean>;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (index: string, indexPath: string[]) => boolean;
open: (index: string, indexPath: string[]) => boolean;
select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure>) => boolean;
}, string, vue.PublicProps, Readonly<ExtractPropTypes<{
readonly mode: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
readonly defaultActive: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly defaultOpeneds: EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | (((new (...args: any[]) => string[]) | (() => string[])) | null)[], unknown, unknown, () => [], boolean>;
readonly uniqueOpened: BooleanConstructor;
readonly router: BooleanConstructor;
readonly menuTrigger: EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
readonly collapse: BooleanConstructor;
readonly backgroundColor: StringConstructor;
readonly textColor: StringConstructor;
readonly activeTextColor: StringConstructor;
readonly closeOnClickOutside: BooleanConstructor;
readonly collapseTransition: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly ellipsis: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly popperOffset: EpPropFinalized<NumberConstructor, unknown, unknown, 6, boolean>;
readonly ellipsisIcon: EpPropFinalized<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | (((new (...args: any[]) => (string | Component) & {}) | (() => string | Component)) | null)[], unknown, unknown, () => vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
readonly popperEffect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "dark", boolean>;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly hideTimeout: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
}>> & Readonly<{
onClose?: ((index: string, indexPath: string[]) => any) | undefined;
onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
}>, {
readonly collapse: boolean;
readonly ellipsis: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly mode: EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
readonly showTimeout: number;
readonly hideTimeout: number;
readonly defaultActive: string;
readonly defaultOpeneds: string[];
readonly menuTrigger: EpPropMergeType<StringConstructor, "click" | "hover", unknown>;
readonly collapseTransition: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly popperOffset: number;
readonly ellipsisIcon: EpPropMergeType<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | (((new (...args: any[]) => (string | Component) & {}) | (() => string | Component)) | null)[], unknown, unknown>;
readonly popperEffect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
readonly uniqueOpened: boolean;
readonly router: boolean;
readonly closeOnClickOutside: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { MenuEmits, MenuProps, MenuPropsPublic, _default, menuEmits, menuProps };
+322
View File
@@ -0,0 +1,322 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_types = require('../../../utils/types.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_icon = require('../../../utils/vue/icon.js');
const require_vnode = require('../../../utils/vue/vnode.js');
const require_typescript = require('../../../utils/typescript.js');
const require_index = require('../../../directives/click-outside/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../icon/index.js');
const require_menu_bar = require('./utils/menu-bar.js');
const require_menu_collapse_transition = require('./menu-collapse-transition.js');
const require_use_menu_css_var = require('./use-menu-css-var.js');
const require_tokens = require('./tokens.js');
const require_sub_menu = require('./sub-menu.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/menu/src/menu.ts
const menuProps = require_runtime$1.buildProps({
mode: {
type: String,
values: ["horizontal", "vertical"],
default: "vertical"
},
defaultActive: {
type: String,
default: ""
},
defaultOpeneds: {
type: require_runtime$1.definePropType(Array),
default: () => require_typescript.mutable([])
},
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
values: ["hover", "click"],
default: "hover"
},
collapse: Boolean,
backgroundColor: String,
textColor: String,
activeTextColor: String,
closeOnClickOutside: Boolean,
collapseTransition: {
type: Boolean,
default: true
},
ellipsis: {
type: Boolean,
default: true
},
popperOffset: {
type: Number,
default: 6
},
ellipsisIcon: {
type: require_icon.iconPropType,
default: () => _element_plus_icons_vue.More
},
popperEffect: {
type: require_runtime$1.definePropType(String),
default: "dark"
},
popperClass: String,
popperStyle: { type: require_runtime$1.definePropType([String, Object]) },
showTimeout: {
type: Number,
default: 300
},
hideTimeout: {
type: Number,
default: 300
},
persistent: {
type: Boolean,
default: true
}
});
const checkIndexPath = (indexPath) => (0, _vue_shared.isArray)(indexPath) && indexPath.every((path) => (0, _vue_shared.isString)(path));
const menuEmits = {
close: (index, indexPath) => (0, _vue_shared.isString)(index) && checkIndexPath(indexPath),
open: (index, indexPath) => (0, _vue_shared.isString)(index) && checkIndexPath(indexPath),
select: (index, indexPath, item, routerResult) => (0, _vue_shared.isString)(index) && checkIndexPath(indexPath) && (0, _vue_shared.isObject)(item) && (require_types.isUndefined(routerResult) || routerResult instanceof Promise)
};
const DEFAULT_MORE_ITEM_WIDTH = 64;
var menu_default = (0, vue.defineComponent)({
name: "ElMenu",
props: menuProps,
emits: menuEmits,
setup(props, { emit, slots, expose }) {
const instance = (0, vue.getCurrentInstance)();
const router = instance.appContext.config.globalProperties.$router;
const menu = (0, vue.ref)();
const subMenu = (0, vue.ref)();
const nsMenu = require_index$1.useNamespace("menu");
const nsSubMenu = require_index$1.useNamespace("sub-menu");
let moreItemWidth = DEFAULT_MORE_ITEM_WIDTH;
const sliceIndex = (0, vue.ref)(-1);
const openedMenus = (0, vue.ref)(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
const activeIndex = (0, vue.ref)(props.defaultActive);
const items = (0, vue.ref)({});
const subMenus = (0, vue.ref)({});
const isMenuPopup = (0, vue.computed)(() => props.mode === "horizontal" || props.mode === "vertical" && props.collapse);
const initMenu = () => {
const activeItem = activeIndex.value && items.value[activeIndex.value];
if (!activeItem || props.mode === "horizontal" || props.collapse) return;
activeItem.indexPath.forEach((index) => {
const subMenu = subMenus.value[index];
subMenu && openMenu(index, subMenu.indexPath);
});
};
const openMenu = (index, indexPath) => {
if (openedMenus.value.includes(index)) return;
if (props.uniqueOpened) openedMenus.value = openedMenus.value.filter((index) => indexPath.includes(index));
openedMenus.value.push(index);
emit("open", index, indexPath);
};
const close = (index) => {
const i = openedMenus.value.indexOf(index);
if (i !== -1) openedMenus.value.splice(i, 1);
};
const closeMenu = (index, indexPath) => {
close(index);
emit("close", index, indexPath);
};
const handleSubMenuClick = ({ index, indexPath }) => {
openedMenus.value.includes(index) ? closeMenu(index, indexPath) : openMenu(index, indexPath);
};
const handleMenuItemClick = (menuItem) => {
if (props.mode === "horizontal" || props.collapse) openedMenus.value = [];
const { index, indexPath } = menuItem;
if ((0, lodash_unified.isNil)(index) || (0, lodash_unified.isNil)(indexPath)) return;
if (props.router && router) {
const route = menuItem.route || index;
const routerResult = router.push(route).then((res) => {
if (!res) activeIndex.value = index;
return res;
});
emit("select", index, indexPath, {
index,
indexPath,
route
}, routerResult);
} else {
activeIndex.value = index;
emit("select", index, indexPath, {
index,
indexPath
});
}
};
const updateActiveIndex = (val) => {
const itemsInData = items.value;
activeIndex.value = (itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive])?.index ?? val;
};
const calcMenuItemWidth = (menuItem) => {
const computedStyle = getComputedStyle(menuItem);
const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
const marginRight = Number.parseInt(computedStyle.marginRight, 10);
return menuItem.offsetWidth + marginLeft + marginRight || 0;
};
const calcSliceIndex = () => {
if (!menu.value) return -1;
const items = Array.from(menu.value.childNodes).filter((item) => item.nodeName !== "#comment" && (item.nodeName !== "#text" || item.nodeValue));
const computedMenuStyle = getComputedStyle(menu.value);
const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
let calcWidth = 0;
let sliceIndex = 0;
items.forEach((item, index) => {
calcWidth += calcMenuItemWidth(item);
if (calcWidth <= menuWidth - moreItemWidth) sliceIndex = index + 1;
});
return sliceIndex === items.length ? -1 : sliceIndex;
};
const getIndexPath = (index) => subMenus.value[index].indexPath;
const debounce = (fn, wait = 33.34) => {
let timer;
return () => {
timer && clearTimeout(timer);
timer = setTimeout(() => {
fn();
}, wait);
};
};
let isFirstTimeRender = true;
const handleResize = () => {
const el = (0, _vueuse_core.unrefElement)(subMenu);
if (el) moreItemWidth = calcMenuItemWidth(el) || DEFAULT_MORE_ITEM_WIDTH;
if (sliceIndex.value === calcSliceIndex()) return;
const callback = () => {
sliceIndex.value = -1;
(0, vue.nextTick)(() => {
sliceIndex.value = calcSliceIndex();
});
};
isFirstTimeRender ? callback() : debounce(callback)();
isFirstTimeRender = false;
};
(0, vue.watch)(() => props.defaultActive, (currentActive) => {
if (!items.value[currentActive]) activeIndex.value = "";
updateActiveIndex(currentActive);
});
(0, vue.watch)(() => props.collapse, (value) => {
if (value) openedMenus.value = [];
});
(0, vue.watch)(items.value, initMenu);
let resizeStopper;
(0, vue.watchEffect)(() => {
if (props.mode === "horizontal" && props.ellipsis) resizeStopper = (0, _vueuse_core.useResizeObserver)(menu, handleResize).stop;
else resizeStopper?.();
});
const mouseInChild = (0, vue.ref)(false);
{
const addSubMenu = (item) => {
subMenus.value[item.index] = item;
};
const removeSubMenu = (item) => {
delete subMenus.value[item.index];
};
const addMenuItem = (item) => {
items.value[item.index] = item;
};
const removeMenuItem = (item) => {
delete items.value[item.index];
};
(0, vue.provide)(require_tokens.MENU_INJECTION_KEY, (0, vue.reactive)({
props,
openedMenus,
items,
subMenus,
activeIndex,
isMenuPopup,
addMenuItem,
removeMenuItem,
addSubMenu,
removeSubMenu,
openMenu,
closeMenu,
handleMenuItemClick,
handleSubMenuClick
}));
(0, vue.provide)(`${require_tokens.SUB_MENU_INJECTION_KEY}${instance.uid}`, {
addSubMenu,
removeSubMenu,
mouseInChild,
level: 0
});
}
(0, vue.onMounted)(() => {
if (props.mode === "horizontal") new require_menu_bar.default(instance.vnode.el, nsMenu.namespace.value);
});
{
const open = (index) => {
const { indexPath } = subMenus.value[index];
indexPath.forEach((i) => openMenu(i, indexPath));
};
expose({
open,
close,
updateActiveIndex,
handleResize
});
}
const ulStyle = require_use_menu_css_var.useMenuCssVar(props, 0);
return () => {
let slot = slots.default?.() ?? [];
const vShowMore = [];
if (props.mode === "horizontal" && menu.value) {
const originalSlot = require_vnode.flattedChildren(slot).filter((vnode) => {
return vnode?.shapeFlag !== 8;
});
const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value);
const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
if (slotMore?.length && props.ellipsis) {
slot = slotDefault;
vShowMore.push((0, vue.h)(require_sub_menu.default, {
ref: subMenu,
index: "sub-menu-more",
class: nsSubMenu.e("hide-arrow"),
popperOffset: props.popperOffset
}, {
title: () => (0, vue.h)(require_index$2.ElIcon, { class: nsSubMenu.e("icon-more") }, { default: () => (0, vue.h)(props.ellipsisIcon) }),
default: () => slotMore
}));
}
}
const directives = props.closeOnClickOutside ? [[require_index.default, () => {
if (!openedMenus.value.length) return;
if (!mouseInChild.value) {
openedMenus.value.forEach((openedMenu) => emit("close", openedMenu, getIndexPath(openedMenu)));
openedMenus.value = [];
}
}]] : [];
const vMenu = (0, vue.withDirectives)((0, vue.h)("ul", {
key: String(props.collapse),
role: "menubar",
ref: menu,
style: ulStyle.value,
class: {
[nsMenu.b()]: true,
[nsMenu.m(props.mode)]: true,
[nsMenu.m("collapse")]: props.collapse
}
}, [...slot, ...vShowMore]), directives);
if (props.collapseTransition && props.mode === "vertical") return (0, vue.h)(require_menu_collapse_transition.default, () => vMenu);
return vMenu;
};
}
});
//#endregion
exports.default = menu_default;
exports.menuEmits = menuEmits;
exports.menuProps = menuProps;
//# sourceMappingURL=menu.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,146 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import * as vue from "vue";
import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/menu/src/sub-menu.d.ts
declare const subMenuProps: {
readonly index: {
readonly type: vue.PropType<string>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: NumberConstructor;
readonly hideTimeout: NumberConstructor;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly popperOffset: NumberConstructor;
readonly expandCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
type SubMenuProps = ExtractPropTypes<typeof subMenuProps>;
type SubMenuPropsPublic = ExtractPublicPropTypes<typeof subMenuProps>;
declare const _default: vue.DefineComponent<ExtractPropTypes<{
readonly index: {
readonly type: vue.PropType<string>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: NumberConstructor;
readonly hideTimeout: NumberConstructor;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly popperOffset: NumberConstructor;
readonly expandCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ExtractPropTypes<{
readonly index: {
readonly type: vue.PropType<string>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly showTimeout: NumberConstructor;
readonly hideTimeout: NumberConstructor;
readonly popperClass: StringConstructor;
readonly popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly disabled: BooleanConstructor;
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly popperOffset: NumberConstructor;
readonly expandCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly expandOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseCloseIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly collapseOpenIcon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{}>, {
readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
readonly disabled: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { SubMenuProps, SubMenuPropsPublic, _default, subMenuProps };
+243
View File
@@ -0,0 +1,243 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../utils/dom/aria.js');
const require_types = require('../../../utils/types.js');
const require_error = require('../../../utils/error.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_icon = require('../../../utils/vue/icon.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../icon/index.js');
const require_index$2 = require('../../tooltip/index.js');
const require_index$3 = require('../../collapse-transition/index.js');
const require_use_menu = require('./use-menu.js');
const require_use_menu_css_var = require('./use-menu-css-var.js');
const require_tokens = require('./tokens.js');
let _vueuse_core = require("@vueuse/core");
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/menu/src/sub-menu.ts
const subMenuProps = require_runtime$1.buildProps({
index: {
type: String,
required: true
},
showTimeout: Number,
hideTimeout: Number,
popperClass: String,
popperStyle: { type: require_runtime$1.definePropType([String, Object]) },
disabled: Boolean,
teleported: {
type: Boolean,
default: void 0
},
popperOffset: Number,
expandCloseIcon: { type: require_icon.iconPropType },
expandOpenIcon: { type: require_icon.iconPropType },
collapseCloseIcon: { type: require_icon.iconPropType },
collapseOpenIcon: { type: require_icon.iconPropType }
});
const COMPONENT_NAME = "ElSubMenu";
var sub_menu_default = (0, vue.defineComponent)({
name: COMPONENT_NAME,
props: subMenuProps,
setup(props, { slots, expose }) {
const instance = (0, vue.getCurrentInstance)();
const { indexPath, parentMenu } = require_use_menu.default(instance, (0, vue.computed)(() => props.index));
const nsMenu = require_index.useNamespace("menu");
const nsSubMenu = require_index.useNamespace("sub-menu");
const rootMenu = (0, vue.inject)(require_tokens.MENU_INJECTION_KEY);
if (!rootMenu) require_error.throwError(COMPONENT_NAME, "can not inject root menu");
const subMenu = (0, vue.inject)(`${require_tokens.SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`);
if (!subMenu) require_error.throwError(COMPONENT_NAME, "can not inject sub menu");
const items = (0, vue.ref)({});
const subMenus = (0, vue.ref)({});
let timeout;
const mouseInChild = (0, vue.ref)(false);
const verticalTitleRef = (0, vue.ref)();
const vPopper = (0, vue.ref)();
const isFirstLevel = (0, vue.computed)(() => subMenu.level === 0);
const currentPlacement = (0, vue.computed)(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
const subMenuTitleIcon = (0, vue.computed)(() => {
if (mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse) {
if (props.expandCloseIcon && props.expandOpenIcon) return opened.value ? props.expandOpenIcon : props.expandCloseIcon;
return _element_plus_icons_vue.ArrowDown;
} else {
if (props.collapseCloseIcon && props.collapseOpenIcon) return opened.value ? props.collapseOpenIcon : props.collapseCloseIcon;
return _element_plus_icons_vue.ArrowRight;
}
});
const appendToBody = (0, vue.computed)(() => {
const value = props.teleported;
return require_types.isUndefined(value) ? isFirstLevel.value : value;
});
const menuTransitionName = (0, vue.computed)(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
const fallbackPlacements = (0, vue.computed)(() => mode.value === "horizontal" && isFirstLevel.value ? [
"bottom-start",
"bottom-end",
"top-start",
"top-end",
"right-start",
"left-start"
] : [
"right-start",
"right",
"right-end",
"left-start",
"bottom-start",
"bottom-end",
"top-start",
"top-end"
]);
const opened = (0, vue.computed)(() => rootMenu.openedMenus.includes(props.index));
const active = (0, vue.computed)(() => [...Object.values(items.value), ...Object.values(subMenus.value)].some(({ active }) => active));
const mode = (0, vue.computed)(() => rootMenu.props.mode);
const persistent = (0, vue.computed)(() => rootMenu.props.persistent);
const item = (0, vue.reactive)({
index: props.index,
indexPath,
active
});
const ulStyle = require_use_menu_css_var.useMenuCssVar(rootMenu.props, subMenu.level + 1);
const subMenuPopperOffset = (0, vue.computed)(() => props.popperOffset ?? rootMenu.props.popperOffset);
const subMenuPopperClass = (0, vue.computed)(() => props.popperClass ?? rootMenu.props.popperClass);
const subMenuPopperStyle = (0, vue.computed)(() => props.popperStyle ?? rootMenu.props.popperStyle);
const subMenuShowTimeout = (0, vue.computed)(() => props.showTimeout ?? rootMenu.props.showTimeout);
const subMenuHideTimeout = (0, vue.computed)(() => props.hideTimeout ?? rootMenu.props.hideTimeout);
const doDestroy = () => vPopper.value?.popperRef?.popperInstanceRef?.destroy();
const handleCollapseToggle = (value) => {
if (!value) doDestroy();
};
const handleClick = () => {
if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) return;
rootMenu.handleSubMenuClick({
index: props.index,
indexPath: indexPath.value,
active: active.value
});
};
const handleMouseenter = (event, showTimeout = subMenuShowTimeout.value) => {
if (event.type === "focus") return;
if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
subMenu.mouseInChild.value = true;
return;
}
subMenu.mouseInChild.value = true;
timeout?.();
({stop: timeout} = (0, _vueuse_core.useTimeoutFn)(() => {
rootMenu.openMenu(props.index, indexPath.value);
}, showTimeout));
if (appendToBody.value) parentMenu.value.vnode.el?.dispatchEvent(new MouseEvent("mouseenter"));
if (event.type === "mouseenter" && event.target) (0, vue.nextTick)(() => {
require_aria.focusElement(event.target, { preventScroll: true });
});
};
const handleMouseleave = (deepDispatch = false) => {
if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
subMenu.mouseInChild.value = false;
return;
}
timeout?.();
subMenu.mouseInChild.value = false;
({stop: timeout} = (0, _vueuse_core.useTimeoutFn)(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), subMenuHideTimeout.value));
if (appendToBody.value && deepDispatch) subMenu.handleMouseleave?.(true);
};
(0, vue.watch)(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
{
const addSubMenu = (item) => {
subMenus.value[item.index] = item;
};
const removeSubMenu = (item) => {
delete subMenus.value[item.index];
};
(0, vue.provide)(`${require_tokens.SUB_MENU_INJECTION_KEY}${instance.uid}`, {
addSubMenu,
removeSubMenu,
handleMouseleave,
mouseInChild,
level: subMenu.level + 1
});
}
expose({ opened });
(0, vue.onMounted)(() => {
rootMenu.addSubMenu(item);
subMenu.addSubMenu(item);
});
(0, vue.onBeforeUnmount)(() => {
subMenu.removeSubMenu(item);
rootMenu.removeSubMenu(item);
});
return () => {
const titleTag = [slots.title?.(), (0, vue.h)(require_index$1.ElIcon, {
class: nsSubMenu.e("icon-arrow"),
style: { transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none" }
}, { default: () => (0, _vue_shared.isString)(subMenuTitleIcon.value) ? (0, vue.h)(instance.appContext.components[subMenuTitleIcon.value]) : (0, vue.h)(subMenuTitleIcon.value) })];
const child = rootMenu.isMenuPopup ? (0, vue.h)(require_index$2.ElTooltip, {
ref: vPopper,
visible: opened.value,
effect: "light",
pure: true,
offset: subMenuPopperOffset.value,
showArrow: false,
persistent: persistent.value,
popperClass: subMenuPopperClass.value,
popperStyle: subMenuPopperStyle.value,
placement: currentPlacement.value,
teleported: appendToBody.value,
fallbackPlacements: fallbackPlacements.value,
transition: menuTransitionName.value,
gpuAcceleration: false
}, {
content: () => (0, vue.h)("div", {
class: [
nsMenu.m(mode.value),
nsMenu.m("popup-container"),
subMenuPopperClass.value
],
onMouseenter: (evt) => handleMouseenter(evt, 100),
onMouseleave: () => handleMouseleave(true),
onFocus: (evt) => handleMouseenter(evt, 100)
}, [(0, vue.h)("ul", {
class: [
nsMenu.b(),
nsMenu.m("popup"),
nsMenu.m(`popup-${currentPlacement.value}`)
],
style: ulStyle.value
}, [slots.default?.()])]),
default: () => (0, vue.h)("div", {
class: nsSubMenu.e("title"),
onClick: handleClick
}, titleTag)
}) : (0, vue.h)(vue.Fragment, {}, [(0, vue.h)("div", {
class: nsSubMenu.e("title"),
ref: verticalTitleRef,
onClick: handleClick
}, titleTag), (0, vue.h)(require_index$3.ElCollapseTransition, {}, { default: () => (0, vue.withDirectives)((0, vue.h)("ul", {
role: "menu",
class: [nsMenu.b(), nsMenu.m("inline")],
style: ulStyle.value
}, [slots.default?.()]), [[vue.vShow, opened.value]]) })]);
return (0, vue.h)("li", {
class: [
nsSubMenu.b(),
nsSubMenu.is("active", active.value),
nsSubMenu.is("opened", opened.value),
nsSubMenu.is("disabled", props.disabled)
],
role: "menuitem",
ariaHaspopup: true,
ariaExpanded: opened.value,
onMouseenter: handleMouseenter,
onMouseleave: () => handleMouseleave(),
onFocus: handleMouseenter
}, [child]);
};
}
});
//#endregion
exports.default = sub_menu_default;
exports.subMenuProps = subMenuProps;
//# sourceMappingURL=sub-menu.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
//#region ../../packages/components/menu/src/tokens.d.ts
declare const MENU_INJECTION_KEY = "rootMenu";
declare const SUB_MENU_INJECTION_KEY = "subMenu:";
//#endregion
export { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY };
+10
View File
@@ -0,0 +1,10 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/menu/src/tokens.ts
const MENU_INJECTION_KEY = "rootMenu";
const SUB_MENU_INJECTION_KEY = "subMenu:";
//#endregion
exports.MENU_INJECTION_KEY = MENU_INJECTION_KEY;
exports.SUB_MENU_INJECTION_KEY = SUB_MENU_INJECTION_KEY;
//# sourceMappingURL=tokens.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tokens.js","names":[],"sources":["../../../../../../packages/components/menu/src/tokens.ts"],"sourcesContent":["export const MENU_INJECTION_KEY = 'rootMenu'\n\nexport const SUB_MENU_INJECTION_KEY = 'subMenu:'\n"],"mappings":";;;AAAA,MAAa,qBAAqB;AAElC,MAAa,yBAAyB"}
+40
View File
@@ -0,0 +1,40 @@
import { MenuProps } from "./menu.js";
import { Ref } from "vue";
import { RouteLocationRaw } from "vue-router";
//#region ../../packages/components/menu/src/types.d.ts
interface MenuItemRegistered {
index: string;
indexPath: string[];
active: boolean;
}
interface MenuItemClicked {
index: string;
indexPath: string[];
route?: RouteLocationRaw;
}
interface MenuProvider {
openedMenus: string[];
items: Record<string, MenuItemRegistered>;
subMenus: Record<string, MenuItemRegistered>;
activeIndex?: string;
isMenuPopup: boolean;
props: MenuProps;
addMenuItem: (item: MenuItemRegistered) => void;
removeMenuItem: (item: MenuItemRegistered) => void;
addSubMenu: (item: MenuItemRegistered) => void;
removeSubMenu: (item: MenuItemRegistered) => void;
openMenu: (index: string, indexPath: string[]) => void;
closeMenu: (index: string, indexPath: string[]) => void;
handleMenuItemClick: (item: MenuItemClicked) => void;
handleSubMenuClick: (subMenu: MenuItemRegistered) => void;
}
interface SubMenuProvider {
addSubMenu: (item: MenuItemRegistered) => void;
removeSubMenu: (item: MenuItemRegistered) => void;
handleMouseleave?: (deepDispatch: boolean) => void;
mouseInChild: Ref<boolean>;
level: number;
}
//#endregion
export { MenuItemClicked, MenuItemRegistered, MenuProvider, SubMenuProvider };
+1
View File
@@ -0,0 +1 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,16 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
let _ctrl_tinycolor = require("@ctrl/tinycolor");
//#region ../../packages/components/menu/src/use-menu-color.ts
function useMenuColor(props) {
return (0, vue.computed)(() => {
const color = props.backgroundColor;
return color ? new _ctrl_tinycolor.TinyColor(color).shade(20).toString() : "";
});
}
//#endregion
exports.default = useMenuColor;
//# sourceMappingURL=use-menu-color.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-menu-color.js","names":["TinyColor"],"sources":["../../../../../../packages/components/menu/src/use-menu-color.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { TinyColor } from '@ctrl/tinycolor'\n\nimport type { MenuProps } from './menu'\n\nexport default function useMenuColor(props: MenuProps) {\n const menuBarColor = computed(() => {\n const color = props.backgroundColor\n return color ? new TinyColor(color).shade(20).toString() : ''\n })\n return menuBarColor\n}\n"],"mappings":";;;;;;AAKA,SAAwB,aAAa,OAAkB;AAKrD,gCAJoC;EAClC,MAAM,QAAQ,MAAM;AACpB,SAAO,QAAQ,IAAIA,0BAAU,MAAM,CAAC,MAAM,GAAG,CAAC,UAAU,GAAG;GAC3D"}
@@ -0,0 +1,22 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_use_menu_color = require('./use-menu-color.js');
let vue = require("vue");
//#region ../../packages/components/menu/src/use-menu-css-var.ts
const useMenuCssVar = (props, level) => {
const ns = require_index.useNamespace("menu");
return (0, vue.computed)(() => ns.cssVarBlock({
"text-color": props.textColor || "",
"hover-text-color": props.textColor || "",
"bg-color": props.backgroundColor || "",
"hover-bg-color": require_use_menu_color.default(props).value || "",
"active-color": props.activeTextColor || "",
level: `${level}`
}));
};
//#endregion
exports.useMenuCssVar = useMenuCssVar;
//# sourceMappingURL=use-menu-css-var.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-menu-css-var.js","names":["useNamespace","useMenuColor"],"sources":["../../../../../../packages/components/menu/src/use-menu-css-var.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport useMenuColor from './use-menu-color'\n\nimport type { MenuProps } from './menu'\n\nexport const useMenuCssVar = (props: MenuProps, level: number) => {\n const ns = useNamespace('menu')\n return computed(() =>\n ns.cssVarBlock({\n 'text-color': props.textColor || '',\n 'hover-text-color': props.textColor || '',\n 'bg-color': props.backgroundColor || '',\n 'hover-bg-color': useMenuColor(props).value || '',\n 'active-color': props.activeTextColor || '',\n level: `${level}`,\n })\n )\n}\n"],"mappings":";;;;;;;AAMA,MAAa,iBAAiB,OAAkB,UAAkB;CAChE,MAAM,KAAKA,2BAAa,OAAO;AAC/B,gCACE,GAAG,YAAY;EACb,cAAc,MAAM,aAAa;EACjC,oBAAoB,MAAM,aAAa;EACvC,YAAY,MAAM,mBAAmB;EACrC,kBAAkBC,+BAAa,MAAM,CAAC,SAAS;EAC/C,gBAAgB,MAAM,mBAAmB;EACzC,OAAO,GAAG;EACX,CAAC,CACH"}
+28
View File
@@ -0,0 +1,28 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
let vue = require("vue");
//#region ../../packages/components/menu/src/use-menu.ts
function useMenu(instance, currentIndex) {
const indexPath = (0, vue.computed)(() => {
let parent = instance.parent;
const path = [currentIndex.value];
while (parent.type.name !== "ElMenu") {
if (parent.props.index) path.unshift(parent.props.index);
parent = parent.parent;
}
return path;
});
return {
parentMenu: (0, vue.computed)(() => {
let parent = instance.parent;
while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) parent = parent.parent;
return parent;
}),
indexPath
};
}
//#endregion
exports.default = useMenu;
//# sourceMappingURL=use-menu.js.map
@@ -0,0 +1 @@
{"version":3,"file":"use-menu.js","names":[],"sources":["../../../../../../packages/components/menu/src/use-menu.ts"],"sourcesContent":["import { computed } from 'vue'\n\nimport type { ComponentInternalInstance, Ref } from 'vue'\n\nexport default function useMenu(\n instance: ComponentInternalInstance,\n currentIndex: Ref<string>\n) {\n const indexPath = computed(() => {\n let parent = instance.parent!\n const path = [currentIndex.value]\n while (parent.type.name !== 'ElMenu') {\n if (parent.props.index) {\n path.unshift(parent.props.index as string)\n }\n parent = parent.parent!\n }\n return path\n })\n\n const parentMenu = computed(() => {\n let parent = instance.parent\n while (parent && !['ElMenu', 'ElSubMenu'].includes(parent.type.name!)) {\n parent = parent.parent\n }\n return parent!\n })\n\n return {\n parentMenu,\n indexPath,\n }\n}\n"],"mappings":";;;;;AAIA,SAAwB,QACtB,UACA,cACA;CACA,MAAM,oCAA2B;EAC/B,IAAI,SAAS,SAAS;EACtB,MAAM,OAAO,CAAC,aAAa,MAAM;AACjC,SAAO,OAAO,KAAK,SAAS,UAAU;AACpC,OAAI,OAAO,MAAM,MACf,MAAK,QAAQ,OAAO,MAAM,MAAgB;AAE5C,YAAS,OAAO;;AAElB,SAAO;GACP;AAUF,QAAO;EACL,oCATgC;GAChC,IAAI,SAAS,SAAS;AACtB,UAAO,UAAU,CAAC,CAAC,UAAU,YAAY,CAAC,SAAS,OAAO,KAAK,KAAM,CACnE,UAAS,OAAO;AAElB,UAAO;IACP;EAIA;EACD"}
@@ -0,0 +1,20 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_menu_item = require('./menu-item.js');
//#region ../../packages/components/menu/src/utils/menu-bar.ts
var Menu = class {
constructor(domNode, namespace) {
this.domNode = domNode;
this.init(namespace);
}
init(namespace) {
const menuChildren = this.domNode.childNodes;
Array.from(menuChildren).forEach((child) => {
if (child.nodeType === 1) new require_menu_item.default(child, namespace);
});
}
};
//#endregion
exports.default = Menu;
//# sourceMappingURL=menu-bar.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-bar.js","names":["MenuItem"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-bar.ts"],"sourcesContent":["import MenuItem from './menu-item'\n\nimport type { RendererNode } from 'vue'\n\nclass Menu {\n constructor(\n public domNode: RendererNode,\n namespace: string\n ) {\n this.init(namespace)\n }\n init(namespace: string): void {\n const menuChildren = this.domNode.childNodes\n Array.from<Node>(menuChildren).forEach((child) => {\n if (child.nodeType === 1) {\n new MenuItem(child as HTMLElement, namespace)\n }\n })\n }\n}\n\nexport default Menu\n"],"mappings":";;;;AAIA,IAAM,OAAN,MAAW;CACT,YACE,AAAO,SACP,WACA;EAFO;AAGP,OAAK,KAAK,UAAU;;CAEtB,KAAK,WAAyB;EAC5B,MAAM,eAAe,KAAK,QAAQ;AAClC,QAAM,KAAW,aAAa,CAAC,SAAS,UAAU;AAChD,OAAI,MAAM,aAAa,EACrB,KAAIA,0BAAS,OAAsB,UAAU;IAE/C"}
@@ -0,0 +1,53 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_aria = require('../../../../constants/aria.js');
const require_aria$1 = require('../../../../utils/dom/aria.js');
const require_event = require('../../../../utils/dom/event.js');
const require_submenu = require('./submenu.js');
//#region ../../packages/components/menu/src/utils/menu-item.ts
var MenuItem = class {
constructor(domNode, namespace) {
this.domNode = domNode;
this.submenu = null;
this.submenu = null;
this.init(namespace);
}
init(namespace) {
this.domNode.setAttribute("tabindex", "0");
const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
if (menuChild) this.submenu = new require_submenu.default(this, menuChild);
this.addListeners();
}
addListeners() {
this.domNode.addEventListener("keydown", (event) => {
const code = require_event.getEventCode(event);
let prevDef = false;
switch (code) {
case require_aria.EVENT_CODE.down:
require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
this.submenu && this.submenu.gotoSubIndex(0);
prevDef = true;
break;
case require_aria.EVENT_CODE.up:
require_aria$1.triggerEvent(event.currentTarget, "mouseenter");
this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
prevDef = true;
break;
case require_aria.EVENT_CODE.tab:
require_aria$1.triggerEvent(event.currentTarget, "mouseleave");
break;
case require_aria.EVENT_CODE.enter:
case require_aria.EVENT_CODE.numpadEnter:
case require_aria.EVENT_CODE.space:
prevDef = true;
event.currentTarget.click();
break;
}
if (prevDef) event.preventDefault();
});
}
};
//#endregion
exports.default = MenuItem;
//# sourceMappingURL=menu-item.js.map
@@ -0,0 +1 @@
{"version":3,"file":"menu-item.js","names":["SubMenu","getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/menu-item.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport SubMenu from './submenu'\n\nclass MenuItem {\n public submenu: SubMenu = null\n constructor(\n public domNode: HTMLElement,\n namespace: string\n ) {\n this.submenu = null\n this.init(namespace)\n }\n\n init(namespace: string): void {\n this.domNode.setAttribute('tabindex', '0')\n const menuChild = this.domNode.querySelector(`.${namespace}-menu`)\n if (menuChild) {\n this.submenu = new SubMenu(this, menuChild)\n }\n this.addListeners()\n }\n\n addListeners(): void {\n this.domNode.addEventListener('keydown', (event: KeyboardEvent) => {\n const code = getEventCode(event)\n let prevDef = false\n\n switch (code) {\n case EVENT_CODE.down: {\n triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n this.submenu && this.submenu.gotoSubIndex(0)\n prevDef = true\n break\n }\n case EVENT_CODE.up: {\n triggerEvent(event.currentTarget as HTMLElement, 'mouseenter')\n this.submenu &&\n this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1)\n prevDef = true\n break\n }\n case EVENT_CODE.tab: {\n triggerEvent(event.currentTarget as HTMLElement, 'mouseleave')\n break\n }\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n case EVENT_CODE.space: {\n prevDef = true\n ;(event.currentTarget as HTMLElement).click()\n break\n }\n }\n if (prevDef) {\n event.preventDefault()\n }\n })\n }\n}\n\nexport default MenuItem\n"],"mappings":";;;;;;;AAKA,IAAM,WAAN,MAAe;CAEb,YACE,AAAO,SACP,WACA;EAFO;iBAFiB;AAKxB,OAAK,UAAU;AACf,OAAK,KAAK,UAAU;;CAGtB,KAAK,WAAyB;AAC5B,OAAK,QAAQ,aAAa,YAAY,IAAI;EAC1C,MAAM,YAAY,KAAK,QAAQ,cAAc,IAAI,UAAU,OAAO;AAClE,MAAI,UACF,MAAK,UAAU,IAAIA,wBAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAOC,2BAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAKC,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAKA,wBAAW;AACd,iCAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;IAChB,KAAKA,wBAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}
@@ -0,0 +1,62 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_aria = require('../../../../constants/aria.js');
const require_aria$1 = require('../../../../utils/dom/aria.js');
const require_event = require('../../../../utils/dom/event.js');
//#region ../../packages/components/menu/src/utils/submenu.ts
var SubMenu = class {
constructor(parent, domNode) {
this.parent = parent;
this.domNode = domNode;
this.subIndex = 0;
this.subIndex = 0;
this.init();
}
init() {
this.subMenuItems = this.domNode.querySelectorAll("li");
this.addListeners();
}
gotoSubIndex(idx) {
if (idx === this.subMenuItems.length) idx = 0;
else if (idx < 0) idx = this.subMenuItems.length - 1;
this.subMenuItems[idx].focus();
this.subIndex = idx;
}
addListeners() {
const parentNode = this.parent.domNode;
Array.prototype.forEach.call(this.subMenuItems, (el) => {
el.addEventListener("keydown", (event) => {
const code = require_event.getEventCode(event);
let prevDef = false;
switch (code) {
case require_aria.EVENT_CODE.down:
this.gotoSubIndex(this.subIndex + 1);
prevDef = true;
break;
case require_aria.EVENT_CODE.up:
this.gotoSubIndex(this.subIndex - 1);
prevDef = true;
break;
case require_aria.EVENT_CODE.tab:
require_aria$1.triggerEvent(parentNode, "mouseleave");
break;
case require_aria.EVENT_CODE.enter:
case require_aria.EVENT_CODE.numpadEnter:
case require_aria.EVENT_CODE.space:
prevDef = true;
event.currentTarget.click();
break;
}
if (prevDef) {
event.preventDefault();
event.stopPropagation();
}
return false;
});
});
}
};
//#endregion
exports.default = SubMenu;
//# sourceMappingURL=submenu.js.map
@@ -0,0 +1 @@
{"version":3,"file":"submenu.js","names":["getEventCode","EVENT_CODE"],"sources":["../../../../../../../packages/components/menu/src/utils/submenu.ts"],"sourcesContent":["// @ts-nocheck\nimport { getEventCode, triggerEvent } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nimport type MenuItem from './menu-item'\n\nclass SubMenu {\n public subMenuItems: NodeList\n public subIndex = 0\n constructor(\n public parent: MenuItem,\n public domNode: ParentNode\n ) {\n this.subIndex = 0\n this.init()\n }\n\n init(): void {\n this.subMenuItems = this.domNode.querySelectorAll('li')\n this.addListeners()\n }\n\n gotoSubIndex(idx: number): void {\n if (idx === this.subMenuItems.length) {\n idx = 0\n } else if (idx < 0) {\n idx = this.subMenuItems.length - 1\n }\n ;(this.subMenuItems[idx] as HTMLElement).focus()\n this.subIndex = idx\n }\n\n addListeners(): void {\n const parentNode = this.parent.domNode\n Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {\n el.addEventListener('keydown', (event: KeyboardEvent) => {\n const code = getEventCode(event)\n let prevDef = false\n\n switch (code) {\n case EVENT_CODE.down: {\n this.gotoSubIndex(this.subIndex + 1)\n prevDef = true\n break\n }\n case EVENT_CODE.up: {\n this.gotoSubIndex(this.subIndex - 1)\n prevDef = true\n break\n }\n case EVENT_CODE.tab: {\n triggerEvent(parentNode as HTMLElement, 'mouseleave')\n break\n }\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n case EVENT_CODE.space: {\n prevDef = true\n ;(event.currentTarget as HTMLElement).click()\n break\n }\n }\n if (prevDef) {\n event.preventDefault()\n event.stopPropagation()\n }\n return false\n })\n })\n }\n}\n\nexport default SubMenu\n"],"mappings":";;;;;;AAMA,IAAM,UAAN,MAAc;CAGZ,YACE,AAAO,QACP,AAAO,SACP;EAFO;EACA;kBAHS;AAKhB,OAAK,WAAW;AAChB,OAAK,MAAM;;CAGb,OAAa;AACX,OAAK,eAAe,KAAK,QAAQ,iBAAiB,KAAK;AACvD,OAAK,cAAc;;CAGrB,aAAa,KAAmB;AAC9B,MAAI,QAAQ,KAAK,aAAa,OAC5B,OAAM;WACG,MAAM,EACf,OAAM,KAAK,aAAa,SAAS;AAElC,EAAC,KAAK,aAAa,KAAqB,OAAO;AAChD,OAAK,WAAW;;CAGlB,eAAqB;EACnB,MAAM,aAAa,KAAK,OAAO;AAC/B,QAAM,UAAU,QAAQ,KAAK,KAAK,eAAe,OAAgB;AAC/D,MAAG,iBAAiB,YAAY,UAAyB;IACvD,MAAM,OAAOA,2BAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAKC,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAKA,wBAAW;AACd,kCAAa,YAA2B,aAAa;AACrD;KAEF,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;KAChB,KAAKA,wBAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}
+4
View File
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../tooltip/style/css.js');
require("element-plus/theme-chalk/el-menu.css");
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../tooltip/style/index.js');
require("element-plus/theme-chalk/src/menu.scss");