reka-ui 2.8.2 → 2.9.1

package/src/YearRangePicker/YearRangePickerRoot.vue

@@ -0,0 +1,391 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { Ref } from 'vue'
+import type { Grid, Matcher } from '@/date'
+import type { PrimitiveProps } from '@/Primitive'
+import type { Formatter } from '@/shared'
+import type { DateRange } from '@/shared/date'
+import type { Direction } from '@/shared/types'
+import { isSameYear } from '@/date'
+import { createContext, useDirection, useId, useKbd, useLocale } from '@/shared'
+import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
+import { useYearPicker } from '@/YearPicker/useYearPicker'
+import { useRangeYearPickerState } from './useRangeYearPicker'
+
+type YearRangePickerRootContext = {
+  modelValue: Ref<DateRange>
+  startValue: Ref<DateValue | undefined>
+  endValue: Ref<DateValue | undefined>
+  locale: Ref<string>
+  placeholder: Ref<DateValue>
+  preventDeselect: Ref<boolean>
+  grid: Ref<Grid<DateValue>>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  initialFocus: Ref<boolean>
+  onPlaceholderChange: (date: DateValue) => void
+  fullCalendarLabel: Ref<string>
+  parentElement: Ref<HTMLElement | undefined>
+  headingValue: Ref<string>
+  headingId: string
+  isInvalid: Ref<boolean>
+  isYearDisabled: Matcher
+  isYearUnavailable?: Matcher
+  allowNonContiguousRanges: Ref<boolean>
+  highlightedRange: Ref<{ start: DateValue, end: DateValue } | null>
+  focusedValue: Ref<DateValue | undefined>
+  lastPressedDateValue: Ref<DateValue | undefined>
+  isSelected: (date: DateValue) => boolean
+  isSelectionEnd: (date: DateValue) => boolean
+  isSelectionStart: (date: DateValue) => boolean
+  isHighlightedStart: (date: DateValue) => boolean
+  isHighlightedEnd: (date: DateValue) => boolean
+  prevPage: (prevPageFunc?: (date: DateValue) => DateValue) => void
+  nextPage: (nextPageFunc?: (date: DateValue) => DateValue) => void
+  isNextButtonDisabled: (nextPageFunc?: (date: DateValue) => DateValue) => boolean
+  isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean
+  formatter: Formatter
+  dir: Ref<Direction>
+  fixedDate: Ref<'start' | 'end' | undefined>
+  maximumYears: Ref<number | undefined>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  yearsPerPage: Ref<number>
+}
+
+export interface YearRangePickerRootProps extends PrimitiveProps {
+  /** The default placeholder date */
+  defaultPlaceholder?: DateValue
+  /** The default value for the calendar */
+  defaultValue?: DateRange
+  /** The controlled selected year range of the year range picker. Can be bound as `v-model`. */
+  modelValue?: DateRange | null
+  /** The placeholder date, which is used to determine what year range to display when no date is selected. */
+  placeholder?: DateValue
+  /** When combined with `isYearUnavailable`, determines whether non-contiguous ranges may be selected. */
+  allowNonContiguousRanges?: boolean
+  /** Whether or not to prevent the user from deselecting a date without selecting another date first */
+  preventDeselect?: boolean
+  /** The maximum number of years that can be selected in a range */
+  maximumYears?: number
+  /** The accessible label for the calendar */
+  calendarLabel?: string
+  /** The maximum date that can be selected */
+  maxValue?: DateValue
+  /** The minimum date that can be selected */
+  minValue?: DateValue
+  /** The locale to use for formatting dates */
+  locale?: string
+  /** Whether or not the calendar is disabled */
+  disabled?: boolean
+  /** Whether or not the calendar is readonly */
+  readonly?: boolean
+  /** If true, the calendar will focus the selected year on mount */
+  initialFocus?: boolean
+  /** A function that returns whether or not a year is disabled */
+  isYearDisabled?: Matcher
+  /** A function that returns whether or not a year is unavailable */
+  isYearUnavailable?: Matcher
+  /** The reading direction of the calendar when applicable. */
+  dir?: Direction
+  /** A function that returns the next page of the calendar. */
+  nextPage?: (placeholder: DateValue) => DateValue
+  /** A function that returns the previous page of the calendar. */
+  prevPage?: (placeholder: DateValue) => DateValue
+  /** Which part of the range should be fixed */
+  fixedDate?: 'start' | 'end'
+  /** Number of years to display per page */
+  yearsPerPage?: number
+}
+
+export type YearRangePickerRootEmits = {
+  /** Event handler called whenever the model value changes */
+  'update:modelValue': [date: DateRange]
+  /** Event handler called whenever the placeholder value changes */
+  'update:placeholder': [date: DateValue]
+  /** Event handler called whenever the start value changes */
+  'update:startValue': [date: DateValue | undefined]
+}
+
+export const [injectYearRangePickerRootContext, provideYearRangePickerRootContext]
+  = createContext<YearRangePickerRootContext>('YearRangePickerRoot')
+</script>
+
+<script setup lang="ts">
+import { useEventListener, useVModel } from '@vueuse/core'
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+
+const props = withDefaults(defineProps<YearRangePickerRootProps>(), {
+  defaultValue: () => ({ start: undefined, end: undefined }),
+  as: 'div',
+  preventDeselect: false,
+  disabled: false,
+  readonly: false,
+  initialFocus: false,
+  placeholder: undefined,
+  isYearDisabled: undefined,
+  isYearUnavailable: undefined,
+  allowNonContiguousRanges: false,
+  maximumYears: undefined,
+  yearsPerPage: 12,
+})
+const emits = defineEmits<YearRangePickerRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** The current date of the placeholder */
+    date: DateValue
+    /** The grid of years */
+    grid: Grid<DateValue>
+    /** The calendar locale */
+    locale: string
+    /** The current date range */
+    modelValue: DateRange
+  }) => any
+}>()
+
+const {
+  disabled,
+  readonly,
+  initialFocus,
+  preventDeselect,
+  isYearUnavailable: propsIsYearUnavailable,
+  isYearDisabled: propsIsYearDisabled,
+  calendarLabel,
+  maxValue,
+  minValue,
+  dir: propDir,
+  locale: propLocale,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  allowNonContiguousRanges,
+  fixedDate,
+  maximumYears,
+  yearsPerPage,
+} = toRefs(props)
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement()
+const dir = useDirection(propDir)
+const locale = useLocale(propLocale)
+const headingId = useId(undefined, 'reka-year-range-picker-heading')
+
+const lastPressedDateValue = ref() as Ref<DateValue | undefined>
+const focusedValue = ref() as Ref<DateValue | undefined>
+const isEditing = ref(false)
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue ?? { start: undefined, end: undefined },
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<DateRange | null>
+
+const normalizeRange = (value?: DateRange | null): DateRange => value ?? { start: undefined, end: undefined }
+const normalizedModelValue = computed(() => normalizeRange(modelValue.value))
+
+const validModelValue = ref(normalizeRange(modelValue.value)) as Ref<DateRange>
+
+const defaultDate = getDefaultDate({
+  defaultPlaceholder: props.placeholder,
+  defaultValue: normalizeRange(modelValue.value).start,
+  locale: props.locale,
+})
+
+const startValue = ref(normalizeRange(modelValue.value).start) as Ref<DateValue | undefined>
+const endValue = ref(normalizeRange(modelValue.value).end) as Ref<DateValue | undefined>
+
+const placeholder = useVModel(props, 'placeholder', emits, {
+  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),
+  passive: (props.placeholder === undefined) as false,
+}) as Ref<DateValue>
+
+function onPlaceholderChange(value: DateValue) {
+  placeholder.value = value.copy()
+}
+
+const {
+  fullCalendarLabel,
+  headingValue,
+  isYearDisabled,
+  isYearUnavailable,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  grid,
+  nextPage,
+  prevPage,
+  formatter,
+} = useYearPicker({
+  locale,
+  placeholder,
+  minValue,
+  maxValue,
+  disabled,
+  yearsPerPage,
+  isYearDisabled: propsIsYearDisabled,
+  isYearUnavailable: propsIsYearUnavailable,
+  calendarLabel,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+})
+
+const {
+  isInvalid,
+  isSelected,
+  highlightedRange,
+  isSelectionStart,
+  isSelectionEnd,
+  isHighlightedStart,
+  isHighlightedEnd,
+  isYearDisabled: rangeIsYearDisabled,
+} = useRangeYearPickerState({
+  start: startValue,
+  end: endValue,
+  isYearDisabled,
+  isYearUnavailable,
+  focusedValue,
+  allowNonContiguousRanges,
+  fixedDate,
+  maximumYears,
+})
+
+watch(modelValue, (_modelValue) => {
+  const next = normalizeRange(_modelValue)
+
+  const isStartSynced = (!next.start && !startValue.value)
+    || (!!next.start && !!startValue.value && isSameYear(next.start, startValue.value))
+
+  if (!isStartSynced) {
+    startValue.value = next.start?.copy?.()
+  }
+
+  const isEndSynced = (!next.end && !endValue.value)
+    || (!!next.end && !!endValue.value && isSameYear(next.end, endValue.value))
+
+  if (!isEndSynced) {
+    endValue.value = next.end?.copy?.()
+  }
+})
+
+watch(startValue, (_startValue) => {
+  if (_startValue && !isSameYear(_startValue, placeholder.value))
+    onPlaceholderChange(_startValue)
+
+  emits('update:startValue', _startValue)
+})
+
+watch([startValue, endValue], ([_startValue, _endValue]) => {
+  const value = modelValue.value
+
+  if (
+    value
+    && value.start
+    && value.end
+    && _startValue
+    && _endValue
+    && isSameYear(value.start, _startValue)
+    && isSameYear(value.end, _endValue)
+  ) {
+    return
+  }
+
+  isEditing.value = true
+  if (_endValue && _startValue) {
+    const nextValue = _endValue.year < _startValue.year
+      ? { start: _endValue.copy(), end: _startValue.copy() }
+      : { start: _startValue.copy(), end: _endValue.copy() }
+
+    modelValue.value = { start: nextValue.start, end: nextValue.end }
+    isEditing.value = false
+    validModelValue.value = { start: nextValue.start.copy(), end: nextValue.end.copy() }
+  }
+  else {
+    modelValue.value = _startValue
+      ? { start: _startValue.copy(), end: undefined }
+      : { start: _endValue?.copy(), end: undefined }
+  }
+})
+
+const kbd = useKbd()
+useEventListener(parentElement, 'keydown', (ev) => {
+  if (ev.key === kbd.ESCAPE && isEditing.value) {
+    startValue.value = validModelValue.value.start?.copy()
+    endValue.value = validModelValue.value.end?.copy()
+  }
+})
+
+provideYearRangePickerRootContext({
+  isYearUnavailable,
+  startValue,
+  endValue,
+  formatter,
+  modelValue: normalizedModelValue,
+  placeholder,
+  disabled,
+  initialFocus,
+  grid,
+  readonly,
+  preventDeselect,
+  fullCalendarLabel,
+  headingValue,
+  headingId,
+  isInvalid,
+  isYearDisabled: rangeIsYearDisabled,
+  allowNonContiguousRanges,
+  highlightedRange,
+  focusedValue,
+  lastPressedDateValue,
+  isSelected,
+  isSelectionEnd,
+  isSelectionStart,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  nextPage,
+  prevPage,
+  parentElement,
+  onPlaceholderChange,
+  locale,
+  dir,
+  isHighlightedStart,
+  isHighlightedEnd,
+  fixedDate,
+  maximumYears,
+  minValue,
+  maxValue,
+  yearsPerPage,
+})
+
+onMounted(() => {
+  if (initialFocus.value)
+    handleCalendarInitialFocus(parentElement.value)
+})
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as="as"
+    :as-child="asChild"
+    :aria-label="fullCalendarLabel"
+    :data-readonly="readonly ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="isInvalid ? '' : undefined"
+    :dir="dir"
+  >
+    <div
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
+    >
+      <div
+        role="heading"
+        aria-level="2"
+      >
+        {{ fullCalendarLabel }}
+      </div>
+    </div>
+
+    <slot
+      :date="placeholder"
+      :grid="grid"
+      :locale="locale"
+      :model-value="normalizedModelValue"
+    />
+  </Primitive>
+</template>

