ShowList.vue

This component renders a list of items (members, images, runs) in various contexts: runs for a location, images of a run, attendees of a run. The list can be expanded to display all items.
Warning: calculation of when the expand button is shown is a bit quirky due to the wide range of items which can be shown

📄 View source on GitHub

Props

Name	Type	Required	Default
header	String	✅	``
contentType	String	✅	``
itemList	Array	✅	``
maxItems	Number	✅	2

Used by

• /locations/id
• /runs/id

Functions

toggleExpand

Toggles the visibility of the full list. When triggered, it expands or collapses the list based on the current state of showAll. If showAll is true, all items are visible; otherwise, the list is restricted to a predefined maximum number of items.

updateElementWidth

Updates the elementWidth reactive variable with the clientWidth of the passed element. This is used to calculate the dynamicMaxItems value.

Reactivity

computedWidth (computed)

Computes the width of the container based on the screen size and evaluates if we should show text or icon buttons

showButtons (computed)

Computes whether to show the expand/collapse buttons or icons based on the width of the header (calculated from the width class and the container width).

(anonymous) (watchEffect)

This is the (quirky) function to calculate the number of items to show in the unexpanded container.