reka-ui 2.8.2 → 2.9.0

package/src/MonthRangePicker/MonthRangePickerRoot.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 { compareYearMonth, isSameYearMonth } from '@/date'
+import { useMonthPicker } from '@/MonthPicker/useMonthPicker'
+import { createContext, useDirection, useId, useKbd, useLocale } from '@/shared'
+import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
+import { useRangeMonthPickerState } from './useRangeMonthPicker'
+
+type MonthRangePickerRootContext = {
+  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>
+  isMonthDisabled: Matcher
+  isMonthUnavailable?: 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>
+  maximumMonths: Ref<number | undefined>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+}
+
+export interface MonthRangePickerRootProps extends PrimitiveProps {
+  /** The default placeholder date */
+  defaultPlaceholder?: DateValue
+  /** The default value for the calendar */
+  defaultValue?: DateRange
+  /** The controlled selected month range of the month range picker. Can be bound as `v-model`. */
+  modelValue?: DateRange | null
+  /** The placeholder date, which is used to determine what year to display when no date is selected. */
+  placeholder?: DateValue
+  /** When combined with `isMonthUnavailable`, 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 months that can be selected in a range */
+  maximumMonths?: 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 month on mount */
+  initialFocus?: boolean
+  /** A function that returns whether or not a month is disabled */
+  isMonthDisabled?: Matcher
+  /** A function that returns whether or not a month is unavailable */
+  isMonthUnavailable?: 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'
+}
+
+export type MonthRangePickerRootEmits = {
+  /** 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 [injectMonthRangePickerRootContext, provideMonthRangePickerRootContext]
+  = createContext<MonthRangePickerRootContext>('MonthRangePickerRoot')
+</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<MonthRangePickerRootProps>(), {
+  defaultValue: () => ({ start: undefined, end: undefined }),
+  as: 'div',
+  preventDeselect: false,
+  disabled: false,
+  readonly: false,
+  initialFocus: false,
+  placeholder: undefined,
+  isMonthDisabled: undefined,
+  isMonthUnavailable: undefined,
+  allowNonContiguousRanges: false,
+  maximumMonths: undefined,
+})
+const emits = defineEmits<MonthRangePickerRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** The current date of the placeholder */
+    date: DateValue
+    /** The grid of months */
+    grid: Grid<DateValue>
+    /** The calendar locale */
+    locale: string
+    /** The current date range */
+    modelValue: DateRange
+  }) => any
+}>()
+
+const {
+  disabled,
+  readonly,
+  initialFocus,
+  preventDeselect,
+  isMonthUnavailable: propsIsMonthUnavailable,
+  isMonthDisabled: propsIsMonthDisabled,
+  calendarLabel,
+  maxValue,
+  minValue,
+  dir: propDir,
+  locale: propLocale,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  allowNonContiguousRanges,
+  fixedDate,
+  maximumMonths,
+} = toRefs(props)
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement()
+const dir = useDirection(propDir)
+const locale = useLocale(propLocale)
+const headingId = useId(undefined, 'reka-month-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,
+  isMonthDisabled,
+  isMonthUnavailable,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  grid,
+  nextPage,
+  prevPage,
+  formatter,
+} = useMonthPicker({
+  locale,
+  placeholder,
+  minValue,
+  maxValue,
+  disabled,
+  isMonthDisabled: propsIsMonthDisabled,
+  isMonthUnavailable: propsIsMonthUnavailable,
+  calendarLabel,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+})
+
+const {
+  isInvalid,
+  isSelected,
+  highlightedRange,
+  isSelectionStart,
+  isSelectionEnd,
+  isHighlightedStart,
+  isHighlightedEnd,
+  isMonthDisabled: rangeIsMonthDisabled,
+} = useRangeMonthPickerState({
+  start: startValue,
+  end: endValue,
+  isMonthDisabled,
+  isMonthUnavailable,
+  focusedValue,
+  allowNonContiguousRanges,
+  fixedDate,
+  maximumMonths,
+})
+
+watch(modelValue, (_modelValue) => {
+  const next = normalizeRange(_modelValue)
+
+  const isStartSynced = (!next.start && !startValue.value)
+    || (!!next.start && !!startValue.value && isSameYearMonth(next.start, startValue.value))
+
+  if (!isStartSynced) {
+    startValue.value = next.start?.copy?.()
+  }
+
+  const isEndSynced = (!next.end && !endValue.value)
+    || (!!next.end && !!endValue.value && isSameYearMonth(next.end, endValue.value))
+
+  if (!isEndSynced) {
+    endValue.value = next.end?.copy?.()
+  }
+
+  if (next.start && next.end) {
+    validModelValue.value = {
+      start: next.start.copy(),
+      end: next.end.copy(),
+    }
+  }
+})
+
+watch(startValue, (_startValue) => {
+  if (_startValue && !isSameYearMonth(_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
+    && isSameYearMonth(value.start, _startValue)
+    && isSameYearMonth(value.end, _endValue)
+  ) {
+    return
+  }
+
+  isEditing.value = true
+  if (_endValue && _startValue) {
+    const nextValue = compareYearMonth(_endValue, _startValue) < 0
+      ? { 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()
+  }
+})
+
+provideMonthRangePickerRootContext({
+  isMonthUnavailable,
+  startValue,
+  endValue,
+  formatter,
+  modelValue: normalizedModelValue,
+  placeholder,
+  disabled,
+  initialFocus,
+  grid,
+  readonly,
+  preventDeselect,
+  fullCalendarLabel,
+  headingValue,
+  headingId,
+  isInvalid,
+  isMonthDisabled: rangeIsMonthDisabled,
+  allowNonContiguousRanges,
+  highlightedRange,
+  focusedValue,
+  lastPressedDateValue,
+  isSelected,
+  isSelectionEnd,
+  isSelectionStart,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  nextPage,
+  prevPage,
+  parentElement,
+  onPlaceholderChange,
+  locale,
+  dir,
+  isHighlightedStart,
+  isHighlightedEnd,
+  fixedDate,
+  maximumMonths,
+  minValue,
+  maxValue,
+})
+
+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/MonthRangePicker/index.ts

@@ -0,0 +1,42 @@
+export {
+  default as MonthRangePickerCell,
+  type MonthRangePickerCellProps,
+} from './MonthRangePickerCell.vue'
+export {
+  default as MonthRangePickerCellTrigger,
+  type MonthRangePickerCellTriggerProps,
+} from './MonthRangePickerCellTrigger.vue'
+export {
+  default as MonthRangePickerGrid,
+  type MonthRangePickerGridProps,
+} from './MonthRangePickerGrid.vue'
+export {
+  default as MonthRangePickerGridBody,
+  type MonthRangePickerGridBodyProps,
+} from './MonthRangePickerGridBody.vue'
+export {
+  default as MonthRangePickerGridRow,
+  type MonthRangePickerGridRowProps,
+} from './MonthRangePickerGridRow.vue'
+export {
+  default as MonthRangePickerHeader,
+  type MonthRangePickerHeaderProps,
+} from './MonthRangePickerHeader.vue'
+export {
+  default as MonthRangePickerHeading,
+  type MonthRangePickerHeadingProps,
+} from './MonthRangePickerHeading.vue'
+export {
+  default as MonthRangePickerNext,
+  type MonthRangePickerNextProps,
+} from './MonthRangePickerNext.vue'
+export {
+  default as MonthRangePickerPrev,
+  type MonthRangePickerPrevProps,
+} from './MonthRangePickerPrev.vue'
+export {
+  injectMonthRangePickerRootContext,
+  default as MonthRangePickerRoot,
+  type MonthRangePickerRootEmits,
+  type MonthRangePickerRootProps,
+} from './MonthRangePickerRoot.vue'

package/src/MonthRangePicker/useRangeMonthPicker.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 { areAllMonthsBetweenValid, compareYearMonth, getMonthsBetween, isSameYearMonth } from '@/date'
+
+export type UseRangeMonthPickerProps = {
+  start: Ref<DateValue | undefined>
+  end: Ref<DateValue | undefined>
+  isMonthDisabled: Matcher
+  isMonthUnavailable: Matcher
+  focusedValue: Ref<DateValue | undefined>
+  allowNonContiguousRanges: Ref<boolean>
+  fixedDate: Ref<'start' | 'end' | undefined>
+  maximumMonths?: Ref<number | undefined>
+}
+
+export function useRangeMonthPickerState(props: UseRangeMonthPickerProps) {
+  const isStartInvalid = computed(() => {
+    if (!props.start.value)
+      return false
+    if (props.isMonthDisabled(props.start.value))
+      return true
+    return false
+  })
+
+  const isEndInvalid = computed(() => {
+    if (!props.end.value)
+      return false
+    if (props.isMonthDisabled(props.end.value))
+      return true
+    return false
+  })
+
+  const isInvalid = computed(() => {
+    if (isStartInvalid.value || isEndInvalid.value)
+      return true
+    if (props.start.value && props.end.value && compareYearMonth(props.end.value, props.start.value) < 0)
+      return true
+    return false
+  })
+
+  const isSelectionStart = (date: DateValue) => {
+    if (!props.start.value)
+      return false
+    return isSameYearMonth(props.start.value, date)
+  }
+
+  const isSelectionEnd = (date: DateValue) => {
+    if (!props.end.value)
+      return false
+    return isSameYearMonth(props.end.value, date)
+  }
+
+  const isSelected = (date: DateValue) => {
+    if (props.start.value && isSameYearMonth(props.start.value, date))
+      return true
+    if (props.end.value && isSameYearMonth(props.end.value, date))
+      return true
+    if (props.end.value && props.start.value) {
+      return compareYearMonth(date, props.start.value) > 0 && compareYearMonth(date, props.end.value) < 0
+    }
+    return false
+  }
+
+  const rangeIsMonthDisabled = (date: DateValue) => {
+    if (props.isMonthDisabled(date))
+      return true
+
+    if (props.maximumMonths?.value) {
+      const maximumMonths = props.maximumMonths.value
+
+      if (props.start.value && props.end.value) {
+        if (props.fixedDate.value) {
+          const diff = getMonthsBetween(props.start.value, props.end.value)
+          if (diff <= maximumMonths) {
+            const monthsLeft = maximumMonths - diff
+            const startLimit = props.start.value.subtract({ months: monthsLeft })
+            const endLimit = props.end.value.add({ months: monthsLeft })
+            return compareYearMonth(date, startLimit) < 0 || compareYearMonth(date, endLimit) > 0
+          }
+
+          const fixedValue = props.fixedDate.value === 'start' ? props.start.value : props.end.value
+          const maxDate = fixedValue.add({ months: maximumMonths - 1 })
+          const minDate = fixedValue.subtract({ months: maximumMonths - 1 })
+          return compareYearMonth(date, minDate) < 0 || compareYearMonth(date, maxDate) > 0
+        }
+        return false
+      }
+      if (props.start.value) {
+        const maxDate = props.start.value.add({ months: maximumMonths - 1 })
+        const minDate = props.start.value.subtract({ months: maximumMonths - 1 })
+        return compareYearMonth(date, minDate) < 0 || compareYearMonth(date, maxDate) > 0
+      }
+    }
+
+    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 = compareYearMonth(props.start.value, props.focusedValue.value) < 0
+    const start = isStartBeforeFocused ? props.start.value : props.focusedValue.value
+    const end = isStartBeforeFocused ? props.focusedValue.value : props.start.value
+
+    if (isSameYearMonth(start, end)) {
+      return { start, end }
+    }
+
+    if (props.maximumMonths?.value && !props.end.value) {
+      const maximumMonths = props.maximumMonths.value
+      const anchor = props.start.value
+      const focused = props.focusedValue.value
+
+      if (compareYearMonth(focused, anchor) >= 0) {
+        const maxEnd = anchor.add({ months: maximumMonths - 1 })
+        const cappedEnd = compareYearMonth(focused, maxEnd) > 0 ? maxEnd : focused
+        return { start: anchor, end: cappedEnd }
+      }
+      else {
+        const minStart = anchor.subtract({ months: maximumMonths - 1 })
+        const cappedStart = compareYearMonth(focused, minStart) < 0 ? minStart : focused
+        return { start: cappedStart, end: anchor }
+      }
+    }
+
+    const isValid = areAllMonthsBetweenValid(
+      start,
+      end,
+      props.allowNonContiguousRanges.value ? () => false : props.isMonthUnavailable,
+      rangeIsMonthDisabled,
+    )
+    if (isValid)
+      return { start, end }
+
+    return null
+  })
+
+  const isHighlightedStart = (date: DateValue) => {
+    if (!highlightedRange.value?.start)
+      return false
+    return isSameYearMonth(highlightedRange.value.start, date)
+  }
+
+  const isHighlightedEnd = (date: DateValue) => {
+    if (!highlightedRange.value?.end)
+      return false
+    return isSameYearMonth(highlightedRange.value.end, date)
+  }
+
+  return {
+    isInvalid,
+    isSelected,
+    highlightedRange,
+    isSelectionStart,
+    isSelectionEnd,
+    isHighlightedStart,
+    isHighlightedEnd,
+    isMonthDisabled: rangeIsMonthDisabled,
+  }
+}

package/src/NumberField/NumberFieldRoot.vue

@@ -205,10 +205,10 @@ provideNumberFieldRootContext({
   inputEl,
   onInputElement: el => inputEl.value = el,
   textValue,
+  readonly,
   validate,
   applyInputValue,
   disabled,
-  readonly,
   disableWheelChange,
   invertWheelChange,
   max,
@@ -232,6 +232,7 @@ provideNumberFieldRootContext({
     <slot
       :model-value="modelValue"
       :text-value="textValue"
+      :readonly="readonly"
     />
 
     <VisuallyHiddenInput

package/src/Progress/ProgressRoot.vue

@@ -154,6 +154,8 @@ provideProgressRootContext({
     :data-value="modelValue ?? undefined"
     :data-max="max"
   >
-    <slot :model-value="modelValue" />
+    <slot
+      :model-value="modelValue"
+    />
   </Primitive>
 </template>

package/src/RangeCalendar/RangeCalendarNext.vue

@@ -26,18 +26,24 @@ defineSlots<RangeCalendarNextSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
 
 const rootContext = injectRangeCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.nextPage(props.nextPage)
+}
 </script>
 
 <template>
   <Primitive
-    :as="as"
-    :as-child="asChild"
+    :as="props.as"
+    :as-child="props.asChild"
     aria-label="Next page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.nextPage(props.nextPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Next page

package/src/RangeCalendar/RangeCalendarPrev.vue

@@ -26,18 +26,24 @@ defineSlots<RangeCalendarPrevSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
 
 const rootContext = injectRangeCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.prevPage(props.prevPage)
+}
 </script>
 
 <template>
   <Primitive
-    :as="as"
-    :as-child="asChild"
+    :as="props.as"
+    :as-child="props.asChild"
     aria-label="Previous page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.prevPage(props.prevPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Prev page