@pyreweb/fabric 1.2.6

package/src/components/molecules/FSearchBar/FSearchBar.vue

@@ -0,0 +1,180 @@
+<template>
+	<div :class="containerClasses">
+		<div :class="inputWrapperClasses">
+			<f-icon
+				v-if="iconPosition === 'inside' && !buttonMode"
+				name="search"
+				:size="iconSize"
+				:class="insideIconClasses"
+			/>
+			<input
+				ref="input"
+				:class="inputClasses"
+				type="text"
+				:value="value"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				@input="handleInput"
+				@keydown.enter="handleSubmit"
+				@focus="$emit('focus', $event)"
+				@blur="$emit('blur', $event)"
+			/>
+		</div>
+		<f-button
+			v-if="buttonMode"
+			:size="size"
+			:disabled="disabled"
+			type="button"
+			@click="handleSubmit"
+		>
+			{{ buttonLabel }}
+		</f-button>
+		<button
+			v-else-if="iconPosition === 'outside'"
+			:class="iconButtonClasses"
+			:disabled="disabled"
+			type="button"
+			@click="handleSubmit"
+		>
+			<f-icon name="search" :size="iconSize" />
+			<span class="sr-only">{{ buttonLabel }}</span>
+		</button>
+	</div>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+export default {
+	name: 'FSearchBar',
+	components: {
+		FIcon,
+		FButton
+	},
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: 'Rechercher...'
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value) => ['small', 'medium', 'large'].includes(value)
+		},
+		iconPosition: {
+			type: String,
+			default: 'inside',
+			validator: (value) => ['inside', 'outside'].includes(value)
+		},
+		buttonMode: {
+			type: Boolean,
+			default: false
+		},
+		buttonLabel: {
+			type: String,
+			default: 'Rechercher'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		containerClasses() {
+			return 'flex items-center gap-2';
+		},
+		inputWrapperClasses() {
+			return 'relative flex-1';
+		},
+		inputClasses() {
+			const baseClasses =
+				'block w-full font-sans border rounded transition-all duration-200 box-border focus:outline-none focus:ring-2 border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20';
+
+			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 paddingLeftClasses = {
+				small: 'pl-8',
+				medium: 'pl-10',
+				large: 'pl-12'
+			};
+
+			const disabledClasses = this.disabled
+				? 'bg-neutral-100 cursor-not-allowed opacity-70'
+				: '';
+
+			const hasInsideIcon = this.iconPosition === 'inside' && !this.buttonMode;
+
+			return [
+				baseClasses,
+				sizeClasses[this.size],
+				hasInsideIcon ? paddingLeftClasses[this.size] : '',
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		},
+		iconButtonClasses() {
+			const baseClasses =
+				'inline-flex items-center justify-center rounded transition-all duration-200 text-neutral-500 hover:text-primary-500 hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500/20';
+
+			const sizeClasses = {
+				small: 'p-1.5',
+				medium: 'p-2.5',
+				large: 'p-3.5'
+			};
+
+			const disabledClasses = this.disabled
+				? 'opacity-50 cursor-not-allowed'
+				: 'cursor-pointer';
+
+			return [baseClasses, sizeClasses[this.size], disabledClasses]
+				.filter(Boolean)
+				.join(' ');
+		},
+		iconSize() {
+			const sizeMap = {
+				small: 'sm',
+				medium: 'md',
+				large: 'lg'
+			};
+			return sizeMap[this.size];
+		},
+		insideIconClasses() {
+			const baseClasses =
+				'absolute top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none';
+
+			const leftPositionClasses = {
+				small: 'left-2.5',
+				medium: 'left-3',
+				large: 'left-4'
+			};
+
+			return [baseClasses, leftPositionClasses[this.size]]
+				.filter(Boolean)
+				.join(' ');
+		}
+	},
+	methods: {
+		handleInput(event) {
+			this.$emit('input', event.target.value);
+		},
+		handleSubmit() {
+			if (!this.disabled) {
+				this.$emit('search', this.value);
+			}
+		},
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+};
+</script>

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

@@ -0,0 +1,333 @@
+import FSelect from './FSelect.vue';
+
+export default {
+	title: 'Molecules/FSelect',
+	component: FSelect,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'object',
+			description: 'Valeur sélectionnée (v-model)'
+		},
+		options: {
+			control: 'object',
+			description: 'Liste des options'
+		},
+		optionKey: {
+			control: 'text',
+			description: 'Clé pour identifier une option (si options sont des objets)'
+		},
+		optionLabel: {
+			control: 'text',
+			description: "Clé pour le label d'une option (si options sont des objets)"
+		},
+		optionDisabled: {
+			control: 'text',
+			description: 'Clé pour désactiver une option (si options sont des objets)'
+		},
+		placeholder: {
+			control: 'text',
+			description: "Texte affiché quand aucune valeur n'est sélectionnée"
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large'],
+			description: 'Taille du composant'
+		},
+		multiple: {
+			control: 'boolean',
+			description: 'Activer la sélection multiple'
+		},
+		searchable: {
+			control: 'boolean',
+			description: 'Activer le champ de recherche'
+		},
+		searchPlaceholder: {
+			control: 'text',
+			description: 'Placeholder du champ de recherche'
+		},
+		emptyText: {
+			control: 'text',
+			description:
+				'Texte affiché quand aucune option ne correspond à la recherche'
+		},
+		loading: {
+			control: 'boolean',
+			description: 'État de chargement (pour options asynchrones)'
+		},
+		loadingText: {
+			control: 'text',
+			description: 'Texte affiché pendant le chargement'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		error: {
+			control: 'boolean',
+			description: "État d'erreur"
+		},
+		labelId: {
+			control: 'text',
+			description: 'ID du label associé (pour accessibilité)'
+		}
+	}
+};
+
+const simpleOptions = [
+	'Option 1',
+	'Option 2',
+	'Option 3',
+	'Option 4',
+	'Option 5'
+];
+
+const objectOptions = [
+	{ value: 1, label: 'Paris' },
+	{ value: 2, label: 'Lyon' },
+	{ value: 3, label: 'Marseille' },
+	{ value: 4, label: 'Toulouse' },
+	{ value: 5, label: 'Nice' }
+];
+
+const Template = (args, { argTypes }) => ({
+	components: { FSelect },
+	props: Object.keys(argTypes),
+	data() {
+		return {
+			selectedValue: args.value || null
+		};
+	},
+	template: '<FSelect v-bind="$props" v-model="selectedValue" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	options: simpleOptions,
+	placeholder: 'Sélectionner une option...'
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+	options: simpleOptions,
+	value: 'Option 2'
+};
+
+export const ObjectOptions = Template.bind({});
+ObjectOptions.args = {
+	options: objectOptions,
+	placeholder: 'Choisir une ville...'
+};
+
+export const Searchable = Template.bind({});
+Searchable.args = {
+	options: objectOptions,
+	searchable: true,
+	placeholder: 'Rechercher une ville...'
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+	options: objectOptions,
+	multiple: true,
+	value: [],
+	placeholder: 'Sélectionner plusieurs villes...'
+};
+
+export const SearchableMultiple = Template.bind({});
+SearchableMultiple.args = {
+	options: objectOptions,
+	multiple: true,
+	searchable: true,
+	value: [],
+	placeholder: 'Rechercher et sélectionner...'
+};
+
+export const Sizes = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			options: simpleOptions,
+			small: null,
+			medium: null,
+			large: null
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FSelect v-model="small" :options="options" size="small" placeholder="Petit" />
+			<FSelect v-model="medium" :options="options" size="medium" placeholder="Moyen" />
+			<FSelect v-model="large" :options="options" size="large" placeholder="Grand" />
+		</div>
+	`
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	options: simpleOptions,
+	disabled: true,
+	placeholder: 'Sélection désactivée'
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+	options: simpleOptions,
+	error: true,
+	placeholder: 'Champ avec erreur'
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+	options: [],
+	loading: true,
+	loadingText: 'Chargement des options...'
+};
+
+export const AsyncOptions = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			selectedValue: null,
+			options: [],
+			loading: false
+		};
+	},
+	mounted() {
+		this.loadOptions();
+	},
+	methods: {
+		loadOptions() {
+			this.loading = true;
+			// Simuler un appel API
+			setTimeout(() => {
+				this.options = [
+					{ value: 1, label: 'Option asynchrone 1' },
+					{ value: 2, label: 'Option asynchrone 2' },
+					{ value: 3, label: 'Option asynchrone 3' },
+					{ value: 4, label: 'Option asynchrone 4' },
+					{ value: 5, label: 'Option asynchrone 5' }
+				];
+				this.loading = false;
+			}, 2000);
+		}
+	},
+	template: `
+		<FSelect
+			v-model="selectedValue"
+			:options="options"
+			:loading="loading"
+			searchable
+			placeholder="Options chargées depuis une API..."
+			loading-text="Chargement des options..."
+		/>
+	`
+});
+
+export const DisabledOptions = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			selectedValue: null,
+			options: [
+				{ value: 1, label: 'Option active 1', disabled: false },
+				{ value: 2, label: 'Option désactivée', disabled: true },
+				{ value: 3, label: 'Option active 2', disabled: false },
+				{ value: 4, label: 'Option désactivée 2', disabled: true },
+				{ value: 5, label: 'Option active 3', disabled: false }
+			]
+		};
+	},
+	template: `
+		<FSelect
+			v-model="selectedValue"
+			:options="options"
+			placeholder="Certaines options sont désactivées..."
+		/>
+	`
+});
+
+export const LargeList = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			selectedValue: null,
+			options: Array.from({ length: 100 }, (_, i) => ({
+				value: i + 1,
+				label: `Option ${i + 1}`
+			}))
+		};
+	},
+	template: `
+		<FSelect
+			v-model="selectedValue"
+			:options="options"
+			searchable
+			placeholder="Liste avec 100 options..."
+		/>
+	`
+});
+
+export const CustomFilter = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			selectedValue: null,
+			options: [
+				{ value: 1, label: 'JavaScript', category: 'Frontend' },
+				{ value: 2, label: 'Python', category: 'Backend' },
+				{ value: 3, label: 'Vue.js', category: 'Frontend' },
+				{ value: 4, label: 'Node.js', category: 'Backend' },
+				{ value: 5, label: 'React', category: 'Frontend' }
+			]
+		};
+	},
+	methods: {
+		customFilter(query, options) {
+			const lowerQuery = query.toLowerCase();
+			return options.filter((option) => {
+				const labelMatch = option.label.toLowerCase().includes(lowerQuery);
+				const categoryMatch = option.category
+					.toLowerCase()
+					.includes(lowerQuery);
+				return labelMatch || categoryMatch;
+			});
+		}
+	},
+	template: `
+		<FSelect
+			v-model="selectedValue"
+			:options="options"
+			:filter-method="customFilter"
+			searchable
+			placeholder="Rechercher par nom ou catégorie..."
+		/>
+	`
+});
+
+export const States = () => ({
+	components: { FSelect },
+	data() {
+		return {
+			options: simpleOptions,
+			normal: null,
+			disabled: null,
+			error: null
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<div>
+				<label class="block text-sm font-medium mb-1">Normal</label>
+				<FSelect v-model="normal" :options="options" placeholder="État normal" />
+			</div>
+			<div>
+				<label class="block text-sm font-medium mb-1">Désactivé</label>
+				<FSelect v-model="disabled" :options="options" disabled placeholder="État désactivé" />
+			</div>
+			<div>
+				<label class="block text-sm font-medium mb-1">Erreur</label>
+				<FSelect v-model="error" :options="options" error placeholder="État erreur" />
+			</div>
+		</div>
+	`
+});