Modal Component

A customizable modal dialog component with animation, multiple sizes, headers, footers, and close behavior.

Usage

<template>
  <div>
    <button @click="isOpen = true">Open Modal</button>

    <coc-modal
      v-model="isOpen"
      title="My Modal Title"
      size="md"
      border="warning"
      :close="true"
      :close-button="true"
      :header="true"
      :scroll="true"
    >
      <template #modal-body>
        <p>This is the modal body content.</p>
      </template>
    </coc-modal>
  </div>
</template>

<script> 

export default { 
  data() {
    return {
      isOpen: false,
    };
  },
};
</script>

Props

Prop	Type	Default	Description
open	Boolean	false	Controls the modal visibility (v-model)
title	String	""	Title shown in header
size	String	"default"	Modal size (lg, md, tablet, full)
border	String	"default"	Border style (default, danger, warning)
close	Boolean	true	Whether modal can be closed
header	Boolean	true	Show/hide modal header
closeButton	Boolean	true	Show/hide close button
scroll	Boolean	true	Enable scroll in body
bodyClass	String	""	Custom class for modal body

Slots

Slot	Description
modal-header	Custom header content (replaces default title & close button)
modal-body	Main modal body content

Examples

Basic Modal

<coc-modal v-model="isOpen" title="Basic Modal">
  <template #modal-body>
    <p>Hello from the modal!</p>
  </template>
</coc-modal>

Large Modal with Danger Border

<coc-modal v-model="isOpen" title="Delete Confirmation" size="lg" border="danger">
  <template #modal-body>
    <p>Are you sure you want to delete this item?</p>
  </template>
</coc-modal>