@v-c/menu 0.0.1 → 0.0.3

package/dist/context/PrivateContext.cjs

@@ -1,24 +1,18 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const PrivateContextKey = Symbol("PrivateContext");
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var PrivateContextKey = Symbol("PrivateContext");
 function usePrivateProvider(context) {
-  vue.provide(PrivateContextKey, context);
+	(0, vue.provide)(PrivateContextKey, context);
 }
 function usePrivateContext() {
-  return vue.inject(PrivateContextKey, {});
+	return (0, vue.inject)(PrivateContextKey, {});
 }
-const PrivateContextProvider = vue.defineComponent(
-  (props, { slots }) => {
-    usePrivateProvider(props);
-    return () => {
-      return slots?.default?.();
-    };
-  },
-  {
-    props: ["_internalRenderMenuItem", "_internalRenderSubMenuItem"]
-  }
-);
+const PrivateContextProvider = (0, vue.defineComponent)((props, { slots }) => {
+	usePrivateProvider(props);
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: ["_internalRenderMenuItem", "_internalRenderSubMenuItem"] });
 exports.PrivateContextProvider = PrivateContextProvider;
 exports.usePrivateContext = usePrivateContext;
 exports.usePrivateProvider = usePrivateProvider;

package/dist/context/PrivateContext.js

@@ -1,24 +1,15 @@
-import { defineComponent, provide, inject } from "vue";
-const PrivateContextKey = Symbol("PrivateContext");
+import { defineComponent, inject, provide } from "vue";
+var PrivateContextKey = Symbol("PrivateContext");
 function usePrivateProvider(context) {
-  provide(PrivateContextKey, context);
+	provide(PrivateContextKey, context);
 }
 function usePrivateContext() {
-  return inject(PrivateContextKey, {});
+	return inject(PrivateContextKey, {});
 }
-const PrivateContextProvider = defineComponent(
-  (props, { slots }) => {
-    usePrivateProvider(props);
-    return () => {
-      return slots?.default?.();
-    };
-  },
-  {
-    props: ["_internalRenderMenuItem", "_internalRenderSubMenuItem"]
-  }
-);
-export {
-  PrivateContextProvider,
-  usePrivateContext,
-  usePrivateProvider
-};
+const PrivateContextProvider = defineComponent((props, { slots }) => {
+	usePrivateProvider(props);
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: ["_internalRenderMenuItem", "_internalRenderSubMenuItem"] });
+export { PrivateContextProvider, usePrivateContext, usePrivateProvider };

package/dist/hooks/useAccessibility.cjs

@@ -1,209 +1,189 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const KeyCode = require("@v-c/util/dist/KeyCode");
-const vue = require("vue");
-const IdContext = require("../context/IdContext.cjs");
-const { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
-const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_IdContext = require("../context/IdContext.cjs");
+let vue = require("vue");
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+var { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = __v_c_util_dist_KeyCode.default;
+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='${IdContext.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='${require_IdContext.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 = vue.shallowRef();
-  const activeRef = vue.shallowRef();
-  const cleanRaf = () => {
-    if (rafRef.value !== void 0) {
-      cancelAnimationFrame(rafRef.value);
-    }
-  };
-  vue.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 = (0, vue.shallowRef)();
+	const activeRef = (0, vue.shallowRef)();
+	const cleanRaf = () => {
+		if (rafRef.value !== void 0) cancelAnimationFrame(rafRef.value);
+	};
+	(0, vue.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);
+	};
 }
 exports.default = useAccessibility;
 exports.getFocusableElements = getFocusableElements;