@sabrenski/spire-ui 0.0.1

package/src/components/Slider/Slider.vue

@@ -0,0 +1,435 @@
+<script setup lang="ts">
+import { computed, ref, onUnmounted } from 'vue'
+import { valueToPercent, getValueFromPointer, getClosestThumb, clamp, snapToStep } from './utils'
+
+export interface SliderProps {
+  /** Current value (number for single, [min, max] tuple for range) */
+  modelValue: number | [number, number]
+  /** Minimum value */
+  min?: number
+  /** Maximum value */
+  max?: number
+  /** Step increment */
+  step?: number
+  /** Disabled state */
+  disabled?: boolean
+  /** Show tooltip while dragging */
+  showTooltip?: boolean
+  /** Show tick marks at each step */
+  showTicks?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showTooltip: false,
+  showTicks: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number | [number, number]): void
+  (e: 'change', value: number | [number, number]): void
+}>()
+
+const trackRef = ref<HTMLDivElement | null>(null)
+const isDragging = ref(false)
+const activeThumb = ref<'min' | 'max' | null>(null)
+
+const isRange = computed(() => Array.isArray(props.modelValue))
+
+const minValue = computed(() => {
+  if (isRange.value) {
+    return (props.modelValue as [number, number])[0]
+  }
+  return props.modelValue as number
+})
+
+const maxValue = computed(() => {
+  if (isRange.value) {
+    return (props.modelValue as [number, number])[1]
+  }
+  return props.modelValue as number
+})
+
+const minPercent = computed(() => {
+  if (isRange.value) {
+    return valueToPercent(minValue.value, props.min, props.max)
+  }
+  return 0
+})
+
+const maxPercent = computed(() => {
+  return valueToPercent(maxValue.value, props.min, props.max)
+})
+
+const rangeStyle = computed(() => {
+  if (isRange.value) {
+    return {
+      left: `${minPercent.value}%`,
+      right: `${100 - maxPercent.value}%`
+    }
+  }
+  return {
+    left: '0%',
+    right: `${100 - maxPercent.value}%`
+  }
+})
+
+const tickPositions = computed(() => {
+  if (!props.showTicks || props.step <= 0) return []
+
+  const ticks: number[] = []
+  const range = props.max - props.min
+  const stepCount = Math.floor(range / props.step)
+
+  if (stepCount > 100 || stepCount < 2) return []
+
+  for (let i = 1; i < stepCount; i++) {
+    const value = props.min + i * props.step
+    ticks.push(valueToPercent(value, props.min, props.max))
+  }
+  return ticks
+})
+
+function emitValue(newMin: number, newMax: number) {
+  if (isRange.value) {
+    emit('update:modelValue', [newMin, newMax])
+  } else {
+    emit('update:modelValue', newMax)
+  }
+}
+
+function emitChange(newMin: number, newMax: number) {
+  if (isRange.value) {
+    emit('change', [newMin, newMax])
+  } else {
+    emit('change', newMax)
+  }
+}
+
+function handlePointerDown(event: PointerEvent, thumb?: 'min' | 'max') {
+  if (props.disabled) return
+  event.preventDefault()
+
+  const track = trackRef.value
+  if (!track) return
+
+  const trackRect = track.getBoundingClientRect()
+  const value = getValueFromPointer(event.clientX, trackRect, props.min, props.max, props.step)
+
+  if (thumb) {
+    activeThumb.value = thumb
+  } else if (isRange.value) {
+    activeThumb.value = getClosestThumb(value, minValue.value, maxValue.value)
+  } else {
+    activeThumb.value = 'max'
+  }
+
+  isDragging.value = true
+  updateValue(value)
+
+  document.addEventListener('pointermove', handlePointerMove)
+  document.addEventListener('pointerup', handlePointerUp)
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!isDragging.value || !trackRef.value) return
+
+  const trackRect = trackRef.value.getBoundingClientRect()
+  const value = getValueFromPointer(event.clientX, trackRect, props.min, props.max, props.step)
+  updateValue(value)
+}
+
+function handlePointerUp() {
+  if (isDragging.value) {
+    emitChange(minValue.value, maxValue.value)
+  }
+
+  isDragging.value = false
+  activeThumb.value = null
+  document.removeEventListener('pointermove', handlePointerMove)
+  document.removeEventListener('pointerup', handlePointerUp)
+}
+
+function updateValue(value: number) {
+  if (isRange.value) {
+    if (activeThumb.value === 'min') {
+      const newMin = clamp(value, props.min, maxValue.value)
+      emitValue(newMin, maxValue.value)
+    } else {
+      const newMax = clamp(value, minValue.value, props.max)
+      emitValue(minValue.value, newMax)
+    }
+  } else {
+    emitValue(props.min, value)
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent, thumb: 'min' | 'max') {
+  if (props.disabled) return
+
+  const currentValue = thumb === 'min' ? minValue.value : maxValue.value
+  let newValue = currentValue
+
+  switch (event.key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      event.preventDefault()
+      newValue = snapToStep(currentValue + props.step, props.step, props.min)
+      break
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      event.preventDefault()
+      newValue = snapToStep(currentValue - props.step, props.step, props.min)
+      break
+    case 'Home':
+      event.preventDefault()
+      newValue = props.min
+      break
+    case 'End':
+      event.preventDefault()
+      newValue = props.max
+      break
+    case 'PageUp':
+      event.preventDefault()
+      newValue = snapToStep(currentValue + props.step * 10, props.step, props.min)
+      break
+    case 'PageDown':
+      event.preventDefault()
+      newValue = snapToStep(currentValue - props.step * 10, props.step, props.min)
+      break
+    default:
+      return
+  }
+
+  if (isRange.value) {
+    if (thumb === 'min') {
+      newValue = clamp(newValue, props.min, maxValue.value)
+      emitValue(newValue, maxValue.value)
+    } else {
+      newValue = clamp(newValue, minValue.value, props.max)
+      emitValue(minValue.value, newValue)
+    }
+  } else {
+    newValue = clamp(newValue, props.min, props.max)
+    emitValue(props.min, newValue)
+  }
+
+  emitChange(minValue.value, maxValue.value)
+}
+
+onUnmounted(() => {
+  document.removeEventListener('pointermove', handlePointerMove)
+  document.removeEventListener('pointerup', handlePointerUp)
+})
+</script>
+
+<template>
+  <div
+    class="ui-slider"
+    :class="[
+      `ui-slider--${size}`,
+      {
+        'ui-slider--disabled': disabled,
+        'ui-slider--dragging': isDragging,
+        'ui-slider--range': isRange
+      }
+    ]"
+  >
+    <div
+      ref="trackRef"
+      class="ui-slider__track"
+      @pointerdown="handlePointerDown($event)"
+    >
+      <div class="ui-slider__range" :style="rangeStyle" />
+
+      <div v-if="showTicks" class="ui-slider__ticks">
+        <span
+          v-for="(pos, i) in tickPositions"
+          :key="i"
+          class="ui-slider__tick"
+          :style="{ left: `${pos}%` }"
+        />
+      </div>
+
+      <div
+        v-if="isRange"
+        class="ui-slider__thumb"
+        :class="{ 'ui-slider__thumb--active': activeThumb === 'min' }"
+        :style="{ left: `${minPercent}%` }"
+        role="slider"
+        tabindex="0"
+        :aria-valuemin="min"
+        :aria-valuemax="maxValue"
+        :aria-valuenow="minValue"
+        :aria-disabled="disabled || undefined"
+        aria-label="Minimum value"
+        @pointerdown.stop="handlePointerDown($event, 'min')"
+        @keydown="handleKeyDown($event, 'min')"
+      >
+        <div v-if="showTooltip && isDragging && activeThumb === 'min'" class="ui-slider__tooltip">
+          {{ minValue }}
+        </div>
+      </div>
+
+      <div
+        class="ui-slider__thumb"
+        :class="{ 'ui-slider__thumb--active': activeThumb === 'max' }"
+        :style="{ left: `${maxPercent}%` }"
+        role="slider"
+        tabindex="0"
+        :aria-valuemin="isRange ? minValue : min"
+        :aria-valuemax="max"
+        :aria-valuenow="maxValue"
+        :aria-disabled="disabled || undefined"
+        :aria-label="isRange ? 'Maximum value' : 'Value'"
+        @pointerdown.stop="handlePointerDown($event, 'max')"
+        @keydown="handleKeyDown($event, 'max')"
+      >
+        <div v-if="showTooltip && isDragging && activeThumb === 'max'" class="ui-slider__tooltip">
+          {{ maxValue }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-slider {
+  position: relative;
+  width: 100%;
+  padding: var(--space-2) 0;
+  touch-action: none;
+  user-select: none;
+}
+
+.ui-slider--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ui-slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--slider-track-height, 6px);
+  background: var(--input-border);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+}
+
+.ui-slider--sm .ui-slider__track {
+  height: 4px;
+}
+
+.ui-slider--lg .ui-slider__track {
+  height: 8px;
+}
+
+.ui-slider__range {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--action-primary);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+}
+
+.ui-slider__ticks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.ui-slider__tick {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: calc(100% + 6px);
+  background: var(--border-default);
+  transform: translate(-50%, -50%);
+  border-radius: var(--radius-full);
+}
+
+.ui-slider--sm .ui-slider__tick {
+  height: calc(100% + 4px);
+}
+
+.ui-slider--lg .ui-slider__tick {
+  height: calc(100% + 8px);
+}
+
+.ui-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--slider-thumb-size, 18px);
+  height: var(--slider-thumb-size, 18px);
+  background: var(--bg-primary);
+  border: 2px solid var(--action-primary);
+  border-radius: var(--radius-full);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  transition: box-shadow var(--duration-fast) var(--ease-default);
+  z-index: 1;
+}
+
+.ui-slider--sm .ui-slider__thumb {
+  width: 14px;
+  height: 14px;
+}
+
+.ui-slider--lg .ui-slider__thumb {
+  width: 22px;
+  height: 22px;
+}
+
+.ui-slider__thumb:hover {
+  box-shadow: 0 0 0 4px oklch(from var(--action-primary) l c h / 0.15);
+}
+
+.ui-slider__thumb:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px oklch(from var(--action-primary) l c h / 0.25);
+}
+
+.ui-slider__thumb--active {
+  cursor: grabbing;
+  z-index: 2;
+  box-shadow: 0 0 0 6px oklch(from var(--action-primary) l c h / 0.2);
+}
+
+.ui-slider--dragging .ui-slider__thumb {
+  cursor: grabbing;
+}
+
+.ui-slider__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--space-1) var(--space-2);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  white-space: nowrap;
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+}
+
+.ui-slider__tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--bg-elevated);
+}
+</style>

