Services & Composables

/**
 * Vue 3 composable for toast notifications
 */
import { useToast } from "primevue/usetoast";

interface ToastServiceMethods {
  /**
   * Displays a new toast notification
   */
  add(message: ToastMessage): void;
  
  /**
   * Removes a specific toast by message object
   */
  remove(message: ToastMessage): void;
  
  /**
   * Removes a toast by group name
   */
  removeGroup(group: string): void;
  
  /**
   * Removes all toast notifications
   */
  removeAllGroups(): void;
}

function useToast(): ToastServiceMethods;

interface ToastMessage {
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
  summary?: string;
  detail?: string;
  life?: number;
  closable?: boolean;
  group?: string;
  styleClass?: string;
  contentStyleClass?: string;
}

<script setup>
import { useToast } from 'primevue/usetoast';

const toast = useToast();

const showSuccess = () => {
  toast.add({
    severity: 'success',
    summary: 'Success Message',
    detail: 'Message Content',
    life: 3000
  });
};

const showError = () => {
  toast.add({
    severity: 'error',
    summary: 'Error Message',
    detail: 'Something went wrong',
    life: 5000
  });
};
</script>

/**
 * Vue 3 composable for confirmation dialogs
 */
import { useConfirm } from "primevue/useconfirm";

interface ConfirmationServiceMethods {
  /**
   * Shows a confirmation dialog
   */
  require(options: ConfirmationOptions): void;
  
  /**
   * Closes the confirmation dialog
   */
  close(): void;
}

function useConfirm(): ConfirmationServiceMethods;

interface ConfirmationOptions {
  message?: string;
  group?: string;
  icon?: string;
  header?: string;
  accept?: () => void;
  reject?: () => void;
  acceptLabel?: string;
  rejectLabel?: string;
  acceptIcon?: string;
  rejectIcon?: string;
  acceptClass?: string;
  rejectClass?: string;
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
  blockScroll?: boolean;
  defaultFocus?: "accept" | "reject" | "none";
}

<script setup>
import { useConfirm } from 'primevue/useconfirm';

const confirm = useConfirm();

const confirmDelete = () => {
  confirm.require({
    message: 'Do you want to delete this record?',
    header: 'Delete Confirmation',
    icon: 'pi pi-info-circle',
    rejectClass: 'p-button-text p-button-text',
    acceptClass: 'p-button-danger p-button-text',
    accept: () => {
      // Delete logic
    },
    reject: () => {
      // Cancel logic
    }
  });
};
</script>

/**
 * Vue 3 composable for dynamic dialogs
 */
import { useDialog } from "primevue/usedialog";

interface DialogServiceMethods {
  /**
   * Opens a dynamic dialog with specified component
   */
  open(component: any, options?: DynamicDialogOptions): DynamicDialogInstance;
}

function useDialog(): DialogServiceMethods;

interface DynamicDialogOptions {
  data?: object;
  props?: object;
  header?: string;
  style?: any;
  class?: string;
  contentStyle?: any;
  contentClass?: string;
  modal?: boolean;
  closable?: boolean;
  dismissableMask?: boolean;
  closeOnEscape?: boolean;
  showHeader?: boolean;
  baseZIndex?: number;
  autoZIndex?: boolean;
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
  maximizable?: boolean;
  breakpoints?: object;
  draggable?: boolean;
  resizable?: boolean;
  minX?: number;
  minY?: number;
  keepInViewport?: boolean;
  appendTo?: string;
  blockScroll?: boolean;
  onClose?: (options: DynamicDialogCloseOptions) => void;
  onMaximize?: (options: DynamicDialogMaximizeOptions) => void;
  onUnmaximize?: (options: DynamicDialogMaximizeOptions) => void;
  onDragStart?: (event: Event) => void;
  onDragEnd?: (event: Event) => void;
  onResizeStart?: (event: Event) => void;
  onResizeEnd?: (event: Event) => void;
}

interface DynamicDialogInstance {
  data: any;
  options: DynamicDialogOptions;
  close: (params?: any) => void;
}

/**
 * Vue plugin for toast notifications
 */
import ToastService from "primevue/toastservice";

// Plugin installation
app.use(ToastService);

// Usage in Options API
this.$toast.add(message);
this.$toast.remove(message);
this.$toast.removeGroup(group);
this.$toast.removeAllGroups();

/**
 * Vue plugin for confirmation dialogs
 */
import ConfirmationService from "primevue/confirmationservice";

// Plugin installation
app.use(ConfirmationService);

// Usage in Options API
this.$confirm.require(options);
this.$confirm.close();

/**
 * Vue plugin for dynamic dialogs
 */
