- 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
37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
# EditorToolbar
|
|
|
|
A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
|
|
|
|
## Key Props
|
|
|
|
- `items`: as an array of objects with the following properties:
|
|
|
|
- `label?: string`{lang="ts-type"}
|
|
- `icon?: string`{lang="ts-type"}
|
|
- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
|
|
- `activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
|
|
- `variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
|
|
- `activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
|
|
- `size?: "xs" | "sm" | "md" | "lg" | "xl"`{lang="ts-type"}
|
|
- [`kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}](/docs/components/editor#handlers)
|
|
- `disabled?: boolean`{lang="ts-type"}
|
|
- `loading?: boolean`{lang="ts-type"}
|
|
- `active?: boolean`{lang="ts-type"}
|
|
- `tooltip?: TooltipProps`{lang="ts-type"}
|
|
- [`slot?: string`{lang="ts-type"}](#with-link-popover)
|
|
- `onClick?: (e: MouseEvent) => void`{lang="ts-type"}
|
|
- `items?: EditorToolbarItem[] | EditorToolbarItem[][]`{lang="ts-type"}
|
|
- `class?: any`{lang="ts-type"}
|
|
|
|
You can pass any property from the [Button](/docs/components/button#props) component such as `color`, `variant`, `size`, etc.
|
|
|
|
- `layout`: to change how the toolbar is displayed.
|
|
|
|
## Usage
|
|
|
|
```vue
|
|
<UEditorToolbar
|
|
<!-- props here -->
|
|
/>
|
|
```
|