@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiAccordion/UiAccordion.stories.ts

@@ -1,476 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref, watch } from 'vue';
-import { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent } from './index';
-import { UiButton } from '@/primitives/UiButton';
-
-const meta: Meta<typeof UiAccordion> = {
-  title: 'Primitives/UiAccordion',
-  component: UiAccordion,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['single', 'multiple'],
-      description: 'Accordion type - single allows only one item open, multiple allows many',
-    },
-    collapsible: {
-      control: 'boolean',
-      description: 'Whether all items can be collapsed (only for type="single")',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the accordion is disabled',
-    },
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description:
-        'Keyboard navigation direction: vertical = Up/Down arrows, horizontal = Left/Right arrows. Does not change visual layout.',
-    },
-  },
-  args: {
-    type: 'single',
-    collapsible: true,
-    disabled: false,
-    orientation: 'vertical',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiAccordion>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import {
-  UiAccordion,
-  UiAccordionItem,
-  UiAccordionTrigger,
-  UiAccordionContent,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
-    <UiAccordionItem value="item-1">
-      <UiAccordionTrigger>Product Information</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>
-          Our flagship product combines cutting-edge technology with sleek
-          design. Built with premium materials, it offers unparalleled
-          performance and reliability.
-        </p>
-        <p class="mt-2">
-          Key features include advanced processing capabilities, and an
-          intuitive user interface designed for both beginners and experts.
-        </p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-2">
-      <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>
-          We offer worldwide shipping through trusted courier partners.
-          Standard delivery takes 3-5 business days, while express shipping
-          ensures delivery within 1-2 business days.
-        </p>
-        <p class="mt-2">
-          All orders are carefully packaged and fully insured. Track your
-          shipment in real-time through our dedicated tracking portal.
-        </p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-3">
-      <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>
-          We stand behind our products with a comprehensive 30-day return
-          policy. If you're not completely satisfied, simply return the
-          item in its original condition.
-        </p>
-        <p class="mt-2">
-          Our hassle-free return process includes free return shipping and
-          full refunds processed within 48 hours of receiving the returned
-          item.
-        </p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-  </UiAccordion>
-</template>`;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
-    setup() {
-      const activeItem = ref<string | undefined>('item-1');
-      watch(
-        () => args.modelValue,
-        (val) => {
-          if (val) activeItem.value = val as string;
-        },
-      );
-      return { args, activeItem };
-    },
-    template: `
-      <UiAccordion 
-        v-model="activeItem"
-        :type="args.type"
-        :collapsible="args.collapsible"
-        :disabled="args.disabled"
-        :orientation="args.orientation"
-        class="w-full"
-      >
-        <UiAccordionItem value="item-1">
-          <UiAccordionTrigger>Product Information</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>
-              Our flagship product combines cutting-edge technology with sleek
-              design. Built with premium materials, it offers unparalleled
-              performance and reliability.
-            </p>
-            <p class="mt-2">
-              Key features include advanced processing capabilities, and an
-              intuitive user interface designed for both beginners and experts.
-            </p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-2">
-          <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>
-              We offer worldwide shipping through trusted courier partners.
-              Standard delivery takes 3-5 business days, while express shipping
-              ensures delivery within 1-2 business days.
-            </p>
-            <p class="mt-2">
-              All orders are carefully packaged and fully insured. Track your
-              shipment in real-time through our dedicated tracking portal.
-            </p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-3">
-          <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>
-              We stand behind our products with a comprehensive 30-day return
-              policy. If you're not completely satisfied, simply return the
-              item in its original condition.
-            </p>
-            <p class="mt-2">
-              Our hassle-free return process includes free return shipping and
-              full refunds processed within 48 hours of receiving the returned
-              item.
-            </p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-      </UiAccordion>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const multipleTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiAccordion,
-  UiAccordionItem,
-  UiAccordionTrigger,
-  UiAccordionContent,
-} from '@aleph-alpha/ui-library'
-
-const openItems = ref(['item-1', 'item-2'])
-</script>
-
-<template>
-  <UiAccordion v-model="openItems" type="multiple" class="w-full">
-    <UiAccordionItem value="item-1">
-      <UiAccordionTrigger>First Section</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>This section can be open at the same time as other sections.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-2">
-      <UiAccordionTrigger>Second Section</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>Multiple sections can be expanded simultaneously.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-3">
-      <UiAccordionTrigger>Third Section</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>Click to expand or collapse any section independently.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-  </UiAccordion>
-</template>`;
-
-export const Multiple: Story = {
-  render: () => ({
-    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
-    setup() {
-      const openItems = ref(['item-1', 'item-2']);
-      return { openItems };
-    },
-    template: `
-      <UiAccordion v-model="openItems" type="multiple" class="w-full">
-        <UiAccordionItem value="item-1">
-          <UiAccordionTrigger>First Section</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>This section can be open at the same time as other sections.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-2">
-          <UiAccordionTrigger>Second Section</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>Multiple sections can be expanded simultaneously.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-3">
-          <UiAccordionTrigger>Third Section</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>Click to expand or collapse any section independently.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-      </UiAccordion>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: multipleTemplateSource,
-      },
-    },
-  },
-};
-
-const nonCollapsibleTemplateSource = `<script setup lang="ts">
-import {
-  UiAccordion,
-  UiAccordionItem,
-  UiAccordionTrigger,
-  UiAccordionContent,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
-    <UiAccordionItem value="item-1">
-      <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>Click this trigger - it won't close. One item must always be open.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-2">
-      <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>Clicking another item switches to it, but you can't close all.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-  </UiAccordion>
-</template>`;
-
-export const NonCollapsible: Story = {
-  render: () => ({
-    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
-    template: `
-      <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
-        <UiAccordionItem value="item-1">
-          <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>Click this trigger - it won't close. One item must always be open.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-2">
-          <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>Clicking another item switches to it, but you can't close all.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-      </UiAccordion>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: nonCollapsibleTemplateSource,
-      },
-    },
-  },
-};
-
-const withDisabledItemTemplateSource = `<script setup lang="ts">
-import {
-  UiAccordion,
-  UiAccordionItem,
-  UiAccordionTrigger,
-  UiAccordionContent,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
-    <UiAccordionItem value="item-1">
-      <UiAccordionTrigger>Available Item</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>This item is available and can be expanded or collapsed.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-2" :disabled="true">
-      <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>This content cannot be accessed because the item is disabled.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-    <UiAccordionItem value="item-3">
-      <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
-      <UiAccordionContent>
-        <p>This item is also available for interaction.</p>
-      </UiAccordionContent>
-    </UiAccordionItem>
-  </UiAccordion>
-</template>`;
-
-export const WithDisabledItem: Story = {
-  render: () => ({
-    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
-    template: `
-      <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
-        <UiAccordionItem value="item-1">
-          <UiAccordionTrigger>Available Item</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>This item is available and can be expanded or collapsed.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-2" :disabled="true">
-          <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>This content cannot be accessed because the item is disabled.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-        <UiAccordionItem value="item-3">
-          <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
-          <UiAccordionContent>
-            <p>This item is also available for interaction.</p>
-          </UiAccordionContent>
-        </UiAccordionItem>
-      </UiAccordion>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withDisabledItemTemplateSource,
-      },
-    },
-  },
-};
-
-const controlledTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiAccordion,
-  UiAccordionItem,
-  UiAccordionTrigger,
-  UiAccordionContent,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-
-const activeItem = ref<string | undefined>('overview')
-
-function goToDetails() {
-  activeItem.value = 'details'
-}
-
-function closeAll() {
-  activeItem.value = undefined
-}
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div class="flex items-center gap-4">
-      <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
-      <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
-      <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
-    </div>
-    
-    <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
-      <UiAccordionItem value="overview">
-        <UiAccordionTrigger>Overview</UiAccordionTrigger>
-        <UiAccordionContent>
-          <p>Overview content goes here.</p>
-        </UiAccordionContent>
-      </UiAccordionItem>
-      <UiAccordionItem value="details">
-        <UiAccordionTrigger>Details</UiAccordionTrigger>
-        <UiAccordionContent>
-          <p>Detailed information goes here.</p>
-        </UiAccordionContent>
-      </UiAccordionItem>
-      <UiAccordionItem value="history">
-        <UiAccordionTrigger>History</UiAccordionTrigger>
-        <UiAccordionContent>
-          <p>Historical data goes here.</p>
-        </UiAccordionContent>
-      </UiAccordionItem>
-    </UiAccordion>
-  </div>
-</template>`;
-
-export const Controlled: Story = {
-  render: () => ({
-    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent, UiButton },
-    setup() {
-      const activeItem = ref<string | undefined>('overview');
-      function goToDetails() {
-        activeItem.value = 'details';
-      }
-      function closeAll() {
-        activeItem.value = undefined;
-      }
-      return { activeItem, goToDetails, closeAll };
-    },
-    template: `
-      <div class="space-y-4">
-        <div class="flex items-center gap-4">
-          <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
-          <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
-          <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
-        </div>
-        
-        <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
-          <UiAccordionItem value="overview">
-            <UiAccordionTrigger>Overview</UiAccordionTrigger>
-            <UiAccordionContent>
-              <p>Overview content goes here.</p>
-            </UiAccordionContent>
-          </UiAccordionItem>
-          <UiAccordionItem value="details">
-            <UiAccordionTrigger>Details</UiAccordionTrigger>
-            <UiAccordionContent>
-              <p>Detailed information goes here.</p>
-            </UiAccordionContent>
-          </UiAccordionItem>
-          <UiAccordionItem value="history">
-            <UiAccordionTrigger>History</UiAccordionTrigger>
-            <UiAccordionContent>
-              <p>Historical data goes here.</p>
-            </UiAccordionContent>
-          </UiAccordionItem>
-        </UiAccordion>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: controlledTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiAccordion/UiAccordion.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-  import { Accordion as ShadcnAccordion } from '@/primitives/shadcn/accordion';
-  import type { UiAccordionProps, UiAccordionEmits } from './types';
-
-  defineOptions({
-    name: 'UiAccordion',
-  });
-
-  const props = defineProps<UiAccordionProps>();
-
-  const emit = defineEmits<UiAccordionEmits>();
-
-  function handleUpdateModelValue(value: string | string[] | undefined) {
-    emit('update:modelValue', value);
-  }
-</script>
-
-<template>
-  <ShadcnAccordion
-    :type="props.type"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :collapsible="props.type === 'single' ? props.collapsible : undefined"
-    :disabled="props.disabled"
-    :dir="props.dir"
-    :orientation="props.orientation"
-    @update:model-value="handleUpdateModelValue"
-  >
-    <slot />
-  </ShadcnAccordion>
-</template>

