Prompt Tracking

Extends Prompt

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

A Showpad-specific wrapper around the generic Prompt component. Adds tracking support to prompt actions and replaces the internal ByltButton with SPButton and the internal Popup with the Showpad Popup so tracking flows through correctly.

Getting started

<template>
    <Prompt 
        :track="true"
        :options="[
            { label: 'Accept', value: true, type: 'submit' },
            { label: 'Decline', value: false, props: { class: '--bordered' } }
        ]"
        v-model:visible="showPrompt"
        v-model:values="formValues"
        @answered="onAnswered"
    >
        <template #form>
            <FormKit type="textarea" name="reason" placeholder="Reason (optional)" />
        </template>
    </Prompt>
</template>

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

const showPrompt = ref(false);
const formValues = ref({ reason: '' });

function onAnswered({ values, answer }) {
  // Handle the user's answer and form values
}
</script>

API

This component extends from Prompt. 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 prompt 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 prompt-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 Prompt.

Events

No additional events next to Prompt.