@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiRangeCalendar/types.ts

@@ -0,0 +1,183 @@
+import type { DateRange, DateValue } from 'reka-ui';
+import type { Matcher } from 'reka-ui/date';
+
+/**
+ * Format options for weekday labels displayed in the calendar header.
+ *
+ * - `'narrow'` - Single letter (e.g., "M", "T", "W")
+ * - `'short'` - Abbreviated (e.g., "Mon", "Tue", "Wed")
+ * - `'long'` - Full name (e.g., "Monday", "Tuesday", "Wednesday")
+ */
+export type UiRangeCalendarWeekdayFormat = 'narrow' | 'short' | 'long';
+
+/**
+ * Day of the week to start the calendar on.
+ *
+ * - `0` - Sunday
+ * - `1` - Monday
+ * - `2` - Tuesday
+ * - `3` - Wednesday
+ * - `4` - Thursday
+ * - `5` - Friday
+ * - `6` - Saturday
+ */
+export type UiRangeCalendarWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+/**
+ * A calendar for selecting date ranges (start and end dates). Use for
+ * booking periods, vacation dates, or any range-based date selection.
+ * @category Form Inputs
+ * @useCases date range, booking period, vacation dates, filter by dates
+ * @keywords calendar, range, daterange, period, booking, from, to, start, end
+ * @related UiCalendar, UiPopover
+ */
+export interface UiRangeCalendarProps {
+  /**
+   * The controlled selected date range value.
+   * Use with v-model for two-way binding.
+   */
+  modelValue?: DateRange;
+
+  /**
+   * The default selected date range when first rendered.
+   * Use when you don't need controlled state.
+   */
+  defaultValue?: DateRange;
+
+  /**
+   * The placeholder date used to determine which month/year to display.
+   * Defaults to today's date if not provided.
+   * Use with `v-model:placeholder` for two-way binding.
+   */
+  placeholder?: DateValue;
+
+  /**
+   * The default placeholder date when first rendered.
+   */
+  defaultPlaceholder?: DateValue;
+
+  /**
+   * The minimum selectable date.
+   * Dates before this will be disabled.
+   */
+  minValue?: DateValue;
+
+  /**
+   * The maximum selectable date.
+   * Dates after this will be disabled.
+   */
+  maxValue?: DateValue;
+
+  /**
+   * Whether the calendar is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the calendar is read-only.
+   * Users can navigate but not select dates.
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * The locale to use for formatting dates and weekday names.
+   * @default 'en'
+   * @example 'de', 'fr', 'es'
+   */
+  locale?: string;
+
+  /**
+   * The day of the week to start on.
+   * @default 0 (Sunday)
+   */
+  weekStartsOn?: UiRangeCalendarWeekStartsOn;
+
+  /**
+   * The number of months to display at once.
+   * @default 1
+   */
+  numberOfMonths?: number;
+
+  /**
+   * Whether to navigate by page (all visible months) or by single month.
+   * @default false
+   */
+  pagedNavigation?: boolean;
+
+  /**
+   * The format to use for weekday labels.
+   * @default 'narrow'
+   */
+  weekdayFormat?: UiRangeCalendarWeekdayFormat;
+
+  /**
+   * Whether to always show 6 weeks in the calendar.
+   * Useful for consistent height.
+   * @default false
+   */
+  fixedWeeks?: boolean;
+
+  /**
+   * Whether to prevent the user from deselecting a date without selecting another date first.
+   * @default false
+   */
+  preventDeselect?: boolean;
+
+  /**
+   * The accessible label for the calendar.
+   * Used for screen readers.
+   */
+  calendarLabel?: string;
+
+  /**
+   * If true, the calendar will focus the selected day, today, or the first day
+   * of the month depending on what is visible when the calendar is mounted.
+   * @default false
+   */
+  initialFocus?: boolean;
+
+  /**
+   * A function that returns whether or not a date is disabled.
+   * Disabled dates cannot be selected.
+   * @example (date) => date.dayOfWeek === 0 // Disable Sundays
+   */
+  isDateDisabled?: Matcher;
+
+  /**
+   * A function that returns whether or not a date is unavailable.
+   * Unavailable dates are styled differently but may still be selectable.
+   * @example (date) => isHoliday(date)
+   */
+  isDateUnavailable?: Matcher;
+
+  /**
+   * A function that returns the next page of the calendar.
+   * Receives the current placeholder as an argument.
+   */
+  nextPage?: (placeholder: DateValue) => DateValue;
+
+  /**
+   * A function that returns the previous page of the calendar.
+   * Receives the current placeholder as an argument.
+   */
+  prevPage?: (placeholder: DateValue) => DateValue;
+}
+
+/**
+ * Emits for UiRangeCalendar component.
+ */
+export interface UiRangeCalendarEmits {
+  /**
+   * Emitted when the selected date range changes.
+   */
+  (e: 'update:modelValue', value: DateRange): void;
+
+  /**
+   * Emitted when the placeholder (displayed month/year) changes.
+   */
+  (e: 'update:placeholder', value: DateValue): void;
+}
+
+export type { DateRange, DateValue, Matcher };