package/src/YearRangePicker/index.ts

@@ -0,0 +1,42 @@
+export {
+  default as YearRangePickerCell,
+  type YearRangePickerCellProps,
+} from './YearRangePickerCell.vue'
+export {
+  default as YearRangePickerCellTrigger,
+  type YearRangePickerCellTriggerProps,
+} from './YearRangePickerCellTrigger.vue'
+export {
+  default as YearRangePickerGrid,
+  type YearRangePickerGridProps,
+} from './YearRangePickerGrid.vue'
+export {
+  default as YearRangePickerGridBody,
+  type YearRangePickerGridBodyProps,
+} from './YearRangePickerGridBody.vue'
+export {
+  default as YearRangePickerGridRow,
+  type YearRangePickerGridRowProps,
+} from './YearRangePickerGridRow.vue'
+export {
+  default as YearRangePickerHeader,
+  type YearRangePickerHeaderProps,
+} from './YearRangePickerHeader.vue'
+export {
+  default as YearRangePickerHeading,
+  type YearRangePickerHeadingProps,
+} from './YearRangePickerHeading.vue'
+export {
+  default as YearRangePickerNext,
+  type YearRangePickerNextProps,
+} from './YearRangePickerNext.vue'
+export {
+  default as YearRangePickerPrev,
+  type YearRangePickerPrevProps,
+} from './YearRangePickerPrev.vue'
+export {
+  injectYearRangePickerRootContext,
+  default as YearRangePickerRoot,
+  type YearRangePickerRootEmits,
+  type YearRangePickerRootProps,
+} from './YearRangePickerRoot.vue'

