HaimKortovich
a2eb1f3789
- Add nuxt-skills (vue, nuxt, nuxt-ui) to .claude/skills/ - Create useCustomerSelection() composable for managing insured/buyer selection - Create usePolicyApi() composable for policy API operations - Update auto quote components to use insured/buyer instead of client - Update vehicle fields: remove valorVehiculo, add market_value, requested_value, rc_limits - Make chassis_number and engine_number optional - Update auto quote types and composables to match new API structure - Update auto quote page to submit to policy API with new structure
1.9 KiB
DropdownMenu
A menu to display actions when clicking on an element.
Based on Reka UI DropdownMenu
Key Props
-
items: as an array of objects with the following properties: -
label?: string{lang="ts-type"} -
icon?: string{lang="ts-type"} -
avatar?: AvatarProps{lang="ts-type"} -
kbds?: string[] | KbdProps[]{lang="ts-type"} -
type?: "link" | "label" | "separator" | "checkbox"{lang="ts-type"} -
disabled?: boolean{lang="ts-type"} -
onSelect?: (e: Event) => void{lang="ts-type"} -
onUpdateChecked?: (checked: boolean) => void{lang="ts-type"} -
children?: DropdownMenuItem[] | DropdownMenuItem[][]{lang="ts-type"} -
class?: any{lang="ts-type"} -
ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }{lang="ts-type"}
You can pass any property from the Link component such as to, target, etc.
content: to control how the DropdownMenu content is rendered, like itsalignorsidefor example.arrow: to display an arrow on the DropdownMenu.size: to control the size of the DropdownMenu.modal: to control whether the DropdownMenu blocks interaction with outside content.disabled: to disable the DropdownMenu.slot:
Usage
<UDropdownMenu
<!-- props here -->
/>
Slots
#item