Note
NoteInput
Note composition form with auto-growing textarea, file attachments, and submit action.
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
<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 |
AI Context
component: XANoteInput
package: "@xenterprises/nuxt-x-app"
category: Note
use-when: >
Composing new notes on entity detail pages. Pair with XANoteFeed for a
full create-and-read experience. Supports Cmd+Enter / Ctrl+Enter shortcut
for quick submission.