@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiDrawer/UiDrawerHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { DrawerHeader as ShadcnDrawerHeader } from '@/primitives/shadcn/drawer';
+  import type { UiDrawerHeaderProps } from './types';
+
+  defineOptions({
+    name: 'UiDrawerHeader',
+  });
+
+  const props = defineProps<UiDrawerHeaderProps>();
+</script>
+
+<template>
+  <ShadcnDrawerHeader v-bind="props">
+    <slot />
+  </ShadcnDrawerHeader>
+</template>

package/src/primitives/UiDrawer/UiDrawerTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { DrawerTitle as ShadcnDrawerTitle } from '@/primitives/shadcn/drawer';
+  import type { UiDrawerTitleProps } from './types';
+
+  defineOptions({
+    name: 'UiDrawerTitle',
+  });
+
+  const props = defineProps<UiDrawerTitleProps>();
+</script>
+
+<template>
+  <ShadcnDrawerTitle v-bind="props">
+    <slot />
+  </ShadcnDrawerTitle>
+</template>

package/src/primitives/UiDrawer/UiDrawerTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { DrawerTrigger as ShadcnDrawerTrigger } from '@/primitives/shadcn/drawer';
+  import type { UiDrawerTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiDrawerTrigger',
+  });
+
+  defineProps<UiDrawerTriggerProps>();
+</script>
+
+<template>
+  <ShadcnDrawerTrigger :as-child="$props.asChild">
+    <slot />
+  </ShadcnDrawerTrigger>
+</template>

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

