@v-c/menu 0.0.1 → 0.0.3

package/dist/hooks/useAccessibility.js

@@ -1,210 +1,185 @@
-import KeyCode from "@v-c/util/dist/KeyCode";
-import { shallowRef, onBeforeUnmount } from "vue";
 import { getMenuId } from "../context/IdContext.js";
-const { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
-const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+import { onBeforeUnmount, shallowRef } from "vue";
+import KeyCode from "@v-c/util/dist/KeyCode";
+var { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
+var ArrowKeys = [
+	UP,
+	DOWN,
+	LEFT,
+	RIGHT
+];
 function getOffset(mode, isRootLevel, isRtl, which) {
-  const prev = "prev";
-  const next = "next";
-  const children = "children";
-  const parent = "parent";
-  if (mode === "inline" && which === ENTER) {
-    return { inlineTrigger: true };
-  }
-  const inline = { [UP]: prev, [DOWN]: next };
-  const horizontal = {
-    [LEFT]: isRtl ? next : prev,
-    [RIGHT]: isRtl ? prev : next,
-    [DOWN]: children,
-    [ENTER]: children
-  };
-  const vertical = {
-    [UP]: prev,
-    [DOWN]: next,
-    [ENTER]: children,
-    [ESC]: parent,
-    [LEFT]: isRtl ? children : parent,
-    [RIGHT]: isRtl ? parent : children
-  };
-  const offsets = {
-    inline,
-    horizontal,
-    vertical,
-    inlineSub: inline,
-    horizontalSub: vertical,
-    verticalSub: vertical
-  };
-  const type = offsets[`${mode}${isRootLevel ? "" : "Sub"}`]?.[which];
-  switch (type) {
-    case prev:
-      return { offset: -1, sibling: true };
-    case next:
-      return { offset: 1, sibling: true };
-    case parent:
-      return { offset: -1, sibling: false };
-    case children:
-      return { offset: 1, sibling: false };
-    default:
-      return null;
-  }
+	const prev = "prev";
+	const next = "next";
+	const children = "children";
+	const parent = "parent";
+	if (mode === "inline" && which === ENTER) return { inlineTrigger: true };
+	const inline = {
+		[UP]: prev,
+		[DOWN]: next
+	};
+	const horizontal = {
+		[LEFT]: isRtl ? next : prev,
+		[RIGHT]: isRtl ? prev : next,
+		[DOWN]: children,
+		[ENTER]: children
+	};
+	const vertical = {
+		[UP]: prev,
+		[DOWN]: next,
+		[ENTER]: children,
+		[ESC]: parent,
+		[LEFT]: isRtl ? children : parent,
+		[RIGHT]: isRtl ? parent : children
+	};
+	switch ({
+		inline,
+		horizontal,
+		vertical,
+		inlineSub: inline,
+		horizontalSub: vertical,
+		verticalSub: vertical
+	}[`${mode}${isRootLevel ? "" : "Sub"}`]?.[which]) {
+		case prev: return {
+			offset: -1,
+			sibling: true
+		};
+		case next: return {
+			offset: 1,
+			sibling: true
+		};
+		case parent: return {
+			offset: -1,
+			sibling: false
+		};
+		case children: return {
+			offset: 1,
+			sibling: false
+		};
+		default: return null;
+	}
 }
 function findContainerUL(element) {
-  let current = element;
-  while (current) {
-    if (current.getAttribute("data-menu-list")) {
-      return current;
-    }
-    current = current.parentElement;
-  }
-  return null;
+	let current = element;
+	while (current) {
+		if (current.getAttribute("data-menu-list")) return current;
+		current = current.parentElement;
+	}
+	return null;
 }
 function getFocusNodeList(container, includeDisabled) {
-  const selector = "[tabindex]";
-  return Array.from(container.querySelectorAll(selector));
+	const selector = includeDisabled ? "[tabindex]" : "[tabindex]:not([tabindex=\"-1\"]):not([disabled]):not([aria-disabled=\"true\"])";
+	return Array.from(container.querySelectorAll(selector));
 }
 function getFocusElement(activeElement, elements) {
-  let current = activeElement || document.activeElement;
-  while (current) {
-    if (elements.has(current)) {
-      return current;
-    }
-    current = current.parentElement;
-  }
-  return null;
+	let current = activeElement || document.activeElement;
+	while (current) {
+		if (elements.has(current)) return current;
+		current = current.parentElement;
+	}
+	return null;
 }
 function getFocusableElements(container, elements) {
-  if (!container)
-    return [];
-  const list = getFocusNodeList(container);
-  return list.filter((ele) => elements.has(ele));
+	if (!container) return [];
+	return getFocusNodeList(container, true).filter((ele) => elements.has(ele));
 }
 function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
-  if (!parentQueryContainer) {
-    return null;
-  }
-  const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
-  const count = sameLevelFocusableMenuElementList.length;
-  let focusIndex = sameLevelFocusableMenuElementList.findIndex((ele) => focusMenuElement === ele);
-  if (offset < 0) {
-    if (focusIndex === -1) {
-      focusIndex = count - 1;
-    } else {
-      focusIndex -= 1;
-    }
-  } else if (offset > 0) {
-    focusIndex += 1;
-  }
-  focusIndex = (focusIndex + count) % count;
-  return sameLevelFocusableMenuElementList[focusIndex];
+	if (!parentQueryContainer) return null;
+	const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+	const count = sameLevelFocusableMenuElementList.length;
+	let focusIndex = sameLevelFocusableMenuElementList.findIndex((ele) => focusMenuElement === ele);
+	if (offset < 0) if (focusIndex === -1) focusIndex = count - 1;
+	else focusIndex -= 1;
+	else if (offset > 0) focusIndex += 1;
+	focusIndex = (focusIndex + count) % count;
+	return sameLevelFocusableMenuElementList[focusIndex];
 }
 function refreshElements(keys, id) {
-  const elements = /* @__PURE__ */ new Set();
-  const key2element = /* @__PURE__ */ new Map();
-  const element2key = /* @__PURE__ */ new Map();
-  keys.forEach((key) => {
-    const element = document.querySelector(`[data-menu-id='${getMenuId(id, key)}']`);
-    if (element) {
-      elements.add(element);
-      element2key.set(element, key);
-      key2element.set(key, element);
-    }
-  });
-  return { elements, key2element, element2key };
+	const elements = /* @__PURE__ */ new Set();
+	const key2element = /* @__PURE__ */ new Map();
+	const element2key = /* @__PURE__ */ new Map();
+	keys.forEach((key) => {
+		const element = document.querySelector(`[data-menu-id='${getMenuId(id, key)}']`);
+		if (element) {
+			elements.add(element);
+			element2key.set(element, key);
+			key2element.set(key, element);
+		}
+	});
+	return {
+		elements,
+		key2element,
+		element2key
+	};
 }
 function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
-  const rafRef = shallowRef();
-  const activeRef = shallowRef();
-  const cleanRaf = () => {
-    if (rafRef.value !== void 0) {
-      cancelAnimationFrame(rafRef.value);
-    }
-  };
-  onBeforeUnmount(() => {
-    cleanRaf();
-  });
-  return (e) => {
-    activeRef.value = activeKey.value;
-    const { which } = e;
-    if ([...ArrowKeys, ENTER, ESC, HOME, END].includes(which)) {
-      const keys = getKeys();
-      let refreshedElements = refreshElements(keys, id);
-      const { elements, key2element, element2key } = refreshedElements;
-      const activeElement = key2element.get(activeKey.value);
-      const focusMenuElement = getFocusElement(activeElement || null, elements);
-      const focusMenuKey = element2key.get(focusMenuElement);
-      const offsetObj = getOffset(mode.value, getKeyPath(focusMenuKey, true).length === 1, isRtl.value, which);
-      if (!offsetObj && which !== HOME && which !== END) {
-        return;
-      }
-      if (ArrowKeys.includes(which) || [HOME, END].includes(which)) {
-        e.preventDefault();
-      }
-      const tryFocus = (menuElement) => {
-        if (menuElement) {
-          let focusTargetElement = menuElement;
-          const link = menuElement.querySelector("a");
-          if (link?.getAttribute("href")) {
-            focusTargetElement = link;
-          }
-          const targetKey = element2key.get(menuElement);
-          if (targetKey) {
-            triggerActiveKey(targetKey);
-          }
-          cleanRaf();
-          rafRef.value = requestAnimationFrame(() => {
-            if (activeRef.value === targetKey) {
-              focusTargetElement.focus();
-            }
-          });
-        }
-      };
-      if ([HOME, END].includes(which) || offsetObj?.sibling || !focusMenuElement) {
-        let parentQueryContainer;
-        if (!focusMenuElement || mode.value === "inline") {
-          parentQueryContainer = containerRef.value;
-        } else {
-          parentQueryContainer = findContainerUL(focusMenuElement);
-        }
-        let targetElement;
-        const focusableElements = getFocusableElements(parentQueryContainer, elements);
-        if (which === HOME) {
-          targetElement = focusableElements[0];
-        } else if (which === END) {
-          targetElement = focusableElements[focusableElements.length - 1];
-        } else {
-          targetElement = getNextFocusElement(
-            parentQueryContainer,
-            elements,
-            focusMenuElement,
-            offsetObj?.offset
-          );
-        }
-        tryFocus(targetElement);
-      } else if (offsetObj.inlineTrigger) {
-        triggerAccessibilityOpen(focusMenuKey);
-      } else if (offsetObj.offset > 0) {
-        triggerAccessibilityOpen(focusMenuKey, true);
-        cleanRaf();
-        rafRef.value = requestAnimationFrame(() => {
-          refreshedElements = refreshElements(keys, id);
-          const controlId = focusMenuElement.getAttribute("aria-controls");
-          const subQueryContainer = controlId ? document.getElementById(controlId) : null;
-          const targetElement = getNextFocusElement(subQueryContainer, refreshedElements.elements);
-          tryFocus(targetElement);
-        });
-      } else if (offsetObj.offset < 0) {
-        const keyPath = getKeyPath(focusMenuKey, true);
-        const parentKey = keyPath[keyPath.length - 2];
-        const parentMenuElement = key2element.get(parentKey);
-        triggerAccessibilityOpen(parentKey, false);
-        tryFocus(parentMenuElement);
-      }
-    }
-    originOnKeyDown?.(e);
-  };
+	const rafRef = shallowRef();
+	const activeRef = shallowRef();
+	const cleanRaf = () => {
+		if (rafRef.value !== void 0) cancelAnimationFrame(rafRef.value);
+	};
+	onBeforeUnmount(() => {
+		cleanRaf();
+	});
+	return (e) => {
+		activeRef.value = activeKey.value;
+		const { which } = e;
+		if ([
+			...ArrowKeys,
+			ENTER,
+			ESC,
+			HOME,
+			END
+		].includes(which)) {
+			const keys = getKeys();
+			let refreshedElements = refreshElements(keys, id);
+			const { elements, key2element, element2key } = refreshedElements;
+			const focusMenuElement = getFocusElement(key2element.get(activeKey.value) || null, elements);
+			const focusMenuKey = element2key.get(focusMenuElement);
+			const offsetObj = getOffset(mode.value, getKeyPath(focusMenuKey, true).length === 1, isRtl.value, which);
+			if (!offsetObj && which !== HOME && which !== END) return;
+			if (ArrowKeys.includes(which) || [HOME, END].includes(which)) e.preventDefault();
+			const tryFocus = (menuElement) => {
+				if (menuElement) {
+					let focusTargetElement = menuElement;
+					const link = menuElement.querySelector("a");
+					if (link?.getAttribute("href")) focusTargetElement = link;
+					const targetKey = element2key.get(menuElement);
+					if (targetKey) triggerActiveKey(targetKey);
+					cleanRaf();
+					rafRef.value = requestAnimationFrame(() => {
+						if (activeRef.value === targetKey) focusTargetElement.focus();
+					});
+				}
+			};
+			if ([HOME, END].includes(which) || offsetObj?.sibling || !focusMenuElement) {
+				let parentQueryContainer;
+				if (!focusMenuElement || mode.value === "inline") parentQueryContainer = containerRef.value;
+				else parentQueryContainer = findContainerUL(focusMenuElement);
+				let targetElement;
+				const focusableElements = getFocusableElements(parentQueryContainer, elements);
+				if (which === HOME) targetElement = focusableElements[0];
+				else if (which === END) targetElement = focusableElements[focusableElements.length - 1];
+				else targetElement = getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offsetObj?.offset);
+				tryFocus(targetElement);
+			} else if (offsetObj.inlineTrigger) triggerAccessibilityOpen(focusMenuKey);
+			else if (offsetObj.offset > 0) {
+				triggerAccessibilityOpen(focusMenuKey, true);
+				cleanRaf();
+				rafRef.value = requestAnimationFrame(() => {
+					refreshedElements = refreshElements(keys, id);
+					const controlId = focusMenuElement.getAttribute("aria-controls");
+					tryFocus(getNextFocusElement(controlId ? document.getElementById(controlId) : null, refreshedElements.elements));
+				});
+			} else if (offsetObj.offset < 0) {
+				const keyPath = getKeyPath(focusMenuKey, true);
+				const parentKey = keyPath[keyPath.length - 2];
+				const parentMenuElement = key2element.get(parentKey);
+				triggerAccessibilityOpen(parentKey, false);
+				tryFocus(parentMenuElement);
+			}
+		}
+		originOnKeyDown?.(e);
+	};
 }