package/src/YearRangePicker/useRangeYearPicker.ts

@@ -0,0 +1,165 @@
+import type { DateValue } from '@internationalized/date'
+import type { Ref } from 'vue'
+import type { Matcher } from '@/date'
+import { computed } from 'vue'
+import { areAllYearsBetweenValid, getYearsBetween, isSameYear } from '@/date'
+
+export type UseRangeYearPickerProps = {
+  start: Ref<DateValue | undefined>
+  end: Ref<DateValue | undefined>
+  isYearDisabled: Matcher
+  isYearUnavailable: Matcher
+  focusedValue: Ref<DateValue | undefined>
+  allowNonContiguousRanges: Ref<boolean>
+  fixedDate: Ref<'start' | 'end' | undefined>
+  maximumYears?: Ref<number | undefined>
+}
+
+export function useRangeYearPickerState(props: UseRangeYearPickerProps) {
+  const isStartInvalid = computed(() => {
+    if (!props.start.value)
+      return false
+    if (props.isYearDisabled(props.start.value))
+      return true
+    return false
+  })
+
+  const isEndInvalid = computed(() => {
+    if (!props.end.value)
+      return false
+    if (props.isYearDisabled(props.end.value))
+      return true
+    return false
+  })
+
+  const isInvalid = computed(() => {
+    if (isStartInvalid.value || isEndInvalid.value)
+      return true
+    if (props.start.value && props.end.value && props.end.value.year < props.start.value.year)
+      return true
+    return false
+  })
+
+  const isSelectionStart = (date: DateValue) => {
+    if (!props.start.value)
+      return false
+    return isSameYear(props.start.value, date)
+  }
+
+  const isSelectionEnd = (date: DateValue) => {
+    if (!props.end.value)
+      return false
+    return isSameYear(props.end.value, date)
+  }
+
+  const isSelected = (date: DateValue) => {
+    if (props.start.value && isSameYear(props.start.value, date))
+      return true
+    if (props.end.value && isSameYear(props.end.value, date))
+      return true
+    if (props.end.value && props.start.value) {
+      return date.year > props.start.value.year && date.year < props.end.value.year
+    }
+    return false
+  }
+
+  const rangeIsYearDisabled = (date: DateValue) => {
+    if (props.isYearDisabled(date))
+      return true
+
+    if (props.maximumYears?.value) {
+      const maximumYears = props.maximumYears.value
+
+      if (props.start.value && props.end.value) {
+        if (props.fixedDate.value) {
+          const diff = getYearsBetween(props.start.value, props.end.value)
+          if (diff <= maximumYears) {
+            const yearsLeft = maximumYears - diff
+            const startLimit = props.start.value.subtract({ years: yearsLeft })
+            const endLimit = props.end.value.add({ years: yearsLeft })
+            return date.year < startLimit.year || date.year > endLimit.year
+          }
+
+          const fixedValue = props.fixedDate.value === 'start' ? props.start.value : props.end.value
+          const maxDate = fixedValue.add({ years: maximumYears - 1 })
+          const minDate = fixedValue.subtract({ years: maximumYears - 1 })
+          return date.year < minDate.year || date.year > maxDate.year
+        }
+        return false
+      }
+      if (props.start.value) {
+        const maxDate = props.start.value.add({ years: maximumYears - 1 })
+        const minDate = props.start.value.subtract({ years: maximumYears - 1 })
+        return date.year < minDate.year || date.year > maxDate.year
+      }
+    }
+
+    return false
+  }
+
+  const highlightedRange = computed(() => {
+    if (props.start.value && props.end.value && !props.fixedDate.value)
+      return null
+    if (!props.start.value || !props.focusedValue.value)
+      return null
+
+    const isStartBeforeFocused = props.start.value.year < props.focusedValue.value.year
+    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value
+    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value
+
+    if (isSameYear(start, end)) {
+      return { start, end }
+    }
+
+    if (props.maximumYears?.value && !props.end.value) {
+      const maximumYears = props.maximumYears.value
+      const anchor = props.start.value
+      const focused = props.focusedValue.value
+
+      if (focused.year >= anchor.year) {
+        const maxEnd = anchor.add({ years: maximumYears - 1 })
+        const cappedEnd = focused.year > maxEnd.year ? maxEnd : focused
+        return { start: anchor, end: cappedEnd }
+      }
+      else {
+        const minStart = anchor.subtract({ years: maximumYears - 1 })
+        const cappedStart = focused.year < minStart.year ? minStart : focused
+        return { start: cappedStart, end: anchor }
+      }
+    }
+
+    const isValid = areAllYearsBetweenValid(
+      start,
+      end,
+      props.allowNonContiguousRanges.value ? () => false : props.isYearUnavailable,
+      rangeIsYearDisabled,
+    )
+    if (isValid)
+      return { start, end }
+
+    return null
+  })
+
+  const isHighlightedStart = (date: DateValue) => {
+    if (!highlightedRange.value?.start)
+      return false
+    return isSameYear(highlightedRange.value.start, date)
+  }
+
+  const isHighlightedEnd = (date: DateValue) => {
+    if (!highlightedRange.value?.end)
+      return false
+    return isSameYear(highlightedRange.value.end, date)
+  }
+
+  return {
+    isInvalid,
+    isSelected,
+    highlightedRange,
+    isSelectionStart,
+    isSelectionEnd,
+    isHighlightedStart,
+    isHighlightedEnd,
+    isYearDisabled: rangeIsYearDisabled,
+  }
+}

