@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiTable/types.ts

@@ -0,0 +1,67 @@
+/**
+ * A basic HTML table with styled rows, headers, and cells. Use for
+ * simple tabular data without sorting, filtering, or pagination needs.
+ * @category Layout
+ * @useCases simple data display, static table, price list, comparison table
+ * @keywords table, row, cell, header, grid, data, tabular
+ * @related UiDataTable
+ */
+export interface UiTableRowProps {
+  /**
+   * Whether the row is currently selected.
+   * Sets the data-state attribute for styling.
+   * @default false
+   */
+  selected?: boolean;
+}
+
+/**
+ * Props for UiTableHead component.
+ * Represents a header cell in the table (th element).
+ */
+export interface UiTableHeadProps {
+  /**
+   * Number of columns the header cell should span.
+   */
+  colspan?: number;
+
+  /**
+   * Number of rows the header cell should span.
+   */
+  rowspan?: number;
+
+  /**
+   * Scope of the header cell for accessibility.
+   * @default 'col'
+   */
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+}
+
+/**
+ * Props for UiTableCell component.
+ * Represents a data cell in the table (td element).
+ */
+export interface UiTableCellProps {
+  /**
+   * Number of columns the cell should span.
+   */
+  colspan?: number;
+
+  /**
+   * Number of rows the cell should span.
+   */
+  rowspan?: number;
+}
+
+/**
+ * Props for UiTableEmpty component.
+ * Displays an empty state message when the table has no data.
+ */
+export interface UiTableEmptyProps {
+  /**
+   * Number of columns the empty state should span.
+   * Should match the total number of columns in your table.
+   * @default 1
+   */
+  colspan?: number;
+}

package/src/components/UiTabs/UiTabs.stories.ts

