reka-ui 2.8.0 → 2.9.0

package/src/ColorSlider/ColorSliderThumb.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface ColorSliderThumbProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getChannelName } from '@/shared/color'
+import { SliderThumb } from '@/Slider'
+import { injectColorSliderRootContext } from './ColorSliderRoot.vue'
+
+const props = withDefaults(defineProps<ColorSliderThumbProps>(), {
+  as: 'span',
+})
+
+defineSlots<{
+  default?: (props: {
+    /** The display name of the current channel */
+    channelName: string
+    /** The current numeric value of the channel */
+    channelValue: number
+  }) => any
+}>()
+
+const rootContext = injectColorSliderRootContext()
+
+const ariaLabel = computed(() => {
+  return getChannelName(rootContext.channel.value)
+})
+
+const ariaValueText = computed(() => {
+  const value = rootContext.channelValue.value
+  const channel = rootContext.channel.value
+  if (channel === 'alpha') {
+    return `${Math.round(value)}%`
+  }
+  return String(Math.round(value))
+})
+</script>
+
+<template>
+  <SliderThumb
+    :as="as"
+    :as-child="asChild"
+    :aria-label="ariaLabel"
+    :aria-valuetext="ariaValueText"
+  >
+    <slot
+      :channel-name="ariaLabel"
+      :channel-value="rootContext.channelValue.value"
+    />
+  </SliderThumb>
+</template>

package/src/ColorSlider/ColorSliderTrack.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface ColorSliderTrackProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getSliderBackgroundStyle } from '@/shared/color'
+import { SliderTrack } from '@/Slider'
+import { injectColorSliderRootContext } from './ColorSliderRoot.vue'
+
+const props = withDefaults(defineProps<ColorSliderTrackProps>(), {
+  as: 'span',
+})
+
+const rootContext = injectColorSliderRootContext()
+
+const backgroundStyle = computed(() => {
+  return getSliderBackgroundStyle(
+    rootContext.color.value,
+    rootContext.channel.value,
+    rootContext.colorSpace.value,
+  )
+})
+</script>
+
+<template>
+  <SliderTrack
+    :as="as"
+    :as-child="asChild"
+    :style="backgroundStyle"
+  >
+    <slot />
+  </SliderTrack>
+</template>

package/src/ColorSlider/index.ts

@@ -0,0 +1,14 @@
+export {
+  default as ColorSliderRoot,
+  type ColorSliderRootEmits,
+  type ColorSliderRootProps,
+  injectColorSliderRootContext,
+} from './ColorSliderRoot.vue'
+export {
+  default as ColorSliderThumb,
+  type ColorSliderThumbProps,
+} from './ColorSliderThumb.vue'
+export {
+  default as ColorSliderTrack,
+  type ColorSliderTrackProps,
+} from './ColorSliderTrack.vue'

package/src/ColorSlider/utils.ts

@@ -0,0 +1,39 @@
+import { clamp } from '@/shared'
+
+export const PAGE_KEYS = ['PageUp', 'PageDown']
+export const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+
+export type SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top'
+
+export const BACK_KEYS: Record<SlideDirection, string[]> = {
+  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],
+  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+  'from-top': ['Home', 'PageUp', 'ArrowUp', 'ArrowLeft'],
+}
+
+// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+export function linearScale(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0]
+    const ratio = (output[1] - output[0]) / (input[1] - input[0])
+    return output[0] + ratio * (value - input[0])
+  }
+}
+
+export function convertValueToPercentage(value: number, min: number, max: number) {
+  if (max === min)
+    return 0
+  const maxSteps = max - min
+  const percentPerStep = 100 / maxSteps
+  const percentage = percentPerStep * (value - min)
+  return clamp(percentage, 0, 100)
+}
+
+export function getThumbPosition(percentage: number, orientation: 'horizontal' | 'vertical'): string {
+  if (orientation === 'horizontal') {
+    return `calc(${percentage}% - var(--reka-slider-thumb-size, 16px) / 2)`
+  }
+  return `calc(${100 - percentage}% - var(--reka-slider-thumb-size, 16px) / 2)`
+}

