AssetList

import { AssetList } from '@bbc/front-end-kit/vue/showpad'

The AssetList component renders a list of Showpad asset objects using a Vue component for each item.

Getting Started

There are two ways to use the AssetList component:

<template>
    <!-- Using an array of assets directly -->
    <AssetList :Item="AssetItem" :assets="showpadAssetList" />

    <!-- Using data-sp for asset injection from the Showpad config -->
    <AssetList :Item="AssetItem" data-sp="path.to.asset-grid" />
</template>

<script setup>
import { AssetList, AssetItem } from '@bbc/front-end-kit/vue/showpad'
</script>

Generated Config Example

When using data-sp with the default dataSpAsset="tags", the following configuration structure is generated:

{
    "content": {
        "path": {
            "to": {
                "asset-grid": {
                    "assets": {
                        "tags": {
                            "type": "tags",
                            "value": null,
                            "description": "Asset Grid"
                        },
                        "page-tags": {
                            "type": "page-tags",
                            "value": null,
                            "description": "Asset Grid"
                        }
                    }
                }
            }
        }
    },
    "labels": {
        "path": {
            "to": {
                "asset-grid": {
                    "empty": {
                        "value": "No assets found",
                        "description": "Message displayed when no assets are available."
                    }
                }
            }
        }
    }
}

API

data-sp-*

The hidden config span uses data-sp, data-sp-asset, and data-sp-description to drive asset injection from the Showpad config when assets is not provided.

Properties

Item

The Vue component used to render each asset in the list.

Values: Vue Component

Required: yes

assets

An array of asset objects to render. When provided, takes precedence over the data-sp config path.

Values: Array of Showpad asset

Default: null

itemProps

Additional props forwarded to each rendered Item component via v-bind.

Values: Object

Default: {}

emptyMessage

The message displayed when no assets are available.

Values: String

Default: 'No assets found'

showEmptyMessage

Whether to show the empty message when no assets are available.

Values: Boolean

Default: true

dataSp

The data-sp path used for config-driven asset injection. Only active when assets is null.

Values: String

Default: ''

dataSpAsset

Controls which config key type is used to fetch assets. 'tags' reads from [path].assets.tags and [path].assets.page-tags. Any other value reads from [path].assets directly.

Values: String

Default: 'tags'

dataSpDescription

Description applied to the hidden config span via data-sp-description.

Values: String

Default: 'Asset Grid'

Slots

default

Customizes the contents of each rendered item. Passed through to the Item component.

Properties

• asset: The Showpad asset object for that item.