@pyreweb/fabric 1.2.6

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

@@ -0,0 +1,170 @@
+import FUserMenu from './FUserMenu.vue';
+
+export default {
+	title: 'Organisms/FUserMenu',
+	component: FUserMenu,
+	tags: ['autodocs'],
+	argTypes: {
+		name: {
+			control: 'text',
+			description: "Nom de l'utilisateur"
+		},
+		email: {
+			control: 'text',
+			description: 'Email'
+		},
+		avatarSrc: {
+			control: 'text',
+			description: "URL de l'avatar"
+		},
+		items: {
+			control: 'object',
+			description: 'Éléments du menu'
+		},
+		showLogout: {
+			control: 'boolean',
+			description: 'Afficher le bouton de déconnexion'
+		},
+		compact: {
+			control: 'boolean',
+			description: 'Mode compact'
+		}
+	}
+};
+
+const menuItems = [
+	{ label: 'Mon profil', href: '/profile', icon: 'user' },
+	{ label: 'Paramètres', href: '/settings', icon: 'cog' },
+	{ label: 'Aide', href: '/help', icon: 'question' }
+];
+
+const Template = (args, { argTypes }) => ({
+	components: { FUserMenu },
+	props: Object.keys(argTypes),
+	template: '<FUserMenu v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	name: 'Jean Dupont',
+	email: 'jean@example.com'
+};
+
+export const WithAvatar = Template.bind({});
+WithAvatar.args = {
+	name: 'Marie Martin',
+	email: 'marie@example.com',
+	avatarSrc: 'https://i.pravatar.cc/150?img=5'
+};
+
+export const WithMenuItems = Template.bind({});
+WithMenuItems.args = {
+	name: 'Pierre Durand',
+	email: 'pierre@example.com',
+	items: menuItems
+};
+
+export const WithLogout = Template.bind({});
+WithLogout.args = {
+	name: 'Sophie Petit',
+	email: 'sophie@example.com',
+	items: menuItems,
+	showLogout: true
+};
+
+export const Compact = Template.bind({});
+Compact.args = {
+	name: 'Lucas Bernard',
+	compact: true
+};
+
+export const FullFeatured = () => ({
+	components: { FUserMenu },
+	data() {
+		return {
+			items: [
+				{ label: 'Mon profil', href: '/profile', icon: 'user' },
+				{ label: 'Mes projets', href: '/projects', icon: 'folder' },
+				{
+					label: 'Notifications',
+					href: '/notifications',
+					icon: 'bell',
+					badge: 3
+				},
+				{ type: 'divider' },
+				{ label: 'Paramètres', href: '/settings', icon: 'cog' },
+				{ label: 'Aide', href: '/help', icon: 'question' }
+			]
+		};
+	},
+	methods: {
+		handleNavigate(data) {
+			alert(`Navigation vers: ${data.item.label}`);
+		},
+		handleLogout() {
+			alert('Déconnexion...');
+		}
+	},
+	template: `
+		<FUserMenu
+			name="Emma Leroy"
+			email="emma.leroy@example.com"
+			avatarSrc="https://i.pravatar.cc/150?img=1"
+			:items="items"
+			showLogout
+			@navigate="handleNavigate"
+			@logout="handleLogout"
+		/>
+	`
+});
+
+export const WithDividers = Template.bind({});
+WithDividers.args = {
+	name: 'Thomas Martin',
+	email: 'thomas@example.com',
+	items: [
+		{ label: 'Mon compte', href: '/account', icon: 'user' },
+		{ type: 'divider' },
+		{ label: 'Tableau de bord', href: '/dashboard', icon: 'home' },
+		{ label: 'Mes tâches', href: '/tasks', icon: 'check' },
+		{ type: 'divider' },
+		{ label: 'Support', href: '/support', icon: 'question' }
+	],
+	showLogout: true
+};
+
+export const InNavbar = () => ({
+	components: { FUserMenu },
+	data() {
+		return {
+			items: menuItems
+		};
+	},
+	template: `
+		<div class="flex items-center justify-between p-4 bg-white border-b">
+			<span class="font-bold">MonApp</span>
+			<FUserMenu
+				name="Admin"
+				email="admin@example.com"
+				:items="items"
+				showLogout
+				compact
+			/>
+		</div>
+	`
+});
+
+export const OnlyAvatar = () => ({
+	components: { FUserMenu },
+	template: `
+		<FUserMenu
+			name="User"
+			avatarSrc="https://i.pravatar.cc/150?img=3"
+			compact
+			:items="[
+				{ label: 'Profil', href: '/profile' },
+				{ label: 'Déconnexion', action: 'logout' }
+			]"
+		/>
+	`
+});

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

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FUserMenu from './FUserMenu.vue';
+
+describe('FUserMenu', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John Doe' }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('displays user name', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'Jane Smith' }
+		});
+		expect(wrapper.text()).toContain('Jane Smith');
+	});
+
+	it('displays avatar', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John' }
+		});
+		expect(wrapper.findComponent({ name: 'FAvatar' }).exists()).toBe(true);
+	});
+
+	it('displays email when provided', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John', email: 'john@test.com' }
+		});
+		expect(wrapper.text()).toContain('john@test.com');
+	});
+
+	it('renders menu items', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: {
+				name: 'John',
+				items: [
+					{ label: 'Profile', href: '/profile' },
+					{ label: 'Settings', href: '/settings' }
+				]
+			}
+		});
+		expect(wrapper.text()).toContain('Profile');
+	});
+
+	it('renders logout button when showLogout is true', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John', showLogout: true }
+		});
+		const hasLogout =
+			wrapper.text().toLowerCase().includes('déconnexion') ||
+			wrapper.text().toLowerCase().includes('logout');
+		expect(hasLogout).toBe(true);
+	});
+
+	it('emits logout event when logout is clicked', async () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John', showLogout: true }
+		});
+		const logoutBtn = wrapper
+			.findAllComponents({ name: 'FButton' })
+			.filter(
+				(b) =>
+					b.text().toLowerCase().includes('déconnexion') ||
+					b.text().toLowerCase().includes('logout')
+			)[0];
+		if (logoutBtn) {
+			await logoutBtn.trigger('click');
+			expect(wrapper.emitted('logout')).toBeTruthy();
+		}
+	});
+
+	it('emits navigate event when item is clicked', async () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: {
+				name: 'John',
+				items: [{ label: 'Profile', href: '/profile' }]
+			}
+		});
+		const menuItems = wrapper.findAll('[role="menuitem"]');
+		if (menuItems.length > 0) {
+			await menuItems[0].trigger('click');
+			expect(wrapper.emitted('navigate')).toBeTruthy();
+		}
+	});
+
+	it('applies compact size', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John', compact: true }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(FUserMenu, {
+			propsData: { name: 'John' },
+			slots: { default: '<div>Custom content</div>' }
+		});
+		expect(wrapper.html()).toContain('Custom content');
+	});
+});

