@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiSidebar/UiSidebar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { Sidebar as ShadcnSidebar } from '@/components/core/sidebar';
+  import type { UiSidebarProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebar',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarProps>(), {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas',
+  });
+</script>
+
+<template>
+  <ShadcnSidebar :side="props.side" :variant="props.variant" :collapsible="props.collapsible">
+    <slot />
+  </ShadcnSidebar>
+</template>

package/src/components/UiSidebar/UiSidebarGroupAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { SidebarGroupAction as ShadcnSidebarGroupAction } from '@/components/core/sidebar';
+  import type { UiSidebarGroupActionProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarGroupAction',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarGroupActionProps>(), {
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarGroupAction :as-child="props.asChild">
+    <slot />
+  </ShadcnSidebarGroupAction>
+</template>

package/src/components/UiSidebar/UiSidebarGroupLabel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { SidebarGroupLabel as ShadcnSidebarGroupLabel } from '@/components/core/sidebar';
+  import type { UiSidebarGroupLabelProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarGroupLabel',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarGroupLabelProps>(), {
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarGroupLabel :as-child="props.asChild">
+    <slot />
+  </ShadcnSidebarGroupLabel>
+</template>

package/src/components/UiSidebar/UiSidebarHeaderTrigger.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { PanelLeft } from 'lucide-vue-next';
+  import { useSidebar } from '@/components/core/sidebar';
+  import {
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuItem,
+  } from '@/components/core/sidebar';
+  import UiSidebarMenuButton from './UiSidebarMenuButton.vue';
+
+  defineOptions({ name: 'UiSidebarHeaderTrigger' });
+
+  const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <SidebarHeader>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <!-- Expanded: full header with logo + title + toggle button -->
+        <UiSidebarMenuButton size="lg" class="group-data-[collapsible=icon]:hidden!">
+          <slot name="logo" />
+          <div class="grid flex-1 text-left text-sm leading-tight">
+            <slot />
+          </div>
+        </UiSidebarMenuButton>
+        <SidebarMenuAction
+          @click="toggleSidebar"
+          aria-label="Toggle sidebar"
+          class="top-1/2! -translate-y-1/2 group-data-[collapsible=icon]:hidden!"
+        >
+          <PanelLeft />
+          <span class="sr-only">Toggle sidebar</span>
+        </SidebarMenuAction>
+
+        <!-- Collapsed: logo that morphs to toggle on hover -->
+        <UiSidebarMenuButton
+          size="lg"
+          aria-label="Toggle sidebar"
+          class="hidden group-data-[collapsible=icon]:flex! group-data-[collapsible=icon]:justify-center! group/logo-trigger"
+          @click="toggleSidebar"
+        >
+          <span class="group-hover/logo-trigger:hidden">
+            <slot name="logo" />
+          </span>
+          <PanelLeft class="hidden group-hover/logo-trigger:block size-4" />
+          <span class="sr-only">Toggle sidebar</span>
+        </UiSidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarHeader>
+</template>

package/src/components/UiSidebar/UiSidebarInput.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { SidebarInput as ShadcnSidebarInput } from '@/components/core/sidebar';
+  import type { UiSidebarInputProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarInput',
+  });
+
+  const props = defineProps<UiSidebarInputProps>();
+</script>
+
+<template>
+  <ShadcnSidebarInput :placeholder="props.placeholder" />
+</template>

package/src/components/UiSidebar/UiSidebarMenuAction.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { SidebarMenuAction as ShadcnSidebarMenuAction } from '@/components/core/sidebar';
+  import type { UiSidebarMenuActionProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarMenuAction',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarMenuActionProps>(), {
+    showOnHover: false,
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarMenuAction :show-on-hover="props.showOnHover" :as-child="props.asChild">
+    <slot />
+  </ShadcnSidebarMenuAction>
+</template>

package/src/components/UiSidebar/UiSidebarMenuButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { SidebarMenuButton as ShadcnSidebarMenuButton } from '@/components/core/sidebar';
+  import type { UiSidebarMenuButtonProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarMenuButton',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarMenuButtonProps>(), {
+    variant: 'default',
+    size: 'default',
+    isActive: false,
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarMenuButton
+    :variant="props.variant"
+    :size="props.size"
+    :is-active="props.isActive"
+    :tooltip="props.tooltip"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </ShadcnSidebarMenuButton>
+</template>

package/src/components/UiSidebar/UiSidebarMenuSkeleton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { SidebarMenuSkeleton as ShadcnSidebarMenuSkeleton } from '@/components/core/sidebar';
+  import type { UiSidebarMenuSkeletonProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarMenuSkeleton',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarMenuSkeletonProps>(), {
+    showIcon: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarMenuSkeleton :show-icon="props.showIcon" />
+</template>

package/src/components/UiSidebar/UiSidebarMenuSubButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { SidebarMenuSubButton as ShadcnSidebarMenuSubButton } from '@/components/core/sidebar';
+  import type { UiSidebarMenuSubButtonProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarMenuSubButton',
+  });
+
+  const props = withDefaults(defineProps<UiSidebarMenuSubButtonProps>(), {
+    size: 'md',
+    isActive: false,
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnSidebarMenuSubButton
+    :size="props.size"
+    :is-active="props.isActive"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </ShadcnSidebarMenuSubButton>
+</template>

package/src/components/UiSidebar/UiSidebarProvider.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { SidebarProvider as ShadcnSidebarProvider } from '@/components/core/sidebar';
+  import type { UiSidebarProviderProps } from './types';
+
+  defineOptions({
+    name: 'UiSidebarProvider',
+  });
+
+  const props = defineProps<UiSidebarProviderProps>();
+
+  const open = defineModel<boolean | undefined>('open');
+</script>
+
+<template>
+  <ShadcnSidebarProvider v-model:open="open" :default-open="props.defaultOpen">
+    <slot />
+  </ShadcnSidebarProvider>
+</template>

package/src/components/UiSidebar/UiSidebarSeparator.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { SidebarSeparator as ShadcnSidebarSeparator } from '@/components/core/sidebar';
+
+  defineOptions({
+    name: 'UiSidebarSeparator',
+  });
+</script>
+
+<template>
+  <!-- !w-auto overrides base Separator's data-[orientation=horizontal]:w-full which has higher
+       CSS specificity in UnoCSS, causing width:100% + mx-2 margins to overflow the sidebar -->
+  <ShadcnSidebarSeparator class="!w-auto" />
+</template>

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

@@ -0,0 +1,221 @@
+import { fireEvent, render } from '@testing-library/vue';
+import { describe, expect, test, vi } from 'vitest';
+import {
+  UiSidebar,
+  UiSidebarContent,
+  UiSidebarGroup,
+  UiSidebarGroupContent,
+  UiSidebarInset,
+  UiSidebarMenu,
+  UiSidebarMenuButton,
+  UiSidebarMenuItem,
+  UiSidebarMenuSkeleton,
+  UiSidebarProvider,
+  UiSidebarTrigger,
+} from '../index';
+import { ref } from 'vue';
+
+describe('UiSidebar', () => {
+  test('trigger button has accessible label', () => {
+    const { getByRole } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarInset,
+        UiSidebarProvider,
+        UiSidebarTrigger,
+      },
+      template: `
+        <UiSidebarProvider>
+          <UiSidebar>
+            <UiSidebarContent>Content</UiSidebarContent>
+          </UiSidebar>
+          <UiSidebarInset>
+            <UiSidebarTrigger />
+          </UiSidebarInset>
+        </UiSidebarProvider>
+      `,
+    });
+
+    const trigger = getByRole('button', { name: /toggle sidebar/i });
+    expect(trigger).toBeInTheDocument();
+  });
+
+  test('menu button applies active state via data attribute', () => {
+    const { getByRole } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarGroup,
+        UiSidebarGroupContent,
+        UiSidebarMenu,
+        UiSidebarMenuButton,
+        UiSidebarMenuItem,
+        UiSidebarProvider,
+      },
+      template: `
+        <UiSidebarProvider>
+          <UiSidebar>
+            <UiSidebarContent>
+              <UiSidebarGroup>
+                <UiSidebarGroupContent>
+                  <UiSidebarMenu>
+                    <UiSidebarMenuItem>
+                      <UiSidebarMenuButton is-active>Active Item</UiSidebarMenuButton>
+                    </UiSidebarMenuItem>
+                  </UiSidebarMenu>
+                </UiSidebarGroupContent>
+              </UiSidebarGroup>
+            </UiSidebarContent>
+          </UiSidebar>
+        </UiSidebarProvider>
+      `,
+    });
+
+    const button = getByRole('button', { name: /active item/i });
+    expect(button).toHaveAttribute('data-active', 'true');
+  });
+
+  test('supports controlled mode via v-model:open', async () => {
+    const onUpdateOpen = vi.fn();
+    const { getByRole } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarInset,
+        UiSidebarProvider,
+        UiSidebarTrigger,
+      },
+      setup() {
+        const open = ref(true);
+        return { open, onUpdateOpen };
+      },
+      template: `
+        <UiSidebarProvider v-model:open="open" @update:open="onUpdateOpen">
+          <UiSidebar>
+            <UiSidebarContent>Content</UiSidebarContent>
+          </UiSidebar>
+          <UiSidebarInset>
+            <UiSidebarTrigger />
+          </UiSidebarInset>
+        </UiSidebarProvider>
+      `,
+    });
+
+    const trigger = getByRole('button', { name: /toggle sidebar/i });
+    await fireEvent.click(trigger);
+
+    expect(onUpdateOpen).toHaveBeenCalled();
+  });
+
+  test('provider respects defaultOpen prop', () => {
+    const { container } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarProvider,
+      },
+      template: `
+        <UiSidebarProvider :default-open="false">
+          <UiSidebar>
+            <UiSidebarContent>Content</UiSidebarContent>
+          </UiSidebar>
+        </UiSidebarProvider>
+      `,
+    });
+
+    const sidebar = container.querySelector('[data-slot="sidebar"]');
+    expect(sidebar).toHaveAttribute('data-state', 'collapsed');
+  });
+
+  test('menu button applies size variant via data attribute', () => {
+    const { getByRole } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarGroup,
+        UiSidebarGroupContent,
+        UiSidebarMenu,
+        UiSidebarMenuButton,
+        UiSidebarMenuItem,
+        UiSidebarProvider,
+      },
+      template: `
+        <UiSidebarProvider>
+          <UiSidebar>
+            <UiSidebarContent>
+              <UiSidebarGroup>
+                <UiSidebarGroupContent>
+                  <UiSidebarMenu>
+                    <UiSidebarMenuItem>
+                      <UiSidebarMenuButton size="sm">Small Item</UiSidebarMenuButton>
+                    </UiSidebarMenuItem>
+                  </UiSidebarMenu>
+                </UiSidebarGroupContent>
+              </UiSidebarGroup>
+            </UiSidebarContent>
+          </UiSidebar>
+        </UiSidebarProvider>
+      `,
+    });
+
+    const button = getByRole('button', { name: /small item/i });
+    expect(button).toHaveAttribute('data-size', 'sm');
+  });
+
+  test('menu skeleton shows icon placeholder when showIcon is true', () => {
+    const { container } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarMenu,
+        UiSidebarMenuItem,
+        UiSidebarMenuSkeleton,
+        UiSidebarProvider,
+      },
+      template: `
+        <UiSidebarProvider>
+          <UiSidebar>
+            <UiSidebarContent>
+              <UiSidebarMenu>
+                <UiSidebarMenuItem>
+                  <UiSidebarMenuSkeleton show-icon />
+                </UiSidebarMenuItem>
+              </UiSidebarMenu>
+            </UiSidebarContent>
+          </UiSidebar>
+        </UiSidebarProvider>
+      `,
+    });
+
+    expect(container.querySelector('[data-sidebar="menu-skeleton-icon"]')).toBeInTheDocument();
+  });
+
+  test('menu skeleton hides icon placeholder by default', () => {
+    const { container } = render({
+      components: {
+        UiSidebar,
+        UiSidebarContent,
+        UiSidebarMenu,
+        UiSidebarMenuItem,
+        UiSidebarMenuSkeleton,
+        UiSidebarProvider,
+      },
+      template: `
+        <UiSidebarProvider>
+          <UiSidebar>
+            <UiSidebarContent>
+              <UiSidebarMenu>
+                <UiSidebarMenuItem>
+                  <UiSidebarMenuSkeleton />
+                </UiSidebarMenuItem>
+              </UiSidebarMenu>
+            </UiSidebarContent>
+          </UiSidebar>
+        </UiSidebarProvider>
+      `,
+    });
+
+    expect(container.querySelector('[data-sidebar="menu-skeleton-icon"]')).not.toBeInTheDocument();
+  });
+});

