@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/FileUpload/FileUpload.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+	import { useWidthable, type Widthable } from '@/composables/widthable'
+	import { ref, useId, watch } from 'vue'
+	import { useTheme } from 'vuetify'
+	import FileUploadContent, { type FileUploadContentSlots } from './FileUploadContent.vue'
+	import { locales as defaultLocales } from './locales'
+	import useFileDrop from './useFileDrop'
+	import validateFiles from './validateFiles'
+
+	const props = withDefaults(defineProps<{
+		modelValue: File[]
+		disabled?: boolean
+		multiple?: boolean
+		fileSizeMax?: number
+		fileSizeUnits?: Array<string>
+		allowedExtensions?: Array<string>
+		locales?: typeof defaultLocales
+	} & Widthable>(), {
+		disabled: false,
+		multiple: false,
+		fileSizeMax: 10_485_760,
+		fileSizeUnits: () => defaultLocales.fileSizeUnits,
+		allowedExtensions: () => ['pdf', 'jpg', 'jpeg', 'png'],
+		locales: () => defaultLocales,
+	})
+
+	const emits = defineEmits<{
+		(e: 'update:modelValue', value: File[]): void
+		(e: 'error', value: string[]): void
+	}>()
+
+	defineSlots<{
+		default(): void
+	} & FileUploadContentSlots>()
+
+	const dragover = ref(false)
+	const id = 'file-upload-' + useId()
+	const dropZone = ref<HTMLElement | null>(null)
+	const fileInput = ref<HTMLInputElement | null>(null)
+	const fileList = ref<File[]>([])
+	const isDarkMode = useTheme().current.value.dark
+
+	defineExpose({
+		fileInput,
+	})
+
+	watch(() => props.modelValue, (value) => {
+		fileList.value = value
+	}, {
+		immediate: true,
+	})
+
+	watch(fileList, (value: File[]) => {
+		emits('update:modelValue', value)
+	})
+
+	const { widthStyles } = useWidthable(props)
+
+	function newFiles(files: File[]) {
+		if (props.disabled) {
+			return
+		}
+		if (!props.multiple) {
+			files = files.slice(0, 1)
+		}
+		const { errors, validFiles } = validateFiles(
+			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits,
+		)
+
+		if (errors.length) {
+			emits('error', errors)
+		}
+		if (props.multiple) {
+			fileList.value = [...fileList.value, ...validFiles]
+		}
+		else {
+			fileList.value = validFiles
+		}
+	}
+
+	useFileDrop(
+		dropZone,
+		newFiles,
+	)
+
+	function onFileChange(e: Event) {
+		const files = (e.target as HTMLInputElement).files
+		if (!files) {
+			return
+		}
+		newFiles(Array.from(files))
+		;(e.target as HTMLInputElement).value = ''
+	}
+</script>
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+	<label
+		ref="dropZone"
+		:for="id"
+		:class="[
+			{
+				dragover: dragover,
+				'sy-file-upload--disabled': disabled,
+				'dark-mode': isDarkMode,
+			},
+		]"
+		:style="widthStyles"
+		class="sy-file-upload d-block pa-4"
+		@dragover.prevent="dragover = true"
+		@dragleave="dragover = false"
+	>
+		<input
+			:id="id"
+			ref="fileInput"
+			type="file"
+			:disabled="disabled"
+			:multiple="multiple"
+			:accept="allowedExtensions.map(el=>`.${el}`).join(', ')"
+			class="sy-file-upload-input"
+			@change="onFileChange"
+		>
+		<slot>
+			<FileUploadContent
+				:allowed-extensions="allowedExtensions"
+				:multiple="multiple"
+				:file-size-max="fileSizeMax"
+				:file-size-units="fileSizeUnits"
+			>
+				<template
+					v-for="(_, slotName) in $slots"
+					#[slotName]="slotProps"
+				>
+					<slot
+						:name="slotName"
+						v-bind="slotProps || {}"
+					/>
+				</template>
+			</FileUploadContent>
+		</slot>
+	</label>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.sy-file-upload {
+	cursor: pointer;
+	position: relative;
+	border: 1px dashed tokens.$colors-border-accent;
+	border-radius: tokens.$radius-rounded-lg;
+	transition: background 0.25s;
+
+	&:hover,
+	&:focus-within,
+	&.dragover {
+		background: tokens.$colors-background-surface-alt;
+	}
+
+	&.dark-mode {
+		&:hover,
+		&:focus-within,
+		&.dragover {
+			background: #303030;
+		}
+	}
+
+	&.sy-file-upload--disabled {
+		opacity: 0.5;
+		cursor: default;
+
+		&:hover,
+		&:focus-within,
+		&.dragover {
+			background: inherit;
+		}
+	}
+
+	&.sy-file-upload--disabled.dark-mode {
+		&:hover,
+		&:focus-within,
+		&.dragover {
+			background: #303030;
+		}
+	}
+}
+
+.sy-file-upload-input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	white-space: nowrap;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+}
+</style>

