Alert Dialog

<!-- Radix `AlertDialog` → Reka UI `AlertDialogRoot`, тот же примитив. -->
<script setup lang="ts">
import { AlertDialogRoot } from "reka-ui"
</script>

<template>
  <AlertDialogRoot data-slot="alert-dialog">
    <slot />
  </AlertDialogRoot>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogAction } from "reka-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import type { ButtonVariants } from "@/components/ui/button"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    variant?: ButtonVariants["variant"]
    size?: ButtonVariants["size"]
  }>(),
  {
    variant: "default",
    size: "default",
  }
)
</script>

<template>
  <Button :variant="props.variant" :size="props.size" as-child>
    <AlertDialogAction data-slot="alert-dialog-action" :class="cn('cn-alert-dialog-action', props.class)">
      <slot />
    </AlertDialogAction>
  </Button>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogCancel } from "reka-ui"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import type { ButtonVariants } from "@/components/ui/button"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    variant?: ButtonVariants["variant"]
    size?: ButtonVariants["size"]
  }>(),
  {
    variant: "outline",
    size: "default",
  }
)
</script>

<template>
  <Button :variant="props.variant" :size="props.size" as-child>
    <AlertDialogCancel data-slot="alert-dialog-cancel" :class="cn('cn-alert-dialog-cancel', props.class)">
      <slot />
    </AlertDialogCancel>
  </Button>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogContent } from "reka-ui"
import { cn } from "@/lib/utils"
import AlertDialogOverlay from "./AlertDialogOverlay.vue"
import AlertDialogPortal from "./AlertDialogPortal.vue"

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes["class"]
    size?: "default" | "sm"
  }>(),
  {
    size: "default",
  }
)
</script>

<template>
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent
      data-slot="alert-dialog-content"
      :data-size="props.size"
      :class="
        cn(
          'cn-alert-dialog-content group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
          props.class
        )
      "
    >
      <slot />
    </AlertDialogContent>
  </AlertDialogPortal>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogDescription } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <AlertDialogDescription
    data-slot="alert-dialog-description"
    :class="cn('cn-alert-dialog-description', props.class)"
  >
    <slot />
  </AlertDialogDescription>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="alert-dialog-footer"
    :class="
      cn(
        'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div data-slot="alert-dialog-header" :class="cn('cn-alert-dialog-header', props.class)">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div data-slot="alert-dialog-media" :class="cn('cn-alert-dialog-media', props.class)">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogOverlay } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <AlertDialogOverlay
    data-slot="alert-dialog-overlay"
    :class="cn('cn-alert-dialog-overlay fixed inset-0 z-50', props.class)"
  />
</template>

<script setup lang="ts">
import { AlertDialogPortal } from "reka-ui"
</script>

<template>
  <AlertDialogPortal data-slot="alert-dialog-portal">
    <slot />
  </AlertDialogPortal>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { AlertDialogTitle } from "reka-ui"
import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <AlertDialogTitle
    data-slot="alert-dialog-title"
    :class="cn('cn-alert-dialog-title cn-font-heading', props.class)"
  >
    <slot />
  </AlertDialogTitle>
</template>

<script setup lang="ts">
import { AlertDialogTrigger } from "reka-ui"
</script>

<template>
  <AlertDialogTrigger data-slot="alert-dialog-trigger">
    <slot />
  </AlertDialogTrigger>
</template>

export { default as AlertDialog } from "./AlertDialog.vue"
export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
export { default as AlertDialogPortal } from "./AlertDialogPortal.vue"
export { default as AlertDialogOverlay } from "./AlertDialogOverlay.vue"
export { default as AlertDialogContent } from "./AlertDialogContent.vue"
export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
export { default as AlertDialogMedia } from "./AlertDialogMedia.vue"
export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
export { default as AlertDialogAction } from "./AlertDialogAction.vue"
export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"