@pyreweb/fabric 1.2.6

package/src/composables/useFormValidation.ts

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ref, Ref } from 'vue';
+
+/**
+ * Configuration options for useFormValidation
+ */
+export interface FormValidationOptions {
+	/**
+	 * Initial form data
+	 */
+	initialData?: Record<string, any>;
+}
+
+/**
+ * Return type for useFormValidation
+ */
+export interface FormValidationState {
+	// Form data
+	formData: Ref<Record<string, any>>;
+
+	// Validation state
+	errors: Ref<Record<string, string>>;
+	isValid: Ref<boolean>;
+	isSubmitting: Ref<boolean>;
+
+	// Methods
+	handleSubmit: (
+		event: Event,
+		callback?: (data: Record<string, any>) => void | Promise<void>
+	) => Promise<void>;
+	setFieldValue: (field: string, value: any) => void;
+	setFieldError: (field: string, error: string) => void;
+	clearFieldError: (field: string) => void;
+	clearErrors: () => void;
+	reset: () => void;
+	validate: () => boolean;
+}
+
+/**
+ * Composable for managing form validation and submission
+ *
+ * Provides a simple interface for form handling with built-in validation state.
+ * Can be extended with custom validation logic.
+ *
+ * @param options - Configuration options for the form validation
+ * @param emit - Emit function from the component setup
+ * @returns Object containing reactive state and methods for form operations
+ *
+ * @example
+ * ```ts
+ * const formState = useFormValidation({
+ *   initialData: { name: '', email: '' }
+ * }, emit);
+ *
+ * // In submit handler
+ * await formState.handleSubmit(event, async (data) => {
+ *   await api.submitForm(data);
+ * });
+ * ```
+ */
+export function useFormValidation(
+	options: FormValidationOptions = {},
+	emit: (event: string, ...args: any[]) => void
+): FormValidationState {
+	const { initialData = {} } = options;
+
+	// Reactive state
+	const formData = ref<Record<string, any>>({ ...initialData });
+	const errors = ref<Record<string, string>>({});
+	const isValid = ref(true);
+	const isSubmitting = ref(false);
+
+	/**
+	 * Set a field value
+	 */
+	const setFieldValue = (field: string, value: any): void => {
+		formData.value[field] = value;
+		// Clear error when field is updated
+		clearFieldError(field);
+	};
+
+	/**
+	 * Set a field error
+	 */
+	const setFieldError = (field: string, error: string): void => {
+		errors.value[field] = error;
+		isValid.value = false;
+	};
+
+	/**
+	 * Clear a specific field error
+	 */
+	const clearFieldError = (field: string): void => {
+		if (errors.value[field]) {
+			delete errors.value[field];
+			// Recalculate overall validity
+			isValid.value = Object.keys(errors.value).length === 0;
+		}
+	};
+
+	/**
+	 * Clear all errors
+	 */
+	const clearErrors = (): void => {
+		errors.value = {};
+		isValid.value = true;
+	};
+
+	/**
+	 * Validate form (can be overridden with custom validation logic)
+	 * Returns true if valid, false otherwise
+	 */
+	const validate = (): boolean => {
+		clearErrors();
+		// Basic validation - can be extended with custom logic
+		// For now, just check if there are no errors
+		return isValid.value;
+	};
+
+	/**
+	 * Handle form submission
+	 */
+	const handleSubmit = async (
+		event: Event,
+		callback?: (data: Record<string, any>) => void | Promise<void>
+	): Promise<void> => {
+		event.preventDefault();
+
+		// Emit submit event with the event object
+		emit('submit', event);
+
+		// If callback is provided, validate and execute it
+		if (callback) {
+			if (!validate()) {
+				return;
+			}
+
+			isSubmitting.value = true;
+			try {
+				await callback(formData.value);
+			} catch (error) {
+				// Emit error event if submission fails
+				emit('submit-error', error);
+				throw error;
+			} finally {
+				isSubmitting.value = false;
+			}
+		}
+	};
+
+	/**
+	 * Reset form to initial state
+	 */
+	const reset = (): void => {
+		formData.value = { ...initialData };
+		clearErrors();
+		isSubmitting.value = false;
+	};
+
+	return {
+		// Form data
+		formData,
+
+		// Validation state
+		errors,
+		isValid,
+		isSubmitting,
+
+		// Methods
+		handleSubmit,
+		setFieldValue,
+		setFieldError,
+		clearFieldError,
+		clearErrors,
+		reset,
+		validate
+	};
+}

