feat: analyse import + all tests fixed
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
fbe9619224
commit
3170a7c60e
127
assets/vue/app/shared/components/ui/FileUpload.vue
Normal file
127
assets/vue/app/shared/components/ui/FileUpload.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="file-upload">
|
||||
<label :for="inputId" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
|
||||
:class="{ 'border-green-500 bg-green-50': isDragOver, 'hover:border-gray-400': !isDragOver }"
|
||||
@drop.prevent="handleDrop"
|
||||
@dragover.prevent="isDragOver = true"
|
||||
@dragleave.prevent="isDragOver = false"
|
||||
>
|
||||
<div class="space-y-1 text-center">
|
||||
<svg
|
||||
class="mx-auto h-12 w-12 text-gray-400"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path
|
||||
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label
|
||||
:for="inputId"
|
||||
class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500"
|
||||
>
|
||||
<span>Sélectionner des fichiers</span>
|
||||
<input
|
||||
:id="inputId"
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
class="sr-only"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
@change="handleFileSelect"
|
||||
>
|
||||
</label>
|
||||
<p class="pl-1">ou glisser-déposer</p>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-500">
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<div v-if="selectedFiles.length > 0" class="mt-4">
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">Fichiers sélectionnés :</h4>
|
||||
<ul class="text-xs text-gray-600 space-y-1">
|
||||
<li v-for="file in selectedFiles" :key="file.name" class="flex justify-between items-center">
|
||||
<span class="truncate">{{ file.name }}</span>
|
||||
<span class="text-gray-400">{{ formatFileSize(file.size) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Choisir des fichiers'
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: '.cbz,.cbr'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: 'CBZ ou CBR jusqu\'à 100MB chacun'
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'files-selected']);
|
||||
|
||||
const fileInput = ref(null);
|
||||
const isDragOver = ref(false);
|
||||
const selectedFiles = ref([]);
|
||||
|
||||
const inputId = computed(() => `file-upload-${Math.random().toString(36).substr(2, 9)}`);
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
selectedFiles.value = files;
|
||||
emit('update:modelValue', files);
|
||||
emit('files-selected', files);
|
||||
};
|
||||
|
||||
const handleDrop = (event) => {
|
||||
isDragOver.value = false;
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
selectedFiles.value = files;
|
||||
emit('update:modelValue', files);
|
||||
emit('files-selected', files);
|
||||
};
|
||||
|
||||
// Watch for external changes to modelValue
|
||||
watch(() => props.modelValue, (newFiles) => {
|
||||
selectedFiles.value = newFiles;
|
||||
}, { deep: true });
|
||||
</script>
|
||||
46
assets/vue/app/shared/components/ui/LoadingSpinner.vue
Normal file
46
assets/vue/app/shared/components/ui/LoadingSpinner.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<svg
|
||||
class="animate-spin"
|
||||
:class="sizeClasses"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
});
|
||||
|
||||
const sizeClasses = computed(() => {
|
||||
const sizes = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-8 w-8',
|
||||
lg: 'h-12 w-12',
|
||||
xl: 'h-16 w-16'
|
||||
};
|
||||
return sizes[props.size];
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user