modal

Reusable modal dialog component with backdrop management.

<modal
    :active.sync="showModal"
    title="Edit Product"
    size="lg"
    @close="handleClose"
>
    <!-- Modal content -->
</modal>

Key Features:

• Automatic z-index management for nested modals

• Keyboard navigation (ESC to close)

• Click-outside-to-close

• Multiple size options

• Customizable header/footer

• Loading states

Props:

• active (Boolean) - Modal visibility

• title (String) - Modal title (default: 'Modal')

• loading (Boolean) - Loading state

• centered (Boolean) - Vertically center modal

• size (String) - Size class ('sm', 'lg', 'xl')

• footerActive (Boolean) - Show footer (default: true)

• headerActive (Boolean) - Show header (default: true)

Events:

• close - Modal close requested

• update:active - Sync prop for v-model support