@bagelink/vue 0.0.466 → 0.0.471

package/src/components/form/inputs/FileUpload.vue

@@ -1,49 +1,201 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+import {
+	Btn,
+	MaterialIcon,
+	type StorageFile,
+	useBagel,
+} from '@bagelink/vue'
+
+const props = defineProps<{
+	label?: string
+	multiple?: boolean
+	files?: StorageFile | StorageFile[]
+	deleteEndpoint?: string
+	bindkey?: StrKey
+	width?: string
+}>()
+
+const bagel = useBagel()
+
+interface QueueFile {
+	file: File
+	progress: number
+	uploading?: boolean
+	name?: string
+	uploaded?: boolean
+}
+
+type StrKey = keyof StorageFile
+
+type FSValue = string[] | string | number
+
+const bindKey: StrKey = props.bindkey || 'id'
+
+const file_bindkeys = defineModel<FSValue>('modelValue')
+const storageFiles = $ref<StorageFile[]>([])
+
+const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2].flat().join(',')
+
+onMounted(() => {
+	if (!props.files && [file_bindkeys.value].flat().length) {
+		const ids = [file_bindkeys.value].flat()
+		if (props.multiple) {
+			ids.forEach((id) => {
+				void bagel.get<StorageFile>(`/files/${id}`).then((file) => {
+					storageFiles.push(file)
+				})
+			})
+		} else {
+			void bagel.get<StorageFile>(`/files/${ids[0]}`).then((file) => {
+				storageFiles.push(file)
+			})
+		}
+	}
+})
+
+watch(
+	() => props.files,
+	(newFiles) => {
+		if (newFiles) {
+			const filesToAdd = [newFiles]
+				.flat()
+				.filter(f => !storageFiles.find(sf => sf[bindKey] === f[bindKey]))
+			for (const file of filesToAdd) {
+				storageFiles.push(file)
+			}
+		}
+	},
+	{ immediate: true },
+)
+
+watch(
+	() => storageFiles,
+	(newFiles) => {
+		let idValue: FSValue
+		if (props.multiple) { idValue = newFiles.map(f => f[bindKey]) as FSValue
+		}
+		else {
+			idValue = (newFiles[0][bindKey] as string) || ''
+		}
+		if (!compareIds(file_bindkeys.value, idValue)) {
+			file_bindkeys.value = idValue
+		}
+	},
+	{ deep: true },
+)
+
+const fileQueue = $ref<QueueFile[]>([])
+let isDragOver = $ref(false)
+
+function preventDefault(e: Event) {
+	e.preventDefault()
+	e.stopPropagation()
+}
+
+const fileToUrl = (file: File) => URL.createObjectURL(file)
+function removeFile(file: StorageFile) {
+	const index = storageFiles.indexOf(file)
+	storageFiles.splice(index, 1)
+
+	if (props.deleteEndpoint) {
+		void bagel.delete(`${props.deleteEndpoint}/${file.id}`)
+	}
+}
+
+function flushQueue() {
+	fileQueue.forEach(async (file, i) => {
+		if (!props.multiple) storageFiles.splice(0, 1)
+		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		})
+		storageFiles.push(serverFile)
+		fileQueue.splice(i, 1)
+	})
+}
+
+function browse() {
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.multiple = props.multiple
+	input.onchange = (e: Event) => {
+		const target = e.target as HTMLInputElement
+		if (target.files) {
+			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }))
+		}
+		flushQueue()
+	}
+	input.click()
+}
+
+function dragleave(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) isDragOver = false
+	else isDragOver = false
+}
+
+function dragover(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) isDragOver = true
+	else isDragOver = false
+}
+
+function drop(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) {
+		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }))
+	}
+	isDragOver = false
+	flushQueue()
+}
+</script>
+
 <template>
 	<div class="bagel-input">
 		<label>
 			{{ label }}
 		</label>
 		<div
-			@click="browse"
-			@dragover="dragover"
-			@drop="drop"
-			@dragleave="dragleave"
 			class="fileUploadWrap"
 			:class="{
 				fileDropZone: !storageFiles.length && !fileQueue.length,
 				dragover: isDragOver,
 			}"
+			@click="browse"
+			@dragover="dragover"
+			@drop="drop"
+			@dragleave="dragleave"
 		>
 			<slot name="files" :files="storageFiles" :fileQueue>
 				<template v-for="file in storageFiles" :key="file.id">