package/src/components/organisms/FUserMenu/FUserMenu.vue

@@ -0,0 +1,407 @@
+<template>
+	<div
+		v-if="isLoggedIn"
+		class="relative inline-block"
+		@keydown.escape="closeMenu"
+	>
+		<!-- Trigger Button (Avatar + optional username) -->
+		<button
+			ref="trigger"
+			type="button"
+			:class="triggerClasses"
+			:aria-expanded="isOpen"
+			aria-haspopup="menu"
+			@click="toggleMenu"
+		>
+			<f-avatar
+				:src="avatarSrc"
+				:alt="avatarAlt"
+				:initials="avatarInitials"
+				:name="computedAvatarName"
+				:size="avatarSize"
+				:status="avatarStatus"
+			/>
+			<span v-if="showUserName" class="ml-2 font-medium text-neutral-700">
+				{{ userName }}
+			</span>
+			<f-icon
+				v-if="showChevron"
+				:name="isOpen ? 'chevron-up' : 'chevron-down'"
+				size="sm"
+				class="ml-1 text-neutral-500"
+			/>
+		</button>
+
+		<!-- Dropdown Menu -->
+		<div
+			v-show="isOpen"
+			ref="dropdown"
+			:class="dropdownClasses"
+			role="menu"
+			:aria-label="menuAriaLabel"
+		>
+			<!-- User Info Header -->
+			<div v-if="showUserInfo" class="px-4 py-3">
+				<f-typography
+					variant="body"
+					class="font-medium text-neutral-900"
+					truncate
+				>
+					{{ userName }}
+				</f-typography>
+				<f-typography
+					v-if="userEmail"
+					variant="caption"
+					class="text-neutral-500"
+					truncate
+				>
+					{{ userEmail }}
+				</f-typography>
+			</div>
+
+			<f-divider v-if="showUserInfo && hasMenuItems" margin="none" />
+
+			<!-- Menu Items Slot -->
+			<div class="py-1">
+				<slot name="menu-items">
+					<!-- Default menu items if no slot provided -->
+					<template v-for="(item, index) in menuItems">
+						<f-divider
+							v-if="item.divider"
+							:key="`divider-${index}`"
+							margin="sm"
+						/>
+						<f-list-item
+							v-else
+							:key="item.key || `item-${index}`"
+							:title="item.label"
+							clickable
+							:disabled="item.disabled"
+							:class="getItemClasses(item)"
+							@click="handleItemClick(item, $event)"
+						>
+							<template v-if="item.icon" #left>
+								<f-icon :name="item.icon" size="sm" class="text-neutral-500" />
+							</template>
+						</f-list-item>
+					</template>
+				</slot>
+			</div>
+
+			<!-- Logout Section -->
+			<template v-if="showLogout">
+				<f-divider margin="none" />
+				<div class="py-1">
+					<f-list-item
+						:title="logoutLabel"
+						clickable
+						class="text-danger-600 hover:bg-danger-50"
+						@click="handleLogout"
+					>
+						<template #left>
+							<f-icon name="arrow-right" size="sm" class="text-danger-500" />
+						</template>
+					</f-list-item>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import FAvatar from '../../atoms/FAvatar/FAvatar.vue';
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+import FDivider from '../../atoms/FDivider/FDivider.vue';
+import FListItem from '../../molecules/FListItem/FListItem.vue';
+
+export default {
+	name: 'FUserMenu',
+	components: {
+		FAvatar,
+		FIcon,
+		FTypography,
+		FDivider,
+		FListItem
+	},
+	props: {
+		/**
+		 * Controls whether the menu is shown (based on login state)
+		 */
+		isLoggedIn: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Controls the open state of the dropdown (v-model support)
+		 */
+		value: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * User's display name
+		 */
+		userName: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * User's email address
+		 */
+		userEmail: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar image source URL
+		 */
+		avatarSrc: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar alt text
+		 */
+		avatarAlt: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar initials (used when no image)
+		 */
+		avatarInitials: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar name (used to compute initials if no initials provided)
+		 */
+		avatarName: {
+			type: String,
+			default: ''
+		},
+		/**
+		 * Avatar size
+		 */
+		avatarSize: {
+			type: String,
+			default: 'md',
+			validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+		},
+		/**
+		 * Avatar status indicator
+		 */
+		avatarStatus: {
+			type: String,
+			default: null,
+			validator: (value) =>
+				[null, 'online', 'busy', 'away', 'offline'].includes(value)
+		},
+		/**
+		 * Show username next to avatar in trigger
+		 */
+		showUserName: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Show chevron icon in trigger
+		 */
+		showChevron: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Show user info (name/email) in dropdown header
+		 */
+		showUserInfo: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Array of menu items
+		 * Each item: { key?: string, label: string, icon?: string, disabled?: boolean, divider?: boolean }
+		 */
+		menuItems: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		 * Show logout button at bottom
+		 */
+		showLogout: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		 * Logout button label
+		 */
+		logoutLabel: {
+			type: String,
+			default: 'Déconnexion'
+		},
+		/**
+		 * Dropdown alignment relative to trigger
+		 */
+		dropdownAlign: {
+			type: String,
+			default: 'right',
+			validator: (value) => ['left', 'right'].includes(value)
+		},
+		/**
+		 * Dropdown width
+		 */
+		dropdownWidth: {
+			type: String,
+			default: 'w-56'
+		},
+		/**
+		 * ARIA label for the menu
+		 */
+		menuAriaLabel: {
+			type: String,
+			default: 'Menu utilisateur'
+		}
+	},
+	data() {
+		return {
+			internalOpen: false
+		};
+	},
+	computed: {
+		/**
+		 * Computed property for v-model support
+		 */
+		isOpen: {
+			get() {
+				return this.value !== undefined ? this.value : this.internalOpen;
+			},
+			set(val) {
+				this.internalOpen = val;
+				this.$emit('input', val);
+			}
+		},
+		/**
+		 * Check if there are menu items to display
+		 */
+		hasMenuItems() {
+			return this.menuItems.length > 0 || this.$slots['menu-items'];
+		},
+		/**
+		 * Computed avatar name (falls back to userName if not provided)
+		 */
+		computedAvatarName() {
+			return this.avatarName || this.userName;
+		},
+		/**
+		 * Trigger button classes
+		 */
+		triggerClasses() {
+			return [
+				'inline-flex items-center',
+				'px-2 py-1 rounded-lg',
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]',
+				'hover:bg-neutral-100',
+				'focus:outline-none focus:ring-2 focus:ring-primary-500/20',
+				'cursor-pointer'
+			].join(' ');
+		},
+		/**
+		 * Dropdown container classes
+		 */
+		dropdownClasses() {
+			const alignmentClass =
+				this.dropdownAlign === 'left' ? 'left-0' : 'right-0';
+
+			return [
+				'absolute z-50 mt-2',
+				alignmentClass,
+				this.dropdownWidth,
+				'bg-white rounded-lg shadow-lg',
+				'border border-neutral-200',
+				'overflow-hidden'
+			].join(' ');
+		}
+	},
+	watch: {
+		isOpen(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					document.addEventListener('click', this.handleClickOutside);
+				});
+			} else {
+				document.removeEventListener('click', this.handleClickOutside);
+			}
+		}
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.handleClickOutside);
+	},
+	methods: {
+		/**
+		 * Toggle menu open/close state
+		 */
+		toggleMenu() {
+			this.isOpen = !this.isOpen;
+			this.$emit('toggle', this.isOpen);
+		},
+		/**
+		 * Close the menu
+		 */
+		closeMenu() {
+			if (this.isOpen) {
+				this.isOpen = false;
+				this.$emit('close');
+			}
+		},
+		/**
+		 * Handle clicks outside the dropdown
+		 */
+		handleClickOutside(event) {
+			const dropdown = this.$refs.dropdown;
+			const trigger = this.$refs.trigger;
+
+			if (
+				dropdown &&
+				trigger &&
+				!dropdown.contains(event.target) &&
+				!trigger.contains(event.target)
+			) {
+				this.closeMenu();
+			}
+		},
+		/**
+		 * Get classes for menu items based on item config
+		 */
+		getItemClasses(item) {
+			const classes = [];
+			if (item.danger) {
+				classes.push('text-danger-600 hover:bg-danger-50');
+			}
+			return classes.join(' ');
+		},
+		/**
+		 * Handle menu item click
+		 */
+		handleItemClick(item, event) {
+			if (item.disabled) return;
+
+			this.$emit('item-click', { item, event });
+			this.$emit('navigate', { item, event });
+
+			// Close menu after click unless item specifies keepOpen
+			if (!item.keepOpen) {
+				this.closeMenu();
+			}
+		},
+		/**
+		 * Handle logout action
+		 */
+		handleLogout() {
+			this.$emit('logout');
+			this.closeMenu();
+		}
+	}
+};
+</script>

