CnNotesCard
Inline notes widget for detail pages. Fetches notes from the OpenRegister API, shows the most recent entries (up to maxDisplay), and includes an add-note form. Author names are wrapped with CnUserActionMenu for quick communication. Own notes show a delete button on hover.
Wraps: CnDetailCard, CnUserActionMenu
Try it
Loading CnNotesCard playground…
Usage
<CnNotesCard
register-id="uuid-register"
schema-id="uuid-schema"
object-id="uuid-object"
@note-added="refreshSidebar"
@note-deleted="refreshSidebar"
@show-all="openSidebarNotesTab" />
Pass pre-translated labels when your app handles i18n:
<CnNotesCard
register-id="reg"
schema-id="schema"
object-id="obj"
:title-label="t('myapp', 'Notes')"
:add-note-label="t('myapp', 'Add note')"
:no-notes-label="t('myapp', 'No notes yet')"
:show-all-label="t('myapp', 'Show all')" />
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
registerId | String | ✓ | — | OpenRegister register UUID |
schemaId | String | ✓ | — | OpenRegister schema UUID |
objectId | String | ✓ | — | Object UUID |
apiBase | String | '/apps/openregister/api' | Base URL for OpenRegister API calls | |
maxDisplay | Number | 5 | Maximum number of notes to show before the "Show all" footer link appears | |
collapsible | Boolean | false | Whether the card supports collapse/expand | |
titleLabel | String | 'Notes' | Card title | |
addNoteLabel | String | 'Add note' | Submit button label | |
addNotePlaceholder | String | 'Write a note...' | Textarea placeholder | |
noNotesLabel | String | 'No notes yet' | Empty state text | |
showAllLabel | String | 'Show all' | Footer link label | |
deleteLabel | String | 'Delete note' | Accessible label for the delete button |
Events
| Event | Payload | Description |
|---|---|---|
note-added | — | Emitted after a note has been successfully created |
note-deleted | — | Emitted after a note has been successfully deleted |
show-all | — | Emitted when the "Show all" footer link is clicked |
Reference (auto-generated)
The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnNotesCard.vue and update automatically whenever the component changes.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
registerId | string | ✓ | — | OpenRegister register ID |
schemaId | string | ✓ | — | OpenRegister schema ID |
objectId | string | ✓ | — | Object UUID |
apiBase | string | '/apps/openregister/api' | Base API URL for OpenRegister | |
maxDisplay | number | 5 | Maximum number of notes to display | |
collapsible | boolean | false | Whether the card is collapsible | |
titleLabel | string | () => t('nextcloud-vue', 'Notes') | Card header title. | |
addNoteLabel | string | () => t('nextcloud-vue', 'Add note') | Label for the submit button that creates a new note. | |
addNotePlaceholder | string | () => t('nextcloud-vue', 'Write a note...') | Placeholder shown inside the new-note textarea before any input. | |
noNotesLabel | string | () => t('nextcloud-vue', 'No notes yet') | Empty-state text shown when the object has zero notes. | |
showAllLabel | string | () => t('nextcloud-vue', 'Show all') | Label for the "Show all" button rendered when the note list is truncated. | |
deleteLabel | string | () => t('nextcloud-vue', 'Delete note') | Aria label for the per-note delete icon button. |
Events
| Name | Payload | Description |
|---|---|---|
show-all | — | |
note-added | — | |
note-deleted | — |