Add files modal and X button

app/components/ui/file-upload/FileUpload.vue

@@ -2,25 +2,30 @@
 import type { HTMLAttributes } from "vue";
 import { Motion } from "motion-v";
 import { ref } from "vue";
+import { X } from "lucide-vue-next";
+import Button from "../button/Button.vue";
 
 interface FileUploadProps {
     class?: HTMLAttributes["class"];
     accept?: string;
+    modelValue?: File[];
 }
 
-defineProps<FileUploadProps>();
+const props = defineProps<FileUploadProps>();
 
 const emit = defineEmits<{
     (e: "onChange", files: File[]): void;
+    (e: "update:modelValue", files: File[]): void;
 }>();
 
 const fileInputRef = ref<HTMLInputElement | null>(null);
-const files = ref<File[]>([]);
+const files = ref<File[]>(props.modelValue || []);
 const isActive = ref<boolean>(false);
 
 function handleFileChange(newFiles: File[]) {
     files.value = [...files.value, ...newFiles];
     emit("onChange", files.value);
+    emit("update:modelValue", files.value);
 }
 
 function onFileChange(e: Event) {
@@ -44,6 +49,17 @@ function handleDrop(e: DragEvent) {
     const droppedFiles = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
     if (droppedFiles.length) handleFileChange(droppedFiles);
 }
+function removeFile(event: MouseEvent, index: number) {
+    files.value.splice(index, 1);
+    event.stopPropagation();
+    emit("update:modelValue", files.value);
+}
+
+watch(() => props.modelValue, (newVal) => {
+    if (newVal) {
+        files.value = newVal;
+    }
+}, { deep: true });
 </script>
 
 <template>
@@ -81,6 +97,11 @@ function handleDrop(e: DragEvent) {
                                 class="rounded-md bg-muted px-1.5 py-1 text-sm">
                                 {{ file.type || "unknown type" }}
                             </Motion>
+                            <Motion as="div" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }">
+                                <Button variant="ghost" @click="(e: MouseEvent) => removeFile(e, idx)">
+                                    <X />
+                                </Button>
+                            </Motion>
                         </div>
                     </Motion>