VUI Modal

npm install @vui/modal

Basic Usage

import { VuiModalComponent } from '@vui/modal';

@Component({
  template: `
    <button (click)="openModal()">Open Modal</button>
    
    <ng-vui-modal
      [isOpen]="showModal"
      [size]="'medium'"
      [closable]="true"
      (closed)="onModalClose()">
      
      <div modal-header>
        <h3>Modal Title</h3>
      </div>
      
      <div modal-body>
        <p>Modal content goes here...</p>
      </div>
      
      <div modal-footer>
        <button (click)="closeModal()">Close</button>
        <button (click)="saveChanges()">Save</button>
      </div>
      
    </ng-vui-modal>
  `
})

Confirmation Modal Example

@Component({
  template: `
    <ng-vui-modal
      [isOpen]="showConfirmModal"
      size="small"
      [backdrop]="'static'"
      [keyboard]="false">
      
      <div modal-body class="text-center">
        <div class="text-6xl mb-4">⚠️</div>
        <h3 class="text-lg font-semibold mb-2">Confirm Delete</h3>
        <p class="text-gray-600 mb-6">Are you sure you want to delete this item?</p>
        
        <div class="flex justify-center space-x-3">
          <button (click)="cancelDelete()">Cancel</button>
          <button (click)="confirmDelete()" class="bg-red-500">Delete</button>
        </div>
      </div>
      
    </ng-vui-modal>
  `
})