reka-ui 2.8.2 → 2.9.0

package/src/Autocomplete/AutocompleteRoot.vue

@@ -0,0 +1,272 @@
+<script lang="ts">
+import type { Ref } from 'vue'
+import type { PrimitiveProps } from '@/Primitive'
+import type { Direction, GenericComponentInstance } from '@/shared/types'
+import { provideComboboxRootContext } from '@/Combobox/ComboboxRoot.vue'
+import { usePrimitiveElement } from '@/Primitive'
+import { createContext, useDirection, useFilter } from '@/shared'
+
+export interface AutocompleteRootProps extends PrimitiveProps {
+  /** The controlled value of the Autocomplete (the input text). Can be bound with `v-model`. */
+  modelValue?: string
+  /** The value of the autocomplete when initially rendered. Use when you do not need to control the state. */
+  defaultValue?: string
+  /** The controlled open state of the Autocomplete. Can be bound with `v-model:open`. */
+  open?: boolean
+  /** The open state of the autocomplete when it is initially rendered. Use when you do not need to control its open state. */
+  defaultOpen?: boolean
+  /** When `true`, prevents the user from interacting with autocomplete */
+  disabled?: boolean
+  /** The reading direction of the autocomplete when applicable. */
+  dir?: Direction
+  /** The name of the field. Submitted with its owning form as part of a name/value pair. */
+  name?: string
+  /** When `true`, indicates that the user must set the value before the owning form can be submitted. */
+  required?: boolean
+  /**
+   * Whether to reset the searchTerm when the Autocomplete input blurred
+   * @defaultValue `false`
+   */
+  resetSearchTermOnBlur?: boolean
+  /**
+   * Whether to open the autocomplete when the input is focused
+   * @defaultValue `false`
+   */
+  openOnFocus?: boolean
+  /**
+   * Whether to open the autocomplete when the input is clicked
+   * @defaultValue `false`
+   */
+  openOnClick?: boolean
+  /**
+   * When `true`, disable the default filters
+   */
+  ignoreFilter?: boolean
+  /** When `true`, hover over item will trigger highlight */
+  highlightOnHover?: boolean
+}
+
+export type AutocompleteRootEmits = {
+  /** Event handler called when the value changes. */
+  'update:modelValue': [value: string]
+  /** Event handler when highlighted element changes. */
+  'highlight': [payload: { ref: HTMLElement, value: string } | undefined]
+  /** Event handler called when the open state of the autocomplete changes. */
+  'update:open': [value: boolean]
+}
+
+export type AutocompleteRootContext = {
+  modelValue: Ref<string>
+}
+
+export const [injectAutocompleteRootContext, provideAutocompleteRootContext]
+  = createContext<AutocompleteRootContext>('AutocompleteRoot')
+</script>
+
+<script setup lang="ts">
+import { createEventHook, useVModel } from '@vueuse/core'
+import { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs } from 'vue'
+import { ListboxRoot } from '@/Listbox'
+import { PopperRoot } from '@/Popper'
+
+const props = withDefaults(defineProps<AutocompleteRootProps>(), {
+  open: undefined,
+  resetSearchTermOnBlur: false,
+  openOnFocus: false,
+  openOnClick: false,
+  highlightOnHover: true,
+})
+const emits = defineEmits<AutocompleteRootEmits>()
+
+defineSlots<{
+  default?: (props: {
+    /** Current open state */
+    open: typeof open.value
+    /** Current active value */
+    modelValue: typeof modelValue.value
+  }) => any
+}>()
+
+const { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()
+const { disabled, ignoreFilter, openOnFocus, openOnClick, dir: propDir, highlightOnHover } = toRefs(props)
+
+const dir = useDirection(propDir)
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue ?? '',
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<string>
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+// Writable computed that converts any value to string for the ComboboxRootContext.
+// This handles the case when ComboboxItem sets modelValue to a non-string value,
+// or when ComboboxCancel resets modelValue to null.
+const contextModelValue = computed({
+  get: () => modelValue.value,
+  set: (val: any) => {
+    if (val === null || val === undefined) {
+      modelValue.value = ''
+    }
+    else {
+      modelValue.value = String(val)
+    }
+  },
+})
+
+async function onOpenChange(val: boolean) {
+  open.value = val
+
+  if (val) {
+    // When opening, set filter to current text so items are filtered by what's in the input
+    filterSearch.value = modelValue.value || ''
+
+    await nextTick()
+    primitiveElement.value?.highlightSelected()
+    isUserInputted.value = true
+    inputElement.value?.focus()
+  }
+  else {
+    isUserInputted.value = false
+    filterSearch.value = ''
+    setTimeout(() => {
+      if (!val && props.resetSearchTermOnBlur)
+        resetSearchTerm.trigger()
+    }, 1)
+  }
+}
+
+const resetSearchTerm = createEventHook()
+const isUserInputted = ref(false)
+const isVirtual = ref(false)
+const inputElement = ref<HTMLInputElement>()
+const triggerElement = ref<HTMLElement>()
+
+const highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const filterSearch = ref('')
+
+const filterState = computed<{
+  count: number
+  items: Map<string, number>
+  groups: Set<string>
+}>((oldValue) => {
+  if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {
+    return {
+      count: allItems.value.size,
+      items: oldValue?.items ?? new Map(),
+      groups: oldValue?.groups ?? new Set(allGroups.value.keys()),
+    }
+  }
+
+  let itemCount = 0
+  const filteredItems = new Map<string, number>()
+  const filteredGroups = new Set<string>()
+
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterSearch.value)
+    filteredItems.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filteredItems.get(itemId)! > 0) {
+        filteredGroups.add(groupId)
+        break
+      }
+    }
+  }
+
+  return {
+    count: itemCount,
+    items: filteredItems,
+    groups: filteredGroups,
+  }
+})
+
+const inst = getCurrentInstance()
+onMounted(() => {
+  if (inst?.exposed) {
+    inst.exposed.highlightItem = primitiveElement.value?.highlightItem
+    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem
+    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected
+  }
+})
+
+defineExpose({
+  filtered: filterState,
+  highlightedElement,
+  highlightItem: primitiveElement.value?.highlightItem,
+  highlightFirstItem: primitiveElement.value?.highlightFirstItem,
+  highlightSelected: primitiveElement.value?.highlightSelected,
+})
+
+// Provide the Combobox context so all Combobox sub-components work inside Autocomplete
+provideComboboxRootContext({
+  modelValue: contextModelValue as any,
+  multiple: ref(false),
+  disabled,
+  open,
+  onOpenChange,
+  contentId: '',
+  isUserInputted,
+  isVirtual,
+  inputElement,
+  highlightedElement,
+  onInputElementChange: val => inputElement.value = val,
+  triggerElement,
+  onTriggerElementChange: val => triggerElement.value = val,
+  parentElement,
+  resetSearchTermOnSelect: ref(false),
+  onResetSearchTerm: resetSearchTerm.on,
+  allItems,
+  allGroups,
+  filterSearch,
+  filterState,
+  ignoreFilter,
+  openOnFocus,
+  openOnClick,
+  resetModelValueOnClear: ref(true),
+})
+
+// Provide autocomplete-specific context
+provideAutocompleteRootContext({
+  modelValue,
+})
+</script>
+
+<template>
+  <PopperRoot>
+    <ListboxRoot
+      ref="primitiveElement"
+      v-bind="$attrs"
+      v-model="(contextModelValue as any)"
+      :style="{
+        pointerEvents: open ? 'auto' : undefined,
+      }"
+      :as="as"
+      :as-child="asChild"
+      :dir="dir"
+      :name="name"
+      :required="required"
+      :disabled="disabled"
+      :highlight-on-hover="highlightOnHover"
+      @highlight="emits('highlight', $event as any)"
+    >
+      <slot
+        :open="open"
+        :model-value="modelValue"
+      />
+    </ListboxRoot>
+  </PopperRoot>
+</template>

