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
64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
# Stepper
|
|
|
|
A set of steps that are used to indicate progress through a multi-step process.
|
|
|
|
> Based on [Reka UI Stepper](https://reka-ui.com/docs/components/stepper)
|
|
|
|
## Key Props
|
|
|
|
- `items`: as an array of objects with the following properties:
|
|
|
|
- `title?: string`{lang="ts-type"}
|
|
- `description?: AvatarProps`{lang="ts-type"}
|
|
- `content?: string`{lang="ts-type"}
|
|
- `icon?: string`{lang="ts-type"}
|
|
- `value?: string | number`{lang="ts-type"}
|
|
- `disabled?: boolean`{lang="ts-type"}
|
|
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
|
- `class?: any`{lang="ts-type"}
|
|
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
|
|
|
|
## ::component-code
|
|
|
|
ignore:
|
|
|
|
- items
|
|
- class
|
|
external:
|
|
- items
|
|
externalTypes:
|
|
- StepperItem[]
|
|
props:
|
|
items: - title: 'Address'
|
|
description: 'Add your address here'
|
|
icon: 'i-lucide-house' - title: 'Shipping'
|
|
description: 'Set your preferred shipping method'
|
|
icon: 'i-lucide-truck' - title: 'Checkout'
|
|
description: 'Confirm your order'
|
|
class: 'w-full'
|
|
|
|
---
|
|
|
|
::
|
|
|
|
::note
|
|
Click on the items to navigate through the steps.
|
|
|
|
- `color`: to change the color of the Stepper.
|
|
- `size`: to change the size of the Stepper.
|
|
- `orientation`: to change the orientation of the Stepper.
|
|
- `disabled`: to disable navigation through the steps.
|
|
- `slot`:
|
|
|
|
## Usage
|
|
|
|
```vue
|
|
<UStepper
|
|
<!-- props here -->
|
|
/>
|
|
```
|
|
|
|
## Slots
|
|
|
|
- `#content`
|