Modal

Bootstrap 5-based modal window component for displaying content in the foreground.

Description

Modal is a wrapper around Bootstrap 5’s Modal component that exposes methods to show and hide the window, slots for title, body, and actions, and options for size and behavior customization.

Location: @/components/interface/Bootstrap/Modal.vue

Props

Prop	Type	Required	Default	Description
size	String	❌ No	''	Modal size: 'sm', 'lg', 'xl' or empty for default
class	String	❌ No	''	Additional CSS classes for the modal-dialog
classBody	String	❌ No	''	CSS classes for the modal body
classFooter	String	❌ No	''	CSS classes for the modal footer
styleBody	String	❌ No	''	Inline styles for the modal body
fullHeight	Boolean	❌ No	false	Makes the modal scrollable at full height
closeBtn	Boolean	❌ No	true	Shows the "Close" button in the footer
showFooter	Boolean	❌ No	true	Shows the footer area
onClose	Function	❌ No	() => {}	Callback when the modal closes (receives the event)
options	Object	❌ No	{}	Options passed to the Bootstrap Modal constructor

Slots

title

Title content in the header. If not used, the header is not rendered.

<template #title>
  <span>{{ t('modal.editUser') }}</span>
</template>

body

Main modal content.

<template #body>
  <FormGenerator ref="form" :form="fields" :base="initial" />
</template>

actions

Buttons or actions in the footer (alongside the Close button when closeBtn is true).

<template #actions>
  <button class="btn btn-primary" @click="handleSubmit">
    {{ t('actions.save') }}
  </button>
</template>

Exposed Methods

The component exposes the following methods via ref:

show()

Opens the modal.

const modal = ref(null);

const openModal = () => {
  modal.value.show();
};

hide()

Closes the modal.

modal.value.hide();

modal

Reference to the Bootstrap Modal instance (for advanced use).

modal.value.modal; // bs.Modal instance

Usage Examples

Basic Example

<template>
  <button class="btn btn-primary" @click="modal.show()">Open</button>

  <Modal ref="modal" :onClose="onClose">
    <template #title>
      {{ t('modal.title') }}
    </template>
    <template #body>
      <p>Modal content.</p>
    </template>
    <template #actions>
      <button class="btn btn-primary" @click="modal.hide()">
        {{ t('actions.save') }}
      </button>
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from '@/components/interface/Bootstrap/Modal.vue';

const modal = ref(null);

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

Example with Size and No Close Button

<template>
  <Modal
    ref="modal"
    size="lg"
    :closeBtn="false"
    :showFooter="false"
  >
    <template #title>{{ t('modal.detail') }}</template>
    <template #body>
      <div class="p-3">Read-only content.</div>
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from '@/components/interface/Bootstrap/Modal.vue';

const modal = ref(null);
</script>

Example with Form and Validation

<template>
  <Modal ref="modal" @onClose="resetForm">
    <template #title>{{ t('users.edit') }}</template>
    <template #body>
      <FormGenerator
        ref="form"
        :form="fields"
        :base="initial"
      />
    </template>
    <template #actions>
      <button class="btn btn-primary" @click="submit">
        {{ t('actions.save') }}
      </button>
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import Modal from '@/components/interface/Bootstrap/Modal.vue';
import FormGenerator from '@/components/Forms/Generator.vue';

const modal = ref(null);
const form = ref(null);

const submit = async () => {
  const valid = await form.value.v$.$validate();
  if (valid) {
    // Send data...
    modal.value.hide();
  }
};

const resetForm = () => {
  form.value?.$clear();
};
</script>

Important Notes

1. Control via ref: The modal does not show until show() is called. You must assign a ref to control visibility.

2. Closing: The user can close via the header X button, the footer "Close" button (if enabled), or by clicking outside the modal (default Bootstrap behavior).

3. Translations: The "Close" button uses the key actions.close. Ensure the translation exists in i18n.

4. Bootstrap: The component depends on Bootstrap 5 (bs.Modal). It must be loaded in the project.

5. onClose callback: Runs when the modal is hidden (hidden.bs.modal event), useful for clearing state or forms.