reka-ui 2.8.2 → 2.9.0

package/src/YearPicker/YearPickerRoot.vue

@@ -0,0 +1,314 @@
+<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 { Direction } from '@/shared/types'
+import { isSameYear } from '@/date'
+import { createContext, useDirection, useId, useLocale } from '@/shared'
+import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
+import { useYearPicker, useYearPickerState } from './useYearPicker'
+
+type YearPickerRootContext = {
+  locale: Ref<string>
+  modelValue: Ref<DateValue | DateValue[] | undefined>
+  placeholder: Ref<DateValue>
+  multiple: Ref<boolean>
+  preventDeselect: Ref<boolean>
+  grid: Ref<Grid<DateValue>>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  initialFocus: Ref<boolean>
+  onYearChange: (date: DateValue) => void
+  onPlaceholderChange: (date: DateValue) => void
+  fullCalendarLabel: Ref<string>
+  parentElement: Ref<HTMLElement | undefined>
+  headingValue: Ref<string>
+  headingId: string
+  isInvalid: Ref<boolean>
+  isYearDisabled: Matcher
+  isYearSelected: Matcher
+  isYearUnavailable?: Matcher
+  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>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  yearsPerPage: Ref<number>
+}
+
+export interface YearPickerRootProps extends PrimitiveProps {
+  /** The default value for the year picker */
+  defaultValue?: DateValue
+  /** The default placeholder date */
+  defaultPlaceholder?: DateValue
+  /** The placeholder date, which is used to determine what year range to display when no date is selected */
+  placeholder?: DateValue
+  /** Whether or not to prevent the user from deselecting a date without selecting another date first */
+  preventDeselect?: boolean
+  /** The accessible label for the year picker */
+  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 the year picker is disabled */
+  disabled?: boolean
+  /** Whether the year picker is readonly */
+  readonly?: boolean
+  /** If true, the year picker will focus the selected year, today, or the first year of the range 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. If omitted, inherits globally from `ConfigProvider` or assumes LTR. */
+  dir?: Direction
+  /** A function that returns the next page of the year picker. Receives the current placeholder as an argument. */
+  nextPage?: (placeholder: DateValue) => DateValue
+  /** A function that returns the previous page of the year picker. Receives the current placeholder as an argument. */
+  prevPage?: (placeholder: DateValue) => DateValue
+  /** The controlled selected year value of the year picker. Can be bound as `v-model`. */
+  modelValue?: DateValue | DateValue[] | undefined
+  /** Whether multiple years can be selected */
+  multiple?: boolean
+  /** Number of years to display per page */
+  yearsPerPage?: number
+}
+
+export type YearPickerRootEmits = {
+  /** Event handler called whenever the model value changes */
+  'update:modelValue': [date: DateValue | DateValue[] | undefined]
+  /** Event handler called whenever the placeholder value changes */
+  'update:placeholder': [date: DateValue]
+}
+
+export const [injectYearPickerRootContext, provideYearPickerRootContext]
+  = createContext<YearPickerRootContext>('YearPickerRoot')
+</script>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { onMounted, toRefs, watch } from 'vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+
+const props = withDefaults(defineProps<YearPickerRootProps>(), {
+  defaultValue: undefined,
+  as: 'div',
+  preventDeselect: false,
+  multiple: false,
+  disabled: false,
+  readonly: false,
+  initialFocus: false,
+  placeholder: undefined,
+  isYearDisabled: undefined,
+  isYearUnavailable: undefined,
+  yearsPerPage: 12,
+})
+const emits = defineEmits<YearPickerRootEmits>()
+defineSlots<{
+  default?: (props: {
+    /** The current date of the placeholder */
+    date: DateValue
+    /** The grid of years */
+    grid: Grid<DateValue>
+    /** The year picker locale */
+    locale: string
+    /** The current selected value */
+    modelValue: DateValue | DateValue[] | undefined
+  }) => any
+}>()
+
+const {
+  disabled,
+  readonly,
+  initialFocus,
+  multiple,
+  minValue,
+  maxValue,
+  preventDeselect,
+  isYearDisabled: propsIsYearDisabled,
+  isYearUnavailable: propsIsYearUnavailable,
+  calendarLabel,
+  defaultValue,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  dir: propDir,
+  locale: propLocale,
+  yearsPerPage,
+} = toRefs(props)
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement()
+const locale = useLocale(propLocale)
+const dir = useDirection(propDir)
+const headingId = useId(undefined, 'reka-year-picker-heading')
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: defaultValue.value,
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<DateValue | DateValue[] | undefined>
+
+const defaultDate = getDefaultDate({
+  defaultPlaceholder: props.placeholder,
+  defaultValue: modelValue.value,
+  locale: props.locale,
+})
+
+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,
+  nextPage,
+  prevPage,
+  formatter,
+  grid,
+} = useYearPicker({
+  locale,
+  placeholder,
+  minValue,
+  maxValue,
+  disabled,
+  yearsPerPage,
+  isYearDisabled: propsIsYearDisabled,
+  isYearUnavailable: propsIsYearUnavailable,
+  calendarLabel,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+})
+
+const { isInvalid, isYearSelected } = useYearPickerState({
+  date: modelValue,
+  isYearDisabled,
+  isYearUnavailable,
+})
+
+watch(modelValue, (_modelValue) => {
+  if (Array.isArray(_modelValue) && _modelValue.length) {
+    const lastValue = _modelValue[_modelValue.length - 1]
+    if (lastValue && !isSameYear(placeholder.value, lastValue))
+      onPlaceholderChange(lastValue)
+  }
+  else if (!Array.isArray(_modelValue) && _modelValue && !isSameYear(placeholder.value, _modelValue)) {
+    onPlaceholderChange(_modelValue)
+  }
+})
+
+function onYearChange(value: DateValue) {
+  if (!multiple.value) {
+    if (!modelValue.value) {
+      modelValue.value = value.copy()
+      return
+    }
+
+    if (!preventDeselect.value && isSameYear(modelValue.value as DateValue, value)) {
+      placeholder.value = value.copy()
+      modelValue.value = undefined
+    }
+    else {
+      modelValue.value = value.copy()
+    }
+  }
+  else if (!modelValue.value) {
+    modelValue.value = [value.copy()]
+  }
+  else if (Array.isArray(modelValue.value)) {
+    const index = modelValue.value.findIndex(date => isSameYear(date, value))
+    if (index === -1) {
+      modelValue.value = [...modelValue.value, value.copy()]
+    }
+    else if (!preventDeselect.value) {
+      const next = modelValue.value.filter(date => !isSameYear(date, value))
+      if (!next.length) {
+        placeholder.value = value.copy()
+        modelValue.value = undefined
+        return
+      }
+      modelValue.value = next.map(date => date.copy())
+    }
+  }
+}
+
+onMounted(() => {
+  if (initialFocus.value)
+    handleCalendarInitialFocus(parentElement.value)
+})
+
+provideYearPickerRootContext({
+  isYearUnavailable,
+  dir,
+  isYearDisabled,
+  locale,
+  formatter,
+  modelValue,
+  placeholder,
+  disabled,
+  initialFocus,
+  grid,
+  multiple,
+  readonly,
+  preventDeselect,
+  fullCalendarLabel,
+  headingValue,
+  headingId,
+  isInvalid,
+  isYearSelected,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  nextPage,
+  prevPage,
+  parentElement,
+  onPlaceholderChange,
+  onYearChange,
+  minValue,
+  maxValue,
+  yearsPerPage,
+})
+</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"
+  >
+    <slot
+      :date="placeholder"
+      :grid="grid"
+      :locale="locale"
+      :model-value="modelValue"
+    />
+    <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>
+  </Primitive>
+</template>

