@sabrenski/spire-ui 0.0.1

package/src/components/Pagination/Pagination.test.ts

@@ -0,0 +1,303 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pagination from './Pagination.vue'
+import { generatePageRange } from './utils'
+
+describe('generatePageRange', () => {
+  it('returns empty array for zero total pages', () => {
+    expect(generatePageRange(1, 0)).toEqual([])
+  })
+
+  it('returns single page for total of 1', () => {
+    expect(generatePageRange(1, 1)).toEqual([1])
+  })
+
+  it('returns all pages when total is small', () => {
+    expect(generatePageRange(1, 5, 1, true)).toEqual([1, 2, 3, 4, 5])
+    expect(generatePageRange(3, 5, 1, true)).toEqual([1, 2, 3, 4, 5])
+  })
+
+  it('shows ellipsis for large page counts with showEdges', () => {
+    const result = generatePageRange(5, 10, 1, true)
+    expect(result).toContain('ellipsis')
+    expect(result[0]).toBe(1)
+    expect(result[result.length - 1]).toBe(10)
+  })
+
+  it('shows left ellipsis when current page is far from start', () => {
+    const result = generatePageRange(8, 10, 1, true)
+    expect(result).toEqual([1, 'ellipsis', 7, 8, 9, 10])
+  })
+
+  it('shows right ellipsis when current page is far from end', () => {
+    const result = generatePageRange(3, 10, 1, true)
+    expect(result).toEqual([1, 2, 3, 4, 'ellipsis', 10])
+  })
+
+  it('shows both ellipses when current page is in middle', () => {
+    const result = generatePageRange(5, 10, 1, true)
+    expect(result).toEqual([1, 'ellipsis', 4, 5, 6, 'ellipsis', 10])
+  })
+
+  it('respects siblingCount', () => {
+    const result = generatePageRange(10, 20, 2, true)
+    expect(result).toContain(8)
+    expect(result).toContain(9)
+    expect(result).toContain(10)
+    expect(result).toContain(11)
+    expect(result).toContain(12)
+  })
+
+  it('clamps current page to valid range', () => {
+    const resultHigh = generatePageRange(100, 10, 1, true)
+    expect(resultHigh).toContain(10)
+
+    const resultLow = generatePageRange(-5, 10, 1, true)
+    expect(resultLow[0]).toBe(1)
+  })
+
+  it('works without showEdges', () => {
+    const result = generatePageRange(5, 10, 1, false)
+    expect(result[0]).toBe('ellipsis')
+    expect(result).toContain(4)
+    expect(result).toContain(5)
+    expect(result).toContain(6)
+    expect(result[result.length - 1]).toBe('ellipsis')
+  })
+})
+
+describe('Pagination', () => {
+  describe('Rendering', () => {
+    it('renders with required props', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 100 }
+      })
+      expect(wrapper.find('.ui-pagination').exists()).toBe(true)
+    })
+
+    it('renders navigation buttons', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 5, total: 100 }
+      })
+      const buttons = wrapper.findAllComponents({ name: 'Button' })
+      expect(buttons.length).toBeGreaterThan(2)
+    })
+
+    it('renders page numbers', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, pageSize: 10 }
+      })
+      expect(wrapper.text()).toContain('1')
+      expect(wrapper.text()).toContain('5')
+    })
+
+    it('renders ellipsis when needed', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 5, total: 100, pageSize: 10 }
+      })
+      expect(wrapper.find('.ui-pagination__ellipsis').exists()).toBe(true)
+    })
+
+    it('does not render when total is 0', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 0 }
+      })
+      expect(wrapper.find('.ui-pagination__item').exists()).toBe(false)
+    })
+  })
+
+  describe('Navigation', () => {
+    it('emits update:modelValue when page is clicked', async () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, pageSize: 10 }
+      })
+      const pageButtons = wrapper.findAll('.ui-pagination__button')
+      await pageButtons[1].trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+
+    it('emits correct page on previous click', async () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 3, total: 50, pageSize: 10 }
+      })
+      const prevButton = wrapper.findAllComponents({ name: 'Button' })[0]
+      await prevButton.trigger('click')
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([2])
+    })
+
+    it('emits correct page on next click', async () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 3, total: 50, pageSize: 10 }
+      })
+      const buttons = wrapper.findAllComponents({ name: 'Button' })
+      const nextButton = buttons[buttons.length - 1]
+      await nextButton.trigger('click')
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([4])
+    })
+
+    it('disables previous button on first page', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, pageSize: 10 }
+      })
+      const prevButton = wrapper.findAllComponents({ name: 'Button' })[0]
+      expect(prevButton.props('disabled')).toBe(true)
+    })
+
+    it('disables next button on last page', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 5, total: 50, pageSize: 10 }
+      })
+      const buttons = wrapper.findAllComponents({ name: 'Button' })
+      const nextButton = buttons[buttons.length - 1]
+      expect(nextButton.props('disabled')).toBe(true)
+    })
+
+    it('does not emit when clicking current page', async () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, pageSize: 10 }
+      })
+      const currentButton = wrapper.find('.ui-pagination__button--current')
+      await currentButton.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+  })
+
+  describe('Props', () => {
+    it('calculates total pages correctly', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 95, pageSize: 10 }
+      })
+      expect(wrapper.text()).toContain('10')
+    })
+
+    it('respects pageSize prop', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 100, pageSize: 20 }
+      })
+      expect(wrapper.text()).toContain('5')
+      expect(wrapper.text()).not.toContain('10')
+    })
+
+    it('respects siblingCount prop', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 10, total: 200, pageSize: 10, siblingCount: 2 }
+      })
+      expect(wrapper.text()).toContain('8')
+      expect(wrapper.text()).toContain('12')
+    })
+
+    it('disables all buttons when disabled prop is true', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 3, total: 50, pageSize: 10, disabled: true }
+      })
+      const buttons = wrapper.findAllComponents({ name: 'Button' })
+      buttons.forEach(button => {
+        expect(button.props('disabled')).toBe(true)
+      })
+    })
+
+    it('applies disabled class when disabled', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, disabled: true }
+      })
+      expect(wrapper.find('.ui-pagination--disabled').exists()).toBe(true)
+    })
+  })
+
+  describe('Sizes', () => {
+    it('applies sm size', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, size: 'sm' }
+      })
+      expect(wrapper.find('.ui-pagination--sm').exists()).toBe(true)
+    })
+
+    it('applies md size by default', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50 }
+      })
+      expect(wrapper.find('.ui-pagination--md').exists()).toBe(true)
+    })
+
+    it('applies lg size', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, size: 'lg' }
+      })
+      expect(wrapper.find('.ui-pagination--lg').exists()).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has navigation role', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50 }
+      })
+      expect(wrapper.find('[role="navigation"]').exists()).toBe(true)
+    })
+
+    it('has aria-label on navigation', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50 }
+      })
+      expect(wrapper.find('[aria-label="Pagination"]').exists()).toBe(true)
+    })
+
+    it('has aria-label on navigation buttons', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 3, total: 50 }
+      })
+      const prevButton = wrapper.findAllComponents({ name: 'Button' })[0]
+      expect(prevButton.attributes('aria-label')).toBe('Go to previous page')
+    })
+
+    it('has aria-current on current page', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 3, total: 50, pageSize: 10 }
+      })
+      const currentButton = wrapper.find('.ui-pagination__button--current')
+      expect(currentButton.attributes('aria-current')).toBe('page')
+    })
+
+    it('has aria-label on page buttons', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 50, pageSize: 10 }
+      })
+      const pageButton = wrapper.find('.ui-pagination__button')
+      expect(pageButton.attributes('aria-label')).toContain('Go to page')
+    })
+
+    it('ellipsis has aria-hidden', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 5, total: 100, pageSize: 10 }
+      })
+      const ellipsis = wrapper.find('.ui-pagination__ellipsis')
+      expect(ellipsis.attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles total less than pageSize', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 1, total: 5, pageSize: 10 }
+      })
+      expect(wrapper.text()).toContain('1')
+      expect(wrapper.find('.ui-pagination__ellipsis').exists()).toBe(false)
+    })
+
+    it('handles modelValue greater than total pages', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: 100, total: 50, pageSize: 10 }
+      })
+      const currentButton = wrapper.find('.ui-pagination__button--current')
+      expect(currentButton.text()).toBe('5')
+    })
+
+    it('handles modelValue less than 1', () => {
+      const wrapper = mount(Pagination, {
+        props: { modelValue: -5, total: 50, pageSize: 10 }
+      })
+      const currentButton = wrapper.find('.ui-pagination__button--current')
+      expect(currentButton.text()).toBe('1')
+    })
+  })
+})

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Button from '../Button/Button.vue'
+import { useInternalIcon } from '../../config/icons'
+import { generatePageRange, type PageItem } from './utils'
+
+const ChevronLeftIcon = useInternalIcon('chevronLeft')
+const ChevronRightIcon = useInternalIcon('chevronRight')
+
+export interface PaginationProps {
+  /** Current active page (v-model) */
+  modelValue: number
+  /** Total count of items */
+  total: number
+  /** Items per page */
+  pageSize?: number
+  /** Number of pages to show on each side of current page */
+  siblingCount?: number
+  /** Whether to always show first/last page numbers */
+  showEdges?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  /** Disable all controls */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  pageSize: 10,
+  siblingCount: 1,
+  showEdges: true,
+  size: 'md',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>()
+
+const totalPages = computed(() => {
+  if (props.total <= 0 || props.pageSize <= 0) return 0
+  return Math.ceil(props.total / props.pageSize)
+})
+
+const currentPage = computed(() => {
+  return Math.max(1, Math.min(props.modelValue, totalPages.value))
+})
+
+const visiblePages = computed<PageItem[]>(() => {
+  return generatePageRange(
+    currentPage.value,
+    totalPages.value,
+    props.siblingCount,
+    props.showEdges
+  )
+})
+
+const isFirstPage = computed(() => currentPage.value <= 1)
+const isLastPage = computed(() => currentPage.value >= totalPages.value)
+
+function goToPage(page: number) {
+  if (props.disabled) return
+  const newPage = Math.max(1, Math.min(page, totalPages.value))
+  if (newPage !== props.modelValue) {
+    emit('update:modelValue', newPage)
+  }
+}
+
+function goToPrevious() {
+  if (!isFirstPage.value) {
+    goToPage(currentPage.value - 1)
+  }
+}
+
+function goToNext() {
+  if (!isLastPage.value) {
+    goToPage(currentPage.value + 1)
+  }
+}
+
+const buttonSize = computed(() => {
+  if (props.size === 'sm') return 'xs'
+  if (props.size === 'lg') return 'md'
+  return 'sm'
+})
+</script>
+
+<template>
+  <nav
+    class="ui-pagination"
+    :class="[
+      `ui-pagination--${size}`,
+      { 'ui-pagination--disabled': disabled }
+    ]"
+    role="navigation"
+    aria-label="Pagination"
+  >
+    <Button
+      variant="ghost"
+      :size="buttonSize"
+      :disabled="disabled || isFirstPage"
+      :icon-left="ChevronLeftIcon"
+      aria-label="Go to previous page"
+      @click="goToPrevious"
+    />
+
+    <ul class="ui-pagination__list" role="list">
+      <li
+        v-for="(item, index) in visiblePages"
+        :key="item === 'ellipsis' ? `ellipsis-${index}` : item"
+        class="ui-pagination__item"
+      >
+        <span
+          v-if="item === 'ellipsis'"
+          class="ui-pagination__ellipsis"
+          aria-hidden="true"
+        >
+          &hellip;
+        </span>
+        <Button
+          v-else
+          :variant="item === currentPage ? 'secondary' : 'ghost'"
+          :size="buttonSize"
+          :disabled="disabled"
+          :aria-label="`Go to page ${item}`"
+          :aria-current="item === currentPage ? 'page' : undefined"
+          class="ui-pagination__button"
+          :class="{ 'ui-pagination__button--current': item === currentPage }"
+          @click="goToPage(item)"
+        >
+          {{ item }}
+        </Button>
+      </li>
+    </ul>
+
+    <Button
+      variant="ghost"
+      :size="buttonSize"
+      :disabled="disabled || isLastPage"
+      :icon-left="ChevronRightIcon"
+      aria-label="Go to next page"
+      @click="goToNext"
+    />
+  </nav>
+</template>
+
+<style scoped>
+.ui-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--font-sans);
+}
+
+.ui-pagination--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ui-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-pagination__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--input-height-sm);
+  height: var(--input-height-sm);
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  user-select: none;
+}
+
+.ui-pagination--sm .ui-pagination__ellipsis {
+  min-width: var(--input-height-xs);
+  height: var(--input-height-xs);
+  font-size: var(--text-xs);
+}
+
+.ui-pagination--lg .ui-pagination__ellipsis {
+  min-width: var(--input-height-md);
+  height: var(--input-height-md);
+  font-size: var(--text-md);
+}
+
+.ui-pagination__button {
+  min-width: var(--input-height-sm);
+}
+
+.ui-pagination--sm .ui-pagination__button {
+  min-width: var(--input-height-xs);
+}
+
+.ui-pagination--lg .ui-pagination__button {
+  min-width: var(--input-height-md);
+}
+
+.ui-pagination__button--current {
+  font-weight: var(--font-semibold);
+}
+</style>

