@bagelink/vue 0.0.160 → 0.0.162

package/src/components/formkit/FileUploader.vue

@@ -1,99 +1,86 @@
 <template>
-	<div class="files-wrapper flex">
-		<div
-			ref="dropZoneEl"
-			class="drop-zone flex-grow"
-			@click="openFileDialog"
-			@drop.prevent.stop="onDrop"
-			@dragleave="draggingOver = false"
-		>
-			<Transition name="pop">
-				<div
-					ref="dropCircle"
-					v-if="draggingOver"
-					class="drop-circle"
-				/>
-			</Transition>
-			<div
-				class="img-label"
-				v-if="allowUpload"
-			>
-				<p>
-					{{ dragDropLabel }} <span>{{ browseLabel }}</span>
-				</p>
-			</div>
-			<div class="uploading-wrap">
-				<div
-					v-for="(item, index) in files"
-					:class="{ uploading: item.uploading }"
-					:key="index"
-				>
-					<div class="load-file-bar">
-						<!-- Preview File if image -->
-						<img
-							width="40"
-							v-if="isImg(item)"
-							:src="item.dataUrl"
-							:alt="item.name"
-							style="margin-inline-end: 10px"
-						>
-						<p>
-							{{ item.name }}
-						</p>
-						<div class="flex">
-							<div
-								class="pie"
-								:style="`--p:${item.progress}`"
-								style="--b: 2px"
-								:class="{ complete: item.progress === 100 }"
-							>
-								<span
-									class="progress"
-									v-if="item.progress < 100"
-								>{{
-									`${item.progress.toFixed(0)}`
-								}}</span>
-								<MaterialIcon
-									class="success"
-									icon="check"
-								/>
-							</div>
-							<Btn
-								thin
-								class="delete-btn"
-								@click.stop="deleteImg(item)"
-								icon="delete"
-								v-if="item.progress === 100"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<input
-			class="file-input"
-			type="file"
-			@change="handleFileInput"
-			ref="fileInputEl"
-			:multiple="context?.attrs.multiple || false"
-		>
-	</div>
+  <div class="files-wrapper flex">
+    <div
+      ref="dropZoneEl"
+      class="drop-zone flex-grow"
+      @click="openFileDialog"
+      @drop.prevent.stop="onDrop"
+      @dragleave="draggingOver = false"
+    >
+      <Transition name="pop">
+        <div ref="dropCircle" v-if="draggingOver" class="drop-circle" />
+      </Transition>
+      <div class="img-label" v-if="allowUpload">
+        <p>
+          {{ dragDropLabel }} <span>{{ browseLabel }}</span>
+        </p>
+      </div>
+      <div class="uploading-wrap">
+        <div
+          v-for="(item, index) in files"
+          :class="{ uploading: item.uploading }"
+          :key="index"
+        >
+          <div class="load-file-bar">
+            <!-- Preview File if image -->
+            <img
+              width="40"
+              v-if="isImg(item)"
+              :src="item.dataUrl"
+              :alt="item.name"
+              style="margin-inline-end: 10px"
+            />
+            <p>
+              {{ item.name }}
+            </p>
+            <div class="flex">
+              <div
+                class="pie"
+                :style="`--p:${item.progress}`"
+                style="--b: 2px"
+                :class="{ complete: item.progress === 100 }"
+              >
+                <span class="progress" v-if="item.progress < 100">{{
+                  `${item.progress.toFixed(0)}`
+                }}</span>
+                <MaterialIcon class="success" icon="check" />
+              </div>
+              <Btn
+                thin
+                class="delete-btn"
+                @click.stop="deleteImg(item)"
+                icon="delete"
+                v-if="item.progress === 100"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      class="file-input"
+      type="file"
+      @change="handleFileInput"
+      ref="fileInputEl"
+      :multiple="context?.attrs.multiple || false"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 interface UploadFile {
-	dataUrl: string;
-	progress: number;
-	uploading: boolean;
-	file?: File;
-	name: string;
-	serverFile?: any;
-	uploaded: boolean;
+  dataUrl: string;
+  progress: number;
+  uploading: boolean;
+  file?: File;
+  name: string;
+  serverFile?: any;
+  uploaded: boolean;
 }
 
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from "vue";
 
-import { MaterialIcon, Btn, useBagel } from '@bagelink/vue';
+import { MaterialIcon, Btn, useBagel } from "@bagelink/vue";
 
 const bagel = useBagel();
 
@@ -104,125 +91,130 @@ const fileInputEl = $ref<HTMLInputElement>();
 
 const files = $ref<UploadFile[]>([]);
 
-const props = withDefaults(defineProps<{
-	context: Record<string, any>;
-	dragDropLabel?: string;
-	browseLabel?: string;
-}>(), {
-	dragDropLabel: 'Drag and drop your files here',
-	browseLabel: 'or browse',
-});
+const props = withDefaults(
+  defineProps<{
+    context: Record<string, any>;
+    dragDropLabel?: string;
+    browseLabel?: string;
+  }>(),
+  {
+    dragDropLabel: "Drag and drop your files here",
+    browseLabel: "or browse",
+  }
+);
 
 const allowUpload = $computed(() => {
-	const tooManyFiles = !props.context?.attrs.multiple && files.length > 0;
-	return !tooManyFiles;
+  const tooManyFiles = !props.context?.attrs.multiple && files.length > 0;
+  return !tooManyFiles;
 });
 
