Note
NoteFeed
Animated list of notes with search/filter toolbar, load-more pagination, and empty states.
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
<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 |
AI Context
component: XANoteFeed
package: "@xenterprises/nuxt-x-app"
category: Note
use-when: >
Compose XANoteInput + XANoteFeed together for a full create-and-read note
experience on entity detail pages. XANoteFeed handles display, search,
filtering, and pagination. Use the #input slot to embed XANoteInput at
the top of the feed.