package/src/ColorSwatch/ColorSwatch.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+import type { Color } from '@/shared/color'
+
+export interface ColorSwatchProps extends PrimitiveProps {
+  /**
+   * The color to display in the swatch as a hex string or Color object.
+   * Example: `#16a372`, `#ff5733`, or `{ space: 'hsl', h: 120, s: 100, l: 50, alpha: 1 }`.
+   */
+  color?: string | Color
+  /**
+   * Optional accessible label for the color. If omitted, the color name will be derived from the color value.
+   */
+  label?: string
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
+import { colorToString, getColorContrast, getColorName, normalizeColor } from '@/shared/color'
+
+const props = withDefaults(defineProps<ColorSwatchProps>(), { as: 'div', color: '' })
+
+const colorString = computed(() => {
+  if (!props.color)
+    return ''
+  if (typeof props.color === 'string') {
+    return props.color
+  }
+  return colorToString(props.color, 'hex')
+})
+
+const colorObj = computed(() => {
+  if (!props.color)
+    return null
+  try {
+    return normalizeColor(props.color)
+  }
+  catch {
+    return null
+  }
+})
+
+const alpha = computed(() => colorObj.value?.alpha ?? 0)
+const isNoColor = computed(() => !props.color || alpha.value <= 0)
+
+const label = computed(() => {
+  if (props.label)
+    return props.label
+
+  // Match React Aria: transparent colors get "transparent" label
+  if (!colorObj.value || colorObj.value.alpha === 0)
+    return 'transparent'
+
+  try {
+    return getColorName(colorString.value)
+  }
+  catch {
+    return colorString.value || 'transparent'
+  }
+})
+
+const colorContrast = computed(() => {
+  try {
+    return getColorContrast(colorString.value)
+  }
+  catch {
+    if (import.meta.env.DEV) {
+      console.warn(`WARNING: Unable to resolve contrast color for "${colorString.value}".
+           Please check that the color provided is a valid hex color.`)
+    }
+    return undefined
+  }
+})
+</script>
+
+<template>
+  <Primitive
+    role="img"
+    :aria-label="label"
+    aria-roledescription="color swatch"
+    :as-child="asChild"
+    :as="as"
+    :data-color-contrast="colorContrast"
+    :data-no-color="isNoColor ? '' : undefined"
+    :style="{
+      '--reka-color-swatch-color': colorString,
+      '--reka-color-swatch-alpha': String(alpha),
+    }"
+  >
+    <slot
+      :color="colorString"
+      :alpha="alpha"
+    />
+  </Primitive>
+</template>

package/src/ColorSwatch/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as ColorSwatch,
+  type ColorSwatchProps,
+} from './ColorSwatch.vue'

