Modal

<template>
  <AcceleratorModal :on-confirm="onConfirmAsync">
    <template #trigger>
      <AcceleratorButton>With confirm function</AcceleratorButton>
    </template>
    <template #content>
      <p>Are you sure?</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
async function onConfirmAsync() {
  await Promise.resolve();
  console.log('Modal confirmed');
}
</script>

<template>
  <AcceleratorModal :on-confirm="onConfirm">
    <template #trigger>
      <AcceleratorButton>With confirm function</AcceleratorButton>
    </template>
    <template #content>
      <p>This modal has confirm function</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
function onConfirm() {
  console.log('Modal confirmed');
}
</script>

<template>
  <AcceleratorModal :on-close="onClose">
    <template #trigger>
      <AcceleratorButton>With close function</AcceleratorButton>
    </template>
    <template #content>
      <p>This modal will call a function when closed or clicked outside</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
function onClose() {
  console.log('Modal closed');
}
</script>

<template>
  <AcceleratorModal disable-confirm>
    <template #trigger>
      <AcceleratorButton>Disabled confirm</AcceleratorButton>
    </template>
    <template #content>
      <p>The confirm button is disabled</p>
    </template>
  </AcceleratorModal>
</template>

<template>
  <AcceleratorModal :on-confirm="onConfirmAsync" :close-on-confirm="false">
    <template #trigger>
      <AcceleratorButton>Don't close on confirm</AcceleratorButton>
    </template>
    <template #content>
      <p>This modal will not close after successful confirmation</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
async function onConfirmAsync() {
  await Promise.resolve();
  console.log('Modal confirmed');
}
</script>

<template>
  <AcceleratorModal :on-confirm="onConfirmAsync">
    <template #trigger>
      <AcceleratorButton>With confirm function</AcceleratorButton>
    </template>
    <template #content>
      <p>Are you sure?</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
async function onConfirmAsync() {
  await Promise.resolve();
  console.log('Modal confirmed');
}
</script>

<template>
  <AcceleratorModal preserve-content>
    <template #trigger>
      <AcceleratorButton>Preserve content</AcceleratorButton>
    </template>
    <template #content>
      <input type="text" placeholder="Input" />
    </template>
  </AcceleratorModal>
</template>

<template>
  <AcceleratorModal disable-trigger>
    <template #trigger>
      <AcceleratorButton disabled>Disable trigger</AcceleratorButton>
    </template>
    <template #content>
      <p>This modal has a disabled trigger</p>
    </template>
  </AcceleratorModal>
</template>

<template>
  <AcceleratorModal v-model:open="open">
    <template #trigger>
      <AcceleratorButton>Open state controlled with v-model</AcceleratorButton>
    </template>
    <template #content>
      <AcceleratorButton variant="secondary" @click="open = false">Current state: {{ open }} click to close modal programmatically</AcceleratorButton>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
const open = ref(false);
</script>

<template>
  <AcceleratorButton @click="openNoTrigger = true">Open modal with no trigger</AcceleratorButton>
  <AcceleratorModal v-model:open="openNoTrigger">
    <template #content>
      <p>This modal has no trigger</p>
    </template>
  </AcceleratorModal>
</template>

<script setup lang="ts">
const openNoTrigger = ref(false);
</script>

<template>
  <AcceleratorModal :show-footer="false">
    <template #trigger>
      <AcceleratorButton>
        Open modal with no footer
      </AcceleratorButton>
    </template>
    <template #content>
      <p>This modal has no footer</p>
    </template>
  </AcceleratorModal>
</template>

<template>
  <AcceleratorModal modal-class="custom-modal">
    <template #trigger>
      <AcceleratorButton class="custom-button">Custom styling</AcceleratorButton>
    </template>
    <template #content>
      <p>This modal has custom styling</p>
    </template>
  </AcceleratorModal>
</template>

<style scoped>
:global(.lev-modal-overlay.custom-modal) {
  --lev-modal-overlay-bg: black;
}

:global(.lev-modal-wrapper.custom-modal) {
  --lev-modal-wrapper-align-items: flex-end;
  margin-bottom: 5rem;
}

:global(.lev-modal-content.custom-modal) {
  --lev-modal-content-max-width: 300px;
}
</style>

<template>
  <AcceleratorModal>
    <template #trigger>
      <AcceleratorButton>Modal with header</AcceleratorButton>
    </template>
    <template #header>
      <h3>Custom Header Title</h3>
      <p>This is a custom header with additional information</p>
    </template>
    <template #content>
      <p>This modal has a custom header section above the main content.</p>
    </template>
  </AcceleratorModal>
</template>