UxShowMore
components/ux/ShowMore.vue
Canonical overflow control for capped lists: "Show all N" / "Show more (cap of N)" expands in place, "Only show top N" collapses, and past expandCap a hairline-separated hand-off link ("View all N →") routes to a full listing page — or a muted "+N more" count when no listing backs the list.
ToolCallstool_1tool_2tool_3tool_4tool_5
400
200
133
100
80
Scenarios
Fits within expandCap — plain expand/collapse
Beyond expandCap, listing page behind it — hand-off link after the hairline
Beyond expandCap, no listing page — muted overflow count
+37 more
Under rowCap — control renders nothing
(nothing to show — 4 ≤ rowCap)
components/ux/ShowMore.vue
Usage
<UxShowMore
:total = "—"
:rowCap = "—"
:expandCap = "—"
:expanded = "—"
to = "undefined"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| total | Number | — | Full (unsliced) row count of the capped list |
| rowCap | Number | — | Rows shown collapsed; control hides at or under this |
| expandCap | Number | — | Rows shown expanded; past this the hand-off link/count appears |
| expanded | Boolean | — | Current expansion state (owned by the parent) |
| to | String | undefined | Listing-page URL for the overflow hand-off, already filtered if needed; absent renders "+N more" |
Events
| Event | Description |
|---|---|
| toggle | Expand/collapse requested — parent flips `expanded` and re-slices its rows |