diff --git a/README.md b/README.md index d47901c..b69aa8a 100644 --- a/README.md +++ b/README.md @@ -69,3 +69,55 @@ Example: - `element-{type}` - Custom element rendering (e.g., `element-signature`) - `custom` - Fallback for elements without specific type - `actions` - Custom action buttons + +#### `actions` slot props + +The `actions` slot receives: + +- `object` +- `onDelete` +- `onDuplicate` +- `toolbarClass` (`pdf-elements-actions-toolbar`) +- `actionClass` (`pdf-elements-action-btn`) +- `actionAttrs` (`{ 'data-pdf-elements-action': 'true' }`) + +Use these hooks to style third-party button components consistently (for example, Nextcloud `NcButton`) without relying on internal scoped selectors. + +Example: + +```vue + +``` + +### Theme variables + +Action toolbar and action buttons can be themed via CSS variables and follow host theme tokens by default. + +| Variable | Description | +|---|---| +| `--pdf-elements-toolbar-gap` | Toolbar button gap | +| `--pdf-elements-toolbar-padding` | Toolbar padding | +| `--pdf-elements-toolbar-background` | Toolbar background color | +| `--pdf-elements-toolbar-color` | Toolbar text/icon color | +| `--pdf-elements-toolbar-border-color` | Toolbar border color | +| `--pdf-elements-toolbar-border-radius` | Toolbar border radius | +| `--pdf-elements-toolbar-shadow` | Toolbar shadow | +| `--pdf-elements-action-btn-border` | Action button border | +| `--pdf-elements-action-btn-background` | Action button background | +| `--pdf-elements-action-btn-color` | Action button text/icon color | +| `--pdf-elements-action-btn-padding` | Action button padding | +| `--pdf-elements-action-btn-radius` | Action button border radius | +| `--pdf-elements-action-btn-min-height` | Action button min height | +| `--pdf-elements-action-btn-min-width` | Action button min width | +| `--pdf-elements-action-btn-shadow` | Action button shadow | +| `--pdf-elements-action-btn-hover-background` | Action button hover background | diff --git a/src/components/DraggableElement.vue b/src/components/DraggableElement.vue index 549a4b4..ec9ca8c 100644 --- a/src/components/DraggableElement.vue +++ b/src/components/DraggableElement.vue @@ -7,16 +7,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
- - -