package/src/date/calendar.ts

@@ -188,6 +188,35 @@ export function createMonths(props: SetMonthProps) {
   return months
 }
 
+/**
+ * Creates a 3x4 grid of months for a given year.
+ */
+export function createMonthGrid(props: CreateSelectProps): Grid<DateValue> {
+  const { dateObj } = props
+  const months = createYear({ dateObj })
+  return { value: dateObj, cells: months, rows: chunk(months, 4) }
+}
+
+/**
+ * Creates a 3x4 grid of years (decade-aligned).
+ * The grid starts from the decade that contains the given date.
+ */
+export function createYearGrid(props: CreateSelectProps & { yearsPerPage?: number, decadeAligned?: boolean }): Grid<DateValue> {
+  const { dateObj, yearsPerPage = 12, decadeAligned = true } = props
+
+  let startYear: number
+  if (decadeAligned) {
+    startYear = startOfDecade(dateObj).year
+  }
+  else {
+    startYear = dateObj.year
+  }
+
+  const years = Array.from({ length: yearsPerPage }, (_, i) => startOfYear(dateObj.set({ year: startYear + i })))
+  const firstYear = years[0]
+  return { value: firstYear, cells: years, rows: chunk(years, 4) }
+}
+
 export function createYearRange({ start, end }: DateRange): DateValue[] {
   const years: DateValue[] = []