package/src/components/UiSidebar/index.ts

@@ -0,0 +1,34 @@
+// Pure reexports — no wrapper logic needed
+export {
+  SidebarContent as UiSidebarContent,
+  SidebarFooter as UiSidebarFooter,
+  SidebarGroup as UiSidebarGroup,
+  SidebarGroupContent as UiSidebarGroupContent,
+  SidebarHeader as UiSidebarHeader,
+  SidebarInset as UiSidebarInset,
+  SidebarMenu as UiSidebarMenu,
+  SidebarMenuBadge as UiSidebarMenuBadge,
+  SidebarMenuItem as UiSidebarMenuItem,
+  SidebarMenuSub as UiSidebarMenuSub,
+  SidebarMenuSubItem as UiSidebarMenuSubItem,
+  SidebarRail as UiSidebarRail,
+  SidebarTrigger as UiSidebarTrigger,
+} from '@/components/core/sidebar';
+
+// Enhanced wrappers — add defaults, v-model, or custom props
+export { default as UiSidebar } from './UiSidebar.vue';
+export { default as UiSidebarGroupAction } from './UiSidebarGroupAction.vue';
+export { default as UiSidebarGroupLabel } from './UiSidebarGroupLabel.vue';
+export { default as UiSidebarHeaderTrigger } from './UiSidebarHeaderTrigger.vue';
+export { default as UiSidebarInput } from './UiSidebarInput.vue';
+export { default as UiSidebarMenuAction } from './UiSidebarMenuAction.vue';
+export { default as UiSidebarMenuButton } from './UiSidebarMenuButton.vue';
+export { default as UiSidebarMenuSkeleton } from './UiSidebarMenuSkeleton.vue';
+export { default as UiSidebarMenuSubButton } from './UiSidebarMenuSubButton.vue';
+export { default as UiSidebarProvider } from './UiSidebarProvider.vue';
+export { default as UiSidebarSeparator } from './UiSidebarSeparator.vue';
+
+// Re-export the composable for programmatic sidebar control
+export { useSidebar } from '@/components/core/sidebar';
+
+export type * from './types';

