Note
NoteToolbar
Search and filter bar for note feeds with collapsible filter panel and active filter chips.
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
<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
component: XANoteToolbar
package: "@xenterprises/nuxt-x-app"
category: Note
use-when: >
XANoteToolbar is automatically embedded by XANoteFeed when searchable or
filterable props are set. Use it standalone only when you need search/filter
UI above a non-note list or need full layout control.