reka-ui 2.7.0 → 2.8.0

package/src/ScrollArea/index.ts

@@ -12,6 +12,10 @@ export {
   default as ScrollAreaScrollbar,
   type ScrollAreaScrollbarProps,
 } from './ScrollAreaScrollbar.vue'
+export {
+  default as ScrollAreaScrollbarGlimpse,
+  type ScrollAreaScrollbarGlimpseProps,
+} from './ScrollAreaScrollbarGlimpse.vue'
 export {
   default as ScrollAreaThumb,
   type ScrollAreaThumbProps,

package/src/ScrollArea/types.ts

@@ -9,4 +9,4 @@ export interface Sizes {
   }
 }
 
-export type ScrollType = 'auto' | 'always' | 'scroll' | 'hover'
+export type ScrollType = 'auto' | 'always' | 'scroll' | 'hover' | 'glimpse'

package/src/Tabs/TabsContent.vue

@@ -15,7 +15,7 @@ export interface TabsContentProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { Presence } from '@/Presence'
 import { Primitive } from '@/Primitive'
 import { injectTabsRootContext } from './TabsRoot.vue'
@@ -33,10 +33,15 @@ const isSelected = computed(() => props.value === rootContext.modelValue.value)
 const isMountAnimationPreventedRef = ref(isSelected.value)
 
 onMounted(() => {
+  rootContext.registerContent(props.value)
   requestAnimationFrame(() => {
     isMountAnimationPreventedRef.value = false
   })
 })
+
+onBeforeUnmount(() => {
+  rootContext.unregisterContent(props.value)
+})
 </script>
 
 <template>

package/src/Tabs/TabsRoot.vue