package/src/components/Slider/index.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.vue'
+export type { SliderProps } from './Slider.vue'

package/src/components/Slider/utils.ts

@@ -0,0 +1,91 @@
+/**
+ * Converts a value to a percentage position on the slider track.
+ *
+ * @param value - The current value
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @returns Percentage (0-100)
+ */
+export function valueToPercent(value: number, min: number, max: number): number {
+  if (max === min) return 0
+  return ((value - min) / (max - min)) * 100
+}
+
+/**
+ * Converts a percentage position to a value.
+ *
+ * @param percent - Percentage (0-100)
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @returns The calculated value
+ */
+export function percentToValue(percent: number, min: number, max: number): number {
+  return (percent / 100) * (max - min) + min
+}
+
+/**
+ * Snaps a value to the nearest step increment.
+ *
+ * @param value - The value to snap
+ * @param step - Step increment
+ * @param min - Minimum value (used as base for snapping)
+ * @returns Snapped value
+ */
+export function snapToStep(value: number, step: number, min: number): number {
+  const offset = value - min
+  const snapped = Math.round(offset / step) * step
+  return snapped + min
+}
+
+/**
+ * Clamps a value between min and max.
+ *
+ * @param value - The value to clamp
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Clamped value
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+/**
+ * Calculates the value from a pointer position on the track.
+ *
+ * @param clientX - Pointer X position
+ * @param trackRect - Track element's bounding rect
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param step - Step increment
+ * @returns Calculated and snapped value
+ */
+export function getValueFromPointer(
+  clientX: number,
+  trackRect: DOMRect,
+  min: number,
+  max: number,
+  step: number
+): number {
+  const percent = ((clientX - trackRect.left) / trackRect.width) * 100
+  const clampedPercent = clamp(percent, 0, 100)
+  const rawValue = percentToValue(clampedPercent, min, max)
+  return clamp(snapToStep(rawValue, step, min), min, max)
+}
+
+/**
+ * Determines which thumb is closer to a given value in range mode.
+ *
+ * @param value - The target value
+ * @param minValue - Current min thumb value
+ * @param maxValue - Current max thumb value
+ * @returns 'min' or 'max'
+ */
+export function getClosestThumb(
+  value: number,
+  minValue: number,
+  maxValue: number
+): 'min' | 'max' {
+  const distToMin = Math.abs(value - minValue)
+  const distToMax = Math.abs(value - maxValue)
+  return distToMin <= distToMax ? 'min' : 'max'
+}