package/src/YearPicker/index.ts

@@ -0,0 +1,42 @@
+export {
+  default as YearPickerCell,
+  type YearPickerCellProps,
+} from './YearPickerCell.vue'
+export {
+  default as YearPickerCellTrigger,
+  type YearPickerCellTriggerProps,
+} from './YearPickerCellTrigger.vue'
+export {
+  default as YearPickerGrid,
+  type YearPickerGridProps,
+} from './YearPickerGrid.vue'
+export {
+  default as YearPickerGridBody,
+  type YearPickerGridBodyProps,
+} from './YearPickerGridBody.vue'
+export {
+  default as YearPickerGridRow,
+  type YearPickerGridRowProps,
+} from './YearPickerGridRow.vue'
+export {
+  default as YearPickerHeader,
+  type YearPickerHeaderProps,
+} from './YearPickerHeader.vue'
+export {
+  default as YearPickerHeading,
+  type YearPickerHeadingProps,
+} from './YearPickerHeading.vue'
+export {
+  default as YearPickerNext,
+  type YearPickerNextProps,
+} from './YearPickerNext.vue'
+export {
+  default as YearPickerPrev,
+  type YearPickerPrevProps,
+} from './YearPickerPrev.vue'
+export {
+  injectYearPickerRootContext,
+  default as YearPickerRoot,
+  type YearPickerRootEmits,
+  type YearPickerRootProps,
+} from './YearPickerRoot.vue'

