@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiDrawer/UiDrawer.stories.ts

@@ -0,0 +1,602 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  UiDrawer,
+  UiDrawerClose,
+  UiDrawerContent,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerTrigger,
+} from '.';
+import { UiButton } from '../UiButton';
+import { ref, watch } from 'vue';
+
+/**
+ * UiDrawer presents content in a bottom-sheet style overlay.
+ * Use it for mobile-friendly secondary flows (filters, details, quick actions) that shouldn't navigate away.
+ */
+const meta: Meta<typeof UiDrawer> = {
+  title: 'Primitives/UiDrawer',
+  component: UiDrawer,
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Controlled open state (use `v-model:open` for controlled mode).',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'If true, traps focus and blocks interaction with the page while open.',
+    },
+  },
+  args: {
+    open: false,
+    modal: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiDrawer>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiDrawer>
+    <UiDrawerTrigger as-child>
+      <UiButton variant="outline">Open Drawer</UiButton>
+    </UiDrawerTrigger>
+    <UiDrawerContent>
+      <UiDrawerHeader>
+        <UiDrawerTitle>Drawer title</UiDrawerTitle>
+        <UiDrawerDescription>
+          This is a shadcn-style drawer built on top of reka-ui Dialog primitives.
+        </UiDrawerDescription>
+      </UiDrawerHeader>
+      <div class="p-4 pt-0 text-sm">
+        Put any content here.
+      </div>
+      <UiDrawerFooter>
+        <UiDrawerClose as-child>
+          <UiButton>Close</UiButton>
+        </UiDrawerClose>
+      </UiDrawerFooter>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>`;
+
+/**
+ * Basic drawer composition showing Trigger + Content + Header/Footer.
+ * Use this as the starting point for simple bottom-sheet flows.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+
+      watch(
+        () => args.open,
+        (val) => {
+          open.value = val;
+        },
+      );
+      watch(
+        () => args.modal,
+        (val) => {
+          modal.value = val;
+        },
+      );
+
+      return { open, modal };
+    },
+    template: `
+      <UiDrawer v-model:open="open" :modal="modal">
+        <UiDrawerTrigger as-child>
+          <UiButton variant="outline">Open Drawer</UiButton>
+        </UiDrawerTrigger>
+        <UiDrawerContent>
+          <UiDrawerHeader>
+            <UiDrawerTitle>Drawer title</UiDrawerTitle>
+            <UiDrawerDescription>
+              This is a shadcn-style drawer built on top of reka-ui Dialog primitives.
+            </UiDrawerDescription>
+          </UiDrawerHeader>
+          <div class="p-4 pt-0 text-sm">
+            Put any content here.
+          </div>
+          <UiDrawerFooter>
+            <UiDrawerClose as-child>
+              <UiButton>Close</UiButton>
+            </UiDrawerClose>
+          </UiDrawerFooter>
+        </UiDrawerContent>
+      </UiDrawer>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: defaultTemplateSource } },
+  },
+};
+
+const controlledTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiDrawer v-model:open="open">
+    <UiDrawerTrigger as-child>
+      <UiButton variant="outline">
+        {{ open ? 'Close' : 'Open' }} Drawer
+      </UiButton>
+    </UiDrawerTrigger>
+    <UiDrawerContent>
+      <UiDrawerHeader>
+        <UiDrawerTitle>Controlled drawer</UiDrawerTitle>
+        <UiDrawerDescription>
+          This drawer is controlled via v-model:open.
+        </UiDrawerDescription>
+      </UiDrawerHeader>
+      <div class="p-4 pt-0 text-sm space-y-3">
+        <p>Click the buttons below to close programmatically.</p>
+        <div class="flex gap-2 flex-wrap">
+          <UiButton size="sm" @click="open = false">Close via model</UiButton>
+          <UiDrawerClose as-child>
+            <UiButton size="sm" variant="outline">Close via UiDrawerClose</UiButton>
+          </UiDrawerClose>
+        </div>
+      </div>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>`;
+
+/**
+ * Controlled drawer using `v-model:open`.
+ * Use this when visibility is driven by app state (router, async flows, programmatic close).
+ */
+export const Controlled: Story = {
+  render: () => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(false);
+      return { open };
+    },
+    template: `
+      <UiDrawer v-model:open="open">
+        <UiDrawerTrigger as-child>
+          <UiButton variant="outline">
+            {{ open ? 'Close' : 'Open' }} Drawer
+          </UiButton>
+        </UiDrawerTrigger>
+        <UiDrawerContent>
+          <UiDrawerHeader>
+            <UiDrawerTitle>Controlled drawer</UiDrawerTitle>
+            <UiDrawerDescription>
+              This drawer is controlled via v-model:open.
+            </UiDrawerDescription>
+          </UiDrawerHeader>
+          <div class="p-4 pt-0 text-sm space-y-3">
+            <p>Click the buttons below to close programmatically.</p>
+            <div class="flex gap-2 flex-wrap">
+              <UiButton size="sm" @click="open = false">Close via model</UiButton>
+              <UiDrawerClose as-child>
+                <UiButton size="sm" variant="outline">Close via UiDrawerClose</UiButton>
+              </UiDrawerClose>
+            </div>
+          </div>
+        </UiDrawerContent>
+      </UiDrawer>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: controlledTemplateSource } },
+  },
+};
+
+const nonModalTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p class="text-sm text-muted-foreground">
+      Non-modal drawer: you can still interact with the page while it is open.
+    </p>
+    <UiDrawer :modal="false">
+      <UiDrawerTrigger as-child>
+        <UiButton variant="outline">Open non-modal</UiButton>
+      </UiDrawerTrigger>
+      <UiDrawerContent>
+        <UiDrawerHeader>
+          <UiDrawerTitle>Non-modal drawer</UiDrawerTitle>
+          <UiDrawerDescription>
+            Outside interaction is allowed.
+          </UiDrawerDescription>
+        </UiDrawerHeader>
+        <div class="p-4 pt-0 text-sm">
+          Try selecting text outside the drawer.
+        </div>
+        <UiDrawerFooter>
+          <UiDrawerClose as-child>
+            <UiButton>Close</UiButton>
+          </UiDrawerClose>
+        </UiDrawerFooter>
+      </UiDrawerContent>
+    </UiDrawer>
+  </div>
+</template>`;
+
+/**
+ * Non-modal drawer (`modal=false`) where outside interaction remains possible.
+ * Use this for lightweight panels that shouldn't block the rest of the UI.
+ */
+export const NonModal: Story = {
+  render: () => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    template: `
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">
+          Non-modal drawer: you can still interact with the page while it is open.
+        </p>
+        <UiDrawer :modal="false">
+          <UiDrawerTrigger as-child>
+            <UiButton variant="outline">Open non-modal</UiButton>
+          </UiDrawerTrigger>
+          <UiDrawerContent>
+            <UiDrawerHeader>
+              <UiDrawerTitle>Non-modal drawer</UiDrawerTitle>
+              <UiDrawerDescription>
+                Outside interaction is allowed.
+              </UiDrawerDescription>
+            </UiDrawerHeader>
+            <div class="p-4 pt-0 text-sm">
+              Try selecting text outside the drawer.
+            </div>
+            <UiDrawerFooter>
+              <UiDrawerClose as-child>
+                <UiButton>Close</UiButton>
+              </UiDrawerClose>
+            </UiDrawerFooter>
+          </UiDrawerContent>
+        </UiDrawer>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: nonModalTemplateSource } },
+  },
+};
+
+const withoutHandleTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiDrawer>
+    <UiDrawerTrigger as-child>
+      <UiButton variant="outline">Open (no handle)</UiButton>
+    </UiDrawerTrigger>
+    <UiDrawerContent :show-handle="false">
+      <UiDrawerHeader>
+        <UiDrawerTitle>No handle</UiDrawerTitle>
+        <UiDrawerDescription>
+          The drawer handle bar is disabled via showHandle.
+        </UiDrawerDescription>
+      </UiDrawerHeader>
+      <div class="p-4 pt-0 text-sm">
+        Content without handle.
+      </div>
+      <UiDrawerFooter>
+        <UiDrawerClose as-child>
+          <UiButton>Close</UiButton>
+        </UiDrawerClose>
+      </UiDrawerFooter>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>`;
+
+/**
+ * Drawer content without the top "handle" bar.
+ * Use this when the handle is visually distracting or you provide explicit close actions.
+ */
+export const WithoutHandle: Story = {
+  render: () => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    template: `
+      <UiDrawer>
+        <UiDrawerTrigger as-child>
+          <UiButton variant="outline">Open (no handle)</UiButton>
+        </UiDrawerTrigger>
+        <UiDrawerContent :show-handle="false">
+          <UiDrawerHeader>
+            <UiDrawerTitle>No handle</UiDrawerTitle>
+            <UiDrawerDescription>
+              The drawer handle bar is disabled via showHandle.
+            </UiDrawerDescription>
+          </UiDrawerHeader>
+          <div class="p-4 pt-0 text-sm">
+            Content without handle.
+          </div>
+          <UiDrawerFooter>
+            <UiDrawerClose as-child>
+              <UiButton>Close</UiButton>
+            </UiDrawerClose>
+          </UiDrawerFooter>
+        </UiDrawerContent>
+      </UiDrawer>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: withoutHandleTemplateSource } },
+  },
+};
+
+const longContentTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiDrawer>
+    <UiDrawerTrigger as-child>
+      <UiButton variant="outline">Open long content</UiButton>
+    </UiDrawerTrigger>
+    <UiDrawerContent>
+      <UiDrawerHeader>
+        <UiDrawerTitle>Long content</UiDrawerTitle>
+        <UiDrawerDescription>
+          Demonstrates scrolling content inside the drawer.
+        </UiDrawerDescription>
+      </UiDrawerHeader>
+      <div class="px-4 pb-4 pt-0">
+        <div class="h-80 overflow-auto rounded-md border p-3 text-sm space-y-2">
+          <p v-for="i in 30" :key="i">Row {{ i }}</p>
+        </div>
+      </div>
+      <UiDrawerFooter>
+        <UiDrawerClose as-child>
+          <UiButton>Close</UiButton>
+        </UiDrawerClose>
+      </UiDrawerFooter>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>`;
+
+/**
+ * Drawer with scrollable content inside the sheet.
+ * Use this for lists/forms that exceed the viewport height.
+ */
+export const LongContent: Story = {
+  render: () => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    template: `
+      <UiDrawer>
+        <UiDrawerTrigger as-child>
+          <UiButton variant="outline">Open long content</UiButton>
+        </UiDrawerTrigger>
+        <UiDrawerContent>
+          <UiDrawerHeader>
+            <UiDrawerTitle>Long content</UiDrawerTitle>
+            <UiDrawerDescription>
+              Demonstrates scrolling content inside the drawer.
+            </UiDrawerDescription>
+          </UiDrawerHeader>
+          <div class="px-4 pb-4 pt-0">
+            <div class="h-80 overflow-auto rounded-md border p-3 text-sm space-y-2">
+              <p v-for="i in 30" :key="i">Row {{ i }}</p>
+            </div>
+          </div>
+          <UiDrawerFooter>
+            <UiDrawerClose as-child>
+              <UiButton>Close</UiButton>
+            </UiDrawerClose>
+          </UiDrawerFooter>
+        </UiDrawerContent>
+      </UiDrawer>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: longContentTemplateSource } },
+  },
+};
+
+const openByDefaultTemplateSource = `<script setup lang="ts">
+import {
+  UiDrawer,
+  UiDrawerTrigger,
+  UiDrawerContent,
+  UiDrawerHeader,
+  UiDrawerTitle,
+  UiDrawerDescription,
+  UiDrawerFooter,
+  UiDrawerClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(true)
+</script>
+
+<template>
+  <UiDrawer v-model:open="open">
+    <UiDrawerTrigger as-child>
+      <UiButton variant="outline">Toggle Drawer</UiButton>
+    </UiDrawerTrigger>
+    <UiDrawerContent>
+      <UiDrawerHeader>
+        <UiDrawerTitle>Open by default</UiDrawerTitle>
+        <UiDrawerDescription>
+          Useful for visual regression testing.
+        </UiDrawerDescription>
+      </UiDrawerHeader>
+      <div class="p-4 pt-0 text-sm">
+        This drawer starts open.
+      </div>
+      <UiDrawerFooter>
+        <UiDrawerClose as-child>
+          <UiButton>Close</UiButton>
+        </UiDrawerClose>
+      </UiDrawerFooter>
+    </UiDrawerContent>
+  </UiDrawer>
+</template>`;
+
+/**
+ * Drawer that starts open.
+ * Use this for visual regression testing to capture drawer content without user interaction.
+ */
+export const OpenByDefault: Story = {
+  render: () => ({
+    components: {
+      UiDrawer,
+      UiDrawerClose,
+      UiDrawerContent,
+      UiDrawerDescription,
+      UiDrawerFooter,
+      UiDrawerHeader,
+      UiDrawerTitle,
+      UiDrawerTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(true);
+      return { open };
+    },
+    template: `
+      <UiDrawer v-model:open="open">
+        <UiDrawerTrigger as-child>
+          <UiButton variant="outline">Toggle Drawer</UiButton>
+        </UiDrawerTrigger>
+        <UiDrawerContent>
+          <UiDrawerHeader>
+            <UiDrawerTitle>Open by default</UiDrawerTitle>
+            <UiDrawerDescription>
+              Useful for visual regression testing.
+            </UiDrawerDescription>
+          </UiDrawerHeader>
+          <div class="p-4 pt-0 text-sm">
+            This drawer starts open.
+          </div>
+          <UiDrawerFooter>
+            <UiDrawerClose as-child>
+              <UiButton>Close</UiButton>
+            </UiDrawerClose>
+          </UiDrawerFooter>
+        </UiDrawerContent>
+      </UiDrawer>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: openByDefaultTemplateSource } },
+  },
+};

package/src/primitives/UiDrawer/UiDrawer.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Drawer as ShadcnDrawer } from '@/primitives/shadcn/drawer';
+  import type { UiDrawerProps } from './types';
+
+  defineOptions({
+    name: 'UiDrawer',
+  });
+
+  const props = withDefaults(defineProps<UiDrawerProps>(), {
+    modal: true,
+  });
+  const open = defineModel<boolean>('open');
+</script>
+
+<template>
+  <ShadcnDrawer v-model:open="open" :modal="props.modal">
+    <slot />
+  </ShadcnDrawer>
+</template>

package/src/primitives/UiDrawer/UiDrawerClose.vue

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

package/src/primitives/UiDrawer/UiDrawerContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { DrawerContent as ShadcnDrawerContent } from '@/primitives/shadcn/drawer';
+  import type { UiDrawerContentProps, UiDrawerContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiDrawerContent',
+  });
+
+  const props = withDefaults(defineProps<UiDrawerContentProps>(), {
+    disableOutsidePointerEvents: false,
+    showHandle: true,
+  });
+  const emit = defineEmits<UiDrawerContentEmits>();
+</script>
+
+<template>
+  <ShadcnDrawerContent
+    :disable-outside-pointer-events="props.disableOutsidePointerEvents"
+    :show-handle="props.showHandle"
+    @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 />
+  </ShadcnDrawerContent>
+</template>

package/src/primitives/UiDrawer/UiDrawerDescription.vue

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

package/src/primitives/UiDrawer/UiDrawerFooter.vue

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