Alert Dialog

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"
</script>

<AlertDialog>
  <AlertDialogTrigger>Delete Project</AlertDialogTrigger>
  <AlertDialogBackdrop />
  <AlertDialogContent>
    <div data-slot="stack">
      <AlertDialogTitle>Delete this project?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently deletes the project, its files and its deployment
        history for everyone on your team.
      </AlertDialogDescription>
    </div>
    <div data-slot="row">
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose data-variant="solid" value="confirm"
        >Delete</AlertDialogClose
      >
    </div>
  </AlertDialogContent>
</AlertDialog>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"

  let open = $state(false)
</script>

<div data-slot="stack">
  <AlertDialog bind:open>
    <AlertDialogTrigger>Review Changes</AlertDialogTrigger>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <div data-slot="stack">
        <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
        <AlertDialogDescription
          >Your edits will be lost if you leave without saving.</AlertDialogDescription
        >
      </div>
      <div data-slot="row">
        <AlertDialogClose>Keep Editing</AlertDialogClose>
        <AlertDialogClose data-variant="solid" value="confirm"
          >Discard</AlertDialogClose
        >
      </div>
    </AlertDialogContent>
  </AlertDialog>
</div>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogShortcut,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"
</script>

<AlertDialog>
  <AlertDialogTrigger shortcut="mod+shift+h">
    Clear History
    <AlertDialogShortcut />
  </AlertDialogTrigger>
  <AlertDialogBackdrop />
  <AlertDialogContent>
    <div data-slot="stack">
      <AlertDialogTitle>Clear your history?</AlertDialogTitle>
      <AlertDialogDescription>
        Recent searches and visited pages are removed from this device.
      </AlertDialogDescription>
    </div>
    <div data-slot="row">
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose data-variant="solid" value="confirm"
        >Clear</AlertDialogClose
      >
    </div>
  </AlertDialogContent>
</AlertDialog>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"
</script>

<AlertDialog>
  <AlertDialogTrigger>Leave Workspace</AlertDialogTrigger>
  <AlertDialogBackdrop />
  <AlertDialogContent>
    <div data-slot="stack">
      <AlertDialogTitle>Leave this workspace?</AlertDialogTitle>
      <AlertDialogDescription>
        You'll lose access to its projects until someone invites you again.
      </AlertDialogDescription>
    </div>
    <div data-slot="row">
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose data-variant="solid" value="confirm"
        >Leave</AlertDialogClose
      >
    </div>
  </AlertDialogContent>
</AlertDialog>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"

  let open = $state(false)
</script>

<AlertDialog bind:open>
  <AlertDialogTrigger>Delete Workspace</AlertDialogTrigger>
  <AlertDialogBackdrop />
  <AlertDialogContent>
    <div data-slot="stack">
      <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
      <AlertDialogDescription>
        All 12 projects and their deployments will be deleted for everyone on
        your team.
      </AlertDialogDescription>
    </div>
    <div data-slot="row">
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialog
        onOpenChange={(nested, details) => {
          if (!nested && details.returnValue === "confirm") {
            open = false
          }
        }}
      >
        <AlertDialogTrigger data-variant="solid">Delete</AlertDialogTrigger>
        <AlertDialogBackdrop />
        <AlertDialogContent>
          <div data-slot="stack">
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription
              >There's no way to get the workspace back.</AlertDialogDescription
            >
          </div>
          <div data-slot="row">
            <AlertDialogClose>Go Back</AlertDialogClose>
            <AlertDialogClose data-variant="solid" value="confirm"
              >Delete Workspace</AlertDialogClose
            >
          </div>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  </AlertDialogContent>
</AlertDialog>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "@ui-sdk/svelte/alert-dialog"

  let attempts = 0

  async function deleteProject() {
    await new Promise((resolve) => setTimeout(resolve, 1200))
    if (attempts++ === 0) {
      throw new Error("Couldn't delete the project.")
    }
  }
</script>

