57 lines
1.7 KiB
Svelte
57 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
let {onCancel, onConfirm}: {onCancel:()=>void, onConfirm:(message:string)=>void} = $props();
|
|
|
|
let message:string = $state("");
|
|
const maxLength = $state(100);
|
|
|
|
function handleConfirm(e:Event) {
|
|
e.preventDefault();
|
|
if (message.length <= maxLength) {
|
|
onConfirm(message);
|
|
onCancel();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<div
|
|
class="modal fade show d-block"
|
|
tabindex="-1"
|
|
style="background-color: rgba(0, 0, 0, 0.5);"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Confirmar acción</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form onsubmit={(e)=>handleConfirm(e)}>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Mensaje</label>
|
|
<input
|
|
type="text"
|
|
id="message"
|
|
class="form-control"
|
|
bind:value={message}
|
|
maxlength={maxLength}
|
|
required
|
|
/>
|
|
<div class="form-text">
|
|
Caracteres restantes: {maxLength - message.length}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary" onclick={onCancel}>
|
|
Cancelar
|
|
</button>
|
|
<button type="button" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>
|
|
Confirmar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|