Code
<template>
<div>
<w-stack gap="small">
<w-button id="modal-service-trigger" label="Show service modal"></w-button>
</w-stack>
<w-modal id="modal-service" title="Service details">
<div slot="body">
<w-stack direction="column" gap="medium" align-items="stretch" full-width>
<w-input label="Service name" type="text" value="EEG Scan"></w-input>
<w-input label="Price" type="number" value="60">
<div slot="suffix">
<span>€</span>
</div>
</w-input>
</w-stack>
</div>
<div slot="footer">
<w-button id="close-modal-service-trigger" label="Cancel"></w-button>
<w-button
id="modal-delete-service-trigger"
label="Delete service"
variant="danger"
></w-button>
</div>
</w-modal>
<w-modal id="modal-delete-service" title="Delete service?">
<div slot="body">
<w-text>
Service will be deleted from all calendars and you will not be able to recover it.
</w-text>
</div>
<div slot="footer">
<w-button id="close-modal-delete-service-trigger" label="Cancel"></w-button>
<w-button
id="delete-modal-delete-service-trigger"
label="Delete service"
variant="danger"
></w-button>
</div>
</w-modal>
</div>
</template>
<script type="module">
const modalServiceTrigger = document.querySelector('#modal-service-trigger');
const modalService = document.querySelector('#modal-service');
modalService.modelValue = false;
modalServiceTrigger.addEventListener('click', () => (modalService.modelValue = true));
modalService.addEventListener('update:modelValue', () => (modalService.modelValue = false));
const closeModalServiceTrigger = document.querySelector('#close-modal-service-trigger');
closeModalServiceTrigger.addEventListener('click', () => (modalService.modelValue = false));
const modalDeleteServiceTrigger = document.querySelector('#modal-delete-service-trigger');
const modalDeleteService = document.querySelector('#modal-delete-service');
modalDeleteService.modelValue = false;
modalDeleteServiceTrigger.addEventListener(
'click',
() => (modalDeleteService.modelValue = true)
);
modalDeleteService.addEventListener(
'update:modelValue',
() => (modalDeleteService.modelValue = false)
);
const closeModalDeleteServiceTrigger = document.querySelector(
'#close-modal-delete-service-trigger'
);
const deleteModalDeleteServiceTrigger = document.querySelector(
'#delete-modal-delete-service-trigger'
);
closeModalDeleteServiceTrigger.addEventListener(
'click',
() => (modalDeleteService.modelValue = false)
);
deleteModalDeleteServiceTrigger.addEventListener('click', () => {
modalDeleteService.modelValue = false;
modalService.modelValue = false;
});
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
close-on-click-outside |
Decides if the modal can be closed by clicking outside of it. |
boolean |
|
|
|
disable-teleport |
Toggles teleporting of the modal to the target element |
boolean |
|
|
|
v-model model-value v2, wc show v1 |
State of the modal |
boolean |
|
|
|
size |
Size of the modal dialog |
string |
medium |
medium | large | xlarge |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
|
title Required |
Title of the modal dialog displayed in the header |
string |
|
|
|
translations |
Provide values as translated strings. |
object |
{ closeBtnAriaLabel: 'Close' } |
Object with the following key: closeBtnAriaLabel |
|
prevent-close |
When true, prevents the user from closing the modal through UI interactions (close button, ESC key, clicking outside, browser back button). Modal can only be closed programmatically through v-model. |
boolean |
|
|
|
fade-content |
When true, shows a fade effect at the bottom of the modal body when content is scrollable |
boolean |
|
|
Slots
|
Name |
Description |
|---|---|
|
body |
Slot for body content |
|
footer |
Optional slot for footer content |
Events
|
Name |
Description |
Type |
|---|---|---|
|
v-model update:modelValue v2, wc toggle v1 |
Emitted on modal close |
{ "names": [ "Boolean" ] } |