reka-ui 2.8.2 → 2.9.0

package/src/ColorArea/ColorAreaRoot.vue

@@ -0,0 +1,255 @@
+<script lang="ts">
+import type { ComputedRef, CSSProperties, 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 } from '@/shared'
+
+export interface ColorAreaRootProps 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
+  /** Color channel for the horizontal (x) axis. */
+  xChannel?: ColorChannel
+  /** Color channel for the vertical (y) axis. */
+  yChannel?: ColorChannel
+  /** When `true`, prevents the user from interacting with the area. */
+  disabled?: boolean
+  /** The name of the x channel input element for form submission. */
+  xName?: string
+  /** The name of the y channel input element for form submission. */
+  yName?: string
+}
+
+export type ColorAreaRootEmits = {
+  'update:modelValue': [value: string]
+  'update:color': [value: Color]
+  'change': [value: string]
+  'changeEnd': [value: string]
+}
+
+export interface ColorAreaRootContext {
+  color: Ref<Color>
+  xValue: Ref<number>
+  yValue: Ref<number>
+  xChannel: Ref<ColorChannel>
+  yChannel: Ref<ColorChannel>
+  colorSpace: Ref<ColorSpace>
+  disabled: Ref<boolean>
+  xRange: ComputedRef<{ min: number, max: number, step: number }>
+  yRange: ComputedRef<{ min: number, max: number, step: number }>
+  thumbRef: Ref<HTMLElement | undefined>
+  updateValues: (x: number, y: number) => void
+  commitValues: () => void
+}
+
+export const [injectColorAreaRootContext, provideColorAreaRootContext]
+  = createContext<ColorAreaRootContext>('ColorAreaRoot')
+</script>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed, nextTick, ref, toRefs, watch } from 'vue'
+import { Primitive } from '@/Primitive'
+import {
+  colorToString,
+  convertToHsb,
+  convertToHsl,
+  getAreaBackgroundStyle,
+  getChannelRange,
+  getChannelValue,
+  normalizeColor,
+  setChannelValues,
+} from '@/shared/color'
+import { VisuallyHiddenInput } from '@/VisuallyHidden'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ColorAreaRootProps>(), {
+  colorSpace: 'hsl',
+  xChannel: 'hue',
+  yChannel: 'saturation',
+  disabled: false,
+  defaultValue: '#ff0000',
+  as: 'div',
+})
+
+const emits = defineEmits<ColorAreaRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** CSS styles for the color area background gradient */
+    style: CSSProperties
+  }) => any
+}>()
+
+const { colorSpace, xChannel, yChannel, disabled } = toRefs(props)
+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,
+})
+
+// The actual color object for rendering
+const color = computed({
+  get: () => normalizeColor(modelValue.value ?? '#000000'),
+  set: (newColor: Color) => {
+    const hexString = colorToString(newColor, 'hex')
+    modelValue.value = hexString
+    emits('update:color', newColor)
+  },
+})
+
+// Get channel ranges
+const xRange = computed(() => getChannelRange(xChannel.value))
+const yRange = computed(() => getChannelRange(yChannel.value))
+
+// Store exact channel values as refs to avoid floating-point drift
+// Initialize from the color value (rounded to nearest integer)
+const xValue = ref(Math.round(getChannelValue(color.value, xChannel.value)))
+const yValue = ref(Math.round(getChannelValue(color.value, yChannel.value)))
+
+// Store the hue separately to preserve it when saturation is 0 (grayscale)
+const hueValue = ref(colorSpace.value === 'hsl'
+  ? convertToHsl(color.value).h
+  : colorSpace.value === 'hsb'
+    ? convertToHsb(color.value).h
+    : 0)
+
+// Track when we're in the middle of an update to prevent circular sync
+let isUpdating = false
+
+// Sync channel values when color changes externally
+watch(() => color.value, (newColor) => {
+  // Skip if we just triggered this update ourselves
+  if (isUpdating)
+    return
+
+  const newX = Math.round(getChannelValue(newColor, xChannel.value))
+  const newY = Math.round(getChannelValue(newColor, yChannel.value))
+
+  // Only update if the rounded value meaningfully changed.
+  // During drag, xValue/yValue store exact floats (e.g. 80.45).
+  // External updates (e.g. hue slider) should not snap these to integers.
+  if (Math.round(xValue.value) !== newX)
+    xValue.value = newX
+  if (Math.round(yValue.value) !== newY)
+    yValue.value = newY
+
+  // Update hue if saturation is not 0 (to preserve hue for grayscale colors)
+  if (colorSpace.value === 'hsl') {
+    const hsl = convertToHsl(newColor)
+    if (hsl.s > 0)
+      hueValue.value = hsl.h
+  }
+  else if (colorSpace.value === 'hsb') {
+    const hsb = convertToHsb(newColor)
+    if (hsb.s > 0)
+      hueValue.value = hsb.h
+  }
+}, { immediate: true })
+
+// Background styles for the color area
+// Use preserved hue to ensure background doesn't change when saturation is 0
+const areaStyles = computed(() => {
+  // Create a color with the preserved hue for background computation
+  let bgColor = color.value
+  if (colorSpace.value === 'hsl' || colorSpace.value === 'hsb') {
+    if (colorSpace.value === 'hsl') {
+      bgColor = { space: 'hsl', h: hueValue.value, s: 100, l: 50, alpha: 1 }
+    }
+    else {
+      bgColor = { space: 'hsb', h: hueValue.value, s: 100, b: 100, alpha: 1 }
+    }
+  }
+  return getAreaBackgroundStyle(bgColor, xChannel.value, yChannel.value, colorSpace.value)
+})
+
+function updateValues(x: number, y: number) {
+  const clampedX = Math.max(xRange.value.min, Math.min(xRange.value.max, x))
+  const clampedY = Math.max(yRange.value.min, Math.min(yRange.value.max, y))
+
+  // Update exact values
+  xValue.value = clampedX
+  yValue.value = clampedY
+
+  // Prevent watch from syncing back to xValue/yValue
+  isUpdating = true
+
+  // Update color from exact values (with preserved hue)
+  const channels: Array<{ channel: ColorChannel, value: number }> = [
+    { channel: xChannel.value, value: clampedX },
+    { channel: yChannel.value, value: clampedY },
+  ]
+
+  // Preserve hue only when it is NOT directly controlled by an axis
+  const usesHueAxis = xChannel.value === 'hue' || yChannel.value === 'hue'
+  if (!usesHueAxis && (colorSpace.value === 'hsl' || colorSpace.value === 'hsb')) {
+    channels.push({ channel: 'hue', value: hueValue.value })
+  }
+
+  color.value = setChannelValues(color.value, channels)
+
+  // Re-enable watch sync after Vue has processed the update
+  nextTick(() => {
+    isUpdating = false
+  })
+}
+
+function commitValues() {
+  emits('changeEnd', colorToString(color.value, 'hex'))
+}
+
+const thumbRef = ref<HTMLElement>()
+
+provideColorAreaRootContext({
+  color: computed(() => color.value) as Ref<Color>,
+  xValue,
+  yValue,
+  xChannel,
+  yChannel,
+  colorSpace,
+  disabled,
+  xRange,
+  yRange,
+  thumbRef,
+  updateValues,
+  commitValues,
+})
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :as-child="asChild"
+    role="group"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+  >
+    <slot :style="areaStyles" />
+
+    <VisuallyHiddenInput
+      v-if="isFormControl && xName"
+      type="text"
+      :value="xValue"
+      :name="xName"
+      :disabled="disabled"
+    />
+    <VisuallyHiddenInput
+      v-if="isFormControl && yName"
+      type="text"
+      :value="yValue"
+      :name="yName"
+      :disabled="disabled"
+    />
+  </Primitive>
+</template>

