AlertDialog

import * as React from "react";
const alertDialogFixture = {
  id: "alert-dialog",
  trigger: "Tear down…",
  title: "Tear down ledger-api?",
  description: "This cannot be undone.",
  cancelLabel: "Cancel",
  confirmLabel: "Tear down",
  destructive: true,
  dismissable: false,
} satisfies {
  id: string;
  trigger: string;
  title: string;
  description: string;
  cancelLabel: string;
  confirmLabel: string;
  destructive: boolean;
  dismissable: boolean;
};
 
import { AlertDialog, Button } from "@grassroot/ui-react";
 
export default function AlertDialogDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <Button onClick={() => setOpen(true)}>{alertDialogFixture.trigger}</Button>
      <AlertDialog
        open={open}
        onOpenChange={setOpen}
        onConfirm={() => undefined}
        title={alertDialogFixture.title}
        description={alertDialogFixture.description}
        cancelLabel={alertDialogFixture.cancelLabel}
        confirmLabel={alertDialogFixture.confirmLabel}
        destructive={alertDialogFixture.destructive}
        dismissable={alertDialogFixture.dismissable}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Button, AlertDialog } from "@grassroot/ui-vue";
const alertDialogFixture = {
  id: "alert-dialog",
  trigger: "Tear down…",
  title: "Tear down ledger-api?",
  description: "This cannot be undone.",
  cancelLabel: "Cancel",
  confirmLabel: "Tear down",
  destructive: true,
  dismissable: false,
} satisfies {
  id: string;
  trigger: string;
  title: string;
  description: string;
  cancelLabel: string;
  confirmLabel: string;
  destructive: boolean;
  dismissable: boolean;
};
 
const open = ref(false);
</script>
 
<template>
  <div>
    <Button @click="open = true">{{ alertDialogFixture.trigger }}</Button>
    <AlertDialog
      v-model:open="open"
      :confirm-label="alertDialogFixture.confirmLabel"
      :cancel-label="alertDialogFixture.cancelLabel"
      :destructive="alertDialogFixture.destructive"
      :dismissable="alertDialogFixture.dismissable"
    >
      <template #title>{{ alertDialogFixture.title }}</template>
      <template #description>{{ alertDialogFixture.description }}</template>
    </AlertDialog>
  </div>
</template>

import { Component, signal } from "@angular/core";
import {
  GrassrootButton,
  GrassrootAlertDialog,
  GrassrootDialogDescription,
  GrassrootDialogTitle,
} from "@grassroot/ui-angular";
const alertDialogFixture = {
  id: "alert-dialog",
  trigger: "Tear down…",
  title: "Tear down ledger-api?",
  description: "This cannot be undone.",
  cancelLabel: "Cancel",
  confirmLabel: "Tear down",
  destructive: true,
  dismissable: false,
} satisfies {
  id: string;
  trigger: string;
  title: string;
  description: string;
  cancelLabel: string;
  confirmLabel: string;
  destructive: boolean;
  dismissable: boolean;
};
 
@Component({
  selector: "app-alert-dialog-demo",
  standalone: true,
  imports: [
    GrassrootButton,
    GrassrootAlertDialog,
    GrassrootDialogTitle,
    GrassrootDialogDescription,
  ],
  template: `
    <div>
      <grassroot-button (click)="open.set(true)">{{ fixture.trigger }}</grassroot-button>
      <grassroot-alert-dialog
        [open]="open()"
        (openChange)="open.set($event)"
        (confirm)="confirmed()"
        [confirmLabel]="fixture.confirmLabel"
        [cancelLabel]="fixture.cancelLabel"
        [destructive]="fixture.destructive"
        [dismissable]="fixture.dismissable"
      >
        <h2 grassrootDialogTitle>{{ fixture.title }}</h2>
        <p grassrootDialogDescription>{{ fixture.description }}</p>
      </grassroot-alert-dialog>
    </div>
  `,
})
export class AlertDialogDemoComponent {
  readonly open = signal(false);
  protected readonly fixture = alertDialogFixture;
  protected confirmed(): void {}
}
 
export default AlertDialogDemoComponent;

<script lang="ts">
  import { Button, AlertDialog } from "@grassroot/ui-svelte";
  const alertDialogFixture = {
    id: "alert-dialog",
    trigger: "Tear down…",
    title: "Tear down ledger-api?",
    description: "This cannot be undone.",
    cancelLabel: "Cancel",
    confirmLabel: "Tear down",
    destructive: true,
    dismissable: false,
  } satisfies {
    id: string;
    trigger: string;
    title: string;
    description: string;
    cancelLabel: string;
    confirmLabel: string;
    destructive: boolean;
    dismissable: boolean;
  };
 
  let open = $state(false);
</script>
 
{#snippet title()}{alertDialogFixture.title}{/snippet}
{#snippet description()}{alertDialogFixture.description}{/snippet}
<div>
  <Button onClick={() => (open = true)}>{alertDialogFixture.trigger}</Button>
  <AlertDialog
    {open}
    onOpenChange={(next) => (open = next)}
    onConfirm={() => undefined}
    {title}
    {description}
    cancelLabel={alertDialogFixture.cancelLabel}
    confirmLabel={alertDialogFixture.confirmLabel}
    destructive={alertDialogFixture.destructive}
    dismissable={alertDialogFixture.dismissable}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Button, AlertDialog } from "@grassroot/ui-solid";
const alertDialogFixture = {
  id: "alert-dialog",
  trigger: "Tear down…",
  title: "Tear down ledger-api?",
  description: "This cannot be undone.",
  cancelLabel: "Cancel",
  confirmLabel: "Tear down",
  destructive: true,
  dismissable: false,
} satisfies {
  id: string;
  trigger: string;
  title: string;
  description: string;
  cancelLabel: string;
  confirmLabel: string;
  destructive: boolean;
  dismissable: boolean;
};
 
export default function AlertDialogDemo() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <div>
      <Button onClick={() => setOpen(true)}>{alertDialogFixture.trigger}</Button>
      <AlertDialog
        open={open()}
        onOpenChange={setOpen}
        onConfirm={() => {}}
        title={alertDialogFixture.title}
        description={alertDialogFixture.description}
        cancelLabel={alertDialogFixture.cancelLabel}
        confirmLabel={alertDialogFixture.confirmLabel}
        destructive={alertDialogFixture.destructive}
        dismissable={alertDialogFixture.dismissable}
      />
    </div>
  );
}