base-ui-vue 0.1.0 → 0.2.0

package/src/slider/thumb/prehydrationScript.template.js

@@ -0,0 +1,69 @@
+(function prehydration() {
+  const firstThumb = document.currentScript?.parentElement
+  if (!firstThumb) {
+    return
+  }
+
+  const control = firstThumb.closest('[data-base-ui-slider-control]')
+  if (!control) {
+    return
+  }
+
+  const indicator = control.querySelector('[data-base-ui-slider-indicator]')
+  const controlRect = control.getBoundingClientRect()
+  const vertical = control.getAttribute('data-orientation') === 'vertical'
+  const side = vertical ? 'height' : 'width'
+  const inputElems = control.querySelectorAll('input[type="range"]')
+  const range = inputElems.length > 1
+  const lastIndex = inputElems.length - 1
+
+  let startPosition = null
+  let relativeSize = null
+
+  for (let i = 0; i < inputElems.length; i += 1) {
+    const input = inputElems[i]
+
+    const value = Number.parseFloat(input.getAttribute('value') ?? '')
+
+    if (Number.isNaN(value)) {
+      return
+    }
+
+    const thumb = input.parentElement
+    if (!thumb) {
+      return
+    }
+
+    const max = Number.parseFloat(input.getAttribute('max') ?? '100')
+    const min = Number.parseFloat(input.getAttribute('min') ?? '0')
+
+    const thumbRect = thumb?.getBoundingClientRect()
+
+    const controlSize = controlRect[side] - thumbRect[side]
+    const thumbValuePercent = max === min ? 0 : ((value - min) * 100) / (max - min)
+    const thumbOffsetFromControlEdge
+      = thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100
+    const percent = (thumbOffsetFromControlEdge / controlRect[side]) * 100
+
+    if (Number.isFinite(percent)) {
+      thumb.style.setProperty(`--position`, `${percent}%`)
+      thumb.style.removeProperty('visibility')
+
+      if (indicator) {
+        if (i === 0) {
+          startPosition = percent
+          indicator.style.setProperty('--start-position', `${percent}%`)
+          if (!range) {
+            indicator.style.removeProperty('visibility')
+          }
+        }
+        else if (i === lastIndex) {
+          relativeSize = percent - (startPosition ?? 0)
+          indicator.style.setProperty('--end-position', `${percent}%`)
+          indicator.style.setProperty('--relative-size', `${relativeSize}%`)
+          indicator.style.removeProperty('visibility')
+        }
+      }
+    }
+  }
+})()