import DialogService from "primevue/dialogservice";

// Plugin installation
app.use(DialogService);

// Usage in Options API
const dialogRef = this.$dialog.open(MyComponent, {
  header: 'Dynamic Dialog',
  modal: true,
  data: { userId: 123 }
});

/**
 * Service for terminal command processing
 */
import TerminalService from "primevue/terminalservice";

interface TerminalServiceMethods {
  /**
   * Registers a command handler
   */
  on(command: string, handler: (text: string) => void): void;
  
  /**
   * Removes a command handler
   */
  off(command: string, handler?: (text: string) => void): void;
  
  /**
   * Emits a response to the terminal
   */
  emit(command: string, parameters?: any): void;
}

import TerminalService from 'primevue/terminalservice';

// Register command handlers
TerminalService.on('greet', (text) => {
  const name = text.split(' ')[1];
  TerminalService.emit('response', `Hello ${name || 'World'}!`);
});

TerminalService.on('date', () => {
  TerminalService.emit('response', new Date().toDateString());
});

TerminalService.on('clear', () => {
  TerminalService.emit('clear');
});

/**
 * Event bus for toast notifications
 */
import ToastEventBus from "primevue/toasteventbus";

interface ToastEventBusInterface {
  emit(event: string, ...args: any[]): void;
  on(event: string, handler: (...args: any[]) => void): void;
  off(event: string, handler?: (...args: any[]) => void): void;
}

/**
 * Event bus for confirmation dialogs
 */
import ConfirmationEventBus from "primevue/confirmationeventbus";

interface ConfirmationEventBusInterface {
  emit(event: string, ...args: any[]): void;
  on(event: string, handler: (...args: any[]) => void): void;
  off(event: string, handler?: (...args: any[]) => void): void;
}

/**
 * Event bus for dynamic dialogs
 */
import DynamicDialogEventBus from "primevue/dynamicdialogeventbus";

interface DynamicDialogEventBusInterface {
  emit(event: string, ...args: any[]): void;
  on(event: string, handler: (...args: any[]) => void): void;
  off(event: string, handler?: (...args: any[]) => void): void;
}

/**
 * Event bus for overlay components
 */
import OverlayEventBus from "primevue/overlayeventbus";

interface OverlayEventBusInterface {
  emit(event: string, ...args: any[]): void;
  on(event: string, handler: (...args: any[]) => void): void;
  off(event: string, handler?: (...args: any[]) => void): void;
}

<template>
  <div>
    <!-- Toast container -->
    <Toast />
    
    <!-- Confirmation dialog -->
    <ConfirmDialog />
    
    <!-- Dynamic dialog container -->
    <DynamicDialog />
    
    <!-- Your app content -->
    <Button @click="showToast" label="Show Toast" />
    <Button @click="confirmAction" label="Confirm Action" />
    <Button @click="openDialog" label="Open Dialog" />
  </div>
</template>

<script setup>
import { useToast, useConfirm, useDialog } from 'primevue';
import Toast from 'primevue/toast';
import ConfirmDialog from 'primevue/confirmdialog';
import DynamicDialog from 'primevue/dynamicdialog';
import Button from 'primevue/button';
import MyDialogComponent from './MyDialogComponent.vue';

const toast = useToast();
const confirm = useConfirm();
const dialog = useDialog();

const showToast = () => {
  toast.add({
    severity: 'success',
    summary: 'Success',
    detail: 'Message sent successfully',
    life: 3000
  });
};

const confirmAction = () => {
  confirm.require({
    message: 'Are you sure you want to proceed?',
    header: 'Confirmation',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
    },
    reject: () => {
      toast.add({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
    }
  });
};

const openDialog = () => {
  const dialogRef = dialog.open(MyDialogComponent, {
    header: 'Dynamic Component',
    style: { width: '50vw' },
    breakpoints: { '960px': '75vw', '641px': '90vw' },
    modal: true,
    data: { message: 'Hello from parent!' }
  });
};
</script>

// Dynamic dialog types
interface DynamicDialogCloseOptions {
  data?: any;
  type?: string;
}

interface DynamicDialogMaximizeOptions {
  originalEvent: Event;
  maximized: boolean;
}

// Toast severity levels
type ToastSeverity = "success" | "info" | "warn" | "error" | "secondary" | "contrast";

// Confirmation positions
type ConfirmationPosition = "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";

// Service symbols for dependency injection
declare const PrimeVueToastSymbol: InjectionKey<ToastServiceMethods>;
declare const PrimeVueConfirmSymbol: InjectionKey<ConfirmationServiceMethods>;
declare const PrimeVueDialogSymbol: InjectionKey<DialogServiceMethods>;