package/src/components/FileUpload/FileUploadContent.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+	import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
+	import { locales } from './locales'
+	import { mdiCloudUpload } from '@mdi/js'
+	import { computed } from 'vue'
+
+	const props = defineProps<{
+		allowedExtensions: string[]
+		fileSizeUnits: Array<string>
+		fileSizeMax: number
+		multiple: boolean
+	}>()
+
+	export interface FileUploadContentSlots {
+		'icon'(): void
+		'action-text'(): void
+		'or'(): void
+		'button-text'(): void
+		'info-text'(): void
+	}
+
+	defineSlots<FileUploadContentSlots>()
+
+	const maxSizeReadable = computed(() => {
+		return calcHumanFileSize(props.fileSizeMax, props.fileSizeUnits)
+	})
+</script>
+
+<template>
+	<span class="sy-file-upload-placeholder">
+		<slot
+			name="icon"
+		>
+			<VIcon
+				size="40"
+				color="primary"
+			>
+				{{ mdiCloudUpload }}
+			</VIcon>
+		</slot>
+
+		<span
+			class="mt-1 font-weight-medium text-black"
+		>
+			<slot
+				name="action-text"
+				:multiple="multiple"
+			>
+				<span>{{ locales.dropFilesHere(multiple) }}</span>
+			</slot>
+		</span>
+
+		<span
+			class="mb-2 sy-file-upload-caption"
+		>
+			<slot name="or">
+				{{ locales.or }}
+			</slot>
+		</span>
+
+		<span
+			class="sy-file-upload-btn bg-primary text-white elevation-2"
+		>
+			<slot name="button-text">
+				{{ locales.chooseFile(multiple) }}
+			</slot>
+		</span>
+
+		<span
+			class="mt-4 sy-file-upload-caption"
+		>
+			<slot
+				name="info-text"
+				:max-size="maxSizeReadable"
+				:extensions="allowedExtensions"
+			>
+				{{
+					locales.infoText(
+						maxSizeReadable,
+						allowedExtensions,
+					)
+				}}
+			</slot>
+		</span>
+	</span>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.sy-file-upload-placeholder {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+.sy-file-upload-caption {
+	font-size: 0.875rem;
+	color: tokens.$colors-text-subdued;
+}
+
+.sy-file-upload-btn {
+	border-radius: tokens.$radius-rounded;
+	transition: background 0.25s;
+	font-weight: 700 !important;
+	font-size: tokens.$heading-3-font-size;
+	padding: 10px 16px;
+}
+</style>

package/src/components/FileUpload/locales.ts

@@ -0,0 +1,10 @@
+export const locales = {
+	or: 'Ou',
+	chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
+	infoText: (max: string, ext: string[]): string =>
+		`Taille max. : ${max}. ${ext.length === 1 ? 'Format accepté' : 'Formats acceptés'} : ${ext.join(', ')}`,
+	fileSizeUnits: ['o', 'Ko', 'Mo', 'Go', 'To'],
+	dropFilesHere: (multiple: boolean): string => (!multiple ? 'Déposer votre fichier ici' : 'Déposer vos fichiers ici'),
+	errorSize: (fileName: string, max: string): string => `Le fichier ${fileName} est trop volumineux. Taille max. : ${max}`,
+	errorExtension: (fileName: string, ext: string[]): string => `Le fichier ${fileName} a une extension invalide. Extensions acceptées : ${ext.join(', ')}`,
+}

package/src/components/FileUpload/tests/FileUpload.spec.ts

@@ -0,0 +1,332 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import FileUpload from '../FileUpload.vue'
+
+const file: File = new File([''], 'filename', { type: 'text/html' })
+
+describe('FileUpload', () => {
+	const consoleMock = vi
+		.spyOn(console, 'warn')
+		.mockImplementation(() => undefined)
+
+	afterEach(() => {
+		consoleMock.mockReset()
+	})
+
+	it('renders correctly', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('renders correctly in multiple mode', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				multiple: true,
+				modelValue: [file, file],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('renders correctly with only one extension allowed', () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				allowedExtensions: ['pdf'],
+				modelValue: [file],
+			},
+		})
+
+		expect(wrapper.text()).toMatchSnapshot()
+	})
+
+	it('change the style when dragging', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const label = wrapper.find('label')
+		const labelClasses = label.classes()
+
+		await wrapper.find('input').trigger('dragover')
+		expect(label.classes()).not.toEqual(labelClasses)
+
+		await wrapper.find('input').trigger('dragleave')
+		expect(label.classes()).toEqual(labelClasses)
+	})
+
+	it('accepts the drop of a file with the correct extension', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('accepts the drop of many files', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				multiple: true,
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file, file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([[file, file, file]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('rejects the drop of a file with the wrong extension', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		const file: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
+	})
+
+	it('rejects the drop of a file with the wrong extension in multiple mode', async () => {
+		const pdfFile: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
+		const jpgFile: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
+
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				multiple: true,
+				modelValue: [pdfFile],
+				allowedExtensions: ['pdf'],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [jpgFile],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[pdfFile]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [pdfFile],
+			},
+		})
+
+		expect(wrapper.emitted('error')?.[1]).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([[pdfFile, pdfFile]])
+	})
+
+	it('rejects the drop of a file that is too big', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				fileSizeMax: 1,
+			},
+		})
+
+		const file: File = new File(['42'], 'filename.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg est trop volumineux. Taille max. : 1 o']])
+	})
+
+	it('do nothing if no file is dropped', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('allow any extension if allowedExtensions is empty', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				allowedExtensions: [],
+			},
+		})
+
+		const file: File = new File([''], 'filename.xyz', { type: 'unknown' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('do nothing if the field is disabled', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+				disabled: true,
+			},
+		})
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('if many files are dropped in single mode, only the first one is kept', async () => {
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [],
+			},
+		})
+
+		const file1: File = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2: File = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+
+		await wrapper.find('label').trigger('drop', {
+			dataTransfer: {
+				files: [file1, file2],
+			},
+		})
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file1]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('update the field when the input changes', async () => {
+		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [file1],
+			},
+		})
+
+		const input = wrapper.find('input')
+		input.element.files = [file2] as unknown as FileList
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file2]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+
+	it('add the new files to the existing ones when the input changes in multiple mode', async () => {
+		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
+		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
+		const wrapper = mount(FileUpload, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [file1],
+				multiple: true,
+			},
+		})
+
+		const input = wrapper.find('input')
+		input.element.files = [file2] as unknown as FileList
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file1, file2]])
+		expect(wrapper.emitted('error')).toBeFalsy()
+	})
+})