<div data-slot="stack">
  <AlertDialog pendingAnnouncement="Deleting project">
    <AlertDialogTrigger>Delete Project</AlertDialogTrigger>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      <div data-slot="stack">
        <AlertDialogTitle>Delete project?</AlertDialogTitle>
        <AlertDialogDescription>
          This permanently deletes the project, its files and its deployment
          history for everyone on your team.
        </AlertDialogDescription>
      </div>
      <AlertDialogClose
        data-variant="solid"
        value="confirm"
        action={deleteProject}
      >
        {#snippet render({ props, state })}
          <div data-slot="stack">
            <p data-slot="hint" role="alert">
              {state.error instanceof Error ? state.error.message : ""}
            </p>
            <div data-slot="row">
              <AlertDialogClose>Cancel</AlertDialogClose>
              <button {...props}
                >{state.pending
                  ? "Deleting…"
                  : state.error
                    ? "Try Again"
                    : "Delete"}</button
              >
            </div>
          </div>
        {/snippet}
      </AlertDialogClose>
    </AlertDialogContent>
  </AlertDialog>
</div>

<script lang="ts">
  import { confirm } from "@ui-sdk/svelte/alert-dialog"
  import { OverlayHost } from "@ui-sdk/svelte/overlays"
  import { useLog } from "./log"

  const log = useLog()

  async function archive() {
    const yes = await confirm({
      title: "Archive this project?",
      description: "It moves to Archived, and you can restore it anytime.",
      confirmLabel: "Archive",
    })
    log(yes ? "Archived the project" : "Kept the project")
  }
</script>

<button type="button" onclick={archive}>Archive Project</button>
<OverlayHost />

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    createConfirm,
  } from "@ui-sdk/svelte/alert-dialog"
  import type { DialogContentState } from "@ui-sdk/svelte/dialog"

  const confirm = createConfirm<{ name: string }>()
  let projects = $state(["Acme", "Globex", "Initech"])
  let reset: HTMLButtonElement

  async function remove(name: string, button: HTMLButtonElement) {
    if (!(await confirm({ name }))) {
      return
    }
    const row = button.closest("li")
    const next = (
      row?.nextElementSibling ?? row?.previousElementSibling
    )?.querySelector("button")
    const target = next ?? reset
    target?.focus()
    projects = projects.filter((project) => project !== name)
  }
</script>

<div data-slot="stack">
  <div data-slot="controls">
    <button
      type="button"
      bind:this={reset}
      onclick={() => (projects = ["Acme", "Globex", "Initech"])}
    >
      Reset Projects
    </button>
  </div>
  <ul data-slot="list" aria-label="Projects">
    {#each projects as name (name)}
      <li data-slot="row">
        {name}
        <button
          type="button"
          data-size="sm"
          aria-label={`Delete ${name}`}
          onclick={(event) => remove(name, event.currentTarget)}
        >
          Delete
        </button>
      </li>
    {:else}
      <li data-slot="row">All projects deleted.</li>
    {/each}
  </ul>
  <AlertDialog controller={confirm.controller}>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      {#snippet children(state: DialogContentState<{ name: string }>)}
        <div data-slot="stack">
          <AlertDialogTitle>Delete {state.payload?.name}?</AlertDialogTitle>
          <AlertDialogDescription>
            The project and its files will be deleted for everyone on your team.
          </AlertDialogDescription>
        </div>
        <div data-slot="row">
          <AlertDialogClose>Cancel</AlertDialogClose>
          <AlertDialogClose data-variant="solid" value="confirm"
            >Delete</AlertDialogClose
          >
        </div>
      {/snippet}
    </AlertDialogContent>
  </AlertDialog>
</div>

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogBackdrop,
    AlertDialogClose,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogTitle,
    createConfirm,
  } from "@ui-sdk/svelte/alert-dialog"
  import type { DialogContentState } from "@ui-sdk/svelte/dialog"
  import { useLog } from "./log"

  const confirm = createConfirm<{ name: string }>()
  const log = useLog()

  async function review() {
    const acme = confirm({ name: "Acme" })
    const globex = confirm({ name: "Globex" })
    const [first, second] = await Promise.all([acme, globex])
    log(`Acme: ${first ? "confirmed" : "canceled"}`)
    log(`Globex: ${second ? "confirmed" : "canceled"}`)
  }
</script>

<div data-slot="stack">
  <button type="button" onclick={review}>Review Two Projects</button>
  <AlertDialog controller={confirm.controller}>
    <AlertDialogBackdrop />
    <AlertDialogContent>
      {#snippet children(state: DialogContentState<{ name: string }>)}
        <div data-slot="stack">
          <AlertDialogTitle>Archive {state.payload?.name}?</AlertDialogTitle>
          <AlertDialogDescription>
            Archived projects leave the active list. You can restore them later.
          </AlertDialogDescription>
        </div>
        <div data-slot="row">
          <AlertDialogClose>Cancel</AlertDialogClose>
          <AlertDialogClose data-variant="solid" value="confirm"
            >Archive</AlertDialogClose
          >
        </div>
      {/snippet}
    </AlertDialogContent>
  </AlertDialog>
</div>