package/src/ColorArea/ColorAreaThumb.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface ColorAreaThumbProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+import { getChannelName } from '@/shared/color'
+import { injectColorAreaRootContext } from './ColorAreaRoot.vue'
+import { convertValueToPercentage } from './utils'
+
+const props = withDefaults(defineProps<ColorAreaThumbProps>(), {
+  as: 'span',
+})
+
+const rootContext = injectColorAreaRootContext()
+const { primitiveElement, currentElement } = usePrimitiveElement()
+
+onMounted(() => {
+  rootContext.thumbRef.value = currentElement.value
+})
+
+const xPercent = computed(() =>
+  convertValueToPercentage(
+    rootContext.xValue.value,
+    rootContext.xRange.value.min,
+    rootContext.xRange.value.max,
+  ),
+)
+
+const yPercent = computed(() =>
+  convertValueToPercentage(
+    rootContext.yValue.value,
+    rootContext.yRange.value.min,
+    rootContext.yRange.value.max,
+  ),
+)
+
+const ariaLabel = computed(() => {
+  return `${getChannelName(rootContext.xChannel.value)}, ${getChannelName(rootContext.yChannel.value)}`
+})
+
+const ariaValueText = computed(() => {
+  return `${getChannelName(rootContext.xChannel.value)} ${Math.round(rootContext.xValue.value)}, ${getChannelName(rootContext.yChannel.value)} ${Math.round(rootContext.yValue.value)}`
+})
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    role="slider"
+    :tabindex="rootContext.disabled.value ? undefined : 0"
+    :aria-label="ariaLabel"
+    aria-roledescription="Color thumb"
+    :aria-valuemin="rootContext.xRange.value.min"
+    :aria-valuemax="rootContext.xRange.value.max"
+    :aria-valuenow="rootContext.xValue.value"
+    :aria-valuetext="ariaValueText"
+    aria-orientation="horizontal"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
+    :as-child="asChild"
+    :as="as"
+    :style="{
+      position: 'absolute',
+      left: `${xPercent}%`,
+      top: `${100 - yPercent}%`,
+      transform: 'translate(-50%, -50%)',
+      touchAction: 'none',
+    }"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/ColorArea/index.ts

