vue-input-components

Modal Component

A reusable modal component that provides a flexible way to display content in a popup dialog.

Features

Props

Prop Type Default Description
modelValue Boolean false Controls the visibility of the modal
modalClass String ’’ Additional CSS classes for the modal
title String ’’ Title to display in the header
minWidth String ‘300px’ Minimum width of the modal
maxWidth String ‘800px’ Maximum width of the modal
minHeight String ‘auto’ Minimum height of the modal
maxHeight String ‘80vh’ Maximum height of the modal
titleBarColor String ‘var(–primary-color, #3498db)’ Color of the title text
backgroundColor String ‘var(–background-color, #f8f9fa)’ Background color of the modal body
icon String undefined Font Awesome icon name to display
isLargeIcon Boolean false Whether to display the icon as a large centered icon
iconColor String ‘var(–primary-color, #3498db)’ Custom color for the icon

Events

Event Arguments Description
update:modelValue Boolean Emitted when the modal visibility changes
close - Emitted when the modal’s close button is clicked

Slots

Name Description
default Content for the modal body
header Custom header content (replaces the default title)
footer Content for the modal footer

Methods

The component exposes the following methods that can be accessed via template refs:

Method Description
open Opens the modal
close Closes the modal

Styling

The modal uses CSS variables for its styling, which can be customized by setting the following variables in your application:

:root {
  --primary-color: #3498db; /* Used for title text and default icon color */
  --background-color: #f8f9fa; /* Used for modal background and large icon background */
  --text-muted: #00000088; /* Used for close button color */
  --modal-border-color: #e0e0e0; /* Used for header and footer divider lines */
  --modal-backdrop-color: rgba(0, 0, 0, 0.5); /* Used for the semi-transparent overlay */
  --danger-color: #aa0400; /* Used for close button hover state */
}

Usage Examples

Basic Usage

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

    <Modal v-model="showModal" title="My Modal Title" icon="info-circle">
      <p>This is the modal content.</p>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Modal } from '@a-vision-software/vue-input-components'

const showModal = ref(false)
</script>

With Large Icon

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

    <Modal
      v-model="showModal"
      title="My Modal Title"
      icon="user"
      is-large-icon
      iconColor="var(--primary-color-light)"
    >
      <p>This modal has a large centered icon above the content.</p>
    </Modal>
  </div>
</template>

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

    <Modal v-model="showModal" icon="settings">
      <template #header>
        <h2 class="custom-header">Custom Header</h2>
      </template>

      <p>This is the modal content.</p>

      <template #footer>
        <div class="buttons">
          <button @click="showModal = false">Cancel</button>
          <button @click="save">Save</button>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Modal } from '@a-vision-software/vue-input-components'

const showModal = ref(false)

const save = () => {
  // Save logic here
  showModal.value = false
}
</script>

Using Modal Methods

<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <button @click="closeModal">Close Modal</button>

    <Modal ref="modalRef" v-model="showModal" title="Programmatic Control">
      <p>This modal can be controlled programmatically.</p>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Modal } from '@a-vision-software/vue-input-components'

const showModal = ref(false)
const modalRef = ref(null)

const openModal = () => {
  modalRef.value?.open()
}

const closeModal = () => {
  modalRef.value?.close()
}
</script>

Notes