package/src/composables/useSidebarState.test.ts

@@ -0,0 +1,307 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi } from 'vitest';
+import { useSidebarState } from './useSidebarState';
+
+describe('useSidebarState', () => {
+	const items = [
+		{ id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: 'home' },
+		{ id: 'projects', label: 'Projects', href: '/projects', icon: 'folder' },
+		{ id: 'settings', label: 'Settings', href: '/settings', icon: 'cog' }
+	];
+
+	it('initializes with default state', () => {
+		const emit = vi.fn();
+		const state = useSidebarState({ items }, emit);
+
+		expect(state.collapsed.value).toBe(false);
+		expect(state.openSubmenus.value).toEqual([]);
+	});
+
+	it('initializes with custom collapsed state', () => {
+		const emit = vi.fn();
+		const state = useSidebarState({ items, initialCollapsed: true }, emit);
+
+		expect(state.collapsed.value).toBe(true);
+	});
+
+	describe('navigationItems', () => {
+		it('filters out invalid items', () => {
+			const emit = vi.fn();
+			const itemsWithInvalid = [
+				{ id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+				null,
+				undefined,
+				{ id: 'projects', label: 'Projects', href: '/projects' }
+			];
+			const state = useSidebarState({ items: itemsWithInvalid as any }, emit);
+
+			expect(state.navigationItems.value.length).toBe(2);
+		});
+
+		it('includes divider items without labels', () => {
+			const emit = vi.fn();
+			const itemsWithDivider = [
+				{ id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+				{ type: 'divider' as const },
+				{ id: 'projects', label: 'Projects', href: '/projects' }
+			];
+			const state = useSidebarState({ items: itemsWithDivider }, emit);
+
+			expect(state.navigationItems.value.length).toBe(3);
+		});
+	});
+
+	describe('isItemActive', () => {
+		it('detects exact route match', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items, activeRoute: '/dashboard' }, emit);
+
+			expect(state.isItemActive(items[0])).toBe(true);
+			expect(state.isItemActive(items[1])).toBe(false);
+		});
+
+		it('detects nested route match', () => {
+			const emit = vi.fn();
+			const state = useSidebarState(
+				{ items, activeRoute: '/projects/123' },
+				emit
+			);
+
+			expect(state.isItemActive(items[1])).toBe(true);
+		});
+
+		it('does not match partial route names', () => {
+			const emit = vi.fn();
+			const itemsWithSimilarRoutes = [
+				{ id: 'user', label: 'User', href: '/user' },
+				{ id: 'users', label: 'Users', href: '/users' }
+			];
+			const state = useSidebarState(
+				{ items: itemsWithSimilarRoutes, activeRoute: '/users' },
+				emit
+			);
+
+			expect(state.isItemActive(itemsWithSimilarRoutes[0])).toBe(false);
+			expect(state.isItemActive(itemsWithSimilarRoutes[1])).toBe(true);
+		});
+
+		it('handles root path specially', () => {
+			const emit = vi.fn();
+			const itemsWithRoot = [
+				{ id: 'home', label: 'Home', href: '/' },
+				{ id: 'dashboard', label: 'Dashboard', href: '/dashboard' }
+			];
+			const state = useSidebarState(
+				{ items: itemsWithRoot, activeRoute: '/dashboard' },
+				emit
+			);
+
+			expect(state.isItemActive(itemsWithRoot[0])).toBe(false);
+		});
+
+		it('returns false when no active route is set', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items }, emit);
+
+			expect(state.isItemActive(items[0])).toBe(false);
+		});
+
+		it('works with router-link "to" property', () => {
+			const emit = vi.fn();
+			const itemsWithTo = [
+				{ id: 'dashboard', label: 'Dashboard', to: '/dashboard' }
+			];
+			const state = useSidebarState(
+				{ items: itemsWithTo, activeRoute: '/dashboard' },
+				emit
+			);
+
+			expect(state.isItemActive(itemsWithTo[0])).toBe(true);
+		});
+	});
+
+	describe('hasActiveChild', () => {
+		const nestedItems = [
+			{
+				id: 'section',
+				label: 'Section',
+				icon: 'folder',
+				children: [
+					{ id: 'child1', label: 'Child 1', href: '/section/child1' },
+					{ id: 'child2', label: 'Child 2', href: '/section/child2' }
+				]
+			}
+		];
+
+		it('detects active child', () => {
+			const emit = vi.fn();
+			const state = useSidebarState(
+				{ items: nestedItems, activeRoute: '/section/child1' },
+				emit
+			);
+
+			expect(state.hasActiveChild(nestedItems[0])).toBe(true);
+		});
+
+		it('returns false when no child is active', () => {
+			const emit = vi.fn();
+			const state = useSidebarState(
+				{ items: nestedItems, activeRoute: '/other' },
+				emit
+			);
+
+			expect(state.hasActiveChild(nestedItems[0])).toBe(false);
+		});
+
+		it('returns false when item has no children', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items }, emit);
+
+			expect(state.hasActiveChild(items[0])).toBe(false);
+		});
+	});
+
+	describe('submenu management', () => {
+		const nestedItems = [
+			{
+				id: 'section',
+				label: 'Section',
+				children: [{ id: 'child1', label: 'Child 1', href: '/child1' }]
+			}
+		];
+
+		it('checks if submenu is open', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items: nestedItems }, emit);
+
+			expect(state.isSubmenuOpen(nestedItems[0])).toBe(false);
+
+			state.openSubmenus.value = ['section'];
+			expect(state.isSubmenuOpen(nestedItems[0])).toBe(true);
+		});
+
+		it('toggles submenu open', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items: nestedItems }, emit);
+
+			state.toggleSubmenu(nestedItems[0]);
+			expect(state.isSubmenuOpen(nestedItems[0])).toBe(true);
+			expect(emit).toHaveBeenCalledWith('submenu-toggle', {
+				item: nestedItems[0],
+				open: true
+			});
+		});
+
+		it('toggles submenu closed', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items: nestedItems }, emit);
+
+			state.openSubmenus.value = ['section'];
+			state.toggleSubmenu(nestedItems[0]);
+			expect(state.isSubmenuOpen(nestedItems[0])).toBe(false);
+		});
+
+		it('uses label as key when id is not present', () => {
+			const emit = vi.fn();
+			const itemsWithoutId = [
+				{
+					label: 'Section',
+					children: [{ label: 'Child', href: '/child' }]
+				}
+			];
+			const state = useSidebarState({ items: itemsWithoutId }, emit);
+
+			state.toggleSubmenu(itemsWithoutId[0]);
+			expect(state.openSubmenus.value).toContain('Section');
+		});
+	});
+
+	describe('initializeOpenSubmenus', () => {
+		const nestedItems = [
+			{
+				id: 'section1',
+				label: 'Section 1',
+				children: [{ id: 'child1', label: 'Child 1', href: '/section1/child1' }]
+			},
+			{
+				id: 'section2',
+				label: 'Section 2',
+				children: [{ id: 'child2', label: 'Child 2', href: '/section2/child2' }]
+			}
+		];
+
+		it('opens parent submenu when child is active', () => {
+			const emit = vi.fn();
+			const state = useSidebarState(
+				{ items: nestedItems, activeRoute: '/section1/child1' },
+				emit
+			);
+
+			state.initializeOpenSubmenus();
+			expect(state.openSubmenus.value).toContain('section1');
+			expect(state.openSubmenus.value).not.toContain('section2');
+		});
+
+		it('does nothing when no active route', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items: nestedItems }, emit);
+
+			state.initializeOpenSubmenus();
+			expect(state.openSubmenus.value).toEqual([]);
+		});
+
+		it('does not duplicate entries', () => {
+			const emit = vi.fn();
+			const state = useSidebarState(
+				{ items: nestedItems, activeRoute: '/section1/child1' },
+				emit
+			);
+
+			state.initializeOpenSubmenus();
+			state.initializeOpenSubmenus();
+			expect(
+				state.openSubmenus.value.filter((k) => k === 'section1').length
+			).toBe(1);
+		});
+	});
+
+	describe('toggleCollapsed', () => {
+		it('toggles collapsed state', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items }, emit);
+
+			expect(state.collapsed.value).toBe(false);
+			state.toggleCollapsed();
+			expect(state.collapsed.value).toBe(true);
+		});
+
+		it('emits events on toggle', () => {
+			const emit = vi.fn();
+			const state = useSidebarState({ items }, emit);
+
+			state.toggleCollapsed();
+			expect(emit).toHaveBeenCalledWith('update:collapsed', true);
+			expect(emit).toHaveBeenCalledWith('toggle', true);
+		});
+
+		it('closes submenus when collapsed', async () => {
+			const emit = vi.fn();
+			const nestedItems = [
+				{
+					id: 'section',
+					label: 'Section',
+					children: [{ id: 'child', label: 'Child', href: '/child' }]
+				}
+			];
+			const state = useSidebarState({ items: nestedItems }, emit);
+
+			state.toggleSubmenu(nestedItems[0]);
+			expect(state.openSubmenus.value.length).toBe(1);
+
+			state.toggleCollapsed();
+			// Wait for watcher to trigger
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			expect(state.openSubmenus.value).toEqual([]);
+		});
+	});
+});

