[#MUI-22] Création d'un composant datatable (#27)
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [x] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #27 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #27.
This commit is contained in:
92
.playground/pages/composant/datatable/datatable.vue
Normal file
92
.playground/pages/composant/datatable/datatable.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
{ id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
|
||||
{ id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
|
||||
{ id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
|
||||
]
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, unknown>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input
|
||||
v-model="filtreNom"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #header-ville>
|
||||
<select
|
||||
:value="filtreVille ?? ''"
|
||||
class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
|
||||
@change="filtreVille = ($event.target as HTMLSelectElement).value || null"
|
||||
>
|
||||
<option value="">Ville</option>
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,6 +24,7 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
* [#MUI-10] Création d'un composant bouton
|
||||
* [#MUI-2] Faire un MCP pour la librairie de composant
|
||||
* [#MUI-15] Création d'un composant drawer
|
||||
* [#MUI-22] Création d'un composant datatable
|
||||
|
||||
### Changed
|
||||
|
||||
|
||||
@@ -394,3 +394,59 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transp
|
||||
<p>Drawer plus large</p>
|
||||
</MalioDrawer>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, unknown>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Total pour la pagination |
|
||||
| `page` | `number` | `1` | Page courante (v-model) |
|
||||
| `perPage` | `number` | `10` | Lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Lignes cliquables (cursor pointer + hover) |
|
||||
| `tableClass` | `string` | `''` | Classes CSS sur `<table>` (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
|
||||
|
||||
**Events :** `update:page(value: number)`, `update:per-page(value: number)`, `row-click(item: Record<string, unknown>)`
|
||||
**Slots :** `#header-{key}` (filtre dans le `<th>`, placeholder = label), `#cell-{key}` (contenu du `<td>`), `#empty` (état vide)
|
||||
|
||||
```vue
|
||||
<!-- Avec filtres et pagination -->
|
||||
<MalioDataTable
|
||||
:columns="[{ key: 'nom', label: 'Nom' }, { key: 'ville', label: 'Ville' }]"
|
||||
:items="data"
|
||||
:total-items="total"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="router.push(`/contact/${$event.id}`)"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input v-model="filtreNom" placeholder="Nom" class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
|
||||
</template>
|
||||
<template #header-ville>
|
||||
<select v-model="filtreVille" class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
|
||||
<option value="">Ville</option>
|
||||
<option v-for="v in villes" :key="v" :value="v">{{ v }}</option>
|
||||
</select>
|
||||
</template>
|
||||
<template #cell-nom="{ item }">
|
||||
<strong>{{ item.nom }}</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
|
||||
<!-- Simple sans filtres -->
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="data"
|
||||
:total-items="total"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
/>
|
||||
```
|
||||
|
||||
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>
|
||||
195
app/story/datatable/datatable.story.vue
Normal file
195
app/story/datatable/datatable.story.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<Story title="Data/DataTable">
|
||||
<Variant title="Avec filtres et pagination">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input
|
||||
v-model="filtreNom"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none"
|
||||
>
|
||||
</template>
|
||||
<template #header-ville>
|
||||
<select
|
||||
:value="filtreVille ?? ''"
|
||||
class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none"
|
||||
@change="filtreVille = ($event.target as HTMLSelectElement).value || null"
|
||||
>
|
||||
<option value="">Ville</option>
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</select>
|
||||
</template>
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans filtres">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems"
|
||||
:total-items="simpleItems.length"
|
||||
v-model:page="pageSimple"
|
||||
v-model:per-page="perPageSimple"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="État vide">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="[]"
|
||||
:total-items="0"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Lignes non cliquables">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems.slice(0, 3)"
|
||||
:total-items="3"
|
||||
:row-clickable="false"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans filtre ni pagination">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems.slice(0, 5)"
|
||||
:total-items="0"
|
||||
:row-clickable="false"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
## Props détaillées
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML |
|
||||
| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, any>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Total pour la pagination |
|
||||
| `page` | `number` | `1` | Page courante (v-model) |
|
||||
| `perPage` | `number` | `10` | Lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Lignes cliquables |
|
||||
| `tableClass` | `string` | `''` | Classes CSS sur le wrapper (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Scope | Description |
|
||||
|------|-------|-------------|
|
||||
| `#header-{key}` | `{ column }` | Filtre dans le `<th>` (placeholder = label). Fallback : texte du label |
|
||||
| `#cell-{key}` | `{ item, column }` | Contenu du `<td>`. Fallback : `item[key]` |
|
||||
| `#empty` | — | Contenu état vide. Fallback : `emptyMessage` |
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:page` | `number` | Changement de page |
|
||||
| `update:per-page` | `number` | Changement du nb de lignes (reset page à 1) |
|
||||
| `row-click` | `Record<string, any>` | Clic sur une ligne |
|
||||
|
||||
## Pagination
|
||||
|
||||
- ≤ 5 pages : toutes affichées
|
||||
- \> 5 pages : page 1 … [voisin] **[courante]** [voisin] … dernière
|
||||
- Boutons Prev/Next toujours visibles, désactivés aux extrêmes
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `<th scope="col">` sur chaque en-tête
|
||||
- `<nav aria-label="Pagination">` autour de la pagination
|
||||
- Page courante avec `aria-current="page"`
|
||||
- Lignes cliquables : `tabindex="0"` + Enter/Space
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import MalioDataTable from '../../components/malio/datatable/DataTable.vue'
|
||||
|
||||
defineOptions({ name: 'DataTableStory' })
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const columnsSimple = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
]
|
||||
|
||||
const simpleItems = allItems.map(i => ({ nom: i.nom, ville: i.ville }))
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(5)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const pageSimple = ref(1)
|
||||
const perPageSimple = ref(10)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, unknown>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom}`)
|
||||
}
|
||||
</script>
|
||||
966
docs/superpowers/plans/2026-03-24-datatable.md
Normal file
966
docs/superpowers/plans/2026-03-24-datatable.md
Normal file
@@ -0,0 +1,966 @@
|
||||
# MalioDataTable Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Create a presentational data table component with pagination, slot-based column filters, and clickable rows.
|
||||
|
||||
**Architecture:** Single component `MalioDataTable` in `app/components/malio/datatable/DataTable.vue`. Uses `MalioSelect` internally for the per-page selector and `MalioButton variant="tertiary"` for Prev/Next pagination buttons. All data is provided by the parent via props; the component emits events for page/perPage changes and row clicks.
|
||||
|
||||
**Tech Stack:** Vue 3 Composition API, TypeScript, Tailwind CSS, tailwind-merge, Vitest + @vue/test-utils
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-03-24-datatable-design.md`
|
||||
|
||||
**Skill:** Follow `creating-malio-component` workflow (component → tests → playground → story → CHANGELOG → COMPONENTS.md)
|
||||
|
||||
---
|
||||
|
||||
## File Map
|
||||
|
||||
| File | Action | Responsibility |
|
||||
|------|--------|---------------|
|
||||
| `app/components/malio/datatable/DataTable.vue` | Create | Main component |
|
||||
| `app/components/malio/datatable/DataTable.test.ts` | Create | Unit tests |
|
||||
| `.playground/pages/composant/datatable/datatable.vue` | Create | Playground page |
|
||||
| `app/story/datatable/datatable.story.vue` | Create | Histoire story + docs |
|
||||
| `CHANGELOG.md` | Modify | Add entry |
|
||||
| `COMPONENTS.md` | Modify | Add documentation |
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Write DataTable component — table rendering (no pagination yet)
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/datatable/DataTable.vue`
|
||||
|
||||
- [ ] **Step 1: Create the component with table rendering only**
|
||||
|
||||
The component renders a `<table>` with `<thead>` and `<tbody>`. No pagination yet — just the table structure, columns, items, slots, and row click.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div :id="componentId" class="w-full" v-bind="attrs">
|
||||
<table :class="twMerge('w-full border-collapse', tableClass)">
|
||||
<thead>
|
||||
<tr class="bg-m-surface">
|
||||
<th
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
scope="col"
|
||||
class="border-b-2 border-m-border px-3 py-2 text-left align-middle"
|
||||
>
|
||||
<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="border-b border-m-border px-3 py-2"
|
||||
>
|
||||
<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-8 text-center text-m-muted"
|
||||
>
|
||||
<slot name="empty">{{ emptyMessage }}</slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs, useId } from 'vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
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, any>[]
|
||||
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', value: number): void
|
||||
(e: 'update:per-page', value: number): void
|
||||
(e: 'row-click', item: Record<string, any>): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-datatable-${generatedId}`)
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify the file was created**
|
||||
|
||||
Run: `ls app/components/malio/datatable/DataTable.vue`
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Write tests for table rendering
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/datatable/DataTable.test.ts`
|
||||
|
||||
- [ ] **Step 1: Write tests for table rendering, slots, row click, empty state**
|
||||
|
||||
```ts
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
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, any>[]
|
||||
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, any>) {
|
||||
return mount(DataTableForTest, {
|
||||
props: {
|
||||
columns: defaultColumns,
|
||||
items: defaultItems,
|
||||
totalItems: 3,
|
||||
...props,
|
||||
},
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
MalioSelect: {
|
||||
template: '<div data-test="malio-select"><slot /></div>',
|
||||
props: ['modelValue', 'options'],
|
||||
},
|
||||
MalioButton: {
|
||||
template: '<button data-test="malio-button" :disabled="disabled" @click="$emit(\'click\', $event)"><slot>{{ label }}</slot></button>',
|
||||
props: ['label', 'disabled', 'variant', 'buttonClass'],
|
||||
emits: ['click'],
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
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 }: any) => `<strong>${item.nom}</strong>`,
|
||||
})
|
||||
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')
|
||||
})
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run tests to verify they pass**
|
||||
|
||||
Run: `npm run test -- --run app/components/malio/datatable/DataTable.test.ts`
|
||||
Expected: All tests PASS
|
||||
|
||||
- [ ] **Step 3: Fix any failures and re-run**
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Add pagination to the component
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/datatable/DataTable.vue`
|
||||
|
||||
- [ ] **Step 1: Add pagination computed logic and template**
|
||||
|
||||
Add these computed properties to the `<script>`:
|
||||
|
||||
```ts
|
||||
import MalioSelect from '../select/Select.vue'
|
||||
import MalioButton from '../button/Button.vue'
|
||||
|
||||
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
|
||||
})
|
||||
```
|
||||
|
||||
Add this template block after `</table>` and before closing `</div>`:
|
||||
|
||||
```html
|
||||
<div
|
||||
v-if="totalItems > 0"
|
||||
class="flex items-center justify-between border-t border-m-border px-3 py-2"
|
||||
data-test="pagination"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-m-muted">Lignes</span>
|
||||
<MalioSelect
|
||||
:model-value="perPage"
|
||||
:options="perPageSelectOptions"
|
||||
min-width="w-20"
|
||||
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 items-center 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>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify component renders without errors**
|
||||
|
||||
Run: `npm run test -- --run app/components/malio/datatable/DataTable.test.ts`
|
||||
Expected: Existing tests still pass
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Write pagination tests
|
||||
|
||||
**Files:**
|
||||
- Modify: `app/components/malio/datatable/DataTable.test.ts`
|
||||
|
||||
- [ ] **Step 1: Add pagination test suite**
|
||||
|
||||
Add these test blocks to the existing test file:
|
||||
|
||||
```ts
|
||||
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])
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run all tests**
|
||||
|
||||
Run: `npm run test -- --run app/components/malio/datatable/DataTable.test.ts`
|
||||
Expected: All tests PASS
|
||||
|
||||
- [ ] **Step 3: Fix any failures and re-run**
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Run full test suite + lint
|
||||
|
||||
- [ ] **Step 1: Run all project tests**
|
||||
|
||||
Run: `npm run test`
|
||||
Expected: All tests pass
|
||||
|
||||
- [ ] **Step 2: Run lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: No errors
|
||||
|
||||
- [ ] **Step 3: Fix any issues and re-run**
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Create playground page
|
||||
|
||||
**Files:**
|
||||
- Create: `.playground/pages/composant/datatable/datatable.vue`
|
||||
|
||||
- [ ] **Step 1: Create playground page with demo variants**
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
{ id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
|
||||
{ id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
|
||||
{ id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
|
||||
]
|
||||
|
||||
const villeOptions = [
|
||||
{ label: 'Paris', value: 'Paris' },
|
||||
{ label: 'Lyon', value: 'Lyon' },
|
||||
{ label: 'Marseille', value: 'Marseille' },
|
||||
]
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, any>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<MalioInputText
|
||||
v-model="filtreNom"
|
||||
placeholder="Nom"
|
||||
group-class="mt-0"
|
||||
input-class="border-0 border-b border-m-border rounded-none bg-transparent px-0 text-sm"
|
||||
label-class="hidden"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #header-ville>
|
||||
<MalioSelect
|
||||
v-model="filtreVille"
|
||||
:options="villeOptions"
|
||||
empty-option-label="Ville"
|
||||
min-width="w-full"
|
||||
rounded="rounded-none"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify page renders**
|
||||
|
||||
Run: `npm run dev` and navigate to `/composant/datatable/datatable`
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Create Histoire story
|
||||
|
||||
**Files:**
|
||||
- Create: `app/story/datatable/datatable.story.vue`
|
||||
|
||||
- [ ] **Step 1: Create story with variants and docs**
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Story title="Data/DataTable">
|
||||
<Variant title="Avec filtres et pagination">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<MalioInputText
|
||||
v-model="filtreNom"
|
||||
placeholder="Nom"
|
||||
group-class="mt-0"
|
||||
input-class="border-0 border-b border-m-border rounded-none bg-transparent px-0 text-sm"
|
||||
label-class="hidden"
|
||||
/>
|
||||
</template>
|
||||
<template #header-ville>
|
||||
<MalioSelect
|
||||
v-model="filtreVille"
|
||||
:options="villeOptions"
|
||||
empty-option-label="Ville"
|
||||
min-width="w-full"
|
||||
rounded="rounded-none"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
/>
|
||||
</template>
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans filtres">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems"
|
||||
:total-items="simpleItems.length"
|
||||
v-model:page="pageSimple"
|
||||
v-model:per-page="perPageSimple"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="État vide">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="[]"
|
||||
:total-items="0"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Lignes non cliquables">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems.slice(0, 3)"
|
||||
:total-items="3"
|
||||
:row-clickable="false"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
## Props détaillées
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML |
|
||||
| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, any>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Total pour la pagination |
|
||||
| `page` | `number` | `1` | Page courante (v-model) |
|
||||
| `perPage` | `number` | `10` | Lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Lignes cliquables |
|
||||
| `tableClass` | `string` | `''` | Classes CSS sur le wrapper (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Scope | Description |
|
||||
|------|-------|-------------|
|
||||
| `#header-{key}` | `{ column }` | Filtre dans le `<th>` (placeholder = label). Fallback : texte du label |
|
||||
| `#cell-{key}` | `{ item, column }` | Contenu du `<td>`. Fallback : `item[key]` |
|
||||
| `#empty` | — | Contenu état vide. Fallback : `emptyMessage` |
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:page` | `number` | Changement de page |
|
||||
| `update:per-page` | `number` | Changement du nb de lignes (reset page à 1) |
|
||||
| `row-click` | `Record<string, any>` | Clic sur une ligne |
|
||||
|
||||
## Pagination
|
||||
|
||||
- ≤ 5 pages : toutes affichées
|
||||
- \> 5 pages : page 1 … [voisin] **[courante]** [voisin] … dernière
|
||||
- Boutons Prev/Next toujours visibles, désactivés aux extrêmes
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `<th scope="col">` sur chaque en-tête
|
||||
- `<nav aria-label="Pagination">` autour de la pagination
|
||||
- Page courante avec `aria-current="page"`
|
||||
- Lignes cliquables : `tabindex="0"` + Enter/Space
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import MalioDataTable from '../../components/malio/datatable/DataTable.vue'
|
||||
import MalioInputText from '../../components/malio/input/InputText.vue'
|
||||
import MalioSelect from '../../components/malio/select/Select.vue'
|
||||
|
||||
defineOptions({ name: 'DataTableStory' })
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const columnsSimple = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
]
|
||||
|
||||
const simpleItems = allItems.map(i => ({ nom: i.nom, ville: i.ville }))
|
||||
|
||||
const villeOptions = [
|
||||
{ label: 'Paris', value: 'Paris' },
|
||||
{ label: 'Lyon', value: 'Lyon' },
|
||||
{ label: 'Marseille', value: 'Marseille' },
|
||||
]
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(5)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const pageSimple = ref(1)
|
||||
const perPageSimple = ref(10)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, any>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom}`)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify story renders**
|
||||
|
||||
Run: `npm run story:dev`
|
||||
|
||||
---
|
||||
|
||||
### Task 8: Update CHANGELOG.md and COMPONENTS.md
|
||||
|
||||
**Files:**
|
||||
- Modify: `CHANGELOG.md`
|
||||
- Modify: `COMPONENTS.md`
|
||||
|
||||
- [ ] **Step 1: Add CHANGELOG entry**
|
||||
|
||||
Add to `### Added` section:
|
||||
```
|
||||
* [#MUI-22] Création d'un composant datatable
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add COMPONENTS.md section**
|
||||
|
||||
Add a `## MalioDataTable` section after `## MalioDrawer` with the component documentation: props table, events, slots, pagination behavior, and 2 usage examples (with filters, simple).
|
||||
|
||||
- [ ] **Step 3: Commit all changes**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/datatable/ app/story/datatable/ .playground/pages/composant/datatable/ CHANGELOG.md COMPONENTS.md
|
||||
git commit -m "feat(MUI-22): création du composant MalioDataTable"
|
||||
```
|
||||
192
docs/superpowers/specs/2026-03-24-datatable-design.md
Normal file
192
docs/superpowers/specs/2026-03-24-datatable-design.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# MalioDataTable — Design Spec
|
||||
|
||||
Composant de tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
**Ticket :** MUI-22
|
||||
**Branche :** `feature/MUI-22-developper-le-composant-datatable`
|
||||
|
||||
## Architecture
|
||||
|
||||
Composant unique `MalioDataTable` dans `app/components/malio/datatable/DataTable.vue`. Pas de décomposition — la pagination est intégrée dans le composant.
|
||||
|
||||
Le composant est **presentational** : il ne fait aucun fetch. Le parent fournit les données (`items`) et le total (`totalItems`), et réagit aux events de pagination/filtre pour relancer ses propres requêtes API.
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du wrapper |
|
||||
| `columns` | `Column[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, any>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Nombre total d'items (pour calculer le nb de pages) |
|
||||
| `page` | `number` | `1` | Page courante, 1-based (v-model) |
|
||||
| `perPage` | `number` | `10` | Nombre de lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Rend les lignes cliquables (cursor pointer + hover) |
|
||||
| `tableClass` | `string` | `''` | Classes CSS additionnelles sur `<table>` (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message affiché quand `items` est vide |
|
||||
|
||||
### Type Column
|
||||
|
||||
```ts
|
||||
type Column = {
|
||||
key: string // Clé correspondant à item[key]
|
||||
label: string // Texte affiché dans le <th> (fallback si pas de slot header)
|
||||
}
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:page` | `number` | Changement de page (pagination ou Prev/Next) |
|
||||
| `update:per-page` | `number` | Changement du nombre de lignes par page |
|
||||
| `row-click` | `Record<string, any>` | Clic sur une ligne (l'item de la ligne) |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Scope | Description |
|
||||
|------|-------|-------------|
|
||||
| `#header-{key}` | `{ column }` | Contenu du `<th>` — filtre (input, select…). Si absent, affiche `column.label` en texte |
|
||||
| `#cell-{key}` | `{ item, column }` | Contenu du `<td>`. Si absent, affiche `item[column.key]` en texte |
|
||||
| `#empty` | — | Contenu affiché quand `items` est vide. Si absent, affiche `emptyMessage` |
|
||||
|
||||
## Structure HTML
|
||||
|
||||
```
|
||||
<div :id="id"> ← wrapper
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col" scope="col"> ← une seule ligne d'en-tête
|
||||
slot #header-{key} ← filtre (placeholder = nom colonne)
|
||||
OU label texte ← si pas de slot
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item" ← cliquable si rowClickable
|
||||
tabindex="0" ← (si rowClickable) navigation clavier
|
||||
@click="emit row-click"
|
||||
@keydown.enter/space="emit row-click">
|
||||
<td v-for="col">
|
||||
slot #cell-{key} ← contenu custom
|
||||
OU item[col.key] ← texte brut
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!items.length"> ← état vide
|
||||
<td :colspan="columns.length">
|
||||
slot #empty OU emptyMessage
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="totalItems > 0"> ← barre de pagination (masquée si aucune donnée)
|
||||
<MalioSelect /> ← sélecteur nb lignes (options mappées depuis perPageOptions)
|
||||
<nav aria-label="Pagination"> ← numéros de page + Prev/Next
|
||||
<MalioButton variant="tertiary" label="Prev" /> ← disabled si page 1
|
||||
<button> pour chaque numéro de page ← éléments <button>
|
||||
<span aria-hidden="true">…</span> ← ellipsis
|
||||
<MalioButton variant="tertiary" label="Next" /> ← disabled si dernière page
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Logique de pagination (troncature)
|
||||
|
||||
### Règles
|
||||
|
||||
- **≤ 5 pages** : afficher toutes les pages, pas d'ellipsis
|
||||
- **> 5 pages** : toujours afficher page 1 et dernière page, **1 voisin** de chaque côté de la page active, ellipsis `…` quand écart > 1
|
||||
- **Prev** : `MalioButton variant="tertiary"`, toujours visible, `disabled` sur page 1
|
||||
- **Next** : `MalioButton variant="tertiary"`, toujours visible, `disabled` sur dernière page
|
||||
- **Changement de `perPage`** : émet automatiquement `update:page` avec `1` (reset à la première page)
|
||||
- **`totalItems = 0`** : la barre de pagination est masquée entièrement
|
||||
|
||||
### Exemples
|
||||
|
||||
```
|
||||
≤ 5 pages (toutes affichées) :
|
||||
Page 1/3 : Prev(disabled) [1] 2 3 Next
|
||||
Page 2/5 : Prev 1 [2] 3 4 5 Next
|
||||
Page 5/5 : Prev 1 2 3 4 [5] Next(disabled)
|
||||
|
||||
> 5 pages (troncature 1 voisin) :
|
||||
Page 1/20 : Prev(disabled) [1] 2 … 20 Next
|
||||
Page 2/20 : Prev 1 [2] 3 … 20 Next
|
||||
Page 3/20 : Prev 1 2 [3] 4 … 20 Next
|
||||
Page 4/20 : Prev 1 … 3 [4] 5 … 20 Next
|
||||
Page 7/20 : Prev 1 … 6 [7] 8 … 20 Next
|
||||
Page 18/20 : Prev 1 … 17 [18] 19 20 Next
|
||||
Page 19/20 : Prev 1 … 18 [19] 20 Next
|
||||
Page 20/20 : Prev 1 … 19 [20] Next(disabled)
|
||||
```
|
||||
|
||||
## En-têtes — logique du `<th>`
|
||||
|
||||
Chaque `<th>` vérifie si le slot `#header-{key}` est fourni :
|
||||
- **Slot fourni** → rend le slot (le consommateur y met un `MalioInputText`, `MalioSelect`, etc. avec le placeholder qui sert de label de colonne)
|
||||
- **Slot absent** → rend `column.label` en texte (`font-semibold text-m-primary`)
|
||||
|
||||
Pas de label séparé au-dessus du filtre. Le placeholder de l'input/select fait office de nom de colonne.
|
||||
|
||||
## Composants Malio utilisés en interne
|
||||
|
||||
- `MalioSelect` — sélecteur du nombre de lignes par page. Les `perPageOptions` sont mappés au format `{ label: string, value: number }[]` attendu par MalioSelect (ex: `{ label: '10', value: 10 }`)
|
||||
- `MalioButton variant="tertiary"` — boutons Prev / Next
|
||||
|
||||
## Exemple d'utilisation consommateur
|
||||
|
||||
```vue
|
||||
<MalioDataTable
|
||||
:columns="[
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]"
|
||||
:items="data"
|
||||
:total-items="total"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="router.push(`/contact/${$event.id}`)"
|
||||
>
|
||||
<!-- Filtre texte — placeholder sert de label -->
|
||||
<template #header-nom>
|
||||
<MalioInputText v-model="filtres.nom" placeholder="Nom" />
|
||||
</template>
|
||||
|
||||
<!-- Filtre select — placeholder sert de label -->
|
||||
<template #header-ville>
|
||||
<MalioSelect v-model="filtres.ville" :options="villes"
|
||||
empty-option-label="Ville" />
|
||||
</template>
|
||||
|
||||
<!-- Pas de slot header pour "montant" → affiche "Montant" en texte -->
|
||||
|
||||
<!-- Cellule custom -->
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
```
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `<table>` élément natif (sémantique table implicite)
|
||||
- `<th scope="col">` sur chaque en-tête
|
||||
- Pagination dans un `<nav aria-label="Pagination">`
|
||||
- Numéros de page : éléments `<button>`, page courante avec `aria-current="page"`
|
||||
- Ellipsis `…` : `<span aria-hidden="true">` (ignoré par les lecteurs d'écran)
|
||||
- Boutons Prev/Next avec `aria-label` explicites ("Page précédente" / "Page suivante")
|
||||
- Lignes cliquables : `tabindex="0"` + gestion `Enter`/`Space` pour navigation clavier (pas de `role="link"` — on garde la sémantique `<tr>` native)
|
||||
|
||||
## Styles
|
||||
|
||||
- En-têtes : `bg-m-surface`, label en `text-m-primary font-semibold`
|
||||
- Bordures : `border-m-border`
|
||||
- Lignes hover : `hover:bg-m-bg` (si `rowClickable`)
|
||||
- Ligne cursor : `cursor-pointer` (si `rowClickable`)
|
||||
- Page active : `bg-m-btn-primary text-white rounded`
|
||||
- Boutons Prev/Next : `MalioButton variant="tertiary"`
|
||||
- Message vide : `text-m-muted text-center`, `<td>` avec `colspan` sur toute la largeur
|
||||
Reference in New Issue
Block a user