BaseModal

import BaseModal from "@wikicasa-dev/components/UIKit/BaseModal";

Use it for focused tasks that interrupt the page: confirmations ("Eliminare questo annuncio?"), short forms (contact the agency, login), filter pickers, sort options. On screens below 576px it becomes a full-width sheet sliding up from the bottom; from 576px up it is a card slid down from the top (or vertically centered with centered). It locks page scroll while open and closes on Escape, on the X button and on backdrop click (disable with :close-on-click-out="false").

#Usage

<script setup lang="ts">
import BaseModal from "@wikicasa-dev/components/UIKit/BaseModal";
import BaseButton from "@wikicasa-dev/components/UIKit/BaseButton";
import { ref } from "vue";

const showDelete = ref(false);
</script>

<template>
  <BaseButton btn-class="uikit-btn-w-danger" type="button" @click="showDelete = true">
    Elimina annuncio
  </BaseButton>

  <BaseModal
    id="delete-listing-modal"
    v-model:show-modal="showDelete"
    size="modal-sm"
    header-title="Conferma eliminazione"
    custom-modal-footer-classes="modal-actions"
  >
    <template #body>
      <p>Vuoi eliminare il trilocale in Via Garibaldi 12, Torino? L'operazione non è reversibile.</p>
    </template>
    <template #footer="{ closeModal }">
      <BaseButton style="flex: 1" btn-class="uikit-btn-w-primary" outlined type="button" @click="closeModal">
        Annulla
      </BaseButton>
      <BaseButton style="flex: 1" btn-class="uikit-btn-w-danger" type="button" @click="closeModal">
        Elimina
      </BaseButton>
    </template>
  </BaseModal>
</template>

<style>
.modal-actions { display: flex; gap: 20px; }
</style>

#Do / Don't

• Bind v-model:show-modal. Its default is true: a BaseModal without it opens as soon as it is mounted.
• Content goes in the named body slot, not the default slot (the default slot is not rendered). header, body and footer slots all receive closeModal().
• The footer is sticky at the bottom and only rendered if you fill the footer slot. Put the actions there.
• Title: use headerTitle for plain text (it is inserted as HTML, so never pass user-provided text) or the header slot for custom markup. The X button stays on the top right unless :with-close-icon="false".
• Widths: modal-sm 496px, modal-md 592px (default), modal-lg 670px, modal-xxl up to 1500px. From 576px up, sm/md/lg cap the height at 690px. fullHeight sets the height to 95% of the screen (within that cap): good for long lists and maps.
• Give every modal a unique id; the default base-bt-modal is shared by all instances.
• Use the closed / opened events (after the 250ms animation) to unmount the modal or move focus.
• autoClose (ms) closes it automatically after opening: only for pure confirmations.

#Styling hooks

Class props for each region: customBackdropClasses, customModalDialogClasses, customModalHeaderClasses, customModalBodyClasses, customModalFooterClasses, titleClasses, closeIconBtnClasses, and closeIcon ({ size, classes }). CSS custom properties on .uikit-modal-dialog: --modal-max-height, --modal-width-sm, --modal-width-md, --modal-width-lg, --modal-max-width.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
id	string	"base-bt-modal"
size	"modal-sm" | "modal-md" | "modal-lg" | "modal-xxl" | "modal-full"	"modal-md"
customBackdropClasses	ClassTypeProp
customModalDialogClasses	ClassTypeProp
customModalHeaderClasses	ClassTypeProp
customModalBodyClasses	ClassTypeProp
customModalFooterClasses	ClassTypeProp
closeIcon	Partial<{ size?: number | undefined; classes?: ClassTypeProp; }>
withCloseIcon	boolean	true
headerTitle	string	""
autoClose	number
fullHeight	boolean	false
closeOnClickOut	boolean	true
centered	boolean	false		If true, the modal will be centered in desktop mode
dataCy	string
closeIconBtnClasses	ClassTypeProp
titleClasses	ClassTypeProp
showModal	boolean	true

Events

Name	Payload
closed
opened
update:showModal	[value: boolean]
dialogClick	[MouseEvent]

v-model

• v-model:showModal (boolean)

Slots

Name	Slot props
header	{ closeModal: () => void; }
body	{ closeModal: () => void; }
footer	{ closeModal: () => void; }
fixed-bottom

Exposed (template ref)

None.