package/src/composables/useSidebarState.ts

@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ref, computed, watch, Ref, ComputedRef } from 'vue';
+
+/**
+ * Navigation item structure
+ */
+export interface NavigationItem {
+	id?: string;
+	label?: string;
+	icon?: string;
+	href?: string;
+	to?: string;
+	children?: NavigationItem[];
+	badge?: string | number;
+	badgeVariant?: string;
+	disabled?: boolean;
+	type?: 'link' | 'group' | 'divider';
+}
+
+/**
+ * Configuration options for useSidebarState
+ */
+export interface SidebarStateOptions {
+	/**
+	 * Navigation items configuration
+	 */
+	items: NavigationItem[];
+	/**
+	 * Initial collapsed state
+	 */
+	initialCollapsed?: boolean;
+	/**
+	 * Current active route path
+	 */
+	activeRoute?: string;
+}
+
+/**
+ * Return type for useSidebarState
+ */
+export interface SidebarState {
+	// Collapse state
+	collapsed: Ref<boolean>;
+
+	// Submenu state
+	openSubmenus: Ref<string[]>;
+
+	// Filtered navigation items
+	navigationItems: ComputedRef<NavigationItem[]>;
+
+	// Methods
+	toggleCollapsed: () => void;
+	isSubmenuOpen: (item: NavigationItem) => boolean;
+	toggleSubmenu: (item: NavigationItem) => void;
+	isItemActive: (item: NavigationItem) => boolean;
+	hasActiveChild: (item: NavigationItem) => boolean;
+	initializeOpenSubmenus: () => void;
+}
+
+/**
+ * Composable for managing navigation sidebar state
+ *
+ * Handles collapsed state, submenu navigation, and active route detection.
+ *
+ * @param options - Configuration options for the sidebar state
+ * @param emit - Emit function from the component setup
+ * @returns Object containing reactive state and methods for sidebar operations
+ *
+ * @example
+ * ```ts
+ * const sidebarState = useSidebarState({
+ *   items: navigationItems,
+ *   activeRoute: '/dashboard'
+ * }, emit);
+ * ```
+ */
+export function useSidebarState(
+	options: SidebarStateOptions,
+	emit: (event: string, ...args: any[]) => void
+): SidebarState {
+	const { items, initialCollapsed = false, activeRoute = '' } = options;
+
+	// Reactive state
+	const collapsed = ref(initialCollapsed);
+	const openSubmenus = ref<string[]>([]);
+
+	// Computed: Filtered navigation items (excluding invalid entries)
+	const navigationItems = computed(() => {
+		return items.filter(
+			(item) => item && (item.label || item.type === 'divider')
+		);
+	});
+
+	/**
+	 * Check if an item is currently active
+	 */
+	const isItemActive = (item: NavigationItem): boolean => {
+		if (!activeRoute) return false;
+
+		const itemPath = item.to || item.href;
+		if (!itemPath) return false;
+
+		// Exact match
+		if (activeRoute === itemPath) return true;
+
+		// For nested routes: check if active route starts with item path
+		// followed by '/' or end of string to avoid partial matches
+		// e.g., '/users' should not match '/user-settings'
+		if (itemPath !== '/') {
+			return activeRoute.startsWith(itemPath + '/') || activeRoute === itemPath;
+		}
+
+		return false;
+	};
+
+	/**
+	 * Check if a parent item has an active child
+	 */
+	const hasActiveChild = (item: NavigationItem): boolean => {
+		if (!item.children || item.children.length === 0) return false;
+		return item.children.some((child) => isItemActive(child));
+	};
+
+	/**
+	 * Check if a submenu is open
+	 */
+	const isSubmenuOpen = (item: NavigationItem): boolean => {
+		const key = item.id || item.label || '';
+		return openSubmenus.value.includes(key);
+	};
+
+	/**
+	 * Toggle submenu open state
+	 */
+	const toggleSubmenu = (item: NavigationItem): void => {
+		const key = item.id || item.label || '';
+		const index = openSubmenus.value.indexOf(key);
+
+		if (index === -1) {
+			openSubmenus.value.push(key);
+		} else {
+			openSubmenus.value.splice(index, 1);
+		}
+
+		emit('submenu-toggle', { item, open: index === -1 });
+	};
+
+	/**
+	 * Toggle sidebar collapsed state
+	 */
+	const toggleCollapsed = (): void => {
+		collapsed.value = !collapsed.value;
+		emit('update:collapsed', collapsed.value);
+		emit('toggle', collapsed.value);
+	};
+
+	/**
+	 * Initialize open submenus based on active route
+	 */
+	const initializeOpenSubmenus = (): void => {
+		if (!activeRoute) return;
+
+		items.forEach((item) => {
+			if (item.children && item.children.length > 0) {
+				const hasActiveChildItem = item.children.some((child) =>
+					isItemActive(child)
+				);
+				const key = item.id || item.label || '';
+				if (hasActiveChildItem && !openSubmenus.value.includes(key)) {
+					openSubmenus.value.push(key);
+				}
+			}
+		});
+	};
+
+	// Watch: Close submenus when sidebar is collapsed
+	watch(collapsed, (newValue) => {
+		if (newValue) {
+			openSubmenus.value = [];
+		}
+	});
+
+	return {
+		// Collapse state
+		collapsed,
+
+		// Submenu state
+		openSubmenus,
+
+		// Filtered navigation items
+		navigationItems,
+
+		// Methods
+		toggleCollapsed,
+		isSubmenuOpen,
+		toggleSubmenu,
+		isItemActive,
+		hasActiveChild,
+		initializeOpenSubmenus
+	};
+}

package/src/env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+// Déclaration du module principal avec types enrichis
+declare module '@pyreweb/fabric' {
+	export * from './components';
+	export * from './types';
+}