package/src/components/UiSelect/UiSelect.stories.ts

@@ -0,0 +1,444 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+  UiSelectLabel,
+  UiSelectGroup,
+  UiSelectSeparator,
+} from './index';
+
+const meta: Meta<typeof UiSelect> = {
+  title: 'Components/UiSelect',
+  component: UiSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The controlled value of the select (use with v-model)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the select is disabled',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether the select is required in a form',
+    },
+  },
+  args: {
+    disabled: false,
+    required: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiSelect>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiSelect v-model="value">
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select a fruit" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectItem value="apple">Apple</UiSelectItem>
+      <UiSelectItem value="banana">Banana</UiSelectItem>
+      <UiSelectItem value="orange">Orange</UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>`;
+
+/**
+ * Default select dropdown with simple options.
+ * Click the trigger to open the dropdown and select an item.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: `
+      <UiSelect v-model="value" v-bind="args">
+        <UiSelectTrigger>
+          <UiSelectValue placeholder="Select a fruit" />
+        </UiSelectTrigger>
+        <UiSelectContent>
+          <UiSelectItem value="apple">Apple</UiSelectItem>
+          <UiSelectItem value="banana">Banana</UiSelectItem>
+          <UiSelectItem value="orange">Orange</UiSelectItem>
+          <UiSelectItem value="grape">Grape</UiSelectItem>
+          <UiSelectItem value="mango">Mango</UiSelectItem>
+        </UiSelectContent>
+      </UiSelect>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const withGroupsTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+  UiSelectLabel,
+  UiSelectGroup,
+  UiSelectSeparator,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiSelect v-model="value">
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select a food" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectGroup>
+        <UiSelectLabel>Fruits</UiSelectLabel>
+        <UiSelectItem value="apple">Apple</UiSelectItem>
+        <UiSelectItem value="banana">Banana</UiSelectItem>
+        <UiSelectItem value="orange">Orange</UiSelectItem>
+      </UiSelectGroup>
+      <UiSelectSeparator />
+      <UiSelectGroup>
+        <UiSelectLabel>Vegetables</UiSelectLabel>
+        <UiSelectItem value="carrot">Carrot</UiSelectItem>
+        <UiSelectItem value="broccoli">Broccoli</UiSelectItem>
+        <UiSelectItem value="spinach">Spinach</UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>`;
+
+/**
+ * Select with grouped options using labels and separators.
+ */
+export const WithGroups: Story = {
+  render: (args) => ({
+    components: {
+      UiSelect,
+      UiSelectTrigger,
+      UiSelectContent,
+      UiSelectItem,
+      UiSelectValue,
+      UiSelectLabel,
+      UiSelectGroup,
+      UiSelectSeparator,
+    },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: `
+      <UiSelect v-model="value" v-bind="args">
+        <UiSelectTrigger>
+          <UiSelectValue placeholder="Select a food" />
+        </UiSelectTrigger>
+        <UiSelectContent>
+          <UiSelectGroup>
+            <UiSelectLabel>Fruits</UiSelectLabel>
+            <UiSelectItem value="apple">Apple</UiSelectItem>
+            <UiSelectItem value="banana">Banana</UiSelectItem>
+            <UiSelectItem value="orange">Orange</UiSelectItem>
+          </UiSelectGroup>
+          <UiSelectSeparator />
+          <UiSelectGroup>
+            <UiSelectLabel>Vegetables</UiSelectLabel>
+            <UiSelectItem value="carrot">Carrot</UiSelectItem>
+            <UiSelectItem value="broccoli">Broccoli</UiSelectItem>
+            <UiSelectItem value="spinach">Spinach</UiSelectItem>
+          </UiSelectGroup>
+        </UiSelectContent>
+      </UiSelect>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withGroupsTemplateSource,
+      },
+    },
+  },
+};
+
+const withDisabledItemsTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiSelect v-model="value">
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select a plan" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectItem value="free">Free Plan</UiSelectItem>
+      <UiSelectItem value="pro">Pro Plan</UiSelectItem>
+      <UiSelectItem value="enterprise" :disabled="true">Enterprise (Contact Sales)</UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>`;
+
+/**
+ * Select with some disabled items that cannot be selected.
+ */
+export const WithDisabledItems: Story = {
+  render: (args) => ({
+    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: `
+      <UiSelect v-model="value" v-bind="args">
+        <UiSelectTrigger>
+          <UiSelectValue placeholder="Select a plan" />
+        </UiSelectTrigger>
+        <UiSelectContent>
+          <UiSelectItem value="free">Free Plan</UiSelectItem>
+          <UiSelectItem value="pro">Pro Plan</UiSelectItem>
+          <UiSelectItem value="enterprise" :disabled="true">Enterprise (Contact Sales)</UiSelectItem>
+        </UiSelectContent>
+      </UiSelect>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withDisabledItemsTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <UiSelect v-model="value" :disabled="true">
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select an option" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectItem value="option1">Option 1</UiSelectItem>
+      <UiSelectItem value="option2">Option 2</UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>`;
+
+/**
+ * Disabled select that cannot be interacted with.
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
+    setup() {
+      const value = ref('');
+      return { value };
+    },
+    template: `
+      <UiSelect v-model="value" :disabled="true">
+        <UiSelectTrigger>
+          <UiSelectValue placeholder="Select an option" />
+        </UiSelectTrigger>
+        <UiSelectContent>
+          <UiSelectItem value="option1">Option 1</UiSelectItem>
+          <UiSelectItem value="option2">Option 2</UiSelectItem>
+        </UiSelectContent>
+      </UiSelect>
+    `,
+  }),
+  args: { disabled: true },
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};
+
+const sizesTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('')
+const value2 = ref('')
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <UiSelect v-model="value">
+      <UiSelectTrigger size="sm">
+        <UiSelectValue placeholder="Small" />
+      </UiSelectTrigger>
+      <UiSelectContent>
+        <UiSelectItem value="a">Option A</UiSelectItem>
+        <UiSelectItem value="b">Option B</UiSelectItem>
+      </UiSelectContent>
+    </UiSelect>
+    <UiSelect v-model="value2">
+      <UiSelectTrigger size="default">
+        <UiSelectValue placeholder="Default" />
+      </UiSelectTrigger>
+      <UiSelectContent>
+        <UiSelectItem value="a">Option A</UiSelectItem>
+        <UiSelectItem value="b">Option B</UiSelectItem>
+      </UiSelectContent>
+    </UiSelect>
+  </div>
+</template>`;
+
+/**
+ * Different size variants for the select trigger (sm, default, lg).
+ */
+export const Sizes: Story = {
+  render: () => ({
+    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
+    setup() {
+      const value = ref('');
+      const value2 = ref('');
+      return { value, value2 };
+    },
+    template: `
+      <div class="flex items-center gap-4">
+        <UiSelect v-model="value">
+          <UiSelectTrigger size="sm">
+            <UiSelectValue placeholder="Small" />
+          </UiSelectTrigger>
+          <UiSelectContent>
+            <UiSelectItem value="a">Option A</UiSelectItem>
+            <UiSelectItem value="b">Option B</UiSelectItem>
+          </UiSelectContent>
+        </UiSelect>
+        <UiSelect v-model="value2">
+          <UiSelectTrigger size="default">
+            <UiSelectValue placeholder="Default" />
+          </UiSelectTrigger>
+          <UiSelectContent>
+            <UiSelectItem value="a">Option A</UiSelectItem>
+            <UiSelectItem value="b">Option B</UiSelectItem>
+          </UiSelectContent>
+        </UiSelect>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: sizesTemplateSource,
+      },
+    },
+  },
+};
+
+const withDefaultValueTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiSelect,
+  UiSelectTrigger,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectValue,
+} from '@aleph-alpha/ui-library'
+
+const value = ref('banana')
+</script>
+
+<template>
+  <UiSelect v-model="value">
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select a fruit" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectItem value="apple">Apple</UiSelectItem>
+      <UiSelectItem value="banana">Banana</UiSelectItem>
+      <UiSelectItem value="orange">Orange</UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>`;
+
+/**
+ * Select with a pre-selected default value.
+ */
+export const WithDefaultValue: Story = {
+  render: () => ({
+    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
+    setup() {
+      const value = ref('banana');
+      return { value };
+    },
+    template: `
+      <UiSelect v-model="value">
+        <UiSelectTrigger>
+          <UiSelectValue placeholder="Select a fruit" />
+        </UiSelectTrigger>
+        <UiSelectContent>
+          <UiSelectItem value="apple">Apple</UiSelectItem>
+          <UiSelectItem value="banana">Banana</UiSelectItem>
+          <UiSelectItem value="orange">Orange</UiSelectItem>
+        </UiSelectContent>
+      </UiSelect>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withDefaultValueTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiSelect/UiSelect.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+  import type { AcceptableValue } from 'reka-ui';
+  import { Select as ShadcnSelect } from '@/components/core/select';
+  import type { UiSelectProps, UiSelectEmits } from './types';
+
+  defineOptions({
+    name: 'UiSelect',
+  });
+
+  const props = withDefaults(defineProps<UiSelectProps>(), {
+    modelValue: undefined,
+    defaultValue: undefined,
+    defaultOpen: false,
+    open: undefined,
+    disabled: false,
+    required: false,
+    name: undefined,
+    dir: 'ltr',
+  });
+
+  const emit = defineEmits<UiSelectEmits>();
+
+  // reka-ui's AcceptableValue can be string | number | boolean | Record
+  // Our API restricts to string only for type safety
+  function handleModelValueUpdate(value: AcceptableValue) {
+    if (typeof value === 'string') {
+      emit('update:modelValue', value);
+    }
+  }
+</script>
+
+<template>
+  <ShadcnSelect
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :default-open="props.defaultOpen"
+    :open="props.open"
+    :disabled="props.disabled"
+    :required="props.required"
+    :name="props.name"
+    :dir="props.dir"
+    @update:model-value="handleModelValueUpdate"
+    @update:open="emit('update:open', $event)"
+  >
+    <slot />
+  </ShadcnSelect>
+</template>

package/src/components/UiSelect/UiSelectContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { SelectContent as ShadcnSelectContent } from '@/components/core/select';
+  import type { UiSelectContentProps, UiSelectContentEmits } from './types';
+
+  defineOptions({
+    name: 'UiSelectContent',
+  });
+
+  const props = withDefaults(defineProps<UiSelectContentProps>(), {
+    side: 'bottom',
+    sideOffset: 4,
+    align: 'start',
+    position: 'popper',
+  });
+
+  const emit = defineEmits<UiSelectContentEmits>();
+</script>
+
+<template>
+  <ShadcnSelectContent
+    :side="props.side"
+    :side-offset="props.sideOffset"
+    :align="props.align"
+    :position="props.position"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+  >
+    <slot />
+  </ShadcnSelectContent>
+</template>