phane-tech-canvas-modal

A flexible Vue 3 modal, sidebar, and dialogue component with top, bottom, left, and right positions. Built with TailwindCSS and Headless UI, featuring smooth transitions and customizable slots.

Features

• Supports left, right, top, bottom modals
• Fully animated with TransitionChild and TransitionRoot
• Customizable size and overlay
• Slots for header, body, and footer
• Easy integration as a Vue 3 plugin
• Lightweight and responsive

Installation

npm install phane-tech-canvas-modal

or with Yarn:

yarn add phane-tech-canvas-modal

Basic component usage

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

    <canvasModal
      :open="isOpen"
      dialoguePosition="right"
      :size="400"
      overlayClass="bg-black/50"
    >
      <template #header>
        <h2 class="text-lg font-bold p-4">Modal Header</h2>
      </template>

      <template #body>
        <p class="p-4">This is the body content of the modal.</p>
      </template>

      <template #footer>
        <div class="p-4 flex justify-end">
          <button @click="isOpen = false" class="btn">Close</button>
        </div>
      </template>
    </canvasModal>
  </div>
</template>

<script setup>
import { canvasModal } from 'phane-tech-canvas-modal'
import { ref } from 'vue'
const isOpen = ref(false)
</script>

Props

| Prop | Type | Default | Description | |-----------------------|-----------|-------------|-------------| | open | Boolean | false | Whether the modal is open. | | overlayClass | String | "bg-gray-500/75" | Tailwind classes for overlay. | | isOverlay | Boolean | true | Show overlay behind modal. | | mainClass | String | "" | Additional classes for root. | | mainDialogueClass | String | "" | Classes for dialogue wrapper. | | containerClass | String | "" | Classes for container div. | | actualContainerClass| String | "" | Classes for inner container flex. | | dialoguePosition | String | "right" | "top" | "bottom" | "left" | "right" Position of modal. | | size | Number | 300 | Width (left/right) or height (top/bottom). | | dialogueOverlay | String | "" | Extra classes for the dialogue panel wrapper. | | dialoguePanelClass | String | "" | Classes for the panel itself. | | dialogueBodyClass | String | "" | Classes for the scrollable body. |

Slots

• header: Custom header content
• body: by default without name data goes to body
• footer: Footer content with buttons