-export {
-  useAccessibility as default,
-  getFocusableElements,
-  refreshElements
-};
+export { useAccessibility as default, getFocusableElements, refreshElements };

package/dist/hooks/useActive.cjs

@@ -1,31 +1,28 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const MenuContext = require("../context/MenuContext.cjs");
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_MenuContext = require("../context/MenuContext.cjs");
+let vue = require("vue");
 function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-  const menuContext = MenuContext.useMenuContext();
-  const active = vue.computed(() => menuContext?.value?.activeKey === eventKey.value);
-  const ret = {
-    active
-  };
-  vue.watchEffect(() => {
-    if (!disabled.value) {
-      ret.onMouseEnter = (domEvent) => {
-        onMouseEnter?.({
-          key: eventKey.value,
-          domEvent
-        });
-        menuContext?.value?.onActive?.(eventKey.value);
-      };
-      ret.onMouseLeave = (domEvent) => {
-        onMouseLeave?.({
-          key: eventKey.value,
-          domEvent
-        });
-        menuContext?.value?.onInactive?.(eventKey.value);
-      };
-    }
-  });
-  return ret;
+	const menuContext = require_MenuContext.useMenuContext();
+	const ret = { active: (0, vue.computed)(() => menuContext?.value?.activeKey === eventKey.value) };
+	(0, vue.watchEffect)(() => {
+		if (!disabled.value) {
+			ret.onMouseEnter = (domEvent) => {
+				onMouseEnter?.({
+					key: eventKey.value,
+					domEvent
+				});
+				menuContext?.value?.onActive?.(eventKey.value);
+			};
+			ret.onMouseLeave = (domEvent) => {
+				onMouseLeave?.({
+					key: eventKey.value,
+					domEvent
+				});
+				menuContext?.value?.onInactive?.(eventKey.value);
+			};
+		}
+	});
+	return ret;
 }
 exports.default = useActive;