@@ -0,0 +1,14 @@
+export {
+  default as ColorAreaArea,
+  type ColorAreaAreaProps,
+} from './ColorAreaArea.vue'
+export {
+  default as ColorAreaRoot,
+  type ColorAreaRootEmits,
+  type ColorAreaRootProps,
+  injectColorAreaRootContext,
+} from './ColorAreaRoot.vue'
+export {
+  default as ColorAreaThumb,
+  type ColorAreaThumbProps,
+} from './ColorAreaThumb.vue'

package/src/ColorArea/utils.ts

@@ -0,0 +1,24 @@
+import { clamp } from '@/shared'
+
+// 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): string {
+  return `${percentage}%`
+}

package/src/ColorField/ColorFieldInput.vue

@@ -0,0 +1,133 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface ColorFieldInputProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Primitive } from '@/Primitive'
+import { injectColorFieldRootContext } from './ColorFieldRoot.vue'
+
+const props = withDefaults(defineProps<ColorFieldInputProps>(), {
+  as: 'input',
+})
+
+const rootContext = injectColorFieldRootContext()
+
+const isFocused = ref(false)
+
+const inputType = computed(() => {
+  return rootContext.channel.value ? 'text' : 'text'
+})
+
+const inputMode = computed(() => {
+  return rootContext.channel.value ? 'numeric' : 'text'
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  rootContext.updateValue(target.value)
+}
+
+function handleBlur() {
+  isFocused.value = false
+  rootContext.commit()
+}
+
+function handleFocus() {
+  isFocused.value = true
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!isFocused.value)
+    return
+  rootContext.handleWheel(event)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowUp':
+      event.preventDefault()
+      rootContext.increment()
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      rootContext.decrement()
+      break
+    case 'PageUp':
+      event.preventDefault()
+      rootContext.incrementPage()
+      break
+    case 'PageDown':
+      event.preventDefault()
+      rootContext.decrementPage()
+      break
+    case 'Home':
+      event.preventDefault()
+      rootContext.decrementToMin()
+      break
+    case 'End':
+      event.preventDefault()
+      rootContext.incrementToMax()
+      break
+    case 'Enter':
+      event.preventDefault()
+      rootContext.commit()
+      break
+  }
+}
+
+// Handle numeric key validation for channel mode
+function handleBeforeInput(event: InputEvent) {
+  if (!rootContext.channel.value)
+    return // No validation for hex mode
+
+  const target = event.target as HTMLInputElement
+  const data = event.data
+
+  // Allow numbers, decimal point, minus sign
+  if (data && !/[\d.-]/.test(data)) {
+    event.preventDefault()
+    return
+  }
+
+  // Check the resulting value would be valid
+  const nextValue = target.value.slice(0, target.selectionStart ?? undefined)
+    + (data ?? '')
+    + target.value.slice(target.selectionEnd ?? undefined)
+
+  // Allow empty or partial values while typing
+  if (nextValue === '-' || nextValue === '.' || nextValue === '-.')
+    return
+
+  const numValue = parseFloat(nextValue)
+  if (isNaN(numValue)) {
+    event.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :as-child="asChild"
+    :as="as"
+    :type="inputType"
+    :inputmode="inputMode"
+    :value="rootContext.inputValue.value"
+    :placeholder="rootContext.placeholder.value"
+    :disabled="rootContext.disabled.value"
+    :readonly="rootContext.readonly.value"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
+    :data-readonly="rootContext.readonly.value ? '' : undefined"
+    :aria-invalid="!rootContext.channel.value ? undefined : undefined"
+    @input="handleInput"
+    @blur="handleBlur"
+    @focus="handleFocus"
+    @keydown="handleKeydown"
+    @wheel="handleWheel"
+    @beforeinput="handleBeforeInput"
+  >
+    <slot />
+  </Primitive>
+</template>