Common Modal Component Package

A lightweight, customizable Vue 3 modal dialog component built with Quasar Framework.

📦 Installation

npm install common-modal-component-package

🚀 Quick Start

Prerequisites

Ensure you have Vue 3 and Quasar installed:

npm install vue@^3.0.0 quasar@^2.0.0 @quasar/extras

Setup Quasar in Your Project

In your main.ts or main.js:

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import Quasar styles
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css'
import 'quasar/dist/quasar.css'

import App from './App.vue'

const app = createApp(App)

app.use(Quasar)
app.mount('#app')

💡 Usage

Import in Your Component (Recommended)

Most users will use this by importing directly into the page/component where it's needed:

<script setup lang="ts">
import { ref } from 'vue'
import { ModalComponent } from 'common-modal-component-package'

const showDeleteModal = ref(false)

const handleDelete = () => {
  console.log('Item deleted!')
  // Your delete logic here
}
</script>

<template>
  <div>
    <button @click="showDeleteModal = true">Delete Item</button>
    
    <ModalComponent
      v-model="showDeleteModal"
      title="Delete Confirmation"
      description="Are you sure you want to delete this item? This action cannot be undone."
      :success-function="handleDelete"
      color="negative"
      label="DELETE"
    />
  </div>
</template>

📖 Examples

Basic Delete Confirmation

<script setup>
import { ref } from 'vue'
import { ModalComponent } from 'common-modal-component-package'

const showModal = ref(false)

const deleteItem = () => {
  // Your delete logic
  console.log('Deleted!')
}
</script>

<template>
  <button @click="showModal = true">Delete</button>
  
  <ModalComponent
    v-model="showModal"
    title="Delete Item"
    description="This action cannot be undone."
    :success-function="deleteItem"
  />
</template>

Custom Colors

<template>
  <!-- Green/Success button -->
  <ModalComponent
    v-model="showModal"
    title="Confirm Action"
    description="Do you want to proceed?"
    :success-function="handleConfirm"
    color="positive"
    label="CONFIRM"
  />

  <!-- Blue/Primary button -->
  <ModalComponent
    v-model="showModal"
    title="Information"
    description="Please review the information."
    :success-function="handleInfo"
    color="primary"
    label="CONTINUE"
  />

  <!-- Orange/Warning button -->
  <ModalComponent
    v-model="showModal"
    title="Warning"
    description="This action requires attention."
    :success-function="handleWarning"
    color="orange"
    label="PROCEED"
  />
</template>

Using Events Instead of Callback

<script setup>
import { ref } from 'vue'
import { ModalComponent } from 'common-modal-component-package'

const showModal = ref(false)

const onProceed = () => {
  console.log('User clicked proceed')
}

const onClose = () => {
  console.log('Modal was closed')
}
</script>

<template>
  <ModalComponent
    v-model="showModal"
    title="Confirm"
    description="Are you sure?"
    @proceed="onProceed"
    @close="onClose"
  />
</template>

With Custom Content Slot

<template>
  <ModalComponent
    v-model="showModal"
    title="Delete Multiple Items"
    description="You are about to delete the following items:"
  >
    <template #content>
      <ul style="margin-top: 16px; padding-left: 20px;">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </template>
  </ModalComponent>
</template>

Without Proceed Button (Info Only)

<template>
  <!-- Omit successFunction to hide the proceed button -->
  <ModalComponent
    v-model="showModal"
    title="Information"
    description="This is an informational message."
  />
</template>

📋 API Reference

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | boolean | ✅ Yes | - | Controls modal visibility (use with v-model) | | title | string | No | 'Dialog' | Modal title text | | description | string | No | 'No description provided' | Modal description/message | | successFunction | () => void | No | undefined | Function to execute when proceed is clicked. If omitted, proceed button won't show | | color | string | No | 'negative' | Quasar color for proceed button (primary, secondary, positive, negative, info, warning, etc.) | | label | string | No | 'PROCEED' | Text label for proceed button | | width | string | No | '400px' | Modal width (any valid CSS width value) |

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | boolean | Emitted when modal visibility changes (for v-model) | | close | - | Emitted when modal is closed (via Cancel or close button) | | proceed | - | Emitted when proceed button is clicked |

Slots

| Slot | Description | |------|-------------| | content | Insert custom content below the description text |

🎨 Available Colors

You can use any Quasar color for the color prop:

• primary - Blue
• secondary - Teal
• positive - Green
• negative - Red (default)
• info - Cyan
• warning - Amber
• accent - Purple
• orange, purple, pink, etc.

🔧 TypeScript Support

Full TypeScript support is included. Type definitions are automatically available when you import the component.

import { ModalComponent } from 'common-modal-component-package'
// TypeScript will provide autocomplete for all props and events

📝 License

ISC

🐛 Issues & Contributions

Report issues: https://git.sandbox3000.com/david/common-modal-component-package/issues

Repository: https://git.sandbox3000.com/david/common-modal-component-package