Vue Component Library

Appearance

PopOver Component ​

A flexible and customizable popup overlay component with modal functionality and composable-based state management.

Overview ​

The PopOver component provides:

  • Modal overlay with backdrop blur effect and click-outside-to-close
  • Customizable header with optional title and close icon
  • Flexible content slots for main content and footer
  • Dynamic button configuration with loading states and custom actions
  • Built-in error handling for mandatory fields
  • Composable-based state management with global popup control
  • Smooth animation with scale and fade effects
  • Support for dynamic components and custom props

When to Use ​

Use the PopOver component when you need to display:

  • Modal dialogs with form content
  • Confirmation dialogs with action buttons
  • Information panels that overlay the main content
  • Custom popup interfaces with flexible layouts
  • Dynamic content using custom components

Key Features ​

  • Composable Integration: Uses usePopup composable for global state management
  • Flexible Content: Support for static content, dynamic components, and custom props
  • Button Configuration: Dynamic button rendering with custom actions, styling, and loading states
  • Error Handling: Built-in validation error display for mandatory fields
  • Accessibility: Proper event handling and focus management
  • Animation: Smooth popup animation with scale and fade effects
  • Responsive Design: Modern styling with backdrop blur and shadow effects
  • Global Control: Show/hide popups from anywhere in the application
  • Convenience Methods: Built-in confirm, alert, prompt, and custom methods

Basic Usage ​

vue
<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { showPopup, closePopup } = usePopup();

// Show a simple popup
const showSimplePopup = () => {
  showPopup({
    title: 'Hello World',
    content: 'This is a simple popup message.',
    buttonConfig: [
      {
        buttonText: 'OK',
        classNames: ['primary-button'],
        action: () => closePopup()
      }
    ]
  });
};
</script>

Convenience Methods ​

The composable provides convenient methods for common popup types:

javascript
const { confirm, alert, prompt, custom } = usePopup();

// Confirmation dialog
confirm('Delete Item', 'Are you sure you want to delete this item?', {
  onConfirm: () => console.log('Confirmed'),
  onCancel: () => console.log('Cancelled')
});

// Alert dialog
alert('Success', 'Operation completed successfully!', {
  onOk: () => console.log('OK clicked')
});

// Custom component popup
custom(MyCustomComponent, { prop1: 'value1' }, {
  title: 'Custom Popup',
  buttonConfig: [...]
});

API Reference →

Demo Examples →

View Code →