package/dist/hooks/useActive.js

@@ -1,31 +1,26 @@
-import { computed, watchEffect } from "vue";
 import { useMenuContext } from "../context/MenuContext.js";
+import { computed, watchEffect } from "vue";
 function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
-  const menuContext = useMenuContext();
-  const active = computed(() => menuContext?.value?.activeKey === eventKey.value);
-  const ret = {
-    active
-  };
-  watchEffect(() => {
-    if (!disabled.value) {
-      ret.onMouseEnter = (domEvent) => {
-        onMouseEnter?.({
-          key: eventKey.value,
-          domEvent
-        });
-        menuContext?.value?.onActive?.(eventKey.value);
-      };
-      ret.onMouseLeave = (domEvent) => {
-        onMouseLeave?.({
-          key: eventKey.value,
-          domEvent
-        });
-        menuContext?.value?.onInactive?.(eventKey.value);
-      };
-    }
-  });
-  return ret;
+	const menuContext = useMenuContext();
+	const ret = { active: computed(() => menuContext?.value?.activeKey === eventKey.value) };
+	watchEffect(() => {
+		if (!disabled.value) {
+			ret.onMouseEnter = (domEvent) => {
+				onMouseEnter?.({
+					key: eventKey.value,
+					domEvent
+				});
+				menuContext?.value?.onActive?.(eventKey.value);
+			};
+			ret.onMouseLeave = (domEvent) => {
+				onMouseLeave?.({
+					key: eventKey.value,
+					domEvent
+				});
+				menuContext?.value?.onInactive?.(eventKey.value);
+			};
+		}
+	});
+	return ret;
 }
