PopOver API Reference

Component Props

The OPopOver component itself doesn't accept any props directly. Instead, it uses the usePopup composable for state management.

Composable API

The usePopup composable provides the main API for controlling popups.

State

Property	Type	Description
popup	Object | null	Current popup configuration object or null if no popup is open
config	Object	Global configuration object
isPopupOpen	Boolean	Computed property indicating if a popup is currently open

Methods

Core Methods

Method	Parameters	Description
showPopup(options)	options: PopupOptions	Shows a popup with the specified configuration
closePopup(reason?)	reason?: string	Closes the current popup with optional reason

Convenience Methods

Method	Parameters	Description
confirm(title, content, options?)	title: string, content: string, options?: ConfirmOptions	Shows a confirmation dialog
alert(title, content, options?)	title: string, content: string, options?: AlertOptions	Shows an alert dialog
prompt(title, content, options?)	title: string, content: string, options?: PromptOptions	Shows a prompt dialog
custom(component, props?, options?)	component: Component, props?: object, options?: CustomOptions	Shows a custom component popup

Configuration Methods

Method	Parameters	Description
setCloseOnOverlayClick(value)	value: boolean	Sets whether clicking overlay closes popup
setShowCloseIcon(value)	value: boolean	Sets whether to show close icon by default
setEnableAnimation(value)	value: boolean	Sets whether to enable animations

Popup Options

The showPopup method accepts a configuration object with the following properties:

Property	Type	Default	Description
title	String	''	Title text for the popup header
content	String	''	Static content text
component	Component	null	Dynamic component to render
componentProps	Object	{}	Props to pass to the dynamic component
buttonConfig	Array	[]	Array of button configuration objects
showCloseIcon	Boolean	true	Whether to show close icon
closeOnOverlayClick	Boolean	true	Whether clicking overlay closes popup
showMandatoryFieldsError	Boolean	false	Shows validation error message
showMandatoryFieldsErrorMsg	String	'Please fill mandatory fields'	Custom error message
customClass	String	''	Additional CSS class for popup body
onClose	Function	null	Callback when popup closes
onFooterClick	Function	null	Callback when footer is clicked

Button Configuration

Each button object in buttonConfig can have the following properties:

Property	Type	Description
buttonText	String	Text to display on the button
action	Function	Function to execute when button is clicked
classNames	Array	Array of CSS class names
isDisabled	Boolean	Whether the button is disabled
icon	String	Icon URL or path
showSpinningLoader	Boolean	Whether to show loading spinner

Pre-defined Button Classes

• primary-button - Yellow primary button with hover effect
• primary-button-v2 - Alternative primary button style
• secondary-button-v2 - Secondary button with gray border
• secondary-button-v3 - Text-only secondary button

Component Slots

Slot	Props	Description
header	-	Custom content for the popup header
main	-	Main content area of the popup
footer	-	Custom footer content

Events

The component handles these events internally:

Event	Description
overlayClick	Triggered when clicking the backdrop
closeIconClick	Triggered when clicking the close icon
buttonClick	Triggered when clicking any button

Example Usage

<template>
  <OPopOver />
</template>

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

const { showPopup, closePopup } = usePopup();

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