reka-ui 2.8.2 → 2.9.0

package/src/ColorField/ColorFieldRoot.vue

@@ -0,0 +1,326 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import type { Color, ColorChannel, ColorSpace } from '@/shared/color'
+import type { FormFieldProps } from '@/shared/types'
+import { createContext, useFormControl, useForwardExpose, useLocale } from '@/shared'
+
+export interface ColorFieldRootProps extends PrimitiveProps, FormFieldProps {
+  /** The color value (controlled). Can be a hex string or Color object. */
+  modelValue?: string | Color
+  /** The default color value (uncontrolled). */
+  defaultValue?: string | Color
+  /** The color space to operate in when displaying a channel. */
+  colorSpace?: ColorSpace
+  /** The color channel to display. If not provided, displays hex value. */
+  channel?: ColorChannel
+  /** Placeholder text when the field is empty. */
+  placeholder?: string
+  /** When `true`, prevents the user from interacting with the field. */
+  disabled?: boolean
+  /** When `true`, the field is read-only. */
+  readonly?: boolean
+  /** When `true`, prevents the value from changing on wheel scroll. */
+  disableWheelChange?: boolean
+  /** The locale to use for number formatting. */
+  locale?: string
+  /** Custom step value for increment/decrement. Defaults to channel step or 1 for hex. */
+  step?: number
+}
+
+export type ColorFieldRootEmits = {
+  'update:modelValue': [value: string]
+  'update:color': [value: Color]
+}
+
+export interface ColorFieldRootContext {
+  color: Ref<Color>
+  inputValue: Ref<string>
+  channel: Ref<ColorChannel | undefined>
+  colorSpace: Ref<ColorSpace>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  disableWheelChange: Ref<boolean>
+  placeholder: Ref<string | undefined>
+  updateValue: (value: string) => void
+  commit: () => void
+  increment: () => void
+  decrement: () => void
+  incrementToMax: () => void
+  decrementToMin: () => void
+  incrementPage: () => void
+  decrementPage: () => void
+  handleWheel: (event: WheelEvent) => void
+}
+
+export const [injectColorFieldRootContext, provideColorFieldRootContext]
+  = createContext<ColorFieldRootContext>('ColorFieldRoot')
+</script>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, ref, toRefs, watch } from 'vue'
+import { Primitive } from '@/Primitive'
+import {
+  colorToString,
+  convertToRgb,
+  getChannelRange,
+  getChannelValue,
+  isValidColor,
+  normalizeColor,
+  parseColor,
+  setChannelValue,
+} from '@/shared/color'
+import { VisuallyHiddenInput } from '@/VisuallyHidden'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ColorFieldRootProps>(), {
+  colorSpace: 'hsl',
+  disabled: false,
+  readonly: false,
+  disableWheelChange: false,
+  defaultValue: '#000000',
+  as: 'div',
+})
+
+const emits = defineEmits<ColorFieldRootEmits>()
+
+const { colorSpace, channel, disabled, readonly, disableWheelChange, placeholder, locale: propLocale, step: stepProp } = toRefs(props)
+const { forwardRef, currentElement } = useForwardExpose()
+const isFormControl = useFormControl(currentElement)
+const locale = useLocale(propLocale)
+
+// Normalize the model value
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: (props.modelValue === undefined) as false,
+})
+
+const color = computed({
+  get: () => normalizeColor(modelValue.value ?? '#000000'),
+  set: (newColor: Color) => {
+    const hexString = colorToString(newColor, 'hex')
+    modelValue.value = hexString
+    emits('update:color', newColor)
+  },
+})
+
+// Input value for the text field
+const inputValue = ref('')
+const isEditing = ref(false)
+
+// Update input value when color changes (unless user is editing)
+watch(() => color.value, (newColor) => {
+  if (!isEditing.value) {
+    inputValue.value = formatValue(newColor)
+  }
+}, { immediate: true })
+
+function formatValue(c: Color): string {
+  if (channel.value) {
+    const value = getChannelValue(c, channel.value)
+    if (channel.value === 'alpha') {
+      return String(Math.round(value))
+    }
+    return String(Math.round(value))
+  }
+  // Hex mode
+  return colorToString(c, 'hex')
+}
+
+// The effective step size
+const MIN_HEX_INT = 0x000000
+const MAX_HEX_INT = 0xFFFFFF
+const PAGE_STEP_MULTIPLIER = 10
+
+function getStep(): number {
+  if (stepProp.value != null)
+    return stepProp.value
+  if (channel.value)
+    return getChannelRange(channel.value).step
+  // Hex mode: step by 1 in the integer space (like react-spectrum)
+  return 1
+}
+
+function updateValue(value: string) {
+  inputValue.value = value
+}
+
+function commit() {
+  isEditing.value = false
+
+  if (channel.value) {
+    // Channel mode - parse as number
+    const numValue = parseFloat(inputValue.value)
+    if (!isNaN(numValue)) {
+      const range = getChannelRange(channel.value)
+      const clamped = Math.max(range.min, Math.min(range.max, numValue))
+      color.value = setChannelValue(color.value, channel.value, clamped)
+    }
+    // Reset to formatted value
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    // Hex mode - parse as color
+    const trimmed = inputValue.value.trim()
+    if (isValidColor(trimmed)) {
+      color.value = parseColor(trimmed)
+    }
+    // Reset to formatted value
+    inputValue.value = formatValue(color.value)
+  }
+}
+
+function addHexValue(delta: number) {
+  const intDelta = Math.trunc(delta)
+  const hexInt = color.value.space === 'rgb'
+    ? ((Math.round((color.value as any).r) << 16) | (Math.round((color.value as any).g) << 8) | Math.round((color.value as any).b))
+    : (() => {
+        const rgb = convertToRgb(color.value)
+        return (Math.round(rgb.r) << 16) | (Math.round(rgb.g) << 8) | Math.round(rgb.b)
+      })()
+  const clamped = Math.min(Math.max(hexInt + intDelta, MIN_HEX_INT), MAX_HEX_INT)
+  const hex = `#${clamped.toString(16).padStart(6, '0')}`
+  color.value = parseColor(hex)
+  inputValue.value = formatValue(color.value)
+}
+
+function increment() {
+  if (disabled.value || readonly.value)
+    return
+  const step = getStep()
+  if (channel.value) {
+    const currentValue = getChannelValue(color.value, channel.value)
+    color.value = setChannelValue(color.value, channel.value, currentValue + step)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(step)
+  }
+}
+
+function decrement() {
+  if (disabled.value || readonly.value)
+    return
+  const step = getStep()
+  if (channel.value) {
+    const currentValue = getChannelValue(color.value, channel.value)
+    color.value = setChannelValue(color.value, channel.value, currentValue - step)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(-step)
+  }
+}
+
+function incrementPage() {
+  if (disabled.value || readonly.value)
+    return
+  const step = getStep() * PAGE_STEP_MULTIPLIER
+  if (channel.value) {
+    const currentValue = getChannelValue(color.value, channel.value)
+    color.value = setChannelValue(color.value, channel.value, currentValue + step)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(step)
+  }
+}
+
+function decrementPage() {
+  if (disabled.value || readonly.value)
+    return
+  const step = getStep() * PAGE_STEP_MULTIPLIER
+  if (channel.value) {
+    const currentValue = getChannelValue(color.value, channel.value)
+    color.value = setChannelValue(color.value, channel.value, currentValue - step)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(-step)
+  }
+}
+
+function incrementToMax() {
+  if (disabled.value || readonly.value)
+    return
+  if (channel.value) {
+    const range = getChannelRange(channel.value)
+    color.value = setChannelValue(color.value, channel.value, range.max)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(MAX_HEX_INT)
+  }
+}
+
+function decrementToMin() {
+  if (disabled.value || readonly.value)
+    return
+  if (channel.value) {
+    const range = getChannelRange(channel.value)
+    color.value = setChannelValue(color.value, channel.value, range.min)
+    inputValue.value = formatValue(color.value)
+  }
+  else {
+    addHexValue(-MAX_HEX_INT)
+  }
+}
+
+function handleWheel(event: WheelEvent) {
+  if (disableWheelChange.value || disabled.value || readonly.value)
+    return
+
+  event.preventDefault()
+
+  if (event.deltaY > 0)
+    decrement()
+  else
+    increment()
+}
+
+provideColorFieldRootContext({
+  color: computed(() => color.value) as Ref<Color>,
+  inputValue,
+  channel,
+  colorSpace,
+  disabled,
+  readonly,
+  disableWheelChange,
+  placeholder,
+  updateValue,
+  commit,
+  increment,
+  decrement,
+  incrementToMax,
+  decrementToMin,
+  incrementPage,
+  decrementPage,
+  handleWheel,
+})
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :as-child="asChild"
+    role="group"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+  >
+    <slot />
+
+    <VisuallyHiddenInput
+      v-if="isFormControl && name"
+      type="text"
+      :value="colorToString(color, 'hex')"
+      :name="name"
+      :disabled="disabled"
+      :required="required"
+    />
+  </Primitive>
+</template>

