Wall
WallTags
Tag chip list with add/remove controls and dropdown suggestions from available tags.
Wall
The Wall category provides a complete social feed system. XAWallFeed is the top-level orchestrator; it renders pinned and regular post lists, delegates search/filter to a toolbar, and shows appropriate empty or loading states. Individual posts are rendered by XAWallPost. The remaining components — XAWallInput, XAWallReplies, XAWallReactions, and XAWallTags — can be composed independently or are automatically used inside XAWallFeed and XAWallPost.
Components
<XAWallTags />
A tag chip list with optional add/remove controls. In edit mode, existing tags show an × button to remove them and a dropdown button lets users pick from availableTags. In readonly mode only the chips are shown, each emitting tag-click when clicked.
<!-- Editable -->
<XAWallTags
:tags="selectedTags"
:available-tags="allTags"
:max-tags="3"
@update:tags="selectedTags = $event"
@tag-click="filterByTag"
/>
<!-- Read-only display -->
<XAWallTags :tags="post.tags" readonly @tag-click="filterByTag" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tags | Array | [] | Active tag objects: { label, color? }. |
readonly | Boolean | false | Display only — hides add/remove controls. |
availableTags | Array | [] | Tag suggestions for the add dropdown. |
maxTags | Number | 5 | Maximum number of tags. Hides the add button when reached. |
Events
| Event | Payload | Description |
|---|---|---|
update:tags | Array | Emitted when tags are added or removed. |
tag-click | tag object | Emitted when any tag chip is clicked. |
AI Context
component: XAWallTags
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Wall
use-when: Displaying or editing a list of tag chips on posts. In readonly mode shows clickable chips; in edit mode provides add/remove controls with dropdown suggestions from availableTags. Use standalone or it is automatically used inside XAWallInput.