feat: AlertDialog

Author: teleskop150750

README.md

@@ -34,7 +34,7 @@ Enter the component you want most in the components, leave the emojis and follow
 | Component                                                                                     | Status |
 | --------------------------------------------------------------------------------------------- | ------ |
 | [Accordion](https://vue-primitives.netlify.app/?path=/story/components-accordion--single)     | ✓      |
-| AlertDialog                                                                                   | 🚧      |
+| [AlertDialog](https://vue-primitives.netlify.app/?path=/story/components-alertdialog--styled) | ✓      |
 | [AspectRatio](https://vue-primitives.netlify.app/?path=/story/components-aspectratio--styled) | ✓      |
 | [Avatar](https://vue-primitives.netlify.app/?path=/story/components-avatar--styled)           | ✓      |
 | [Checkbox](https://vue-primitives.netlify.app/?path=/story/components-checkbox--styled)       | ✓      |

packages/vue-primitives/src/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DialogClose } from '../dialog/index.ts'
+import { useAlertDialogContentContext } from './AlertDialogContent.ts'
+
+defineOptions({
+  name: 'AlertDialogCancel',
+})
+
+const context = useAlertDialogContentContext('AlertDialogCancel')
+
+function setCancelRef(nodeRef: any) {
+  const node = nodeRef ? nodeRef.$el : undefined
+  context.cancelRef.current = node
+}
+</script>
+
+<template>
+  <DialogClose :ref="setCancelRef">
+    <slot />
+  </DialogClose>
+</template>

packages/vue-primitives/src/alert-dialog/AlertDialogContent.ts

@@ -0,0 +1,21 @@
+import type { DialogContentImplEmits } from '../dialog/DialogContentImpl.ts'
+import { type MutableRefObject, createContext } from '../hooks/index.ts'
+
+// eslint-disable-next-line ts/consistent-type-definitions
+export type AlertDialogContentEmits = {
+  /**
+   * Event handler called when auto-focusing on open.
+   * Can be prevented.
+   */
+  openAutoFocus: DialogContentImplEmits['openAutoFocus']
+}
+
+export type AlertDialogContentElement = HTMLDivElement
+
+export type AlertDialogCancelElement = HTMLButtonElement
+
+export interface AlertDialogContentContextValue {
+  cancelRef: MutableRefObject<AlertDialogCancelElement | undefined>
+}
+
+export const [provideAlertDialogContentContext, useAlertDialogContentContext] = createContext<AlertDialogContentContextValue>('AlertDialogContent')

packages/vue-primitives/src/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { DialogContent } from '../dialog/index.ts'
+import { useRef } from '../hooks/index.ts'
+import { composeEventHandlers } from '../utils/vue.ts'
+import { type AlertDialogCancelElement, type AlertDialogContentElement, type AlertDialogContentEmits, provideAlertDialogContentContext } from './AlertDialogContent.ts'
+
+defineOptions({
+  name: 'AlertDialogContent',
+})
+
+const emit = defineEmits<AlertDialogContentEmits>()
+
+const cancelRef = useRef<AlertDialogCancelElement>()
+
+provideAlertDialogContentContext({
+  cancelRef,
+})
+
+function preventDefault(event: Event) {
+  event.preventDefault()
+}
+
+const onOpenAutoFocus = composeEventHandlers((event) => {
+  emit('openAutoFocus', event)
+}, (event) => {
+  event.preventDefault()
+  cancelRef.current?.focus({ preventScroll: true })
+})
+</script>
+
+<template>
+  <DialogContent
+    role="alertdialog"
+    @open-auto-focus="onOpenAutoFocus"
+    @pointerdown-outside="preventDefault"
+    @interact-outside="preventDefault"
+  >
+    <slot />
+  </DialogContent>
+</template>

packages/vue-primitives/src/alert-dialog/AlertDialogRoot.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Dialog } from '../dialog/index.ts'
+
+defineOptions({
+  name: 'AlertDialogRoot',
+})
+</script>
+
+<template>
+  <Dialog :modal="true">
+    <slot />
+  </Dialog>
+</template>

packages/vue-primitives/src/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialogRoot } from './AlertDialogRoot.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { DialogTrigger as AlertDialogTrigger } from '../dialog/index.ts'
+export { DialogTitle as AlertDialogTitle } from '../dialog/index.ts'
+export { DialogDescription as AlertDialogDescription } from '../dialog/index.ts'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { DialogClose as AlertDialogAction } from '../dialog/index.ts'
+export { DialogOverlay as AlertDialogOverlay } from '../dialog/index.ts'
+export { DialogPortal as AlertDialogPortal } from '../dialog/index.ts'

packages/vue-primitives/src/alert-dialog/stories/AlertDialog.stories.tsx

@@ -0,0 +1,19 @@
+import CStyled from './Styled.vue'
+import CControlled from './Controlled.vue'
+import CChromatic from './Chromatic.vue'
+
+export default { title: 'Components/AlertDialog' }
+
+export function Styled() {
+  return CStyled
+}
+
+export function Controlled() {
+  return CControlled
+}
+
+export function Chromatic() {
+  return CChromatic
+}
+
+Chromatic.parameters = { chromatic: { disable: false } }