package/src/slider/track/SliderTrack.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { SliderRootState } from '../root/SliderRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useSliderRootContext } from '../root/SliderRootContext'
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface SliderTrackState extends SliderRootState {}
+export interface SliderTrackProps extends BaseUIComponentProps<SliderTrackState> {}
+
+defineOptions({
+  name: 'SliderTrack',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SliderTrackProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const rootContext = useSliderRootContext()
+
+const trackProps = computed(() => mergeProps(
+  attrs as Record<string, unknown>,
+  {
+    style: {
+      position: 'relative',
+    },
+  },
+))
+
+const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+  componentProps: props,
+  state: rootContext.state,
+  props: trackProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: sliderStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="rootContext.state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot />
+  </component>
+</template>

package/src/slider/track/SliderTrackDataAttributes.ts

@@ -0,0 +1,10 @@
+export enum SliderTrackDataAttributes {
+  dragging = 'data-dragging',
+  orientation = 'data-orientation',
+  disabled = 'data-disabled',
+  valid = 'data-valid',
+  invalid = 'data-invalid',
+  touched = 'data-touched',
+  dirty = 'data-dirty',
+  focused = 'data-focused',
+}

package/src/slider/utils/asc.ts

@@ -0,0 +1,3 @@
+export function asc(a: number, b: number): number {
+  return a - b
+}

package/src/slider/utils/getMidpoint.ts

@@ -0,0 +1,9 @@
+import type { Coords } from '../../floating-ui-vue/types'
+
+export function getMidpoint(element: HTMLElement): Coords {
+  const rect = element.getBoundingClientRect()
+  return {
+    x: (rect.left + rect.right) / 2,
+    y: (rect.top + rect.bottom) / 2,
+  }
+}

package/src/slider/utils/getPushedThumbValues.ts

@@ -0,0 +1,68 @@
+import { clamp } from '../../utils/clamp'
+
+interface GetPushedThumbValuesParams {
+  values: readonly number[]
+  index: number
+  nextValue: number
+  min: number
+  max: number
+  step: number
+  minStepsBetweenValues: number
+  initialValues?: readonly number[] | undefined
+}
+
+export function getPushedThumbValues({
+  values,
+  index,
+  nextValue,
+  min,
+  max,
+  step,
+  minStepsBetweenValues,
+  initialValues,
+}: GetPushedThumbValuesParams): number[] {
+  if (values.length === 0) {
+    return []
+  }
+
+  const nextValues = values.slice()
+  const minValueDifference = step * minStepsBetweenValues
+  const lastIndex = nextValues.length - 1
+  const baseInitialValues = initialValues ?? values
+
+  const indexMin = min + index * minValueDifference
+  const indexMax = max - (lastIndex - index) * minValueDifference
+  nextValues[index] = clamp(nextValue, indexMin, indexMax)
+
+  for (let i = index + 1; i <= lastIndex; i += 1) {
+    const minAllowed = nextValues[i - 1] + minValueDifference
+    const maxAllowed = max - (lastIndex - i) * minValueDifference
+    const initialValue = baseInitialValues[i] ?? nextValues[i]
+    let candidate = Math.max(nextValues[i], minAllowed)
+
+    if (initialValue < candidate) {
+      candidate = Math.max(initialValue, minAllowed)
+    }
+
+    nextValues[i] = clamp(candidate, minAllowed, maxAllowed)
+  }
+
+  for (let i = index - 1; i >= 0; i -= 1) {
+    const maxAllowed = nextValues[i + 1] - minValueDifference
+    const minAllowed = min + i * minValueDifference
+    const initialValue = baseInitialValues[i] ?? nextValues[i]
+    let candidate = Math.min(nextValues[i], maxAllowed)
+
+    if (initialValue > candidate) {
+      candidate = Math.min(initialValue, maxAllowed)
+    }
+
+    nextValues[i] = clamp(candidate, minAllowed, maxAllowed)
+  }
+
+  for (let i = 0; i <= lastIndex; i += 1) {
+    nextValues[i] = Number(nextValues[i].toFixed(12))
+  }
+
+  return nextValues
+}

package/src/slider/utils/getSliderValue.ts

@@ -0,0 +1,25 @@
+import { clamp } from '../../utils/clamp'
+import { replaceArrayItemAtIndex } from './replaceArrayItemAtIndex'
+
+export function getSliderValue(
+  valueInput: number,
+  index: number,
+  min: number,
+  max: number,
+  range: boolean,
+  values: readonly number[],
+): number | number[] {
+  let newValue: number | number[] = valueInput
+
+  newValue = clamp(newValue, min, max)
+
+  if (range) {
+    newValue = replaceArrayItemAtIndex(
+      values,
+      index,
+      clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity),
+    )
+  }
+
+  return newValue
+}

package/src/slider/utils/replaceArrayItemAtIndex.ts

@@ -0,0 +1,15 @@
+import { asc } from './asc'
+
+export function replaceArrayItemAtIndex(
+  array: readonly number[],
+  index: number,
+  newValue: number,
+): number[] {
+  if (!Number.isInteger(index) || index < 0 || index >= array.length) {
+    throw new RangeError(`replaceArrayItemAtIndex index out of bounds: ${index}`)
+  }
+
+  const output = array.slice()
+  output[index] = newValue
+  return output.sort(asc)
+}

package/src/slider/utils/resolveThumbCollision.ts

@@ -0,0 +1,177 @@
+import { clamp } from '../../utils/clamp'
+import { getPushedThumbValues } from './getPushedThumbValues'
+
+export interface ResolveThumbCollisionParams {
+  behavior: 'push' | 'swap' | 'none'
+  values: readonly number[]
+  currentValues?: readonly number[] | null | undefined
+  initialValues?: readonly number[] | null | undefined
+  pressedIndex: number
+  nextValue: number
+  min: number
+  max: number
+  step: number
+  minStepsBetweenValues: number
+}
+
+export interface ResolveThumbCollisionResult {
+  value: number | number[]
+  thumbIndex: number
+  didSwap: boolean
+}
+
+export function resolveThumbCollision({
+  behavior,
+  values,
+  currentValues,
+  initialValues,
+  pressedIndex,
+  nextValue,
+  min,
+  max,
+  step,
+  minStepsBetweenValues,
+}: ResolveThumbCollisionParams): ResolveThumbCollisionResult {
+  const activeValues = currentValues ?? values
+  const baselineValues = initialValues ?? values
+  const range = activeValues.length > 1
+
+  if (!range) {
+    return {
+      value: nextValue,
+      thumbIndex: 0,
+      didSwap: false,
+    }
+  }
+
+  const minValueDifference = step * minStepsBetweenValues
+
+  switch (behavior) {
+    case 'swap': {
+      const pressedInitialValue = activeValues[pressedIndex]
+      const epsilon = 1e-7
+      const candidateValues = activeValues.slice()
+      const previousNeighbor = candidateValues[pressedIndex - 1]
+      const nextNeighbor = candidateValues[pressedIndex + 1]
+
+      const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min
+      const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max
+
+      const constrainedValue = clamp(nextValue, lowerBound, upperBound)
+      const pressedValueAfterClamp = Number(constrainedValue.toFixed(12))
+      candidateValues[pressedIndex] = pressedValueAfterClamp
+
+      const movingForward = nextValue > pressedInitialValue
+      const movingBackward = nextValue < pressedInitialValue
+
+      const shouldSwapForward
+        = movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon
+      const shouldSwapBackward
+        = movingBackward && previousNeighbor != null && nextValue <= previousNeighbor + epsilon
+
+      if (!shouldSwapForward && !shouldSwapBackward) {
+        return {
+          value: candidateValues,
+          thumbIndex: pressedIndex,
+          didSwap: false,
+        }
+      }
+
+      const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1
+
+      const initialValuesForPush = candidateValues.map((_, index) => {
+        if (index === pressedIndex) {
+          return pressedValueAfterClamp
+        }
+
+        const baseline = baselineValues[index]
+        if (baseline != null) {
+          return baseline
+        }
+
+        return activeValues[index]
+      })
+
+      let nextValueForTarget = nextValue
+      if (shouldSwapForward) {
+        nextValueForTarget = Math.max(nextValue, candidateValues[targetIndex])
+      }
+      else {
+        nextValueForTarget = Math.min(nextValue, candidateValues[targetIndex])
+      }
+
+      const adjustedValues = getPushedThumbValues({
+        values: candidateValues,
+        index: targetIndex,
+        nextValue: nextValueForTarget,
+        min,
+        max,
+        step,
+        minStepsBetweenValues,
+        initialValues: initialValuesForPush,
+      })
+
+      const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1
+
+      if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
+        const previousValue = adjustedValues[neighborIndex - 1]
+        const nextValueAfter = adjustedValues[neighborIndex + 1]
+
+        let neighborLowerBound = previousValue != null ? previousValue + minValueDifference : min
+        neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference)
+
+        let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max
+        neighborUpperBound = Math.min(
+          neighborUpperBound,
+          max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference,
+        )
+
+        const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound)
+        adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12))
+      }
+
+      return {
+        value: adjustedValues,
+        thumbIndex: targetIndex,
+        didSwap: true,
+      }
+    }
+
+    case 'push': {
+      const nextValues = getPushedThumbValues({
+        values: activeValues,
+        index: pressedIndex,
+        nextValue,
+        min,
+        max,
+        step,
+        minStepsBetweenValues,
+      })
+
+      return {
+        value: nextValues,
+        thumbIndex: pressedIndex,
+        didSwap: false,
+      }
+    }
+
+    case 'none':
+    default: {
+      const candidateValues = activeValues.slice()
+      const previousNeighbor = candidateValues[pressedIndex - 1]
+      const nextNeighbor = candidateValues[pressedIndex + 1]
+
+      const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min
+      const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max
+
+      const constrainedValue = clamp(nextValue, lowerBound, upperBound)
+      candidateValues[pressedIndex] = Number(constrainedValue.toFixed(12))
+
+      return {
+        value: candidateValues,
+        thumbIndex: pressedIndex,
+        didSwap: false,
+      }
+    }
+  }
+}

