feat : wip ajout du composant Datatable
This commit is contained in:
278
app/components/malio/datatable/DataTable.test.ts
Normal file
278
app/components/malio/datatable/DataTable.test.ts
Normal file
@@ -0,0 +1,278 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { h } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import DataTable from './DataTable.vue'
|
||||
|
||||
type DataTableProps = {
|
||||
id?: string
|
||||
columns?: { key: string; label: string }[]
|
||||
items?: Record<string, unknown>[]
|
||||
totalItems?: number
|
||||
page?: number
|
||||
perPage?: number
|
||||
perPageOptions?: number[]
|
||||
rowClickable?: boolean
|
||||
tableClass?: string
|
||||
emptyMessage?: string
|
||||
}
|
||||
|
||||
const DataTableForTest = DataTable as DefineComponent<DataTableProps>
|
||||
|
||||
const defaultColumns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
]
|
||||
|
||||
const defaultItems = [
|
||||
{ nom: 'Dupont', ville: 'Paris' },
|
||||
{ nom: 'Martin', ville: 'Lyon' },
|
||||
{ nom: 'Bernard', ville: 'Marseille' },
|
||||
]
|
||||
|
||||
function mountComponent(props: DataTableProps = {}, slots?: Record<string, unknown>) {
|
||||
return mount(DataTableForTest, {
|
||||
props: {
|
||||
columns: defaultColumns,
|
||||
items: defaultItems,
|
||||
totalItems: 3,
|
||||
...props,
|
||||
},
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
MalioSelect: {
|
||||
name: 'MalioSelect',
|
||||
template: '<div data-test="malio-select"><slot /></div>',
|
||||
props: ['modelValue', 'options'],
|
||||
emits: ['update:modelValue'],
|
||||
},
|
||||
MalioButton: {
|
||||
template: '<button v-bind="$attrs" :disabled="disabled" @click="$emit(\'click\', $event)"><slot>{{ label }}</slot></button>',
|
||||
props: ['label', 'disabled', 'variant', 'buttonClass'],
|
||||
emits: ['click'],
|
||||
inheritAttrs: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioDataTable', () => {
|
||||
describe('Table rendering', () => {
|
||||
it('renders column headers as text when no header slot', () => {
|
||||
const wrapper = mountComponent()
|
||||
const headers = wrapper.findAll('th')
|
||||
expect(headers).toHaveLength(2)
|
||||
expect(headers[0].text()).toBe('Nom')
|
||||
expect(headers[1].text()).toBe('Ville')
|
||||
})
|
||||
|
||||
it('renders header slot when provided', () => {
|
||||
const wrapper = mountComponent({}, {
|
||||
'header-nom': '<input data-test="filter-nom" placeholder="Nom" />',
|
||||
})
|
||||
expect(wrapper.find('[data-test="filter-nom"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders items as rows', () => {
|
||||
const wrapper = mountComponent()
|
||||
const rows = wrapper.findAll('[data-test="row"]')
|
||||
expect(rows).toHaveLength(3)
|
||||
expect(rows[0].text()).toContain('Dupont')
|
||||
expect(rows[0].text()).toContain('Paris')
|
||||
})
|
||||
|
||||
it('renders cell slot when provided', () => {
|
||||
const wrapper = mountComponent({}, {
|
||||
'cell-nom': ({ item }: { item: Record<string, unknown> }) => h('strong', String(item.nom)),
|
||||
})
|
||||
const firstRow = wrapper.findAll('[data-test="row"]')[0]
|
||||
expect(firstRow.find('strong').text()).toBe('Dupont')
|
||||
})
|
||||
|
||||
it('renders empty message when items is empty', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Aucune donnée')
|
||||
})
|
||||
|
||||
it('renders custom empty message', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0, emptyMessage: 'Rien ici' })
|
||||
expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Rien ici')
|
||||
})
|
||||
|
||||
it('renders empty slot when provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ items: [], totalItems: 0 },
|
||||
{ empty: '<p data-test="custom-empty">Vide</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="custom-empty"]').text()).toBe('Vide')
|
||||
})
|
||||
|
||||
it('empty row has colspan equal to columns length', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
const td = wrapper.find('[data-test="empty-row"] td')
|
||||
expect(td.attributes('colspan')).toBe('2')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Row click', () => {
|
||||
it('emits row-click with item on row click', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('click')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('emits row-click on Enter key', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.enter')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('emits row-click on Space key', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.space')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('rows have tabindex when clickable', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBe('0')
|
||||
})
|
||||
|
||||
it('rows have cursor-pointer when clickable', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].classes()).toContain('cursor-pointer')
|
||||
})
|
||||
|
||||
it('rows are not clickable when rowClickable is false', async () => {
|
||||
const wrapper = mountComponent({ rowClickable: false })
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('click')
|
||||
expect(wrapper.emitted('row-click')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('rows have no tabindex when not clickable', () => {
|
||||
const wrapper = mountComponent({ rowClickable: false })
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('th elements have scope="col"', () => {
|
||||
const wrapper = mountComponent()
|
||||
const ths = wrapper.findAll('th')
|
||||
ths.forEach(th => {
|
||||
expect(th.attributes('scope')).toBe('col')
|
||||
})
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent()
|
||||
const id = wrapper.find('div').attributes('id')
|
||||
expect(id).toMatch(/^malio-datatable-/)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ id: 'my-table' })
|
||||
expect(wrapper.find('div').attributes('id')).toBe('my-table')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Pagination', () => {
|
||||
it('hides pagination when totalItems is 0', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
expect(wrapper.find('[data-test="pagination"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows pagination when totalItems > 0', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="pagination"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders all pages when totalPages <= 5', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10 })
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
expect(wrapper.find(`[data-test="page-${i}"]`).exists()).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('highlights current page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
expect(wrapper.find('[data-test="page-3"]').attributes('aria-current')).toBe('page')
|
||||
})
|
||||
|
||||
it('emits update:page on page button click', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
|
||||
await wrapper.find('[data-test="page-3"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([3])
|
||||
})
|
||||
|
||||
it('Prev button is disabled on page 1', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
|
||||
expect(wrapper.find('[data-test="prev-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('Next button is disabled on last page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 5 })
|
||||
expect(wrapper.find('[data-test="next-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('Prev button emits update:page with page - 1', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
await wrapper.find('[data-test="prev-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
|
||||
})
|
||||
|
||||
it('Next button emits update:page with page + 1', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
await wrapper.find('[data-test="next-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([4])
|
||||
})
|
||||
|
||||
it('shows ellipsis for truncated pages (> 5 pages)', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
const ellipsis = wrapper.findAll('[aria-hidden="true"]')
|
||||
expect(ellipsis.length).toBeGreaterThan(0)
|
||||
expect(ellipsis[0].text()).toBe('…')
|
||||
})
|
||||
|
||||
it('always shows first and last page when > 5 pages', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
expect(wrapper.find('[data-test="page-1"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-20"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('shows 1 neighbor on each side of current page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
expect(wrapper.find('[data-test="page-9"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-10"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-11"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('pagination nav has aria-label', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="pagination-nav"]').attributes('aria-label')).toBe('Pagination')
|
||||
})
|
||||
|
||||
it('Prev button has aria-label "Page précédente"', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="prev-button"]').attributes('aria-label')).toBe('Page précédente')
|
||||
})
|
||||
|
||||
it('Next button has aria-label "Page suivante"', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="next-button"]').attributes('aria-label')).toBe('Page suivante')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Per-page selector', () => {
|
||||
it('emits update:per-page and reset page to 1 on change', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 100, perPage: 10, page: 5 })
|
||||
const select = wrapper.findComponent({ name: 'MalioSelect' })
|
||||
select.vm.$emit('update:modelValue', 25)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:per-page')?.[0]).toEqual([25])
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([1])
|
||||
})
|
||||
})
|
||||
})
|
||||
222
app/components/malio/datatable/DataTable.vue
Normal file
222
app/components/malio/datatable/DataTable.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div :id="componentId" class="w-full" v-bind="attrs">
|
||||
<table :class="twMerge('w-full border-separate border-spacing-0 border border-black rounded-malio overflow-hidden', tableClass)">
|
||||
<thead>
|
||||
<tr class="bg-m-surface">
|
||||
<th
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
scope="col"
|
||||
class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots[`header-${col.key}`]"
|
||||
:name="`header-${col.key}`"
|
||||
:column="col"
|
||||
/>
|
||||
<span v-else class="font-semibold text-m-primary">{{ col.label }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:class="rowClickable ? 'cursor-pointer hover:bg-m-bg' : ''"
|
||||
:tabindex="rowClickable ? 0 : undefined"
|
||||
data-test="row"
|
||||
@click="rowClickable ? emit('row-click', item) : undefined"
|
||||
@keydown.enter="rowClickable ? emit('row-click', item) : undefined"
|
||||
@keydown.space.prevent="rowClickable ? emit('row-click', item) : undefined"
|
||||
>
|
||||
<td
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="px-3 py-4 text-[18px] text-m-primary"
|
||||
:class="index < items.length - 1 ? 'border-b border-black' : ''"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots[`cell-${col.key}`]"
|
||||
:name="`cell-${col.key}`"
|
||||
:item="item"
|
||||
:column="col"
|
||||
/>
|
||||
<template v-else>{{ item[col.key] }}</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!items.length" data-test="empty-row">
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
class="px-3 py-4 text-center text-m-muted"
|
||||
>
|
||||
<slot name="empty">{{ emptyMessage }}</slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
v-if="totalItems > 0"
|
||||
class="flex justify-between pt-2"
|
||||
data-test="pagination"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<span class="whitespace-nowrap text-[16px] text-black self-center">Lignes :</span>
|
||||
<MalioSelect
|
||||
:model-value="perPage"
|
||||
:options="perPageSelectOptions"
|
||||
min-width="w-20 !mt-0"
|
||||
rounded="rounded"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
text-label="text-xs"
|
||||
data-test="per-page-select"
|
||||
@update:model-value="onPerPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Pagination" class="flex gap-1" data-test="pagination-nav">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
label="Prev"
|
||||
:disabled="page <= 1"
|
||||
button-class="h-8 w-auto min-w-0 px-3 text-sm"
|
||||
aria-label="Page précédente"
|
||||
data-test="prev-button"
|
||||
@click="goToPage(page - 1)"
|
||||
/>
|
||||
|
||||
<template v-for="(p, idx) in visiblePages" :key="idx">
|
||||
<span
|
||||
v-if="p === '...'"
|
||||
class="px-1 text-sm text-m-muted"
|
||||
aria-hidden="true"
|
||||
>…</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="h-8 min-w-[2rem] rounded px-2 text-sm transition-colors"
|
||||
:class="p === page
|
||||
? 'bg-m-btn-primary text-white font-semibold'
|
||||
: 'text-m-text hover:bg-m-bg'"
|
||||
:aria-current="p === page ? 'page' : undefined"
|
||||
:data-test="`page-${p}`"
|
||||
@click="goToPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
label="Next"
|
||||
:disabled="page >= totalPages"
|
||||
button-class="h-8 w-auto min-w-0 px-3 text-sm"
|
||||
aria-label="Page suivante"
|
||||
data-test="next-button"
|
||||
@click="goToPage(page + 1)"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs, useId } from 'vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import MalioSelect from '../select/Select.vue'
|
||||
import MalioButton from '../button/Button.vue'
|
||||
|
||||
defineOptions({ name: 'MalioDataTable', inheritAttrs: false })
|
||||
|
||||
type DataTableColumn = {
|
||||
key: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
columns: DataTableColumn[]
|
||||
items: Record<string, unknown>[]
|
||||
totalItems: number
|
||||
page?: number
|
||||
perPage?: number
|
||||
perPageOptions?: number[]
|
||||
rowClickable?: boolean
|
||||
tableClass?: string
|
||||
emptyMessage?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
perPageOptions: () => [10, 25, 50],
|
||||
rowClickable: true,
|
||||
tableClass: '',
|
||||
emptyMessage: 'Aucune donnée',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:page' | 'update:per-page', value: number): void
|
||||
(e: 'row-click', item: Record<string, unknown>): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-datatable-${generatedId}`)
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.perPage)))
|
||||
|
||||
const perPageSelectOptions = computed(() =>
|
||||
props.perPageOptions.map(n => ({ label: String(n), value: n }))
|
||||
)
|
||||
|
||||
function onPerPageChange(value: string | number | null) {
|
||||
if (value !== null) {
|
||||
emit('update:per-page', Number(value))
|
||||
emit('update:page', 1)
|
||||
}
|
||||
}
|
||||
|
||||
function goToPage(page: number) {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
emit('update:page', page)
|
||||
}
|
||||
}
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const total = totalPages.value
|
||||
const current = props.page
|
||||
|
||||
if (total <= 5) {
|
||||
return Array.from({ length: total }, (_, i) => i + 1)
|
||||
}
|
||||
|
||||
const pages: (number | '...')[] = []
|
||||
pages.push(1)
|
||||
|
||||
if (current > 3) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
const start = Math.max(2, current - 1)
|
||||
const end = Math.min(total - 1, current + 1)
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
if (current < total - 2) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
if (total > 1) {
|
||||
pages.push(total)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user