reka-ui 2.6.2 → 2.8.0

package/src/Listbox/ListboxFilter.vue

@@ -7,7 +7,7 @@ import { Primitive } from '..'
 import { injectListboxRootContext } from './ListboxRoot.vue'
 
 export interface ListboxFilterProps extends PrimitiveProps {
-  /** The controlled value of the filter. Can be binded with with v-model. */
+  /** The controlled value of the filter. Can be binded with v-model. */
   modelValue?: string
   /** Focus on element when mounted. */
   autoFocus?: boolean

package/src/Listbox/ListboxRoot.vue

@@ -40,7 +40,7 @@ export const [injectListboxRootContext, provideListboxRootContext]
   = createContext<ListboxRootContext<AcceptableValue>>('ListboxRoot')
 
 export interface ListboxRootProps<T = AcceptableValue> extends PrimitiveProps, FormFieldProps {
-  /** The controlled value of the listbox. Can be binded with with `v-model`. */
+  /** The controlled value of the listbox. Can be binded with `v-model`. */
   modelValue?: T | Array<T>
   /** The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox */
   defaultValue?: T | Array<T>
@@ -173,6 +173,7 @@ function changeHighlight(el: HTMLElement, scrollIntoView = true) {
 
 function highlightItem(value: T) {
   if (isVirtual.value) {
+    // @ts-expect-error known type issue https://github.com/vueuse/vueuse/issues/4610
     virtualHighlightHook.trigger(value)
   }
   else {

package/src/Menu/MenuRadioGroup.vue

@@ -1,21 +1,22 @@
 <script lang="ts">
 import type { Ref } from 'vue'
 import type { MenuGroupProps } from './MenuGroup.vue'
+import type { AcceptableValue } from '@/shared/types'
 import { createContext, useForwardProps } from '@/shared'
 
 interface MenuRadioGroupContext {
-  modelValue: Ref<string>
-  onValueChange: (payload: string) => void
+  modelValue: Ref<AcceptableValue>
+  onValueChange: (payload: AcceptableValue) => void
 }
 
 export interface MenuRadioGroupProps extends MenuGroupProps {
   /** The value of the selected item in the group. */
-  modelValue?: string
+  modelValue?: AcceptableValue
 }
 
 export type MenuRadioGroupEmits = {
   /** Event handler called when the value changes. */
-  'update:modelValue': [payload: string]
+  'update:modelValue': [payload: AcceptableValue]
 }
 
 export const [injectMenuRadioGroupContext, provideMenuRadioGroupContext]

package/src/Menu/MenuRadioItem.vue

@@ -3,6 +3,7 @@ import type {
   MenuItemEmits,
   MenuItemProps,
 } from './MenuItem.vue'
+import type { AcceptableValue } from '@/shared/types'
 import { reactiveOmit } from '@vueuse/shared'
 import { useForwardProps } from '@/shared'
 
@@ -10,7 +11,7 @@ export type MenuRadioItemEmits = MenuItemEmits
 
 export interface MenuRadioItemProps extends MenuItemProps {
   /** The unique value of the item. */
-  value: string
+  value: AcceptableValue
 }
 </script>
 

package/src/NavigationMenu/NavigationMenuRoot.vue

@@ -5,6 +5,7 @@ import type { Direction, Orientation } from './utils'
 import type { PrimitiveProps } from '@/Primitive'
 import { useCollection } from '@/Collection'
 import { createContext, useDirection, useForwardExpose, useId } from '@/shared'
+import { EVENT_ROOT_CONTENT_DISMISS } from './utils'
 
 export interface NavigationMenuRootProps extends PrimitiveProps {
   /** The controlled value of the menu item to activate. Can be used as `v-model`. */
@@ -91,7 +92,7 @@ export const [injectNavigationMenuContext, provideNavigationMenuContext]
 </script>
 
 <script setup lang="ts">
-import { refAutoReset, useDebounceFn, useVModel } from '@vueuse/core'
+import { refAutoReset, useDebounceFn, useEventListener, useVModel } from '@vueuse/core'
 import {
   computed,
   ref,
@@ -164,6 +165,8 @@ watchEffect(() => {
   )
 })
 
+useEventListener(rootNavigationMenu, EVENT_ROOT_CONTENT_DISMISS, onItemDismiss)
+
 provideNavigationMenuContext({
   isRootMenu: true,
   modelValue,
@@ -203,18 +206,19 @@ provideNavigationMenuContext({
     previousValue.value = modelValue.value
     modelValue.value = val
   },
-  onItemDismiss: () => {
-    previousValue.value = modelValue.value
-    modelValue.value = ''
-  },
+  onItemDismiss,
 })
+
+function onItemDismiss() {
+  previousValue.value = modelValue.value
+  modelValue.value = ''
+}
 </script>
 
 <template>
   <CollectionSlot>
     <Primitive
       :ref="forwardRef"
-      aria-label="Main"
       :as="as"
       :as-child="asChild"
       :data-orientation="orientation"

package/src/NumberField/NumberFieldRoot.vue

@@ -17,6 +17,8 @@ export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {
   step?: number
   /** When `false`, prevents the value from snapping to the nearest increment of the step value */
   stepSnapping?: boolean
+  /** When `true`, the input will be focused when the value changes. */
+  focusOnChange?: boolean
   /** Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. */
   formatOptions?: Intl.NumberFormatOptions
   /** The locale to use for formatting and currencies */
@@ -76,6 +78,7 @@ const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   defaultValue: undefined,
   step: 1,
   stepSnapping: true,
+  focusOnChange: true,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
 const { disabled, readonly, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
@@ -109,7 +112,9 @@ const isIncreaseDisabled = computed(() => (
 )
 
 function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {
-  inputEl.value?.focus()
+  if (props.focusOnChange) {
+    inputEl.value?.focus()
+  }
   if (props.disabled || props.readonly)
     return
   const currentInputValue = numberParser.parse(inputEl.value?.value ?? '')

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/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>

package/src/Rating/RatingRoot.vue

@@ -0,0 +1,113 @@
+<script lang="ts">
+import type { RadioGroupRootProps } from '@/RadioGroup'
+import { reactiveOmit, useVModel } from '@vueuse/core'
+import { RadioGroupRoot } from '@/RadioGroup'
+import { createContext, useForwardExpose } from '@/shared'
+
+export interface RatingRootContext {
+  modelValue: Ref<number>
+  items: ComputedRef<number[]>
+  hoveredRating: Ref<number>
+  disabled: Ref<boolean>
+  step: Ref<number>
+  changeModelValue: (rating: number) => void
+  changeHoveredRating: (rating: number) => void
+}
+
+export interface RatingRootProps extends Omit<RadioGroupRootProps, 'modelValue' | 'defaultValue'> {
+  /**
+   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+   */
+  defaultValue?: number
+  /** The controlled value of the tab to activate. Can be bind as `v-model`. */
+  modelValue?: number
+  length?: number
+  clearable?: boolean
+  hoverable?: boolean
+  step?: 1 | 0.5 | 0.25 | 0.1
+
+}
+export type RatingRootEmits = {
+  /** Event handler called when the value changes */
+  'update:modelValue': [payload: number]
+}
+
+export const [injectRatingRootContext, provideRatingRootContext]
+  = createContext<RatingRootContext>('RatingRoot')
+</script>
+
+<script setup lang="ts">
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, toRefs } from 'vue'
+
+const props = withDefaults(defineProps<RatingRootProps>(), {
+  orientation: 'horizontal',
+  length: 5,
+  step: 1,
+})
+const emits = defineEmits<RatingRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    modelValue: number | undefined
+    items: number[]
+  }) => any
+}>()
+
+const { length, disabled, clearable, hoverable, step } = toRefs(props)
+
+useForwardExpose()
+
+const modelValue = useVModel<RatingRootProps, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<number>
+
+const items = computed(() => {
+  return Array.from({ length: length.value }, (_, i) => i + 1)
+})
+
+const hoveredRating = ref<number>(0)
+
+function changeModelValue(rating: number) {
+  if (disabled.value)
+    return
+
+  if (clearable.value && modelValue.value === rating) {
+    hoveredRating.value = 0
+    modelValue.value = 0
+  }
+  else {
+    modelValue.value = rating
+  }
+}
+
+function changeHoveredRating(rating: number) {
+  if (disabled.value || !hoverable.value)
+    return
+
+  hoveredRating.value = rating
+}
+
+provideRatingRootContext({
+  modelValue,
+  items,
+  hoveredRating,
+  disabled,
+  step,
+  changeModelValue,
+  changeHoveredRating,
+})
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-bind="reactiveOmit(props, 'length', 'clearable', 'hoverable', 'step')"
+    :disabled="disabled"
+  >
+    <slot
+      :items="items"
+      :model-value="modelValue"
+    />
+  </RadioGroupRoot>
+</template>

package/src/Rating/index.ts

@@ -0,0 +1,3 @@
+export { default as RatingItem, type RatingItemProps } from './RatingItem.vue'
+export { default as RatingItemIndicator } from './RatingItemIndicator.vue'
+export { default as RatingRoot, type RatingRootProps } from './RatingRoot.vue'

package/src/ScrollArea/ScrollAreaRoot.vue

@@ -35,7 +35,8 @@ export interface ScrollAreaRootProps extends PrimitiveProps {
    * `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br>
    * `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br>
    * `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br>
-   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.
+   * `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.<br>
+   * `glimpse` - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction.
    */
   type?: ScrollType
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */

package/src/ScrollArea/ScrollAreaScrollbar.vue

@@ -34,6 +34,7 @@ import {
 } from 'vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
+import ScrollAreaScrollbarGlimpse from './ScrollAreaScrollbarGlimpse.vue'
 import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue'
 import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
@@ -94,6 +95,14 @@ provideScrollAreaScrollbarContext({
   >
     <slot />
   </ScrollAreaScrollbarScroll>
+  <ScrollAreaScrollbarGlimpse
+    v-else-if="rootContext.type.value === 'glimpse'"
+    v-bind="$attrs"
+    :ref="forwardRef"
+    :force-mount="forceMount"
+  >
+    <slot />
+  </ScrollAreaScrollbarGlimpse>
   <ScrollAreaScrollbarAuto
     v-else-if="rootContext.type.value === 'auto'"
     v-bind="$attrs"

package/src/ScrollArea/ScrollAreaScrollbarGlimpse.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { ScrollAreaScrollbarAutoProps } from './ScrollAreaScrollbarAuto.vue'
+
+export interface ScrollAreaScrollbarGlimpseProps extends ScrollAreaScrollbarAutoProps {}
+</script>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { Presence } from '@/Presence'
+import { useForwardExpose } from '@/shared'
+import { useStateMachine } from '../shared/useStateMachine'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<ScrollAreaScrollbarGlimpseProps>()
+
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
+
+const { forwardRef } = useForwardExpose()
+
+const { state, dispatch } = useStateMachine('hidden', {
+  hidden: {
+    POINTER_ENTER: 'glimpse',
+    SCROLL: 'scrolling',
+  },
+  glimpse: {
+    HIDE: 'hidden',
+    POINTER_LEAVE: 'hidden',
+    SCROLL: 'scrolling',
+    POINTER_ENTER: 'glimpse',
+  },
+  scrolling: {
+    SCROLL_END: 'idle',
+    POINTER_ENTER: 'interacting',
+  },
+  interacting: {
+    SCROLL: 'interacting',
+    POINTER_LEAVE: 'idle',
+  },
+  idle: {
+    HIDE: 'hidden',
+    SCROLL: 'scrolling',
+    POINTER_ENTER: 'interacting',
+  },
+})
+
+const visible = computed(() => state.value !== 'hidden')
+
+function handlePointerEnter() {
+  dispatch('POINTER_ENTER')
+}
+
+function handlePointerLeave() {
+  dispatch('POINTER_LEAVE')
+}
+
+const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
+
+watchEffect((onCleanup) => {
+  if (state.value === 'glimpse') {
+    const timeId = window.setTimeout(
+      () => dispatch('HIDE'),
+      rootContext.scrollHideDelay.value,
+    )
+
+    onCleanup(() => {
+      window.clearTimeout(timeId)
+    })
+  }
+})
+
+watchEffect((onCleanup) => {
+  if (state.value === 'idle') {
+    const timeId = window.setTimeout(
+      () => dispatch('HIDE'),
+      rootContext.scrollHideDelay.value,
+    )
+
+    onCleanup(() => {
+      window.clearTimeout(timeId)
+    })
+  }
+})
+
+watchEffect((onCleanup) => {
+  const viewport = rootContext.viewport.value
+  const scrollDirection = scrollbarContext.isHorizontal.value
+    ? 'scrollLeft'
+    : 'scrollTop'
+
+  if (viewport) {
+    let prevScrollPos = viewport[scrollDirection]
+    const handleScroll = () => {
+      const scrollPos = viewport[scrollDirection]
+      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos
+      if (hasScrollInDirectionChanged) {
+        dispatch('SCROLL')
+        debounceScrollEnd()
+      }
+      prevScrollPos = scrollPos
+    }
+    viewport.addEventListener('scroll', handleScroll)
+
+    onCleanup(() => {
+      viewport.removeEventListener('scroll', handleScroll)
+    })
+  }
+})
+
+onMounted(() => {
+  const scrollArea = rootContext.scrollArea.value
+
+  if (scrollArea) {
+    scrollArea.addEventListener('pointerenter', handlePointerEnter)
+    scrollArea.addEventListener('pointerleave', handlePointerLeave)
+  }
+})
+
+onUnmounted(() => {
+  const scrollArea = rootContext.scrollArea.value
+  if (scrollArea) {
+    scrollArea.removeEventListener('pointerenter', handlePointerEnter)
+    scrollArea.removeEventListener('pointerleave', handlePointerLeave)
+  }
+})
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarAuto
+      v-bind="$attrs"
+      :ref="forwardRef"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarAuto>
+  </Presence>
+</template>