@archipelago-pba/modal

Universal modal system for Archipelago PBA hotel templates.

Features

• 🎨 5 Modal Types: Gallery, Offers, Splash, Notification, Form
• 🔍 4 Preview Types: Google Maps, iframe, PDF, Video
• 🎭 AOS Animations: Desktop-only with mobile fallback
• 🖼️ Swiper Gallery: Thumbnail navigation with responsive breakpoints
• 🌗 Dark Mode: Full Tailwind dark mode support
• ♿ Accessible: WCAG 2.1 AA compliant
• 📱 Responsive: Mobile-first design
• 🔒 Type Safe: Full TypeScript support
• 🚀 SSR/SSG: Compatible with Nuxt 3

Installation

pnpm add @archipelago-pba/modal aos swiper

Ran: pnpm -w --filter @archpublicwebsite/modal build
Result: modal build completed successfully.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BaseModal, ModalGallery } from '@archipelago-pba/modal'
import '@archipelago-pba/modal/style.css'
import 'aos/dist/aos.css'

const isOpen = ref(false)
const gallery = {
  items: [{ id: '1', url: '/image1.jpg', alt: 'Image 1', caption: 'Beautiful view' }],
}
</script>

<template>
  <button @click="isOpen = true">Open Gallery</button>
  <BaseModal v-model="isOpen" content-type="gallery">
    <ModalGallery :content="gallery" />
  </BaseModal>
</template>

Documentation

See MODAL_ENHANCED_IMPLEMENTATION.md for complete documentation.

License

MIT