@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/compositions/UiDatePicker/UiDatePicker.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+  import { Calendar } from 'lucide-vue-next';
+  import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
+  import type { DateRange, DateValue } from 'reka-ui';
+  import { computed, defineAsyncComponent, ref } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { UiButton } from '@/primitives/UiButton';
+  import { UiPopover, UiPopoverContent, UiPopoverTrigger } from '@/primitives/UiPopover';
+  import type { UiDatePickerProps } from './types';
+
+  defineOptions({
+    name: 'UiDatePicker',
+  });
+
+  // Lazy-load calendar components to reduce bundle size.
+  // Using v-if/v-else ensures only the needed component is loaded,
+  // while maintaining full TypeScript type safety.
+  const UiCalendar = defineAsyncComponent(() =>
+    import('@/primitives/UiCalendar').then((m) => m.UiCalendar),
+  );
+  const UiRangeCalendar = defineAsyncComponent(() =>
+    import('@/primitives/UiRangeCalendar').then((m) => m.UiRangeCalendar),
+  );
+
+  const props = withDefaults(defineProps<UiDatePickerProps>(), {
+    mode: 'single',
+    disabled: false,
+    readonly: false,
+    locale: 'en',
+    weekStartsOn: 0,
+    numberOfMonths: 1,
+    pagedNavigation: false,
+    weekdayFormat: 'narrow',
+    fixedWeeks: false,
+    preventDeselect: false,
+    closeOnSelect: true,
+    dateFormat: () => ({ dateStyle: 'long' }),
+    rangeSeparator: ' - ',
+  });
+
+  const modelValue = defineModel<UiDatePickerProps['modelValue']>();
+  const open = defineModel<boolean>('open');
+
+  // Internal state for uncontrolled mode (when defaultValue is provided without v-model)
+  const internalValue = ref<UiDatePickerProps['modelValue']>(props.defaultValue);
+  const internalOpen = ref(false);
+
+  // Uncontrolled mode: defaultValue provided, use internal state
+  // Controlled mode: no defaultValue, use v-model
+  const isUncontrolled = props.defaultValue !== undefined;
+
+  const effectiveValue = computed(() => (isUncontrolled ? internalValue.value : modelValue.value));
+  const effectiveOpen = computed({
+    get: () => open.value ?? internalOpen.value,
+    set: (value: boolean) => {
+      open.value = value;
+      internalOpen.value = value;
+    },
+  });
+
+  const isDateRange = (value: unknown): value is DateRange => {
+    return value !== null && typeof value === 'object' && 'start' in value && 'end' in value;
+  };
+
+  // Type-safe computed values for each mode (avoids type assertions in template)
+  // Cast needed because TypeScript can't narrow the DateValue | DateRange union
+  const singleValue = computed((): DateValue | undefined => {
+    const value = effectiveValue.value as DateValue | DateRange | undefined;
+    return props.mode === 'single' && value && !isDateRange(value) ? value : undefined;
+  });
+
+  const rangeValue = computed((): DateRange | undefined => {
+    const value = effectiveValue.value as DateValue | DateRange | undefined;
+    return props.mode === 'range' && value && isDateRange(value) ? value : undefined;
+  });
+
+  const dateFormatter = computed(() => new DateFormatter(props.locale, props.dateFormat));
+
+  const computedPlaceholder = computed(() => {
+    if (props.placeholder) return props.placeholder;
+    return props.mode === 'range' ? 'Pick a date range' : 'Pick a date';
+  });
+
+  const displayValue = computed(() => {
+    if (props.mode === 'range') {
+      const range = rangeValue.value;
+      if (!range?.start) return computedPlaceholder.value;
+
+      const startStr = dateFormatter.value.format(range.start.toDate(getLocalTimeZone()));
+      if (!range.end) return startStr;
+
+      const endStr = dateFormatter.value.format(range.end.toDate(getLocalTimeZone()));
+      return `${startStr}${props.rangeSeparator}${endStr}`;
+    }
+
+    const single = singleValue.value;
+    if (!single) return computedPlaceholder.value;
+    return dateFormatter.value.format(single.toDate(getLocalTimeZone()));
+  });
+
+  const updateValue = (value: UiDatePickerProps['modelValue']) => {
+    if (isUncontrolled) {
+      internalValue.value = value;
+    } else {
+      modelValue.value = value;
+    }
+  };
+
+  const handleSingleDateUpdate = (value: DateValue | DateValue[] | undefined) => {
+    // Handle array case (shouldn't happen in single mode, but type-safe)
+    const newValue = Array.isArray(value) ? value[0] : value;
+    updateValue(newValue);
+
+    if (props.closeOnSelect) {
+      effectiveOpen.value = false;
+    }
+  };
+
+  const handleRangeDateUpdate = (value: DateRange | undefined) => {
+    updateValue(value);
+    // Close only when both start and end dates are selected
+    if (props.closeOnSelect && value?.start && value?.end) {
+      effectiveOpen.value = false;
+    }
+  };
+</script>
+
+<template>
+  <UiPopover v-model:open="effectiveOpen">
+    <UiPopoverTrigger as-child>
+      <UiButton
+        variant="outline"
+        :class="
+          cn(
+            props.mode === 'range' ? 'w-[300px]' : 'w-[240px]',
+            'justify-start text-left font-normal',
+            !effectiveValue && 'text-muted-foreground',
+            props.class,
+          )
+        "
+        :disabled="props.disabled"
+        :aria-label="props.ariaLabel"
+      >
+        <Calendar class="mr-2 size-4 shrink-0" />
+        <span class="truncate">{{ displayValue }}</span>
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent class="w-auto p-0" align="start">
+      <Suspense>
+        <UiCalendar
+          v-if="props.mode === 'single'"
+          :model-value="singleValue"
+          :min-value="props.minValue"
+          :max-value="props.maxValue"
+          :disabled="props.disabled"
+          :readonly="props.readonly"
+          :locale="props.locale"
+          :week-starts-on="props.weekStartsOn"
+          :number-of-months="props.numberOfMonths"
+          :weekday-format="props.weekdayFormat"
+          :fixed-weeks="props.fixedWeeks"
+          :layout="props.layout"
+          :prevent-deselect="props.preventDeselect"
+          :calendar-label="props.calendarLabel"
+          :is-date-disabled="props.isDateDisabled"
+          :is-date-unavailable="props.isDateUnavailable"
+          initial-focus
+          @update:model-value="handleSingleDateUpdate"
+        />
+        <UiRangeCalendar
+          v-else
+          :model-value="rangeValue"
+          :min-value="props.minValue"
+          :max-value="props.maxValue"
+          :disabled="props.disabled"
+          :readonly="props.readonly"
+          :locale="props.locale"
+          :week-starts-on="props.weekStartsOn"
+          :number-of-months="props.numberOfMonths"
+          :paged-navigation="props.pagedNavigation"
+          :weekday-format="props.weekdayFormat"
+          :fixed-weeks="props.fixedWeeks"
+          :prevent-deselect="props.preventDeselect"
+          :calendar-label="props.calendarLabel"
+          :is-date-disabled="props.isDateDisabled"
+          :is-date-unavailable="props.isDateUnavailable"
+          initial-focus
+          @update:model-value="handleRangeDateUpdate"
+        />
+      </Suspense>
+    </UiPopoverContent>
+  </UiPopover>
+</template>

