@pyreweb/fabric 1.2.6

package/src/components/molecules/FSelect/FSelect.vue

@@ -0,0 +1,551 @@
+<template>
+	<div :class="containerClasses" @keydown.escape="closeDropdown">
+		<!-- Trigger Button -->
+		<button
+			:id="triggerId"
+			ref="trigger"
+			type="button"
+			:class="triggerClasses"
+			:disabled="disabled"
+			:aria-expanded="String(isOpen)"
+			:aria-haspopup="'listbox'"
+			:aria-labelledby="labelId"
+			@click="toggleDropdown"
+			@keydown.down.prevent="openDropdown"
+			@keydown.up.prevent="openDropdown"
+		>
+			<span :class="valueClasses">{{ displayValue }}</span>
+			<f-icon
+				:name="isOpen ? 'chevron-up' : 'chevron-down'"
+				size="sm"
+				:class="iconClasses"
+			/>
+		</button>
+
+		<!-- Dropdown -->
+		<div
+			v-show="isOpen"
+			ref="dropdown"
+			:class="dropdownClasses"
+			role="listbox"
+			:aria-labelledby="labelId"
+			:aria-multiselectable="String(multiple)"
+		>
+			<!-- Search Input -->
+			<div v-if="searchable" class="p-2 border-b border-neutral-200">
+				<div class="relative">
+					<f-icon
+						name="search"
+						size="sm"
+						class="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none"
+					/>
+					<input
+						ref="searchInput"
+						v-model="searchQuery"
+						type="text"
+						:class="searchInputClasses"
+						:placeholder="searchPlaceholder"
+						@keydown.down.prevent="handleKeyboardNavigation('down')"
+						@keydown.up.prevent="handleKeyboardNavigation('up')"
+						@keydown.enter.prevent="handleEnterKey"
+						@keydown.escape.prevent="closeDropdown"
+					/>
+				</div>
+			</div>
+
+			<!-- Loading State -->
+			<div v-if="loading" class="p-4 text-center">
+				<f-loader size="sm" />
+				<p class="mt-2 text-sm text-neutral-500">{{ loadingText }}</p>
+			</div>
+
+			<!-- Options List -->
+			<div
+				v-else-if="filteredOptions.length > 0"
+				ref="optionsList"
+				:class="optionsListClasses"
+			>
+				<div
+					v-for="(option, index) in filteredOptions"
+					:key="getOptionKey(option, index)"
+					:ref="`option-${index}`"
+					role="option"
+					:aria-selected="String(isSelected(option))"
+					:class="getOptionClasses(option, index)"
+					@click="handleOptionClick(option)"
+					@mouseenter="focusedIndex = index"
+				>
+					<f-checkbox
+						v-if="multiple"
+						:value="isSelected(option)"
+						:disabled="isDisabled(option)"
+						tabindex="-1"
+						class="pointer-events-none"
+					/>
+					<span :class="optionLabelClasses">{{ getOptionLabel(option) }}</span>
+					<f-icon
+						v-if="!multiple && isSelected(option)"
+						name="check"
+						size="sm"
+						class="ml-auto text-primary-500"
+					/>
+				</div>
+			</div>
+
+			<!-- Empty State -->
+			<div v-else class="p-4 text-center">
+				<f-icon name="file" size="lg" class="text-neutral-300 mb-2" />
+				<p class="text-sm text-neutral-500">{{ emptyText }}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FLoader from '../../atoms/FLoader/FLoader.vue';
+import FCheckbox from '../../atoms/FCheckbox/FCheckbox.vue';
+
+let selectCounter = 0;
+
+export default {
+	name: 'FSelect',
+	components: {
+		FIcon,
+		FLoader,
+		FCheckbox
+	},
+	props: {
+		/**
+		 * Valeur sélectionnée (v-model)
+		 * Pour sélection simple: string | number | object
+		 * Pour sélection multiple: Array
+		 */
+		value: {
+			type: [String, Number, Object, Array],
+			default: null
+		},
+		/**
+		 * Liste des options
+		 */
+		options: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		 * Clé pour identifier une option (si options sont des objets)
+		 */
+		optionKey: {
+			type: String,
+			default: 'value'
+		},
+		/**
+		 * Clé pour le label d'une option (si options sont des objets)
+		 */
+		optionLabel: {
+			type: String,
+			default: 'label'
+		},
+		/**
+		 * Clé pour désactiver une option (si options sont des objets)
+		 */
+		optionDisabled: {
+			type: String,
+			default: 'disabled'
+		},
+		/**
+		 * Texte affiché quand aucune valeur n'est sélectionnée
+		 */
+		placeholder: {
+			type: String,
+			default: 'Sélectionner...'
+		},
+		/**
+		 * Taille du composant
+		 */
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value) => ['small', 'medium', 'large'].includes(value)
+		},
+		/**
+		 * Activer la sélection multiple
+		 */
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Activer le champ de recherche
+		 */
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Placeholder du champ de recherche
+		 */
+		searchPlaceholder: {
+			type: String,
+			default: 'Rechercher...'
+		},
+		/**
+		 * Texte affiché quand aucune option ne correspond à la recherche
+		 */
+		emptyText: {
+			type: String,
+			default: 'Aucune option trouvée'
+		},
+		/**
+		 * État de chargement (pour options asynchrones)
+		 */
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Texte affiché pendant le chargement
+		 */
+		loadingText: {
+			type: String,
+			default: 'Chargement...'
+		},
+		/**
+		 * État désactivé
+		 */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * État d'erreur
+		 */
+		error: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * ID du label associé (pour accessibilité)
+		 */
+		labelId: {
+			type: String,
+			default: null
+		},
+		/**
+		 * Fonction de filtrage personnalisée
+		 */
+		filterMethod: {
+			type: Function,
+			default: null
+		}
+	},
+	data() {
+		return {
+			uniqueId: ++selectCounter,
+			isOpen: false,
+			searchQuery: '',
+			focusedIndex: -1
+		};
+	},
+	computed: {
+		triggerId() {
+			return `fselect-trigger-${this.uniqueId}`;
+		},
+		containerClasses() {
+			return 'relative inline-block w-full';
+		},
+		triggerClasses() {
+			const baseClasses =
+				'flex items-center justify-between w-full font-sans border rounded box-border focus:outline-none focus:ring-2 text-left';
+
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			const sizeClasses = {
+				small: 'py-1.5 px-2.5 text-xs',
+				medium: 'py-2.5 px-3.5 text-sm',
+				large: 'py-3.5 px-4.5 text-base'
+			};
+
+			const stateClasses = this.error
+				? 'border-danger-500 focus:border-danger-500 focus:ring-danger-500/20'
+				: 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20';
+
+			const disabledClasses = this.disabled
+				? 'bg-neutral-100 cursor-not-allowed opacity-70'
+				: 'bg-white cursor-pointer hover:border-neutral-400';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				sizeClasses[this.size],
+				stateClasses,
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		valueClasses() {
+			const baseClasses = 'flex-1 truncate';
+			const placeholderClasses = !this.hasValue
+				? 'text-neutral-400'
+				: 'text-neutral-900';
+			return [baseClasses, placeholderClasses].join(' ');
+		},
+		iconClasses() {
+			const baseClasses = 'ml-2 flex-shrink-0';
+			const transitionClasses =
+				'transition-transform duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+			const colorClasses = this.disabled
+				? 'text-neutral-400'
+				: 'text-neutral-500';
+			return [baseClasses, transitionClasses, colorClasses].join(' ');
+		},
+		dropdownClasses() {
+			return 'absolute z-50 w-full mt-1 bg-white border border-neutral-200 rounded shadow-lg max-h-60 overflow-hidden';
+		},
+		searchInputClasses() {
+			return 'w-full pl-8 pr-2.5 py-1.5 text-sm border border-neutral-300 rounded focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20';
+		},
+		optionsListClasses() {
+			return 'max-h-48 overflow-y-auto';
+		},
+		optionLabelClasses() {
+			return 'flex-1';
+		},
+		hasValue() {
+			if (this.multiple) {
+				return Array.isArray(this.value) && this.value.length > 0;
+			}
+			return (
+				this.value !== null && this.value !== undefined && this.value !== ''
+			);
+		},
+		displayValue() {
+			if (!this.hasValue) {
+				return this.placeholder;
+			}
+
+			if (this.multiple && Array.isArray(this.value)) {
+				const labels = this.value.map((val) => {
+					const option = this.options.find(
+						(opt) => this.getOptionValue(opt) === this.getOptionValue(val)
+					);
+					return option
+						? this.getOptionLabel(option)
+						: this.getOptionLabel(val);
+				});
+				return labels.join(', ');
+			}
+
+			const selectedOption = this.options.find(
+				(opt) => this.getOptionValue(opt) === this.getOptionValue(this.value)
+			);
+			return selectedOption
+				? this.getOptionLabel(selectedOption)
+				: this.getOptionLabel(this.value);
+		},
+		filteredOptions() {
+			if (!this.searchQuery) {
+				return this.options;
+			}
+
+			if (this.filterMethod) {
+				return this.filterMethod(this.searchQuery, this.options);
+			}
+
+			const query = this.searchQuery.toLowerCase();
+			return this.options.filter((option) => {
+				const label = this.getOptionLabel(option).toLowerCase();
+				return label.includes(query);
+			});
+		}
+	},
+	watch: {
+		isOpen(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					if (this.searchable && this.$refs.searchInput) {
+						this.$refs.searchInput.focus();
+					}
+					this.setupClickOutside();
+				});
+				this.$emit('open');
+			} else {
+				this.searchQuery = '';
+				this.focusedIndex = -1;
+				this.removeClickOutside();
+				this.$emit('close');
+			}
+		}
+	},
+	beforeDestroy() {
+		this.removeClickOutside();
+	},
+	methods: {
+		getOptionKey(option, index) {
+			if (typeof option === 'object' && option !== null) {
+				return option[this.optionKey] || index;
+			}
+			return option || index;
+		},
+		getOptionValue(option) {
+			if (typeof option === 'object' && option !== null) {
+				return option[this.optionKey];
+			}
+			return option;
+		},
+		getOptionLabel(option) {
+			if (typeof option === 'object' && option !== null) {
+				return option[this.optionLabel] || '';
+			}
+			return String(option);
+		},
+		isDisabled(option) {
+			if (typeof option === 'object' && option !== null) {
+				return option[this.optionDisabled] || false;
+			}
+			return false;
+		},
+		isSelected(option) {
+			const optionValue = this.getOptionValue(option);
+
+			if (this.multiple && Array.isArray(this.value)) {
+				return this.value.some(
+					(val) => this.getOptionValue(val) === optionValue
+				);
+			}
+
+			return this.getOptionValue(this.value) === optionValue;
+		},
+		getOptionClasses(option, index) {
+			const baseClasses = 'flex items-center gap-2 px-3 py-2 cursor-pointer';
+			const transitionClasses =
+				'transition-colors duration-[var(--transition-duration-fast)] ease-[var(--transition-easing-standard)]';
+			const hoverClasses = 'hover:bg-neutral-50';
+			const focusedClasses =
+				this.focusedIndex === index ? 'bg-neutral-100' : '';
+			const selectedClasses = this.isSelected(option)
+				? 'bg-primary-50 text-primary-700'
+				: '';
+			const disabledClasses = this.isDisabled(option)
+				? 'opacity-50 cursor-not-allowed'
+				: '';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				!this.isDisabled(option) && hoverClasses,
+				focusedClasses,
+				selectedClasses,
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		toggleDropdown() {
+			if (this.disabled) return;
+			this.isOpen = !this.isOpen;
+		},
+		openDropdown() {
+			if (this.disabled) return;
+			this.isOpen = true;
+		},
+		closeDropdown() {
+			this.isOpen = false;
+		},
+		handleOptionClick(option) {
+			if (this.isDisabled(option)) return;
+
+			const optionValue = this.getOptionValue(option);
+
+			if (this.multiple) {
+				let newValue = Array.isArray(this.value) ? [...this.value] : [];
+				const index = newValue.findIndex(
+					(val) => this.getOptionValue(val) === optionValue
+				);
+
+				if (index > -1) {
+					newValue.splice(index, 1);
+				} else {
+					newValue.push(option);
+				}
+
+				this.$emit('input', newValue);
+				this.$emit('change', newValue);
+			} else {
+				this.$emit('input', option);
+				this.$emit('change', option);
+				this.closeDropdown();
+			}
+		},
+		handleKeyboardNavigation(direction) {
+			const maxIndex = this.filteredOptions.length - 1;
+
+			if (direction === 'down') {
+				this.focusedIndex =
+					this.focusedIndex < maxIndex ? this.focusedIndex + 1 : 0;
+			} else if (direction === 'up') {
+				this.focusedIndex =
+					this.focusedIndex > 0 ? this.focusedIndex - 1 : maxIndex;
+			}
+
+			this.scrollToFocusedOption();
+		},
+		handleEnterKey() {
+			if (
+				this.focusedIndex >= 0 &&
+				this.focusedIndex < this.filteredOptions.length
+			) {
+				const option = this.filteredOptions[this.focusedIndex];
+				this.handleOptionClick(option);
+			}
+		},
+		scrollToFocusedOption() {
+			this.$nextTick(() => {
+				const optionsList = this.$refs.optionsList;
+				// Dynamic refs in v-for return an array, so we access [0]
+				const focusedOption = this.$refs[`option-${this.focusedIndex}`];
+
+				if (optionsList && focusedOption && focusedOption[0]) {
+					const optionElement = focusedOption[0];
+					const optionTop = optionElement.offsetTop;
+					const optionHeight = optionElement.offsetHeight;
+					const listScrollTop = optionsList.scrollTop;
+					const listHeight = optionsList.clientHeight;
+
+					if (optionTop < listScrollTop) {
+						optionsList.scrollTop = optionTop;
+					} else if (optionTop + optionHeight > listScrollTop + listHeight) {
+						optionsList.scrollTop = optionTop + optionHeight - listHeight;
+					}
+				}
+			});
+		},
+		setupClickOutside() {
+			this.clickOutsideHandler = (event) => {
+				const dropdown = this.$refs.dropdown;
+				const trigger = this.$refs.trigger;
+				const target = event.target;
+
+				if (
+					target instanceof Node &&
+					dropdown &&
+					!dropdown.contains(target) &&
+					trigger &&
+					!trigger.contains(target)
+				) {
+					this.closeDropdown();
+				}
+			};
+
+			document.addEventListener('click', this.clickOutsideHandler);
+		},
+		removeClickOutside() {
+			if (this.clickOutsideHandler) {
+				document.removeEventListener('click', this.clickOutsideHandler);
+			}
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,144 @@
+import FStatCard from './FStatCard.vue';
+
+export default {
+	title: 'Molecules/FStatCard',
+	component: FStatCard,
+	tags: ['autodocs'],
+	argTypes: {
+		icon: {
+			control: 'text',
+			description: 'Icône à afficher'
+		},
+		label: {
+			control: 'text',
+			description: 'Label/titre de la statistique'
+		},
+		value: {
+			control: 'text',
+			description: 'Valeur à afficher'
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['primary', 'success', 'danger', 'info'],
+			description: 'Variante de couleur'
+		},
+		layout: {
+			control: { type: 'select' },
+			options: ['horizontal', 'vertical'],
+			description: 'Disposition'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Afficher une bordure'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FStatCard },
+	props: Object.keys(argTypes),
+	template: '<FStatCard v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	icon: 'user',
+	label: 'Utilisateurs',
+	value: '1,234'
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+	icon: 'user',
+	label: 'Total utilisateurs',
+	value: '12,456',
+	variant: 'primary'
+};
+
+export const Success = Template.bind({});
+Success.args = {
+	icon: 'check',
+	label: 'Tâches complétées',
+	value: '89%',
+	variant: 'success'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+	icon: 'warning',
+	label: 'Erreurs détectées',
+	value: '23',
+	variant: 'danger'
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+	icon: 'star',
+	label: 'Note moyenne',
+	value: '4.8/5',
+	layout: 'vertical'
+};
+
+export const NoBorder = Template.bind({});
+NoBorder.args = {
+	icon: 'mail',
+	label: 'Messages',
+	value: '456',
+	bordered: false
+};
+
+export const AllVariants = () => ({
+	components: { FStatCard },
+	template: `
+		<div class="grid grid-cols-4 gap-4">
+			<FStatCard icon="user" label="Utilisateurs" value="1,234" variant="primary" />
+			<FStatCard icon="check" label="Complétés" value="89%" variant="success" />
+			<FStatCard icon="warning" label="Alertes" value="12" variant="danger" />
+			<FStatCard icon="info" label="Informations" value="45" variant="info" />
+		</div>
+	`
+});
+
+export const VerticalLayout = () => ({
+	components: { FStatCard },
+	template: `
+		<div class="grid grid-cols-4 gap-4">
+			<FStatCard icon="user" label="Utilisateurs" value="1,234" layout="vertical" />
+			<FStatCard icon="document" label="Documents" value="567" layout="vertical" />
+			<FStatCard icon="calendar" label="Événements" value="89" layout="vertical" />
+			<FStatCard icon="mail" label="Messages" value="2,345" layout="vertical" />
+		</div>
+	`
+});
+
+export const Dashboard = () => ({
+	components: { FStatCard },
+	template: `
+		<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+			<FStatCard
+				icon="user"
+				label="Nouveaux utilisateurs"
+				value="+156"
+				variant="primary"
+			/>
+			<FStatCard
+				icon="document"
+				label="Documents créés"
+				value="1,234"
+				variant="info"
+			/>
+			<FStatCard
+				icon="check"
+				label="Taux de complétion"
+				value="94%"
+				variant="success"
+			/>
+			<FStatCard
+				icon="warning"
+				label="Problèmes"
+				value="7"
+				variant="danger"
+			/>
+		</div>
+	`
+});