# PrimeVue Toast
- [Official documentation link](https://primevue.org/toast/)

# Usage
## Integration
In App.vue
```vue
<template>
  <Toast position="bottom-center" />
</template>

<script setup lang="ts">
import { Toast } from '@loophq/sonik/toast';
</script>
```

## Adding
```ts
import { toast } from '@loophq/sonik/toast';

// Call anywhere in the app
toast.add(toast: ToastMessageOptions);

// or any of the helper functions (toast.success, toast.info, toast.error, toast.warn, toast.secondary, toast.contrast)
toast.success({ detail: 'Success message.' })
```

## Removing
```ts
const toastObj: ToastMessageOptions = {
  severity: 'info',
  detail: 'Message Content'
};

// add and get the toast ID
const toastIdToRemove = toast.add(testObj);
// or
const toastIdToRemove = toast.info({ detail: toastObj.detail });

// and then remove by using that ID
toast.remove(toastIdToRemove);
```

## To use different position
```ts
// Place in your component.
<Toast group="my-group" position="top-left"/>

// Call by passing `group`
 toast.add({ ...toastObj, group: 'my-group' })
```

# What's different
- `useToast` is not exposed since it only works inside Vue components.
  - Use `import { toast } from '@loophq/sonik/toast'` both inside **and** outside Vue components.
  - `toast` includes helper functions (see `components/messages/toast/service.ts`).
- `toast.add` (and helper methods) plus `toast.remove` support removing by **ID** (see *Removing*).


# Guidelines
- Use `life: 4000` for **success** and **info** toasts.
  Errors and warnings are **sticky** (no `life` option).
  - Using `.success()`, `.info()`, `.error()`, or `.warn()` helpers automatically applies this.
- Default `position`: `'bottom-center'`