@bagelink/vue 0.0.712 → 0.0.716

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

@@ -1,300 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue'
-import { Btn, Icon, 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
-			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 v-if="!multiple" class="imagePreviewWrap">
-					<img class="preview" :src="file.url" alt="">
-				</div>
-				<div class="previewName">
-					<img
-						v-if="multiple"
-						height="60"
-						class="preview"
-						:src="file.url"
-						alt=""
-					>
-					<p class="no-margin">
-						{{ file.name }}
-					</p>
-					<Btn
-						thin
-						flat
-						icon="delete"
-						color="red"
-						@click.stop="removeFile(file)"
-					/>
-				</div>
-			</template>
-			<template v-for="fileQ in fileQueue" :key="fileQ.file">
-				<div v-if="!multiple" class="imagePreviewWrap">
-					<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
-				</div>
-				<div class="previewName">
-					<img
-						v-if="multiple"
-						height="60"
-						class="preview"
-						:src="fileToUrl(fileQ.file)"
-						alt=""
-					>
-					<p class="no-margin">
-						{{ fileQ.name }}
-					</p>
-					<div
-						class="pie"
-						:style="`--p:${fileQ.progress}`"
-						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span v-if="fileQ.progress < 100" class="progress">
-							{{ `${fileQ.progress.toFixed(0)}` }}
-						</span>
-						<Icon class="success" icon="check" />
-					</div>
-				</div>
-			</template>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.bagel-input .fileUploadWrap {
-	outline: 1px solid var(--border-color);
-	border-radius: var(--input-border-radius);
-	text-align: center;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	position: relative;
-	height: 132px;
-	font-size: var(--input-font-size);
-}
-
-.previewName {
-	padding: 0.5rem;
-	text-align: start;
-	color: var(--input-color);
-	display: grid;
-	grid-template-columns: 1fr 22px;
-	align-items: center;
-	padding-inline: 14px;
-
-}
-
-.previewName p {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.imagePreviewWrap {
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
-	height: 90px;
-	padding: 5px;
-}
-
-img.preview {
-	height: 80px;
-	border-radius: var(--input-border-radius);
-	object-fit: contain;
-}
-
-.fileUploadWrap.dragover,
-.fileUploadWrap:hover {
-	box-shadow: inset 0 0 10px #00000012;
-}
-
-.bagel-input .fileUploadWrap.fileDropZone {
-	background: var(--input-bg);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--bgl-gray);
-	width: 100%;
-}
-
-.bagel-input .fileUploadWrap.fileDropZone:after {
-	content: 'Drop files here or click to upload';
-}
-
-.pie {
-	width: 30px;
-	height: 30px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.pie:before {
-	content: '';
-	position: absolute;
-	border-radius: 50%;
-	inset: 0;
-	transition: all 0.2s ease-in-out;
-	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
-	mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
-}
-
-.pie .success {
-	transform: scale(0);
-	opacity: 0;
-	transition: all 0.3s ease-in-out;
-}
-
-.pie .progress {
-	position: absolute;
-	font-size: 10px;
-}
-
-.pie.complete .progress {
-	display: none;
-}
-
-.pie.complete .success {
-	transform: scale(1.3);
-	opacity: 1;
-}
-
-.pie.complete:before {
-	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
-}
-
-.pie.complete {
-	color: var(--bgl-green);
-}
-</style>