package/src/YearPicker/useYearPicker.ts

@@ -0,0 +1,202 @@
+import type { DateValue } from '@internationalized/date'
+import type { Ref } from 'vue'
+import type { Grid, Matcher } from '@/date'
+import type { DateFormatterOptions } from '@/shared/useDateFormatter'
+import { endOfYear, startOfYear } from '@internationalized/date'
+import { computed, ref, watch } from 'vue'
+import { createYearGrid, isAfter, isBefore, isSameYear, toDate } from '@/date'
+import { useDateFormatter } from '@/shared'
+
+export type UseYearPickerProps = {
+  locale: Ref<string>
+  placeholder: Ref<DateValue>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  disabled: Ref<boolean>
+  yearsPerPage: Ref<number>
+  isYearDisabled?: Matcher | Ref<Matcher | undefined>
+  isYearUnavailable?: Matcher | Ref<Matcher | undefined>
+  calendarLabel: Ref<string | undefined>
+  nextPage: Ref<((placeholder: DateValue) => DateValue) | undefined>
+  prevPage: Ref<((placeholder: DateValue) => DateValue) | undefined>
+}
+
+export type UseYearPickerStateProps = {
+  isYearDisabled: Matcher
+  isYearUnavailable: Matcher
+  date: Ref<DateValue | DateValue[] | undefined>
+}
+
+export function useYearPickerState(props: UseYearPickerStateProps) {
+  function isYearSelected(dateObj: DateValue) {
+    if (Array.isArray(props.date.value))
+      return props.date.value.some(d => isSameYear(d, dateObj))
+    else if (!props.date.value)
+      return false
+    else
+      return isSameYear(props.date.value, dateObj)
+  }
+
+  const isInvalid = computed(() => {
+    if (Array.isArray(props.date.value)) {
+      if (!props.date.value.length)
+        return false
+      for (const dateObj of props.date.value) {
+        if (props.isYearDisabled?.(dateObj))
+          return true
+        if (props.isYearUnavailable?.(dateObj))
+          return true
+      }
+    }
+    else {
+      if (!props.date.value)
+        return false
+      if (props.isYearDisabled?.(props.date.value))
+        return true
+      if (props.isYearUnavailable?.(props.date.value))
+        return true
+    }
+    return false
+  })
+
+  return { isYearSelected, isInvalid }
+}
+
+export function useYearPicker(props: UseYearPickerProps) {
+  const formatter = useDateFormatter(props.locale.value)
+
+  const resolveMatcher = (matcher?: Matcher | Ref<Matcher | undefined>) =>
+    typeof matcher === 'function' ? matcher : matcher?.value
+
+  const headingFormatOptions = computed(() => {
+    const options: DateFormatterOptions = {
+      calendar: props.placeholder.value.calendar.identifier,
+    }
+
+    if (props.placeholder.value.calendar.identifier === 'gregory' && props.placeholder.value.era === 'BC')
+      options.era = 'short'
+
+    return options
+  })
+
+  const grid = ref<Grid<DateValue>>(createYearGrid({
+    dateObj: props.placeholder.value,
+    yearsPerPage: props.yearsPerPage.value,
+  })) as Ref<Grid<DateValue>>
+
+  function isYearDisabled(dateObj: DateValue) {
+    if (resolveMatcher(props.isYearDisabled)?.(dateObj) || props.disabled.value)
+      return true
+    if (props.maxValue.value && isAfter(startOfYear(dateObj), props.maxValue.value))
+      return true
+    if (props.minValue.value && isBefore(endOfYear(dateObj), props.minValue.value))
+      return true
+    return false
+  }
+
+  const isYearUnavailable = (date: DateValue) => {
+    if (resolveMatcher(props.isYearUnavailable)?.(date))
+      return true
+    return false
+  }
+
+  const isNextButtonDisabled = (nextPageFunc?: (date: DateValue) => DateValue) => {
+    if (!props.maxValue.value)
+      return false
+    if (props.disabled.value)
+      return true
+
+    const lastYearInView = grid.value.cells[grid.value.cells.length - 1]
+    if (nextPageFunc || props.nextPage.value) {
+      const nextDate = (nextPageFunc || props.nextPage.value)!(lastYearInView)
+      return isAfter(startOfYear(nextDate), props.maxValue.value)
+    }
+
+    const nextPageStart = startOfYear(lastYearInView.add({ years: 1 }))
+    return isAfter(nextPageStart, props.maxValue.value)
+  }
+
+  const isPrevButtonDisabled = (prevPageFunc?: (date: DateValue) => DateValue) => {
+    if (!props.minValue.value)
+      return false
+    if (props.disabled.value)
+      return true
+
+    const firstYearInView = grid.value.value
+    if (prevPageFunc || props.prevPage.value) {
+      const prevDate = (prevPageFunc || props.prevPage.value)!(firstYearInView)
+      return isBefore(endOfYear(prevDate), props.minValue.value)
+    }
+
+    const prevPageEnd = endOfYear(firstYearInView.subtract({ years: 1 }))
+    return isBefore(prevPageEnd, props.minValue.value)
+  }
+
+  const nextPage = (nextPageFunc?: (date: DateValue) => DateValue) => {
+    const firstYearInGrid = grid.value.value
+
+    if (nextPageFunc || props.nextPage.value) {
+      const newDate = (nextPageFunc || props.nextPage.value)!(firstYearInGrid)
+      grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
+      props.placeholder.value = newDate.set({ month: 1, day: 1 })
+      return
+    }
+
+    const newDate = firstYearInGrid.add({ years: props.yearsPerPage.value })
+    grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
+    props.placeholder.value = newDate.set({ month: 1, day: 1 })
+  }
+
+  const prevPage = (prevPageFunc?: (date: DateValue) => DateValue) => {
+    const firstYearInGrid = grid.value.value
+
+    if (prevPageFunc || props.prevPage.value) {
+      const newDate = (prevPageFunc || props.prevPage.value)!(firstYearInGrid)
+      grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
+      props.placeholder.value = newDate.set({ month: 1, day: 1 })
+      return
+    }
+
+    const newDate = firstYearInGrid.subtract({ years: props.yearsPerPage.value })
+    grid.value = createYearGrid({ dateObj: newDate, yearsPerPage: props.yearsPerPage.value, decadeAligned: false })
+    props.placeholder.value = newDate.set({ month: 1, day: 1 })
+  }
+
+  watch(props.placeholder, (value) => {
+    const firstYearInGrid = grid.value.value
+    const lastYearInGrid = grid.value.cells[grid.value.cells.length - 1]
+    if (value.year >= firstYearInGrid.year && value.year <= lastYearInGrid.year)
+      return
+    grid.value = createYearGrid({ dateObj: value, yearsPerPage: props.yearsPerPage.value })
+  })
+
+  watch([props.locale, props.yearsPerPage], () => {
+    formatter.setLocale(props.locale.value)
+    grid.value = createYearGrid({ dateObj: props.placeholder.value, yearsPerPage: props.yearsPerPage.value })
+  })
+
+  const headingValue = computed(() => {
+    if (props.locale.value !== formatter.getLocale())
+      formatter.setLocale(props.locale.value)
+
+    const firstYear = grid.value.cells[0]
+    const lastYear = grid.value.cells[grid.value.cells.length - 1]
+
+    return `${formatter.fullYear(toDate(firstYear), headingFormatOptions.value)} - ${formatter.fullYear(toDate(lastYear), headingFormatOptions.value)}`
+  })
+
+  const fullCalendarLabel = computed(() => `${props.calendarLabel.value ?? 'Year Picker'}, ${headingValue.value}`)
+
+  return {
+    isYearDisabled,
+    isYearUnavailable,
+    isNextButtonDisabled,
+    isPrevButtonDisabled,
+    grid,
+    formatter,
+    nextPage,
+    prevPage,
+    headingValue,
+    fullCalendarLabel,
+  }
+}

package/src/YearRangePicker/YearRangePickerCell.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface YearRangePickerCellProps extends PrimitiveProps {
+  /** The date value for the cell */
+  date: DateValue
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '@/Primitive'
+import { injectYearRangePickerRootContext } from './YearRangePickerRoot.vue'
+
+withDefaults(defineProps<YearRangePickerCellProps>(), { as: 'td' })
+const rootContext = injectYearRangePickerRootContext()
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    role="gridcell"
+    :aria-selected="rootContext.isSelected(date) ? true : undefined"
+    :aria-disabled="rootContext.isYearDisabled(date) || rootContext.isYearUnavailable?.(date)"
+    :data-disabled="rootContext.isYearDisabled(date) ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>