shared/components/modals/ConfirmDeleteModalContent.astro - dev - githubmirror/tabler

shared/components/modals/ConfirmDeleteModalContent.astro

56 строк2 KB

Paweł Kuna

Improve accessibility across layouts, components, and forms (#2799)

06 авг 2026, 00:40

06 авг 2026, 00:401effe22

---
import Icon from '@ui/Icon.astro'
import Button from '@ui/Button.astro'
import ModalClose from './ModalClose.astro'
---

<ModalClose />
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
  <Icon name="alert-triangle" color="danger" size="lg" class="mb-2" />

  <h3 id="modal-confirm-delete-title">Are you sure?</h3>
  <div class="text-secondary mb-4">
    <p id="confirm-delete-message">Do you really want to delete this item? This action cannot be undone.</p>
    <div id="confirm-delete-items" class="text-start d-none">
      <div class="card card-sm mt-3">
        <div class="card-body">
          <div class="fw-bold mb-2">Items to be deleted:</div>
          <ul class="list-unstyled mb-0" id="confirm-delete-list">
            <li>• Item 1</li>
            <li>• Item 2</li>
            <li>• Item 3</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <label class="form-check text-start">
    <input class="form-check-input" type="checkbox" id="confirm-delete-checkbox" />
    <span class="form-check-label">I understand this action cannot be undone</span>
  </label>
</div>

<div class="modal-footer">
  <div class="w-100">
    <div class="row">
      <div class="col"><Button text="Cancel" dismiss block /></div>
      <div class="col">
        <button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="confirm-delete-button" disabled> Delete </button>
      </div>
    </div>
  </div>
</div>
<!-- BEGIN CONFIRM DELETE -->
<script>
  const checkbox = document.getElementById('confirm-delete-checkbox') as HTMLInputElement | null
  const deleteButton = document.getElementById('confirm-delete-button') as HTMLButtonElement | null

  if (checkbox && deleteButton) {
    checkbox.addEventListener('change', function (this: HTMLInputElement) {
      deleteButton.disabled = !this.checked
    })
  }
</script>
<!-- END CONFIRM DELETE -->