@@ -0,0 +1,229 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test, vi } from 'vitest';
+import {
+  UiDrawer,
+  UiDrawerClose,
+  UiDrawerContent,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerTrigger,
+} from '../index';
+import { UiButton } from '../../UiButton';
+import { ref } from 'vue';
+
+describe('UiDrawer', () => {
+  test('emits update:open when trigger is clicked', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByText } = render({
+      components: {
+        UiDrawer,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiDrawer @update:open="onUpdateOpen">
+          <UiDrawerTrigger>Open</UiDrawerTrigger>
+          <UiDrawerContent>
+            <UiDrawerHeader>
+              <UiDrawerTitle>Title</UiDrawerTitle>
+              <UiDrawerDescription>Description</UiDrawerDescription>
+            </UiDrawerHeader>
+            Content
+          </UiDrawerContent>
+        </UiDrawer>
+      `,
+    });
+
+    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: {
+        UiDrawer,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+        UiButton,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiDrawer @update:open="onUpdateOpen">
+          <UiDrawerTrigger as-child>
+            <UiButton variant="outline">Open Drawer</UiButton>
+          </UiDrawerTrigger>
+          <UiDrawerContent>
+            <UiDrawerHeader>
+              <UiDrawerTitle>Title</UiDrawerTitle>
+              <UiDrawerDescription>Description</UiDrawerDescription>
+            </UiDrawerHeader>
+            Content
+          </UiDrawerContent>
+        </UiDrawer>
+      `,
+    });
+
+    await getByRole('button', { name: 'Open Drawer' }).click();
+    expect(onUpdateOpen).toHaveBeenCalledWith(true);
+  });
+
+  test('closes via UiDrawerClose', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByRole, getByText } = render({
+      components: {
+        UiDrawer,
+        UiDrawerClose,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerFooter,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+      },
+      setup() {
+        return { onUpdateOpen };
+      },
+      template: `
+        <UiDrawer @update:open="onUpdateOpen">
+          <UiDrawerTrigger>Open</UiDrawerTrigger>
+          <UiDrawerContent>
+            <UiDrawerHeader>
+              <UiDrawerTitle>Title</UiDrawerTitle>
+              <UiDrawerDescription>Description</UiDrawerDescription>
+            </UiDrawerHeader>
+            <UiDrawerFooter>
+              <UiDrawerClose>Close</UiDrawerClose>
+            </UiDrawerFooter>
+          </UiDrawerContent>
+        </UiDrawer>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(getByRole('dialog')).toBeInTheDocument();
+
+    await getByText('Close').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: {
+        UiDrawer,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+      },
+      setup() {
+        return { onEscapeKeyDown, onUpdateOpen };
+      },
+      template: `
+        <UiDrawer @update:open="onUpdateOpen">
+          <UiDrawerTrigger>Open</UiDrawerTrigger>
+          <UiDrawerContent @escape-key-down="onEscapeKeyDown">
+            <UiDrawerHeader>
+              <UiDrawerTitle>Title</UiDrawerTitle>
+              <UiDrawerDescription>Description</UiDrawerDescription>
+            </UiDrawerHeader>
+            Content
+          </UiDrawerContent>
+        </UiDrawer>
+      `,
+    });
+
+    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 drawer content element', async () => {
+    const { getByText, getByRole } = render({
+      components: {
+        UiDrawer,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+      },
+      template: `
+        <UiDrawer>
+          <UiDrawerTrigger>Open</UiDrawerTrigger>
+          <UiDrawerContent class="my-drawer-class">
+            <UiDrawerHeader>
+              <UiDrawerTitle>Title</UiDrawerTitle>
+              <UiDrawerDescription>Description</UiDrawerDescription>
+            </UiDrawerHeader>
+            Content
+          </UiDrawerContent>
+        </UiDrawer>
+      `,
+    });
+
+    await getByText('Open').click();
+    expect(getByRole('dialog')).toHaveClass('my-drawer-class');
+  });
+
+  test('supports controlled mode via v-model:open', async () => {
+    const { getByRole, getByText } = render({
+      components: {
+        UiDrawer,
+        UiDrawerContent,
+        UiDrawerDescription,
+        UiDrawerHeader,
+        UiDrawerTitle,
+        UiDrawerTrigger,
+      },
+      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>
+          <UiDrawer v-model:open="open">
+            <UiDrawerTrigger>Open</UiDrawerTrigger>
+            <UiDrawerContent>
+              <UiDrawerHeader>
+                <UiDrawerTitle>Title</UiDrawerTitle>
+                <UiDrawerDescription>Description</UiDrawerDescription>
+              </UiDrawerHeader>
+              Content
+            </UiDrawerContent>
+          </UiDrawer>
+        </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/primitives/UiDrawer/index.ts

@@ -0,0 +1,8 @@
+export { default as UiDrawer } from './UiDrawer.vue';
+export { default as UiDrawerClose } from './UiDrawerClose.vue';
+export { default as UiDrawerContent } from './UiDrawerContent.vue';
+export { default as UiDrawerDescription } from './UiDrawerDescription.vue';
+export { default as UiDrawerFooter } from './UiDrawerFooter.vue';
+export { default as UiDrawerHeader } from './UiDrawerHeader.vue';
+export { default as UiDrawerTitle } from './UiDrawerTitle.vue';
+export { default as UiDrawerTrigger } from './UiDrawerTrigger.vue';

package/src/primitives/UiDrawer/types.ts

@@ -0,0 +1,96 @@
+/**
+ * A slide-out panel that appears from the edge of the screen.
+ * Use for secondary content, navigation menus, or forms that don't require full-page context.
+ *
+ * @category Overlays
+ * @useCases side panel, mobile menu, filters, settings, navigation
+ * @keywords drawer, panel, slide, sidebar, sheet, mobile
+ * @related UiSheet, UiDialog
+ */
+export interface UiDrawerProps {
+  /**
+   * The controlled open state of the drawer.
+   * - Omit for uncontrolled mode (component manages state internally)
+   * - Use `v-model:open` for controlled mode
+   */
+  open?: boolean;
+
+  /**
+   * The modality of the drawer.
+   * When set to `true`, interaction with outside elements is disabled and focus is trapped.
+   * @default true
+   */
+  modal?: boolean;
+}
+
+export interface UiDrawerTriggerProps {
+  /**
+   * 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;
+}
+
+export interface UiDrawerCloseProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiDrawerContentProps {
+  /**
+   * Prop to disable pointer events outside the dialog.
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+
+  /**
+   * Shows the small "handle" bar at the top of the drawer.
+   * @default true
+   */
+  showHandle?: boolean;
+}
+
+export interface UiDrawerContentEmits {
+  (e: 'openAutoFocus', event: Event): void;
+  (e: 'closeAutoFocus', event: Event): void;
+  (e: 'interactOutside', event: Event): void;
+  (e: 'focusOutside', event: Event): void;
+  (e: 'pointerDownOutside', event: Event): void;
+  (e: 'escapeKeyDown', event: KeyboardEvent): void;
+}
+
+export interface UiDrawerHeaderProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiDrawerFooterProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiDrawerTitleProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiDrawerDescriptionProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}