Last: {{ lastAction }}
+ - @@ -84,7 +85,7 @@ export default { ### With custom slot content -```vue +```vue {static}
+
+
+
+
+
+
+
+```
+
## Props
| Prop | Type | Default | Description |
@@ -43,7 +70,7 @@ Two-phase single-item delete confirmation dialog. Shows a warning, waits for API
When items don't have a simple name field, use `nameFormatter` to build a display name from any item properties:
-```vue
+```vue {static}
+
+
+
+
+
+
+
+```
+
+## Usage
+
+```vue {static}
+
+
+
+
+
+
+
+```
+
+## Usage
+
+```vue {static}
+
+
+
+
+```
+
+## Usage
+
+```vue {static}
+
+
+
+
+```
+
+---
+
## Usage examples
### Basic create/edit (standalone)
-```vue
+```vue {static}
Last action: {{ last || '—' }}
+ + +``` + +With view toggle and selection count: + +```vue + +View: {{ viewMode }} · Last: {{ last || '—' }}
+ + +``` + +Refreshing state: + +```vue + +
+ Add object (advanced)
+
+
+
+```
+
+Edit mode — pre-populated with existing object data:
+
+```vue
+
+
+ Edit object (advanced)
+
+
+
+```
+
+## Additional props
+
+### Functional props
+
+| Prop | Default | Description |
+|---|---|---|
+| `dialogTitle` | `''` | Dialog title. Defaults to `'Create {schema.title}'` or `'Edit {schema.title}'` when empty. |
+| `nameField` | `'title'` | Which field is the "name" of the item (used in result messages). |
+| `excludeFields` | `[]` | Array of field keys to exclude from the properties table and form. |
+| `includeFields` | `null` | Array of field keys to include (whitelist mode). Null means all fields. |
+| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. |
+| `showPropertiesTable` | `true` | Show or hide the Properties tab. |
+| `showJsonTab` | `true` | Show or hide the Data (JSON) tab. |
+| `showMetadataTab` | `null` | Show or hide the Metadata tab. Defaults to `true` in edit mode, `false` in create mode. |
+| `editablePropertyTypes` | `null` | Array of JSON Schema types for which inline editing is enabled. Defaults to all supported types. |
+| `validationDisplay` | `'indicator'` | How to show property validation state — `'indicator'` or `'none'`. |
+| `jsonEditorDark` | `false` | Enable dark mode in the CodeMirror JSON editor. |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| `register-schema-selection` | When provided, replaces the default tabbed layout entirely. Useful for a multi-step wizard where register/schema must be chosen before editing. |
+| `tab-properties` | Override the default Properties tab content. Scoped: `{ formData, updateField, objectProperties, selectedProperty, getPropertyDisplayName, getPropertyValidationClass, isPropertyEditable, validationDisplay }`. |
+| `tab-metadata` | Override the default Metadata tab content. Scoped: `{ item, formData }`. |
+| `tab-data` | Override the default Data (JSON) tab content. Scoped: `{ jsonData, updateJson, isValid, formatJson }`. |
+| `form` | Replace the entire dialog form area. Scoped: `{ formData, updateField, objectProperties, jsonData, updateJson, isValidJson }`. |
+
+### Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `successText` | `'{title} saved successfully.'` | Message shown after a successful save. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `''` | Confirm button label. Defaults to `'Create'` or `'Save'` depending on mode. |
diff --git a/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue b/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue
index 8f6d23a..f54814c 100644
--- a/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue
+++ b/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue
@@ -178,11 +178,11 @@ import {
NcSelect,
NcButton,
NcDateTimePicker,
+ Tooltip,
} from '@nextcloud/vue'
import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import Close from 'vue-material-design-icons/Close.vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import { formatValue, validateValue } from '../../utils/schema.js'
import CnJsonViewer from '../CnJsonViewer/CnJsonViewer.vue'
import CnColorPicker from '../CnColorPicker/CnColorPicker.vue'
diff --git a/src/components/CnAppLoading/CnAppLoading.md b/src/components/CnAppLoading/CnAppLoading.md
new file mode 100644
index 0000000..22471f2
--- /dev/null
+++ b/src/components/CnAppLoading/CnAppLoading.md
@@ -0,0 +1,47 @@
+Default loading screen — shown while `useAppManifest` fetches the manifest:
+
+```vue
+
+```
+
+Custom message:
+
+```vue
+
+```
+
+With logoUrl — shows a branded image above the spinner:
+
+```vue
+
+```
+
+With logo slot override — render any element above the spinner:
+
+```vue
+
+```
+
+## Additional props and slots
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `logoUrl` | String | `''` | Optional image URL displayed above the spinner. Apps with custom branding can also override the `#logo` slot instead. |
+
+| Slot | Description |
+|------|-------------|
+| `logo` | Replaces the default logo image above the spinner. Use this for custom branding when `logoUrl` alone is not sufficient. |
diff --git a/src/components/CnAppNav/CnAppNav.md b/src/components/CnAppNav/CnAppNav.md
new file mode 100644
index 0000000..c77fb9b
--- /dev/null
+++ b/src/components/CnAppNav/CnAppNav.md
@@ -0,0 +1,57 @@
+CnAppNav renders the Nextcloud app sidebar navigation from a manifest's `menu[]` array. It is normally used inside CnAppRoot which provides the manifest via injection.
+
+Standalone usage with a manifest prop (for use without CnAppRoot):
+
+```vue {static}
+
+
+
+
+```
+
+Permission filtering — pass a `permissions` array to hide menu items the user does not hold. Items with a `permission` field only render when their permission string appears in the `permissions` prop. When `permissions` is omitted or empty, all items are shown regardless:
+
+```vue {static}
+
+
+
+
+```
diff --git a/src/components/CnAppRoot/CnAppRoot.md b/src/components/CnAppRoot/CnAppRoot.md
new file mode 100644
index 0000000..e3538c8
--- /dev/null
+++ b/src/components/CnAppRoot/CnAppRoot.md
@@ -0,0 +1,86 @@
+CnAppRoot is the top-level manifest-driven app shell. It orchestrates three phases: loading → dependency check → shell. In a real app it wraps the entire Nextcloud content area.
+
+The component requires a router, Nextcloud globals, and a live capabilities API for dependency checking — it is best demonstrated in a running Nextcloud environment. See `docs/components/cn-app-root.md` and `docs/migrating-to-manifest.md` for full usage.
+
+Minimal conceptual shell (illustrative, not fully runnable in the styleguide):
+
+```vue
+
+ 
+
+
+
+
+
+
+```
+
+With icon, iconSize, and titleTooltip:
+
+```vue
+
+
+```
+
+With labels and active state:
+
+```vue
+
+
+
+
+```
+
+With actions slot:
+
+```vue
+
+
+
+
+
+```
+
+With footer tags and links:
+
+```vue
+
+
+```
+
+Controlling description line clamp via descriptionLines:
+
+```vue
+
+
+```
+
+Clickable — hover effect and click event:
+
+```vue
+
+
+
+ Clicked: {{ selected || '—' }}
+ + +``` + +## Additional props and slots + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `titleTooltip` | String | `''` | Tooltip for the title text. Falls back to the title itself when the text is truncated (ellipsized). | +| `icon` | Object\|Function | `null` | Icon component (e.g. imported MDI icon) rendered before the title via `
+
+
+
+```
+
+Custom card slot — replace the default CnObjectCard with your own rendering:
+
+```vue
+Selected: {{ selectedIds.join(', ') || 'none' }}
+
+
+```
+
+Boolean — renders a check icon for `true`, dash for `false`:
+
+```vue
+
+
+```
+
+Enum — renders as a CnStatusBadge:
+
+```vue
+
+ true
+
+
+ false
+
+
+
+```
+
+Array — joined list or dash when empty:
+
+```vue
+
+
+```
+
+Date/UUID — formatted with monospace styling:
+
+```vue
+
+
+```
diff --git a/src/components/CnCellRenderer/CnCellRenderer.vue b/src/components/CnCellRenderer/CnCellRenderer.vue
index c81f53d..0f67fb0 100644
--- a/src/components/CnCellRenderer/CnCellRenderer.vue
+++ b/src/components/CnCellRenderer/CnCellRenderer.vue
@@ -39,8 +39,9 @@ import CheckBold from 'vue-material-design-icons/CheckBold.vue'
* Booleans render as icons, enums as status badges, dates as formatted strings,
* and everything else as truncated text via `formatValue()`.
*
- * @example
+ * ```vue
*
+ Install
+
+apexcharts and vue-apexcharts to see charts.
+
+
+
+
+```
+
+Locked to hex mode — hides the RGB/HSL toggle:
+
+```vue
+
+
+
+
+
+```
+
+Disabled state — swatch is not clickable:
+
+```vue
+
+
+
+
+```
diff --git a/src/components/CnConfigurationCard/CnConfigurationCard.md b/src/components/CnConfigurationCard/CnConfigurationCard.md
new file mode 100644
index 0000000..8da858b
--- /dev/null
+++ b/src/components/CnConfigurationCard/CnConfigurationCard.md
@@ -0,0 +1,74 @@
+Basic — card with status badge, content, and footer action. The `icon` slot renders before the title in the card header:
+
+```vue
+
+
+ {{ item.color }}
+ S3-compatible bucket on us-east-1
+
+
+
+
+
+
+
+
+
+```
+
+With actions:
+
+```vue
+
+ + SMTP credentials are required for sending notifications. +
+PostgreSQL 15.2 on localhost:5432
*
+
+
+
+```
diff --git a/src/components/CnContextMenu/CnContextMenu.vue b/src/components/CnContextMenu/CnContextMenu.vue
index 9c03391..887251c 100644
--- a/src/components/CnContextMenu/CnContextMenu.vue
+++ b/src/components/CnContextMenu/CnContextMenu.vue
@@ -41,15 +41,18 @@ import { NcActions, NcActionButton } from '@nextcloud/vue'
* cursor positioning). The composable handles the DOM attributes; this component
* handles the NcActions template boilerplate.
*
- * @example Dynamic actions (CnIndexPage pattern)
+ * Dynamic actions (CnIndexPage pattern)
+ * ```vue
*
+ In real use, right-clicking a row calls openContextMenu(event, row) from useContextMenu().
+ Here we simulate it with a button.
+
+
+
+ Last action: {{ lastAction || '—' }}
+
+ Copy item
+
+
+
+```
+
+Custom dialog title and name formatter:
+
+```vue
+
+
+ Duplicate Jane Smith
+
+
+
+```
+
+Custom patterns — override the naming options shown in the dropdown:
+
+```vue
+
+
+ Copy with custom patterns
+
+
+
+```
+
+## Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `nameFormatter` | `null` | Optional function `(item) => string` to format the displayed item name. Overrides `nameField` when provided. |
+| `dialogTitle` | `'Copy item'` | Dialog title shown in the header. |
+| `patternLabel` | `'Naming pattern'` | Label above the naming pattern dropdown. |
+| `successText` | `'Item successfully copied.'` | Message shown in the success note card after copying. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Copy'` | Label for the confirm/copy button. |
diff --git a/src/components/CnCopyDialog/CnCopyDialog.vue b/src/components/CnCopyDialog/CnCopyDialog.vue
index 4190869..856f156 100644
--- a/src/components/CnCopyDialog/CnCopyDialog.vue
+++ b/src/components/CnCopyDialog/CnCopyDialog.vue
@@ -67,13 +67,14 @@ import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
* and the new name. The parent performs the actual API call and calls
* `setResult()` via a ref.
*
- * @example
+ * ```vue
*
+
+
+
+
+
+
+```
+
+Loading state:
+
+```vue
+Selected IDs: {{ selectedIds.join(', ') || 'none' }}
+
+ Delete item
+
+
+
+```
+
+Custom name formatter — override how the item name is resolved:
+
+```vue
+
+
+ Delete Jane Smith
+
+
+
+```
+
+Error result — call `setResult({ error: '...' })` on failure:
+
+```vue
+
+
+ Delete (will fail)
+
+
+
+```
+
+## Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app via `registerTranslations()`.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `nameFormatter` | `null` | Optional function `(item) => string` to format the displayed item name. Overrides `nameField` when provided. |
+| `successText` | `'Item successfully deleted.'` | Message shown in the success note card after deletion. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Delete'` | Label for the confirm/delete button. |
diff --git a/src/components/CnDeleteDialog/CnDeleteDialog.vue b/src/components/CnDeleteDialog/CnDeleteDialog.vue
index 8994a98..689ac0c 100644
--- a/src/components/CnDeleteDialog/CnDeleteDialog.vue
+++ b/src/components/CnDeleteDialog/CnDeleteDialog.vue
@@ -52,13 +52,14 @@ import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
* itself — it emits a `confirm` event with the item ID. The parent performs
* the actual API call and calls `setResult()` via a ref.
*
- * @example
+ * ```vue
*
+
+
+
+
+
+```
+
+Flush — removes padding so tables/lists go edge-to-edge:
+
+```vue
+
+
+
+ Item {{ i }}
+
+ Main content goes here.
+ + + +...
*
+
+
+
+
+
+ Edit
+
+
+
+
+
+
+
+
+
+
+```
+
+With icon, subtitle, and stats table:
+
+```vue
+
+
+
+
+
+
+
+```
+
+With error state and retry:
+
+```vue
+
+ Chart placeholder
+
+
+
+ Edit
+
+
+
+
+
+```
+
+With empty state and loading label:
+
+```vue
+
+ Custom error layout
+
+
+
+
+
+
+```
+
+With sidebar integration:
+
+```vue
+
+
+
+
+
+```
+
+## Additional props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | String | `''` | Optional MDI icon name rendered in the header via `CnIcon` |
+| `iconSize` | Number | `28` | Icon size in pixels |
+| `loadingLabel` | String | `'Loading...'` | Message shown below the spinner during loading |
+| `sidebarOpen` | Boolean | `true` | Whether the sidebar starts expanded |
+| `objectType` | String | `''` | Registered object type slug for the sidebar |
+| `objectId` | String\|Number | `''` | Object ID to display in the sidebar |
+| `subtitle` | String | `''` | Subtitle shown in the sidebar header |
+| `sidebarProps` | Object | `{}` | Extra sidebar configuration (`register`, `schema`, `hiddenTabs`, `title`, `subtitle`) |
+| `error` | Boolean | `false` | Whether the page is in an error state |
+| `errorMessage` | String | `'An error occurred'` | Error message shown in the error state |
+| `onRetry` | Function | `null` | Callback for the retry button; when `null` no retry button is shown |
+| `retryLabel` | String | `'Retry'` | Label for the retry button |
+| `empty` | Boolean | `false` | Whether there is no data to show |
+| `emptyLabel` | String | `'No data available'` | Message shown in the empty state |
+| `statsTitle` | String | `''` | Title shown above the statistics table |
+| `statsColumns` | Array | `[]` | Column definitions for the stats table: `{ key, label, align? }` |
+| `statsRows` | Array | `[]` | Row data for the stats table; set `indent: true` for sub-row styling |
+| `maxWidth` | String | `'1200px'` | Maximum width of the page content area |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `header` | Replace the left header block (icon + title + description). Scope: `{ title, description, icon, iconSize }` |
+| `icon` | Replace the icon inside the default header |
+| `actions` | Action buttons rendered in the right-hand header area |
+| `error` | Custom error state content (replaces default `NcEmptyContent`) |
+| `empty` | Custom empty state content |
+| `stats-header` | Content above the stats table (replaces the default `statsTitle` heading) |
+| `stats-rows` | Custom `
+
+
+
+```
+
+Loading state:
+
+```vue
+
+
+
+
+ Active filters: {{ JSON.stringify(activeFilters) }}
+
+
+
+
+```
+
+Admin-only filters — set `userIsAdmin` to `false` to hide schema properties marked `adminOnly: true`:
+
+```vue
+
+
+
+
+ Active: {{ JSON.stringify(activeFilters) }}
+
+
+
+
+```
+
+With select and checkbox filters:
+
+```vue
+
+ Search: {{ search || '(empty)' }}
+
+
+
+
+```
+
+Hide the clear button — set `showClearAll` to `false` when the parent controls reset itself:
+
+```vue
+
+
+ Search: {{ search || '(empty)' }}
+ Status: {{ activeStatus || 'all' }}
+ Active only: {{ activeOnly }}
+
+ Add contact
+
+
+
+```
+
+Edit mode — pre-populate form with `item` data:
+
+```vue
+
+
+ Edit contact
+
+
+
+```
+
+## Additional props
+
+### Functional props
+
+| Prop | Default | Description |
+|---|---|---|
+| `dialogTitle` | `''` | Dialog title. Defaults to `'Create {schema.title}'` or `'Edit {schema.title}'` when empty. |
+| `excludeFields` | `[]` | Array of field keys to exclude from the auto-generated form. |
+| `includeFields` | `null` | Array of field keys to include (whitelist mode). Null means all fields. |
+| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. |
+| `nameField` | `'title'` | Which field is the "name" of the item (used in result messages). |
+| `size` | `'normal'` | NcDialog size — `'small'`, `'normal'`, or `'large'`. |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| `before-fields` | Rendered before the first auto-generated field (after the `#form` slot check). Useful for adding introductory text or non-schema inputs. |
+| `after-fields` | Rendered after the last auto-generated field. |
+| `form` | Replace the entire auto-generated form. Scoped: `{ fields, formData, errors, updateField }`. |
+| `field-{key}` | Replace a single auto-generated field. Scoped: `{ field, value, error, updateField }`. |
+| `field-{key}-option` | Customize dropdown option rendering for a select/multiselect/tags field. |
+| `field-{key}-selected-option` | Customize selected option display for a select/multiselect/tags field. |
+
+### Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `successText` | `'{title} saved successfully.'` | Message shown after a successful save. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `''` | Confirm button label. Defaults to `'Create'` or `'Save'` depending on mode. |
diff --git a/src/components/CnFormDialog/CnFormDialog.vue b/src/components/CnFormDialog/CnFormDialog.vue
index 4d7921c..139f3a5 100644
--- a/src/components/CnFormDialog/CnFormDialog.vue
+++ b/src/components/CnFormDialog/CnFormDialog.vue
@@ -354,7 +354,7 @@ import { fieldsFromSchema } from '../../utils/schema.js'
* @event confirm Emitted when the user confirms the form. Payload: formData object (includes `id` in edit mode).
* @event close Emitted when the dialog should be closed (cancel, close button, or auto-close after success).
*
- * @example
+ * ```vue
*
+
+```
+
+Fallback — unregistered names render the fallback icon:
+
+```vue
+
+ Unregistered → fallback:
+
+```
+
+Registered icons — call `registerIcons()` in `main.js` before mounting Vue, then use by name:
+
+```vue
+
+
+
+
+
+```
diff --git a/src/components/CnIcon/CnIcon.vue b/src/components/CnIcon/CnIcon.vue
index 0e714fc..8231b71 100644
--- a/src/components/CnIcon/CnIcon.vue
+++ b/src/components/CnIcon/CnIcon.vue
@@ -12,7 +12,6 @@ import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
* Apps extend this at boot via registerIcons() — import only the
* icons you need, keeping bundles small.
*
- * @example
* import { registerIcons } from '@conduction/nextcloud-vue'
* import Sword from 'vue-material-design-icons/Sword.vue'
* registerIcons({ Sword })
@@ -30,7 +29,6 @@ const _registry = {
*
* @param {Record
+
+
+
+```
+
+With inline header, custom icon, and view toggle:
+
+```vue
+
+
+
+
+
+```
+
+With column and field control:
+
+```vue
+
+
+
+
+
+```
+
+With store integration and action visibility control:
+
+```vue
+
+
+
+
+
+```
+
+With mass-action customisation:
+
+```vue
+
+
+
+
+ Send {{ count }} invoices
+
+
+
+
+
+```
+
+With form dialog control:
+
+```vue
+
+
+
+
+
+```
+
+With overridable header slot and below-header slot:
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+## Additional props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `description` | String | `''` | Optional description shown below the title in the page header |
+| `showTitle` | Boolean | `false` | Whether to show the inline page header (title, icon, description) |
+| `icon` | String | `''` | Optional MDI icon name; falls back to `schema.icon` |
+| `columns` | Array | `[]` | Manual column definitions (overrides schema-generated columns) |
+| `selectable` | Boolean | `true` | Whether rows/cards can be selected for mass actions |
+| `selectedIds` | Array | `[]` | Currently selected row IDs (controlled) |
+| `sortKey` | String | `null` | Current sort key |
+| `sortOrder` | String | `'asc'` | Current sort direction (`'asc'` or `'desc'`) |
+| `rowKey` | String | `'id'` | Property name used as the unique row identifier |
+| `excludeColumns` | Array | `[]` | Column keys to hide in schema mode |
+| `includeColumns` | Array | `null` | Column keys to show (whitelist); `null` means all |
+| `columnOverrides` | Object | `{}` | Per-column config overrides in schema mode |
+| `emptyText` | String | `'No items found'` | Text shown in the empty state |
+| `rowClass` | Function | `null` | Callback returning CSS class(es) for a row |
+| `inlineActionCount` | Number | `2` | How many row actions to show inline (rest go in overflow menu) |
+| `showMassImport` | Boolean | `true` | Whether to show the mass Import action |
+| `showMassCopy` | Boolean | `true` | Whether to show the mass Copy action |
+| `massActionNameField` | String | `'title'` | Property name used to display item names in dialogs |
+| `nameFormatter` | Function | `null` | Custom formatter for item names in dialogs; overrides `massActionNameField` |
+| `exportFormats` | Array | `[Excel, CSV]` | Available export formats for the export dialog |
+| `importOptions` | Array | `[]` | Import option definitions for the import dialog |
+| `showFormDialog` | Boolean | `true` | Whether to show the built-in form dialog for Add/Edit |
+| `useAdvancedFormDialog` | Boolean | `false` | Use `CnAdvancedFormDialog` instead of `CnFormDialog` for Add/Edit |
+| `showViewAction` | Boolean | `true` | Whether to add a View row action |
+| `showEditAction` | Boolean | `true` | Whether to add an Edit row action |
+| `showCopyAction` | Boolean | `true` | Whether to add a Copy row action |
+| `showDeleteAction` | Boolean | `true` | Whether to add a Delete row action |
+| `excludeFields` | Array | `[]` | Field keys to exclude from the form dialog |
+| `includeFields` | Array | `null` | Field keys to include in the form dialog (whitelist) |
+| `fieldOverrides` | Object | `{}` | Per-field config overrides passed to `CnFormDialog` |
+| `showViewToggle` | Boolean | `true` | Whether to show the Cards/Table view toggle |
+| `refreshing` | Boolean | `false` | Whether a refresh is currently in progress |
+| `refreshDisabled` | Boolean | `false` | Whether the refresh button is disabled |
+| `addDisabled` | Boolean | `false` | Whether the Add button is disabled |
+| `showAdd` | Boolean | `true` | Whether to show the Add button |
+| `store` | Object | `null` | Store instance for automatic save integration |
+| `objectType` | String | `''` | Object type slug for store integration (e.g. `registerId-schemaId`) |
+
+## Slots
+
+| Slot | Scope | Description |
+|------|-------|-------------|
+| `header` | `{ title, description, icon, showTitle }` | Replace the entire page header |
+| `below-header` | — | Content between the header and the actions bar |
+| `mass-actions` | `{ count, selectedIds }` | Extra mass action buttons shown when items are selected |
+| `action-items` | — | Extra buttons in the action bar |
+| `actions` | — | Extra action bar buttons (alias) |
+| `delete-dialog` | `{ item, close }` | Replace the single-item delete dialog |
+| `copy-dialog` | `{ item, close }` | Replace the single-item copy dialog |
+| `form-dialog` | `{ item, schema, close }` | Replace the create/edit form dialog |
+| `form-fields` | `{ fields, formData, errors, updateField }` | Replace form content inside the built-in `CnFormDialog` |
+| `import-fields` | `{ file }` | Extra fields in the import dialog |
+| `empty` | — | Custom empty state content |
+| `card` | `{ object, selected }` | Custom card template for card view |
+| `row-actions` | `{ row }` | Custom row actions |
+| `column-{key}` | `{ row, value }` | Custom cell renderer for a specific column |
diff --git a/src/components/CnIndexPage/CnIndexPage.vue b/src/components/CnIndexPage/CnIndexPage.vue
index 034ce1f..9b2cf6c 100644
--- a/src/components/CnIndexPage/CnIndexPage.vue
+++ b/src/components/CnIndexPage/CnIndexPage.vue
@@ -307,7 +307,8 @@ import { useContextMenu } from '../../composables/index.js'
*
* Use the `useAdvancedFormDialog` prop to use CnAdvancedFormDialog for create/edit (properties table, JSON tab, optional metadata).
*
- * @example Minimal usage (auto-generated dialogs from schema)
+ * Minimal usage (auto-generated dialogs from schema)
+ * ```vue
*
+ {{ title }}
+
+
+
+
+ These reports refresh nightly.
+
+
+ Schema content here
*
+
+
+
+```
+
+XML mode:
+
+```vue
++ Type invalid JSON to see the error indicator. +
+
+
+
+
+```
+
+Auto-detect mode — sniffs JSON, XML/HTML, or falls back to plain text:
+
+```vue
+
+
+
+
+```
diff --git a/src/components/CnJsonViewer/CnJsonViewer.vue b/src/components/CnJsonViewer/CnJsonViewer.vue
index c594d7f..d9871f7 100644
--- a/src/components/CnJsonViewer/CnJsonViewer.vue
+++ b/src/components/CnJsonViewer/CnJsonViewer.vue
@@ -49,17 +49,25 @@ import { getTheme } from '../../utils/getTheme.js'
* Includes syntax highlighting, and optional formatting/validation for JSON.
* Use `readOnly` for display-only mode.
*
- * @example Read-only JSON display (default)
+ * Read-only JSON display (default)
+ * ```vue
*
+
+ JSON (auto-detected)
+
+
+ Plain text (fallback)
+
+
+
+
+```
+
+With custom mass actions via slot:
+
+```vue
+
+
+ - Deselect
+ + Select
+ {{ count }} selected
+
+ Last action: {{ last || '—' }}
+{{ last || '—' }}
+ + +``` + +Custom button label and action labels — override `menuLabelTemplate` and the individual action labels: + +```vue +
+ Copy 2 selected items
+
+
+
+```
+
+## Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `nameFormatter` | `null` | Optional function `(item) => string` to format each item's displayed name. Overrides `nameField` when provided. |
+| `dialogTitle` | `'Copy items'` | Dialog title shown in the header. |
+| `patternLabel` | `'Naming pattern'` | Label above the naming pattern dropdown. |
+| `emptyText` | `'No items selected for copying.'` | Text shown when all items have been removed from the review list. |
+| `successText` | `'Items successfully copied.'` | Message shown in the success note card. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Copy'` | Label for the confirm/copy button. |
+| `removeLabel` | `'Remove from list'` | Aria-label for the per-item remove button (the × icon beside each item). |
diff --git a/src/components/CnMassCopyDialog/CnMassCopyDialog.vue b/src/components/CnMassCopyDialog/CnMassCopyDialog.vue
index 4fd106f..6dfff0f 100644
--- a/src/components/CnMassCopyDialog/CnMassCopyDialog.vue
+++ b/src/components/CnMassCopyDialog/CnMassCopyDialog.vue
@@ -88,7 +88,7 @@ import Close from 'vue-material-design-icons/Close.vue'
* with the items and naming function. The parent performs the actual API
* call and calls `setResult()` via a ref.
*
- * @example
+ * ```vue
*
+ Delete 3 selected items
+
+
+
+```
+
+## Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `nameFormatter` | `null` | Optional function `(item) => string` to format each item's displayed name. Overrides `nameField` when provided. |
+| `dialogTitle` | `'Delete items'` | Dialog title shown in the header. |
+| `warningText` | `'The following items will be permanently deleted...'` | Warning text shown above the item list. |
+| `emptyText` | `'No items selected for deletion.'` | Text shown when all items have been removed from the review list. |
+| `successText` | `'Items successfully deleted.'` | Message shown in the success note card. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Delete'` | Label for the confirm/delete button. |
+| `removeLabel` | `'Remove from list'` | Aria-label for the per-item remove button (the × icon beside each item). |
diff --git a/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue b/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue
index 4a70127..947a785 100644
--- a/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue
+++ b/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue
@@ -79,13 +79,14 @@ import Close from 'vue-material-design-icons/Close.vue'
* with the item IDs. The parent component performs the actual API call and
* calls `setResult()` via a ref.
*
- * @example
+ * ```vue
*
+ Export 5 items
+
+
+
+```
+
+## Additional props
+
+### Functional props
+
+| Prop | Default | Description |
+|---|---|---|
+| `dialogTitle` | `'Export objects'` | Dialog title shown in the header. |
+| `description` | `''` | Optional description text shown above the format selector (e.g., `'Export 42 objects from Cases'`). |
+| `formats` | `[{ id: 'excel', label: 'Excel (.xlsx)' }, { id: 'csv', label: 'CSV (.csv)' }]` | Available export format options. Each entry must have `id` and `label`. |
+| `defaultFormat` | `'excel'` | The `id` of the format that is pre-selected when the dialog opens. |
+
+### Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `successText` | `'Export completed successfully.'` | Message shown in the success note card. |
+| `formatLabel` | `'Export format'` | Label above the format dropdown. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Export'` | Label for the confirm/export button. |
diff --git a/src/components/CnMassExportDialog/CnMassExportDialog.vue b/src/components/CnMassExportDialog/CnMassExportDialog.vue
index bffd7d3..9b5a3e6 100644
--- a/src/components/CnMassExportDialog/CnMassExportDialog.vue
+++ b/src/components/CnMassExportDialog/CnMassExportDialog.vue
@@ -62,13 +62,14 @@ import ExportIcon from 'vue-material-design-icons/Export.vue'
* The parent handles the actual download. Based on the OpenRegister
* ExportRegister pattern.
*
- * @example
+ * ```vue
*
+ Import items
+
+
+
+```
+
+## Additional props
+
+### Functional props
+
+| Prop | Default | Description |
+|---|---|---|
+| `dialogTitle` | `'Import data'` | Dialog title shown in the header. |
+| `acceptedTypes` | `'.json,.xlsx,.xls,.csv'` | The `accept` attribute passed to the hidden file input. |
+| `options` | `[]` | Import option definitions rendered as toggle switches. Each entry: `{ key, label, description?, default? }`. |
+| `fileTypeHelp` | JSON/Excel/CSV entries | Array of `{ label, description }` explaining the supported file types. Pass an empty array to hide the help section. |
+| `canSubmit` | `true` | Whether the Import button is enabled. Use this when a required slot field (e.g., schema selector) has not yet been filled in. |
+
+### Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `successText` | `'Import completed successfully!'` | Message when all rows imported without errors. |
+| `partialSuccessText` | `'Import completed with errors. Check the details below.'` | Message when import partially succeeded. |
+| `loadingText` | `'Importing data — this may take a moment for large files...'` | Info card shown while the import is running. |
+| `summaryTitle` | `'Import summary'` | Heading above the results table. |
+| `supportedFormatsLabel` | `'Supported file types:'` | Bold heading inside the file type help block. |
+| `selectFileLabel` | `'Select file'` | Label on the file-picker button. |
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `'Import'` | Label for the confirm/import button. |
+| `sheetLabel` | `'Sheet'` | Column header in the results summary table. |
+| `foundLabel` | `'Found'` | Column header for the found-rows count. |
+| `createdLabel` | `'Created'` | Column header for the created-rows count. |
+| `updatedLabel` | `'Updated'` | Column header for the updated-rows count. |
+| `unchangedLabel` | `'Unchanged'` | Column header for the unchanged-rows count. |
+| `errorsLabel` | `'Errors'` | Column header for the error-rows count. |
diff --git a/src/components/CnMassImportDialog/CnMassImportDialog.vue b/src/components/CnMassImportDialog/CnMassImportDialog.vue
index f9e3850..6887d64 100644
--- a/src/components/CnMassImportDialog/CnMassImportDialog.vue
+++ b/src/components/CnMassImportDialog/CnMassImportDialog.vue
@@ -180,7 +180,7 @@ import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
* with the file and options. The parent handles the API call and calls
* `setResult()` via a ref.
*
- * @example
+ * ```vue
*
+
+```
+
+With heading:
+
+```vue
+
+
+ Deleting this record will permanently remove all associated data and cannot be undone.
+
+
+ Use the bulk import feature to add multiple records at once.
+
+
+```
+
+Custom content via default slot:
+
+```vue
+
+
+```
+
+Custom icon via `icon` slot — replace the built-in MDI icon with any content:
+
+```vue
+
+
+
+
+```
+
+Limiting metadata fields and custom `metadata` slot — `maxMetadata` caps the number of auto-rendered property fields; the `metadata` slot replaces the default rendering:
+
+```vue
+
+ Selected: {{ selected ? item.title : 'none' }}
+
+
+ {{ field.label }}: {{ field.value }}
+
+
+
+
+
+
+
+```
+
+Read-only mode — no inline editing:
+
+```vue
+
+
+```
+
+With `icon`, `objectType`, `store`, `columns`, `overrides`, `exclude`, `include`, and custom labels:
+
+```vue
+
+
+
+
+
+```
+
+## Additional props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
+| `objectType` | String | `''` | Registered object type slug used by `objectStore.saveObject()` |
+| `store` | Object | `null` | Explicit Pinia objectStore instance; auto-detected via Pinia when omitted |
+| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget } }` |
+| `columns` | Number | `3` | Number of CSS grid columns in the widget |
+| `exclude` | Array | `[]` | Property keys to hide |
+| `include` | Array | `null` | Property keys to show (whitelist; shows all when `null`) |
+| `saveLabel` | String | `'Save'` | Label for the save button |
+| `discardLabel` | String | `'Discard'` | Label for the discard button |
+| `emptyLabel` | String | `'No data available'` | Label shown when no properties are displayable |
diff --git a/src/components/CnObjectDataWidget/CnObjectDataWidget.vue b/src/components/CnObjectDataWidget/CnObjectDataWidget.vue
index e0c1972..97c8439 100644
--- a/src/components/CnObjectDataWidget/CnObjectDataWidget.vue
+++ b/src/components/CnObjectDataWidget/CnObjectDataWidget.vue
@@ -235,7 +235,8 @@ import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
* as a label-value cell. Editable cells can be clicked to switch to inline editing.
* Uses the objectStore to persist changes.
*
- * @example Basic usage
+ * Basic usage
+ * ```vue
*
+
+```
+
+Filtered — show only specific fields:
+
+```vue
+
+
+```
+
+Horizontal layout with extra items:
+
+```vue
+
+
+```
+
+Collapsible:
+
+```vue
+
+
+```
+
+With `icon`, `columns`, `labelWidth`, `exclude`, `emptyLabel`, and the `actions` slot:
+
+```vue
+
+
+
+
+ Copy UUID
+
+
+
+
+
+```
+
+## Additional props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
+| `columns` | Number | `0` | Number of grid columns (only relevant for `layout="grid"`; `0` = auto) |
+| `labelWidth` | Number | `150` | Minimum label width in pixels for `layout="horizontal"` |
+| `exclude` | Array | `[]` | Metadata field keys to hide |
+| `emptyLabel` | String | `'No metadata available'` | Text shown when no metadata fields are present |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `actions` | Action buttons rendered in the card header (e.g. a "Copy UUID" button) |
diff --git a/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue b/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue
index 4001103..66a45a4 100644
--- a/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue
+++ b/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue
@@ -59,10 +59,13 @@ const METADATA_FIELDS = [
* Understands both flat objects (where metadata is at the top level) and
* objects with a `@self` metadata block.
*
- * @example Basic usage
+ * Basic usage
+ * ```vue
*
+
+
+
+```
+
+Near the end — shows smart ellipsis at the start:
+
+```vue
+
+ Page {{ page }} · {{ size }} per page
+
+
+```
+
+Tooltips and custom bar height:
+
+```vue
+
+
+ rounded (default)
+
+
+not rounded
+
+ Row: {{ lastAction || 'no action yet' }}
+
+
+
+```
+
+Primary trigger and named menu — use `primary` to apply primary button styling to the trigger, and `menuName` to add a visible label next to the trigger icon:
+
+```vue
+
+
+
+
+
+```
+
+Conditional visibility — hide actions based on row state:
+
+```vue
+
+
+
+
+
+```
diff --git a/src/components/CnRowActions/CnRowActions.vue b/src/components/CnRowActions/CnRowActions.vue
index d110834..64023e0 100644
--- a/src/components/CnRowActions/CnRowActions.vue
+++ b/src/components/CnRowActions/CnRowActions.vue
@@ -25,13 +25,14 @@ import { NcActions, NcActionButton } from '@nextcloud/vue'
* Wraps NcActions + NcActionButton for consistent row/card action menus.
* Actions are defined as an array of objects with label, icon, handler, etc.
*
- * @example
+ * ```vue
*
+ {{ item.title }}
+
+ New schema
+
+
+
+```
+
+Edit mode — pre-populate with existing schema:
+
+```vue
+
+
+ Edit schema
+
+
+
+```
+
+## Additional props
+
+### Data and configuration
+
+| Prop | Default | Description |
+|---|---|---|
+| `item` | `null` | Existing schema object for edit mode. Pass `null` for create mode. |
+| `dialogTitle` | `''` | Dialog title. Defaults to `'Create Schema'` or `'Edit Schema'` when empty. |
+| `size` | `'large'` | NcDialog size. |
+| `availableSchemas` | `[]` | Schemas available for composition (allOf/oneOf/anyOf) and property references. Each entry: `{ id, title, description, reference }`. |
+| `availableRegisters` | `[]` | Registers shown in the Configuration tab for field mapping. Each entry: `{ id, label }`. |
+| `userGroups` | `[]` | User groups for RBAC in the Security tab. Each entry: `{ id, displayname }`. |
+| `availableTags` | `[]` | Tags available for file property configuration. |
+| `loadingGroups` | `false` | Whether user groups are still being loaded (shows a loading indicator in the Security tab). |
+| `inheritedProperties` | `{}` | Properties inherited from parent schemas via allOf — shown as locked rows in the Properties tab. |
+| `objectCount` | `0` | Number of objects attached to this schema; controls whether the Delete/Publish buttons are enabled. |
+
+### Optional action buttons (edit mode only)
+
+These buttons appear in the dialog footer when editing an existing schema.
+
+| Prop | Default | Description |
+|---|---|---|
+| `showExtendSchema` | `false` | Show the "Extend schema" button. Emits `extend-schema` on click. |
+| `showAnalyzeProperties` | `false` | Show the "Analyze properties" button. Emits `analyze-properties` on click. |
+| `showValidateObjects` | `false` | Show the "Validate objects" button. Emits `validate-objects` on click. |
+| `showDeleteObjects` | `false` | Show the "Delete objects" button. Disabled when `objectCount === 0`. Emits `delete-objects` on click. |
+| `showPublishObjects` | `false` | Show the "Publish objects" button. Disabled when `objectCount === 0`. Emits `publish-objects` on click. |
+
+### Label customization
+
+All user-visible strings have props so they can be pre-translated by the consumer app.
+
+| Prop | Default (English) | Description |
+|---|---|---|
+| `cancelLabel` | `'Cancel'` | Label for the dismiss button before the action is confirmed. |
+| `closeLabel` | `'Close'` | Label for the dismiss button after the result is shown. |
+| `confirmLabel` | `''` | Confirm button label. Defaults to `'Create'` or `'Save'` depending on mode. |
+| `successText` | `'Schema saved successfully.'` | Message shown after a successful save. |
+| `extendSchemaLabel` | `'Extend schema'` | Label for the Extend Schema action button. |
+| `analyzePropertiesLabel` | `'Analyze properties'` | Label for the Analyze Properties action button. |
+| `validateObjectsLabel` | `'Validate objects'` | Label for the Validate Objects action button. |
+| `deleteObjectsLabel` | `'Delete objects'` | Label for the Delete Objects action button. |
+| `publishObjectsLabel` | `'Publish objects'` | Label for the Publish Objects action button. |
+| `deleteLabel` | `'Delete'` | Label for the Delete (schema) action button. |
+| `deleteObjectsTooltip` | `'Delete all objects in this schema'` | Tooltip shown on the Delete Objects button when objects exist. |
+| `publishObjectsTooltip` | `'Publish all objects in this schema'` | Tooltip shown on the Publish Objects button when objects exist. |
+| `noDeleteObjectsTooltip` | `'No objects to delete'` | Tooltip shown on the Delete Objects button when `objectCount === 0`. |
+| `noPublishObjectsTooltip` | `'No objects to publish'` | Tooltip shown on the Publish Objects button when `objectCount === 0`. |
+| `cannotDeleteTooltip` | `'Cannot delete: objects are still attached'` | Tooltip shown on the Delete button when `objectCount > 0`. |
diff --git a/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue b/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue
index 84314da..7ec253f 100644
--- a/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue
+++ b/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue
@@ -82,7 +82,7 @@
-
+
+
@@ -397,11 +411,46 @@ export default {
return total + this.getConditionalRules(action).length
}, 0)
},
+
+ /**
+ * Resolved schema-level value of `inheritFromPublic`.
+ *
+ * The cascade (register / tenant default) lives on the backend; here we
+ * just surface the schema's explicit value, defaulting to `true` (the
+ * pre-change behaviour) when unset.
+ *
+ * @return {boolean}
+ */
+ inheritFromPublic() {
+ const auth = this.schemaItem.authorization || {}
+ if (auth.inheritFromPublic === undefined || auth.inheritFromPublic === null) {
+ return true
+ }
+ return Boolean(auth.inheritFromPublic)
+ },
},
methods: {
t,
capitalize: _.capitalize,
+ /**
+ * Set the schema-level `inheritFromPublic` flag.
+ *
+ * Mutates schemaItem.authorization directly (matches the existing
+ * permission-table pattern). Storing `true` explicitly (rather than
+ * deleting the key) keeps the user's choice visible in the JSON view —
+ * the cascade still treats omitted/null as "unset" if a future operator
+ * removes it manually.
+ *
+ * @param {boolean} value New value for the flag.
+ */
+ setInheritFromPublic(value) {
+ if (!this.schemaItem.authorization) {
+ this.$set(this.schemaItem, 'authorization', {})
+ }
+ this.$set(this.schemaItem.authorization, 'inheritFromPublic', Boolean(value))
+ },
+
availablePropertyOptions(action, ruleIdx) {
const rules = this.getConditionalRules(action)
const currentRule = rules[ruleIdx]
diff --git a/src/components/CnSettingsCard/CnSettingsCard.md b/src/components/CnSettingsCard/CnSettingsCard.md
new file mode 100644
index 0000000..24d515c
--- /dev/null
+++ b/src/components/CnSettingsCard/CnSettingsCard.md
@@ -0,0 +1,30 @@
+Basic — static card with title and icon emoji:
+
+```vue
+
+
+ {{ t('nextcloud-vue', 'Authenticated users inherit `public` group rights') }}
+
+
+ {{ t('nextcloud-vue', 'When on (default), logged-in users qualify for any rule that targets the `public` group. Disable to make authenticated access strictly gated by explicit group memberships — anonymous users are unaffected either way.') }} +
+
+
+
+
+
+
+```
diff --git a/src/components/CnSettingsCard/CnSettingsCard.vue b/src/components/CnSettingsCard/CnSettingsCard.vue
index 053af9a..9def13c 100644
--- a/src/components/CnSettingsCard/CnSettingsCard.vue
+++ b/src/components/CnSettingsCard/CnSettingsCard.vue
@@ -37,10 +37,11 @@ import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
* Extracted from OpenRegister's SettingsCard. Provides a titled card with
* optional collapse/expand animation.
*
- * @example
+ * ```vue
* Content here
*Cache hit rate: 94%
*
+
+```
+
+Horizontal with icon — icon on the left, content on the right:
+
+```vue
+
+
+
+
+
+```
+
+With breakdown — secondary stats shown below the count:
+
+```vue
+
+
+```
+
+Clickable — hover effect and click event:
+
+```vue
+
+
+
+ Clicked: {{ last || '—' }}
+ + +``` + +Loading / empty states — `loadingLabel` and `emptyLabel` control the fallback text: + +```vue +
+
+```
+
+Route-based navigation — renders as `
+
+
+
+```
+
+## Additional props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `loadingLabel` | `String` | `'Loading...'` | Text shown next to the spinner when `loading` is `true` and count is 0 |
+| `emptyLabel` | `String` | `'No items found'` | Text shown when count is 0, not loading, and `showZeroCount` is `false` |
+| `iconSize` | `Number` | `24` | Icon size in pixels passed to the icon component |
+| `route` | `Object` | `null` | Vue Router location object (`{ name, query }` / `{ path }`). When set, the card renders as a `
+
+```
+
+Sizes — `small` trims padding, `medium` is the default:
+
+```vue
+
+
+```
+
+Solid — filled background with white text, useful on colored card backgrounds:
+
+```vue
+
+
+```
+
+colorMap — resolves variant automatically from the label value (case-insensitive):
+
+```vue
+
+
+
+
+
+```
+
+Custom icon slot — prepend an icon inside the badge before the label text:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+The `icon` slot renders inside the default slot, before the label text. Use it to prepend a small icon to the badge.
diff --git a/src/components/CnStatusBadge/CnStatusBadge.vue b/src/components/CnStatusBadge/CnStatusBadge.vue
index f88520c..3f5b03d 100644
--- a/src/components/CnStatusBadge/CnStatusBadge.vue
+++ b/src/components/CnStatusBadge/CnStatusBadge.vue
@@ -16,15 +16,17 @@
* Replaces the various .status-badge / .priority-badge CSS patterns duplicated
* across Pipelinq and Procest. Supports a colorMap for automatic variant lookup.
*
- * @example
+ * ```vue
*
+
+
+
+
+```
+
+SVG icon tile — uses an MDI path directly:
+
+```vue
+
+```
diff --git a/src/components/CnTileWidget/CnTileWidget.vue b/src/components/CnTileWidget/CnTileWidget.vue
index 017e047..8ece5b3 100644
--- a/src/components/CnTileWidget/CnTileWidget.vue
+++ b/src/components/CnTileWidget/CnTileWidget.vue
@@ -41,7 +41,7 @@ import { generateUrl } from '@nextcloud/router'
/**
* CnTileWidget — Quick-access tile with icon and link.
*
- * @example
+ * ```vue
*
+
+
+
+```
+
+Small size:
+
+```vue
++ Current: {{ current }} +
+
+ Assigned to:
+
+
+```
+
+Non-interactive — just displays the name without popover:
+
+```vue
+
+
+```
+
+With pre-translated label props:
+
+```vue
+
+ Owner:
+
+
+ Reviewer:
+
+