@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.3

package/src/__tests__/components/DataFrame.test.ts

@@ -1,915 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DataFrame from '../../components/DataFrame.vue'
-import type { DataFrameColumn, SortState, PaginationState } from '../../types'
-
-describe('DataFrame', () => {
-  const mockData = [
-    { id: 1, name: 'Alice', age: 30, email: 'alice@example.com' },
-    { id: 2, name: 'Bob', age: 25, email: 'bob@example.com' },
-    { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' },
-  ]
-
-  const mockColumns: DataFrameColumn[] = [
-    { key: 'name', label: 'Name' },
-    { key: 'age', label: 'Age', align: 'right' },
-    { key: 'email', label: 'Email' },
-  ]
-
-  describe('rendering with default props', () => {
-    it('should render table container', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
-      expect(wrapper.find('.mint-dataframe__table').exists()).toBe(true)
-    })
-
-    it('should render column headers', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const headers = wrapper.findAll('.mint-dataframe__th')
-      expect(headers).toHaveLength(3)
-      expect(headers[0].text()).toBe('Name')
-      expect(headers[1].text()).toBe('Age')
-      expect(headers[2].text()).toBe('Email')
-    })
-
-    it('should render data rows', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(3)
-    })
-
-    it('should render cell values', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
-      const cells = firstRow.findAll('.mint-dataframe__td')
-      expect(cells[0].text()).toBe('Alice')
-      expect(cells[1].text()).toBe('30')
-      expect(cells[2].text()).toBe('alice@example.com')
-    })
-
-    it('should apply bordered class by default', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe--bordered').exists()).toBe(true)
-    })
-
-    it('should apply striped rows by default', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows[1].classes()).toContain('mint-dataframe__row--striped')
-    })
-  })
-
-  describe('column configuration', () => {
-    it('should apply column alignment', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const ageHeader = wrapper.findAll('.mint-dataframe__th')[1]
-      expect(ageHeader.classes()).toContain('mint-dataframe__th--align-right')
-    })
-
-    it('should apply column width', () => {
-      const columns: DataFrameColumn[] = [
-        { key: 'name', label: 'Name', width: 200 },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
-      })
-      const header = wrapper.find('.mint-dataframe__th')
-      expect(header.attributes('style')).toContain('width: 200px')
-    })
-
-    it('should support string width values', () => {
-      const columns: DataFrameColumn[] = [
-        { key: 'name', label: 'Name', width: '20rem' },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
-      })
-      const header = wrapper.find('.mint-dataframe__th')
-      expect(header.attributes('style')).toContain('width: 20rem')
-    })
-
-    it('should apply minWidth', () => {
-      const columns: DataFrameColumn[] = [
-        { key: 'name', label: 'Name', minWidth: 150 },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
-      })
-      const header = wrapper.find('.mint-dataframe__th')
-      expect(header.attributes('style')).toContain('min-width: 150px')
-    })
-
-    it('should apply ellipsis class to cells', () => {
-      const columns: DataFrameColumn[] = [
-        { key: 'name', label: 'Name', ellipsis: true },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
-      })
-      const cell = wrapper.find('.mint-dataframe__td')
-      expect(cell.classes()).toContain('mint-dataframe__td--ellipsis')
-    })
-
-    it('should use custom formatter', () => {
-      const columns: DataFrameColumn[] = [
-        {
-          key: 'age',
-          label: 'Age',
-          formatter: (value) => `${value} years old`,
-        },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns },
-      })
-      const ageCell = wrapper.findAll('.mint-dataframe__row')[0].findAll('.mint-dataframe__td')[0]
-      expect(ageCell.text()).toBe('30 years old')
-    })
-  })
-
-  describe('sorting', () => {
-    const sortableColumns: DataFrameColumn[] = [
-      { key: 'name', label: 'Name', sortable: true },
-      { key: 'age', label: 'Age', sortable: true },
-    ]
-
-    it('should show sort icon on sortable columns', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
-      })
-      const sortIcons = wrapper.findAll('.mint-dataframe__sort-icon')
-      expect(sortIcons).toHaveLength(2)
-    })
-
-    it('should apply sortable class to sortable headers', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
-      })
-      const headers = wrapper.findAll('.mint-dataframe__th')
-      expect(headers[0].classes()).toContain('mint-dataframe__th--sortable')
-    })
-
-    it('should sort ascending on first click', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
-      })
-      const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
-
-      expect(wrapper.emitted('update:sort')).toHaveLength(1)
-      const sortState = wrapper.emitted('update:sort')?.[0]?.[0] as SortState
-      expect(sortState.key).toBe('name')
-      expect(sortState.direction).toBe('asc')
-    })
-
-    it('should sort descending on second click', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: sortableColumns,
-          sort: { key: 'name', direction: 'asc' },
-        },
-      })
-      const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
-
-      const sortState = wrapper.emitted('update:sort')?.[0]?.[0] as SortState
-      expect(sortState.direction).toBe('desc')
-    })
-
-    it('should clear sort on third click', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: sortableColumns,
-          sort: { key: 'name', direction: 'desc' },
-        },
-      })
-      const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
-
-      const sortState = wrapper.emitted('update:sort')?.[0]?.[0]
-      expect(sortState).toBeNull()
-    })
-
-    it('should sort data internally when sort prop is not provided', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
-      })
-      const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      await nameHeader.trigger('click')
-
-      // After sorting, first row should have name starting with 'A'
-      const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
-      const cells = firstRow.findAll('.mint-dataframe__td')
-      expect(cells[0].text()).toBe('Alice')
-    })
-
-    it('should sort numeric columns correctly', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: sortableColumns },
-      })
-      const ageHeader = wrapper.findAll('.mint-dataframe__th')[1]
-      await ageHeader.trigger('click')
-
-      // After sorting ascending, first row should have age 25
-      const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
-      const cells = firstRow.findAll('.mint-dataframe__td')
-      expect(cells[1].text()).toBe('25')
-    })
-
-    it('should apply sorted class to active column', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: sortableColumns,
-          sort: { key: 'name', direction: 'asc' },
-        },
-      })
-      const nameHeader = wrapper.findAll('.mint-dataframe__th')[0]
-      expect(nameHeader.classes()).toContain('mint-dataframe__th--sorted')
-    })
-
-    it('should enable sorting globally with sortable prop', () => {
-      const columns: DataFrameColumn[] = [
-        { key: 'name', label: 'Name' },
-        { key: 'age', label: 'Age' },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns, sortable: true },
-      })
-      const sortableHeaders = wrapper.findAll('.mint-dataframe__th--sortable')
-      expect(sortableHeaders).toHaveLength(2)
-    })
-  })
-
-  describe('search filtering', () => {
-    it('should show search input when searchable is true', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
-      })
-      expect(wrapper.find('.mint-dataframe__search').exists()).toBe(true)
-    })
-
-    it('should filter data based on search query', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('Alice')
-
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(1)
-      expect(rows[0].text()).toContain('Alice')
-    })
-
-    it('should search across all columns by default', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('bob@example.com')
-
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(1)
-      expect(rows[0].text()).toContain('Bob')
-    })
-
-    it('should search only specified columns', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          searchKeys: ['name'],
-        },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('bob@example.com')
-
-      // Should not find Bob by email since we're only searching name
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(0)
-    })
-
-    it('should treat whitespace-only search as empty', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('   ')
-
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(3)
-    })
-
-    it('should be case-insensitive', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, searchable: true },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('ALICE')
-
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(1)
-    })
-
-    it('should use custom placeholder', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          searchPlaceholder: 'Type to search...',
-        },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      expect(searchInput.attributes('placeholder')).toBe('Type to search...')
-    })
-  })
-
-  describe('pagination', () => {
-    const paginationState: PaginationState = {
-      page: 1,
-      pageSize: 2,
-      total: 3,
-    }
-
-    it('should show pagination controls', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
-      })
-      expect(wrapper.find('.mint-dataframe__footer').exists()).toBe(true)
-      expect(wrapper.find('.mint-dataframe__page-controls').exists()).toBe(true)
-    })
-
-    it('should display page info', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
-      })
-      const pageInfo = wrapper.find('.mint-dataframe__page-info')
-      expect(pageInfo.text()).toContain('1')
-      expect(pageInfo.text()).toContain('3')
-    })
-
-    it('should paginate data', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
-      })
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(2) // pageSize is 2
-    })
-
-    it('should emit pagination event on page change', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
-      })
-      const nextButton = wrapper.findAll('.mint-dataframe__page-btn')[1]
-      await nextButton.trigger('click')
-
-      expect(wrapper.emitted('update:pagination')).toHaveLength(1)
-      const newPagination = wrapper.emitted('update:pagination')?.[0]?.[0] as PaginationState
-      expect(newPagination.page).toBe(2)
-    })
-
-    it('should disable prev button on first page', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: paginationState },
-      })
-      const prevButton = wrapper.findAll('.mint-dataframe__page-btn')[0]
-      expect(prevButton.attributes('disabled')).toBeDefined()
-    })
-
-    it('should disable next button on last page', () => {
-      const lastPageState: PaginationState = { page: 2, pageSize: 2, total: 3 }
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: lastPageState },
-      })
-      const nextButton = wrapper.findAll('.mint-dataframe__page-btn')[1]
-      expect(nextButton.attributes('disabled')).toBeDefined()
-    })
-
-    it('should not show pagination when false', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, pagination: false },
-      })
-      expect(wrapper.find('.mint-dataframe__footer').exists()).toBe(false)
-    })
-  })
-
-  describe('row selection', () => {
-    it('should show checkbox column when selectable', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true },
-      })
-      expect(wrapper.find('.mint-dataframe__th--checkbox').exists()).toBe(true)
-    })
-
-    it('should show checkboxes for each row', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true },
-      })
-      const checkboxes = wrapper.findAll('.mint-dataframe__checkbox')
-      // One for header + one for each row
-      expect(checkboxes.length).toBeGreaterThan(mockData.length)
-    })
-
-    it('should emit selectedKeys on row selection', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
-      })
-      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
-      await rowCheckboxes[0].trigger('change')
-
-      expect(wrapper.emitted('update:selectedKeys')).toHaveLength(1)
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
-      expect(keys).toContain(1)
-    })
-
-    it('should toggle selection on row checkbox click', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-          selectedKeys: [1],
-        },
-      })
-      const rowCheckboxes = wrapper.findAll('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
-      await rowCheckboxes[0].trigger('change')
-
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
-      expect(keys).not.toContain(1)
-    })
-
-    it('should select all rows with header checkbox', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, selectable: true, rowKey: 'id' },
-      })
-      const headerCheckbox = wrapper.find('.mint-dataframe__th--checkbox .mint-dataframe__checkbox')
-      await headerCheckbox.trigger('change')
-
-      const keys = wrapper.emitted('update:selectedKeys')?.[0]?.[0] as number[]
-      expect(keys).toHaveLength(3)
-    })
-
-    it('should apply selected class to selected rows', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-          selectedKeys: [1],
-        },
-      })
-      const selectedRow = wrapper.find('.mint-dataframe__row--selected')
-      expect(selectedRow.exists()).toBe(true)
-    })
-  })
-
-  describe('events', () => {
-    it('should emit row-click event', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const firstRow = wrapper.findAll('.mint-dataframe__row')[0]
-      await firstRow.trigger('click')
-
-      expect(wrapper.emitted('row-click')).toHaveLength(1)
-      const [row, index] = wrapper.emitted('row-click')?.[0] as [Record<string, unknown>, number]
-      expect(row.name).toBe('Alice')
-      expect(index).toBe(0)
-    })
-
-    it('should emit cell-click event', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const firstCell = wrapper.find('.mint-dataframe__td')
-      await firstCell.trigger('click')
-
-      expect(wrapper.emitted('cell-click')).toHaveLength(1)
-      const [value, column, row] = wrapper.emitted('cell-click')?.[0] as [unknown, DataFrameColumn, Record<string, unknown>]
-      expect(value).toBe('Alice')
-      expect(column.key).toBe('name')
-      expect(row.name).toBe('Alice')
-    })
-
-    it('should emit row-click from cell clicks when clickableRows is true', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, clickableRows: true },
-      })
-      const firstCell = wrapper.find('.mint-dataframe__td')
-      await firstCell.trigger('click')
-
-      expect(wrapper.emitted('cell-click')).toHaveLength(1)
-      expect(wrapper.emitted('row-click')).toHaveLength(1)
-      const [row, index] = wrapper.emitted('row-click')?.[0] as [Record<string, unknown>, number]
-      expect(row.name).toBe('Alice')
-      expect(index).toBe(0)
-    })
-
-    it('should make clickable rows keyboard accessible', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, clickableRows: true },
-      })
-      const firstRow = wrapper.find('.mint-dataframe__row')
-      expect(firstRow.attributes('tabindex')).toBe('0')
-      expect(firstRow.attributes('role')).toBe('button')
-
-      await firstRow.trigger('keydown', { key: 'Enter' })
-      await firstRow.trigger('keydown', { key: ' ' })
-
-      expect(wrapper.emitted('row-click')).toHaveLength(2)
-    })
-
-    it('should keep non-clickable rows out of the tab order', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      const firstRow = wrapper.find('.mint-dataframe__row')
-      expect(firstRow.attributes('tabindex')).toBeUndefined()
-      expect(firstRow.attributes('role')).toBeUndefined()
-    })
-  })
-
-  describe('empty state', () => {
-    it('should show empty state when no data', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe__empty').exists()).toBe(true)
-    })
-
-    it('should display empty text', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe__empty-text').text()).toBe('No data')
-    })
-
-    it('should use custom empty text', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, emptyText: 'No records found' },
-      })
-      expect(wrapper.find('.mint-dataframe__empty-text').text()).toBe('No records found')
-    })
-
-    it('should not show empty state when loading', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns, loading: true },
-      })
-      expect(wrapper.find('.mint-dataframe__empty').exists()).toBe(false)
-    })
-  })
-
-  describe('loading state', () => {
-    it('should show loading overlay', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
-      })
-      expect(wrapper.find('.mint-dataframe__loading').exists()).toBe(true)
-    })
-
-    it('should show loading spinner', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
-      })
-      expect(wrapper.find('.mint-dataframe__loading-spinner').exists()).toBe(true)
-    })
-  })
-
-  describe('styling props', () => {
-    it('should not apply striped when striped is false', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, striped: false },
-      })
-      expect(wrapper.find('.mint-dataframe__row--striped').exists()).toBe(false)
-    })
-
-    it('should not apply bordered when bordered is false', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, bordered: false },
-      })
-      expect(wrapper.find('.mint-dataframe--bordered').exists()).toBe(false)
-    })
-
-    it('should apply size class to cells', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, size: 'sm' },
-      })
-      const cell = wrapper.find('.mint-dataframe__td')
-      expect(cell.classes()).toContain('mint-dataframe__td--sm')
-    })
-
-    it('should apply sticky header class', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, stickyHeader: true },
-      })
-      expect(wrapper.find('.mint-dataframe__thead--sticky').exists()).toBe(true)
-    })
-
-    it('should apply maxHeight style', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, maxHeight: 400 },
-      })
-      const tableWrapper = wrapper.find('.mint-dataframe__table-wrapper')
-      expect(tableWrapper.attributes('style')).toContain('max-height: 400px')
-    })
-
-    it('should support string maxHeight', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, maxHeight: '50vh' },
-      })
-      const tableWrapper = wrapper.find('.mint-dataframe__table-wrapper')
-      expect(tableWrapper.attributes('style')).toContain('max-height: 50vh')
-    })
-  })
-
-  describe('nested keys', () => {
-    it('should access nested object properties', () => {
-      const nestedData = [
-        { id: 1, user: { name: 'Alice', email: 'alice@example.com' } },
-      ]
-      const nestedColumns: DataFrameColumn[] = [
-        { key: 'user.name', label: 'Name' },
-        { key: 'user.email', label: 'Email' },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: nestedData, columns: nestedColumns },
-      })
-      const cells = wrapper.findAll('.mint-dataframe__td')
-      expect(cells[0].text()).toBe('Alice')
-      expect(cells[1].text()).toBe('alice@example.com')
-    })
-  })
-
-  describe('rowKey prop', () => {
-    it('should use string rowKey', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-        },
-      })
-      expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
-    })
-
-    it('should use function rowKey', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: (row) => `row-${row.id}`,
-        },
-      })
-      expect(wrapper.find('.mint-dataframe').exists()).toBe(true)
-    })
-  })
-
-  describe('slots', () => {
-    it('should support header slot', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-        slots: {
-          'header-name': '<div class="custom-header">Custom Name</div>',
-        },
-      })
-      expect(wrapper.find('.custom-header').exists()).toBe(true)
-      expect(wrapper.find('.custom-header').text()).toBe('Custom Name')
-    })
-
-    it('should support cell slot', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-        slots: {
-          'cell-name': '<div class="custom-cell">{{ value }}</div>',
-        },
-      })
-      expect(wrapper.find('.custom-cell').exists()).toBe(true)
-    })
-
-    it('should support empty slot', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: [], columns: mockColumns },
-        slots: {
-          empty: '<div class="custom-empty">Nothing here</div>',
-        },
-      })
-      expect(wrapper.find('.custom-empty').exists()).toBe(true)
-      expect(wrapper.find('.custom-empty').text()).toBe('Nothing here')
-    })
-
-    it('should support loading slot', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, loading: true },
-        slots: {
-          loading: '<div class="custom-loading">Loading...</div>',
-        },
-      })
-      expect(wrapper.find('.custom-loading').exists()).toBe(true)
-    })
-
-    it('should support footer slot', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          pagination: { page: 1, pageSize: 2, total: 3 },
-        },
-        slots: {
-          footer: '<div class="custom-footer">Custom Footer</div>',
-        },
-      })
-      expect(wrapper.find('.custom-footer').exists()).toBe(true)
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle null and undefined values', () => {
-      const dataWithNulls = [
-        { id: 1, name: null, age: undefined, email: 'test@example.com' },
-      ]
-      const wrapper = mount(DataFrame, {
-        props: { data: dataWithNulls, columns: mockColumns },
-      })
-      const cells = wrapper.findAll('.mint-dataframe__td')
-      expect(cells[0].text()).toBe('')
-      expect(cells[1].text()).toBe('')
-    })
-
-    it('should handle empty columns array', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: [] },
-      })
-      expect(wrapper.find('.mint-dataframe__table').exists()).toBe(true)
-    })
-
-    it('should handle large datasets efficiently', () => {
-      const largeData = Array.from({ length: 1000 }, (_, i) => ({
-        id: i,
-        name: `User ${i}`,
-        age: 20 + (i % 50),
-      }))
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: largeData,
-          columns: mockColumns,
-          pagination: { page: 1, pageSize: 10, total: 1000 },
-        },
-      })
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(10)
-    })
-
-    it('should handle search with filtered pagination', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          searchable: true,
-          pagination: { page: 1, pageSize: 2, total: 3 },
-        },
-      })
-      const searchInput = wrapper.find('.mint-dataframe__search')
-      await searchInput.setValue('Alice')
-
-      const rows = wrapper.findAll('.mint-dataframe__row')
-      expect(rows).toHaveLength(1)
-    })
-
-    it('should stop propagation on checkbox clicks', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          selectable: true,
-          rowKey: 'id',
-        },
-      })
-      const checkbox = wrapper.find('.mint-dataframe__td--checkbox .mint-dataframe__checkbox')
-      await checkbox.trigger('click')
-
-      // Row click should not be emitted
-      expect(wrapper.emitted('row-click')).toBeUndefined()
-    })
-  })
-
-  describe('row deletion', () => {
-    it('should not show an actions column by default', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe__td--actions').exists()).toBe(false)
-    })
-
-    it('should show a delete button per row when deletable', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
-      })
-      expect(wrapper.find('.mint-dataframe__th--actions').exists()).toBe(true)
-      expect(wrapper.findAll('.mint-dataframe__delete-btn')).toHaveLength(mockData.length)
-    })
-
-    it('should emit delete-row with the row and index', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
-      })
-      await wrapper.findAll('.mint-dataframe__delete-btn')[1].trigger('click')
-
-      expect(wrapper.emitted('delete-row')).toHaveLength(1)
-      const [row, index] = wrapper.emitted('delete-row')?.[0] as [Record<string, unknown>, number]
-      expect(row.name).toBe('Bob')
-      expect(index).toBe(1)
-    })
-
-    it('should not emit row-click when the delete button is clicked', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true },
-      })
-      await wrapper.find('.mint-dataframe__delete-btn').trigger('click')
-      expect(wrapper.emitted('row-click')).toBeUndefined()
-    })
-
-    it('should use a custom delete label', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, deletable: true, deleteLabel: 'Remove' },
-      })
-      expect(wrapper.find('.mint-dataframe__delete-btn').attributes('aria-label')).toBe('Remove')
-    })
-  })
-
-  describe('column resizing', () => {
-    it('should not show resize handles by default', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns },
-      })
-      expect(wrapper.find('.mint-dataframe__resize-handle').exists()).toBe(false)
-    })
-
-    it('should show a resize handle per column when resizable', () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, resizable: true },
-      })
-      expect(wrapper.findAll('.mint-dataframe__resize-handle')).toHaveLength(mockColumns.length)
-    })
-
-    it('should emit update:columnWidths while dragging a handle', async () => {
-      const wrapper = mount(DataFrame, {
-        props: { data: mockData, columns: mockColumns, resizable: true },
-      })
-      const handle = wrapper.findAll('.mint-dataframe__resize-handle')[0]
-      await handle.trigger('mousedown', { clientX: 100 })
-      window.dispatchEvent(new MouseEvent('mousemove', { clientX: 220 }))
-      window.dispatchEvent(new MouseEvent('mouseup'))
-
-      const events = wrapper.emitted('update:columnWidths')
-      expect(events).toBeTruthy()
-      const widths = events?.[events.length - 1]?.[0] as Record<string, number>
-      expect(widths.name).toBeGreaterThanOrEqual(48) // MIN_COL_WIDTH floor
-    })
-
-    it('should honor controlled columnWidths', () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          resizable: true,
-          columnWidths: { name: 321 },
-        },
-      })
-      const header = wrapper.find('.mint-dataframe__th')
-      expect(header.attributes('style')).toContain('width: 321px')
-    })
-
-    it('should not trigger sort when the resize handle is clicked', async () => {
-      const wrapper = mount(DataFrame, {
-        props: {
-          data: mockData,
-          columns: [{ key: 'name', label: 'Name', sortable: true }],
-          resizable: true,
-        },
-      })
-      await wrapper.find('.mint-dataframe__resize-handle').trigger('click')
-      expect(wrapper.emitted('update:sort')).toBeUndefined()
-    })
-  })
-})