package/src/Autocomplete/index.ts

@@ -0,0 +1,72 @@
+export {
+  default as AutocompleteInput,
+  type AutocompleteInputEmits,
+  type AutocompleteInputProps,
+} from './AutocompleteInput.vue'
+export {
+  default as AutocompleteRoot,
+  type AutocompleteRootEmits,
+  type AutocompleteRootProps,
+  injectAutocompleteRootContext,
+} from './AutocompleteRoot.vue'
+
+// Re-export Combobox sub-components as Autocomplete equivalents.
+// These components inject ComboboxRootContext which AutocompleteRoot provides.
+export {
+  ComboboxAnchor as AutocompleteAnchor,
+  type ComboboxAnchorProps as AutocompleteAnchorProps,
+} from '@/Combobox'
+export {
+  ComboboxArrow as AutocompleteArrow,
+  type ComboboxArrowProps as AutocompleteArrowProps,
+} from '@/Combobox'
+export {
+  ComboboxCancel as AutocompleteCancel,
+  type ComboboxCancelProps as AutocompleteCancelProps,
+} from '@/Combobox'
+export {
+  ComboboxContent as AutocompleteContent,
+  type ComboboxContentEmits as AutocompleteContentEmits,
+  type ComboboxContentProps as AutocompleteContentProps,
+} from '@/Combobox'
+export {
+  ComboboxEmpty as AutocompleteEmpty,
+  type ComboboxEmptyProps as AutocompleteEmptyProps,
+} from '@/Combobox'
+export {
+  ComboboxGroup as AutocompleteGroup,
+  type ComboboxGroupProps as AutocompleteGroupProps,
+} from '@/Combobox'
+export {
+  ComboboxItem as AutocompleteItem,
+  type ComboboxItemEmits as AutocompleteItemEmits,
+  type ComboboxItemProps as AutocompleteItemProps,
+} from '@/Combobox'
+export {
+  ComboboxItemIndicator as AutocompleteItemIndicator,
+  type ComboboxItemIndicatorProps as AutocompleteItemIndicatorProps,
+} from '@/Combobox'
+export {
+  ComboboxLabel as AutocompleteLabel,
+  type ComboboxLabelProps as AutocompleteLabelProps,
+} from '@/Combobox'
+export {
+  ComboboxPortal as AutocompletePortal,
+  type ComboboxPortalProps as AutocompletePortalProps,
+} from '@/Combobox'
+export {
+  ComboboxSeparator as AutocompleteSeparator,
+  type ComboboxSeparatorProps as AutocompleteSeparatorProps,
+} from '@/Combobox'
+export {
+  ComboboxTrigger as AutocompleteTrigger,
+  type ComboboxTriggerProps as AutocompleteTriggerProps,
+} from '@/Combobox'
+export {
+  ComboboxViewport as AutocompleteViewport,
+  type ComboboxViewportProps as AutocompleteViewportProps,
+} from '@/Combobox'
+export {
+  ComboboxVirtualizer as AutocompleteVirtualizer,
+  type ComboboxVirtualizerProps as AutocompleteVirtualizerProps,
+} from '@/Combobox'