package/src/components/FileUpload/tests/__snapshots__/FileUpload.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FileUpload > renders correctly 1`] = `"Déposer votre fichier iciOuChoisir un fichierTaille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png"`;
+
+exports[`FileUpload > renders correctly in multiple mode 1`] = `"Déposer vos fichiers iciOuChoisir des fichiersTaille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png"`;
+
+exports[`FileUpload > renders correctly with only one extension allowed 1`] = `"Déposer votre fichier iciOuChoisir un fichierTaille max. : 10 Mo. Format accepté : pdf"`;

package/src/components/FileUpload/useFileDrop.ts

@@ -0,0 +1,23 @@
+import { onMounted, toValue, type MaybeRef } from 'vue'
+
+export default function useFileDrop(
+	dropZone: MaybeRef<HTMLElement | null>,
+	callback: (files: File[]) => void,
+) {
+	onMounted(() => {
+		const inputEl = toValue(dropZone)
+
+		if (!inputEl) return
+
+		inputEl.addEventListener('drop', (e) => {
+			e.preventDefault()
+			e.stopPropagation()
+
+			const droppedFiles = e.dataTransfer?.files
+
+			if (!droppedFiles?.length) return
+
+			callback(Array.from(droppedFiles))
+		})
+	})
+}

package/src/components/FileUpload/validateFiles.ts

@@ -0,0 +1,39 @@
+import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
+import { locales } from './locales'
+
+export default function validateFiles(
+	files: File[],
+	maxFileSize: number,
+	allowedExtensions: string[],
+	fileSizeUnits: string[],
+) {
+	const errors: string[] = []
+	const validFiles: File[] = []
+	for (const file of files) {
+		let isValid = true
+		if (file.size > maxFileSize) {
+			errors.push(
+				locales.errorSize(file.name, calcHumanFileSize(maxFileSize, fileSizeUnits)),
+			)
+			isValid = false
+		}
+
+		if (
+			!allowedExtensions.includes(file.name.split('.').pop() || '')
+			&& allowedExtensions.length > 0
+		) {
+			errors.push(
+				locales.errorExtension(file.name, allowedExtensions),
+			)
+			isValid = false
+		}
+
+		if (isValid) {
+			validFiles.push(file)
+		}
+	}
+	return {
+		errors,
+		validFiles,
+	}
+}