reka-ui 2.7.0 → 2.8.2

package/src/PinInput/PinInputInput.vue

@@ -50,11 +50,18 @@ function handleInput(event: InputEvent) {
     nextEl.focus()
 }
 
-function resetPlaceholder() {
-  const target = currentElement.value as HTMLInputElement
+function updatePlaceholder() {
   nextTick(() => {
-    if (target && !target.value)
+    const target = currentElement.value as HTMLInputElement
+    if (!target) {
+      return
+    }
+    if (!target.value && target === getActiveElement()) {
+      target.placeholder = ''
+    }
+    else {
       target.placeholder = context.placeholder.value
+    }
   })
 }
 
@@ -93,21 +100,25 @@ function handleDelete(event: KeyboardEvent) {
 }
 
 function handleFocus(event: FocusEvent) {
+  // In OTP mode, inputs should be filled one by one without skipping middle inputs
+  if (context.otp.value) {
+    const firstEmptyInputIdx = inputElements.value.findIndex((_, idx) =>
+      context.currentModelValue.value[idx] === ''
+      || context.currentModelValue.value[idx] === undefined,
+    )
+    if (firstEmptyInputIdx !== -1 && firstEmptyInputIdx < props.index) {
+      inputElements.value[firstEmptyInputIdx].focus()
+      return
+    }
+  }
+
   const target = event.target as HTMLInputElement
   target.setSelectionRange(1, 1)
-
-  if (!target.value)
-    target.placeholder = ''
-
-  // #2266, check again after DOM flushes
-  setTimeout(() => {
-    if (!target.value)
-      target.placeholder = ''
-  })
+  updatePlaceholder()
 }
 
 function handleBlur(event: FocusEvent) {
-  resetPlaceholder()
+  updatePlaceholder()
 }
 
 function handlePaste(event: ClipboardEvent) {
@@ -168,11 +179,7 @@ function updateModelValueAt(index: number, value: string) {
   context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)
 }
 
-watch(currentValue, () => {
-  if (!currentValue.value) {
-    resetPlaceholder()
-  }
-})
+watch(currentValue, updatePlaceholder)
 
 onMounted(() => {
   context.onInputElementChange(currentElement.value as HTMLInputElement)

package/src/Popper/PopperContent.vue

@@ -20,6 +20,7 @@ export const PopperContentPropsDefaultValue = {
   alignOffset: 0,
   alignFlip: true,
   arrowPadding: 0,
+  hideShiftedArrow: true,
   avoidCollisions: true,
   collisionBoundary: () => [],
   collisionPadding: 0,
@@ -36,7 +37,7 @@ export interface PopperContentProps extends PrimitiveProps {
    * Will be reversed when collisions occur and avoidCollisions
    * is enabled.
    *
-   * @defaultValue "top"
+   * @defaultValue "bottom"
    */
   side?: Side
 
@@ -112,6 +113,14 @@ export interface PopperContentProps extends PrimitiveProps {
    */
   arrowPadding?: number
 
+  /**
+   * When `true`, hides the arrow when it cannot be centered
+   * to the reference element.
+   *
+   * @defaultValue true
+   */
+  hideShiftedArrow?: boolean
+
   /**
    * The sticky behavior on the align axis. `partial` will keep the
    * content in the boundary as long as the trigger is at least partially
@@ -346,9 +355,10 @@ watchPostEffect(() => {
     emits('placed')
 })
 
-const cannotCenterArrow = computed(
-  () => middlewareData.value.arrow?.centerOffset !== 0,
-)
+const shouldHideArrow = computed(() => {
+  const cannotCenterArrow = middlewareData.value.arrow?.centerOffset !== 0
+  return props.hideShiftedArrow && cannotCenterArrow
+})
 
 const contentZIndex = ref('')
 watchEffect(() => {
@@ -364,7 +374,7 @@ providePopperContentContext({
   onArrowChange: element => arrow.value = element,
   arrowX,
   arrowY,
-  shouldHideArrow: cannotCenterArrow,
+  shouldHideArrow,
 })
 </script>
 

package/src/RadioGroup/RadioGroupRoot.vue

@@ -24,7 +24,7 @@ export interface RadioGroupRootProps extends PrimitiveProps, FormFieldProps {
 }
 export type RadioGroupRootEmits = {
   /** Event handler called when the radio group value changes */
-  'update:modelValue': [payload: string]
+  'update:modelValue': [payload: AcceptableValue]
 }
 
 interface RadioGroupRootContext {

package/src/RangeCalendar/RangeCalendarCellTrigger.vue

@@ -94,7 +94,15 @@ const isDisabled = computed(() => rootContext.isDateDisabled(props.day) || (root
 const dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))
 
 const isFocusedDate = computed(() => {
-  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)
+  if (isOutsideView.value || isDisabled.value)
+    return false
+  if (!rootContext.disabled.value && rootContext.isPlaceholderFocusable.value && isSameDay(props.day, rootContext.placeholder.value))
+    return true
+  if (!rootContext.disabled.value && rootContext.selectedFocusableDate.value && !rootContext.isPlaceholderFocusable.value)
+    return isSameDay(props.day, rootContext.selectedFocusableDate.value)
+  if (!rootContext.disabled.value && (!rootContext.hasSelectedDate.value || rootContext.isSelectedDisabled.value) && !rootContext.isPlaceholderFocusable.value)
+    return rootContext.firstFocusableDate.value && isSameDay(props.day, rootContext.firstFocusableDate.value)
+  return false
 })
 
 function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
@@ -103,22 +111,24 @@ function changeDate(e: MouseEvent | KeyboardEvent, date: DateValue) {
   if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))
     return
 
-  rootContext.lastPressedDateValue.value = date.copy()
-
   if (rootContext.startValue.value && rootContext.highlightedRange.value === null) {
     if (isSameDay(date, rootContext.startValue.value) && !rootContext.preventDeselect.value && !rootContext.endValue.value) {
       rootContext.startValue.value = undefined
       rootContext.onPlaceholderChange(date)
+      rootContext.lastPressedDateValue.value = date.copy()
       return
     }
     else if (!rootContext.endValue.value) {
       e.preventDefault()
       if (rootContext.lastPressedDateValue.value && isSameDay(rootContext.lastPressedDateValue.value, date))
         rootContext.startValue.value = date.copy()
+      rootContext.lastPressedDateValue.value = date.copy()
       return
     }
   }
 
+  rootContext.lastPressedDateValue.value = date.copy()
+
   if (
     rootContext.startValue.value
     && rootContext.endValue.value

package/src/RangeCalendar/RangeCalendarGrid.vue

@@ -26,6 +26,7 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
     :aria-disabled="disabled"
     :data-readonly="readonly && ''"
     :data-disabled="disabled && ''"
+    @mouseleave="rootContext.focusedValue.value = undefined"
   >
     <slot />
   </Primitive>

package/src/RangeCalendar/RangeCalendarRoot.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
 import type { DateValue } from '@internationalized/date'
 import type { Ref } from 'vue'
-import type { Grid, Matcher, WeekDayFormat } from '@/date'
+import type { Grid, Matcher, WeekDayFormat, WeekStartsOn } 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 { isEqualDay } from '@internationalized/date'
 import { useCalendar } from '@/Calendar/useCalendar'
-import { isBefore } from '@/date'
+import { getWeekStartsOn, isBefore } from '@/date'
 import {
   createContext,
   useDirection,
@@ -28,7 +28,7 @@ type RangeCalendarRootContext = {
   preventDeselect: Ref<boolean>
   grid: Ref<Grid<DateValue>[]>
   weekDays: Ref<string[]>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
@@ -68,6 +68,11 @@ type RangeCalendarRootContext = {
   maximumDays: Ref<number | undefined>
   minValue: Ref<DateValue | undefined>
   maxValue: Ref<DateValue | undefined>
+  isPlaceholderFocusable: Ref<boolean>
+  firstFocusableDate: Ref<DateValue | undefined>
+  hasSelectedDate: Ref<boolean>
+  isSelectedDisabled: Ref<boolean>
+  selectedFocusableDate: Ref<DateValue | undefined>
 }
 
 export interface RangeCalendarRootProps extends PrimitiveProps {
@@ -88,7 +93,7 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   /** The maximum number of days that can be selected in a range */
   maximumDays?: number
   /** The day of the week to start the calendar on */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  weekStartsOn?: WeekStartsOn
   /** The format to use for the weekday strings provided via the weekdays slot prop */
   weekdayFormat?: WeekDayFormat
   /** The accessible label for the calendar */
@@ -145,7 +150,7 @@ export const [injectRangeCalendarRootContext, provideRangeCalendarRootContext]
 
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
-import { onMounted, ref, toRefs, watch } from 'vue'
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
 const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
@@ -153,7 +158,6 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   as: 'div',
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
@@ -167,6 +171,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   allowNonContiguousRanges: false,
   maximumDays: undefined,
   disableDaysOutsideCurrentView: false,
+
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
 
@@ -179,7 +184,7 @@ defineSlots<{
     /** The days of the week */
     weekDays: string[]
     /** The start of the week */
-    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    weekStartsOn: WeekStartsOn
     /** The calendar locale */
     locale: string
     /** Whether or not to always display 6 weeks in the calendar */
@@ -194,7 +199,6 @@ const {
   readonly,
   initialFocus,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -219,6 +223,7 @@ const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const dir = useDirection(propDir)
 const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const lastPressedDateValue = ref() as Ref<DateValue | undefined>
 const focusedValue = ref() as Ref<DateValue | undefined>
@@ -227,9 +232,12 @@ 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>
+}) as Ref<DateRange | null>
+
+const normalizeRange = (value?: DateRange | null): DateRange => value ?? { start: undefined, end: undefined }
+const normalizedModelValue = computed(() => normalizeRange(modelValue.value))
 
-const validModelValue = ref(modelValue.value) as Ref<DateRange>
+const validModelValue = ref(normalizeRange(modelValue.value)) as Ref<DateRange>
 
 watch(validModelValue, (value) => {
   emits('update:validModelValue', value)
@@ -237,14 +245,14 @@ watch(validModelValue, (value) => {
 
 const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
-  defaultValue: modelValue.value.start,
+  defaultValue: normalizeRange(modelValue.value).start,
   locale: props.locale,
 })
 
-const startValue = ref(modelValue.value.start) as Ref<
+const startValue = ref(normalizeRange(modelValue.value).start) as Ref<
   DateValue | undefined
 >
-const endValue = ref(modelValue.value.end) 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(),
@@ -268,6 +276,8 @@ const {
   nextPage,
   prevPage,
   formatter,
+  isPlaceholderFocusable,
+  firstFocusableDate,
 } = useCalendar({
   locale,
   placeholder,
@@ -296,6 +306,9 @@ const {
   isHighlightedStart,
   isHighlightedEnd,
   isDateDisabled: rangeIsDateDisabled,
+  hasSelectedDate,
+  isSelectedDisabled,
+  selectedFocusableDate,
 } = useRangeCalendarState({
   start: startValue,
   end: endValue,
@@ -308,23 +321,21 @@ const {
   maximumDays,
 })
 
-watch(modelValue, (_modelValue, _prevValue) => {
-  if (
-    (!_prevValue?.start && _modelValue?.start)
-    || !_modelValue
-    || !_modelValue.start
-    || (startValue.value && !isEqualDay(_modelValue.start, startValue.value))
-  ) {
-    startValue.value = _modelValue?.start?.copy?.()
+watch(modelValue, (_modelValue) => {
+  const next = normalizeRange(_modelValue)
+
+  const isStartSynced = (!next.start && !startValue.value)
+    || (!!next.start && !!startValue.value && isEqualDay(next.start, startValue.value))
+
+  if (!isStartSynced) {
+    startValue.value = next.start?.copy?.()
   }
 
-  if (
-    (!_prevValue?.end && _modelValue.end)
-    || !_modelValue
-    || !_modelValue.end
-    || (endValue.value && !isEqualDay(_modelValue.end, endValue.value))
-  ) {
-    endValue.value = _modelValue?.end?.copy?.()
+  const isEndSynced = (!next.end && !endValue.value)
+    || (!!next.end && !!endValue.value && isEqualDay(next.end, endValue.value))
+
+  if (!isEndSynced) {
+    endValue.value = next.end?.copy?.()
   }
 })
 
@@ -382,7 +393,7 @@ provideRangeCalendarRootContext({
   startValue,
   endValue,
   formatter,
-  modelValue,
+  modelValue: normalizedModelValue,
   placeholder,
   disabled,
   initialFocus,
@@ -422,6 +433,11 @@ provideRangeCalendarRootContext({
   maximumDays,
   minValue,
   maxValue,
+  isPlaceholderFocusable,
+  firstFocusableDate,
+  hasSelectedDate,
+  isSelectedDisabled,
+  selectedFocusableDate,
 })
 
 onMounted(() => {
@@ -470,7 +486,7 @@ onMounted(() => {
       :week-starts-on="weekStartsOn"
       :locale="locale"
       :fixed-weeks="fixedWeeks"
-      :model-value="modelValue"
+      :model-value="normalizedModelValue"
     />
   </Primitive>
 </template>

package/src/RangeCalendar/useRangeCalendar.ts

@@ -41,7 +41,7 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
   const isInvalid = computed(
     () => {
       if (isStartInvalid.value || isEndInvalid.value)
-        return false
+        return true
       if (props.start.value && props.end.value && isBefore(props.end.value, props.start.value))
         return true
       return false
@@ -71,12 +71,10 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return false
   }
 
-  // Check if a date exceeds maximum days limit from the start date
   const rangeIsDateDisabled = (date: DateValue) => {
     if (props.isDateDisabled(date))
       return true
 
-    // Check if exceeds maximum days limit
     if (props.maximumDays?.value) {
       if (props.start.value && props.end.value) {
         if (props.fixedDate.value) {
@@ -97,9 +95,6 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    if (!props.start.value || props.end.value || isSameDay(props.start.value, date))
-      return false
-
     return false
   }
 
@@ -126,17 +121,17 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
       }
     }
 
-    // If maximum days is set and the range exceeds it, limit the highlight
-    // We only apply this when we're in the middle of a selection (no end date yet)
     if (props.maximumDays?.value && !props.end.value) {
-      // Determine the direction of selection and limit to maximum days
-      const cappedEnd = isStartBeforeFocused
-        ? start.add({ days: props.maximumDays.value - 1 })
-        : start.subtract({ days: props.maximumDays.value })
+      const maximumDays = props.maximumDays.value
+      const anchor = props.start.value
 
-      return {
-        start,
-        end: cappedEnd,
+      if (isStartBeforeFocused) {
+        const maxEnd = anchor.add({ days: maximumDays - 1 })
+        return { start: anchor, end: maxEnd }
+      }
+      else {
+        const minStart = anchor.subtract({ days: maximumDays - 1 })
+        return { start: minStart, end: anchor }
       }
     }
 
@@ -162,6 +157,36 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     return isSameDay(highlightedRange.value.end, date)
   }
 
+  const hasSelectedDate = computed(() => {
+    return !!(props.start.value || props.end.value)
+  })
+
+  const isStartDateDisabled = computed(() => {
+    return !!(props.start.value && props.isDateDisabled(props.start.value))
+  })
+
+  const isEndDateDisabled = computed(() => {
+    return !!(props.end.value && props.isDateDisabled(props.end.value))
+  })
+
+  const isSelectedDisabled = computed(() => {
+    const hasStart = !!props.start.value
+    const hasEnd = !!props.end.value
+    if (!hasStart && !hasEnd)
+      return false
+    if (hasStart && hasEnd)
+      return isStartDateDisabled.value && isEndDateDisabled.value
+    return (hasStart && isStartDateDisabled.value) || (hasEnd && isEndDateDisabled.value)
+  })
+
+  const selectedFocusableDate = computed(() => {
+    if (props.start.value && !isStartDateDisabled.value)
+      return props.start.value
+    if (props.end.value && !isEndDateDisabled.value)
+      return props.end.value
+    return undefined
+  })
+
   return {
     isInvalid,
     isSelected,
@@ -172,5 +197,8 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     isHighlightedStart,
     isHighlightedEnd,
     isDateDisabled: rangeIsDateDisabled,
+    hasSelectedDate,
+    isSelectedDisabled,
+    selectedFocusableDate,
   }
 }

package/src/Rating/RatingItem.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ComputedRef } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { createContext } from '@/shared'
+import { injectRatingRootContext } from './RatingRoot.vue'
+
+interface RatingItemContext {
+  steps: ComputedRef<number[]>
+}
+
+export interface RatingItemProps extends PrimitiveProps {
+  item: number
+}
+
+export const [injectRatingItemContext, provideRatingItemContext]
+  = createContext<RatingItemContext>('RatingItem')
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<RatingItemProps>(), { as: 'label' })
+defineSlots<{
+  default?: (props: {
+    steps: number[]
+  }) => any
+}>()
+
+const rootContext = injectRatingRootContext()
+
+const steps = computed(() => {
+  const groupStartValue = (props.item - 1)
+  const groupEndValue = props.item
+  const stepSize = rootContext.step.value
+
+  const numberOfSteps = Math.ceil((groupEndValue - groupStartValue) / stepSize)
+
+  return Array.from({ length: numberOfSteps }, (_, index) =>
+    Number((groupStartValue + (index + 1) * stepSize).toFixed(2)))
+})
+
+provideRatingItemContext({ steps })
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot :steps="steps" />
+  </Primitive>
+</template>

package/src/Rating/RatingItemIndicator.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import { useActiveElement } from '@vueuse/core'
+import { computed } from 'vue'
+import { RadioGroupIndicator, RadioGroupItem } from '@/RadioGroup'
+import { useForwardExpose } from '@/shared'
+import { injectRatingItemContext } from './RatingItem.vue'
+import { injectRatingRootContext } from './RatingRoot.vue'
+
+export interface RatingItemProps extends PrimitiveProps {
+  step: number
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<RatingItemProps>()
+
+const rootContext = injectRatingRootContext()
+const { currentElement, forwardRef } = useForwardExpose()
+const activeElement = useActiveElement()
+const itemContext = injectRatingItemContext()
+
+const isActive = computed(() => {
+  return (rootContext.hoveredRating.value > 0 && props.step <= rootContext.hoveredRating.value) || (rootContext.hoveredRating.value === 0 && props.step <= rootContext.modelValue.value)
+})
+
+const isVisible = computed(() => {
+  return activeElement.value === currentElement.value || rootContext.step.value === 1 || props.step % 1 === 0 || props.step === rootContext.hoveredRating.value || props.step === rootContext.modelValue.value
+})
+
+function handleMouseEnter() {
+  rootContext.changeHoveredRating(props.step)
+}
+</script>
+
+<template>
+  <RadioGroupItem
+    :ref="forwardRef"
+    :as="as"
+    :as-child="asChild"
+    :style="{
+      ['--reka-rating-item-step-width']: `${((step % 1 || 1) * 100)}%`,
+      ['--reka-rating-item-step-opacity']: isVisible ? 1 : 0,
+      ['--reka-rating-item-step-z-index']: itemContext.steps.value.length - itemContext.steps.value.indexOf(step),
+
+    }"
+    :value="step"
+    :data-state="isActive ? 'active' : undefined"
+    :disabled="rootContext.disabled.value"
+    @select="rootContext.changeModelValue(step)"
+    @mouseenter="handleMouseEnter"
+  >
+    <RadioGroupIndicator
+      force-mount
+      as-child
+    >
+      <slot />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>