package/src/slider/utils/roundValueToStep.ts

@@ -0,0 +1,19 @@
+function getDecimalPrecision(num: number) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-')
+    const mantissaDecimalPart = parts[0].split('.')[1]
+    return (mantissaDecimalPart ? mantissaDecimalPart.length : 0) + Number.parseInt(parts[1], 10)
+  }
+
+  const decimalPart = num.toString().split('.')[1]
+  return decimalPart ? decimalPart.length : 0
+}
+
+export function roundValueToStep(value: number, step: number, min: number) {
+  if (!Number.isFinite(step) || step <= 0) {
+    return value
+  }
+
+  const nearest = Math.round((value - min) / step) * step + min
+  return Number(nearest.toFixed(getDecimalPrecision(step)))
+}

package/src/slider/utils/test-utils.ts

@@ -0,0 +1,25 @@
+type Touches = Array<Pick<Touch, 'identifier' | 'clientX' | 'clientY'>>
+
+export function createTouches(touches: Touches) {
+  return {
+    changedTouches: touches.map(touch =>
+      new Touch({
+        target: document.body,
+        ...touch,
+      })),
+  }
+}
+
+export function getHorizontalSliderRect(width = 100) {
+  return {
+    width,
+    height: 10,
+    bottom: 10,
+    left: 0,
+    x: 0,
+    y: 0,
+    top: 0,
+    right: width,
+    toJSON() {},
+  }
+}

