Appearance

Snackbar Plugin ​

File Information ​

  • Path: plugins/snackbar.js
  • Purpose: Global notification system for success, error, warning, and info messages

Overview ​

The Snackbar plugin provides a global notification system that can be used throughout the application. It creates Vuetify snackbar components dynamically and displays them with appropriate icons and colors. The plugin is available as $snackbar on all Vue instances.

Key Features ​

  1. Notification Types

    • Success messages
    • Error messages
    • Warning messages
    • Info messages

  2. Dynamic Component Creation

    • Creates snackbar components on demand
    • Mounts to document body
    • Auto-dismisses after timeout

  3. Icon Support

    • Success icon
    • Error icon
    • Warning icon
    • Info icon
    • Custom icons

  4. Styling

    • Color-coded messages
    • Top-right positioning
    • Slide transition
    • Auto-width calculation

Methods ​

show(message, icon, color, timeout) ​

Shows a snackbar notification:

  • Creates snackbar component
  • Displays message with icon
  • Auto-dismisses after timeout

Parameters:

  • message (string): Notification message
  • icon (Component|null): Icon component (default: null)
  • color (string): Color theme ('success', 'error', 'warning', 'info')
  • timeout (number): Auto-dismiss timeout in ms (default: 3000)

success(message, icon, timeout) ​

Shows success notification:

  • Uses success icon by default
  • Green color theme
  • 3 second timeout

Parameters:

  • message (string): Success message
  • icon (Component): Icon component (default: SuccessIcon)
  • timeout (number): Timeout in ms (default: 3000)

error(message, icon, timeout) ​

Shows error notification:

  • Uses error icon by default
  • Red color theme
  • 3 second timeout

Parameters:

  • message (string): Error message
  • icon (Component): Icon component (default: ErrorIcon)
  • timeout (number): Timeout in ms (default: 3000)

warning(message, icon, timeout) ​

Shows warning notification:

  • Uses warning icon by default
  • Orange/yellow color theme
  • 3 second timeout

Parameters:

  • message (string): Warning message
  • icon (Component): Icon component (default: WarningIcon)
  • timeout (number): Timeout in ms (default: 3000)

info(message, icon, timeout) ​

Shows info notification:

  • Uses info icon by default
  • Blue color theme
  • 3 second timeout

Parameters:

  • message (string): Info message
  • icon (Component): Icon component (default: InfoIcon)
  • timeout (number): Timeout in ms (default: 3000)

Usage Examples ​

Success Message ​

javascript
// In component
this.$snackbar.success('Asset uploaded successfully!')

Error Message ​

javascript
// In component
try {
  await this.$axios.post('/api/endpoint', data)
} catch (error) {
  this.$snackbar.error('Failed to save changes')
}

Warning Message ​

javascript
// In component
this.$snackbar.warning('Storage is almost full')

Info Message ​

javascript
// In component
this.$snackbar.info('New features available')

Custom Notification ​

javascript
// In component
this.$snackbar.show(
  'Custom message',
  CustomIcon,
  'success',
  5000
)

With Custom Timeout ​

javascript
// In component
this.$snackbar.success('Message', null, 5000) // 5 seconds

Icon Components ​

The plugin uses SVG icon components:

  • SuccessIcon - Success checkmark icon
  • ErrorIcon - Error X icon
  • WarningIcon - Warning triangle icon
  • InfoIcon - Info circle icon
  • CloseIcon - Close button icon (optional)

Styling ​

Snackbars are styled with:

  • Position: Top-right
  • Transition: Slide from right
  • Colors: Theme-based (success, error, warning, info)
  • Width: Auto-calculated based on message
  • Timeout: Configurable (default 3 seconds)

Component Lifecycle ​

  1. Creation: Component created dynamically
  2. Mounting: Mounted to document body
  3. Display: Shows with animation
  4. Auto-dismiss: Hides after timeout
  5. Cleanup: Component removed from DOM

Integration Points ​

  • All Components: Global notification access
  • Error Handling: Error messages
  • API Responses: Success/error feedback
  • User Actions: Action confirmations

Notes for Development ​

  • Plugin is available globally as $snackbar
  • Components are created on demand
  • Auto-cleanup after dismissal
  • Width calculated dynamically
  • Client-side only (browser required)
  • Uses Vuetify snackbar component