Modal Tracking

Extends Modal

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

A Showpad-specific wrapper around the generic Modal component.

Adds tracking support to modal actions and replaces the internal ByltButton with SPButton and the internal Popup with the Showpad Popup so tracking flows through correctly.

Getting started

<template>
    <Modal 
        :track="true"
        :options="[
            { label: 'Accept', value: true },
            { label: 'Decline', value: false, props: { class: '--bordered' } }
        ]"
        @answered="onAnswer"
    >
        <template #header>
            <h2>Custom Modal Header</h2>
        </template>
        <p>This action cannot be undone.</p>
    </Modal>
</template>

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

function onAnswer(value) {
    // Handle the user's choice
}
</script>

API

This component extends from Modal. All attributes, events, and slots are passed on to the parent component unless documented here.

Properties

track

Sets the tracking status of both the entire modal and each option button, unless the option itself has a track property set.

Values: Boolean

Default: false

options

Array of button option objects to display as actions. Each option should have at least a label and value. Pass extra props to each button via the props key.

If no track value is given for an option, the modal-level track value is used as the fallback.

Values: Array of objects { label: String, value: any, type?: String, props?: Object }

Default:

[
  { label: 'Accept', value: true, type: 'submit' },
  { label: 'Decline', value: false, props: { class: '--bordered' } }
]

Slots

No additional slots next to Modal.

Events

No additional events next to Modal.