package/src/Calendar/CalendarCellTrigger.vue

@@ -171,7 +171,8 @@ function handleArrowKey(e: KeyboardEvent) {
 <template>
   <Primitive
     ref="primitiveElement"
-    v-bind="props"
+    :as="props.as"
+    :as-child="props.asChild"
     role="button"
     :aria-label="labelText"
     data-reka-calendar-cell-trigger

package/src/Calendar/CalendarNext.vue

@@ -26,6 +26,12 @@ defineSlots<CalendarNextSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isNextButtonDisabled(props.nextPage))
 
 const rootContext = injectCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.nextPage(props.nextPage)
+}
 </script>
 
 <template>
@@ -33,11 +39,11 @@ const rootContext = injectCalendarRootContext()
     :as="props.as"
     :as-child="props.asChild"
     aria-label="Next page"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.nextPage(props.nextPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Next page

package/src/Calendar/CalendarPrev.vue

@@ -26,6 +26,12 @@ defineSlots<CalendarPrevSlot>()
 const disabled = computed(() => rootContext.disabled.value || rootContext.isPrevButtonDisabled(props.prevPage))
 
 const rootContext = injectCalendarRootContext()
+
+function handleClick() {
+  if (disabled.value)
+    return
+  rootContext.prevPage(props.prevPage)
+}
 </script>
 
 <template>
@@ -33,11 +39,11 @@ const rootContext = injectCalendarRootContext()
     aria-label="Previous page"
     :as="props.as"
     :as-child="props.asChild"
-    :type="as === 'button' ? 'button' : undefined"
+    :type="props.as === 'button' ? 'button' : undefined"
     :aria-disabled="disabled || undefined"
     :data-disabled="disabled || undefined"
     :disabled="disabled"
-    @click="rootContext.prevPage(props.prevPage)"
+    @click="handleClick"
   >
     <slot :disabled>
       Prev page

package/src/Calendar/CalendarRoot.vue

@@ -97,7 +97,7 @@ export interface CalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
-  /** The controlled checked state of the calendar */
+  /** The controlled selected date value of the calendar. Can be bound as `v-model`. */
   modelValue?: DateValue | DateValue[] | undefined
   /** Whether multiple dates can be selected */
   multiple?: boolean

package/src/Checkbox/CheckboxRoot.vue

@@ -7,11 +7,11 @@ import { useVModel } from '@vueuse/core'
 import { createContext, isNullish, isValueEqualOrExist, useFormControl, useForwardExpose } from '@/shared'
 import { injectCheckboxGroupRootContext } from './CheckboxGroupRoot.vue'
 
-export interface CheckboxRootProps extends PrimitiveProps, FormFieldProps {
+export interface CheckboxRootProps<T = boolean> extends PrimitiveProps, FormFieldProps {
   /** The value of the checkbox when it is initially rendered. Use when you do not need to control its value. */
-  defaultValue?: boolean | 'indeterminate'
+  defaultValue?: T | 'indeterminate'
   /** The controlled value of the checkbox. Can be binded with v-model. */
-  modelValue?: boolean | 'indeterminate' | null
+  modelValue?: T | 'indeterminate' | null
   /** When `true`, prevents the user from interacting with the checkbox */
   disabled?: boolean
   /**
@@ -21,11 +21,19 @@ export interface CheckboxRootProps extends PrimitiveProps, FormFieldProps {
   value?: AcceptableValue
   /** Id of the element */
   id?: string
+  /**
+   * The value used when the checkbox is checked. Defaults to `true`.
+   */
+  trueValue?: T
+  /**
+   * The value used when the checkbox is unchecked. Defaults to `false`.
+   */
+  falseValue?: T
 }
 
-export type CheckboxRootEmits = {
+export type CheckboxRootEmits<T = boolean> = {
   /** Event handler called when the value of the checkbox changes. */
-  'update:modelValue': [value: boolean | 'indeterminate']
+  'update:modelValue': [value: T | 'indeterminate']
 }
 
 interface CheckboxRootContext {
@@ -37,7 +45,7 @@ export const [injectCheckboxRootContext, provideCheckboxRootContext]
   = createContext<CheckboxRootContext>('CheckboxRoot')
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T = boolean">
 import { isEqual } from 'ohash'
 import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
@@ -49,12 +57,14 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<CheckboxRootProps>(), {
+const props = withDefaults(defineProps<CheckboxRootProps<T>>(), {
   modelValue: undefined,
   value: 'on',
   as: 'button',
+  trueValue: (() => true) as unknown as undefined,
+  falseValue: (() => false) as unknown as undefined,
 })
-const emits = defineEmits<CheckboxRootEmits>()
+const emits = defineEmits<CheckboxRootEmits<T>>()
 
 defineSlots<{
   default?: (props: {
@@ -69,19 +79,23 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const checkboxGroupContext = injectCheckboxGroupRootContext(null)
 
-const modelValue = useVModel(props, 'modelValue', emits, {
-  defaultValue: props.defaultValue,
+const modelValue = useVModel(props as any, 'modelValue', emits as any, {
+  defaultValue: props.defaultValue ?? props.falseValue,
   passive: (props.modelValue === undefined) as false,
-}) as Ref<CheckedState>
+}) as Ref<T | 'indeterminate'>
 
 const disabled = computed(() => checkboxGroupContext?.disabled.value || props.disabled)
 
+const isChecked = computed(() => isEqual(modelValue.value, props.trueValue))
+
 const checkboxState = computed<CheckedState>(() => {
   if (!isNullish(checkboxGroupContext?.modelValue.value)) {
     return isValueEqualOrExist(checkboxGroupContext.modelValue.value, props.value)
   }
   else {
-    return modelValue.value === 'indeterminate' ? 'indeterminate' : modelValue.value
+    if (modelValue.value === 'indeterminate')
+      return 'indeterminate'
+    return isChecked.value
   }
 })
 
@@ -98,7 +112,12 @@ function handleClick() {
     checkboxGroupContext.modelValue.value = modelValueArray
   }
   else {
-    modelValue.value = isIndeterminate(modelValue.value) ? true : !modelValue.value
+    if (modelValue.value === 'indeterminate') {
+      modelValue.value = props.trueValue as T
+    }
+    else {
+      modelValue.value = isChecked.value ? props.falseValue as T : props.trueValue as T
+    }
   }
 }
 

package/src/ColorArea/ColorAreaArea.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@/Primitive'
+
+export interface ColorAreaAreaProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
+import { injectColorAreaRootContext } from './ColorAreaRoot.vue'
+import { linearScale } from './utils'
+
+const props = withDefaults(defineProps<ColorAreaAreaProps>(), {
+  as: 'div',
+})
+
+const rootContext = injectColorAreaRootContext()
+const { primitiveElement, currentElement: areaElement } = usePrimitiveElement()
+
+const isDragging = ref(false)
+
+// Convert pointer position to channel values
+function getValuesFromPointer(event: PointerEvent) {
+  const rect = areaElement.value!.getBoundingClientRect()
+
+  const xInput: [number, number] = [0, rect.width]
+  const xOutput: [number, number] = [rootContext.xRange.value.min, rootContext.xRange.value.max]
+  const xScale = linearScale(xInput, xOutput)
+  const xValue = xScale(event.clientX - rect.left)
+
+  // Y is inverted (top is max, bottom is min for most channels)
+  const yInput: [number, number] = [0, rect.height]
+  const yOutput: [number, number] = [rootContext.yRange.value.max, rootContext.yRange.value.min]
+  const yScale = linearScale(yInput, yOutput)
+  const yValue = yScale(event.clientY - rect.top)
+
+  return { x: xValue, y: yValue }
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (rootContext.disabled.value)
+    return
+
+  const target = event.target as HTMLElement
+  target.setPointerCapture(event.pointerId)
+  event.preventDefault()
+
+  isDragging.value = true
+  const { x, y } = getValuesFromPointer(event)
+  rootContext.updateValues(x, y)
+
+  // Focus the thumb when dragging starts
+  rootContext.thumbRef.value?.focus()
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!isDragging.value || rootContext.disabled.value)
+    return
+
+  const target = event.target as HTMLElement
+  if (target.hasPointerCapture(event.pointerId)) {
+    const { x, y } = getValuesFromPointer(event)
+    rootContext.updateValues(x, y)
+  }
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (!isDragging.value)
+    return
+
+  const target = event.target as HTMLElement
+  target.releasePointerCapture(event.pointerId)
+  isDragging.value = false
+  rootContext.commitValues()
+}
+
+// Keyboard navigation
+function handleKeyDown(event: KeyboardEvent) {
+  if (rootContext.disabled.value)
+    return
+
+  const stepMultiplier = event.shiftKey ? 10 : 1
+  const xStepSize = rootContext.xRange.value.step * stepMultiplier
+  const yStepSize = rootContext.yRange.value.step * stepMultiplier
+
+  let xDelta = 0
+  let yDelta = 0
+
+  switch (event.key) {
+    case 'ArrowLeft':
+      xDelta = -xStepSize
+      break
+    case 'ArrowRight':
+      xDelta = xStepSize
+      break
+    case 'ArrowUp':
+      yDelta = yStepSize
+      break
+    case 'ArrowDown':
+      yDelta = -yStepSize
+      break
+    case 'PageUp':
+      yDelta = yStepSize * 10
+      break
+    case 'PageDown':
+      yDelta = -yStepSize * 10
+      break
+    case 'Home':
+      xDelta = -xStepSize * 10
+      break
+    case 'End':
+      xDelta = xStepSize * 10
+      break
+    default:
+      return
+  }
+
+  event.preventDefault()
+  rootContext.updateValues(
+    rootContext.xValue.value + xDelta,
+    rootContext.yValue.value + yDelta,
+  )
+}
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as-child="asChild"
+    :as="as"
+    role="application"
+    aria-roledescription="Color picker"
+    :aria-disabled="rootContext.disabled.value ? 'true' : undefined"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
+    :style="{
+      touchAction: 'none',
+    }"
+    @keydown="handleKeyDown"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+  >
+    <slot />
+  </Primitive>
+</template>