first commit
This commit is contained in:
root
+19
@@ -0,0 +1,19 @@
|
||||
import MenuItem from "./menu-item.mjs";
|
||||
|
||||
//#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 MenuItem(child, namespace);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { Menu as default };
|
||||
//# sourceMappingURL=menu-bar.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"menu-bar.mjs","names":[],"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,KAAI,SAAS,OAAsB,UAAU;IAE/C"}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import { triggerEvent } from "../../../../utils/dom/aria.mjs";
|
||||
import { EVENT_CODE } from "../../../../constants/aria.mjs";
|
||||
import { getEventCode } from "../../../../utils/dom/event.mjs";
|
||||
import SubMenu from "./submenu.mjs";
|
||||
|
||||
//#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 SubMenu(this, menuChild);
|
||||
this.addListeners();
|
||||
}
|
||||
addListeners() {
|
||||
this.domNode.addEventListener("keydown", (event) => {
|
||||
const code = getEventCode(event);
|
||||
let prevDef = false;
|
||||
switch (code) {
|
||||
case EVENT_CODE.down:
|
||||
triggerEvent(event.currentTarget, "mouseenter");
|
||||
this.submenu && this.submenu.gotoSubIndex(0);
|
||||
prevDef = true;
|
||||
break;
|
||||
case EVENT_CODE.up:
|
||||
triggerEvent(event.currentTarget, "mouseenter");
|
||||
this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
|
||||
prevDef = true;
|
||||
break;
|
||||
case EVENT_CODE.tab:
|
||||
triggerEvent(event.currentTarget, "mouseleave");
|
||||
break;
|
||||
case EVENT_CODE.enter:
|
||||
case EVENT_CODE.numpadEnter:
|
||||
case EVENT_CODE.space:
|
||||
prevDef = true;
|
||||
event.currentTarget.click();
|
||||
break;
|
||||
}
|
||||
if (prevDef) event.preventDefault();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { MenuItem as default };
|
||||
//# sourceMappingURL=menu-item.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"menu-item.mjs","names":[],"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,IAAI,QAAQ,MAAM,UAAU;AAE7C,OAAK,cAAc;;CAGrB,eAAqB;AACnB,OAAK,QAAQ,iBAAiB,YAAY,UAAyB;GACjE,MAAM,OAAO,aAAa,MAAM;GAChC,IAAI,UAAU;AAEd,WAAQ,MAAR;IACE,KAAK,WAAW;AACd,kBAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WAAW,KAAK,QAAQ,aAAa,EAAE;AAC5C,eAAU;AACV;IAEF,KAAK,WAAW;AACd,kBAAa,MAAM,eAA8B,aAAa;AAC9D,UAAK,WACH,KAAK,QAAQ,aAAa,KAAK,QAAQ,aAAa,SAAS,EAAE;AACjE,eAAU;AACV;IAEF,KAAK,WAAW;AACd,kBAAa,MAAM,eAA8B,aAAa;AAC9D;IAEF,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;AACd,eAAU;AACT,KAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,OAAI,QACF,OAAM,gBAAgB;IAExB"}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
import { triggerEvent } from "../../../../utils/dom/aria.mjs";
|
||||
import { EVENT_CODE } from "../../../../constants/aria.mjs";
|
||||
import { getEventCode } from "../../../../utils/dom/event.mjs";
|
||||
|
||||
//#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 = getEventCode(event);
|
||||
let prevDef = false;
|
||||
switch (code) {
|
||||
case EVENT_CODE.down:
|
||||
this.gotoSubIndex(this.subIndex + 1);
|
||||
prevDef = true;
|
||||
break;
|
||||
case EVENT_CODE.up:
|
||||
this.gotoSubIndex(this.subIndex - 1);
|
||||
prevDef = true;
|
||||
break;
|
||||
case EVENT_CODE.tab:
|
||||
triggerEvent(parentNode, "mouseleave");
|
||||
break;
|
||||
case EVENT_CODE.enter:
|
||||
case EVENT_CODE.numpadEnter:
|
||||
case EVENT_CODE.space:
|
||||
prevDef = true;
|
||||
event.currentTarget.click();
|
||||
break;
|
||||
}
|
||||
if (prevDef) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//#endregion
|
||||
export { SubMenu as default };
|
||||
//# sourceMappingURL=submenu.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"submenu.mjs","names":[],"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,OAAO,aAAa,MAAM;IAChC,IAAI,UAAU;AAEd,YAAQ,MAAR;KACE,KAAK,WAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAK,WAAW;AACd,WAAK,aAAa,KAAK,WAAW,EAAE;AACpC,gBAAU;AACV;KAEF,KAAK,WAAW;AACd,mBAAa,YAA2B,aAAa;AACrD;KAEF,KAAK,WAAW;KAChB,KAAK,WAAW;KAChB,KAAK,WAAW;AACd,gBAAU;AACT,MAAC,MAAM,cAA8B,OAAO;AAC7C;;AAGJ,QAAI,SAAS;AACX,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;AAEzB,WAAO;KACP;IACF"}
|
||||
Reference in New Issue
Block a user