package/src/components/UiSidebar/types.ts

@@ -0,0 +1,168 @@
+import type { Component } from 'vue';
+
+export type UiSidebarSide = 'left' | 'right';
+
+export type UiSidebarVariant = 'sidebar' | 'floating' | 'inset';
+
+export type UiSidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+
+export type UiSidebarMenuButtonVariant = 'default' | 'outline';
+
+export type UiSidebarMenuButtonSize = 'default' | 'sm' | 'lg';
+
+export type UiSidebarMenuSubButtonSize = 'sm' | 'md';
+
+export interface UiSidebarProviderProps {
+  /**
+   * The default open state when uncontrolled.
+   * If not provided, the core provider uses cookie-based persistence
+   * (falls back to expanded if no cookie exists).
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * The controlled open state of the sidebar.
+   * - Omit for uncontrolled mode (component manages state internally)
+   * - Use `v-model:open` for controlled mode
+   */
+  open?: boolean;
+}
+
+/**
+ * A collapsible sidebar navigation component for application layouts.
+ * Use for primary navigation, page hierarchy, and secondary actions in dashboard-style applications.
+ * @category Layout
+ * @useCases navigation, dashboard layout, app shell, admin panel, settings menu
+ * @keywords sidebar, navigation, menu, drawer, collapsible, layout
+ * @related UiDrawer, UiSheet
+ */
+export interface UiSidebarProps {
+  /**
+   * Which side the sidebar appears on.
+   * @default 'left'
+   */
+  side?: UiSidebarSide;
+
+  /**
+   * The visual variant of the sidebar.
+   * - `sidebar`: Standard fixed sidebar with border
+   * - `floating`: Floating sidebar with shadow and rounded corners
+   * - `inset`: Sidebar that shares background with main content
+   * @default 'sidebar'
+   */
+  variant?: UiSidebarVariant;
+
+  /**
+   * How the sidebar collapses.
+   * - `offcanvas`: Slides completely off screen
+   * - `icon`: Collapses to icon-only width
+   * - `none`: Never collapses (always expanded)
+   * @default 'offcanvas'
+   */
+  collapsible?: UiSidebarCollapsible;
+}
+
+export interface UiSidebarGroupLabelProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiSidebarGroupActionProps {
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiSidebarMenuButtonProps {
+  /**
+   * The visual variant of the button.
+   * @default 'default'
+   */
+  variant?: UiSidebarMenuButtonVariant;
+
+  /**
+   * The size of the button.
+   * @default 'default'
+   */
+  size?: UiSidebarMenuButtonSize;
+
+  /**
+   * Whether the button represents the currently active item.
+   * @default false
+   */
+  isActive?: boolean;
+
+  /**
+   * Tooltip text or component to show when sidebar is collapsed.
+   * Only visible in icon-collapsed mode.
+   */
+  tooltip?: string | Component;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiSidebarMenuActionProps {
+  /**
+   * Whether to show the action only on hover of the parent menu item.
+   * @default false
+   */
+  showOnHover?: boolean;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiSidebarMenuSubButtonProps {
+  /**
+   * The size of the sub-button.
+   * @default 'md'
+   */
+  size?: UiSidebarMenuSubButtonSize;
+
+  /**
+   * Whether the button represents the currently active item.
+   * @default false
+   */
+  isActive?: boolean;
+
+  /**
+   * Render as child element (merges props into slotted element instead of wrapping).
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface UiSidebarMenuSkeletonProps {
+  /**
+   * Whether to show an icon placeholder in the skeleton.
+   * @default false
+   */
+  showIcon?: boolean;
+}
+
+export interface UiSidebarInputProps {
+  /**
+   * Placeholder text for the input.
+   */
+  placeholder?: string;
+}
+
+/**
+ * Sidebar header with integrated toggle trigger (OpenAI-style).
+ * Shows logo + title when expanded; logo morphs to toggle icon on hover when collapsed.
+ */
+export interface UiSidebarHeaderTriggerProps {
+  // No props needed — behavior is slot-driven
+}