@pyreweb/fabric 1.2.6

package/src/components/molecules/FTabs/FTabs.test.ts

@@ -0,0 +1,264 @@
+import { describe, it, expect } from 'vitest';
+import { mount, createLocalVue } from '@vue/test-utils';
+import FTabs from './FTabs.vue';
+import FTab from './FTab.vue';
+
+const localVue = createLocalVue();
+localVue.component('FTab', FTab);
+
+describe('FTabs', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		expect(wrapper.find('[role="tablist"]').exists()).toBe(true);
+	});
+
+	it('renders all tab buttons', () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+					<FTab name="tab3" label="Tab 3" disabled>Content 3</FTab>
+				`
+			}
+		});
+		wrapper.vm.$nextTick(() => {
+			const tabs = wrapper.findAll('[role="tab"]');
+			expect(tabs.length).toBe(3);
+		});
+	});
+
+	it('activates first enabled tab by default', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		await wrapper.vm.$nextTick();
+
+		// Verify tabs are registered
+		expect(wrapper.vm.tabItems.length).toBeGreaterThan(0);
+
+		const tabs = wrapper.findAll('[role="tab"]');
+		expect(tabs.length).toBeGreaterThan(0);
+
+		// Check that at least one tab is selected
+		const selectedTabs = tabs.wrappers.filter(
+			(tab) => tab.attributes('aria-selected') === 'true'
+		);
+		expect(selectedTabs.length).toBeGreaterThan(0);
+	});
+
+	it('changes active tab on click', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		const tabs = wrapper.findAll('[role="tab"]');
+		if (tabs.length > 1) {
+			await tabs.at(1).trigger('click');
+			expect(wrapper.emitted('input')).toBeTruthy();
+			expect(wrapper.emitted('change')).toBeTruthy();
+		}
+	});
+
+	it('does not activate disabled tab on click', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2" disabled>Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		const tabs = wrapper.findAll('[role="tab"]');
+		if (tabs.length > 1) {
+			const initialEmitCount = wrapper.emitted('input')
+				? wrapper.emitted('input').length
+				: 0;
+			await tabs.at(1).trigger('click');
+			const finalEmitCount = wrapper.emitted('input')
+				? wrapper.emitted('input').length
+				: 0;
+			expect(finalEmitCount).toBe(initialEmitCount);
+		}
+	});
+
+	it('supports v-model binding', async () => {
+		const wrapperWithModel = mount(FTabs, {
+			localVue,
+			propsData: {
+				value: 'tab2'
+			},
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapperWithModel.vm.$nextTick();
+		const tabs = wrapperWithModel.findAll('[role="tab"]');
+		expect(tabs.at(1).attributes('aria-selected')).toBe('true');
+	});
+
+	it('navigates with arrow keys', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		const tabs = wrapper.findAll('[role="tab"]');
+		if (tabs.length > 0) {
+			await tabs.at(0).trigger('keydown', { key: 'ArrowRight' });
+			expect(wrapper.emitted('change')).toBeTruthy();
+		}
+	});
+
+	it('navigates to first tab with Home key', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			propsData: {
+				value: 'tab2'
+			},
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		const tabs = wrapper.findAll('[role="tab"]');
+		await tabs.at(1).trigger('keydown', { key: 'Home' });
+		expect(wrapper.emitted('change')[0][0]).toBe('tab1');
+	});
+
+	it('navigates to last tab with End key', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick();
+		const tabs = wrapper.findAll('[role="tab"]');
+		if (tabs.length > 0) {
+			await tabs.at(0).trigger('keydown', { key: 'End' });
+			expect(wrapper.emitted('change')).toBeTruthy();
+		}
+	});
+
+	it('applies correct variant classes', () => {
+		const variants = ['default', 'pills', 'underline'];
+		variants.forEach((variant) => {
+			const variantWrapper = mount(FTabs, {
+				localVue,
+				propsData: { variant },
+				slots: {
+					default: '<FTab name="tab1" label="Tab 1">Content</FTab>'
+				}
+			});
+			expect(variantWrapper.find('[role="tablist"]').exists()).toBe(true);
+		});
+	});
+
+	it('has correct ARIA attributes', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		const tabList = wrapper.find('[role="tablist"]');
+		expect(tabList.attributes('aria-label')).toBeDefined();
+
+		const tabs = wrapper.findAll('[role="tab"]');
+		tabs.wrappers.forEach((tab) => {
+			expect(tab.attributes('aria-controls')).toBeDefined();
+			expect(tab.attributes('aria-selected')).toBeDefined();
+		});
+	});
+
+	it('sets correct tabindex for active and inactive tabs', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			propsData: {
+				value: 'tab1'
+			},
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick(); // Wait for mounted nextTick to complete
+		const tabs = wrapper.findAll('[role="tab"]');
+		expect(tabs.at(0).attributes('tabindex')).toBe('0');
+		expect(tabs.at(1).attributes('tabindex')).toBe('-1');
+	});
+
+	it('displays tab panel content when tab is active', async () => {
+		const wrapper = mount(FTabs, {
+			localVue,
+			propsData: {
+				value: 'tab1'
+			},
+			slots: {
+				default: `
+					<FTab name="tab1" label="Tab 1">Content 1</FTab>
+					<FTab name="tab2" label="Tab 2">Content 2</FTab>
+				`
+			}
+		});
+		await wrapper.vm.$nextTick();
+		await wrapper.vm.$nextTick(); // Wait for mounted nextTick to complete
+		const panels = wrapper.findAll('[role="tabpanel"]');
+		expect(panels.at(0).isVisible()).toBe(true);
+		expect(panels.at(1).isVisible()).toBe(false);
+	});
+});

package/src/components/molecules/FTabs/FTabs.vue

@@ -0,0 +1,273 @@
+<template>
+	<div class="f-tabs">
+		<!-- Tab buttons -->
+		<div :class="tabListClasses" role="tablist" :aria-label="ariaLabel">
+			<button
+				v-for="tab in tabItems"
+				:id="getTabId(tab.name)"
+				:key="tab.name"
+				:ref="`tab-${tab.name}`"
+				role="tab"
+				:aria-selected="activeTabName === tab.name ? 'true' : 'false'"
+				:aria-controls="getPanelId(tab.name)"
+				:disabled="tab.disabled"
+				:class="getTabButtonClasses(tab)"
+				:tabindex="activeTabName === tab.name ? 0 : -1"
+				@click="handleTabClick(tab.name)"
+				@keydown="handleKeydown($event, tab.name)"
+			>
+				{{ tab.label }}
+			</button>
+		</div>
+
+		<!-- Tab panels (content) -->
+		<div class="mt-4">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+let idCounter = 0;
+
+export default {
+	name: 'FTabs',
+	provide() {
+		return {
+			tabsProvider: {
+				registerTab: this.registerTab,
+				unregisterTab: this.unregisterTab,
+				isActive: this.isTabActive,
+				getTabId: this.getTabId,
+				getPanelId: this.getPanelId
+			}
+		};
+	},
+	props: {
+		/**
+		 * Currently active tab name (v-model support)
+		 */
+		value: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Visual variant of the tabs
+		 */
+		variant: {
+			type: String,
+			default: 'default',
+			validator: (value) => ['default', 'pills', 'underline'].includes(value)
+		},
+		/**
+		 * Position of the tab buttons
+		 */
+		position: {
+			type: String,
+			default: 'top',
+			validator: (value) => ['top', 'bottom'].includes(value)
+		},
+		/**
+		 * Accessible label for the tab list
+		 */
+		ariaLabel: {
+			type: String,
+			default: 'Onglets'
+		}
+	},
+	data() {
+		return {
+			tabItems: [],
+			uid: idCounter++,
+			initialTabSet: false,
+			internalActiveTab: ''
+		};
+	},
+	computed: {
+		activeTabName: {
+			get() {
+				// Use value prop if provided, otherwise use internal state
+				return this.value !== '' ? this.value : this.internalActiveTab;
+			},
+			set(val) {
+				this.internalActiveTab = val;
+				this.$emit('input', val);
+			}
+		},
+		tabListClasses() {
+			const baseClasses = 'flex gap-1';
+			const variantClasses = {
+				default: 'border-b border-neutral-200',
+				pills: '',
+				underline: 'border-b border-neutral-200'
+			};
+			const positionClasses = {
+				top: '',
+				bottom: 'order-2 mt-4'
+			};
+
+			return [
+				baseClasses,
+				variantClasses[this.variant],
+				positionClasses[this.position]
+			]
+				.filter(Boolean)
+				.join(' ');
+		}
+	},
+	watch: {
+		tabItems: {
+			handler() {
+				// Set first tab as active if no value provided and not yet set
+				if (
+					!this.initialTabSet &&
+					!this.activeTabName &&
+					this.tabItems.length > 0
+				) {
+					const firstEnabledTab = this.tabItems.find((tab) => !tab.disabled);
+					if (firstEnabledTab) {
+						this.activeTabName = firstEnabledTab.name;
+						this.initialTabSet = true;
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	methods: {
+		/**
+		 * Register a tab from FTab component
+		 */
+		registerTab(tab) {
+			const exists = this.tabItems.find((t) => t.name === tab.name);
+			if (!exists) {
+				this.tabItems.push(tab);
+			}
+			// Set first non-disabled tab as active if no value provided
+			if (!this.activeTabName) {
+				const firstEnabledTab = this.tabItems.find((t) => !t.disabled);
+				if (firstEnabledTab) {
+					this.activeTabName = firstEnabledTab.name;
+				}
+			}
+		},
+		/**
+		 * Unregister a tab from FTab component
+		 */
+		unregisterTab(name) {
+			const index = this.tabItems.findIndex((t) => t.name === name);
+			if (index > -1) {
+				this.tabItems.splice(index, 1);
+			}
+		},
+		/**
+		 * Check if a tab is active
+		 */
+		isTabActive(name) {
+			return this.activeTabName === name;
+		},
+		/**
+		 * Generate unique tab button ID
+		 */
+		getTabId(name) {
+			return `f-tab-${this.uid}-${name}`;
+		},
+		/**
+		 * Generate unique tab panel ID
+		 */
+		getPanelId(name) {
+			return `f-tabpanel-${this.uid}-${name}`;
+		},
+		/**
+		 * Get classes for tab button based on state
+		 */
+		getTabButtonClasses(tab) {
+			const isActive = this.activeTabName === tab.name;
+			const baseClasses =
+				'px-4 py-2 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2';
+
+			const roundingClasses = this.variant === 'pills' ? '' : 'rounded-t-md';
+
+			const variantClasses = {
+				default: isActive
+					? 'text-primary-600 border-b-2 border-primary-600 -mb-px'
+					: 'text-neutral-600 hover:text-neutral-800 hover:border-neutral-300 border-b-2 border-transparent -mb-px',
+				pills: isActive
+					? 'bg-primary-100 text-primary-700 rounded-lg'
+					: 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800 rounded-lg',
+				underline: isActive
+					? 'text-primary-600 border-b-2 border-primary-600 -mb-px'
+					: 'text-neutral-600 hover:text-neutral-800 border-b-2 border-transparent -mb-px'
+			};
+
+			const disabledClasses = tab.disabled
+				? 'opacity-50 cursor-not-allowed'
+				: 'cursor-pointer';
+
+			return [
+				baseClasses,
+				roundingClasses,
+				variantClasses[this.variant],
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		/**
+		 * Handle tab click
+		 */
+		handleTabClick(name) {
+			const tab = this.tabItems.find((t) => t.name === name);
+			if (tab && !tab.disabled) {
+				this.activeTabName = name;
+				this.$emit('change', name);
+			}
+		},
+		/**
+		 * Handle keyboard navigation
+		 */
+		handleKeydown(event, currentName) {
+			const enabledTabs = this.tabItems.filter((tab) => !tab.disabled);
+			const currentIndex = enabledTabs.findIndex(
+				(tab) => tab.name === currentName
+			);
+
+			let nextIndex = currentIndex;
+
+			switch (event.key) {
+				case 'ArrowRight':
+					event.preventDefault();
+					nextIndex = (currentIndex + 1) % enabledTabs.length;
+					break;
+				case 'ArrowLeft':
+					event.preventDefault();
+					nextIndex =
+						currentIndex === 0 ? enabledTabs.length - 1 : currentIndex - 1;
+					break;
+				case 'Home':
+					event.preventDefault();
+					nextIndex = 0;
+					break;
+				case 'End':
+					event.preventDefault();
+					nextIndex = enabledTabs.length - 1;
+					break;
+				default:
+					return;
+			}
+
+			const nextTab = enabledTabs[nextIndex];
+			if (nextTab) {
+				this.activeTabName = nextTab.name;
+				this.$emit('change', nextTab.name);
+				this.$nextTick(() => {
+					const tabButton = this.$refs[`tab-${nextTab.name}`];
+					if (tabButton && tabButton[0]) {
+						tabButton[0].focus();
+					}
+				});
+			}
+		}
+	}
+};
+</script>

package/src/components/molecules/FToast/FToast.stories.js

@@ -0,0 +1,150 @@
+import FToast from './FToast.vue';
+
+export default {
+	title: 'Molecules/FToast',
+	component: FToast,
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'select' },
+			options: ['success', 'error', 'info', 'warning'],
+			description: 'Type de notification'
+		},
+		title: {
+			control: 'text',
+			description: 'Titre de la notification'
+		},
+		message: {
+			control: 'text',
+			description: 'Message de la notification'
+		},
+		closable: {
+			control: 'boolean',
+			description: 'Afficher le bouton de fermeture'
+		},
+		duration: {
+			control: 'number',
+			description: "Durée d'affichage en millisecondes (0 = permanent)"
+		},
+		position: {
+			control: { type: 'select' },
+			options: [
+				'top-left',
+				'top-center',
+				'top-right',
+				'bottom-left',
+				'bottom-center',
+				'bottom-right'
+			],
+			description: 'Position du toast'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FToast },
+	props: Object.keys(argTypes),
+	template: '<FToast v-bind="$props" @close="onClose" />',
+	methods: {
+		onClose() {
+			console.log('Toast fermé');
+		}
+	}
+});
+
+export const Success = Template.bind({});
+Success.args = {
+	variant: 'success',
+	title: 'Succès',
+	message: 'Votre action a été effectuée avec succès.',
+	duration: 0
+};
+
+export const Error = Template.bind({});
+Error.args = {
+	variant: 'error',
+	title: 'Erreur',
+	message: "Une erreur s'est produite. Veuillez réessayer.",
+	duration: 0
+};
+
+export const Info = Template.bind({});
+Info.args = {
+	variant: 'info',
+	title: 'Information',
+	message: 'Voici une information importante à prendre en compte.',
+	duration: 0
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+	variant: 'warning',
+	title: 'Avertissement',
+	message: 'Veuillez vérifier vos informations avant de continuer.',
+	duration: 0
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+	variant: 'info',
+	message: 'Notification simple sans titre.',
+	duration: 0
+};
+
+export const NotClosable = Template.bind({});
+NotClosable.args = {
+	variant: 'info',
+	title: 'Notification permanente',
+	message: 'Cette notification ne peut pas être fermée.',
+	closable: false,
+	duration: 0
+};
+
+export const WithSlotContent = () => ({
+	components: { FToast },
+	template: `
+		<FToast variant="info" title="Information" :duration="0">
+			<p>Contenu personnalisé avec <a href="#" class="underline">un lien</a> cliquable.</p>
+		</FToast>
+	`
+});
+
+export const AllVariants = () => ({
+	components: { FToast },
+	template: `
+		<div class="flex flex-col gap-4 p-4">
+			<FToast variant="success" title="Succès" message="Opération réussie." :duration="0" />
+			<FToast variant="error" title="Erreur" message="Une erreur s'est produite." :duration="0" />
+			<FToast variant="info" title="Information" message="Information importante." :duration="0" />
+			<FToast variant="warning" title="Avertissement" message="Veuillez vérifier." :duration="0" />
+		</div>
+	`
+});
+
+export const WithAutoClose = () => ({
+	components: { FToast },
+	data() {
+		return {
+			showToast: true
+		};
+	},
+	template: `
+		<div class="p-4">
+			<FToast 
+				v-if="showToast"
+				variant="success" 
+				title="Auto-fermeture" 
+				message="Ce toast se fermera automatiquement dans 5 secondes." 
+				:duration="5000"
+				@close="showToast = false"
+			/>
+			<button 
+				v-if="!showToast"
+				@click="showToast = true"
+				class="px-4 py-2 bg-primary-500 text-white rounded"
+			>
+				Afficher à nouveau
+			</button>
+		</div>
+	`
+});