nuxt-x-app
Note
Components for displaying, composing, and filtering user notes with attachment support.
Note
The Note category provides a complete activity/comment feed system. XANote is the individual card, XANoteFeed composes multiple notes with search and pagination, XANoteInput is the composition form, and XANoteToolbar handles search and filtering independently.
Components
<XANote />
Renders a single note as a bordered card. Displays the author's avatar (with initials fallback), name, relative and absolute timestamps, body text, and a list of clickable file attachments.
<XANote
body="Shipped the fix to production. All tests passing."
:timestamp="new Date()"
:user="{ name: 'Jane Doe', avatar: '/jane.png' }"
:attachments="[{ name: 'deploy.log', size: 14230 }]"
size="md"
@attachment-click="downloadFile"
>
<template #actions>
<UDropdownMenu :items="noteActions">
<UButton icon="i-lucide-more-horizontal" variant="ghost" size="xs" />
</UDropdownMenu>
</template>
</XANote>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
body | String | required | Note body text |
timestamp | String | Date | Number | required | Creation timestamp |
user | Object | required | Author: { name: string, avatar?: string } |
attachments | Array | [] | File attachments: [{ name, size, type?, url? }] |
showActions | Boolean | true | Show the #actions slot |
size | String | 'md' | Card size variant: sm md lg |
Events
| Event | Payload | Description |
|---|---|---|
click | — | Emitted when the note card is clicked |
attachment-click | file | Emitted when an attachment is clicked |
<XANoteFeed />
Wraps a collection of XANote cards in an animated TransitionGroup. Includes optional search/filter toolbar, a load-more button, search empty state, and a general empty state from XAStateEmpty.
<XANoteFeed
:notes="notes"
:has-more="hasMore"
:loading-more="loadingMore"
searchable
filterable
:filter-options="[
{ key: 'author', label: 'Author', type: 'select', options: authorOptions }
]"
@load-more="loadMore"
@note-click="openNote"
>
<template #input>
<XANoteInput v-model="draft" @submit="addNote" />
</template>
<template #note-actions="{ note }">
<UButton icon="i-lucide-trash" size="xs" variant="ghost" color="error" @click="deleteNote(note)" />
</template>
</XANoteFeed>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
notes | Array | required | Array of note objects |
hasMore | Boolean | false | Show the load-more button |
loadingMore | Boolean | false | Loading state for load-more button |
loadMoreText | String | 'Load more notes' | Load-more button label |
emptyTitle | String | 'No notes yet' | Empty state title |
emptyDescription | String | 'Notes will appear here once added.' | Empty state description |
emptyIcon | String | 'i-lucide-sticky-note' | Empty state icon |
noteSize | String | 'md' | Size variant passed to each XANote |
showNoteActions | Boolean | true | Show note action slots |
searchable | Boolean | false | Enable search toolbar |
filterable | Boolean | false | Enable filter toolbar |
search | String | '' | Current search query (v-model:search) |
filters | Object | {} | Active filters object (v-model:filters) |
filterOptions | Array | [] | Filter definitions: [{ key, label, type, options? }] |
debounce | Number | 300 | Search debounce in ms |
searchPlaceholder | String | 'Search notes...' | Search input placeholder |
searchEmptyTitle | String | 'No notes found' | Search empty state title |
searchEmptyDescription | String | 'Try adjusting your search or filters.' | Search empty state description |
Events
| Event | Payload | Description |
|---|---|---|
load-more | — | User clicked load-more |
note-click | note | User clicked a note |
attachment-click | { note, file } | User clicked a note attachment |
update:search | string | Search query changed |
update:filters | object | Filters changed |
clear-filters | — | User cleared all filters |
<XANoteInput />
Composition form for creating notes. Features an auto-resizing textarea (with Cmd+Enter / Ctrl+Enter submit shortcut), optional file attachment picker, attached file preview with removal, and a submit button with loading state.
<XANoteInput
v-model="noteText"
placeholder="Add a note..."
:user="currentUser"
allow-attachments
accept="image/*,.pdf"
:max-files="3"
:loading="saving"
submit-text="Post"
@submit="({ body, files }) => createNote(body, files)"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | String | '' | v-model for the note body |
placeholder | String | 'Add a note...' | Textarea placeholder |
allowAttachments | Boolean | false | Show the file attachment button |
accept | String | '*' | Accepted file MIME types |
maxFileSize | Number | 262144000 | Max file size in bytes (250 MB default) |
maxFiles | Number | 5 | Maximum number of attachments |
loading | Boolean | false | Loading state on submit button |
disabled | Boolean | false | Disable the entire input |
submitText | String | 'Add note' | Submit button label |
user | Object | null | Current user for avatar display: { name, avatar? } |
minRows | Number | 2 | Minimum textarea rows |
maxRows | Number | 6 | Maximum textarea rows (auto-grow limit) |
Events
| Event | Payload | Description |
|---|---|---|
submit | { body: string, files: File[] } | Emitted on button click or keyboard shortcut |
update:modelValue | string | Textarea content changed |
<XANoteToolbar />
Search input and collapsible filter panel for note lists. Displays active filter chips with individual removal controls. Can be used standalone or is automatically embedded by XANoteFeed.
<XANoteToolbar
v-model:search="search"
v-model:filters="filters"
searchable
filterable
search-placeholder="Search activity..."
:filter-options="[
{ key: 'from', label: 'From', type: 'date' },
{ key: 'author', label: 'Author', type: 'select', options: authors }
]"
@clear="clearAll"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
search | String | '' | Current search query (v-model:search) |
filters | Object | {} | Active filters (v-model:filters) |
searchable | Boolean | true | Show search input |
filterable | Boolean | true | Show filter toggle button |
debounce | Number | 300 | Search debounce in ms |
searchPlaceholder | String | 'Search notes...' | Search input placeholder |
filterOptions | Array | [] | Filter definitions: [{ key, label, type, options?, placeholder? }] |
Events
| Event | Payload | Description |
|---|---|---|
update:search | string | Search query changed |
update:filters | object | Filters changed |
clear | — | All filters cleared |
AI Context
category: Note
package: "@xenterprises/nuxt-x-app"
use-when: >
Use this category for activity feeds, comment threads, internal notes,
or audit trails on entity detail pages. Compose XANoteInput + XANoteFeed
together for a full create-and-read experience. Use XANote standalone
when you need to render a single note in a custom layout. XANoteToolbar
can be used independently if you need search/filter UI above a non-note
list.