-					<div class="single-image" v-if="!multiple">
-						<img class="single preview" :src="file.url" alt="" >
+					<div v-if="!multiple" class="single-image">
+						<img class="single preview" :src="file.url" alt="">
 					<!-- <p class="no-margin">
 						{{ file.name }}
 					</p> -->
 					</div>
-					<div class="multi-image-item previewName" v-if="multiple">
-						<img  class="preview" :src="file.url" alt="" >
+					<div v-if="multiple" class="multi-image-item previewName">
+						<img class="preview" :src="file.url" alt="">
 						<p class="no-margin">
 							{{ file.name }}
 						</p>
 						<Btn
 							thin
-							@click.stop="removeFile(file)"
 							flat
 							icon="delete"
 							color="red"
+							@click.stop="removeFile(file)"
 						/>
 					</div>
 				</template>
 				<template v-for="fileQ in fileQueue" :key="fileQ.file">
-					<div class="imagePreviewWrap" v-if="!multiple">
-						<img class="preview" :src="fileToUrl(fileQ.file)" alt="" >
+					<div v-if="!multiple" class="imagePreviewWrap">
+						<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
 					</div>
 					<div class="previewName">
 						<img
-							:width="width || '220'"
 							v-if="multiple"
+							:width="width || '220'"
 							class="preview"
 							:src="fileToUrl(fileQ.file)"
 							alt=""
@@ -57,7 +209,7 @@
 							style="--b: 2px"
 							:class="{ complete: fileQ.progress === 100 }"
 						>
-							<span class="progress" v-if="fileQ.progress < 100">
+							<span v-if="fileQ.progress < 100" class="progress">
 								{{ `${fileQ.progress.toFixed(0)}` }}
 							</span>
 							<MaterialIcon class="success" icon="check" />
