@sabrenski/spire-ui 0.0.1

package/src/components/TreeView/TreeView.test.ts

@@ -0,0 +1,357 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import TreeView from './TreeView.vue'
+import TreeViewItem from './TreeViewItem.vue'
+import type { TreeNode } from './keys'
+
+const sampleData: TreeNode[] = [
+  {
+    id: 'root-1',
+    label: 'Root 1',
+    children: [
+      { id: 'child-1-1', label: 'Child 1.1' },
+      {
+        id: 'child-1-2',
+        label: 'Child 1.2',
+        children: [
+          { id: 'grandchild-1-2-1', label: 'Grandchild 1.2.1' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'root-2',
+    label: 'Root 2',
+    disabled: true
+  },
+  {
+    id: 'root-3',
+    label: 'Root 3'
+  }
+]
+
+function createTreeView(props: Record<string, unknown> = {}, data = sampleData) {
+  return mount(TreeView, {
+    props: {
+      data,
+      ...props
+    },
+    slots: {
+      default: () => data.map(node => h(TreeViewItem, { key: node.id, node }))
+    }
+  })
+}
+
+describe('TreeView', () => {
+  describe('Rendering', () => {
+    it('renders root nodes', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items.length).toBeGreaterThanOrEqual(3)
+    })
+
+    it('renders node labels', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+      expect(wrapper.text()).toContain('Root 1')
+      expect(wrapper.text()).toContain('Root 2')
+      expect(wrapper.text()).toContain('Root 3')
+    })
+
+    it('renders chevron for nodes with children', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+      const chevrons = wrapper.findAll('.ui-treeview__chevron')
+      expect(chevrons.length).toBeGreaterThan(0)
+    })
+
+    it('does not render chevron for leaf nodes', async () => {
+      const wrapper = createTreeView({}, [
+        { id: 'leaf', label: 'Leaf Node' }
+      ])
+      await nextTick()
+      expect(wrapper.find('.ui-treeview__chevron').exists()).toBe(false)
+    })
+  })
+
+  describe('Expansion', () => {
+    it('expands node when chevron is clicked', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      const chevron = wrapper.find('.ui-treeview__chevron')
+      await chevron.trigger('click')
+
+      expect(wrapper.emitted('update:expandedIds')).toBeTruthy()
+      expect(wrapper.emitted('update:expandedIds')![0][0]).toContain('root-1')
+    })
+
+    it('collapses expanded node when chevron is clicked again', async () => {
+      const wrapper = createTreeView({ expandedIds: ['root-1'] })
+      await nextTick()
+
+      const chevron = wrapper.find('.ui-treeview__chevron')
+      await chevron.trigger('click')
+
+      expect(wrapper.emitted('update:expandedIds')![0][0]).not.toContain('root-1')
+    })
+
+    it('shows children when expanded', async () => {
+      const wrapper = createTreeView({ expandedIds: ['root-1'] })
+      await nextTick()
+
+      expect(wrapper.text()).toContain('Child 1.1')
+      expect(wrapper.text()).toContain('Child 1.2')
+    })
+
+    it('hides children when collapsed', async () => {
+      const wrapper = createTreeView({ expandedIds: [] })
+      await nextTick()
+
+      expect(wrapper.text()).not.toContain('Child 1.1')
+      expect(wrapper.text()).not.toContain('Child 1.2')
+    })
+  })
+
+  describe('Selection', () => {
+    it('emits update:modelValue when node is clicked', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      const content = wrapper.find('.ui-treeview__content')
+      await content.trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+
+    it('applies selected class to selected node', async () => {
+      const wrapper = createTreeView({ modelValue: 'root-1' })
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].classes()).toContain('ui-treeview__item--selected')
+    })
+
+    it('supports multi-select mode', async () => {
+      const wrapper = createTreeView({ multiSelect: true, modelValue: ['root-1'] })
+      await nextTick()
+
+      const contents = wrapper.findAll('.ui-treeview__content')
+      await contents[2].trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')![0][0] as string[]
+      expect(emitted).toContain('root-1')
+      expect(emitted).toContain('root-3')
+    })
+
+    it('deselects in multi-select mode when clicking selected node', async () => {
+      const wrapper = createTreeView({ multiSelect: true, modelValue: ['root-1', 'root-3'] })
+      await nextTick()
+
+      const content = wrapper.find('.ui-treeview__content')
+      await content.trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')![0][0] as string[]
+      expect(emitted).not.toContain('root-1')
+      expect(emitted).toContain('root-3')
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled class to disabled nodes', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[1].classes()).toContain('ui-treeview__item--disabled')
+    })
+
+    it('does not select disabled nodes', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      const contents = wrapper.findAll('.ui-treeview__content')
+      await contents[1].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('focuses first node when tree receives focus', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].classes()).toContain('ui-treeview__item--focused')
+    })
+
+    it('moves focus down with ArrowDown', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[1].classes()).toContain('ui-treeview__item--focused')
+    })
+
+    it('moves focus up with ArrowUp', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].classes()).toContain('ui-treeview__item--focused')
+    })
+
+    it('expands node with ArrowRight', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowRight' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:expandedIds')?.[0][0]).toContain('root-1')
+    })
+
+    it('collapses node with ArrowLeft', async () => {
+      const wrapper = createTreeView({ expandedIds: ['root-1'] })
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:expandedIds')?.[0][0]).not.toContain('root-1')
+    })
+
+    it('selects node with Enter', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('root-1')
+    })
+
+    it('selects node with Space', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: ' ' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('root-1')
+    })
+
+    it('moves focus to first node with Home', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'ArrowDown' })
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'Home' })
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].classes()).toContain('ui-treeview__item--focused')
+    })
+
+    it('moves focus to last node with End', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+
+      await wrapper.find('.ui-treeview').trigger('focus')
+      await wrapper.find('.ui-treeview').trigger('keydown', { key: 'End' })
+      await nextTick()
+
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[items.length - 1].classes()).toContain('ui-treeview__item--focused')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="tree" on root', () => {
+      const wrapper = createTreeView()
+      expect(wrapper.find('.ui-treeview').attributes('role')).toBe('tree')
+    })
+
+    it('has aria-multiselectable when multiSelect is true', () => {
+      const wrapper = createTreeView({ multiSelect: true })
+      expect(wrapper.find('.ui-treeview').attributes('aria-multiselectable')).toBe('true')
+    })
+
+    it('items have role="treeitem"', async () => {
+      const wrapper = createTreeView()
+      await nextTick()
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].attributes('role')).toBe('treeitem')
+    })
+
+    it('items have aria-selected', async () => {
+      const wrapper = createTreeView({ modelValue: 'root-1' })
+      await nextTick()
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].attributes('aria-selected')).toBe('true')
+      expect(items[1].attributes('aria-selected')).toBe('false')
+    })
+
+    it('items with children have aria-expanded', async () => {
+      const wrapper = createTreeView({ expandedIds: ['root-1'] })
+      await nextTick()
+      const items = wrapper.findAll('.ui-treeview__item')
+      expect(items[0].attributes('aria-expanded')).toBe('true')
+    })
+
+    it('children container has role="group"', async () => {
+      const wrapper = createTreeView({ expandedIds: ['root-1'] })
+      await nextTick()
+      expect(wrapper.find('.ui-treeview__children').attributes('role')).toBe('group')
+    })
+  })
+
+  describe('Lazy loading', () => {
+    it('calls loadChildren when expanding a node without children', async () => {
+      const loadChildren = vi.fn().mockResolvedValue([
+        { id: 'lazy-child', label: 'Lazy Child' }
+      ])
+
+      const lazyData: TreeNode[] = [
+        { id: 'lazy-root', label: 'Lazy Root', isLeaf: false }
+      ]
+
+      const wrapper = mount(TreeView, {
+        props: {
+          data: lazyData,
+          loadChildren
+        },
+        slots: {
+          default: () => lazyData.map(node => h(TreeViewItem, { key: node.id, node }))
+        }
+      })
+      await nextTick()
+
+      const chevron = wrapper.find('.ui-treeview__chevron')
+      await chevron.trigger('click')
+
+      expect(loadChildren).toHaveBeenCalledWith(lazyData[0])
+    })
+  })
+})