package/src/primitives/UiAccordion/UiAccordionContent.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AccordionContent as ShadcnAccordionContent } from '@/primitives/shadcn/accordion';
-  import type { UiAccordionContentProps } from './types';
-
-  defineOptions({
-    name: 'UiAccordionContent',
-  });
-
-  const props = defineProps<UiAccordionContentProps>();
-</script>
-
-<template>
-  <ShadcnAccordionContent :force-mount="props.forceMount">
-    <slot />
-  </ShadcnAccordionContent>
-</template>

package/src/primitives/UiAccordion/UiAccordionItem.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AccordionItem as ShadcnAccordionItem } from '@/primitives/shadcn/accordion';
-  import type { UiAccordionItemProps } from './types';
-
-  defineOptions({
-    name: 'UiAccordionItem',
-  });
-
-  const props = defineProps<UiAccordionItemProps>();
-</script>
-
-<template>
-  <ShadcnAccordionItem :value="props.value" :disabled="props.disabled">
-    <slot />
-  </ShadcnAccordionItem>
-</template>

package/src/primitives/UiAccordion/UiAccordionTrigger.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-  import { AccordionTrigger as ShadcnAccordionTrigger } from '@/primitives/shadcn/accordion';
-  import type { UiAccordionTriggerProps } from './types';
-
-  defineOptions({
-    name: 'UiAccordionTrigger',
-  });
-
-  const props = defineProps<UiAccordionTriggerProps>();
-
-  // shadcn styles rotate only SVG chevrons (`[data-state=open]>svg`).
-  // Our icons render as `<span data-slot="icon" ... />`, so we mirror that behavior.
-  const uiIconRotationClasses = '[&[data-state=open]>[data-slot=icon]]:rotate-180';
-</script>
-
-<template>
-  <ShadcnAccordionTrigger :as-child="props.asChild" :class="uiIconRotationClasses">
-    <slot />
-    <template #icon>
-      <slot name="icon" />
-    </template>
-  </ShadcnAccordionTrigger>
-</template>