-export {
-  useActive as default
-};
+export { useActive as default };

package/dist/hooks/useDirectionStyle.cjs

@@ -1,20 +1,14 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const MenuContext = require("../context/MenuContext.cjs");
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_MenuContext = require("../context/MenuContext.cjs");
+let vue = require("vue");
 function useDirectionStyle(level) {
-  const menuContext = MenuContext.useMenuContext();
-  return vue.computed(() => {
-    const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
-    if (mode !== "inline") {
-      return null;
-    }
-    const len = level.value;
-    return rtl ? {
-      paddingRight: `${len * inlineIndent}px`
-    } : {
-      paddingLeft: `${len * inlineIndent}px`
-    };
-  });
+	const menuContext = require_MenuContext.useMenuContext();
+	return (0, vue.computed)(() => {
+		const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
+		if (mode !== "inline") return null;
+		const len = level.value;
+		return rtl ? { paddingRight: `${len * inlineIndent}px` } : { paddingLeft: `${len * inlineIndent}px` };
+	});
 }
 exports.default = useDirectionStyle;

package/dist/hooks/useDirectionStyle.js

@@ -1,20 +1,12 @@
-import { computed } from "vue";
 import { useMenuContext } from "../context/MenuContext.js";
+import { computed } from "vue";
 function useDirectionStyle(level) {
-  const menuContext = useMenuContext();
-  return computed(() => {
-    const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
-    if (mode !== "inline") {
-      return null;
-    }
-    const len = level.value;
-    return rtl ? {
-      paddingRight: `${len * inlineIndent}px`
-    } : {
-      paddingLeft: `${len * inlineIndent}px`
-    };
-  });
+	const menuContext = useMenuContext();
+	return computed(() => {
+		const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
+		if (mode !== "inline") return null;
+		const len = level.value;
+		return rtl ? { paddingRight: `${len * inlineIndent}px` } : { paddingLeft: `${len * inlineIndent}px` };
+	});
 }
-export {
-  useDirectionStyle as default
-};
+export { useDirectionStyle as default };