Result Modal

Full-screen result display with celebration effects.

Features

• Celebration effects — Confetti animation for wins
• Focus trap — Proper modal accessibility
• Action buttons — Primary and secondary CTAs
• Keyboard support — Escape to close

Usage

<script setup>
import { ref } from 'vue'
import { FkResultModal } from '@fortune-kit/components'

const showResult = ref(false)
</script>

<template>
  <FkResultModal
    v-model:open="showResult"
    type="win"
    title="Jackpot!"
    :amount="10000"
    currency="$"
    subtitle="You hit the jackpot!"
    primary-action="Collect"
    secondary-action="Double or Nothing"
    @primary="showResult = false"
    @secondary="showResult = false"
  />
</template>

Props

Prop	Type	Default	Description
open	boolean	Required	Modal visibility
type	'win' | 'lose' | 'info'	'info'	Result type
title	string	Required	Main title
subtitle	string	—	Additional text
amount	number	—	Value to display
currency	string	—	Currency symbol
primaryAction	string	—	Primary button text
secondaryAction	string	—	Secondary button text
showConfetti	boolean	true	Show confetti for wins

Events

Event	Description
update:open	v-model for visibility
close	When modal closes
primary	Primary action clicked
secondary	Secondary action clicked