@sabrenski/spire-ui 0.0.1

package/src/components/Rating/Rating.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import { useInternalIcon } from '../../config/icons'
+
+const StarIcon = useInternalIcon('star')
+const StarFilledIcon = useInternalIcon('starFilled')
+
+export interface RatingProps {
+  /** Current rating value (0 to max) */
+  modelValue: number
+  /** Maximum rating value */
+  max?: number
+  /** Read-only mode */
+  readonly?: boolean
+  /** Enable half-star precision */
+  allowHalf?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Accessible label */
+  label?: string
+}
+
+const props = withDefaults(defineProps<RatingProps>(), {
+  max: 5,
+  readonly: false,
+  allowHalf: false,
+  size: 'md',
+  label: 'Rating'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'hover', value: number | null): void
+}>()
+
+const hoverValue = ref<number | null>(null)
+
+const displayValue = computed(() => {
+  return hoverValue.value ?? props.modelValue
+})
+
+function getStarState(index: number): 'full' | 'half' | 'empty' {
+  const value = displayValue.value
+  if (value >= index) return 'full'
+  if (props.allowHalf && value >= index - 0.5) return 'half'
+  return 'empty'
+}
+
+function handleMouseMove(event: MouseEvent, index: number) {
+  if (props.readonly) return
+
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  const offsetX = event.clientX - rect.left
+  const isLeftHalf = offsetX < rect.width / 2
+
+  let value: number
+  if (props.allowHalf && isLeftHalf) {
+    value = index - 0.5
+  } else {
+    value = index
+  }
+
+  hoverValue.value = value
+  emit('hover', value)
+}
+
+function handleMouseLeave() {
+  hoverValue.value = null
+  emit('hover', null)
+}
+
+function handleClick(event: MouseEvent, index: number) {
+  if (props.readonly) return
+
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  const offsetX = event.clientX - rect.left
+  const isLeftHalf = offsetX < rect.width / 2
+
+  let value: number
+  if (props.allowHalf && isLeftHalf) {
+    value = index - 0.5
+  } else {
+    value = index
+  }
+
+  emit('update:modelValue', value)
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (props.readonly) return
+
+  const step = props.allowHalf ? 0.5 : 1
+  let newValue = props.modelValue
+
+  switch (event.key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      event.preventDefault()
+      newValue = Math.min(props.modelValue + step, props.max)
+      break
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      event.preventDefault()
+      newValue = Math.max(props.modelValue - step, 0)
+      break
+    case 'Home':
+      event.preventDefault()
+      newValue = 0
+      break
+    case 'End':
+      event.preventDefault()
+      newValue = props.max
+      break
+    default:
+      return
+  }
+
+  if (newValue !== props.modelValue) {
+    emit('update:modelValue', newValue)
+  }
+}
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'sm': return '16px'
+    case 'lg': return '28px'
+    default: return '22px'
+  }
+})
+</script>
+
+<template>
+  <div
+    class="ui-rating"
+    :class="[
+      `ui-rating--${size}`,
+      { 'ui-rating--readonly': readonly }
+    ]"
+    role="slider"
+    :aria-label="label"
+    :aria-valuemin="0"
+    :aria-valuemax="max"
+    :aria-valuenow="modelValue"
+    :aria-readonly="readonly || undefined"
+    :tabindex="readonly ? -1 : 0"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeyDown"
+  >
+    <span
+      v-for="index in max"
+      :key="index"
+      class="ui-rating__star"
+      :class="[`ui-rating__star--${getStarState(index)}`]"
+      @mousemove="handleMouseMove($event, index)"
+      @click="handleClick($event, index)"
+    >
+      <Icon
+        :icon="StarIcon"
+        :size="iconSize"
+        class="ui-rating__icon ui-rating__icon--empty"
+      />
+      <Icon
+        :icon="StarFilledIcon"
+        :size="iconSize"
+        class="ui-rating__icon ui-rating__icon--filled"
+      />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.ui-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  user-select: none;
+}
+
+.ui-rating:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.ui-rating--readonly {
+  pointer-events: none;
+}
+
+.ui-rating__star {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+
+.ui-rating--readonly .ui-rating__star {
+  cursor: default;
+}
+
+.ui-rating__star:hover {
+  transform: scale(1.1);
+}
+
+.ui-rating--readonly .ui-rating__star:hover {
+  transform: none;
+}
+
+.ui-rating__icon {
+  display: block;
+}
+
+.ui-rating__icon--empty {
+  color: var(--input-border);
+}
+
+.ui-rating__icon--filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--status-warning);
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path var(--duration-fast) var(--ease-default);
+}
+
+.ui-rating__star--full .ui-rating__icon--filled {
+  clip-path: inset(0 0 0 0);
+}
+
+.ui-rating__star--half .ui-rating__icon--filled {
+  clip-path: inset(0 50% 0 0);
+}
+
+.ui-rating__star--empty .ui-rating__icon--filled {
+  clip-path: inset(0 100% 0 0);
+}
+
+.ui-rating--sm {
+  gap: 2px;
+}
+
+.ui-rating--lg {
+  gap: var(--space-2);
+}
+</style>

