reka-ui 2.8.2 → 2.9.0

package/src/MonthPicker/MonthPickerRoot.vue

@@ -0,0 +1,311 @@
+<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 { isSameYearMonth } from '@/date'
+import { createContext, useDirection, useId, useLocale } from '@/shared'
+import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
+import { useMonthPicker, useMonthPickerState } from './useMonthPicker'
+
+type MonthPickerRootContext = {
+  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>
+  onMonthChange: (date: DateValue) => void
+  onPlaceholderChange: (date: DateValue) => void
+  fullCalendarLabel: Ref<string>
+  parentElement: Ref<HTMLElement | undefined>
+  headingValue: Ref<string>
+  headingId: string
+  isInvalid: Ref<boolean>
+  isMonthDisabled: Matcher
+  isMonthSelected: Matcher
+  isMonthUnavailable?: 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>
+}
+
+export interface MonthPickerRootProps extends PrimitiveProps {
+  /** The default value for the month picker */
+  defaultValue?: DateValue
+  /** The default placeholder date */
+  defaultPlaceholder?: DateValue
+  /** The placeholder date, which is used to determine what year 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 month 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 month picker is disabled */
+  disabled?: boolean
+  /** Whether the month picker is readonly */
+  readonly?: boolean
+  /** If true, the month picker will focus the selected month, today, or the first month of the year 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. If omitted, inherits globally from `ConfigProvider` or assumes LTR. */
+  dir?: Direction
+  /** A function that returns the next page of the month picker. Receives the current placeholder as an argument. */
+  nextPage?: (placeholder: DateValue) => DateValue
+  /** A function that returns the previous page of the month picker. Receives the current placeholder as an argument. */
+  prevPage?: (placeholder: DateValue) => DateValue
+  /** The controlled selected month value of the month picker. Can be bound as `v-model`. */
+  modelValue?: DateValue | DateValue[] | undefined
+  /** Whether multiple months can be selected */
+  multiple?: boolean
+}
+
+export type MonthPickerRootEmits = {
+  /** 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 [injectMonthPickerRootContext, provideMonthPickerRootContext]
+  = createContext<MonthPickerRootContext>('MonthPickerRoot')
+</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<MonthPickerRootProps>(), {
+  defaultValue: undefined,
+  as: 'div',
+  preventDeselect: false,
+  multiple: false,
+  disabled: false,
+  readonly: false,
+  initialFocus: false,
+  placeholder: undefined,
+  isMonthDisabled: undefined,
+  isMonthUnavailable: undefined,
+})
+const emits = defineEmits<MonthPickerRootEmits>()
+defineSlots<{
+  default?: (props: {
+    /** The current date of the placeholder */
+    date: DateValue
+    /** The grid of months */
+    grid: Grid<DateValue>
+    /** The month picker locale */
+    locale: string
+    /** The current selected value */
+    modelValue: DateValue | DateValue[] | undefined
+  }) => any
+}>()
+
+const {
+  disabled,
+  readonly,
+  initialFocus,
+  multiple,
+  minValue,
+  maxValue,
+  preventDeselect,
+  isMonthDisabled: propsIsMonthDisabled,
+  isMonthUnavailable: propsIsMonthUnavailable,
+  calendarLabel,
+  defaultValue,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  dir: propDir,
+  locale: propLocale,
+} = toRefs(props)
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement()
+const locale = useLocale(propLocale)
+const dir = useDirection(propDir)
+const headingId = useId(undefined, 'reka-month-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,
+  isMonthDisabled,
+  isMonthUnavailable,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  nextPage,
+  prevPage,
+  formatter,
+  grid,
+} = useMonthPicker({
+  locale,
+  placeholder,
+  minValue,
+  maxValue,
+  disabled,
+  isMonthDisabled: propsIsMonthDisabled,
+  isMonthUnavailable: propsIsMonthUnavailable,
+  calendarLabel,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+})
+
+const { isInvalid, isMonthSelected } = useMonthPickerState({
+  date: modelValue,
+  isMonthDisabled,
+  isMonthUnavailable,
+})
+
+watch(modelValue, (_modelValue) => {
+  if (Array.isArray(_modelValue) && _modelValue.length) {
+    const lastValue = _modelValue[_modelValue.length - 1]
+    if (lastValue && !isSameYearMonth(placeholder.value, lastValue))
+      onPlaceholderChange(lastValue)
+  }
+  else if (!Array.isArray(_modelValue) && _modelValue && !isSameYearMonth(placeholder.value, _modelValue)) {
+    onPlaceholderChange(_modelValue)
+  }
+})
+
+function onMonthChange(value: DateValue) {
+  if (!multiple.value) {
+    if (!modelValue.value) {
+      modelValue.value = value.copy()
+      return
+    }
+
+    if (!preventDeselect.value && isSameYearMonth(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 {
+    const modelValueArray = Array.isArray(modelValue.value)
+      ? modelValue.value
+      : [modelValue.value]
+
+    const index = modelValueArray.findIndex(date => isSameYearMonth(date, value))
+    if (index === -1) {
+      modelValue.value = [...modelValueArray, value.copy()]
+    }
+    else if (!preventDeselect.value) {
+      const next = modelValueArray.filter(date => !isSameYearMonth(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)
+})
+
+provideMonthPickerRootContext({
+  isMonthUnavailable,
+  dir,
+  isMonthDisabled,
+  locale,
+  formatter,
+  modelValue,
+  placeholder,
+  disabled,
+  initialFocus,
+  grid,
+  multiple,
+  readonly,
+  preventDeselect,
+  fullCalendarLabel,
+  headingValue,
+  headingId,
+  isInvalid,
+  isMonthSelected,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  nextPage,
+  prevPage,
+  parentElement,
+  onPlaceholderChange,
+  onMonthChange,
+  minValue,
+  maxValue,
+})
+</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/MonthPicker/index.ts

@@ -0,0 +1,42 @@
+export {
+  default as MonthPickerCell,
+  type MonthPickerCellProps,
+} from './MonthPickerCell.vue'
+export {
+  default as MonthPickerCellTrigger,
+  type MonthPickerCellTriggerProps,
+} from './MonthPickerCellTrigger.vue'
+export {
+  default as MonthPickerGrid,
+  type MonthPickerGridProps,
+} from './MonthPickerGrid.vue'
+export {
+  default as MonthPickerGridBody,
+  type MonthPickerGridBodyProps,
+} from './MonthPickerGridBody.vue'
+export {
+  default as MonthPickerGridRow,
+  type MonthPickerGridRowProps,
+} from './MonthPickerGridRow.vue'
+export {
+  default as MonthPickerHeader,
+  type MonthPickerHeaderProps,
+} from './MonthPickerHeader.vue'
+export {
+  default as MonthPickerHeading,
+  type MonthPickerHeadingProps,
+} from './MonthPickerHeading.vue'
+export {
+  default as MonthPickerNext,
+  type MonthPickerNextProps,
+} from './MonthPickerNext.vue'
+export {
+  default as MonthPickerPrev,
+  type MonthPickerPrevProps,
+} from './MonthPickerPrev.vue'
+export {
+  injectMonthPickerRootContext,
+  default as MonthPickerRoot,
+  type MonthPickerRootEmits,
+  type MonthPickerRootProps,
+} from './MonthPickerRoot.vue'

package/src/MonthPicker/useMonthPicker.ts

@@ -0,0 +1,193 @@
+import type { DateValue } from '@internationalized/date'
+import type { Ref } from 'vue'
+import type { Grid, Matcher } from '@/date'
+import type { DateFormatterOptions } from '@/shared/useDateFormatter'
+import { endOfMonth } from '@internationalized/date'
+import { computed, ref, watch } from 'vue'
+import { createMonthGrid, isAfter, isBefore, isSameYearMonth, toDate } from '@/date'
+import { useDateFormatter } from '@/shared'
+
+export type UseMonthPickerProps = {
+  locale: Ref<string>
+  placeholder: Ref<DateValue>
+  minValue: Ref<DateValue | undefined>
+  maxValue: Ref<DateValue | undefined>
+  disabled: Ref<boolean>
+  isMonthDisabled?: Matcher | Ref<Matcher | undefined>
+  isMonthUnavailable?: Matcher | Ref<Matcher | undefined>
+  calendarLabel: Ref<string | undefined>
+  nextPage: Ref<((placeholder: DateValue) => DateValue) | undefined>
+  prevPage: Ref<((placeholder: DateValue) => DateValue) | undefined>
+}
+
+export type UseMonthPickerStateProps = {
+  isMonthDisabled: Matcher
+  isMonthUnavailable: Matcher
+  date: Ref<DateValue | DateValue[] | undefined>
+}
+
+export function useMonthPickerState(props: UseMonthPickerStateProps) {
+  function isMonthSelected(dateObj: DateValue) {
+    if (Array.isArray(props.date.value))
+      return props.date.value.some(d => isSameYearMonth(d, dateObj))
+    else if (!props.date.value)
+      return false
+    else
+      return isSameYearMonth(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.isMonthDisabled?.(dateObj))
+          return true
+        if (props.isMonthUnavailable?.(dateObj))
+          return true
+      }
+    }
+    else {
+      if (!props.date.value)
+        return false
+      if (props.isMonthDisabled?.(props.date.value))
+        return true
+      if (props.isMonthUnavailable?.(props.date.value))
+        return true
+    }
+    return false
+  })
+
+  return { isMonthSelected, isInvalid }
+}
+
+export function useMonthPicker(props: UseMonthPickerProps) {
+  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>>(createMonthGrid({ dateObj: props.placeholder.value })) as Ref<Grid<DateValue>>
+
+  function isMonthDisabled(dateObj: DateValue) {
+    if (resolveMatcher(props.isMonthDisabled)?.(dateObj) || props.disabled.value)
+      return true
+    if (props.maxValue.value && isAfter(dateObj.set({ day: 1 }), props.maxValue.value))
+      return true
+    if (props.minValue.value && isBefore(endOfMonth(dateObj), props.minValue.value))
+      return true
+    return false
+  }
+
+  const isMonthUnavailable = (date: DateValue) => {
+    if (resolveMatcher(props.isMonthUnavailable)?.(date))
+      return true
+    return false
+  }
+
+  const isNextButtonDisabled = (nextPageFunc?: (date: DateValue) => DateValue) => {
+    if (!props.maxValue.value)
+      return false
+    if (props.disabled.value)
+      return true
+
+    const currentDate = grid.value.value
+    if (nextPageFunc || props.nextPage.value) {
+      const nextDate = (nextPageFunc || props.nextPage.value)!(currentDate)
+      return isAfter(nextDate.set({ month: 1, day: 1 }), props.maxValue.value)
+    }
+
+    const nextYear = currentDate.add({ years: 1 }).set({ month: 1, day: 1 })
+    return isAfter(nextYear, props.maxValue.value)
+  }
+
+  const isPrevButtonDisabled = (prevPageFunc?: (date: DateValue) => DateValue) => {
+    if (!props.minValue.value)
+      return false
+    if (props.disabled.value)
+      return true
+
+    const currentDate = grid.value.value
+    if (prevPageFunc || props.prevPage.value) {
+      const prevDate = (prevPageFunc || props.prevPage.value)!(currentDate)
+      return isBefore(endOfMonth(prevDate.set({ month: 12 })), props.minValue.value)
+    }
+
+    const prevYear = currentDate.subtract({ years: 1 }).set({ month: 12, day: 31 })
+    return isBefore(prevYear, props.minValue.value)
+  }
+
+  const nextPage = (nextPageFunc?: (date: DateValue) => DateValue) => {
+    const currentDate = grid.value.value
+
+    if (nextPageFunc || props.nextPage.value) {
+      const newDate = (nextPageFunc || props.nextPage.value)!(currentDate)
+      grid.value = createMonthGrid({ dateObj: newDate })
+      props.placeholder.value = newDate.set({ day: 1 })
+      return
+    }
+
+    const newDate = currentDate.add({ years: 1 })
+    grid.value = createMonthGrid({ dateObj: newDate })
+    props.placeholder.value = newDate.set({ day: 1 })
+  }
+
+  const prevPage = (prevPageFunc?: (date: DateValue) => DateValue) => {
+    const currentDate = grid.value.value
+
+    if (prevPageFunc || props.prevPage.value) {
+      const newDate = (prevPageFunc || props.prevPage.value)!(currentDate)
+      grid.value = createMonthGrid({ dateObj: newDate })
+      props.placeholder.value = newDate.set({ day: 1 })
+      return
+    }
+
+    const newDate = currentDate.subtract({ years: 1 })
+    grid.value = createMonthGrid({ dateObj: newDate })
+    props.placeholder.value = newDate.set({ day: 1 })
+  }
+
+  watch(props.placeholder, (value) => {
+    if (value.year === grid.value.value.year)
+      return
+    grid.value = createMonthGrid({ dateObj: value })
+  })
+
+  watch(props.locale, () => {
+    formatter.setLocale(props.locale.value)
+    grid.value = createMonthGrid({ dateObj: props.placeholder.value })
+  })
+
+  const headingValue = computed(() => {
+    if (props.locale.value !== formatter.getLocale())
+      formatter.setLocale(props.locale.value)
+
+    return formatter.fullYear(toDate(grid.value.value), headingFormatOptions.value)
+  })
+
+  const fullCalendarLabel = computed(() => `${props.calendarLabel.value ?? 'Month Picker'}, ${headingValue.value}`)
+
+  return {
+    isMonthDisabled,
+    isMonthUnavailable,
+    isNextButtonDisabled,
+    isPrevButtonDisabled,
+    grid,
+    formatter,
+    nextPage,
+    prevPage,
+    headingValue,
+    fullCalendarLabel,
+  }
+}

package/src/MonthRangePicker/MonthRangePickerCell.vue

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