package/src/slider/utils/validateMinimumDistance.ts

@@ -0,0 +1,20 @@
+export function validateMinimumDistance(
+  values: number | readonly number[],
+  step: number,
+  minStepsBetweenValues: number,
+) {
+  if (!Array.isArray(values)) {
+    return true
+  }
+
+  const distances = values.reduce((acc: number[], val, index, vals) => {
+    if (index === vals.length - 1) {
+      return acc
+    }
+
+    acc.push(Math.abs(val - vals[index + 1]))
+    return acc
+  }, [])
+
+  return Math.min(...distances) >= step * minStepsBetweenValues
+}

package/src/slider/utils/valueArrayToPercentages.ts

@@ -0,0 +1,10 @@
+import { clamp } from '../../utils/clamp'
+import { valueToPercent } from '../../utils/valueToPercent'
+
+export function valueArrayToPercentages(values: number[], min: number, max: number): number[] {
+  const output: number[] = []
+  for (let i = 0; i < values.length; i += 1) {
+    output.push(clamp(valueToPercent(values[i], min, max), 0, 100))
+  }
+  return output
+}

package/src/slider/value/SliderValue.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { SliderRootState } from '../root/SliderRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { formatNumber } from '../../utils/formatNumber'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useSliderRootContext } from '../root/SliderRootContext'
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface SliderValueState extends SliderRootState {}
+export interface SliderValueProps extends BaseUIComponentProps<SliderValueState> {
+  ariaLive?: 'off' | 'polite' | 'assertive'
+}
+
+/**
+ * Displays the current value of the slider as text.
+ * Renders an `<output>` element.
+ *
+ * Documentation: [Base UI Slider](https://baseui-vue.com/docs/components/slider)
+ */
+defineOptions({
+  name: 'SliderValue',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SliderValueProps>(), {
+  as: 'output',
+  ariaLive: 'off',
+})
+
+const attrs = useAttrs()
+const rootContext = useSliderRootContext()
+
+const outputFor = computed(() => {
+  let htmlFor = ''
+  for (const thumbMetadata of rootContext.thumbMap.value.values()) {
+    if (thumbMetadata?.inputId) {
+      htmlFor += `${thumbMetadata.inputId} `
+    }
+  }
+
+  return htmlFor.trim() === '' ? undefined : htmlFor.trim()
+})
+
+const formattedValues = computed(() =>
+  rootContext.values.value.map(value =>
+    formatNumber(value, rootContext.locale.value, rootContext.formatOptionsRef.value),
+  ))
+
+const defaultDisplayValue = computed(() =>
+  rootContext.values.value
+    .map((value, index) => formattedValues.value[index] || String(value))
+    .join(' – '))
+
+const valueProps = computed(() => mergeProps(
+  attrs as Record<string, unknown>,
+  {
+    'aria-live': props.ariaLive,
+    'for': outputFor.value,
+  },
+))
+
+const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+  componentProps: props,
+  state: rootContext.state,
+  props: valueProps,
+  defaultTagName: 'output',
+  stateAttributesMapping: sliderStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot
+    v-if="renderless"
+    :ref="renderRef"
+    :props="mergedProps"
+    :state="rootContext.state"
+    :formatted-values="formattedValues"
+    :values="rootContext.values.value"
+  />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot
+      :formatted-values="formattedValues"
+      :values="rootContext.values.value"
+    >
+      {{ defaultDisplayValue }}
+    </slot>
+  </component>
+</template>

package/src/slider/value/SliderValueDataAttributes.ts

@@ -0,0 +1,35 @@
+export enum SliderValueDataAttributes {
+  /**
+   * Present while the user is dragging.
+   */
+  dragging = 'data-dragging',
+  /**
+   * Indicates the orientation of the slider.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+  /**
+   * Present when the slider is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Present when the slider is in valid state (when wrapped in Field.Root).
+   */
+  valid = 'data-valid',
+  /**
+   * Present when the slider is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = 'data-invalid',
+  /**
+   * Present when the slider has been touched (when wrapped in Field.Root).
+   */
+  touched = 'data-touched',
+  /**
+   * Present when the slider's value has changed (when wrapped in Field.Root).
+   */
+  dirty = 'data-dirty',
+  /**
+   * Present when the slider is focused (when wrapped in Field.Root).
+   */
+  focused = 'data-focused',
+}

package/src/switch/index.ts

@@ -0,0 +1,14 @@
+export { default as SwitchRoot } from './root/SwitchRoot.vue'
+export type {
+  SwitchRootChangeEventDetails,
+  SwitchRootChangeEventReason,
+  SwitchRootProps,
+  SwitchRootState,
+} from './root/SwitchRoot.vue'
+export { switchRootContextKey, useSwitchRootContext } from './root/SwitchRootContext'
+export type { SwitchRootContext } from './root/SwitchRootContext'
+export { SwitchRootDataAttributes } from './root/SwitchRootDataAttributes'
+
+export { default as SwitchThumb } from './thumb/SwitchThumb.vue'
+export type { SwitchThumbProps, SwitchThumbState } from './thumb/SwitchThumb.vue'
+export { SwitchThumbDataAttributes } from './thumb/SwitchThumbDataAttributes'