package/src/components/Pagination/index.ts

@@ -0,0 +1,3 @@
+export { default as Pagination } from './Pagination.vue'
+export type { PaginationProps } from './Pagination.vue'
+export { generatePageRange, type PageItem } from './utils'

package/src/components/Pagination/utils.ts

@@ -0,0 +1,86 @@
+export type PageItem = number | 'ellipsis'
+
+/**
+ * Generates an array of page numbers and ellipsis markers for pagination display.
+ *
+ * Time complexity: O(n) where n is siblingCount
+ * Space complexity: O(n) for the result array
+ *
+ * @param currentPage - The currently active page (1-indexed)
+ * @param totalPages - Total number of pages
+ * @param siblingCount - Number of pages to show on each side of current page
+ * @param showEdges - Whether to always show first and last page numbers
+ * @returns Array of page numbers and 'ellipsis' markers
+ */
+export function generatePageRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number = 1,
+  showEdges: boolean = true
+): PageItem[] {
+  if (totalPages <= 0) return []
+  if (totalPages === 1) return [1]
+
+  const clampedCurrent = Math.max(1, Math.min(currentPage, totalPages))
+
+  const leftSiblingIndex = Math.max(clampedCurrent - siblingCount, 1)
+  const rightSiblingIndex = Math.min(clampedCurrent + siblingCount, totalPages)
+
+  if (!showEdges) {
+    const pages: PageItem[] = []
+
+    const showLeftDots = leftSiblingIndex > 1
+    const showRightDots = rightSiblingIndex < totalPages
+
+    if (showLeftDots) {
+      pages.push('ellipsis')
+    }
+
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+      pages.push(i)
+    }
+
+    if (showRightDots) {
+      pages.push('ellipsis')
+    }
+
+    return pages
+  }
+
+  const totalSlots = siblingCount * 2 + 5
+  if (totalPages <= totalSlots) {
+    const pages: PageItem[] = []
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
+
+  const showLeftEllipsis = leftSiblingIndex > 2
+  const showRightEllipsis = rightSiblingIndex < totalPages - 1
+
+  const pages: PageItem[] = []
+
+  pages.push(1)
+
+  if (showLeftEllipsis) {
+    pages.push('ellipsis')
+  }
+
+  const rangeStart = showLeftEllipsis ? leftSiblingIndex : 2
+  const rangeEnd = showRightEllipsis ? rightSiblingIndex : totalPages - 1
+
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    pages.push(i)
+  }
+
+  if (showRightEllipsis) {
+    pages.push('ellipsis')
+  }
+
+  if (totalPages > 1) {
+    pages.push(totalPages)
+  }
+
+  return pages
+}