@@ -0,0 +1,475 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent } from './index';
+
+const meta: Meta<typeof UiTabs> = {
+  title: 'Components/UiTabs',
+  component: UiTabs,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The controlled value of the active tab (use with v-model)',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'The default active tab value (uncontrolled)',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the tabs',
+    },
+    activationMode: {
+      control: 'select',
+      options: ['automatic', 'manual'],
+      description: 'Whether tabs activate on focus or click',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    activationMode: 'automatic',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiTabs>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import {
+  UiTabs,
+  UiTabsList,
+  UiTabsTrigger,
+  UiTabsContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTabs default-value="account">
+    <UiTabsList>
+      <UiTabsTrigger value="account">Account</UiTabsTrigger>
+      <UiTabsTrigger value="password">Password</UiTabsTrigger>
+      <UiTabsTrigger value="settings">Settings</UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="account">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">Account</h3>
+        <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="password">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">Password</h3>
+        <p class="text-sm text-muted-foreground">Change your password and security settings.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="settings">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">Settings</h3>
+        <p class="text-sm text-muted-foreground">Configure your application settings.</p>
+      </div>
+    </UiTabsContent>
+  </UiTabs>
+</template>`;
+
+/**
+ * Default tabs with automatic tab switching.
+ * Click on a tab to switch to its content.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
+    setup() {
+      const activeTab = ref(args.modelValue ?? 'account');
+      watch(
+        () => args.modelValue,
+        (val) => {
+          if (val) activeTab.value = val;
+        },
+      );
+      return { args, activeTab };
+    },
+    template: `
+      <UiTabs 
+        v-model="activeTab" 
+        :orientation="args.orientation"
+        :activation-mode="args.activationMode"
+      >
+        <UiTabsList>
+          <UiTabsTrigger value="account">Account</UiTabsTrigger>
+          <UiTabsTrigger value="password">Password</UiTabsTrigger>
+          <UiTabsTrigger value="settings">Settings</UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="account">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">Account</h3>
+            <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="password">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">Password</h3>
+            <p class="text-sm text-muted-foreground">Change your password and security settings.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="settings">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">Settings</h3>
+            <p class="text-sm text-muted-foreground">Configure your application settings.</p>
+          </div>
+        </UiTabsContent>
+      </UiTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const withDisabledTabTemplateSource = `<script setup lang="ts">
+import {
+  UiTabs,
+  UiTabsList,
+  UiTabsTrigger,
+  UiTabsContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTabs default-value="tab1">
+    <UiTabsList>
+      <UiTabsTrigger value="tab1">Active Tab</UiTabsTrigger>
+      <UiTabsTrigger value="tab2" :disabled="true">Disabled Tab</UiTabsTrigger>
+      <UiTabsTrigger value="tab3">Another Tab</UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="tab1">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">Content for the first tab.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="tab2">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">This content is for the disabled tab.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="tab3">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">Content for the third tab.</p>
+      </div>
+    </UiTabsContent>
+  </UiTabs>
+</template>`;
+
+/**
+ * Tabs with a disabled tab that cannot be selected.
+ */
+export const WithDisabledTab: Story = {
+  render: () => ({
+    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
+    template: `
+      <UiTabs default-value="tab1">
+        <UiTabsList>
+          <UiTabsTrigger value="tab1">Active Tab</UiTabsTrigger>
+          <UiTabsTrigger value="tab2" :disabled="true">Disabled Tab</UiTabsTrigger>
+          <UiTabsTrigger value="tab3">Another Tab</UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="tab1">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">Content for the first tab.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="tab2">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">This content is for the disabled tab.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="tab3">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">Content for the third tab.</p>
+          </div>
+        </UiTabsContent>
+      </UiTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withDisabledTabTemplateSource,
+      },
+    },
+  },
+};
+
+const verticalTemplateSource = `<script setup lang="ts">
+import {
+  UiTabs,
+  UiTabsList,
+  UiTabsTrigger,
+  UiTabsContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTabs default-value="general" orientation="vertical" class="flex-row">
+    <UiTabsList class="flex-col h-auto">
+      <UiTabsTrigger value="general">General</UiTabsTrigger>
+      <UiTabsTrigger value="security">Security</UiTabsTrigger>
+      <UiTabsTrigger value="notifications">Notifications</UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="general">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">General</h3>
+        <p class="text-sm text-muted-foreground">General settings content.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="security">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">Security</h3>
+        <p class="text-sm text-muted-foreground">Security settings content.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="notifications">
+      <div class="p-4">
+        <h3 class="text-lg font-medium">Notifications</h3>
+        <p class="text-sm text-muted-foreground">Notification preferences content.</p>
+      </div>
+    </UiTabsContent>
+  </UiTabs>
+</template>`;
+
+/**
+ * Vertical tabs with side-by-side layout.
+ * Set `orientation="vertical"` for vertically stacked tabs.
+ */
+export const Vertical: Story = {
+  render: () => ({
+    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
+    template: `
+      <UiTabs default-value="general" orientation="vertical" class="flex-row">
+        <UiTabsList class="flex-col h-auto">
+          <UiTabsTrigger value="general">General</UiTabsTrigger>
+          <UiTabsTrigger value="security">Security</UiTabsTrigger>
+          <UiTabsTrigger value="notifications">Notifications</UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="general">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">General</h3>
+            <p class="text-sm text-muted-foreground">General settings content.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="security">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">Security</h3>
+            <p class="text-sm text-muted-foreground">Security settings content.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="notifications">
+          <div class="p-4">
+            <h3 class="text-lg font-medium">Notifications</h3>
+            <p class="text-sm text-muted-foreground">Notification preferences content.</p>
+          </div>
+        </UiTabsContent>
+      </UiTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: verticalTemplateSource,
+      },
+    },
+  },
+};
+
+const manualActivationTemplateSource = `<script setup lang="ts">
+import {
+  UiTabs,
+  UiTabsList,
+  UiTabsTrigger,
+  UiTabsContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTabs default-value="tab1" activation-mode="manual">
+    <UiTabsList>
+      <UiTabsTrigger value="tab1">Tab 1</UiTabsTrigger>
+      <UiTabsTrigger value="tab2">Tab 2</UiTabsTrigger>
+      <UiTabsTrigger value="tab3">Tab 3</UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="tab1">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">Click to activate tabs (keyboard focus won't auto-switch).</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="tab2">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">Second tab content.</p>
+      </div>
+    </UiTabsContent>
+    <UiTabsContent value="tab3">
+      <div class="p-4">
+        <p class="text-sm text-muted-foreground">Third tab content.</p>
+      </div>
+    </UiTabsContent>
+  </UiTabs>
+</template>`;
+
+/**
+ * Manual activation mode requires pressing Enter/Space to switch tabs.
+ * Useful when tab content is expensive to render.
+ */
+export const ManualActivation: Story = {
+  render: () => ({
+    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
+    template: `
+      <UiTabs default-value="tab1" activation-mode="manual">
+        <UiTabsList>
+          <UiTabsTrigger value="tab1">Tab 1</UiTabsTrigger>
+          <UiTabsTrigger value="tab2">Tab 2</UiTabsTrigger>
+          <UiTabsTrigger value="tab3">Tab 3</UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="tab1">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">Click to activate tabs (keyboard focus won't auto-switch).</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="tab2">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">Second tab content.</p>
+          </div>
+        </UiTabsContent>
+        <UiTabsContent value="tab3">
+          <div class="p-4">
+            <p class="text-sm text-muted-foreground">Third tab content.</p>
+          </div>
+        </UiTabsContent>
+      </UiTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: manualActivationTemplateSource,
+      },
+    },
+  },
+};
+
+const controlledTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiTabs,
+  UiTabsList,
+  UiTabsTrigger,
+  UiTabsContent,
+} from '@aleph-alpha/ui-library'
+
+const activeTab = ref('overview')
+
+function goToDetails() {
+  activeTab.value = 'details'
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center gap-4">
+      <p class="text-sm">Current tab: <strong>{{ activeTab }}</strong></p>
+      <button 
+        class="px-3 py-1 text-sm bg-primary rounded-md"
+        @click="goToDetails"
+      >
+        Go to Details
+      </button>
+    </div>
+    
+    <UiTabs v-model="activeTab">
+      <UiTabsList>
+        <UiTabsTrigger value="overview">Overview</UiTabsTrigger>
+        <UiTabsTrigger value="details">Details</UiTabsTrigger>
+        <UiTabsTrigger value="history">History</UiTabsTrigger>
+      </UiTabsList>
+      <UiTabsContent value="overview">
+        <div class="p-4">
+          <p class="text-sm text-muted-foreground">Overview content.</p>
+        </div>
+      </UiTabsContent>
+      <UiTabsContent value="details">
+        <div class="p-4">
+          <p class="text-sm text-muted-foreground">Details content.</p>
+        </div>
+      </UiTabsContent>
+      <UiTabsContent value="history">
+        <div class="p-4">
+          <p class="text-sm text-muted-foreground">History content.</p>
+        </div>
+      </UiTabsContent>
+    </UiTabs>
+  </div>
+</template>`;
+
+/**
+ * Controlled tabs with programmatic tab switching.
+ * Use `v-model` to control the active tab from parent.
+ */
+export const Controlled: Story = {
+  render: () => ({
+    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
+    setup() {
+      const activeTab = ref('overview');
+      function goToDetails() {
+        activeTab.value = 'details';
+      }
+      return { activeTab, goToDetails };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex items-center gap-4">
+          <p class="text-sm">Current tab: <strong>{{ activeTab }}</strong></p>
+          <button 
+            class="px-3 py-1 text-sm bg-primary rounded-md"
+            @click="goToDetails"
+          >
+            Go to Details
+          </button>
+        </div>
+        
+        <UiTabs v-model="activeTab">
+          <UiTabsList>
+            <UiTabsTrigger value="overview">Overview</UiTabsTrigger>
+            <UiTabsTrigger value="details">Details</UiTabsTrigger>
+            <UiTabsTrigger value="history">History</UiTabsTrigger>
+          </UiTabsList>
+          <UiTabsContent value="overview">
+            <div class="p-4">
+              <p class="text-sm text-muted-foreground">Overview content.</p>
+            </div>
+          </UiTabsContent>
+          <UiTabsContent value="details">
+            <div class="p-4">
+              <p class="text-sm text-muted-foreground">Details content.</p>
+            </div>
+          </UiTabsContent>
+          <UiTabsContent value="history">
+            <div class="p-4">
+              <p class="text-sm text-muted-foreground">History content.</p>
+            </div>
+          </UiTabsContent>
+        </UiTabs>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: controlledTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiTabs/UiTabs.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { Tabs as ShadcnTabs } from '@/components/core/tabs';
+  import type { UiTabsProps, UiTabsEmits } from './types';
+
+  defineOptions({
+    name: 'UiTabs',
+  });
+
+  const props = defineProps<UiTabsProps>();
+
+  const emit = defineEmits<UiTabsEmits>();
+
+  // reka-ui emits string | number, but our public API only exposes string.
+  // Defensive coercion ensures compatibility if the underlying library emits a number.
+  function handleModelValueUpdate(value: string | number) {
+    emit('update:modelValue', String(value));
+  }
+</script>
+
+<template>
+  <ShadcnTabs
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :dir="props.dir"
+    :activation-mode="props.activationMode"
+    @update:model-value="handleModelValueUpdate"
+  >
+    <slot />
+  </ShadcnTabs>
+</template>

package/src/components/UiTabs/UiTabsContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { TabsContent as ShadcnTabsContent } from '@/components/core/tabs';
+  import type { UiTabsContentProps } from './types';
+
+  defineOptions({
+    name: 'UiTabsContent',
+  });
+
+  const props = defineProps<UiTabsContentProps>();
+</script>
+
+<template>
+  <ShadcnTabsContent :value="props.value" :force-mount="props.forceMount">
+    <slot />
+  </ShadcnTabsContent>
+</template>

package/src/components/UiTabs/UiTabsList.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { TabsList as ShadcnTabsList } from '@/components/core/tabs';
+  import type { UiTabsListProps } from './types';
+
+  defineOptions({
+    name: 'UiTabsList',
+  });
+
+  const props = defineProps<UiTabsListProps>();
+</script>
+
+<template>
+  <ShadcnTabsList :loop="props.loop">
+    <slot />
+  </ShadcnTabsList>
+</template>

package/src/components/UiTabs/UiTabsTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { TabsTrigger as ShadcnTabsTrigger } from '@/components/core/tabs';
+  import type { UiTabsTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiTabsTrigger',
+  });
+
+  const props = defineProps<UiTabsTriggerProps>();
+</script>
+
+<template>
+  <ShadcnTabsTrigger :value="props.value" :disabled="props.disabled">
+    <slot />
+  </ShadcnTabsTrigger>
+</template>

package/src/components/UiTabs/types.ts

@@ -0,0 +1,67 @@
+/** Orientation of the tabs. */
+export type UiTabsOrientation = 'horizontal' | 'vertical';
+
+/** Reading direction for the tabs. */
+export type UiTabsDir = 'ltr' | 'rtl';
+
+/**
+ * Activation mode for tabs.
+ */
+export type UiTabsActivationMode = 'automatic' | 'manual';
+
+/**
+ * Tabbed navigation for switching between content panels. Use for
+ * organizing related content into separate views.
+ * @category Navigation
+ * @useCases content sections, view switcher, settings tabs, navigation
+ * @keywords tabs, tablist, panel, navigation, switch, section
+ * @related UiAccordion
+ */
+export type UiTabsProps = {
+  /** The controlled value of the active tab when using `v-model` for two-way binding. */
+  modelValue?: string;
+  /** The value of the tab that should be active when initially rendered (uncontrolled). */
+  defaultValue?: string;
+  /** The orientation of the tabs. */
+  orientation?: UiTabsOrientation;
+  /** The reading direction. */
+  dir?: UiTabsDir;
+  /** Whether tabs are activated automatically on focus or manually on click. */
+  activationMode?: UiTabsActivationMode;
+};
+
+/**
+ * Emits for the UiTabs root component.
+ */
+export type UiTabsEmits = {
+  /** Emitted when the active tab changes. */
+  'update:modelValue': [value: string];
+};
+
+/**
+ * Props for the UiTabsList component.
+ */
+export type UiTabsListProps = {
+  /** Whether keyboard navigation should loop from last to first and vice versa. */
+  loop?: boolean;
+};
+
+/**
+ * Props for the UiTabsTrigger component.
+ */
+export type UiTabsTriggerProps = {
+  /** Unique value that associates the trigger with a content panel (required). */
+  value: string;
+  /** Whether the tab trigger is disabled. */
+  disabled?: boolean;
+};
+
+/**
+ * Props for the UiTabsContent component.
+ */
+export type UiTabsContentProps = {
+  /** Unique value that associates the content with a trigger (required). */
+  value: string;
+  /** Force mounting when more control is needed (useful for animations). */
+  forceMount?: boolean;
+};