package/src/ColorSwatchPicker/ColorSwatchPickerItem.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'
+import { createContext, useForwardPropsEmits } from '@/shared'
+
+export interface ColorSwatchPickerItemProps extends ListboxItemProps {
+/**
+ * The color to display in the swatch as a hex string.
+ * Example: `#16a372` or `#ff5733`.
+ */
+  value: string
+}
+
+export type ColorSwatchPickerItemEmits = ListboxItemEmits
+
+export interface ColorSwatchPickerItemContext {
+  color: Ref<string>
+}
+
+export const [injectColorSwatchPickerItemContext, provideColorSwatchPickerItemContext]
+  = createContext<ColorSwatchPickerItemContext>('ColorSwatchPickerItem', 'ColorSwatchPickerItemContext')
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { ListboxItem } from '@/Listbox'
+import { getColorName } from '@/shared/color'
+
+const props = defineProps<ColorSwatchPickerItemProps>()
+
+const emits = defineEmits<ColorSwatchPickerItemEmits>()
+
+const { value } = toRefs(props)
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+const colorLabel = computed(() => {
+  try {
+    return getColorName(value.value)
+  }
+  catch {
+    return value.value
+  }
+})
+
+provideColorSwatchPickerItemContext({
+  color: value,
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-bind="forwarded"
+    :aria-label="colorLabel"
+    :data-color="value"
+    :style="{ '--reka-color-swatch-picker-item-color': value }"
+  >
+    <slot />
+  </ListboxItem>
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerItemIndicator.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { ListboxItemIndicatorProps } from '@/Listbox'
+
+export interface ColorSwatchPickerItemIndicatorProps extends ListboxItemIndicatorProps { }
+</script>
+
+<script setup lang="ts">
+import { ListboxItemIndicator } from '@/Listbox'
+
+const props = defineProps<ColorSwatchPickerItemIndicatorProps>()
+</script>
+
+<template>
+  <ListboxItemIndicator v-bind="props">
+    <slot />
+  </ListboxItemIndicator>
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerItemSwatch.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ColorSwatchProps } from '@/ColorSwatch/ColorSwatch.vue'
+
+export interface ColorSwatchPickerItemSwatchProps extends Omit<ColorSwatchProps, 'color'> { }
+</script>
+
+<script setup lang="ts">
+import { ColorSwatch } from '@/ColorSwatch'
+import { injectColorSwatchPickerItemContext } from './ColorSwatchPickerItem.vue'
+
+const props = defineProps<ColorSwatchPickerItemSwatchProps>()
+
+const colorSwatchPickerItemContext = injectColorSwatchPickerItemContext()
+</script>
+
+<template>
+  <ColorSwatch
+    v-bind="props"
+    :color="colorSwatchPickerItemContext.color.value"
+  />
+</template>

package/src/ColorSwatchPicker/ColorSwatchPickerRoot.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from '@/Listbox'
+import { useVModel } from '@vueuse/core'
+import { useForwardPropsEmits } from '@/shared'
+
+export interface ColorSwatchPickerRootProps extends Omit<ListboxRootProps, 'by'> {
+  defaultValue?: string | string[]
+  modelValue?: string | string[]
+}
+
+export type ColorSwatchPickerRootEmits = ListboxRootEmits
+</script>
+
+<script setup lang="ts">
+import { ListboxContent, ListboxRoot } from '@/Listbox'
+
+const props = withDefaults(defineProps<ColorSwatchPickerRootProps>(), {
+  as: 'div',
+  defaultValue: undefined,
+  dir: 'ltr',
+  disabled: false,
+  loop: false,
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<ColorSwatchPickerRootEmits>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue ?? (props.multiple ? [] : ''),
+  // Cast required for VueUse's passive option type; enables passive sync when modelValue is undefined
+  passive: (props.modelValue === undefined) as false,
+})
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    v-model="modelValue"
+    as-child
+  >
+    <ListboxContent
+      :as-child="asChild"
+      :as="as"
+    >
+      <slot :model-value="modelValue" />
+    </ListboxContent>
+  </ListboxRoot>
+</template>

package/src/ColorSwatchPicker/index.ts

@@ -0,0 +1,17 @@
+export {
+  default as ColorSwatchPickerItem,
+  type ColorSwatchPickerItemProps,
+} from './ColorSwatchPickerItem.vue'
+export {
+  default as ColorSwatchPickerItemIndicator,
+  type ColorSwatchPickerItemIndicatorProps,
+} from './ColorSwatchPickerItemIndicator.vue'
+export {
+  default as ColorSwatchPickerItemSwatch,
+  type ColorSwatchPickerItemSwatchProps,
+} from './ColorSwatchPickerItemSwatch.vue'
+export {
+  default as ColorSwatchPickerRoot,
+  type ColorSwatchPickerRootEmits,
+  type ColorSwatchPickerRootProps,
+} from './ColorSwatchPickerRoot.vue'

package/src/Combobox/ComboboxContentImpl.vue

@@ -17,6 +17,11 @@ export interface ComboboxContentImplProps extends PopperContentProps, Dismissabl
   position?: 'inline' | 'popper'
   /** The document.body will be lock, and scrolling will be disabled. */
   bodyLock?: boolean
+  /**
+   * When `true`, hides the content when there are no items matching the filter.
+   * @defaultValue false
+   */
+  hideWhenEmpty?: boolean
 }
 
 export const [injectComboboxContentContext, provideComboboxContentContext]
@@ -42,6 +47,11 @@ const emits = defineEmits<ComboboxContentImplEmits>()
 const { position } = toRefs(props)
 const rootContext = injectComboboxRootContext()
 
+const isEmpty = computed(() => rootContext.ignoreFilter.value
+  ? rootContext.allItems.value.size === 0
+  : rootContext.filterState.value.count === 0,
+)
+
 const { forwardRef, currentElement } = useForwardExpose()
 useBodyScrollLock(props.bodyLock)
 useFocusGuards()
