BPM SuperApp Dev's Docs

Appearance

Vue SaToast ​

Vue 3 toast notification library dengan TypeScript support, auto-dismiss timer, dan default Bahasa Indonesia titles

Versi: 0.1.10
Kategori: UI Component (Vue 3)

npm versionTypeScriptVueTailwind CSS

MVP LIBRARY

Library ini di-extract dari family project. Styling tightly coupled dengan parent project dan mengharuskan class definitions tertentu. Lihat Styling untuk detail.

TL;DR ​

Vue 3 toast notification system dengan 4 toast types (info, success, error, warning), configurable duration/delay timers, dan smooth slide animations. Default titles dalam Bahasa Indonesia dengan opsi customization penuh.

Components:

ts
import { ToastContainer } from '@bpmlib/vue-satoast';

Global API:

ts
import { saToast } from '@bpmlib/vue-satoast';

saToast('Info message');
saToast.success('Success!');
saToast.error('Error occurred');
saToast.warning('Warning!');
saToast.dismiss('toast-id');

Plugin:

ts
import { ToastPlugin } from '@bpmlib/vue-satoast';

Installation & Setup ​

Requirements ​

Peer Dependencies ​

Library ini memerlukan peer dependencies berikut:

Wajib:

bash
npm install vue@^3.3.0
npm install @fortawesome/fontawesome-svg-core@^6.0.0
npm install @fortawesome/free-solid-svg-icons@^6.0.0
npm install @fortawesome/vue-fontawesome@^3.1.0
DependencyVersiStatusDeskripsi
vue^3.3.0RequiredVue 3 framework
@fortawesome/fontawesome-svg-core^6.0.0 | ^7.0.0RequiredFontAwesome core
@fortawesome/free-solid-svg-icons^6.0.0 | ^7.0.0RequiredFontAwesome solid icons
@fortawesome/vue-fontawesome^3.1.0RequiredFontAwesome Vue component

Package Installation ​

bash
npm install @bpmlib/vue-satoast
bash
yarn add @bpmlib/vue-satoast
bash
pnpm add @bpmlib/vue-satoast
bash
bun install @bpmlib/vue-satoast

Import ​

Component Import:

ts
import { ToastContainer, saToast } from '@bpmlib/vue-satoast';

CSS Import:

ts
import '@bpmlib/vue-satoast/style.css';

Plugin Setup ​

Vue Plugin (Optional):

Plugin ini memungkinkan akses toast via this.$saToast (Options API) atau inject() (Composition API).

ts
// main.ts
import { createApp } from 'vue';
import { ToastPlugin } from '@bpmlib/vue-satoast';

const app = createApp(App);
app.use(ToastPlugin);

What Gets Registered:

  • this.$saToast - Available in Options API
  • inject('saToast') - Available in Composition API

Catatan: Plugin bersifat opsional. Kamu bisa langsung import saToast tanpa menggunakan plugin.

FontAwesome Setup ​

Setup required icons:

ts
// main.ts
import { library } from '@fortawesome/fontawesome-svg-core';
import { 
  faCheckCircle,    // success icon
  faTimesCircle,    // error icon
  faInfoCircle,     // info icon
  faExclamationCircle, // warning icon
  faTimes,          // close button icon
  faClock           // delay countdown icon
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(
  faCheckCircle,
  faTimesCircle,
  faInfoCircle,
  faExclamationCircle,
  faTimes,
  faClock
);

app.component('FontAwesomeIcon', FontAwesomeIcon);

Quick Start ​

Basic Usage ​

Setup minimal untuk menggunakan toast notifications:

vue
<!-- App.vue -->
<script setup lang="ts">
import { ToastContainer, saToast } from '@bpmlib/vue-satoast';
import '@bpmlib/vue-satoast/style.css';

const showToast = () => {
  saToast.success('Operation completed successfully!');
};
</script>

<template>
  <div id="app">
    <button @click="showToast">Show Toast</button>
    
    <!-- Place ToastContainer at root level -->
    <ToastContainer />
  </div>
</template>

Key Points:

  • Import CSS di component atau main.ts
  • Place ToastContainer di root level (biasanya App.vue)
  • Gunakan saToast global API dari anywhere dalam app

Comprehensive Example ​

Full-featured example dengan semua toast types dan options:

vue
<script setup lang="ts">
import { ToastContainer, saToast } from '@bpmlib/vue-satoast';
import '@bpmlib/vue-satoast/style.css';

// Different toast types
const showInfo = () => {
  saToast('This is an informational message');
};

const showSuccess = () => {
  saToast.success('Data saved successfully!', {
    duration: 3  // Auto-dismiss after 3 seconds
  });
};

const showError = () => {
  saToast.error('Failed to connect to server', {
    duration: 10,  // Show longer for errors
    delay: 2       // Disable close button for 2 seconds
  });
};

const showWarning = () => {
  saToast.warning('Your session will expire soon', {
    title: 'Session Warning',  // Custom title
    duration: 8
  });
};

// Multiple messages
const showValidationErrors = () => {
  saToast.error([
    'Email is required',
    'Password must be at least 8 characters',
    'Phone number format is invalid'
  ], {
    title: 'Validation Failed',
    duration: 15
  });
};
</script>

<template>
  <div class="demo-container">
    <h1>Toast Notifications Demo</h1>
    
    <div class="button-group">
      <button @click="showInfo">Info</button>
      <button @click="showSuccess">Success</button>
      <button @click="showError">Error</button>
      <button @click="showWarning">Warning</button>
      <button @click="showValidationErrors">Validation Errors</button>
    </div>
    
    <ToastContainer />
  </div>
</template>

Core Concepts ​

Library ini built dengan beberapa konsep fundamental yang mempengaruhi cara kerja toast notifications.

Toast Type System ​

Library menyediakan 4 toast types dengan color scheme dan icon berbeda:

Available Types:

  • info - Informational messages (blue, info-circle icon)
  • success - Success confirmations (green, check-circle icon)
  • error - Error messages (red, times-circle icon)
  • warning - Warning alerts (yellow, exclamation-circle icon)

Setiap type memiliki default title dalam Bahasa Indonesia yang bisa di-override via options.

Default Titles:

  • info → "Informasi"
  • success → "Berhasil"
  • error → "Kesalahan"
  • warning → "Peringatan"

Delay vs Duration Mechanism ​

Toast memiliki 2 independent timers yang mengontrol behavior berbeda:

How it works:

  1. Toast appears - Slide in dari bottom
  2. Delay Phase (if delay > 0):
    • Clock icon (⏰) ditampilkan
    • Close button disabled
    • Delay countdown berjalan
    • User tidak bisa manually dismiss
  3. Duration Phase (after delay expires):
    • Close button (×) menjadi aktif
    • Duration countdown berjalan
    • User bisa manually dismiss
  4. Auto-dismiss - Toast hilang setelah duration habis

Visual Flow:

[Toast appears]
    ↓
[delay > 0?] → YES → [⏰ Clock icon] → [Delay countdown] 
    ↓                                         ↓
    NO                                 [Delay expires]
    ↓                                         ↓
[× Close button active] ← ← ← ← ← ← ← ← ← ← ←
    ↓
[Duration countdown]
    ↓
[Auto-dismiss OR Manual close]

Use Cases:

  • delay: 0 (default) - User bisa langsung close toast
  • delay: 2 - Force user membaca message selama 2 detik sebelum bisa close
  • duration: 5 (default) - Auto-dismiss setelah 5 detik
  • duration: 999 - Virtually permanent (user must manually close)

Example:

ts
// Critical error - force reading for 3 seconds, show for 15 seconds total
saToast.error('Database connection lost', {
  delay: 3,      // Can't close for 3 seconds
  duration: 15   // Auto-dismiss after 15 seconds
});

// Quick success - immediate close, short duration
saToast.success('Saved!', {
  delay: 0,      // Can close immediately
  duration: 2    // Auto-dismiss after 2 seconds
});

Global Reactive Queue ​

Toast notifications dikelola dalam central reactive queue yang shared across entire application.

How it works:

  • Semua toast di-store dalam Map<string, ToastItem>
  • Setiap toast memiliki unique ID: timestamp-counter-index
  • Queue bersifat reactive - UI auto-update saat toast ditambah/dihapus
  • Multiple components bisa trigger toast, semua render di satu ToastContainer

Implications:

  • Hanya perlu satu <ToastContainer /> per aplikasi
  • Toast bisa di-trigger dari any component, any depth
  • State management built-in - tidak perlu external state library
  • Toast order: newest at bottom (FIFO display)

Example:

ts
// Component A
saToast.success('Login successful');

// Component B (different route)
saToast.error('Failed to load data');

// Both toasts appear di same ToastContainer
// Queue manages timing, positioning, animations automatically

Animation System ​

Library includes built-in CSS animations untuk smooth toast behavior:

Enter Animation:

  • Slide up dari bottom (translateY(30px) → 0)
  • Fade in (opacity: 0 → 1)
  • Duration: 250ms
  • Easing: cubic-bezier(0.25, 1, 0.5, 1)

Leave Animation:

  • Slide left (translateX(0 → -30%))
  • Fade out (opacity: 1 → 0)
  • Duration: 300ms
  • Easing: cubic-bezier(0.68, -0.55, 0.265, 1.55) (bounce effect)

Move Animation:

  • Smooth repositioning saat toast dihapus
  • Other toasts slide ke posisi baru
  • Duration: 250ms

Animations bisa di-customize via CSS variables atau override .satoast-* classes.

API Reference ​

Global API ​

Global saToast function dan methods untuk trigger toast notifications.

saToast() ​

Display toast notification dengan default 'info' type.

Signature:

ts
saToast(message: string | ToastItem, options?: ToastOptions): void

Parameters

NameTypeDefaultDescription
messagestring | ToastItem-Message content atau toast item object
optionsToastOptions{}Optional configuration Lihat selengkapnya

Contoh:

ts
// Simple message
saToast('Hello world!');

// With options
saToast('Custom message', { 
  duration: 3, 
  title: 'Notice' 
});

// With ToastItem object
saToast({
  content: 'Full control',
  type: 'info',
  duration: 5,
  delay: 1,
  title: 'Custom'
});

saToast.success() ​

Display success toast notification dengan green color scheme.

Signature:

ts
saToast.success(message: string | ToastItem, options?: ToastOptions): void

Parameters

NameTypeDefaultDescription
messagestring | ToastItem-Message content
optionsToastOptions{}Optional configuration Lihat selengkapnya

Contoh:

ts
saToast.success('Operation completed!');
saToast.success('Saved!', { duration: 3 });
saToast.success('Data synced', { 
  title: 'Sync Complete',
  duration: 2 
});

saToast.error() ​

Display error toast notification dengan red color scheme.

Signature:

ts
saToast.error(message: string | ToastItem, options?: ToastOptions): void

Parameters

NameTypeDefaultDescription
messagestring | ToastItem-Message content
optionsToastOptions{}Optional configuration Lihat selengkapnya

Contoh:

ts
saToast.error('Something went wrong!');
saToast.error('Failed to save', { duration: 10 });
saToast.error(['Error 1', 'Error 2'], {
  title: 'Multiple Errors',
  duration: 15
});

saToast.warning() ​

Display warning toast notification dengan yellow color scheme.

Signature:

ts
saToast.warning(message: string | ToastItem, options?: ToastOptions): void

Parameters

NameTypeDefaultDescription
messagestring | ToastItem-Message content
optionsToastOptions{}Optional configuration Lihat selengkapnya

Contoh:

ts
saToast.warning('Please check your input');
saToast.warning('Low disk space', { duration: 8 });
saToast.warning('Session expiring', {
  delay: 2,
  duration: 10
});

saToast.info() ​

Display info toast notification dengan blue color scheme.

Signature:

ts
saToast.info(message: string | ToastItem, options?: ToastOptions): void

Parameters

NameTypeDefaultDescription
messagestring | ToastItem-Message content
optionsToastOptions{}Optional configuration Lihat selengkapnya

Contoh:

ts
saToast.info('Did you know...');
saToast.info('Tip of the day', { duration: 8 });
saToast.info('Update available', {
  title: 'New Version',
  duration: 999  // User must manually close
});

saToast.dismiss() ​

Dismiss/remove toast notification by its ID.

Signature:

ts
saToast.dismiss(id: string): void

Parameters

NameTypeDefaultDescription
idstring-Unique identifier of toast to dismiss

Contoh:

ts
// Manually dismiss specific toast
saToast.dismiss('1703251234567-1');

// Note: Current implementation doesn't return toast ID
// Typically used with custom toast tracking

Catatan: Current implementation tidak return toast ID dari saToast() calls. Method ini tersedia untuk advanced use cases dengan custom ID tracking.

Components ​

ToastContainer ​

Container component yang me-render semua active toast notifications. Secara internal menggunakan Toast component untuk setiap individual toast item.

Cara Penggunaan:

Place component ini di root level aplikasi (biasanya App.vue). Hanya perlu satu instance per aplikasi.

vue
<template>
  <div id="app">
    <router-view />
    <ToastContainer />
  </div>
</template>

<script setup>
import { ToastContainer } from '@bpmlib/vue-satoast';
</script>

Props

Component tidak menerima props apapun.

Events

Component tidak emit events apapun.

Slots

Component tidak memiliki slots.

Exposed

Component expose methods dan properties berikut via template refs:

NameTypeDescription
pushIntoQueueFunction[DEPRECATED] Push toast ke queue. Gunakan saToast API untuk new code Lihat selengkapnya
handleClose(id: string) => voidManually close toast by ID
mailQueueReadonlyMap<string, ToastItem>Read-only access ke reactive toast queue
pushIntoQueue ​

DEPRECATED

Method ini deprecated untuk new code. Gunakan global saToast API sebagai gantinya. Method ini kept untuk backward compatibility dengan legacy code.

Function untuk push toast ke queue secara programmatic via component ref.

Signature:

ts
pushIntoQueue(
  content: string | ToastItem | (string | ToastItem)[],
  type?: 'info' | 'success' | 'error' | 'warning',
  options?: ToastOptions,
  id?: string | null
): void

Legacy Usage:

vue
<script setup>
import { ref } from 'vue';
import { ToastContainer } from '@bpmlib/vue-satoast';

const toastContainer = ref(null);

function showLegacyToast() {
  // ⚠️ DEPRECATED: Use saToast.success() instead
  toastContainer.value.pushIntoQueue('Legacy message', 'success', {
    duration: 5,
    title: 'Success'
  });
}
</script>

<template>
  <ToastContainer ref="toastContainer" />
  <button @click="showLegacyToast">Show Toast (Legacy)</button>
</template>

Recommended Alternative:

vue
<script setup>
import { saToast } from '@bpmlib/vue-satoast';

function showModernToast() {
  // ✅ RECOMMENDED: Use global API
  saToast.success('Modern message', { duration: 5 });
}
</script>

<template>
  <ToastContainer />
  <button @click="showModernToast">Show Toast</button>
</template>

Note: Internal Toast component tidak perlu digunakan langsung - ToastContainer automatically manage rendering dan lifecycle.

Plugin ​

ToastPlugin ​

Vue plugin untuk inject saToast globally ke aplikasi.

Installation:

ts
// main.ts
import { createApp } from 'vue';
import { ToastPlugin } from '@bpmlib/vue-satoast';

const app = createApp(App);
app.use(ToastPlugin);

What Gets Registered:

  • app.config.globalProperties.$saToast - Untuk Options API
  • app.provide('saToast') - Untuk Composition API via inject()

Usage in Options API:

vue
<script>
export default {
  methods: {
    handleSuccess() {
      this.$saToast.success('Done!');
    }
  }
}
</script>

Usage in Composition API:

vue
<script setup>
import { inject } from 'vue';

const saToast = inject('saToast');

const handleSuccess = () => {
  saToast.success('Done!');
};
</script>

Alternative: Import saToast langsung tanpa plugin untuk cleaner code:

vue
<script setup>
import { saToast } from '@bpmlib/vue-satoast';

saToast.success('No plugin needed!');
</script>

Types ​

ToastItem ​

Complete structure of a toast notification.

ts
interface ToastItem {
  content: string;
  type: 'info' | 'success' | 'error' | 'warning';
  duration: number;
  delay: number;
  title: string;
}

Interface ini represent satu toast notification dengan semua properties required.

Contains:

content ​
ts
content: string

Main message content yang ditampilkan di body toast.

Contoh:

ts
const toast: ToastItem = {
  content: 'Your changes have been saved successfully',
  type: 'success',
  duration: 5,
  delay: 0,
  title: 'Success'
};
type ​
ts
type: 'info' | 'success' | 'error' | 'warning'

Toast type yang menentukan color scheme dan icon.

Values:

  • 'info' - Blue color, info-circle icon
  • 'success' - Green color, check-circle icon
  • 'error' - Red color, times-circle icon
  • 'warning' - Yellow color, exclamation-circle icon

Contoh:

ts
const errorToast: ToastItem = {
  content: 'Failed to connect',
  type: 'error',  // Red color scheme
  duration: 10,
  delay: 0,
  title: 'Connection Error'
};
duration ​
ts
duration: number

Duration dalam detik sebelum toast automatically dismiss. Countdown dimulai setelah delay phase selesai.

Default: 5 (when using saToast API)

Contoh:

ts
// Quick notification (2 seconds)
const quickToast: ToastItem = {
  content: 'Copied!',
  type: 'success',
  duration: 2,
  delay: 0,
  title: 'Success'
};

// Persistent notification (999 seconds ~ permanent)
const persistentToast: ToastItem = {
  content: 'Click to close',
  type: 'info',
  duration: 999,
  delay: 0,
  title: 'Notice'
};
delay ​
ts
delay: number

Delay dalam detik sebelum close button menjadi enabled dan duration countdown dimulai. Selama delay phase, close button disabled dan clock icon ditampilkan.

Default: 0 (when using saToast API)

Contoh:

ts
// Force reading for 3 seconds
const criticalToast: ToastItem = {
  content: 'Database backup in progress. Do not close the app.',
  type: 'warning',
  duration: 10,
  delay: 3,  // User can't close for 3 seconds
  title: 'Critical Operation'
};

Use Case: Gunakan delay untuk force user membaca critical messages sebelum bisa dismiss.

title ​
ts
title: string

Title/header text yang ditampilkan di top toast.

Default Titles (Bahasa Indonesia):

  • 'info' → 'Informasi'
  • 'success' → 'Berhasil'
  • 'error' → 'Kesalahan'
  • 'warning' → 'Peringatan'

Contoh:

ts
// Custom English title
const customToast: ToastItem = {
  content: 'User profile updated',
  type: 'success',
  duration: 5,
  delay: 0,
  title: 'Profile Update'  // Override default "Berhasil"
};

ToastOptions ​

Configuration options untuk creating toast notification via saToast API.

ts
type ToastOptions = {
  title?: string;
  duration?: number;
  delay?: number;
}

Semua properties bersifat optional. Jika omitted, default values digunakan.

Contains:

title ​
ts
title?: string

Optional custom title. Jika omitted, default title dalam Bahasa Indonesia digunakan based on toast type.

Default Values:

  • 'info' → 'Informasi'
  • 'success' → 'Berhasil'
  • 'error' → 'Kesalahan'
  • 'warning' → 'Peringatan'

Contoh:

ts
// Use default title
saToast.success('Data saved');  // Title: "Berhasil"

// Custom title
saToast.success('Data saved', { 
  title: 'Save Complete' 
});  // Title: "Save Complete"
duration ​
ts
duration?: number

Optional duration dalam detik. Jika omitted, default 5 seconds digunakan.

Default: 5

Contoh:

ts
// Quick toast (2 seconds)
saToast.success('Copied!', { duration: 2 });

// Long toast (15 seconds)
saToast.error('Server error details...', { duration: 15 });

// Virtually permanent
saToast.info('Click to dismiss', { duration: 999 });
delay ​
ts
delay?: number

Optional delay dalam detik sebelum close button enabled. Jika omitted, default 0 (no delay) digunakan.

Default: 0

Contoh:

ts
// No delay - can close immediately
saToast.success('Done!');  // delay: 0

// 2-second delay
saToast.warning('Read this carefully', { 
  delay: 2,
  duration: 10 
});

Use Case: Force user membaca critical messages untuk beberapa detik sebelum bisa dismiss.

GlobalToastAPI ​

Global toast function interface dengan all available methods.

ts
interface GlobalToastAPI {
  (message: string | ToastItem, options?: ToastOptions): void;
  success(message: string | ToastItem, options?: ToastOptions): void;
  error(message: string | ToastItem, options?: ToastOptions): void;
  warning(message: string | ToastItem, options?: ToastOptions): void;
  info(message: string | ToastItem, options?: ToastOptions): void;
  dismiss(id: string): void;
}

Interface ini represent saToast object yang di-export dari library.

Available Methods:

  • saToast() - Default call (info type)
  • saToast.success() - Success toast
  • saToast.error() - Error toast
  • saToast.warning() - Warning toast
  • saToast.info() - Info toast (explicit)
  • saToast.dismiss() - Dismiss by ID

Contoh:

ts
import { saToast } from '@bpmlib/vue-satoast';
import type { GlobalToastAPI } from '@bpmlib/vue-satoast';

// Type annotation (optional)
const toast: GlobalToastAPI = saToast;

// Usage
toast('Default info');
toast.success('Success!');
toast.error('Error!');
toast.warning('Warning!');
toast.info('Info!');
toast.dismiss('toast-id');

Examples ​

Contains:

1. Basic Toast Usage ​

Menggunakan saToast global API untuk semua toast types.

ts
import { saToast } from '@bpmlib/vue-satoast';

// Info (default type)
saToast('This is an informational message');

// Success
saToast.success('Operation completed successfully!');

// Error
saToast.error('Something went wrong!');

// Warning
saToast.warning('Please check your input');

// Info (explicit)
saToast.info('Did you know you can customize toast options?');

Key Takeaways:

  • Default call (saToast()) menggunakan type 'info'
  • Setiap type memiliki default title dalam Bahasa Indonesia
  • Icon dan color scheme automatically selected based on type

2. Custom Options ​

Customize duration, delay, dan title untuk setiap toast notification.

ts
import { saToast } from '@bpmlib/vue-satoast';

// Custom duration - auto-dismiss after 3 seconds
saToast.success('Quick notification', { duration: 3 });

// Custom delay - close button disabled for 2 seconds
saToast.warning('Critical warning - please read!', { 
  delay: 2,      // Can't close for 2 seconds
  duration: 10   // Then auto-dismiss after 10 seconds
});

// Custom title - override default Bahasa Indonesia
saToast.info('System maintenance scheduled for tonight', { 
  title: 'System Update',  // Instead of "Informasi"
  duration: 8
});

// All options combined
saToast.error('Database connection lost. Attempting to reconnect...', {
  title: 'Connection Error',  // Custom title
  duration: 15,               // Show for 15 seconds
  delay: 3                    // Force reading for 3 seconds
});

// Very long duration (virtually permanent)
saToast.info('This toast will stay until you close it manually', {
  duration: 999,  // ~16 minutes
  title: 'Persistent Notice'
});

Key Takeaways:

  • duration - How long toast shows after delay expires
  • delay - How long close button is disabled (clock icon phase)
  • title - Override default Bahasa Indonesia titles
  • Combine options untuk control complete toast behavior

3. Array Messages ​

Display multiple toast notifications sekaligus dengan single call.

ts
import { saToast } from '@bpmlib/vue-satoast';

// Multiple error messages
saToast.error([
  'Email is required',
  'Password must be at least 8 characters',
  'Phone number format is invalid'
]);

// With custom options (applies to all toasts)
saToast.warning(
  [
    'Low disk space (< 10% remaining)',
    'Memory usage is high (> 90%)',
    'CPU temperature is elevated'
  ],
  { 
    duration: 10,
    title: 'System Alerts'
  }
);

// Success confirmations
saToast.success([
  'Profile updated',
  'Email verified',
  'Password changed'
], {
  duration: 3
});

Key Takeaways:

  • Setiap message di-render sebagai separate toast dengan unique ID
  • Options diterapkan ke semua toast dalam array
  • Toasts appear dengan slight stagger (milliseconds apart)
  • Useful untuk validation errors atau batch notifications

Catatan: Untuk very large arrays (10+ items), consider alternative UI patterns seperti notification panel atau modal.

4. Plugin Integration ​

Menggunakan ToastPlugin untuk akses toast via Vue's Options API atau Composition API injection.

Setup:

ts
// main.ts
import { createApp } from 'vue';
import { ToastPlugin, ToastContainer } from '@bpmlib/vue-satoast';
import App from './App.vue';

const app = createApp(App);

// Install plugin globally
app.use(ToastPlugin);

app.mount('#app');

Options API Usage:

vue
<script>
export default {
  methods: {
    handleSubmit() {
      // Access via this.$saToast
      this.$saToast.success('Form submitted successfully!');
    },
    
    handleError() {
      this.$saToast.error('Validation failed', { 
        duration: 10 
      });
    },
    
    showCustomToast() {
      this.$saToast.warning('Session will expire in 5 minutes', {
        title: 'Session Warning',
        duration: 15,
        delay: 2
      });
    }
  }
}
</script>

<template>
  <div>
    <button @click="handleSubmit">Submit</button>
    <button @click="handleError">Show Error</button>
    <button @click="showCustomToast">Show Warning</button>
  </div>
</template>

Composition API Usage:

vue
<script setup>
import { inject } from 'vue';

// Inject saToast instance
const saToast = inject('saToast');

const handleSubmit = () => {
  saToast.success('Form submitted successfully!');
};

const handleError = () => {
  saToast.error('Validation failed', { duration: 10 });
};

const showCustomToast = () => {
  saToast.warning('Session will expire in 5 minutes', {
    title: 'Session Warning',
    duration: 15,
    delay: 2
  });
};
</script>

<template>
  <div>
    <button @click="handleSubmit">Submit</button>
    <button @click="handleError">Show Error</button>
    <button @click="showCustomToast">Show Warning</button>
  </div>
</template>

Alternative - Direct Import (No Plugin):

vue
<script setup>
import { saToast } from '@bpmlib/vue-satoast';

// Use directly without plugin
const handleSubmit = () => {
  saToast.success('Form submitted!');
};
</script>

<template>
  <button @click="handleSubmit">Submit</button>
</template>

Key Takeaways:

  • Options API: Gunakan this.$saToast
  • Composition API: Gunakan inject('saToast')
  • Alternative: Import saToast langsung (cleaner, no plugin needed)
  • Plugin approach useful jika sudah familiar dengan Vue plugin pattern

5. Manual Dismiss ​

Programmatically dismiss toast notifications (advanced use case).

ts
import { saToast } from '@bpmlib/vue-satoast';

// Scenario 1: Loading toast that needs manual control
function processDataWithToast() {
  // Show loading toast
  saToast.info('Processing data...', { 
    duration: 999  // Don't auto-dismiss
  });
  
  // After async operation completes
  setTimeout(() => {
    // In real usage, you'd track the toast ID
    // Current implementation doesn't return ID automatically
    
    // Show completion toast (replaces loading toast visually)
    saToast.success('Processing complete!', { duration: 3 });
  }, 3000);
}

// Scenario 2: Using dismiss method (requires ID tracking)
function manualDismissExample() {
  // Note: Current implementation doesn't return toast ID
  // This shows the concept if ID tracking is added
  
  // Hypothetical usage:
  // const toastId = saToast.info('Click to dismiss');
  // saToast.dismiss(toastId);
  
  // Current workaround: Use short duration instead
  saToast.info('Auto-dismiss in 2 seconds', { duration: 2 });
}

// Scenario 3: Conditional toast replacement
function showConditionalToast(hasError: boolean) {
  if (hasError) {
    saToast.error('Operation failed', { duration: 10 });
  } else {
    saToast.success('Operation successful', { duration: 3 });
  }
}

Key Takeaways:

  • saToast.dismiss(id) method available untuk manual control
  • Current implementation tidak return toast ID dari saToast() calls
  • Untuk most use cases, gunakan duration option untuk control timing
  • Manual dismiss berguna untuk advanced scenarios dengan custom ID tracking

Catatan: Jika butuh precise control over toast lifecycle, consider extending library atau track toast IDs manually via timestamp patterns.

Styling ​

Import CSS ​

Library menyediakan minimal CSS untuk animations dan transitions:

ts
// main.ts atau component
import '@bpmlib/vue-satoast/style.css';

Disediakan:

  • Transition animations (slide in from bottom, slide out to left)
  • Fade in/out effects
  • Move animations untuk repositioning
  • Opacity transitions

TIDAK Disediakan:

  • Colors, spacing, typography
  • Layout structure
  • Component appearance (borders, shadows, backgrounds)
  • Interactive element styling

WARNING

Styling sangat terbatas. Tailwind CSS + parent project class definitions diperlukan untuk tampilan lengkap dan fungsional.

Expected Classes dari Parent Project ​

Component menggunakan class names berikut yang harus didefinisikan di parent project:

Container Classes ​

  • .banner-wrapper - Outer wrapper untuk toast container positioning
  • .banners - Inner container untuk toast list
  • .banner-container - Individual toast wrapper
  • .satoast-item - TransitionGroup item wrapper

Type-Based Color Classes ​

Background Colors:

  • .banner-info - Info toast background (blue)
  • .banner-success - Success toast background (green)
  • .banner-error - Error toast background (red)
  • .banner-warning - Warning toast background (yellow)

Header Colors:

  • .banner-header-info - Info toast header text color
  • .banner-header-success - Success toast header text color
  • .banner-header-error - Error toast header text color
  • .banner-header-warning - Warning toast header text color

Icon Classes ​

  • .banner-icon - Base icon wrapper styling
  • .banner-icon-info - Info icon background
  • .banner-icon-success - Success icon background
  • .banner-icon-error - Error icon background
  • .banner-icon-warning - Warning icon background

Interactive Element Classes ​

  • .toast-header - Title/header section styling
  • .toast-close-container - Close button container
  • .toast-close-btn - Close button (× icon) styling
  • .toast-btn-timer - Timer countdown text styling

NON-FAMILY PROJECT

Jika menggunakan di luar family project, definisikan class-class ini dengan styling project kamu sendiri. Component hanya butuh class names exist - tidak peduli implementasinya.

Minimal example:

css
/* Minimal functional styling */
.banner-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }
.banner-container { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 0.5rem; }
.banner-info { background: #3b82f6; color: white; }
.banner-success { background: #10b981; color: white; }
.banner-error { background: #ef4444; color: white; }
.banner-warning { background: #f59e0b; color: white; }
/* ... and so on for other classes */

PENTING

Tanpa class definitions ini, component akan render tanpa styling (unstyled/broken layout). Minimal berikan basic styling untuk semua class names yang digunakan component.

Expected Structure Example:

html
<div class="banner-wrapper">
  <div class="banners">
    <div class="satoast-item">
      <div class="banner-container">
        <div class="banner-icon banner-icon-success">...</div>
        <div class="toast-header banner-header-success">Title</div>
        <div class="toast-close-container banner-success">
          <button class="toast-close-btn">×</button>
          <div class="toast-btn-timer">5s</div>
        </div>
        <div class="banner-success">Content</div>
      </div>
    </div>
  </div>
</div>

Copyright © 2023 - PPSDM Migas