@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/compositions/UiDatePicker/UiDatePicker.vue

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-  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 { UiIcon } from '@/primitives/UiIcon';
-  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"
-      >
-        <UiIcon name="calendar" :size="16" class="mr-2 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/types.ts

@@ -1,220 +0,0 @@
-import type { DateRange, DateValue } from 'reka-ui';
-import type { Matcher } from 'reka-ui/date';
-import type { HTMLAttributes } from 'vue';
-
-/**
- * Selection mode for the date picker.
- *
- * - `'single'` - Select a single date
- * - `'range'` - Select a date range (start and end dates)
- */
-export type UiDatePickerMode = 'single' | 'range';
-
-/**
- * Layout options for the calendar header in the date picker.
- * Controls which dropdown selectors are shown for quick navigation.
- *
- * - `'month-and-year'` - Show dropdowns for both month and year
- * - `'month-only'` - Show dropdown for month only
- * - `'year-only'` - Show dropdown for year only
- */
-export type UiDatePickerLayout = 'month-and-year' | 'month-only' | 'year-only';
-
-/**
- * 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 UiDatePickerWeekdayFormat = '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 UiDatePickerWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-/**
- * A date picker combining a button trigger with a popover calendar.
- * Provides an accessible way to select dates or date ranges.
- *
- * @category Form Inputs
- * @useCases date selection, booking form, event picker, schedule, deadline
- * @keywords date, picker, calendar, datepicker, range, schedule
- * @related UiCalendar, UiPopover
- */
-export interface UiDatePickerProps {
-  /**
-   * Additional CSS classes to apply to the trigger button.
-   */
-  class?: HTMLAttributes['class'];
-
-  /**
-   * The controlled open state of the popover.
-   *
-   * - Omit for uncontrolled mode (the component manages its own open state)
-   * - Use `v-model:open` for controlled mode
-   */
-  open?: boolean;
-
-  /**
-   * The selection mode of the date picker.
-   * - `'single'` - Select a single date (default)
-   * - `'range'` - Select a date range
-   * @default 'single'
-   */
-  mode?: UiDatePickerMode;
-
-  /**
-   * The controlled selected date value (for mode='single').
-   * Use with v-model for two-way binding.
-   */
-  modelValue?: DateValue | DateRange;
-
-  /**
-   * The default selected date or range when first rendered.
-   * Use when you don't need controlled state.
-   */
-  defaultValue?: DateValue | DateRange;
-
-  /**
-   * Placeholder text displayed when no date is selected.
-   * @default 'Pick a date' (single mode)
-   * @default 'Pick a date range' (range mode)
-   */
-  placeholder?: string;
-
-  /**
-   * 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 date picker is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the date picker is read-only.
-   * Users can view but not change the selected date.
-   * @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?: UiDatePickerWeekStartsOn;
-
-  /**
-   * The number of months to display at once in the calendar.
-   * @default 1
-   */
-  numberOfMonths?: number;
-
-  /**
-   * The format to use for weekday labels.
-   * @default 'narrow'
-   */
-  weekdayFormat?: UiDatePickerWeekdayFormat;
-
-  /**
-   * Whether to always show 6 weeks in the calendar.
-   * Useful for consistent height.
-   * @default false
-   */
-  fixedWeeks?: boolean;
-
-  /**
-   * Layout mode for the calendar header.
-   * Controls dropdown selectors for quick month/year navigation.
-   * When undefined, shows simple text heading.
-   */
-  layout?: UiDatePickerLayout;
-
-  /**
-   * 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;
-
-  /**
-   * 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;
-
-  /**
-   * The format to use when displaying the selected date.
-   * Uses Intl.DateTimeFormat options.
-   * @default { dateStyle: 'long' }
-   */
-  dateFormat?: Intl.DateTimeFormatOptions;
-
-  /**
-   * Whether to close the popover after selecting a date.
-   * - In 'single' mode: Closes after selecting a date
-   * - In 'range' mode: Closes after selecting both start and end dates
-   * @default true
-   */
-  closeOnSelect?: boolean;
-
-  /**
-   * Whether to navigate by page (all visible months) or by single month.
-   * Only applicable in range mode when numberOfMonths > 1.
-   * @default false
-   */
-  pagedNavigation?: boolean;
-
-  /**
-   * Accessible label for the trigger button.
-   * Applied as `aria-label` attribute.
-   */
-  ariaLabel?: string;
-
-  /**
-   * The separator string displayed between start and end dates in range mode.
-   * @default ' - '
-   */
-  rangeSeparator?: string;
-}
-
-export type { DateRange, DateValue, Matcher };

package/src/compositions/index.ts

@@ -1,8 +0,0 @@
-/**
-This file is auto-generated by prepare-build.js script
-Do not edit this file manually
-*/
-
-export * from './UiCompositionPlaceholder';
-export * from './UiDataTable';
-export * from './UiDatePicker';

package/src/foundations/UiPlaceholder/types.ts

@@ -1,8 +0,0 @@
-/**
- * Placeholder for foundation components (internal development use).
- *
- * @category Foundations
- * @useCases development placeholder
- * @keywords placeholder, foundation, internal
- */
-export type UiPlaceholderProps = Record<string, never>;

package/src/foundations/index.ts

@@ -1,6 +0,0 @@
-/**
-This file is auto-generated by prepare-build.js script
-Do not edit this file manually
-*/
-
-export * from './UiPlaceholder';