@@ -14,6 +14,9 @@ export interface TabsRootContext {
   activationMode: 'automatic' | 'manual'
   baseId: string
   tabsList: Ref<HTMLElement | undefined>
+  contentIds: Ref<Set<StringOrNumber>>
+  registerContent: (value: StringOrNumber) => void
+  unregisterContent: (value: StringOrNumber) => void
 }
 
 export interface TabsRootProps<T extends StringOrNumber = StringOrNumber> extends PrimitiveProps {
@@ -55,7 +58,7 @@ export const [injectTabsRootContext, provideTabsRootContext]
 </script>
 
 <script setup lang="ts" generic="T extends StringOrNumber = StringOrNumber">
-import { ref, toRefs } from 'vue'
+import { ref, shallowRef, toRefs } from 'vue'
 import { Primitive } from '@/Primitive'
 
 const props = withDefaults(defineProps<TabsRootProps<T>>(), {
@@ -82,6 +85,7 @@ const modelValue = useVModel<TabsRootProps<T>, 'modelValue', 'update:modelValue'
 })
 
 const tabsList = ref<HTMLElement>()
+const contentIds = shallowRef<Set<StringOrNumber>>(new Set())
 
 provideTabsRootContext({
   modelValue,
@@ -94,6 +98,15 @@ provideTabsRootContext({
   activationMode: props.activationMode,
   baseId: useId(undefined, 'reka-tabs'),
   tabsList,
+  contentIds,
+  registerContent: (value: StringOrNumber) => {
+    contentIds.value = new Set([...contentIds.value, value])
+  },
+  unregisterContent: (value: StringOrNumber) => {
+    const newSet = new Set(contentIds.value)
+    newSet.delete(value)
+    contentIds.value = newSet
+  },
 })
 </script>
 

package/src/Tabs/TabsTrigger.vue

@@ -27,7 +27,7 @@ const { forwardRef } = useForwardExpose()
 const rootContext = injectTabsRootContext()
 
 const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
-const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
+const contentId = computed(() => rootContext.contentIds.value.has(props.value) ? makeContentId(rootContext.baseId, props.value) : undefined)
 
 const isSelected = computed(() => props.value === rootContext.modelValue.value)
 </script>

package/src/TimeField/TimeFieldInput.vue

@@ -23,6 +23,7 @@ const lastKeyZero = ref(false)
 const {
   handleSegmentClick,
   handleSegmentKeydown,
+  handleSegmentFocusOut,
   attributes,
 } = useDateField({
   hasLeftFocus,
@@ -30,6 +31,7 @@ const {
   placeholder: rootContext.placeholder,
   hourCycle: rootContext.hourCycle,
   step: rootContext.step,
+  stepSnapping: rootContext.stepSnapping,
   segmentValues: rootContext.segmentValues,
   formatter: rootContext.formatter,
   part: props.part,
@@ -59,7 +61,10 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
     v-on="part !== 'literal' ? {
       mousedown: handleSegmentClick,
       keydown: handleSegmentKeydown,
-      focusout: () => { hasLeftFocus = true },
+      focusout: () => {
+        hasLeftFocus = true
+        handleSegmentFocusOut()
+      },
       focusin: (e: FocusEvent) => {
         rootContext.setFocusedElement(e.target as HTMLElement)
       },

package/src/TimeField/TimeFieldRoot.vue

@@ -32,6 +32,7 @@ type TimeFieldRootContext = {
   formatter: Formatter
   hourCycle: HourCycle
   step: Ref<DateStep>
+  stepSnapping: Ref<boolean>
   segmentValues: Ref<SegmentValueObj>
   segmentContents: Ref<{ part: SegmentPart, value: string }[]>
   elements: Ref<Set<HTMLElement>>
@@ -52,6 +53,8 @@ export interface TimeFieldRootProps extends PrimitiveProps, FormFieldProps {
   hourCycle?: HourCycle
   /** The stepping interval for the time fields. Defaults to `1`. */
   step?: DateStep
+  /** Whether to enforce snapping the value to the nearest step increment after input. Defaults to `false`. */
+  stepSnapping?: boolean
   /** The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity */
   granularity?: 'hour' | 'minute' | 'second'
   /** Whether or not to hide the time zone segment of the field */
@@ -107,6 +110,7 @@ const props = withDefaults(defineProps<TimeFieldRootProps>(), {
   readonly: false,
   placeholder: undefined,
   isDateUnavailable: undefined,
+  stepSnapping: false,
 })
 const emits = defineEmits<TimeFieldRootEmits>()
 defineSlots<{
@@ -120,7 +124,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { disabled, readonly, granularity, defaultValue, minValue, maxValue, dir: propDir, locale: propLocale } = toRefs(props)
+const { disabled, readonly, granularity, defaultValue, minValue, maxValue, stepSnapping, dir: propDir, locale: propLocale } = toRefs(props)
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
@@ -218,7 +222,25 @@ const allSegmentContent = computed(() => createContent({
   isTimeValue: true,
 }))
 
-const segmentContents = computed(() => allSegmentContent.value.arr)
+const segmentContents = computed(() => {
+  const contents = allSegmentContent.value.arr
+
+  // Convert hour values for 12-hour display
+  if (props.hourCycle === 12) {
+    return contents.map((segment) => {
+      if (segment.part === 'hour' && 'hour' in segmentValues.value) {
+        const hour = segmentValues.value.hour
+        if (hour !== null) {
+          const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+          return { ...segment, value: displayHour.toString() }
+        }
+      }
+      return segment
+    })
+  }
+
+  return contents
+})
 
 const editableSegmentContents = computed(() => segmentContents.value.filter(({ part }) => part !== 'literal'))
 
@@ -298,6 +320,7 @@ provideTimeFieldRootContext({
   formatter,
   hourCycle: props.hourCycle,
   step,
+  stepSnapping,
   readonly,
   segmentValues,
   isInvalid,

package/src/Tree/TreeRoot.vue

@@ -4,13 +4,13 @@ import { createContext, getActiveElement, useDirection, useSelectionBehavior, us
 import { flatten } from './utils'
 
 export interface TreeRootProps<T = Record<string, any>, U extends Record<string, any> = Record<string, any>, M extends boolean = false> extends PrimitiveProps {
-  /** The controlled value of the tree. Can be binded with with `v-model`. */
+  /** The controlled value of the tree. Can be binded with `v-model`. */
   modelValue?: M extends true ? U[] : U
   /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
   defaultValue?: M extends true ? U[] : U
   /** List of items */
   items?: T[]
-  /** The controlled value of the expanded item. Can be binded with with `v-model`. */
+  /** The controlled value of the expanded item. Can be binded with `v-model`. */
   expanded?: string[]
   /** The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree */
   defaultExpanded?: string[]

package/src/date/comparators.ts

@@ -143,7 +143,13 @@ export function getLastFirstDayOfWeek<T extends DateValue = DateValue>(
   firstDayOfWeek: number,
   locale: string,
 ): T {
-  const day = getDayOfWeek(date, locale)
+  /**
+   * "firstDayOfWeek" is fixed to 0(Sunday) to avoid confusion regarding locales.
+   * This also aligns with other date libraries, e.g., date-fns.
+   *
+   * #see https://github.com/unovue/reka-ui/issues/2157
+   */
+  const day = getDayOfWeek(date, locale, 'sun')
 
   if (firstDayOfWeek > day)
     return date.subtract({ days: day + 7 - firstDayOfWeek }) as T
@@ -159,7 +165,14 @@ export function getNextLastDayOfWeek<T extends DateValue = DateValue>(
   firstDayOfWeek: number,
   locale: string,
 ): T {
-  const day = getDayOfWeek(date, locale)
+  /**
+   * "firstDayOfWeek" is fixed to 0(Sunday) to avoid confusion regarding locales.
+   * This also aligns with other date libraries, e.g., date-fns.
+   *
+   * #see https://github.com/unovue/reka-ui/issues/2157
+   */
+  const day = getDayOfWeek(date, locale, 'sun')
+
   const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1
 
   if (day === lastDayOfWeek)

package/src/index.ts

@@ -42,6 +42,7 @@ export {
   type DateValue,
   type Formatter,
   type SegmentPart,
+  type TimeValue,
   useBodyScrollLock,
   useDateFormatter,
   useDirection,

package/src/shared/date/parser.ts

@@ -197,6 +197,16 @@ function createContentArr(props: CreateContentArrProps) {
       if (segment.part === 'timeZoneName' && (!isZonedDateTime(props.dateRef) || hideTimeZone))
         return false
 
+      // In some locales (e.g., zh-TW), the time zone is represented with square brackets.
+      // We also filter out these literals that are just brackets.
+      // @see https://github.com/unovue/reka-ui/issues/1670
+      if (
+        (!isZonedDateTime(props.dateRef) || hideTimeZone)
+        && segment.part === 'literal' && ['[', ']'].includes(segment.value.trim())
+      ) {
+        return false
+      }
+
       return true
     })
 

package/src/shared/date/useDateField.ts

@@ -1,10 +1,13 @@
-import type { CalendarDateTime, CycleTimeOptions, DateFields, DateValue, TimeFields } from '@internationalized/date'
+import type { CalendarDateTime, DateFields, DateValue, TimeFields } from '@internationalized/date'
 import type { Ref } from 'vue'
 import type { AnyExceptLiteral, DateStep, HourCycle, SegmentPart, SegmentValueObj } from './types'
 import type { Formatter } from '@/shared'
+import {
+  DateFormatter,
+} from '@internationalized/date'
 import { computed } from 'vue'
 import { getDaysInMonth, toDate } from '@/date'
-import { useKbd } from '@/shared'
+import { snapValueToStep, useKbd } from '@/shared'
 import { isAcceptableSegmentKey, isNumberString, isSegmentNavigationKey } from './segment'
 
 type MinuteSecondIncrementProps = {
@@ -19,7 +22,6 @@ type DateTimeValueIncrementation = {
   part: keyof Omit<DateFields, 'era'> | keyof TimeFields
   dateRef: DateValue
   prevValue: number | null
-  hourCycle?: HourCycle
 }
 
 type SegmentAttrProps = {
@@ -282,6 +284,7 @@ export type UseDateFieldProps = {
   placeholder: Ref<DateValue>
   hourCycle: HourCycle
   step: Ref<DateStep>
+  stepSnapping?: Ref<boolean>
   formatter: Formatter
   segmentValues: Ref<SegmentValueObj>
   disabled: Ref<boolean>
@@ -320,7 +323,7 @@ export function useDateField(props: UseDateFieldProps) {
 
     return Number.parseInt(str.slice(0, -1))
   }
-  function dateTimeValueIncrementation({ e, part, dateRef, prevValue, hourCycle }: DateTimeValueIncrementation): number {
+  function dateTimeValueIncrementation({ e, part, dateRef, prevValue }: DateTimeValueIncrementation): number {
     const step = props.step.value[part] ?? 1
     const sign = e.key === kbd.ARROW_UP ? step : -step
 
@@ -328,7 +331,9 @@ export function useDateField(props: UseDateFieldProps) {
       return dateRef[part as keyof Omit<DateFields, 'era'>]
 
     if (part === 'hour' && 'hour' in dateRef) {
-      const cycleArgs: [keyof DateFields | keyof TimeFields, number, CycleTimeOptions?] = [part, sign, { hourCycle }]
+      // Don't pass hourCycle to cycle - internal representation is always 24-hour
+      // The hourCycle prop only affects display, not internal cycling
+      const cycleArgs: [keyof DateFields | keyof TimeFields, number] = [part, sign]
       return dateRef.set({ [part as keyof DateValue]: prevValue }).cycle(...cycleArgs)[part]
     }
 
@@ -507,8 +512,7 @@ export function useDateField(props: UseDateFieldProps) {
     return { value: total, moveToNext }
   }
 
-  function updateHour(num: number, prev: number | null) {
-    const max = 24
+  function updateHour(max: number, num: number, prev: number | null) {
     let moveToNext = false
     const maxStart = Math.floor(max / 10)
 
@@ -714,6 +718,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
   }
 
+  function uses12HourFormat(locale: string): boolean {
+    const hourCycle = new DateFormatter(locale, { hour: 'numeric' }).resolvedOptions().hourCycle
+    return hourCycle === 'h11' || hourCycle === 'h12'
+  }
+
   function handleHourSegmentKeydown(e: KeyboardEvent) {
     const dateRef = props.placeholder.value
     if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key) || !('hour' in dateRef) || !('hour' in props.segmentValues.value))
@@ -721,16 +730,14 @@ export function useDateField(props: UseDateFieldProps) {
 
     const prevValue = props.segmentValues.value.hour
 
-    const hourCycle = props.hourCycle
-
     if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
-      props.segmentValues.value.hour = dateTimeValueIncrementation({ e, part: 'hour', dateRef: props.placeholder.value, prevValue, hourCycle })
+      const newHour = dateTimeValueIncrementation({ e, part: 'hour', dateRef: props.placeholder.value, prevValue })
+      props.segmentValues.value.hour = newHour
 
-      if ('dayPeriod' in props.segmentValues.value) {
-        if (props.segmentValues.value.hour < 12)
-          props.segmentValues.value.dayPeriod = 'AM'
-        else if (props.segmentValues.value.hour)
-          props.segmentValues.value.dayPeriod = 'PM'
+      if ('dayPeriod' in props.segmentValues.value && newHour !== null) {
+        // Determine AM/PM based on internal 24-hour value
+        // Hour 0-11 = AM, Hour 12-23 = PM
+        props.segmentValues.value.dayPeriod = newHour >= 12 ? 'PM' : 'AM'
       }
 
       return
@@ -738,14 +745,29 @@ export function useDateField(props: UseDateFieldProps) {
 
     if (isNumberString(e.key)) {
       const num = Number.parseInt(e.key)
-      const { value, moveToNext } = updateHour(num, prevValue)
+      const is12Hour = uses12HourFormat(props.formatter.getLocale())
+      const max = is12Hour ? 12 : 24
 
-      if ('dayPeriod' in props.segmentValues.value && value && value > 12)
-        props.segmentValues.value.dayPeriod = 'PM'
-      else if ('dayPeriod' in props.segmentValues.value && value)
-        props.segmentValues.value.dayPeriod = 'AM'
+      let displayPrev = prevValue
+      if (is12Hour && prevValue !== null) {
+        displayPrev = prevValue === 0 ? 12 : (prevValue > 12 ? prevValue - 12 : prevValue)
+      }
 
-      props.segmentValues.value.hour = value
+      const { value, moveToNext } = updateHour(max, num, displayPrev)
+
+      // Convert display hour back to internal 24-hour format
+      let internalValue = value
+      if (is12Hour && value !== null) {
+        const period = props.segmentValues.value.dayPeriod || 'AM'
+        if (value === 12) {
+          internalValue = period === 'AM' ? 0 : 12
+        }
+        else {
+          internalValue = period === 'PM' ? value + 12 : value
+        }
+      }
+
+      props.segmentValues.value.hour = internalValue
 
       if (moveToNext)
         props.focusNext()
@@ -881,9 +903,36 @@ export function useDateField(props: UseDateFieldProps) {
     }
   }
 
+  function handleSegmentFocusOut() {
+    if (!props.stepSnapping?.value)
+      return
+
+    if (props.part === 'hour' && 'hour' in props.segmentValues.value && props.segmentValues.value.hour !== null && props.step.value.hour && props.step.value.hour > 1) {
+      props.segmentValues.value.hour = snapValueToStep(props.segmentValues.value.hour, 0, 23, props.step.value.hour)
+      if ('dayPeriod' in props.segmentValues.value) {
+        if (props.segmentValues.value.hour < 12)
+          props.segmentValues.value.dayPeriod = 'AM'
+        else if (props.segmentValues.value.hour)
+          props.segmentValues.value.dayPeriod = 'PM'
+      }
+    }
+    else if (props.part === 'minute' && 'minute' in props.segmentValues.value && props.segmentValues.value.minute !== null && props.step.value.minute && props.step.value.minute > 1) {
+      props.segmentValues.value.minute = snapValueToStep(props.segmentValues.value.minute, 0, 59, props.step.value.minute)
+    }
+    else if (props.part === 'second' && 'second' in props.segmentValues.value && props.segmentValues.value.second !== null && props.step.value.second && props.step.value.second > 1) {
+      props.segmentValues.value.second = snapValueToStep(props.segmentValues.value.second, 0, 59, props.step.value.second)
+    }
+
+    if (Object.values(props.segmentValues.value).every(item => item !== null)) {
+      const dateRef = props.placeholder.value.set({ ...props.segmentValues.value as Record<AnyExceptLiteral, number> })
+      props.modelValue.value = dateRef.copy()
+    }
+  }
+
   return {
     handleSegmentClick,
     handleSegmentKeydown,
+    handleSegmentFocusOut,
     attributes,
   }
 }

package/src/shared/index.ts

@@ -2,7 +2,7 @@ export * from './arrays'
 export * from './browser'
 export * from './clamp'
 export { createContext } from './createContext'
-export { type DateRange, type DateStep, type DateValue, type SegmentPart } from './date'
+export { type DateRange, type DateStep, type DateValue, type SegmentPart, type TimeValue } from './date'
 export { getActiveElement } from './getActiveElement'
 export { handleAndDispatchCustomEvent } from './handleAndDispatchCustomEvent'
 export { isValidVNodeElement } from './isValidVNodeElement'

package/src/shared/useDateFormatter.ts

@@ -105,8 +105,8 @@ export function useDateFormatter(initialLocale: string, opts: DateFormatterOptio
       minute: 'numeric',
     }).formatToParts(date)
     const value = parts.find(p => p.type === 'dayPeriod')?.value
-    // Day period can be "AM"/"PM" or "a.m."/"p.m." in some locales
-    if (value === 'PM' || value === 'p.m.')
+    // Day period can be "AM"/"PM" or "am"/"pm" or "a.m."/"p.m." in some locales
+    if (value === 'PM' || value === 'pm' || value === 'p.m.')
       return 'PM'
 
     return 'AM'

package/src/shared/useGraceArea.ts

@@ -25,7 +25,7 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     const currentTarget = event.currentTarget as HTMLElement
     const exitPoint = { x: event.clientX, y: event.clientY }
     const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect())
-    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide)
+    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, 1)
     const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect())
     const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints])
     pointerGraceArea.value = graceArea