package/src/components/organisms/index.ts

@@ -0,0 +1,29 @@
+import FActivityFeed from './FActivityFeed/FActivityFeed.vue';
+import FForm from './FForm/FForm.vue';
+import FDataTable from './FDataTable/FDataTable.vue';
+import FDrawer from './FDrawer/FDrawer.vue';
+import FFileUpload from './FFileUpload/FFileUpload.vue';
+import FFilterSidebar from './FFilterSidebar/FFilterSidebar.vue';
+import FNavigationSidebar from './FNavigationSidebar/FNavigationSidebar.vue';
+import FPageHeader from './FPageHeader/FPageHeader.vue';
+import FModal from './FModal/FModal.vue';
+import FUserMenu from './FUserMenu/FUserMenu.vue';
+import FOnboardingStepper from './FOnboardingStepper/FOnboardingStepper.vue';
+import FProfileSection from './FProfileSection/FProfileSection.vue';
+import FToastProvider from './FToastProvider/FToastProvider.vue';
+
+export {
+	FActivityFeed,
+	FForm,
+	FDataTable,
+	FDrawer,
+	FFileUpload,
+	FFilterSidebar,
+	FNavigationSidebar,
+	FPageHeader,
+	FModal,
+	FUserMenu,
+	FOnboardingStepper,
+	FProfileSection,
+	FToastProvider
+};