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.5 KiB
Tree
A tree view component to display and interact with hierarchical data structures.
Based on Reka UI Tree
Key Props
-
items: as an array of objects with the following properties: -
icon?: string{lang="ts-type"} -
label?: string{lang="ts-type"} -
trailingIcon?: string{lang="ts-type"} -
defaultExpanded?: boolean{lang="ts-type"} -
disabled?: boolean{lang="ts-type"} -
slot?: string{lang="ts-type"} -
children?: TreeItem[]{lang="ts-type"} -
onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void{lang="ts-type"} -
onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void{lang="ts-type"} -
class?: any{lang="ts-type"} -
ui?: { item?: ClassNameValue, itemWithChildren?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingIcon?: ClassNameValue, listWithChildren?: ClassNameValue }{lang="ts-type"}
::note A unique identifier is required for each item.
multiple: to allow multiple item selections.nested: to control whether the Tree is rendered with nested structure or as a flat list.color: to change the color of the Tree.size: to change the size of the Tree.disabled: to prevent any user interaction with the Tree.virtualize: to enable virtualization for large lists as a boolean or an object with options like{ estimateSize: 32, overscan: 12 }.slot:
Usage
<UTree
<!-- props here -->
/>