package/src/primitives/UiAccordion/types.ts

@@ -1,95 +0,0 @@
-/** The type of accordion - single or multiple open items allowed. */
-export type UiAccordionType = 'single' | 'multiple';
-
-/** Reading direction for the accordion. */
-export type UiAccordionDir = 'ltr' | 'rtl';
-
-/** Orientation of the accordion. */
-export type UiAccordionOrientation = 'horizontal' | 'vertical';
-
-/**
- * Props for the UiAccordion root component (single mode).
- */
-export type UiAccordionSingleProps = {
-  /** Accordion type - 'single' allows only one item open at a time. */
-  type: 'single';
-  /** The controlled value of the expanded item when using `v-model` for two-way binding. */
-  modelValue?: string;
-  /** The value of the item that should be expanded when initially rendered (uncontrolled). */
-  defaultValue?: string;
-  /** Whether the accordion can be collapsed (all items closed). Only applicable when type is 'single'. */
-  collapsible?: boolean;
-  /** Whether the accordion is disabled. */
-  disabled?: boolean;
-  /** The reading direction. */
-  dir?: UiAccordionDir;
-  /** The orientation of the accordion. */
-  orientation?: UiAccordionOrientation;
-};
-
-/**
- * Props for the UiAccordion root component (multiple mode).
- */
-export type UiAccordionMultipleProps = {
-  /** Accordion type - 'multiple' allows multiple items open at once. */
-  type: 'multiple';
-  /** The controlled value of the expanded items when using `v-model` for two-way binding. */
-  modelValue?: string[];
-  /** The values of the items that should be expanded when initially rendered (uncontrolled). */
-  defaultValue?: string[];
-  /** Whether the accordion is disabled. */
-  disabled?: boolean;
-  /** The reading direction. */
-  dir?: UiAccordionDir;
-  /** The orientation of the accordion. */
-  orientation?: UiAccordionOrientation;
-};
-
-/**
- * Collapsible sections for organizing content. Use for FAQs,
- * settings panels, or any content that benefits from show/hide.
- *
- * @category Navigation
- * @useCases FAQ section, settings panel, collapsible content, expandable list
- * @keywords accordion, collapse, expand, faq, panel, section, toggle
- * @related UiTabs
- */
-export type UiAccordionProps = UiAccordionSingleProps | UiAccordionMultipleProps;
-
-/**
- * Emits for the UiAccordion root component.
- */
-export type UiAccordionEmits = {
-  /**
-   * Emitted when the expanded item(s) change.
-   * - Single mode: `string` (item value) or `undefined` (when collapsed)
-   * - Multiple mode: `string[]` (array of item values)
-   */
-  'update:modelValue': [value: string | string[] | undefined];
-};
-
-/**
- * Props for the UiAccordionItem component.
- */
-export type UiAccordionItemProps = {
-  /** Unique value that identifies the accordion item (required). */
-  value: string;
-  /** Whether the accordion item is disabled. */
-  disabled?: boolean;
-};
-
-/**
- * Props for the UiAccordionTrigger component.
- */
-export type UiAccordionTriggerProps = {
-  /** Whether the trigger element is an `asChild` element. */
-  asChild?: boolean;
-};
-
-/**
- * Props for the UiAccordionContent component.
- */
-export type UiAccordionContentProps = {
-  /** Force mounting when more control is needed (useful for animations). */
-  forceMount?: boolean;
-};