feat(primitives): add menu, dropdown-menu, context-menu, and menubar primitives
Implements WAI-ARIA APG-compliant headless menu primitive families: - menu: base primitive with MenuRoot, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup/Item, MenuSub, and helpers - dropdown-menu: DropdownMenuRoot with trigger anchoring - context-menu: ContextMenuRoot with right-click virtual anchor - menubar: MenubarRoot with keyboard navigation between menus Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import type { MenuItemImplEmits, MenuItemImplProps } from './MenuItemImpl.vue';
|
||||
|
||||
export interface MenuItemProps extends MenuItemImplProps {}
|
||||
export type MenuItemEmits = MenuItemImplEmits;
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useMenuRootContext } from './context';
|
||||
import MenuItemImpl from './MenuItemImpl.vue';
|
||||
import { ITEM_SELECT } from './utils';
|
||||
|
||||
const props = defineProps<MenuItemProps>();
|
||||
const emit = defineEmits<MenuItemEmits>();
|
||||
|
||||
const rootCtx = useMenuRootContext();
|
||||
|
||||
function handleSelect(event: Event) {
|
||||
const selectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true })
|
||||
;(event.currentTarget as HTMLElement).dispatchEvent(selectEvent);
|
||||
emit('select', event);
|
||||
if (!selectEvent.defaultPrevented) {
|
||||
rootCtx.onClose();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuItemImpl v-bind="props" @select="handleSelect">
|
||||
<slot />
|
||||
</MenuItemImpl>
|
||||
</template>
|
||||
Reference in New Issue
Block a user