@@ -94,6 +104,7 @@ onUnmounted(() => {
     <FocusScope
       as-child
       @mount-auto-focus.prevent
+      @unmount-auto-focus.prevent
     >
       <DismissableLayer
         as-child
@@ -118,9 +129,11 @@ onUnmounted(() => {
           :id="rootContext.contentId"
           :ref="forwardRef"
           :data-state="rootContext.open.value ? 'open' : 'closed'"
+          :data-empty="isEmpty ? '' : undefined"
           :style="{
             // flex layout so we can place the scroll buttons properly
-            display: 'flex',
+            // When hideWhenEmpty is true, hide the content when no items match
+            display: (props.hideWhenEmpty && isEmpty) ? 'none' : 'flex',
             flexDirection: 'column',
             // reset the outline by default as the content MAY get focused
             outline: 'none',

package/src/DateField/DateFieldRoot.vue

@@ -44,7 +44,7 @@ export interface DateFieldRootProps extends PrimitiveProps, FormFieldProps {
   defaultPlaceholder?: DateValue
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled value of the field. Can be bound as `v-model`. */
   modelValue?: DateValue | null
   /** The hour cycle used for formatting times. Defaults to the local preference */
   hourCycle?: HourCycle

package/src/DatePicker/DatePickerRoot.vue

@@ -3,10 +3,11 @@ import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { CalendarRootProps, DateFieldRoot, DateFieldRootProps, PopoverRootEmits, PopoverRootProps } from '..'
-import type { Matcher, WeekDayFormat } from '@/date'
+import type { Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateStep, Granularity, HourCycle } from '@/shared/date'
 import type { Direction } from '@/shared/types'
 import { computed, ref, toRefs, watch } from 'vue'
+import { getWeekStartsOn } from '@/date'
 import { createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate } from '@/shared/date'
 import { PopoverRoot } from '..'
@@ -26,7 +27,7 @@ type DatePickerRootContext = {
   placeholder: Ref<DateValue>
   pagedNavigation: Ref<boolean>
   preventDeselect: Ref<boolean>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
@@ -73,7 +74,6 @@ const props = withDefaults(defineProps<DatePickerRootProps>(), {
   modal: false,
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
@@ -90,7 +90,6 @@ const {
   disabled,
   readonly,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -115,6 +114,7 @@ const {
 
 const dir = useDirection(propDir)
 const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,

package/src/DateRangeField/DateRangeFieldRoot.vue

@@ -12,15 +12,12 @@ import {
   hasTime,
   isBefore,
   isBeforeOrSame,
-
 } from '@/date'
 import { createContext, useDateFormatter, useDirection, useKbd, useLocale } from '@/shared'
 import {
   createContent,
-
   getDefaultDate,
   getSegmentElements,
-
   initializeSegmentValues,
   isSegmentNavigationKey,
   normalizeDateStep,
@@ -57,7 +54,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps, FormFieldProps
   defaultPlaceholder?: DateValue
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled value of the field. Can be bound as `v-model`. */
   modelValue?: DateRange | null
   /** The hour cycle used for formatting times. Defaults to the local preference */
   hourCycle?: HourCycle
@@ -114,6 +111,16 @@ const props = withDefaults(defineProps<DateRangeFieldRootProps>(), {
   isDateUnavailable: undefined,
 })
 const emits = defineEmits<DateRangeFieldRootEmits>()
+defineSlots<{
+  default?: (props: {
+    /** The current date range of the field */
+    modelValue: DateRange | null
+    /** The date field segment contents */
+    segments: { start: { part: SegmentPart, value: string }[], end: { part: SegmentPart, value: string }[] }
+    /** Value if the input is invalid */
+    isInvalid: boolean
+  }) => any
+}>()
 const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: propDir, locale: propLocale } = toRefs(props)
 const locale = useLocale(propLocale)
 const dir = useDirection(propDir)

package/src/DateRangePicker/DateRangePickerRoot.vue

@@ -3,10 +3,11 @@ import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'
-import type { Matcher, WeekDayFormat } from '@/date'
+import type { Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateRange, DateStep, Granularity, HourCycle } from '@/shared/date'
 
 import type { Direction } from '@/shared/types'
+import { getWeekStartsOn } from '@/date'
 import { createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate } from '@/shared/date'
 import { PopoverRoot } from '..'
@@ -26,7 +27,7 @@ type DateRangePickerRootContext = {
   placeholder: Ref<DateValue>
   pagedNavigation: Ref<boolean>
   preventDeselect: Ref<boolean>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
@@ -69,7 +70,7 @@ export const [injectDateRangePickerRootContext, provideDateRangePickerRootContex
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { ref, toRefs, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -81,7 +82,6 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   modal: false,
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
@@ -101,7 +101,6 @@ const {
   disabled,
   readonly,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -129,6 +128,7 @@ const {
 
 const dir = useDirection(propsDir)
 const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue ?? { start: undefined, end: undefined },

package/src/DismissableLayer/utils.ts

@@ -28,8 +28,7 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
     layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),
   )
 
-  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))
-  ) {
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
     return true
   }
   else {