@pyreweb/fabric 1.2.6

package/src/components/organisms/FDataTable/FDataTable.stories.js

@@ -0,0 +1,370 @@
+import FDataTable from './FDataTable.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FBadge from '../../atoms/FBadge/FBadge.vue';
+
+export default {
+	title: 'Organisms/FDataTable',
+	component: FDataTable,
+	tags: ['autodocs'],
+	argTypes: {
+		data: {
+			control: 'object',
+			description: 'Données à afficher'
+		},
+		columns: {
+			control: 'object',
+			description: 'Définition des colonnes'
+		},
+		loading: {
+			control: 'boolean',
+			description: 'État de chargement'
+		},
+		searchable: {
+			control: 'boolean',
+			description: 'Activer la recherche'
+		},
+		paginated: {
+			control: 'boolean',
+			description: 'Activer la pagination'
+		},
+		selectable: {
+			control: 'boolean',
+			description: 'Activer la sélection'
+		},
+		striped: {
+			control: 'boolean',
+			description: 'Lignes alternées'
+		},
+		hoverable: {
+			control: 'boolean',
+			description: 'Effet au survol'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Bordure'
+		}
+	}
+};
+
+const sampleData = [
+	{
+		id: 1,
+		name: 'Alice Martin',
+		email: 'alice@example.com',
+		role: 'Admin',
+		status: 'active'
+	},
+	{
+		id: 2,
+		name: 'Bob Dupont',
+		email: 'bob@example.com',
+		role: 'User',
+		status: 'active'
+	},
+	{
+		id: 3,
+		name: 'Claire Durand',
+		email: 'claire@example.com',
+		role: 'User',
+		status: 'inactive'
+	},
+	{
+		id: 4,
+		name: 'David Petit',
+		email: 'david@example.com',
+		role: 'Editor',
+		status: 'active'
+	},
+	{
+		id: 5,
+		name: 'Emma Bernard',
+		email: 'emma@example.com',
+		role: 'User',
+		status: 'pending'
+	}
+];
+
+const columns = [
+	{ key: 'name', label: 'Nom' },
+	{ key: 'email', label: 'Email' },
+	{ key: 'role', label: 'Rôle' },
+	{ key: 'status', label: 'Statut' }
+];
+
+const Template = (args, { argTypes }) => ({
+	components: { FDataTable },
+	props: Object.keys(argTypes),
+	template: '<FDataTable v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	data: sampleData,
+	columns
+};
+
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+	data: sampleData,
+	columns,
+	searchable: true
+};
+
+export const WithPagination = () => ({
+	components: { FDataTable },
+	data() {
+		return {
+			columns,
+			data: Array.from({ length: 50 }, (_, i) => ({
+				id: i + 1,
+				name: `Utilisateur ${i + 1}`,
+				email: `user${i + 1}@example.com`,
+				role: ['Admin', 'User', 'Editor'][i % 3],
+				status: ['active', 'inactive', 'pending'][i % 3]
+			}))
+		};
+	},
+	template:
+		'<FDataTable :data="data" :columns="columns" paginated :perPage="10" />'
+});
+
+export const WithSelection = () => ({
+	components: { FDataTable },
+	data() {
+		return {
+			columns,
+			data: sampleData,
+			selected: []
+		};
+	},
+	template: `
+		<div>
+			<FDataTable
+				:data="data"
+				:columns="columns"
+				selectable
+				:selected.sync="selected"
+			/>
+			<p class="mt-4 text-sm text-neutral-600">
+				Sélectionnés: {{ selected.join(', ') || 'Aucun' }}
+			</p>
+		</div>
+	`
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+	data: sampleData,
+	columns,
+	loading: true
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+	data: [],
+	columns
+};
+
+export const Striped = Template.bind({});
+Striped.args = {
+	data: sampleData,
+	columns,
+	striped: true
+};
+
+export const Bordered = Template.bind({});
+Bordered.args = {
+	data: sampleData,
+	columns,
+	bordered: true
+};
+
+export const CustomCells = () => ({
+	components: { FDataTable, FBadge },
+	data() {
+		return {
+			columns: [
+				{ key: 'name', label: 'Nom' },
+				{ key: 'email', label: 'Email' },
+				{ key: 'status', label: 'Statut' }
+			],
+			data: sampleData
+		};
+	},
+	template: `
+		<FDataTable :data="data" :columns="columns">
+			<template #cell-status="{ value }">
+				<FBadge
+					:content="value"
+					:variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'"
+				/>
+			</template>
+		</FDataTable>
+	`
+});
+
+export const WithActions = () => ({
+	components: { FDataTable, FButton },
+	data() {
+		return {
+			columns,
+			data: sampleData
+		};
+	},
+	methods: {
+		handleAction(action, item) {
+			alert(`${action}: ${item.name}`);
+		}
+	},
+	template: `
+		<FDataTable :data="data" :columns="columns" selectable searchable>
+			<template #actions="{ selectedItems }">
+				<FButton
+					v-if="selectedItems.length > 0"
+					variant="danger"
+					size="small"
+					@click="handleAction('delete', selectedItems[0])"
+				>
+					Supprimer ({{ selectedItems.length }})
+				</FButton>
+			</template>
+		</FDataTable>
+	`
+});
+
+export const FullFeatures = () => ({
+	components: { FDataTable, FButton, FBadge },
+	data() {
+		return {
+			columns: [
+				{ key: 'name', label: 'Nom' },
+				{ key: 'email', label: 'Email' },
+				{ key: 'role', label: 'Rôle' },
+				{ key: 'status', label: 'Statut' }
+			],
+			data: Array.from({ length: 30 }, (_, i) => ({
+				id: i + 1,
+				name: `Utilisateur ${i + 1}`,
+				email: `user${i + 1}@example.com`,
+				role: ['Admin', 'User', 'Editor'][i % 3],
+				status: ['active', 'inactive', 'pending'][i % 3]
+			})),
+			selected: []
+		};
+	},
+	template: `
+		<FDataTable
+			:data="data"
+			:columns="columns"
+			:selected.sync="selected"
+			selectable
+			searchable
+			paginated
+			striped
+			:perPage="10"
+		>
+			<template #cell-status="{ value }">
+				<FBadge
+					:content="value"
+					:variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'"
+				/>
+			</template>
+			<template #actions="{ selectedItems }">
+				<FButton v-if="selectedItems.length > 0" variant="outline" size="small">
+					Exporter ({{ selectedItems.length }})
+				</FButton>
+			</template>
+		</FDataTable>
+	`
+});
+
+export const MobileCardView = () => ({
+	components: { FDataTable, FBadge },
+	data() {
+		return {
+			columns: [
+				{ key: 'name', label: 'Nom' },
+				{ key: 'email', label: 'Email' },
+				{ key: 'role', label: 'Rôle' },
+				{ key: 'status', label: 'Statut' }
+			],
+			data: sampleData
+		};
+	},
+	template: `
+		<div style="max-width: 400px; margin: 0 auto;">
+			<p class="text-sm text-neutral-500 mb-4">
+				Ce tableau utilise le mode "Card View" sur mobile (écrans &lt; 640px).
+				Redimensionnez la fenêtre ou utilisez les outils de développement pour voir le mode mobile.
+			</p>
+			<FDataTable :data="data" :columns="columns">
+				<template #cell-status="{ value }">
+					<FBadge
+						:content="value"
+						:variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'"
+					/>
+				</template>
+			</FDataTable>
+		</div>
+	`
+});
+MobileCardView.parameters = {
+	docs: {
+		description: {
+			story:
+				'Sur les écrans mobiles (< 640px), le tableau se transforme automatiquement en mode "Card View" où chaque ligne devient une carte avec les labels de colonnes affichés comme étiquettes.'
+		}
+	}
+};
+
+export const VirtualizedLargeDataset = () => ({
+	components: { FDataTable, FBadge },
+	data() {
+		return {
+			columns: [
+				{ key: 'id', label: 'ID' },
+				{ key: 'name', label: 'Nom' },
+				{ key: 'email', label: 'Email' },
+				{ key: 'role', label: 'Rôle' },
+				{ key: 'status', label: 'Statut' }
+			],
+			data: Array.from({ length: 10000 }, (_, i) => ({
+				id: i + 1,
+				name: `Utilisateur ${i + 1}`,
+				email: `user${i + 1}@example.com`,
+				role: ['Admin', 'User', 'Editor', 'Viewer'][i % 4],
+				status: ['active', 'inactive', 'pending'][i % 3]
+			}))
+		};
+	},
+	template: `
+		<div>
+			<p class="text-sm text-neutral-600 mb-4">
+				Ce tableau utilise la virtualisation pour afficher 10 000 lignes de manière fluide.
+				Seuls les éléments visibles sont rendus dans le DOM, ce qui améliore drastiquement les performances.
+			</p>
+			<FDataTable
+				:data="data"
+				:columns="columns"
+				virtual
+				searchable
+				selectable
+			>
+				<template #cell-status="{ value }">
+					<FBadge
+						:content="value"
+						:variant="value === 'active' ? 'success' : value === 'pending' ? 'warning' : 'neutral'"
+					/>
+				</template>
+			</FDataTable>
+		</div>
+	`
+});
+VirtualizedLargeDataset.parameters = {
+	docs: {
+		description: {
+			story:
+				"La virtualisation permet d'afficher des milliers d'enregistrements sans ralentissement. Le tableau ne rend que les lignes visibles à l'écran, ce qui réduit la charge du DOM et améliore les performances de défilement."
+		}
+	}
+};

package/src/components/organisms/FDataTable/FDataTable.test.ts

@@ -0,0 +1,248 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FDataTable from './FDataTable.vue';
+
+describe('FDataTable', () => {
+	const columns = [
+		{ key: 'name', label: 'Name' },
+		{ key: 'email', label: 'Email' },
+		{ key: 'role', label: 'Role' }
+	];
+
+	const data = [
+		{ id: 1, name: 'Alice', email: 'alice@test.com', role: 'Admin' },
+		{ id: 2, name: 'Bob', email: 'bob@test.com', role: 'User' },
+		{ id: 3, name: 'Charlie', email: 'charlie@test.com', role: 'User' }
+	];
+
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		expect(wrapper.find('table').exists()).toBe(true);
+	});
+
+	it('displays column headers', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		expect(wrapper.text()).toContain('Name');
+		expect(wrapper.text()).toContain('Email');
+		expect(wrapper.text()).toContain('Role');
+	});
+
+	it('displays data rows', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		expect(wrapper.text()).toContain('Alice');
+		expect(wrapper.text()).toContain('bob@test.com');
+	});
+
+	it('shows empty state when no data', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data: [] }
+		});
+		expect(wrapper.findComponent({ name: 'FEmptyState' }).exists()).toBe(true);
+	});
+
+	it('shows loader when loading', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, loading: true }
+		});
+		expect(wrapper.findComponent({ name: 'FLoader' }).exists()).toBe(true);
+	});
+
+	it('renders pagination when paginated', () => {
+		const manyRows = Array.from({ length: 20 }, (_, i) => ({
+			id: i + 1,
+			name: `User ${i + 1}`,
+			email: `user${i + 1}@test.com`,
+			role: 'User'
+		}));
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data: manyRows, paginated: true, perPage: 5 }
+		});
+		expect(wrapper.findComponent({ name: 'FPagination' }).exists()).toBe(true);
+	});
+
+	it('renders search bar when searchable', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, searchable: true }
+		});
+		expect(wrapper.findComponent({ name: 'FSearchBar' }).exists()).toBe(true);
+	});
+
+	it('renders checkboxes when selectable', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, selectable: true }
+		});
+		expect(wrapper.findComponent({ name: 'FCheckbox' }).exists()).toBe(true);
+	});
+
+	it('emits row-click when row is clicked', async () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		const rows = wrapper.findAll('tbody tr');
+		if (rows.length > 0) {
+			await rows[0].trigger('click');
+			expect(wrapper.emitted('row-click')).toBeTruthy();
+		}
+	});
+
+	it('emits sort event when header is clicked', async () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		const headers = wrapper.findAll('th');
+		if (headers.length > 0) {
+			await headers[0].trigger('click');
+			expect(wrapper.emitted('sort')).toBeTruthy();
+		}
+	});
+
+	it('applies striped style when striped is true', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, striped: true }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders data-label attributes on cells for mobile card view', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		const cells = wrapper.findAll('td[data-label]');
+		// Each row should have cells with data-label attributes matching column labels
+		expect(cells.length).toBeGreaterThan(0);
+		// Check that at least one cell has the correct data-label
+		const hasNameLabel = cells.wrappers.some(
+			(cell) => cell.attributes('data-label') === 'Name'
+		);
+		const hasEmailLabel = cells.wrappers.some(
+			(cell) => cell.attributes('data-label') === 'Email'
+		);
+		const hasRoleLabel = cells.wrappers.some(
+			(cell) => cell.attributes('data-label') === 'Role'
+		);
+		expect(hasNameLabel).toBe(true);
+		expect(hasEmailLabel).toBe(true);
+		expect(hasRoleLabel).toBe(true);
+	});
+
+	it('renders empty data-label for checkbox column when selectable', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, selectable: true }
+		});
+		// The checkbox cells should have empty data-label
+		const checkboxCells = wrapper.findAll('td[data-label=""]');
+		expect(checkboxCells.length).toBe(data.length);
+	});
+
+	it('renders RecycleScroller when virtual is enabled', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, virtual: true }
+		});
+		expect(wrapper.findComponent({ name: 'RecycleScroller' }).exists()).toBe(
+			true
+		);
+	});
+
+	it('does not render pagination when virtual is enabled', () => {
+		const manyRows = Array.from({ length: 100 }, (_, i) => ({
+			id: i + 1,
+			name: `User ${i + 1}`,
+			email: `user${i + 1}@test.com`,
+			role: 'User'
+		}));
+		const wrapper = mount(FDataTable, {
+			propsData: {
+				columns,
+				data: manyRows,
+				virtual: true,
+				paginated: true,
+				perPage: 10
+			}
+		});
+		// Pagination should be disabled when virtual is true
+		expect(wrapper.findComponent({ name: 'FPagination' }).exists()).toBe(false);
+	});
+
+	it('uses custom virtualItemHeight when provided', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, virtual: true, virtualItemHeight: 60 }
+		});
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).computedVirtualItemHeight).toBe(60);
+	});
+
+	it('calculates virtualItemHeight based on size when not provided', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, virtual: true, size: 'large' }
+		});
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).computedVirtualItemHeight).toBe(64);
+	});
+
+	it('renders regular tbody when virtual is disabled', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data, virtual: false }
+		});
+		expect(wrapper.find('tbody').exists()).toBe(true);
+		expect(wrapper.findComponent({ name: 'RecycleScroller' }).exists()).toBe(
+			false
+		);
+	});
+
+	it('adds aria-sort="none" to sortable headers when not sorted', () => {
+		const wrapper = mount(FDataTable, {
+			propsData: { columns, data }
+		});
+		const headers = wrapper.findAll('th');
+		// Skip the first header if selectable (it's the checkbox column)
+		const nameHeader = headers.wrappers.find((h) => h.text().includes('Name'));
+		expect(nameHeader?.attributes('aria-sort')).toBe('none');
+	});
+
+	it('adds aria-sort="ascending" when column is sorted ascending', async () => {
+		const wrapper = mount(FDataTable, {
+			propsData: {
+				columns,
+				data,
+				defaultSortKey: 'name',
+				defaultSortDirection: 'asc'
+			}
+		});
+		const headers = wrapper.findAll('th');
+		const nameHeader = headers.wrappers.find((h) => h.text().includes('Name'));
+		expect(nameHeader?.attributes('aria-sort')).toBe('ascending');
+	});
+
+	it('adds aria-sort="descending" when column is sorted descending', async () => {
+		const wrapper = mount(FDataTable, {
+			propsData: {
+				columns,
+				data,
+				defaultSortKey: 'name',
+				defaultSortDirection: 'desc'
+			}
+		});
+		const headers = wrapper.findAll('th');
+		const nameHeader = headers.wrappers.find((h) => h.text().includes('Name'));
+		expect(nameHeader?.attributes('aria-sort')).toBe('descending');
+	});
+
+	it('does not add aria-sort to non-sortable columns', () => {
+		const nonSortableColumns = [
+			{ key: 'name', label: 'Name', sortable: false },
+			{ key: 'email', label: 'Email' }
+		];
+		const wrapper = mount(FDataTable, {
+			propsData: { columns: nonSortableColumns, data }
+		});
+		const headers = wrapper.findAll('th');
+		const nameHeader = headers.wrappers.find((h) => h.text().includes('Name'));
+		expect(nameHeader?.attributes('aria-sort')).toBeUndefined();
+	});
+});