Files
tools/vue/primitives/src/menus/dropdown-menu/DropdownMenuSubContent.vue
T
robonen eefd7abf83 feat(primitives): media-editor components, category reorg, perf + type cleanup
Reorganize components into category folders (forms/canvas/overlays/etc.); add the
media-editor headless family (timeline, curve-editor, waveform, crop, color
picker, etc.); apply perf fixes (O(1) collection lookups, plain-object drag
state, gesture-leak teardown, shallowRef color state, rect caching) and replace
source `any` with proper types.
2026-06-15 16:54:29 +07:00

45 lines
1.7 KiB
Vue

<script lang="ts">
import type { MenuSubContentEmits, MenuSubContentProps } from '../menu';
/**
* The floating surface for a submenu's items, positioned alongside its
* DropdownMenuSubTrigger. Place it inside a DropdownMenuSub.
*/
export interface DropdownMenuSubContentProps extends MenuSubContentProps {}
export type DropdownMenuSubContentEmits = MenuSubContentEmits;
</script>
<script setup lang="ts">
import type { CSSProperties } from 'vue';
import { useForwardExpose } from '@robonen/vue';
import { MenuSubContent } from '../menu';
const props = defineProps<DropdownMenuSubContentProps>();
const emit = defineEmits<DropdownMenuSubContentEmits>();
useForwardExpose();
const contentStyle: CSSProperties = {
'--primitives-dropdown-menu-content-transform-origin': 'var(--popper-transform-origin)',
'--primitives-dropdown-menu-content-available-width': 'var(--popper-available-width)',
'--primitives-dropdown-menu-content-available-height': 'var(--popper-available-height)',
'--primitives-dropdown-menu-trigger-width': 'var(--popper-anchor-width)',
'--primitives-dropdown-menu-trigger-height': 'var(--popper-anchor-height)',
} as CSSProperties;
</script>
<template>
<MenuSubContent
v-bind="props"
:style="contentStyle"
@close-auto-focus="emit('closeAutoFocus', $event)"
@escape-key-down="emit('escapeKeyDown', $event)"
@pointer-down-outside="emit('pointerDownOutside', $event)"
@focus-outside="emit('focusOutside', $event)"
@interact-outside="emit('interactOutside', $event)"
@dismiss="emit('dismiss')"
@entry-focus="emit('entryFocus', $event)"
@open-auto-focus="emit('openAutoFocus', $event)"
><slot /></MenuSubContent>
</template>