Toast Component Demo

This page demonstrates the Toast component with its new useToast composable implementation.

Interactive Demo

The toast component now uses a powerful composable system for state management:

Basic Toast Types

Position Configuration: bottom-right

Max Toasts limit: No limit

X & Y Offset in Rems: (1, 1)

Usage Examples

Basic Usage

<script setup>
import { useToast } from '@/composables/useToastComposable' 

const { success, error, warning, info } = useToast()

// Simple notifications
const handleSuccess = () => {
  success('Operation completed successfully!')
}

const handleError = () => {
  error('Something went wrong', {
    secondaryMessage: 'Please try again later'
  })
}
</script>

Advanced Configuration

<script setup>
import { useToast } from '@/composables/useToastComposable'

const { 
  showToast, 
  setPosition, 
  setOffset, 
  setMaxNotifications 
} = useToast()

// Configure toast system
setPosition('top-right')
setOffset(2, 2) // 2rem from edges
setMaxNotifications(5) // Limit to 5 notifications per position

// Custom toast with per-notification position override
const showCustomNotification = () => {
  showToast({
    type: 'warning',
    primaryMessage: 'Custom notification',
    secondaryMessage: 'With advanced options',
    timeout: 8000,
    isPersistent: false,
    position: 'bottom-left', // Override global position for this notification
    offset: { x: 1, y: 1 }, // Override global offset for this notification
    icon: '⚠️'
  })
}
</script>

Features Demonstrated

• Multiple Types: Success, error, warning, info, and custom types
• Flexible Positioning: All 6 positioning options with per-notification overrides
• Configuration: Dynamic offset, max notifications, and timeouts
• Global State: Composable-based state management
• Auto-dismiss: Configurable timeouts with persistent options
• Custom Icons: Support for SVG and emoji icons
• Stack Management: Multiple notifications grouped by position with proper ordering
• Per-Notification Options: Override position and offset for individual notifications

Component Integration

<template>
  <div>
    <!-- Your app content -->
    <button @click="showNotification">Show Toast</button>
    
    <!-- Toast component - place once in your app -->
    <OToast />
  </div>
</template>

<script setup>
import { useToast } from '@/composables/useToastComposable'
import OToast from '@/components/OToast.vue'

const { success } = useToast()

const showNotification = () => {
  success('Hello from toast!')
}
</script>

The new implementation provides a much more flexible and powerful toast system using Vue's Composition API!