package/src/components/TreeView/TreeView.vue

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import { provide, ref, computed, watch, toRef } from 'vue'
+import { TreeViewKey, TreeViewItemKey } from './keys'
+import type { TreeNode } from './keys'
+
+export interface TreeViewProps {
+  /** Hierarchical data */
+  data: TreeNode[]
+  /** Selected node ID(s) - v-model */
+  modelValue?: string | string[]
+  /** Expanded node IDs - v-model:expandedIds */
+  expandedIds?: string[]
+  /** Enable multi-selection */
+  multiSelect?: boolean
+  /** Lazy load callback */
+  loadChildren?: (node: TreeNode) => Promise<TreeNode[]>
+}
+
+const props = withDefaults(defineProps<TreeViewProps>(), {
+  multiSelect: false,
+  expandedIds: () => []
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[] | undefined]
+  'update:expandedIds': [value: string[]]
+}>()
+
+const internalSelected = ref<Set<string>>(new Set())
+const internalExpanded = ref<Set<string>>(new Set(props.expandedIds))
+const focusedId = ref<string | null>(null)
+const loadingIds = ref<Set<string>>(new Set())
+
+const nodeMap = ref<Map<string, { parentId: string | null; hasChildren: boolean }>>(new Map())
+const childrenMap = ref<Map<string | null, string[]>>(new Map())
+
+watch(() => props.modelValue, (value) => {
+  if (value === undefined) {
+    internalSelected.value = new Set()
+  } else if (Array.isArray(value)) {
+    internalSelected.value = new Set(value)
+  } else {
+    internalSelected.value = new Set([value])
+  }
+}, { immediate: true })
+
+watch(() => props.expandedIds, (value) => {
+  internalExpanded.value = new Set(value)
+}, { immediate: true })
+
+const selectedIds = computed(() => internalSelected.value)
+const expandedIds = computed(() => internalExpanded.value)
+
+function selectNode(id: string) {
+  if (props.multiSelect) {
+    const newSet = new Set(internalSelected.value)
+    if (newSet.has(id)) {
+      newSet.delete(id)
+    } else {
+      newSet.add(id)
+    }
+    internalSelected.value = newSet
+    emit('update:modelValue', Array.from(newSet))
+  } else {
+    if (internalSelected.value.has(id)) {
+      internalSelected.value = new Set()
+      emit('update:modelValue', undefined)
+    } else {
+      internalSelected.value = new Set([id])
+      emit('update:modelValue', id)
+    }
+  }
+}
+
+function toggleExpand(id: string) {
+  const newSet = new Set(internalExpanded.value)
+  if (newSet.has(id)) {
+    newSet.delete(id)
+  } else {
+    newSet.add(id)
+  }
+  internalExpanded.value = newSet
+  emit('update:expandedIds', Array.from(newSet))
+}
+
+function setFocusedId(id: string | null) {
+  focusedId.value = id
+}
+
+function registerNode(id: string, parentId: string | null, hasChildren: boolean) {
+  nodeMap.value.set(id, { parentId, hasChildren })
+
+  if (!childrenMap.value.has(parentId)) {
+    childrenMap.value.set(parentId, [])
+  }
+  const children = childrenMap.value.get(parentId)!
+  if (!children.includes(id)) {
+    children.push(id)
+  }
+}
+
+function getParentId(id: string): string | null {
+  return nodeMap.value.get(id)?.parentId ?? null
+}
+
+function getChildIds(id: string): string[] {
+  return childrenMap.value.get(id) ?? []
+}
+
+function hasChildren(id: string): boolean {
+  return nodeMap.value.get(id)?.hasChildren ?? false
+}
+
+function getVisibleNodes(): string[] {
+  const result: string[] = []
+
+  function traverse(nodes: TreeNode[], parentExpanded: boolean) {
+    for (const node of nodes) {
+      if (parentExpanded) {
+        result.push(node.id)
+        if (node.children && expandedIds.value.has(node.id)) {
+          traverse(node.children, true)
+        }
+      }
+    }
+  }
+
+  traverse(props.data, true)
+  return result
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  const visibleNodes = getVisibleNodes()
+  const currentIndex = focusedId.value ? visibleNodes.indexOf(focusedId.value) : -1
+
+  switch (event.key) {
+    case 'ArrowDown': {
+      event.preventDefault()
+      const nextIndex = currentIndex < visibleNodes.length - 1 ? currentIndex + 1 : 0
+      focusedId.value = visibleNodes[nextIndex]
+      break
+    }
+    case 'ArrowUp': {
+      event.preventDefault()
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleNodes.length - 1
+      focusedId.value = visibleNodes[prevIndex]
+      break
+    }
+    case 'ArrowRight': {
+      event.preventDefault()
+      if (focusedId.value) {
+        if (hasChildren(focusedId.value)) {
+          if (!expandedIds.value.has(focusedId.value)) {
+            toggleExpand(focusedId.value)
+          } else {
+            const children = getChildIds(focusedId.value)
+            if (children.length > 0) {
+              focusedId.value = children[0]
+            }
+          }
+        }
+      }
+      break
+    }
+    case 'ArrowLeft': {
+      event.preventDefault()
+      if (focusedId.value) {
+        if (expandedIds.value.has(focusedId.value)) {
+          toggleExpand(focusedId.value)
+        } else {
+          const parentId = getParentId(focusedId.value)
+          if (parentId) {
+            focusedId.value = parentId
+          }
+        }
+      }
+      break
+    }
+    case 'Home': {
+      event.preventDefault()
+      if (visibleNodes.length > 0) {
+        focusedId.value = visibleNodes[0]
+      }
+      break
+    }
+    case 'End': {
+      event.preventDefault()
+      if (visibleNodes.length > 0) {
+        focusedId.value = visibleNodes[visibleNodes.length - 1]
+      }
+      break
+    }
+    case 'Enter':
+    case ' ': {
+      event.preventDefault()
+      if (focusedId.value) {
+        selectNode(focusedId.value)
+      }
+      break
+    }
+  }
+}
+
+provide(TreeViewKey, {
+  selectedIds,
+  expandedIds,
+  focusedId,
+  multiSelect: toRef(props, 'multiSelect'),
+  selectNode,
+  toggleExpand,
+  setFocusedId,
+  loadChildren: props.loadChildren ?? null,
+  loadingIds,
+  registerNode,
+  getVisibleNodes,
+  getParentId,
+  getChildIds,
+  hasChildren
+})
+
+provide(TreeViewItemKey, {
+  depth: 0,
+  parentId: null
+})
+</script>
+
+<template>
+  <div
+    class="ui-treeview"
+    role="tree"
+    :aria-multiselectable="multiSelect"
+    tabindex="0"
+    @keydown="handleKeydown"
+    @focus="() => { if (!focusedId && data.length > 0) focusedId = data[0].id }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-treeview {
+  --tree-indent: 1.25rem;
+  outline: none;
+}
+
+.ui-treeview:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-md);
+}
+</style>