@@ -72,154 +224,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { onMounted, watch } from 'vue';
-import {
-	Btn, type StorageFile, useBagel, MaterialIcon,
-} from '@bagelink/vue';
-
-const bagel = useBagel();
-
-type QueueFile = {
-	file: File;
-	progress: number;
-	uploading?: boolean;
-	name?: string;
-	uploaded?: boolean;
-};
-
-type StrKey = keyof StorageFile;
-
-type FSValue = string[] | string | number;
-
-const props = defineProps<{
-	label?: string;
-	multiple?: boolean;
-	files?: StorageFile | StorageFile[];
-	deleteEndpoint?: string;
-	bindkey?: StrKey;
-	width?: string;
-}>();
-
-const bindKey: StrKey = props.bindkey || 'id';
-
-const file_bindkeys = defineModel<FSValue>('modelValue');
-const storageFiles = $ref<StorageFile[]>([]);
-
-const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2].flat().join(',');
-
-onMounted(() => {
-	if (!props.files && [file_bindkeys.value].flat().length) {
-		const ids = [file_bindkeys.value].flat();
-		if (props.multiple) {
-			ids.forEach((id) => {
-				void bagel.get<StorageFile>(`/files/${id}`).then((file) => {
-					storageFiles.push(file);
-				});
-			});
-		} else {
-			void bagel.get<StorageFile>(`/files/${ids[0]}`).then((file) => {
-				storageFiles.push(file);
-			});
-		}
-	}
-});
-
-watch(
-	() => props.files,
-	(newFiles) => {
-		if (newFiles) {
-			const filesToAdd = [newFiles]
-				.flat()
-				.filter((f) => !storageFiles.find((sf) => sf[bindKey] === f[bindKey]));
-			for (const file of filesToAdd) {
-				storageFiles.push(file);
-			}
-		}
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => storageFiles,
-	(newFiles) => {
-		let idValue: FSValue;
-		if (props.multiple) idValue = newFiles.map((f) => f[bindKey]) as FSValue;
-		else {
-			idValue = (newFiles[0]?.[bindKey] as string) || '';
-		}
-		if (!compareIds(file_bindkeys?.value, idValue)) {
-			file_bindkeys.value = idValue;
-		}
-	},
-	{ deep: true },
-);
-
-const fileQueue = $ref<QueueFile[]>([]);
-let isDragOver = $ref(false);
-
-const preventDefault = (e: Event) => {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
-const fileToUrl = (file: File) => URL.createObjectURL(file);
-const removeFile = (file: StorageFile) => {
-	const index = storageFiles.indexOf(file);
-	storageFiles.splice(index, 1);
-
-	if (props.deleteEndpoint) {
-		void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
-	}
-};
-
-const flushQueue = () => {
-	fileQueue.forEach(async (file, i) => {
-		if (!props.multiple) storageFiles.splice(0, 1);
-		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-		});
-		storageFiles.push(serverFile);
-		fileQueue.splice(i, 1);
-	});
-};
-
-const browse = () => {
-	const input = document.createElement('input');
-	input.type = 'file';
-	input.multiple = props.multiple;
-	input.onchange = (e: Event) => {
-		const target = e?.target as HTMLInputElement;
-		if (target?.files) {
-			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
-		}
-		flushQueue();
-	};
-	input.click();
-};
-
-const dragleave = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) isDragOver = false;
-	else isDragOver = false;
-};
-
-const dragover = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) isDragOver = true;
-	else isDragOver = false;
-};
-
-const drop = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
-	}
-	isDragOver = false;
-	flushQueue();
-};
-</script>
-
 <style scoped>
 .bagel-input .fileUploadWrap {
 	--width: 320px;

package/src/components/form/inputs/FileUploadURL.vue

@@ -1,51 +1,167 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { Btn, MaterialIcon, type StorageFile, useBagel } from '@bagelink/vue'
+
+const props = defineProps<{
+	label: string
+	multiple?: boolean
+	files?: StorageFile | StorageFile[]
+	deleteEndpoint?: string
+}>()
+
+const bagel = useBagel()
+
+interface QueueFile {
+	file: File
+	progress: number
+	uploading?: boolean
+	name?: string
+	uploaded?: boolean
+}
+
+const fileURLs = defineModel<string[] | string>('modelValue')
+const storageFiles = $ref<StorageFile[]>([])
+
+const compareIds = (v1?: string[] | string, v2?: string[] | string) => [v1].flat().join(',') === [v2].flat().join(',')
+
+watch(
+	() => props.files,
+	(newFiles) => {
+		if (newFiles) storageFiles.push(...[newFiles].flat())
+	},
+	{ immediate: true }
+)
+
+watch(
+	() => storageFiles,
+	(newFiles) => {
+		let idValue: string[] | string = ''
+		if (props.multiple) idValue = newFiles.map(f => f.url || '')
+		else idValue = newFiles[0].url || ''
+		if (!compareIds(fileURLs.value, idValue)) fileURLs.value = idValue
+	},
+	{ deep: true }
+)
+
+const fileQueue = $ref<QueueFile[]>([])
+let isDragOver = $ref(false)
+
+function preventDefault(e: Event) {
+	e.preventDefault()
+	e.stopPropagation()
+}
+
+const fileToUrl = (file: File) => URL.createObjectURL(file)
+function removeFile(file: StorageFile) {
+	const index = storageFiles.indexOf(file)
+	storageFiles.splice(index, 1)
+
+	if (props.deleteEndpoint) {
+		void bagel.delete(`${props.deleteEndpoint}/${file.id}`)
+	}
+}
+
+function flushQueue() {
+	fileQueue.forEach(async (file, i) => {
+		if (!props.multiple) storageFiles.splice(0, 1)
+		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		})
+		storageFiles.push(serverFile)
+		fileQueue.splice(i, 1)
+	})
+}
+
+function browse() {
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.multiple = props.multiple
+	input.onchange = (e: Event) => {
+		const target = e.target as HTMLInputElement
+		if (target.files) {
+			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 })
+			)
+		}
+		flushQueue()
+	}
+	input.click()
+}
+
+function dragleave(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) isDragOver = false
+	else isDragOver = false
+}
+
+function dragover(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) isDragOver = true
+	else isDragOver = false
+}
+
+function drop(e: DragEvent) {
+	preventDefault(e)
+	if (e.dataTransfer) {
+		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 })
+		)
+	}
+	isDragOver = false
+	flushQueue()
+}
+</script>
+
 <template>
 	<div class="bagel-input">
 		<label>
 			{{ label }}
 		</label>
 		<div
-			@click="browse"
-			@dragover="dragover"
-			@drop="drop"
-			@dragleave="dragleave"
 			class="fileUploadWrap"
 			:class="{
 				fileDropZone: !storageFiles.length && !fileQueue.length,
 				dragover: isDragOver,
-			}">
+			}"
+			@click="browse"
+			@dragover="dragover"
+			@drop="drop"
+			@dragleave="dragleave"
+		>
 			<template v-for="file in storageFiles" :key="file.id">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="file.url" alt="" />
