@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiSheet/__tests__/UiSheet.test.ts

@@ -0,0 +1,229 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test, vi } from 'vitest';
+import {
+  UiSheet,
+  UiSheetClose,
+  UiSheetContent,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetTrigger,
+} from '../index';
+import { UiButton } from '../../UiButton';
+import { ref } from 'vue';
+
+describe('UiSheet', () => {
+  test('emits update:open when trigger is clicked', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByText } = render({
+      components: {
+        UiSheet,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiSheet @update:open="onUpdateOpen">
+          <UiSheetTrigger>Open</UiSheetTrigger>
+          <UiSheetContent>
+            <UiSheetHeader>
+              <UiSheetTitle>Title</UiSheetTitle>
+              <UiSheetDescription>Description</UiSheetDescription>
+            </UiSheetHeader>
+            Content
+          </UiSheetContent>
+        </UiSheet>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(onUpdateOpen).toHaveBeenCalledWith(true);
+  });
+
+  test('works with as-child pattern and UiButton', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByRole } = render({
+      components: {
+        UiSheet,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+        UiButton,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiSheet @update:open="onUpdateOpen">
+          <UiSheetTrigger as-child>
+            <UiButton variant="outline">Open Sheet</UiButton>
+          </UiSheetTrigger>
+          <UiSheetContent>
+            <UiSheetHeader>
+              <UiSheetTitle>Title</UiSheetTitle>
+              <UiSheetDescription>Description</UiSheetDescription>
+            </UiSheetHeader>
+            Content
+          </UiSheetContent>
+        </UiSheet>
+      `,
+    });
+
+    await getByRole('button', { name: 'Open Sheet' }).click();
+    expect(onUpdateOpen).toHaveBeenCalledWith(true);
+  });
+
+  test('closes via UiSheetClose', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByRole, getByText } = render({
+      components: {
+        UiSheet,
+        UiSheetClose,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetFooter,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiSheet @update:open="onUpdateOpen">
+          <UiSheetTrigger>Open</UiSheetTrigger>
+          <UiSheetContent>
+            <UiSheetHeader>
+              <UiSheetTitle>Title</UiSheetTitle>
+              <UiSheetDescription>Description</UiSheetDescription>
+            </UiSheetHeader>
+            <UiSheetFooter>
+              <UiSheetClose>Close sheet</UiSheetClose>
+            </UiSheetFooter>
+          </UiSheetContent>
+        </UiSheet>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(getByRole('dialog')).toBeInTheDocument();
+
+    await getByText('Close sheet').click();
+    expect(onUpdateOpen).toHaveBeenCalledWith(false);
+  });
+
+  test('emits escapeKeyDown and closes when Escape is pressed', async () => {
+    const onEscapeKeyDown = vi.fn();
+    const onUpdateOpen = vi.fn();
+    const { getByText, getByRole } = render({
+      components: {
+        UiSheet,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+      },
+      setup() {
+        return { onEscapeKeyDown, onUpdateOpen };
+      },
+      template: `
+        <UiSheet @update:open="onUpdateOpen">
+          <UiSheetTrigger>Open</UiSheetTrigger>
+          <UiSheetContent @escape-key-down="onEscapeKeyDown">
+            <UiSheetHeader>
+              <UiSheetTitle>Title</UiSheetTitle>
+              <UiSheetDescription>Description</UiSheetDescription>
+            </UiSheetHeader>
+            Content
+          </UiSheetContent>
+        </UiSheet>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(getByRole('dialog')).toBeInTheDocument();
+
+    await getByRole('dialog').dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    );
+
+    expect(onEscapeKeyDown).toHaveBeenCalled();
+    expect(onUpdateOpen).toHaveBeenCalledWith(false);
+  });
+
+  test('forwards class to the underlying sheet content element', async () => {
+    const { getByText, getByRole } = render({
+      components: {
+        UiSheet,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+      },
+      template: `
+        <UiSheet>
+          <UiSheetTrigger>Open</UiSheetTrigger>
+          <UiSheetContent class="my-sheet-class">
+            <UiSheetHeader>
+              <UiSheetTitle>Title</UiSheetTitle>
+              <UiSheetDescription>Description</UiSheetDescription>
+            </UiSheetHeader>
+            Content
+          </UiSheetContent>
+        </UiSheet>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(getByRole('dialog')).toHaveClass('my-sheet-class');
+  });
+
+  test('supports controlled mode via v-model:open', async () => {
+    const { getByRole, getByText } = render({
+      components: {
+        UiSheet,
+        UiSheetContent,
+        UiSheetDescription,
+        UiSheetHeader,
+        UiSheetTitle,
+        UiSheetTrigger,
+      },
+      setup() {
+        const open = ref(false);
+        return { open };
+      },
+      template: `
+        <div>
+          <button type="button" @click="open = true">Open via model</button>
+          <button type="button" @click="open = false">Close via model</button>
+          <UiSheet v-model:open="open">
+            <UiSheetTrigger>Open</UiSheetTrigger>
+            <UiSheetContent>
+              <UiSheetHeader>
+                <UiSheetTitle>Title</UiSheetTitle>
+                <UiSheetDescription>Description</UiSheetDescription>
+              </UiSheetHeader>
+              Content
+            </UiSheetContent>
+          </UiSheet>
+        </div>
+      `,
+    });
+
+    await getByText('Open via model').click();
+    expect(getByRole('dialog')).toHaveAttribute('data-state', 'open');
+
+    await getByText('Close via model').click();
+    expect(getByRole('dialog')).toHaveAttribute('data-state', 'closed');
+  });
+});

package/src/components/UiSheet/index.ts

@@ -0,0 +1,12 @@
+export {
+  Sheet as UiSheet,
+  SheetTrigger as UiSheetTrigger,
+  SheetContent as UiSheetContent,
+  SheetClose as UiSheetClose,
+  SheetHeader as UiSheetHeader,
+  SheetFooter as UiSheetFooter,
+  SheetTitle as UiSheetTitle,
+  SheetDescription as UiSheetDescription,
+} from '@/components/core/sheet';
+
+export type * from './types';

package/src/components/UiSheet/types.ts

@@ -0,0 +1,83 @@
+/**
+ * Side of the screen where the sheet slides in from.
+ */
+export type UiSheetSide = 'top' | 'right' | 'bottom' | 'left';
+
+/**
+ * A panel that slides in from the edge of the screen to display
+ * supplementary content. Use for forms, filters, detail views, or
+ * any content that complements the main screen.
+ *
+ * @category Overlays
+ * @useCases side panel, filter panel, detail view, settings panel, form drawer
+ * @keywords sheet, drawer, panel, slide, overlay, side panel
+ * @related UiDrawer, UiAlertDialog
+ */
+export interface UiSheetProps {
+  /**
+   * The controlled open state of the sheet.
+   * - Omit for uncontrolled mode (component manages state internally)
+   * - Use `v-model:open` for controlled mode
+   */
+  open?: boolean;
+
+  /**
+   * The open state of the sheet when it is initially rendered.
+   * Use when you do not need to control its open state.
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * The modality of the sheet.
+   * When set to `true`, interaction with outside elements will be disabled
+   * and only sheet content will be visible to screen readers.
+   * @default true
+   */
+  modal?: boolean;
+}
+
+/**
+ * Props for the UiSheetTrigger component.
+ * The element that opens the sheet when clicked.
+ */
+export interface UiSheetTriggerProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * Set to `true` when using custom button components like `UiButton` or `UiIconButton`.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Props for the UiSheetContent component.
+ * The main content container for the sheet.
+ */
+export interface UiSheetContentProps {
+  /**
+   * The side of the screen from which the sheet slides in.
+   * @default 'right'
+   */
+  side?: UiSheetSide;
+
+  /**
+   * Accessible label for the built-in close button (sr-only text).
+   * Override for i18n or to provide a more descriptive label.
+   * @default 'Close'
+   */
+  closeLabel?: string;
+}
+
+/**
+ * Props for the UiSheetClose component.
+ * A button that closes the sheet when clicked.
+ */
+export interface UiSheetCloseProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * Set to `true` when using a custom button for the close action.
+   * @default false
+   */
+  asChild?: boolean;
+}