package/src/ColorField/index.ts

@@ -0,0 +1,10 @@
+export {
+  default as ColorFieldInput,
+  type ColorFieldInputProps,
+} from './ColorFieldInput.vue'
+export {
+  default as ColorFieldRoot,
+  type ColorFieldRootEmits,
+  type ColorFieldRootProps,
+  injectColorFieldRootContext,
+} from './ColorFieldRoot.vue'

package/src/ColorSlider/ColorSliderRoot.vue

@@ -0,0 +1,224 @@
+<script lang="ts">
+import type { ComputedRef, Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import type { Color, ColorChannel, ColorChannel as ColorChannelType, ColorSpace } from '@/shared/color'
+import type { DataOrientation, Direction, FormFieldProps } from '@/shared/types'
+import { createContext, useDirection, useFormControl, useForwardExpose } from '@/shared'
+
+export interface ColorSliderRootProps extends PrimitiveProps, FormFieldProps {
+  /** The color value (controlled). Can be a hex string or Color object. */
+  modelValue?: string | Color
+  /** The default color value (uncontrolled). */
+  defaultValue?: string | Color
+  /** The color space to operate in. */
+  colorSpace?: ColorSpace
+  /** The color channel that this slider manipulates. */
+  channel: ColorChannel
+  /** The orientation of the slider. */
+  orientation?: DataOrientation
+  /** The reading direction of the slider. */
+  dir?: Direction
+  /** Whether the slider is visually inverted. */
+  inverted?: boolean
+  /** When `true`, prevents the user from interacting with the slider. */
+  disabled?: boolean
+  /** Custom step value for increment/decrement. Defaults to the channel's natural step. */
+  step?: number
+}
+
+export type ColorSliderRootEmits = {
+  'update:modelValue': [value: string | Color]
+  'update:color': [value: Color]
+  'change': [value: string]
+  'changeEnd': [value: string]
+}
+
+export interface ColorSliderRootContext {
+  color: Ref<Color>
+  channelValue: ComputedRef<number>
+  channel: Ref<ColorChannel>
+  colorSpace: Ref<ColorSpace>
+  orientation: Ref<DataOrientation>
+  disabled: Ref<boolean>
+  inverted: Ref<boolean>
+  min: ComputedRef<number>
+  max: ComputedRef<number>
+  step: ComputedRef<number>
+}
+
+export const [injectColorSliderRootContext, provideColorSliderRootContext]
+  = createContext<ColorSliderRootContext>('ColorSliderRoot')
+</script>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, ref, toRefs, watch } from 'vue'
+import { colorToString, convertToHsb, convertToHsl, convertToRgb, getChannelRange, getChannelValue, normalizeColor, setChannelValue } from '@/shared/color'
+import { SliderRoot } from '@/Slider'
+import { VisuallyHiddenInput } from '@/VisuallyHidden'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ColorSliderRootProps>(), {
+  colorSpace: 'hsl',
+  orientation: 'horizontal',
+  disabled: false,
+  inverted: false,
+  defaultValue: '#000000',
+  as: 'span',
+})
+
+const emits = defineEmits<ColorSliderRootEmits>()
+
+const { orientation, disabled, inverted, dir: propDir, channel, colorSpace, step: stepProp } = toRefs(props)
+const dir = useDirection(propDir)
+const { forwardRef, currentElement } = useForwardExpose()
+const isFormControl = useFormControl(currentElement)
+
+// Normalize the model value to a Color object
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: (props.modelValue === undefined) as false,
+})
+
+// Convert a color to the native color space for the given channel.
+// This ensures setChannelValue/getChannelValue operate without cross-space round-trips.
+function toNativeSpace(color: Color, ch: ColorChannelType, space: ColorSpace): Color {
+  switch (ch) {
+    case 'hue':
+    case 'lightness':
+      return convertToHsl(color)
+    case 'saturation':
+      return space === 'hsb' ? convertToHsb(color) : convertToHsl(color)
+    case 'brightness':
+      return convertToHsb(color)
+    case 'red':
+    case 'green':
+    case 'blue':
+      return convertToRgb(color)
+    case 'alpha':
+      return color
+    default:
+      return color
+  }
+}
+
+// Internal color ref that preserves color space precision.
+// Convert to the channel's native space to avoid cross-space round-trips during drag.
+const internalColor = ref<Color>(toNativeSpace(normalizeColor(modelValue.value ?? props.defaultValue ?? '#000000'), channel.value, colorSpace.value))
+
+// Check if a color is achromatic (hue information is lost in hex round-trips)
+function isAchromatic(color: Color): boolean {
+  const hsl = convertToHsl(color)
+  return hsl.s === 0 || hsl.l === 0 || hsl.l >= 100
+}
+
+// Sync internal color from external modelValue changes (e.g. parent updates)
+watch(() => modelValue.value, (newVal) => {
+  if (newVal == null)
+    return
+  const parsed = normalizeColor(newVal)
+  const currentHex = colorToString(internalColor.value, 'hex')
+  const newHex = colorToString(parsed, 'hex')
+  // Only update if the external value actually changed (avoid overwriting
+  // precision during our own drag updates)
+  if (currentHex !== newHex) {
+    const nativeColor = toNativeSpace(parsed, channel.value, colorSpace.value)
+    const currentChannelVal = getChannelValue(internalColor.value, channel.value)
+    const newChannelVal = getChannelValue(nativeColor, channel.value)
+
+    // Preserve this slider's channel value when:
+    // 1. Color is achromatic (hue completely lost in hex round-trip)
+    // 2. Channel value diff is within 2% of range (8-bit RGB quantization drift)
+    // We still update the rest of the color so the track gradient stays correct.
+    const range = channelRange.value.max - channelRange.value.min
+    const shouldPreserve = (channel.value === 'hue' && isAchromatic(parsed))
+      || Math.abs(currentChannelVal - newChannelVal) < range * 0.02
+
+    if (shouldPreserve) {
+      internalColor.value = setChannelValue(nativeColor, channel.value, currentChannelVal)
+    }
+    else {
+      internalColor.value = nativeColor
+    }
+  }
+})
+
+const color = computed({
+  get: () => internalColor.value,
+  set: (newColor: Color) => {
+    internalColor.value = newColor
+    const hexString = colorToString(newColor, 'hex')
+    modelValue.value = hexString
+    emits('update:color', newColor)
+  },
+})
+
+// Get channel range
+const channelRange = computed(() => getChannelRange(channel.value))
+const min = computed(() => channelRange.value.min)
+const max = computed(() => channelRange.value.max)
+const step = computed(() => stepProp.value ?? channelRange.value.step)
+
+// Current channel value
+const channelValue = computed(() => getChannelValue(color.value, channel.value))
+
+// Convert channel value to array format for SliderRoot
+const sliderValue = computed({
+  get: () => [channelValue.value],
+  set: (newValue: number[]) => {
+    const clamped = Math.max(min.value, Math.min(max.value, newValue[0]))
+    const newColor = setChannelValue(color.value, channel.value, clamped)
+    color.value = newColor
+    emits('change', colorToString(newColor, 'hex'))
+  },
+})
+
+function handleValueCommit(values: number[]) {
+  emits('changeEnd', colorToString(color.value, 'hex'))
+}
+
+provideColorSliderRootContext({
+  color: computed(() => color.value) as Ref<Color>,
+  channelValue,
+  channel,
+  colorSpace,
+  orientation,
+  disabled,
+  inverted,
+  min,
+  max,
+  step,
+})
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="$attrs"
+    :ref="forwardRef"
+    v-model="sliderValue"
+    :orientation="orientation"
+    :dir="dir"
+    :disabled="disabled"
+    :inverted="inverted"
+    :min="min"
+    :max="max"
+    :step="step"
+    :as="as"
+    :as-child="asChild"
+    @value-commit="handleValueCommit"
+  >
+    <slot />
+
+    <VisuallyHiddenInput
+      v-if="isFormControl && name"
+      type="text"
+      :value="colorToString(color, 'hex')"
+      :name="name"
+      :disabled="disabled"
+      :required="required"
+    />
+  </SliderRoot>
+</template>

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)`
+}