Toast

import { MtToast } from '@/components/feedback-indicator/mt-toast/mt-toast.vue';

interface Toast {
  id: number | string;
  msg: string;                          // Toast message
  type: 'informal' | 'critical' | 'positive';  // Toast type
  icon?: string;                        // Optional icon name
  action?: {                            // Optional action button
    label: string;                      // Button label
    callback: () => void;               // Click callback
  };
  dismissible?: boolean;                // Allow manual close
}

<template>
  <div>
    <mt-button @click="showToast">Show Toast</mt-button>
    <mt-toast :toasts="toasts" @remove-toast="removeToast" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { MtToast } from '@/components/feedback-indicator/mt-toast/mt-toast.vue';

const toasts = ref([]);

const showToast = () => {
  toasts.value.unshift({
    id: Date.now(),
    msg: 'Operation completed successfully!',
    type: 'positive'
  });
};

const removeToast = (toastId) => {
  toasts.value = toasts.value.filter(t => t.id !== toastId);
};
</script>

<script setup>
const showIconToast = () => {
  toasts.value.unshift({
    id: Date.now(),
    msg: 'New message received',
    type: 'informal',
    icon: 'solid-envelope'
  });
};
</script>

<script setup>
const showActionToast = () => {
  toasts.value.unshift({
    id: Date.now(),
    msg: 'File uploaded successfully',
    type: 'positive',
    action: {
      label: 'View',
      callback: () => {
        console.log('View file clicked');
        // Navigate to file or perform action
      }
    }
  });
};
</script>

<script setup>
const showDismissibleToast = () => {
  toasts.value.unshift({
    id: Date.now(),
    msg: 'Your session will expire soon',
    type: 'informal',
    dismissible: true
  });
};
</script>

<script setup>
const showCriticalToast = () => {
  toasts.value.unshift({
    id: Date.now(),
    msg: 'Failed to save changes',
    type: 'critical',
    dismissible: true,
    action: {
      label: 'Retry',
      callback: () => {
        // Retry the operation
        console.log('Retrying...');
      }
    }
  });
};
</script>

<script setup>
const showVariousToasts = () => {
  // Quick toast (center)
  toasts.value.unshift({
    id: 'quick-1',
    msg: 'Quick notification',
    type: 'informal'
  });
  
  // Positive with action (right)
  toasts.value.unshift({
    id: 'action-1',
    msg: 'Task completed',
    type: 'positive',
    action: {
      label: 'Details',
      callback: () => console.log('Show details')
    }
  });
  
  // Critical dismissible (right)
  toasts.value.unshift({
    id: 'critical-1',
    msg: 'Connection lost',
    type: 'critical',
    dismissible: true
  });
};
</script>