@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiAlertDialog/UiAlertDialog.stories.ts

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  UiAlertDialog,
+  UiAlertDialogAction,
+  UiAlertDialogCancel,
+  UiAlertDialogContent,
+  UiAlertDialogDescription,
+  UiAlertDialogFooter,
+  UiAlertDialogHeader,
+  UiAlertDialogTitle,
+  UiAlertDialogTrigger,
+} from './index';
+import { UiButton } from '../UiButton';
+
+const meta: Meta<typeof UiAlertDialog> = {
+  title: 'Primitives/UiAlertDialog',
+  component: UiAlertDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiAlertDialog>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import {
+  UiAlertDialog,
+  UiAlertDialogAction,
+  UiAlertDialogCancel,
+  UiAlertDialogContent,
+  UiAlertDialogDescription,
+  UiAlertDialogFooter,
+  UiAlertDialogHeader,
+  UiAlertDialogTitle,
+  UiAlertDialogTrigger,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAlertDialog>
+    <UiAlertDialogTrigger as-child>
+      <UiButton variant="outline">Show Dialog</UiButton>
+    </UiAlertDialogTrigger>
+    <UiAlertDialogContent>
+      <UiAlertDialogHeader>
+        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+        <UiAlertDialogDescription>
+          This action cannot be undone. This will permanently delete your
+          account and remove your data from our servers.
+        </UiAlertDialogDescription>
+      </UiAlertDialogHeader>
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+        <UiAlertDialogAction>Continue</UiAlertDialogAction>
+      </UiAlertDialogFooter>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>`;
+
+/**
+ * Alert dialog with Button trigger using `as-child`.
+ * This is the recommended pattern from shadcn-vue docs.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: {
+      UiAlertDialog,
+      UiAlertDialogAction,
+      UiAlertDialogCancel,
+      UiAlertDialogContent,
+      UiAlertDialogDescription,
+      UiAlertDialogFooter,
+      UiAlertDialogHeader,
+      UiAlertDialogTitle,
+      UiAlertDialogTrigger,
+      UiButton,
+    },
+    template: `
+      <UiAlertDialog>
+        <UiAlertDialogTrigger as-child>
+          <UiButton variant="outline">Show Dialog</UiButton>
+        </UiAlertDialogTrigger>
+        <UiAlertDialogContent>
+          <UiAlertDialogHeader>
+            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+            <UiAlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </UiAlertDialogDescription>
+          </UiAlertDialogHeader>
+          <UiAlertDialogFooter>
+            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+            <UiAlertDialogAction>Continue</UiAlertDialogAction>
+          </UiAlertDialogFooter>
+        </UiAlertDialogContent>
+      </UiAlertDialog>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const simpleTemplateSource = `<script setup lang="ts">
+import {
+  UiAlertDialog,
+  UiAlertDialogAction,
+  UiAlertDialogCancel,
+  UiAlertDialogContent,
+  UiAlertDialogDescription,
+  UiAlertDialogFooter,
+  UiAlertDialogHeader,
+  UiAlertDialogTitle,
+  UiAlertDialogTrigger,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAlertDialog>
+    <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
+    <UiAlertDialogContent>
+      <UiAlertDialogHeader>
+        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+        <UiAlertDialogDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        </UiAlertDialogDescription>
+      </UiAlertDialogHeader>
+      <UiAlertDialogFooter>
+        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+        <UiAlertDialogAction>Continue</UiAlertDialogAction>
+      </UiAlertDialogFooter>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>`;
+
+/**
+ * Simple alert dialog with plain text trigger.
+ */
+export const Simple: Story = {
+  render: () => ({
+    components: {
+      UiAlertDialog,
+      UiAlertDialogAction,
+      UiAlertDialogCancel,
+      UiAlertDialogContent,
+      UiAlertDialogDescription,
+      UiAlertDialogFooter,
+      UiAlertDialogHeader,
+      UiAlertDialogTitle,
+      UiAlertDialogTrigger,
+    },
+    template: `
+      <UiAlertDialog>
+        <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
+        <UiAlertDialogContent>
+          <UiAlertDialogHeader>
+            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+            <UiAlertDialogDescription>
+              This action cannot be undone. This will permanently delete your account
+              and remove your data from our servers.
+            </UiAlertDialogDescription>
+          </UiAlertDialogHeader>
+          <UiAlertDialogFooter>
+            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+            <UiAlertDialogAction>Continue</UiAlertDialogAction>
+          </UiAlertDialogFooter>
+        </UiAlertDialogContent>
+      </UiAlertDialog>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: simpleTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiAlertDialog/UiAlertDialog.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { AlertDialog as ShadcnAlertDialog } from '@/primitives/shadcn/alert-dialog';
+  import { ModelRef } from 'vue';
+
+  defineOptions({
+    name: 'UiAlertDialog',
+  });
+
+  const model: ModelRef<boolean> = defineModel<boolean>({
+    default: false,
+  });
+</script>
+
+<template>
+  <ShadcnAlertDialog v-model:open="model">
+    <slot />
+  </ShadcnAlertDialog>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogAction.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogAction as ShadcnAlertDialogAction } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogActionProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogAction',
+  });
+
+  const props = defineProps<UiAlertDialogActionProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogAction v-bind="props">
+    <slot />
+  </ShadcnAlertDialogAction>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogCancel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogCancel as ShadcnAlertDialogCancel } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogCancelProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogCancel',
+  });
+
+  const props = defineProps<UiAlertDialogCancelProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogCancel v-bind="props">
+    <slot />
+  </ShadcnAlertDialogCancel>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { AlertDialogContent as ShadcnAlertDialogContent } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogContentProps, UiAlertDialogContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogContent',
+  });
+
+  const props = defineProps<UiAlertDialogContentProps>();
+
+  const emit = defineEmits<UiAlertDialogContentEmits>();
+</script>
+
+<template>
+  <ShadcnAlertDialogContent
+    v-bind="props"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @escape-key-down="emit('escapeKeydown', $event)"
+  >
+    <slot />
+  </ShadcnAlertDialogContent>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogDescription as ShadcnAlertDialogDescription } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogDescriptionProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogDescription',
+  });
+
+  const props = defineProps<UiAlertDialogDescriptionProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogDescription v-bind="props">
+    <slot />
+  </ShadcnAlertDialogDescription>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogFooter.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { AlertDialogFooter as ShadcnAlertDialogFooter } from '@/primitives/shadcn/alert-dialog';
+
+  defineOptions({
+    name: 'UiAlertDialogFooter',
+  });
+</script>
+
+<template>
+  <ShadcnAlertDialogFooter>
+    <slot />
+  </ShadcnAlertDialogFooter>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogHeader as ShadcnAlertDialogHeader } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogHeaderProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogHeader',
+  });
+
+  const props = defineProps<UiAlertDialogHeaderProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogHeader v-bind="props">
+    <slot />
+  </ShadcnAlertDialogHeader>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AlertDialogTitle as ShadcnAlertDialogTitle } from '@/primitives/shadcn/alert-dialog';
+  import { UiAlertDialogTitleProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogTitle',
+  });
+
+  const props = defineProps<UiAlertDialogTitleProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogTitle v-bind="props">
+    <slot />
+  </ShadcnAlertDialogTitle>
+</template>

package/src/primitives/UiAlertDialog/UiAlertDialogTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { AlertDialogTrigger as ShadcnAlertDialogTrigger } from '@/primitives/shadcn/alert-dialog';
+
+  import { UiAlertDialogTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiAlertDialogTrigger',
+  });
+
+  const props = defineProps<UiAlertDialogTriggerProps>();
+</script>
+
+<template>
+  <ShadcnAlertDialogTrigger v-bind="props">
+    <slot />
+  </ShadcnAlertDialogTrigger>
+</template>

package/src/primitives/UiAlertDialog/__tests__/UiAlertDialog.test.ts

@@ -0,0 +1,184 @@
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import {
+  UiAlertDialog,
+  UiAlertDialogAction,
+  UiAlertDialogCancel,
+  UiAlertDialogContent,
+  UiAlertDialogDescription,
+  UiAlertDialogFooter,
+  UiAlertDialogHeader,
+  UiAlertDialogTitle,
+  UiAlertDialogTrigger,
+} from '../index';
+
+function renderAlertDialog(options: { open?: boolean } = {}) {
+  const { open } = options;
+
+  return render({
+    components: {
+      UiAlertDialog,
+      UiAlertDialogAction,
+      UiAlertDialogCancel,
+      UiAlertDialogContent,
+      UiAlertDialogDescription,
+      UiAlertDialogFooter,
+      UiAlertDialogHeader,
+      UiAlertDialogTitle,
+      UiAlertDialogTrigger,
+    },
+    template: `
+      <UiAlertDialog ${open !== undefined ? ':modelValue="open"' : ''}>
+        <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
+        <UiAlertDialogContent>
+          <UiAlertDialogHeader>
+            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+            <UiAlertDialogDescription>
+              This action cannot be undone.
+            </UiAlertDialogDescription>
+          </UiAlertDialogHeader>
+          <UiAlertDialogFooter>
+            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+            <UiAlertDialogAction>Continue</UiAlertDialogAction>
+          </UiAlertDialogFooter>
+        </UiAlertDialogContent>
+      </UiAlertDialog>
+    `,
+    setup() {
+      return { open };
+    },
+  });
+}
+
+function renderAlertDialogWithSpy() {
+  const onUpdateModelValue = vi.fn();
+
+  const result = render({
+    components: {
+      UiAlertDialog,
+      UiAlertDialogAction,
+      UiAlertDialogCancel,
+      UiAlertDialogContent,
+      UiAlertDialogDescription,
+      UiAlertDialogFooter,
+      UiAlertDialogHeader,
+      UiAlertDialogTitle,
+      UiAlertDialogTrigger,
+    },
+    template: `
+      <UiAlertDialog @update:modelValue="onUpdateModelValue">
+        <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
+        <UiAlertDialogContent>
+          <UiAlertDialogHeader>
+            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+            <UiAlertDialogDescription>
+              This action cannot be undone.
+            </UiAlertDialogDescription>
+          </UiAlertDialogHeader>
+          <UiAlertDialogFooter>
+            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+            <UiAlertDialogAction>Continue</UiAlertDialogAction>
+          </UiAlertDialogFooter>
+        </UiAlertDialogContent>
+      </UiAlertDialog>
+    `,
+    setup() {
+      return { onUpdateModelValue };
+    },
+  });
+
+  return { ...result, onUpdateModelValue };
+}
+
+describe('UiAlertDialog', () => {
+  test('opens when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByText } = renderAlertDialog();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+
+    await waitFor(() => {
+      expect(getByText('Are you absolutely sure?')).toBeInTheDocument();
+    });
+  });
+
+  test('is visible when modelValue is true', async () => {
+    const { getByText } = renderAlertDialog({ open: true });
+
+    await waitFor(() => {
+      expect(getByText('Are you absolutely sure?')).toBeInTheDocument();
+    });
+  });
+
+  test('closes when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByText } = renderAlertDialog();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+    await waitFor(() => {
+      expect(getByRole('alertdialog')).toBeInTheDocument();
+    });
+
+    await user.click(getByRole('button', { name: 'Cancel' }));
+
+    await waitFor(() => {
+      expect(queryByText('Are you absolutely sure?')).not.toBeInTheDocument();
+    });
+  });
+
+  test('closes when Action button is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByText } = renderAlertDialog();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+    await waitFor(() => {
+      expect(getByRole('alertdialog')).toBeInTheDocument();
+    });
+
+    await user.click(getByRole('button', { name: 'Continue' }));
+
+    await waitFor(() => {
+      expect(queryByText('Are you absolutely sure?')).not.toBeInTheDocument();
+    });
+  });
+
+  test('closes on Escape key press', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByText } = renderAlertDialog();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+    await waitFor(() => {
+      expect(getByRole('alertdialog')).toBeInTheDocument();
+    });
+
+    await user.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(queryByText('Are you absolutely sure?')).not.toBeInTheDocument();
+    });
+  });
+
+  test('emits update:modelValue when opened', async () => {
+    const user = userEvent.setup();
+    const { getByRole, onUpdateModelValue } = renderAlertDialogWithSpy();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith(true);
+  });
+
+  test('emits update:modelValue when closed via Cancel', async () => {
+    const user = userEvent.setup();
+    const { getByRole, onUpdateModelValue } = renderAlertDialogWithSpy();
+
+    await user.click(getByRole('button', { name: 'Open' }));
+    await waitFor(() => {
+      expect(getByRole('alertdialog')).toBeInTheDocument();
+    });
+
+    await user.click(getByRole('button', { name: 'Cancel' }));
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith(false);
+  });
+});

package/src/primitives/UiAlertDialog/index.ts

@@ -0,0 +1,9 @@
+export { default as UiAlertDialog } from './UiAlertDialog.vue';
+export { default as UiAlertDialogAction } from './UiAlertDialogAction.vue';
+export { default as UiAlertDialogCancel } from './UiAlertDialogCancel.vue';
+export { default as UiAlertDialogContent } from './UiAlertDialogContent.vue';
+export { default as UiAlertDialogDescription } from './UiAlertDialogDescription.vue';
+export { default as UiAlertDialogFooter } from './UiAlertDialogFooter.vue';
+export { default as UiAlertDialogHeader } from './UiAlertDialogHeader.vue';
+export { default as UiAlertDialogTitle } from './UiAlertDialogTitle.vue';
+export { default as UiAlertDialogTrigger } from './UiAlertDialogTrigger.vue';

package/src/primitives/UiAlertDialog/types.ts

@@ -0,0 +1,83 @@
+/**
+ * Common prop inside the sub-components.
+ */
+export type UiAlertSubComponentCommonProps = {
+  asChild?: boolean;
+};
+
+/**
+ * A modal dialog for confirmations that interrupt the user. Use for
+ * destructive actions, important decisions, or critical confirmations.
+ *
+ * @category Overlays
+ * @useCases confirm delete, destructive action, important confirmation, warning
+ * @keywords alert, dialog, modal, confirm, warning, destructive, popup
+ * @related UiPopover
+ */
+export type UiAlertDialogContentProps = UiAlertSubComponentCommonProps & {
+  /**
+   * Prop to disable pointer events outside the dialog
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+};
+
+/**
+ * Emit options inside the UiAlertDialogContent
+ */
+export type UiAlertDialogContentEmits = {
+  /**
+   * Event handler called when focus moves to the destructive action after opening.
+   */
+  (e: 'openAutoFocus', event: Event): void;
+  /**
+   * Event handler called when focus moves to the trigger after closing.
+   */
+  (e: 'closeAutoFocus', event: Event): void;
+  /**
+   * Event handler called when interacted outside the component.
+   */
+  (e: 'interactOutside', event: Event): void;
+  /**
+   * Event handler called when focus goes outside the component.
+   */
+  (e: 'focusOutside', event: Event): void;
+  /**
+   * Event handler called when pointer down the component.
+   */
+  (e: 'pointerDownOutside', event: Event): void;
+  /**
+   * Event handler called when the escape key is down.
+   */
+  (e: 'escapeKeydown', event: KeyboardEvent): void;
+};
+
+/**
+ * Props for UiAlertDialogTrigger component.
+ */
+export type UiAlertDialogTriggerProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogCancel component.
+ */
+export type UiAlertDialogCancelProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogAction component.
+ */
+export type UiAlertDialogActionProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogHeader component.
+ */
+export type UiAlertDialogHeaderProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogTitle component.
+ */
+export type UiAlertDialogTitleProps = UiAlertSubComponentCommonProps & {};
+
+/**
+ * Props for UiAlertDialogDescription component.
+ */
+export type UiAlertDialogDescriptionProps = UiAlertSubComponentCommonProps & {};