package/src/components/Spinner/Spinner.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Spinner from './Spinner.vue'
+
+describe('Spinner', () => {
+  it('renders 8 dots', () => {
+    const wrapper = mount(Spinner)
+    const dots = wrapper.findAll('.ui-spinner__dot')
+    expect(dots).toHaveLength(8)
+  })
+
+  it('has role="status" for accessibility', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.attributes('role')).toBe('status')
+  })
+
+  it('has default aria-label "Loading"', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.attributes('aria-label')).toBe('Loading')
+  })
+
+  it('accepts custom label', () => {
+    const wrapper = mount(Spinner, {
+      props: { label: 'Processing request' }
+    })
+    expect(wrapper.attributes('aria-label')).toBe('Processing request')
+    expect(wrapper.find('.ui-spinner__sr-only').text()).toBe('Processing request')
+  })
+
+  it('applies default size (md)', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.attributes('style')).toContain('--spinner-size: var(--spinner-md)')
+  })
+
+  it('applies predefined sizes correctly', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+    for (const size of sizes) {
+      const wrapper = mount(Spinner, { props: { size } })
+      expect(wrapper.attributes('style')).toContain(`--spinner-size: var(--spinner-${size})`)
+    }
+  })
+
+  it('accepts custom size values', () => {
+    const wrapper = mount(Spinner, {
+      props: { size: '4rem' }
+    })
+    expect(wrapper.attributes('style')).toContain('--spinner-size: 4rem')
+  })
+
+  it('applies default speed (0.9s)', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.attributes('style')).toContain('--spinner-speed: 0.9s')
+  })
+
+  it('accepts custom speed', () => {
+    const wrapper = mount(Spinner, {
+      props: { speed: 1.5 }
+    })
+    expect(wrapper.attributes('style')).toContain('--spinner-speed: 1.5s')
+  })
+
+  it('has screen reader only text', () => {
+    const wrapper = mount(Spinner)
+    const srOnly = wrapper.find('.ui-spinner__sr-only')
+    expect(srOnly.exists()).toBe(true)
+    expect(srOnly.text()).toBe('Loading')
+  })
+
+  it('applies ui-spinner class', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.classes()).toContain('ui-spinner')
+  })
+
+  it('uses inline-flex display for inline usage', () => {
+    const wrapper = mount(Spinner)
+    expect(wrapper.classes()).toContain('ui-spinner')
+  })
+})