-const openFileDialog = () => (allowUpload ? fileInputEl?.click() : '');
+const openFileDialog = () => (allowUpload ? fileInputEl?.click() : "");
 
 function animateCircle(e: DragEvent) {
-	e.preventDefault();
-	const zoneRect = dropZoneEl?.getBoundingClientRect?.();
-	if (!zoneRect) return;
-	draggingOver = true;
-	const left = e.clientX - zoneRect.left;
-	const top = e.clientY - zoneRect.top;
-	dropCircle?.style?.setProperty?.('left', `${left}px`);
-	dropCircle?.style?.setProperty?.('top', `${top}px`);
+  e.preventDefault();
+  const zoneRect = dropZoneEl?.getBoundingClientRect?.();
+  if (!zoneRect) return;
+  draggingOver = true;
+  const left = e.clientX - zoneRect.left;
+  const top = e.clientY - zoneRect.top;
+  dropCircle?.style?.setProperty?.("left", `${left}px`);
+  dropCircle?.style?.setProperty?.("top", `${top}px`);
 }
 
 function emitValue() {
-	// const fileValues = files.map((f) => f.serverFile?.id);
-	// console.log({ files });
-	if (!props.context?.attrs.multiple) props.context?.node.input(files[0].serverFile);
-	// eslint-disable-next-line no-alert
-	else alert('not implemented');
+  // const fileValues = files.map((f) => f.serverFile?.id);
+  // console.log({ files });
+  if (!props.context?.attrs.multiple)
+    props.context?.node.input(files[0].serverFile);
+  // eslint-disable-next-line no-alert
+  else alert("not implemented");
 }
 
-const isImg = (file: UploadFile) => file.file?.type.includes('image') ||
-	file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
-	file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
+const isImg = (file: UploadFile) =>
+  file.file?.type.includes("image") ||
+  file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
+  file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
 
 function uploadFiles() {
-	files.forEach(async (file) => {
-		if (file.uploaded || file.uploading || !file.file) return;
-		file.uploading = true;
-		file.serverFile = await bagel.uploadFile(file.file, {
-			onUploadProgress: (e) => (file.progress = e.progress * 100 - 1),
-		});
-		file.progress += 1;
-		emitValue();
-		file.uploaded = true;
-		file.uploading = false;
-	});
+  files.forEach(async (file) => {
+    if (file.uploaded || file.uploading || !file.file) return;
+    file.uploading = true;
+    file.serverFile = await bagel.uploadFile(file.file, {
+      onUploadProgress: (e) => (file.progress = e.progress * 100 - 1),
+    });
+    file.progress += 1;
+    emitValue();
+    file.uploaded = true;
+    file.uploading = false;
+  });
 }
 
 const deleteImg = async (file: UploadFile) => {
-	await bagel.delete(`files/${file.serverFile.id}`);
-	const index = files.indexOf(file);
-	files.splice(index, 1);
-	emitValue();
+  await bagel.delete(`files/${file.serverFile.id}`);
+  const index = files.indexOf(file);
+  files.splice(index, 1);
+  emitValue();
 };
 
 function readAsDataURL(file: File): Promise<any> {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onload = () => resolve(reader.result);
-		reader.onerror = reject;
-		reader.readAsDataURL(file);
-	});
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
 }
 
 async function addFiles(addedFiles: FileList) {
-	if (!allowUpload) return;
-	for (let i = 0; i < addedFiles.length; i++) {
-		const f = addedFiles[i];
-		const file: UploadFile = {
-			// eslint-disable-next-line no-await-in-loop
-			dataUrl: await readAsDataURL(f),
-			file: f,
-			name: f.name,
-			progress: 0,
-			uploading: false,
-			uploaded: false,
-		};
-		files.push(file);
-	}
-	uploadFiles();
+  if (!allowUpload) return;
+  for (let i = 0; i < addedFiles.length; i++) {
+    const f = addedFiles[i];
+    const file: UploadFile = {
+      // eslint-disable-next-line no-await-in-loop
+      dataUrl: await readAsDataURL(f),
+      file: f,
+      name: f.name,
+      progress: 0,
+      uploading: false,
+      uploaded: false,
+    };
+    files.push(file);
+  }
+  uploadFiles();
 }
 
 onMounted(() => {
-	dropZoneEl?.addEventListener('dragover', animateCircle);
-	if (!props.context?.attrs.multiple && props.context?.value) {
-		files.push({
-			serverFile: props.context?.value,
-			uploaded: true,
-			uploading: false,
-			progress: 100,
-			dataUrl: props.context?.value?.url,
-			name: props.context?.value?.name,
-		});
-	}
+  dropZoneEl?.addEventListener("dragover", animateCircle);
+  if (!props.context?.attrs.multiple && props.context?.value) {
+    files.push({
+      serverFile: props.context?.value,
+      uploaded: true,
+      uploading: false,
+      progress: 100,
+      dataUrl: props.context?.value?.url,
+      name: props.context?.value?.name,
+    });
+  }
 });
-onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle));
+onUnmounted(() => dropZoneEl?.removeEventListener("dragover", animateCircle));
 
 function handleFileInput(e: Event) {
-	const filesToAdd: FileList = (e.target as any).files;
-	void addFiles(filesToAdd); // TODO: Nati: should be awaited?
+  const filesToAdd: FileList = (e.target as any).files;
+  void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 
 function onDrop(e: DragEvent) {
-	draggingOver = false;
-	e.preventDefault();
-	const filesToAdd = e.dataTransfer?.files;
-	if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
+  draggingOver = false;
+  e.preventDefault();
+  const filesToAdd = e.dataTransfer?.files;
+  if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 </script>
 <style>
 .uploading-wrap {
-	width: 100%;
-	padding-right: 5px;
-	padding-left: 5px;
+  width: 100%;
+  padding-right: 5px;
+  padding-left: 5px;
 }
 
 /*
@@ -230,162 +222,166 @@ function onDrop(e: DragEvent) {
 */
 
 .img-label .icon-font {
-	font-size: 30px;
-	margin-bottom: 10px;
+  font-size: 30px;
+  margin-bottom: 10px;
 }
 
 .img-label span {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 .file-input {
-	display: none;
+  display: none;
 }
 
 .files-wrapper {
-	flex-direction: column;
-	border-radius: 10px;
-	/*overflow: hidden;*/
-	min-height: calc(var(--input-height) * 1.5);
+  flex-direction: column;
+  border-radius: 10px;
+  /*overflow: hidden;*/
+  min-height: calc(var(--input-height) * 1.5);
 
-	font-size: var(--input-font-size);
+  font-size: var(--input-font-size);
 }
 
 .drop-zone {
-	background-color: var(--bgl-bg);
-	height: 100%;
-	width: 100%;
-	flex-grow: 1;
-	position: relative;
-	overflow: hidden;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	outline: dashed 1px var(--border-color);
-	border-radius: 10px;
-	padding: 1px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	color: var(--input-color);
+  background-color: var(--input-bg);
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  outline: dashed 1px var(--border-color);
+  border-radius: 10px;
+  padding: 1px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--input-color);
 }
 
 .drop-zone:hover {
-	color: var(--bgl-blue);
-	outline: dashed 1px var(--bgl-blue-tint);
+  color: var(--bgl-primary);
+  outline: dashed 1px var(--bgl-primary-tint);
 }
 
 .drop-circle {
-	pointer-events: none;
-	position: absolute;
-	width: 100px;
-	height: 100px;
-	border-radius: 50%;
-	background-color: var(--bgl-blue-tint);
-	display: flex;
-	transform: translate(-50%, -50%) scale(1);
-	transform-origin: left top;
+  pointer-events: none;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: var(--bgl-primary-tint);
+  display: flex;
+  transform: translate(-50%, -50%) scale(1);
+  transform-origin: left top;
 }
 
 .load-file-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: var(--bgl-white);
-	border-radius: var(--btn-border-radius);
-	width: 100%;
-	color: var(--input-color);
-	height: var(--btn-height);
-	padding: 0.5rem;
-	height: 46px;
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-	white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--bgl-white);
+  border-radius: var(--btn-border-radius);
+  width: 100%;
+  color: var(--input-color);
+  height: var(--btn-height);
+  padding: 0.5rem;
+  height: 46px;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  white-space: nowrap;
 }
 
 .load-file-bar p {
-	width: calc(100% - 40px);
-	overflow: hidden;
-	text-overflow: ellipsis;
+  width: calc(100% - 40px);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .load-file-bar span {
-	font-size: 10px;
+  font-size: 10px;
 }
 
 .pie {
-	width: 30px;
-	height: 30px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  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-blue) 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)));
+  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;
+  transform: scale(0);
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
 }
 
 .pie .progress {
-	position: absolute;
-	font-size: 10px;
+  position: absolute;
+  font-size: 10px;
 }
 
 .pie.complete .progress {
-	display: none;
+  display: none;
 }
 
 .pie.complete .success {
-	transform: scale(1.3);
-	opacity: 1;
+  transform: scale(1.3);
+  opacity: 1;
 }
 
 .pie.complete:before {
-	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
+  background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
 
 .pie.complete {
-	color: var(--bgl-green);
+  color: var(--bgl-green);
 }
 </style>
 <style>
 .pop-enter-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .pop-leave-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .pop-enter-from,
 .pop-leave-to {
-	scale: 0;
+  scale: 0;
 }
 
 .delete-btn {
-	margin-inline-end: -30px;
-	opacity: 0;
-	margin-inline-start: 10px;
+  margin-inline-end: -30px;
+  opacity: 0;
+  margin-inline-start: 10px;
 }
 
 .uploading-wrap:hover .delete-btn {
-	opacity: 1;
-	margin-inline-end: 0;
+  opacity: 1;
+  margin-inline-end: 0;
 }
 </style>