package/src/components/Rating/index.ts

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

package/src/components/SegmentedControl/SegmentedControl.test.ts

@@ -0,0 +1,292 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SegmentedControl from './SegmentedControl.vue'
+
+const defaultOptions = [
+  { label: 'Day', value: 'day' },
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' }
+]
+
+describe('SegmentedControl', () => {
+  describe('Rendering', () => {
+    it('renders as a radiogroup', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
+    })
+
+    it('renders all options', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      const items = wrapper.findAll('[role="radio"]')
+      expect(items).toHaveLength(3)
+    })
+
+    it('renders option labels', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      expect(wrapper.text()).toContain('Day')
+      expect(wrapper.text()).toContain('Week')
+      expect(wrapper.text()).toContain('Month')
+    })
+
+    it('renders the glider element', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      expect(wrapper.find('.ui-segmented__glider').exists()).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('marks selected option with aria-checked', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'week' }
+      })
+      const items = wrapper.findAll('[role="radio"]')
+      expect(items[0].attributes('aria-checked')).toBe('false')
+      expect(items[1].attributes('aria-checked')).toBe('true')
+      expect(items[2].attributes('aria-checked')).toBe('false')
+    })
+
+    it('applies selected class to active option', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'week' }
+      })
+      const items = wrapper.findAll('.ui-segmented__item')
+      expect(items[1].classes()).toContain('ui-segmented__item--selected')
+    })
+
+    it('emits update:modelValue on click', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[2].trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['month'])
+    })
+
+    it('emits change event on click', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[1].trigger('click')
+      expect(wrapper.emitted('change')?.[0]).toEqual(['week'])
+    })
+  })
+
+  describe('Size variants', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(SegmentedControl, {
+          props: { options: defaultOptions, size }
+        })
+        expect(wrapper.find('.ui-segmented').classes()).toContain(`ui-segmented--${size}`)
+      })
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      expect(wrapper.find('.ui-segmented').classes()).toContain('ui-segmented--md')
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled class when disabled', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, disabled: true }
+      })
+      expect(wrapper.find('.ui-segmented').classes()).toContain('ui-segmented--disabled')
+    })
+
+    it('sets aria-disabled on container', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, disabled: true }
+      })
+      expect(wrapper.find('[role="radiogroup"]').attributes('aria-disabled')).toBe('true')
+    })
+
+    it('disables all buttons when control is disabled', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, disabled: true }
+      })
+      const buttons = wrapper.findAll('button')
+      buttons.forEach(btn => {
+        expect(btn.attributes('disabled')).toBeDefined()
+      })
+    })
+
+    it('does not emit events when disabled', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day', disabled: true }
+      })
+      await wrapper.findAll('[role="radio"]')[1].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Individual option disabled', () => {
+    const optionsWithDisabled = [
+      { label: 'Day', value: 'day' },
+      { label: 'Week', value: 'week', disabled: true },
+      { label: 'Month', value: 'month' }
+    ]
+
+    it('disables individual option', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: optionsWithDisabled }
+      })
+      const items = wrapper.findAll('button')
+      expect(items[0].attributes('disabled')).toBeUndefined()
+      expect(items[1].attributes('disabled')).toBeDefined()
+      expect(items[2].attributes('disabled')).toBeUndefined()
+    })
+
+    it('applies disabled class to disabled option', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: optionsWithDisabled }
+      })
+      const items = wrapper.findAll('.ui-segmented__item')
+      expect(items[1].classes()).toContain('ui-segmented__item--disabled')
+    })
+
+    it('does not emit when clicking disabled option', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: optionsWithDisabled, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[1].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('moves to next option on ArrowRight', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[0].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['week'])
+    })
+
+    it('moves to previous option on ArrowLeft', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'week' }
+      })
+      await wrapper.findAll('[role="radio"]')[1].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['day'])
+    })
+
+    it('wraps around from last to first on ArrowRight', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'month' }
+      })
+      await wrapper.findAll('[role="radio"]')[2].trigger('keydown', { key: 'ArrowRight' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['day'])
+    })
+
+    it('wraps around from first to last on ArrowLeft', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[0].trigger('keydown', { key: 'ArrowLeft' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['month'])
+    })
+
+    it('moves to first option on Home', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'month' }
+      })
+      await wrapper.findAll('[role="radio"]')[2].trigger('keydown', { key: 'Home' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['day'])
+    })
+
+    it('moves to last option on End', async () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      await wrapper.findAll('[role="radio"]')[0].trigger('keydown', { key: 'End' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['month'])
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has aria-label when label prop provided', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, label: 'Select time range' }
+      })
+      expect(wrapper.find('[role="radiogroup"]').attributes('aria-label')).toBe('Select time range')
+    })
+
+    it('auto-generates unique id', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      expect(wrapper.find('[role="radiogroup"]').attributes('id')).toMatch(/^segmented-/)
+    })
+
+    it('uses provided id', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, id: 'custom-segmented' }
+      })
+      expect(wrapper.find('[role="radiogroup"]').attributes('id')).toBe('custom-segmented')
+    })
+
+    it('selected item has tabindex 0, others have -1', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'week' }
+      })
+      const items = wrapper.findAll('[role="radio"]')
+      expect(items[0].attributes('tabindex')).toBe('-1')
+      expect(items[1].attributes('tabindex')).toBe('0')
+      expect(items[2].attributes('tabindex')).toBe('-1')
+    })
+
+    it('glider has aria-hidden', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, modelValue: 'day' }
+      })
+      expect(wrapper.find('.ui-segmented__glider').attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Form submission', () => {
+    it('does not render hidden input by default', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions }
+      })
+      expect(wrapper.find('input[type="hidden"]').exists()).toBe(false)
+    })
+
+    it('renders hidden input when name prop provided', () => {
+      const wrapper = mount(SegmentedControl, {
+        props: { options: defaultOptions, name: 'time_range', modelValue: 'week' }
+      })
+      const input = wrapper.find('input[type="hidden"]')
+      expect(input.exists()).toBe(true)
+      expect(input.attributes('name')).toBe('time_range')
+      expect(input.attributes('value')).toBe('week')
+    })
+  })
+
+  describe('Value types', () => {
+    it('works with number values', async () => {
+      const numberOptions = [
+        { label: '1', value: 1 },
+        { label: '5', value: 5 },
+        { label: '10', value: 10 }
+      ]
+      const wrapper = mount(SegmentedControl, {
+        props: { options: numberOptions, modelValue: 1 }
+      })
+      await wrapper.findAll('[role="radio"]')[2].trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([10])
+    })
+  })
+})