package/src/compositions/UiDatePicker/__tests__/UiDatePicker.test.ts

@@ -0,0 +1,325 @@
+import { CalendarDate } from '@internationalized/date';
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import type { DateRange } from 'reka-ui';
+import { describe, expect, test } from 'vitest';
+import UiDatePicker from '../UiDatePicker.vue';
+
+describe('UiDatePicker', () => {
+  const testDate = new CalendarDate(2025, 1, 15);
+
+  test('renders with custom class on trigger button', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { class: 'w-full custom-picker' },
+    });
+    const button = getByRole('button');
+    expect(button).toHaveClass('w-full', 'custom-picker');
+  });
+
+  test('displays placeholder when no date is selected', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { placeholder: 'Select a date' },
+    });
+    expect(getByRole('button')).toHaveTextContent('Select a date');
+  });
+
+  test('displays formatted date when modelValue is set', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { modelValue: testDate, locale: 'en' },
+    });
+    expect(getByRole('button')).toHaveTextContent('January 15, 2025');
+  });
+
+  test('applies disabled state to trigger button', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { disabled: true },
+    });
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  test('emits update:modelValue with a DateValue when date is selected', async () => {
+    const { getByRole, findAllByRole, emitted } = render(UiDatePicker, {
+      props: { modelValue: testDate },
+    });
+
+    // Open the popover
+    await userEvent.click(getByRole('button'));
+
+    // Find and click a date cell (use findAllByRole to wait for async component)
+    const cells = await findAllByRole('gridcell');
+    const clickableCell = cells.find(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+    const dateButton = clickableCell?.querySelector('button');
+    expect(dateButton).toBeInTheDocument();
+
+    await userEvent.click(dateButton!);
+
+    const emittedEvents = emitted('update:modelValue');
+    expect(emittedEvents).toHaveLength(1);
+    const emittedValue = emittedEvents[0][0];
+    expect(emittedValue).toHaveProperty('year');
+    expect(emittedValue).toHaveProperty('month');
+    expect(emittedValue).toHaveProperty('day');
+  });
+
+  test('displays defaultValue immediately in uncontrolled mode', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { defaultValue: testDate, locale: 'en' },
+    });
+    // Should display the default value, not the placeholder
+    expect(getByRole('button')).toHaveTextContent('January 15, 2025');
+  });
+
+  test('updates display after selection in uncontrolled mode', async () => {
+    const { getByRole, findAllByRole, emitted } = render(UiDatePicker, {
+      props: { defaultValue: testDate, locale: 'en' },
+    });
+
+    // Initially shows the default value
+    expect(getByRole('button')).toHaveTextContent('January 15, 2025');
+
+    // Open and select a different date (use findAllByRole to wait for async component)
+    await userEvent.click(getByRole('button'));
+    const cells = await findAllByRole('gridcell');
+    const clickableCell = cells.find(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+    await userEvent.click(clickableCell!.querySelector('button')!);
+
+    // Display should update to show the newly selected date (not the placeholder)
+    const buttonText = getByRole('button').textContent;
+    expect(buttonText).not.toBe('Pick a date');
+    expect(buttonText).not.toBe('January 15, 2025'); // Should be different from initial
+
+    // In uncontrolled mode, update:modelValue should NOT be emitted
+    expect(emitted('update:modelValue')).toBeUndefined();
+  });
+
+  test('closes popover after date selection when closeOnSelect is true', async () => {
+    const { getByRole, findAllByRole, queryByRole } = render(UiDatePicker, {
+      props: { closeOnSelect: true },
+    });
+
+    // Open the popover
+    await userEvent.click(getByRole('button'));
+    expect(queryByRole('dialog')).toBeInTheDocument();
+
+    // Select a date (use findAllByRole to wait for async component)
+    const cells = await findAllByRole('gridcell');
+    const clickableCell = cells.find(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+    await userEvent.click(clickableCell!.querySelector('button')!);
+
+    // Popover should be closed
+    expect(queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  test('keeps popover open after date selection when closeOnSelect is false', async () => {
+    const { getByRole, findAllByRole, queryByRole } = render(UiDatePicker, {
+      props: { closeOnSelect: false },
+    });
+
+    // Open the popover
+    await userEvent.click(getByRole('button'));
+    expect(queryByRole('dialog')).toBeInTheDocument();
+
+    // Select a date (use findAllByRole to wait for async component)
+    const cells = await findAllByRole('gridcell');
+    const clickableCell = cells.find(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+    await userEvent.click(clickableCell!.querySelector('button')!);
+
+    // Popover should remain open
+    expect(queryByRole('dialog')).toBeInTheDocument();
+  });
+
+  test('formats date according to locale', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { modelValue: testDate, locale: 'de' },
+    });
+    // German format: "15. Januar 2025"
+    expect(getByRole('button')).toHaveTextContent('15. Januar 2025');
+  });
+
+  test('defaults to "Pick a date" placeholder in single mode', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { mode: 'single' },
+    });
+    expect(getByRole('button')).toHaveTextContent('Pick a date');
+  });
+
+  test('defaults to "Pick a date range" placeholder in range mode', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { mode: 'range' },
+    });
+    expect(getByRole('button')).toHaveTextContent('Pick a date range');
+  });
+
+  test('uses custom placeholder in range mode', () => {
+    const { getByRole } = render(UiDatePicker, {
+      props: { mode: 'range', placeholder: 'Select travel dates' },
+    });
+    expect(getByRole('button')).toHaveTextContent('Select travel dates');
+  });
+
+  test('displays formatted date range when modelValue is set in range mode', () => {
+    const dateRange: DateRange = {
+      start: new CalendarDate(2025, 1, 15),
+      end: new CalendarDate(2025, 1, 20),
+    };
+    const { getByRole } = render(UiDatePicker, {
+      props: { mode: 'range', modelValue: dateRange, locale: 'en' },
+    });
+    expect(getByRole('button')).toHaveTextContent('January 15, 2025 - January 20, 2025');
+  });
+
+  test('displays partial date range when only start date is selected', () => {
+    const dateRange: DateRange = {
+      start: new CalendarDate(2025, 1, 15),
+      end: undefined,
+    };
+    const { getByRole } = render(UiDatePicker, {
+      props: { mode: 'range', modelValue: dateRange, locale: 'en' },
+    });
+    expect(getByRole('button')).toHaveTextContent('January 15, 2025');
+  });
+
+  test('emits update:modelValue with a DateRange when range is selected', async () => {
+    const initialRange: DateRange = { start: undefined, end: undefined };
+    const { getByRole, findAllByRole, emitted } = render(UiDatePicker, {
+      props: { mode: 'range', modelValue: initialRange },
+    });
+
+    // Open the popover
+    await userEvent.click(getByRole('button'));
+
+    // Find and click two date cells (use findAllByRole to wait for async component)
+    const cells = await findAllByRole('gridcell');
+    const clickableCells = cells.filter(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+
+    // Click first date (start)
+    await userEvent.click(clickableCells[5]?.querySelector('button')!);
+
+    // Click second date (end)
+    await userEvent.click(clickableCells[10]?.querySelector('button')!);
+
+    const emittedEvents = emitted('update:modelValue');
+    expect(emittedEvents.length).toBeGreaterThanOrEqual(1);
+    const lastEmittedValue = emittedEvents[emittedEvents.length - 1][0];
+    expect(lastEmittedValue).toHaveProperty('start');
+    expect(lastEmittedValue).toHaveProperty('end');
+    expect(lastEmittedValue.start).toHaveProperty('year');
+    expect(lastEmittedValue.end).toHaveProperty('year');
+  });
+
+  test('keeps popover open in range mode until both dates are selected when closeOnSelect is true', async () => {
+    const { getByRole, findAllByRole, queryByRole } = render(UiDatePicker, {
+      props: { mode: 'range', closeOnSelect: true },
+    });
+
+    // Open the popover
+    await userEvent.click(getByRole('button'));
+    expect(queryByRole('dialog')).toBeInTheDocument();
+
+    // Select first date (use findAllByRole to wait for async component)
+    const cells = await findAllByRole('gridcell');
+    const clickableCells = cells.filter(
+      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+    );
+    await userEvent.click(clickableCells[5]?.querySelector('button')!);
+
+    // Popover should still be open (only start date selected)
+    expect(queryByRole('dialog')).toBeInTheDocument();
+
+    // Select second date
+    await userEvent.click(clickableCells[10]?.querySelector('button')!);
+
+    // Now popover should close (both dates selected)
+    expect(queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  describe('lazy loading optimization', () => {
+    test('lazily loads UiCalendar in single mode when popover opens', async () => {
+      const { getByRole, queryByRole, findByRole } = render(UiDatePicker, {
+        props: { mode: 'single', modelValue: new CalendarDate(2025, 1, 15) },
+      });
+
+      // Before opening, popover content is not rendered
+      expect(queryByRole('dialog')).not.toBeInTheDocument();
+
+      // Open the popover
+      await userEvent.click(getByRole('button'));
+
+      // Calendar should be rendered after async load (findByRole waits for element)
+      await findByRole('dialog');
+      await findByRole('grid');
+    });
+
+    test('lazily loads UiRangeCalendar in range mode when popover opens', async () => {
+      const { getByRole, queryByRole, findByRole } = render(UiDatePicker, {
+        props: { mode: 'range' },
+      });
+
+      // Before opening, popover content is not rendered
+      expect(queryByRole('dialog')).not.toBeInTheDocument();
+
+      // Open the popover
+      await userEvent.click(getByRole('button'));
+
+      // RangeCalendar should be rendered after async load (findByRole waits for element)
+      await findByRole('dialog');
+      await findByRole('grid');
+    });
+
+    test('single mode calendar is fully functional after lazy load', async () => {
+      const { getByRole, findAllByRole, emitted } = render(UiDatePicker, {
+        props: { mode: 'single', modelValue: new CalendarDate(2025, 1, 15) },
+      });
+
+      // Open popover and wait for async component
+      await userEvent.click(getByRole('button'));
+
+      // Wait for calendar grid cells to load (findAllByRole waits for elements)
+      const cells = await findAllByRole('gridcell');
+      const clickableCell = cells.find(
+        (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+      );
+      await userEvent.click(clickableCell!.querySelector('button')!);
+
+      // Should emit the selected date
+      const emittedEvents = emitted('update:modelValue');
+      expect(emittedEvents).toHaveLength(1);
+      expect(emittedEvents[0][0]).toHaveProperty('year');
+    });
+
+    test('range mode calendar is fully functional after lazy load', async () => {
+      const { getByRole, findAllByRole, emitted } = render(UiDatePicker, {
+        props: { mode: 'range' },
+      });
+
+      // Open popover and wait for async component
+      await userEvent.click(getByRole('button'));
+
+      // Wait for calendar grid cells to load (findAllByRole waits for elements)
+      const cells = await findAllByRole('gridcell');
+      const clickableCells = cells.filter(
+        (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
+      );
+
+      await userEvent.click(clickableCells[5]?.querySelector('button')!);
+      await userEvent.click(clickableCells[10]?.querySelector('button')!);
+
+      // Should emit the date range
+      const emittedEvents = emitted('update:modelValue');
+      expect(emittedEvents.length).toBeGreaterThanOrEqual(1);
+      const lastEmitted = emittedEvents[emittedEvents.length - 1][0];
+      expect(lastEmitted).toHaveProperty('start');
+      expect(lastEmitted).toHaveProperty('end');
+    });
+  });
+});

package/src/compositions/UiDatePicker/index.ts

@@ -0,0 +1,14 @@
+export { default as UiDatePicker } from './UiDatePicker.vue';
+
+export type {
+  UiDatePickerProps,
+  UiDatePickerMode,
+  UiDatePickerLayout,
+  UiDatePickerWeekdayFormat,
+  UiDatePickerWeekStartsOn,
+  DateRange,
+  DateValue,
+  Matcher,
+} from './types';
+
+export { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';