+				<div v-if="!multiple" class="imagePreviewWrap">
+					<img class="preview" :src="file.url" alt="">
 				</div>
 				<div class="previewName">
 					<img
-						height="60"
 						v-if="multiple"
+						height="60"
 						class="preview"
 						:src="file.url"
-						alt="" />
+						alt=""
+					>
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
 					<Btn
 						thin
-						@click.stop="removeFile(file)"
 						flat
 						icon="delete"
-						color="red" />
+						color="red"
+						@click.stop="removeFile(file)"
+					/>
 				</div>
 			</template>
 			<template v-for="fileQ in fileQueue" :key="fileQ.file">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
+				<div v-if="!multiple" class="imagePreviewWrap">
+					<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
 				</div>
 				<div class="previewName">
 					<img
-						height="60"
 						v-if="multiple"
+						height="60"
 						class="preview"
 						:src="fileToUrl(fileQ.file)"
-						alt="" />
+						alt=""
+					>
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
@@ -53,8 +169,9 @@
 						class="pie"
 						:style="`--p:${fileQ.progress}`"
 						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }">
-						<span class="progress" v-if="fileQ.progress < 100">
+						:class="{ complete: fileQ.progress === 100 }"
+					>
+						<span v-if="fileQ.progress < 100" class="progress">
 							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
 						<MaterialIcon class="success" icon="check" />
@@ -65,121 +182,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { watch } from 'vue';
-import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
-
-const bagel = useBagel();
-
-type QueueFile = {
-	file: File;
-	progress: number;
-	uploading?: boolean;
-	name?: string;
-	uploaded?: boolean;
-};
-
-const props = defineProps<{
-	label: string;
-	multiple?: boolean;
-	files?: StorageFile | StorageFile[];
-	deleteEndpoint?: string;
-}>();
-
-const fileURLs = defineModel<string[] | string>('modelValue');
-const storageFiles = $ref<StorageFile[]>([]);
-
-const compareIds = (v1?: string[] | string, v2?: string[] | string) =>
-	[v1].flat().join(',') === [v2].flat().join(',');
-
-watch(
-	() => props.files,
-	(newFiles) => {
-		if (newFiles) storageFiles.push(...[newFiles].flat());
-	},
-	{ immediate: true }
-);
-
-watch(
-	() => storageFiles,
-	(newFiles) => {
-		let idValue: string[] | string = '';
-		if (props.multiple) idValue = newFiles.map((f) => f.url || '');
-		else idValue = newFiles[0]?.url || '';
-		if (!compareIds(fileURLs?.value, idValue)) fileURLs.value = idValue;
-	},
-	{ deep: true }
-);
-
-const fileQueue = $ref<QueueFile[]>([]);
-let isDragOver = $ref(false);
-
-const preventDefault = (e: Event) => {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
-const fileToUrl = (file: File) => URL.createObjectURL(file);
-const removeFile = (file: StorageFile) => {
-	const index = storageFiles.indexOf(file);
-	storageFiles.splice(index, 1);
-
-	if (props.deleteEndpoint) {
-		void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
-	}
-};
-
-const flushQueue = () => {
-	fileQueue.forEach(async (file, i) => {
-		if (!props.multiple) storageFiles.splice(0, 1);
-		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-		});
-		storageFiles.push(serverFile);
-		fileQueue.splice(i, 1);
-	});
-};
-
-const browse = () => {
-	const input = document.createElement('input');
-	input.type = 'file';
-	input.multiple = props.multiple;
-	input.onchange = (e: Event) => {
-		const target = e?.target as HTMLInputElement;
-		if (target?.files) {
-			Array.from(target.files).forEach((file: File) =>
-				fileQueue.push({ name: file.name, file, progress: 0 })
-			);
-		}
-		flushQueue();
-	};
-	input.click();
-};
-
-const dragleave = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) isDragOver = false;
-	else isDragOver = false;
-};
-
-const dragover = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) isDragOver = true;
-	else isDragOver = false;
-};
-
-const drop = (e: DragEvent) => {
-	preventDefault(e);
-	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file: File) =>
-			fileQueue.push({ name: file.name, file, progress: 0 })
-		);
-	}
-	isDragOver = false;
-	flushQueue();
-};
-</script>
-
 <style scoped>
 .bagel-input .fileUploadWrap {
 	outline: 1px solid var(--border-color);